The design system lives in production HTML. Not in Figma, not in the component repository. It can be seen in how many different shades of gray are actually given to the browser, how many variants of the "Buy" button there are on the site, and whether the focus on the keyboard behaves the same in the checkout and in the feedback form. Everything else is intentions.
Below is what the system is made of and how to see with your own eyes whether it is being used or not.
What breaks when there is no system
The symptoms are recognisable. 40 shades of gray live in the compiled CSS, because each new screen brought its own. The Submit button has three different heights on three pages. The developer, having received the layout of a new section, spends half a day to find out which indent is "correct" here, and in the end takes the one that stood in the neighboring component.
Another cost is the inability to quickly change something globally. The brand changes the main color: in the system, this is the modification of one token. Without a system - a search in the entire repository, a week of edits and almost guaranteed a forgotten hover somewhere in the footer of the old landing page.
Three levels: tokens, components, composition
Level 1: Tokens
Tokens are atomic values that everything else references. There should not be any "magic" number in the component.
:root {
/* Colors */
--color-primary-50: #f0fdf4;
--color-primary-500: #22c55e;
--color-primary-900: #14532d;
/* Typography */
--font-family-sans: 'Inter', system-ui, sans-serif;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
/* Indents */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-8: 2rem;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
The rule that saves the most arguments: you can't write color directly in a component. Variable only. Not having the right nuance is a reason to talk about a token rather than adding another hardcode.
Level 2: Basic components
// Button.tsx
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost'
size: 'sm' | 'md' | 'lg'
children: React.ReactNode
isLoading?: boolean
}
