Цвет

Токены светлой и тёмной темы

Из одного бренд-цвета собирает переменные обеих тем: фоны, текст, границы и кнопки — и сразу проверяет контраст каждой пары по WCAG.

Бренд

Основной цвет

Он же строкой

Цветность нейтралей: 0.012

Ноль — честно серые фоны. Небольшая цветность подмешивает тон бренда: рядом с цветной кнопкой чистый серый выглядит грязным.

Формат значений

Светлая

Карточка инструмента

Второстепенная подпись под заголовком.

Кнопка

Тёмная

Карточка инструмента

Второстепенная подпись под заголовком.

Кнопка

Контраст

Тема	Пара	Контраст	Оценка
Светлая	Основной текст на фоне страницы	16.65	AAA
Светлая	Второстепенный текст на карточке	8.44	AAA
Светлая	Приглушённый текст на карточке	4.66	AA
Светлая	Текст на кнопке	6.29	AA
Светлая	Кнопка на фоне страницы	6.03	AA
Тёмная	Основной текст на фоне страницы	17.22	AAA
Тёмная	Второстепенный текст на карточке	8.85	AAA
Тёмная	Приглушённый текст на карточке	5.07	AA
Тёмная	Текст на кнопке	7.6	AAA
Тёмная	Кнопка на фоне страницы	7.03	AAA

Переменные обеих тем

/* Светлая тема — значения по умолчанию */
:root {
  --color-primary: #4f46e5;
  --color-primary-hover: #402bcd;
  --color-primary-soft: #e6eaff;
  --color-on-primary: #ffffff;
  --bg-page: #f9faff;
  --bg-surface: #ffffff;
  --bg-inset: #eef0f8;
  --text-primary: #191a20;
  --text-secondary: #4b4d54;
  --text-muted: #72747c;
  --border-subtle: #dcdde6;
}

/* Тёмная тема — переключателем */
[data-theme="dark"] {
  --color-primary: #8893fa;
  --color-primary-hover: #a5b1ff;
  --color-primary-soft: #252950;
  --color-on-primary: #000000;
  --bg-page: #0c0d12;
  --bg-surface: #17181e;
  --bg-inset: #22242a;
  --text-primary: #eff1fa;
  --text-secondary: #b5b7bf;
  --text-muted: #878991;
  --border-subtle: #34353c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #8893fa;
    --color-primary-hover: #a5b1ff;
    --color-primary-soft: #252950;
    --color-on-primary: #000000;
    --bg-page: #0c0d12;
    --bg-surface: #17181e;
    --bg-inset: #22242a;
    --text-primary: #eff1fa;
    --text-secondary: #b5b7bf;
    --text-muted: #878991;
    --border-subtle: #34353c;
  }
}

Шкала бренда 50–950

:root {
  --brand-50: #f2f4ff;
  --brand-100: #d1d9ff;
  --brand-200: #b1bcff;
  --brand-300: #939fff;
  --brand-400: #777fff;
  --brand-500: #5f60f5;
  --brand-600: #4c45d9;
  --brand-700: #3a32b0;
  --brand-800: #2a2089;
  --brand-900: #1a0e63;
  --brand-950: #0c0040;
}