Токены дизайна

Система дизайн-токенов обеспечивает консистентность визуального языка проекта. Все токены определены в src/routes/layout.css и используются через Tailwind CSS v4.

Цвета

Основные цвета

Токен	Назначение	Светлая тема	Тёмная тема
`--background`	Основной фон	`oklch(1 0 0)` (белый)	`#090909` (почти чёрный)
`--background-inset`	Фон вложенных элементов	`oklch(0.9764 0.0013 265)`	`#0d0d0d`
`--background-muted`	Приглушённый фон	`oklch(0.9264 0.002 265)`	`oklch(0.22 0.006 265)`
`--foreground`	Основной текст	`oklch(0.1881 0.006 265)`	`oklch(0.9674 0.0013 265)`
`--foreground-muted`	Приглушённый текст	`oklch(0.5493 0.0081 265)`	`oklch(0.669 0.0107 265)`
`--border`	Границы	`oklch(0 0.0013 265 / 0.08)`	`oklch(1 0.013 265 / 0.05)`
`--highlight`	Подсветка	`oklch(0 0.0013 265)`	`oklch(1 0.013 265)`

Акцентные цвета

Токен	Назначение	Значение	Использование
`--accent`	Основной акцент	`#f43f5e` (Rose 500)	Ссылки, кнопки, выделения
`--accent-secondary`	Вторичный акцент	`oklch(0.4 0.18 5)`	Дополнительные акценты

Базовый оттенок

Все цвета сhue-зависимостью используют --base-hue: 265 (фиолетовый). Это позволяет легко изменить цветовую схему всего проекта, изменив только одно значение.

Типографика

Шрифты

Токен	Значение	Использование
`--font-sans`	Inter, ui-sans-serif, system-ui	Основной текст
`--font-mono`	ui-monospace, SFMono-Regular, Menlo	Код, моноширинный текст

Межбуквенные интервалы

Токен	Значение	Использование
`--tracking-tighter`	-0.06rem	Крупные заголовки
`--tracking-tight`	-0.035rem	Заголовки
`--tracking-normal`	-0.01rem	Основной текст
`--tracking-wide`	0.005rem	Акцентный текст
`--tracking-wider`	0.03rem	Метки, надписи
`--tracking-widest`	0.08rem	Uppercase заголовки

Скругления

Система скруглений построена на базовом значении --radius-base: 0.275rem:

Токен	Значение	Использование
`--radius-xs`	0.275rem (4.4px)	Мелкие элементы
`--radius-sm`	0.55rem (8.8px)	Кнопки, инпуты
`--radius-md`	0.825rem (13.2px)	Карточки
`--radius-lg`	1.1rem (17.6px)	Большие карточки
`--radius-xl`	1.65rem (26.4px)	Модальные окна
`--radius-2xl`	2.2rem (35.2px)	Крупные блоки
`--radius-3xl`	3.3rem (52.8px)	Плавные блоки
`--radius-4xl`	4.4rem (70.4px)	Очень крупные элементы
`--radius-full`	9999px	Круглые элементы

Тени

Система теней с последовательным увеличением глубины:

Токен	Описание	Применение
`--shadow-xs`	Едва заметная	Тонкие границы
`--shadow-sm`	Маленькая	Поднятые элементы
`--shadow-md`	Средняя	Карточки
`--shadow-lg`	Большая	Выпадающие меню
`--shadow-xl`	Очень большая	Модальные окна
`--shadow-2xl`	Огромная	Главные акценты

Каждая тень состоит из нескольких слоёв с нарастающей интенсивностью и радиусом размытия.

Утилиты

Card

Утилита .card создаёт эффект карточки с верхней подсветкой, границей и мягкой тенью:

.card {
  box-shadow:
    0 -0.5px rgba(255, 255, 255, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 0.5px oklch(from var(--highlight) l c h / 8%),
    0 1px 6px -4px #000;
}

.card {
  box-shadow:
    0 -0.5px rgba(255, 255, 255, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 0.5px oklch(from var(--highlight) l c h / 8%),
    0 1px 6px -4px #000;
}

Inset Shadow

Утилита .inset-shadow создаёт эффект вдавленности:

.inset-shadow {
  box-shadow:
    inset 0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
    inset 0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
    inset 0px 6px 6px -3px rgba(0, 0, 0, 0.06),
    inset 0 -0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 0.5px oklch(from var(--highlight) l c h / 8%);
}

.inset-shadow {
  box-shadow:
    inset 0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
    inset 0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
    inset 0px 6px 6px -3px rgba(0, 0, 0, 0.06),
    inset 0 -0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 0.5px oklch(from var(--highlight) l c h / 8%);
}

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

Все цветовые токены доступны через Tailwind классы с префиксом bg-, text-, border-:

<div class="bg-background text-foreground">
  <p class="text-foreground-muted">Приглушённый текст</p>
  <a class="text-accent">Акцентная ссылка</a>
</div>

<div class="bg-background text-foreground">
  <p class="text-foreground-muted">Приглушённый текст</p>
  <a class="text-accent">Акцентная ссылка</a>
</div>

Программное использование

Токены доступны через JavaScript через getComputedStyle:

const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent');
// '#f43f5e'

const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent');
// '#f43f5e'

Или напрямую в CSS:

.custom-element {
  background: var(--background-inset);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.custom-element {
  background: var(--background-inset);
  border: 1px solid var(--border);
  color: var(--foreground);
}