МЕСТО
Токены · машино-читаемые

Дизайн-токены

Цвет и типографика в формате W3C Design Tokens (JSON) и drop-in CSS-переменных. Используется в Figma Tokens / Style Dictionary / прямо в app/globals.css.

Файлы

Все три файла — единый источник правды. Если меняешь токен — обновляй сразу везде.

colors.jsonJSON

W3C Design Tokens — цвет, foreground, charts. Совместимо со Style Dictionary, Figma Tokens.

ОткрытьСкачать
typography.jsonJSON

W3C Design Tokens — типографическая шкала, веса, tracking, line-height.

ОткрытьСкачать
tokens.cssCSS

Drop-in :root блок CSS-переменных для app/globals.css. Mirror живого деплоя.

ОткрытьСкачать

Карта CSS-переменных

Все значения в HSL — Tailwind резолвит через hsl(var(--token)).

TokenHSLHEXPreview
--background228 33% 99%#FAFBFD
--foreground226 33% 18%#1F2438
--card0 0% 100%#FFFFFF
--primary229 82% 15%#071246
--primary-foreground0 0% 100%#FFFFFF
--secondary227 32% 88%#D8DDE9
--muted225 31% 95%#EDF0F6
--muted-foreground228 32% 53%#6F7B9C
--accent225 33% 93%#E5E9F2
--border227 30% 91%#DFE3EE
--ring229 82% 15%#071246
--destructive0 82% 65%#EE5959
--chart-1229 82% 15%#071246
--chart-2228 82% 28%#0E3382
--chart-3228 83% 66%#5C7CEA
--chart-4228 82% 78%#92A6F0
--chart-5226 32% 71%#A0AAC4
--radius0.375rem · 6px

Использование

Tailwind
<div className="bg-primary text-primary-foreground" />
<button className="rounded-md bg-primary px-4 py-2" />
Plain CSS
.cta {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}