Токены · машино-читаемые
Дизайн-токены
Цвет и типографика в формате 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.
Карта CSS-переменных
Все значения в HSL — Tailwind резолвит через hsl(var(--token)).
| Token | HSL | HEX | Preview |
|---|---|---|---|
--background | 228 33% 99% | #FAFBFD | |
--foreground | 226 33% 18% | #1F2438 | |
--card | 0 0% 100% | #FFFFFF | |
--primary | 229 82% 15% | #071246 | |
--primary-foreground | 0 0% 100% | #FFFFFF | |
--secondary | 227 32% 88% | #D8DDE9 | |
--muted | 225 31% 95% | #EDF0F6 | |
--muted-foreground | 228 30% 48% | #56649F | |
--accent | 225 33% 93% | #E5E9F2 | |
--border | 227 30% 91% | #DFE3EE | |
--input | 227 22% 61% | #868FB1 | |
--ring | 229 82% 15% | #071246 | |
--ring-offset | 228 33% 99% | #FAFBFD | |
--destructive | 0 72% 45% | #C52020 | |
--destructive-text | 0 68% 46% | #C52626 | |
--destructive-accent | 0 82% 65% | #EE5959 | |
--warning | 48 100% 96% | #FFFBEB | |
--warning-border | 46 97% 65% | #FCD44F | |
--warning-foreground | 22 78% 26% | #76350F | |
--warning-accent | 32 95% 44% | #DB7706 | |
--success | 142 76% 36% | #16A249 | |
--skeleton | 227 32% 88% | #D7DBEA | |
--overlay | 226 33% 18% | #1F2438 | |
--chart-1 | 229 82% 15% | #071246 | |
--chart-2 | 228 82% 28% | #0E3382 | |
--chart-3 | 228 83% 66% | #5C7CEA | |
--chart-4 | 228 82% 78% | #92A6F0 | |
--chart-5 | 226 32% 71% | #A0AAC4 | |
--radius | 0.375rem · 6px |
Использование
Tailwind
<div className="bg-primary text-primary-foreground" /> <button className="focus-ring rounded-lg bg-primary px-4 py-2" />
Plain CSS
.cta {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}