intermediate

Design tokens

Представляйте цвет, отступы, типографику, motion, breakpoints и семантические значения как переиспользуемые контракты продукта.

Design tokens кодируют продуктовые решения — роли цвета, spacing, типографику, radii, тени, motion, breakpoints — как переиспользуемые именованные значения. Raw tokens хранят примитивы (`blue-500`); semantic tokens выражают intent (`color-text-primary`, `space-stack-md`).

					:root {
  --color-blue-500: #3b82f6;
  --color-text-primary: var(--color-gray-900);
  --color-accent: var(--color-blue-500);
}
[data-theme="dark"] {
  --color-text-primary: var(--color-gray-100);
}

Tokens могут быть CSS variables, JSON для design tools или выходами под платформы. На масштабе важны governance: кто добавляет, deprecation и aliasing.

На интервью: raw vs semantic tokens, поддержка тем и связка с CSS variables или сборкой.

Компромисс: строгий governance tokens против скорости, когда разовые значения обходят систему.

Типовые ошибки: имена tokens из hex; слишком много разовых tokens маскируют несогласованный дизайн.

Чеклист:

Разделяйте примитивы и semantic roles.
Документируйте владение и deprecation.
Runtime variables для темизации.
Аудит one-offs вне системы.