Родной — дизайн-система

1 · Цвета DS-C / DS-B / DS-L / DS-T

Формат RGB-триплетов: rgb(var(--color-primary)). Тёмная тема = правка 8 фоновых токенов, компонентов трогать не нужно.

DS-C-03 --color-primary

#2D7BFF · 45 123 255

DS-C-05 --primary-hover

#2563EB · 37 99 235

DS-C-02 --brand-deep

#0A1D4D · 10 29 77

DS-C-12 --accent

#06B6D4 · 6 182 212

DS-C-16 --success

#10B981 · 16 185 129

DS-C-18 --warning

#F59E0B · 245 158 11

DS-C-20 --error

#EF4444 · 239 68 68

DS-C-14 --info

#0EA5E9 · 14 165 233

DS-B-01 --bg-app

#F8FAFC · 248 250 252

DS-B-02 --bg-surface

#FFFFFF

DS-B-03 --bg-muted

#EBEFF6 · 235 239 246

DS-B-04 --bg-inverse

#0F172A · 15 23 42

DS-L-01 --border-subtle

#E2E8F0 · 226 232 240

DS-T-01 --text-main

#0F172A · 15 23 42

DS-T-02 --text-muted

#64748B · 100 116 139

Градиент бренда

light → deep

2 · Типографика DS-F

Шрифт бренда — Satoshi (Fontshare), системный фолбэк — Inter (Google Fonts). Заголовки — 700, текст — 400/500.

DS-F-11 48pxЗаголовок героя 5xl

DS-F-10 36pxЗаголовок секции 4xl

DS-F-08 24pxПодзаголовок 2xl

DS-F-05 16pxОсновной текст base — colлективные закупки для всех

DS-F-04 14pxВторостепенный текст sm

DS-F-03 12pxПодписи и метки xs

3 · Отступы, радиусы, тени, движение DS-S / DS-R / DS-H / DS-M

Отступы (шкала 4px)

--space-1

4px

--space-2

8px

--space-4

16px

--space-8

32px

--space-16

64px

Радиусы и тени

--radius-sm + xs

--radius-md + sm

--radius-lg + md

--radius-xl + lg

Движение: 120 / 200 / 320 / 480 мс, изинги smooth, snappy, bounce, glide. Z-шкала: dropdown 30 → tooltip 80.

4 · Компоненты DC-01…DC-18

Живые образцы. Стили — только через токены, поэтому смена токена обновляет все страницы сразу.

DC-02 · Кнопки

DC-03 · Бейджи

критический путь готово в работе новый комментарий рост операции backlog

DC-05 · Инпуты

Email

Комментарий

DC-07 · Алерты и прогресс

ℹ Пул набирается: осталось 6 человек до средней цены

✓ Пул собран — цена зафиксирована 980 ₽

⚠ До дедлайна пула осталось 24 часа

DC-10 · Аккордеон

Средства замораживаются платёжным шлюзом и уходят поставщику только после подтверждения получения. Если пул не собрался — авто-возврат за 3 дня.

DC-06 · Таблица

Тир	Участников	Цена
Мелкий опт	от 5	1 120 ₽
Средний опт	от 20	980 ₽
Крупный опт	от 50	850 ₽

5 · Как быстро менять дизайн

01

Найдите токен

По ID (DS-C-03), имени переменной (--color-primary) или hex (#2D7BFF) в design-index.json или на этой странице.

02

Поменяйте значение

Одна строка в assets/tokens.css. Формат RGB-триплет: 45 123 255.

03

Обновите индекс

Зеркально поправьте значение в design-index.json, чтобы поиск не врал.

04

Задеплойте

scp assets/tokens.css на сервер. Все страницы (план, дизайн-система, будущие) обновятся — кэш отключён в nginx.

Пример: тёмная тема за 8 строк

/* в tokens.css */
--bg-app:    10 15 26;   /* было 248 250 252 */
--bg-surface:16 22 35;
--bg-muted:  26 33 48;
--bg-inverse:248 250 252;
--border-subtle:40 48 64;
--text-main: 237 242 249;
--text-muted:148 163 184;
--bg-glass:  16 22 35;

Компоненты трогать не нужно — они ссылаются на токены.

Дизайн меняется в одном файле