Дизайн-система · v1

Дизайн-система UDS

Единый визуальный язык: цвет, типографика, компоненты. Всё на токенах, светлая и тёмная тема из коробки. Основа — бренд-коралл #ec3013, сверено с боевым сайтом.

01

Цвет

Один яркий акцент (коралл), спокойные нейтрали. В сплошных кнопках коралл затемняется до AA-варианта.

Нейтрали и поверхности

Статус

Правило контраста. Чистый коралл #ec3013 на белом тексте даёт 4.20 (ниже AA 4.5). Для сплошных кнопок с белым текстом берётся --uds-coral-aa #c72410 (контраст 5.69). Сам бренд-коралл живёт в eyebrow, иконках, баннере, тонких акцентах.
02

Типографика

Golos Text — гуманистический гротеск с полноценной кириллицей. Моно — Spline Sans Mono для лейблов и кода.
Про шрифт. Боевой uds-business.com сейчас на Archivo (латиница, кириллица в системный фолбэк). Golos Text — предложение новой брендовой гарнитуры для ровной кириллицы. Смена шрифта на сайте — отдельное решение; система к обеим готова через --uds-font-display.
03

Компоненты

Кирпичи страниц UDS. Классы префикснуты .uds-* в файле компонентов.

Кнопки, пилюли

Розница Разбор экосистемы
Аудио подкаст-разбор
Ювелирная сеть «София» · два ведущих
1:162:03

Метрики

Возвраты
×2,4
Средний чек
+31%
База
18 900
Note-плашка. Пунктирная рамка на нежно-коралловом фоне: примечания, оговорки, честные границы. Не для рекламы — для точности.
UDS uds-business.com

Панель / сайдбар

Липкая панель выбора: опции-радиокарточки, акцент на активной.

.uds-btn-primary{
  background: var(--uds-coral-aa);
  color: var(--uds-on-coral);
}
04

Форма и ритм

Скругления, тени, шаг сетки 4px. Тени мягкие и редкие — вес держит структура, не эффекты.

Скругления

16 / --radius
11 / --radius-sm
999 / pill

Тени

--shadow
--shadow-lg
05

Как пользоваться

Файлы системы лежат в репозитории:

  • _system/design-system/uds-tokens.css — токены (цвет, шрифт, ритм, темы). Подключать первым.
  • _system/design-system/uds-components.css — классы .uds-*. Требует токены.
  • _system/design-system/style-guide.html — эта живая витрина (источник этого артефакта).
  • _system/design-system/README.md — как встроить, правила, развилка по шрифту.

Подключение в любой странице/проекте:

<link rel="stylesheet" href="/design-system/uds-tokens.css">
<link rel="stylesheet" href="/design-system/uds-components.css">
<body class="uds-root"> ... </body>

Правило одно: цвета и размеры — только через токены var(--uds-*), не сырые hex. Тогда тёмная тема и правки бренда идут в одном месте.