Мини-дизайн-система

Токены и правила

Токены сняты с живого DOM bi.group, поэтому цвета и радиусы здесь измеренные, а не подобранные на глаз. Шрифт SF Pro Display. Набора хватает, чтобы собрать новую страницу и не выпасть из общего языка.

Цвет

Акцент один. Семантические цвета показывают статус показателя и никогда не используются для красоты.

Ink#1D1D1FЗаголовки, основной текст

Ink 2#444D60Вторичный текст

Ink 3#6B7386Мета, подписи

Accent#3152DFКнопки, ссылки, акцент

Accent press#27348BHover / нажатие

Accent soft#F5F9FFПодложка выделения

Surface#ECEFF3Секции, шапки таблиц

Surface 2#E6E6E7Чипы, дорожки

Норма#1B9C63Светофор: план выполнен

Внимание#8F5A06Светофор: зона риска

Риск#D0400FСветофор: провал

Line#E1E5EBГраницы, разделители

Все текстовые пары проверены на контраст. Минимум получился 4,75:1, это выше порога AA даже для мелкого шрифта.

Шрифт

SF Pro Display в трёх начертаниях. Подключаем как WOFF2, урезанный до кириллицы и латиницы: 47 КБ вместо 950 КБ.

Medium 500 · заголовки и интерфейс · трекинг −0,03em

Отчёт показывает, что план провален

Regular 400 · текст · трекинг −0,01em

Сшиваем CRM и учётную систему в один экран, где каждая цифра раскрывается до конкретной сделки, менеджера и причины провала.

Thin 100 · только крупные числа от 30px · трекинг −0,04em

8 977 ≤0,5% 2,08

Шкала размеров

60 / 500 / −.03emЗаголовок героя

42 / 500 / −.03emЗаголовок секции

18 / 500 / −.022emЗаголовок карточки

16 / 400Основной текст страницы

14 / 400Текст в карточках и таблицах

12 / 500Метки, подписи, метаданные

Форма и ритм

Сетка 4px и всего два радиуса. Больше не понадобилось.

Токен	Значение	Где применяется
`--r-sm`	`8px`	Кнопки, чипы, поля ввода, мелкие элементы
`--r-lg`	`20px`	Карточки, таблицы, секционные блоки
Шаг сетки	`4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64`	Все отступы и зазоры кратны 4px
Кнопка	`40px` / `48px`	Стандарт и крупная; горизонтальный отступ 20–24px
Чип	`30px`	Подложка `#E6E6E7`, радиус 8px
Контейнер	`1200px`	Поля 20px на мобильном, 40px на десктопе

Компоненты

Кнопки

Первичная кнопка залита акцентом, вторичная только обведена. Первичная на экране одна.

Чипы

СделкиПоступленияКонверсия

Нейтральный список без иерархии. Кликать их нельзя, иначе это уже кнопки.

Светофор

98% 0,82% 48,5%

Рядом с меткой ставим точку того же цвета, чтобы статус читался не только по цвету.

Карточка

Радиус 20px, граница #E1E5EB, тень почти незаметная. Шапка карточки заливается #ECEFF3.

Знак

Три полосы, которые становятся короче, это воронка, теряющая объём. Точка справа отмечает шаг, на котором она провалилась.

Размеры: 16, 24, 32, 48, 64. Ниже 16px не используем

На тёмном фоне плашка остаётся синей. Знак не инвертируется.

На сером работает без обводки: синий сам себя отделяет от фона.

Правила

✓Один акцент на экран. Синим отмечаем действие. Если покрасить всё, не выделено ничего.

✓Цифры в колонках только табличные. Ставим font-variant-numeric: tabular-nums везде, где числа выстраиваются друг под другом.

✓Крупный текст требует плотного трекинга. От 28px и выше ставим −0,03em, иначе заголовок расползается.

✕Thin не годится для текста. Начертание 100 идёт только на числа от 30px. На проекторе и обычном офисном мониторе тонкие штрихи в мелком кегле просто пропадают.

✕Радиусы не смешиваем. Только 8px и 20px, промежуточные значения выглядят как недосмотр.

✕Семантический цвет не украшение. Красный на странице означает провалившийся показатель, а не «важный блок».