A great product needs a great design system. As Foshati grew, we realized we needed a systematic approach to design and development. Here's how we built our design system from the ground up.
Foundation: Design Tokens
We started with design tokens—the atomic building blocks of our design system. Colors, typography, spacing, and shadows are all defined as CSS custom properties in our theme configuration. This allows us to maintain consistency and make global changes effortlessly.
Our primary orange (#f97316) isn't just a color—it's a carefully chosen brand element that conveys energy, creativity, and warmth. We paired it with a neutral gray scale and accent colors for a balanced, professional palette.
Component Architecture
Every component follows a consistent pattern:
- Variants: Different visual styles (primary, secondary, ghost, outline)
- Sizes: Consistent sizing scale (sm, md, lg)
- States: Hover, active, disabled, and loading states
- Accessibility: ARIA labels, keyboard navigation, focus indicators
We use Tailwind CSS with custom utilities, allowing us to compose styles rapidly while maintaining consistency. Our BEM-inspired class naming makes styles predictable and maintainable.
Typography System
We use two typefaces: Inter for body text and UI elements, and Instrument Serif for headings. This combination provides excellent readability while adding personality. Our type scale follows a modular scale for harmonious proportions.
Spacing and Layout
Consistent spacing creates visual rhythm. We use an 8px base unit with a scale that doubles at each step (8, 16, 24, 32, 48, 64). Our layout system uses CSS Grid and Flexbox for responsive, flexible designs.
Documentation and Governance
A design system is only useful if people use it correctly. We maintain comprehensive documentation with live examples, usage guidelines, and code snippets. Regular design reviews ensure consistency across features.
The Impact
Since implementing our design system, development velocity has increased by 40%, design-to-development handoff is smoother, and our UI feels cohesive across every page. Most importantly, our users benefit from a consistent, intuitive experience.