Техническая страница
Дизайн-система
Открывается рядом с 6-дизайн/preview.html для сверки цветов, шрифтов, радиусов и отступов.
1. Типографика
Заголовок экрана
1.875rem · 700 · 1.2
Заголовок блока
1.375rem · 600 · 1.3
Подзаголовок
1.0625rem · 600 · 1.4
Основной текст. Отклонение 6 дней · прогноз 10.08 вместо 05.08 — цифры табличные, при обновлении данных не «пляшут».
0.9375rem · 400 · 1.55
Текст кнопки
0.875rem · 500 · 1
Метка-надзаголовок
0.75rem · 500 · 1.4 · разрядка 0.06em
2. Палитра
Холст страницы
--canvas · #f3f5f9
Поверхность карточки
--surface · #ffffff
Поверхность вторичная
--surface-soft · #fafbfd
Текст основной
--ink · #1b2742
Текст приглушённый
--muted-ink · #596780
Граница карточек
--border · #dee4ed
Граница полей
--border-strong · #7b8aa3
Панель и главная кнопка
--navy · #15294a
Наведение на главную
--navy-hover · #203b67
Наведение на пункт меню
--navy-deep · #101f39
Ссылки и кольцо фокуса
--cobalt · #3568d4
Ссылка при наведении
--cobalt-deep · #2857b8
Подложка акцента
--cobalt-soft · #e8eefc
Активный пункт (на тёмном)
--brand · #e8b74f
Срок сорван
--danger · #d94f5f
Близкий срок
--warning · #b97815
По плану
--success · #238264
Обращение
--info · #666ed4
3. Кнопки
Обычный размер · отступы 10×16
Компактный · внутри строки списка · отступы 8×12
Неактивные · 45% и курсор «запрещено»
Доступно только из состояния «Готов».
Пояснение причины рядом обязательно: кнопка, которая молча не нажимается, считается дефектом.
Ссылка
Версия 3 принята — открыть историю версий.
Наведение и фокус проверяются мышью и клавишей Tab: у главной кнопки фон меняется на --navy-hover, у всех — кольцо фокуса 3px.
4. Поля и формы
Срок — конец указанного дня. Нужно к утреннему совещанию? Ставьте предыдущий рабочий день.
Укажите плановый срок — без него результат нельзя добавить в маршрут.
5. Карточки и списки
Обычная карточка
Фон --surface, граница 1px --border, радиус 12px, отступы 20px. Теней нет: на плотном экране они дают рябь.
Строка с проблемой
Помечается цветной полосой слева 3px, а не заливкой целиком. У элемента с полосой скругление убирается.
6. Сигналы состояния
Срок сорван
2
Близкий срок
5
По плану
11
Обращения
1
Точки статуса
Цвет только дублирует смысл. Рядом с точкой всегда есть факт, текст или скрытая подпись для программ чтения с экрана.
- Срок сорванСАУ АМП — отклонение 6 дней · прогноз 10.08 вместо 05.08
- Есть риск срокаСборочное производство — 2 критерия не закрыты, срок 12.08
- По плануКонцессия — 11 из 19 критериев, ближайшая точка 19.08
7. Радиусы
Бейдж, чип
6px
Кнопка, поле
8px
Карточка
12px
Модальное окно
16px
Точка, аватар
круг