Дизайн-система живет в продакшне-HTML. Не у Figma, не в репозитории с компонентами. Ее видно в том, сколько разных оттенков серого реально отдается браузеру, сколько на сайте вариантов кнопки «Купить» и одинаково ли ведет себя фокус на клавиатуре в чекате и в форме обратной связи. Все остальное – намерения.
Ниже — то, из чего систему составляют, и как увидеть своими глазами, пользуются ею или нет.
Что ломается, когда системы нет
Симптомы узнаваемы. В собранном CSS живет 40 оттенков серого, потому что каждый новый экран приносил свой. Кнопка «Отправить» на трех страницах имеет три разных высоты. Разработчик, получив макет новой главы, тратит полдня на выяснение того, какое отступление здесь «правильное», и наконец берет тот, что стоял в соседнем компоненте.
Более дорого обходится другое — невозможность быстро изменить что-либо глобально. Бренд изменяет основной цвет: в системе это правка одного токена. Без системы — поиск по всему репозиторию, неделя правок и почти гарантированно забытый hover где-то в футере старого лендинга.
Три уровня: токены, компоненты, композиция
Уровень 1: токены
Токены – атомарные значения, на которые ссылается все остальное. Никакого "магического" числа в компоненте быть не должно.
:root {
/* Цвета*/
--color-primary-50: #f0fdf4;
--color-primary-500: #22c55e;
--color-primary-900: #14532d;
/* Типографика */
--font-family-sans: 'Inter', system-ui, sans-serif;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
/* Отступы */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-8: 2rem;
/* Тени */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Правило, которое экономит больше споров: в компоненте нельзя писать цвет напрямую. Только переменная. Нет нужного оттенка – это повод поговорить о токене, а не добавить еще один хардкод.
Уровень 2: базовые компоненты
// Button.tsx
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost'
размер: 'sm' | 'md' | 'lg'
children: React.ReactNode
isLoading?: boolean
}
