Studio concept buildUX/UI and product design
Basalt
A marketing-site design system: tokens, type and components that survive two languages and two themes.
Client engagements are private under NDA. These systems are our own builds, shown to demonstrate the standard we deliver.
The problem it addresses
Marketing sites decay one landing page at a time. Every campaign adds another button style, dark mode breaks quietly, and the Arabic edition falls behind because nothing was designed to flip.
What the system does
- 01Design tokens for colour, type and spacing, defined once and mapped to light and dark themes.
- 02A component set — navigation, heroes, cards, pricing tables, forms — built right-to-left-first, so the Arabic edition is a build target, not a retrofit.
- 03A type scale and grid tuned per language: Latin and Arabic faces with matched optical sizes.
- 04Accessible by default: contrast, focus states and reduced-motion behaviour baked into the components.
- 05Reference pages that show every component in both languages and both themes.
Stack
- Figma
- Design tokens
- Astro
- Tailwind CSS
- Storybook
Architecture
Tokens as the single source of truth, exported to CSS custom properties and Figma variables; components in Astro, with Storybook as the living reference.
How we build this for you