Цвет, шрифт и пространство
Ниже — общая система Steep для документации и главной. Композиция главной описана отдельно.
Палитра
Фон · Paper
#FFFFFFПоверхность
#FFFFFFМягкий фон
#F2F2F3Основной текст
#17191CВторичный текст
#686D77Акцент
#17191C| Токен | Значение | Назначение |
|---|---|---|
--sf-paper | #FFFFFF | Основной фон |
--sf-surface | #FFFFFF | Поля, поиск, всплывающие поверхности |
--sf-surface-soft | #F2F2F3 | Выбранный раздел, сообщение пользователя |
--sf-ink | #17191C | Заголовки и основной текст |
--sf-muted | #686D77 | Пояснения и вторичная навигация |
--sf-brand | #17191C | Только главное действие |
--sf-brand-hover | #383B40 | Наведение на главное действие |
--sf-border | #ECECEC | Декоративные разделители |
--sf-input-border | #777B86 | Мягкая граница поля |
--sf-focus | #17191C | Видимый фокус клавиатуры |
--sf-warning | #815B18 | Требуется внимание |
--sf-danger | #A33636 | Ошибка или подтверждённая опасность |
Тёмная заливка означает основное действие; сам по себе он не доказывает, что сайт безопасен. Статусы всегда подписываем. Бледные разделители — декоративные; не используем их как единственный способ распознать контрол или его состояние. Поле имеет подпись, отличимую поверхность и явный фокус.
Типографика
Заголовки — Georgia, "Times New Roman", serif, вес 400, трекинг −0.015em. Текст, навигация и кнопки — Inter / системный sans-serif; код — Menlo / Consolas. Это локальные замены Signifier и Söhne из Steep; внешние шрифты не загружаются.
| Роль | Размер / высота строки | Вес |
|---|---|---|
| Главный заголовок | 44–72 px / 1.2 | 400 |
| Заголовок статьи | 36–56 px / 1.2 | 400 |
| Раздел статьи | 30–40 px / 1.35 | 400 |
| Подраздел | 24–28 px / 1.3 | 400 |
| Текст документации | 17 px / 1.8 | 400 |
| Пояснение на главной | 16–18 px / 1.6 | 400 |
| Навигация и контролы | 12–16 px / 1.5 | 400–500 |
| Второстепенная подпись | 12–13 px / 1.6 | 400 |
Навигация, кнопки и метки — в обычном регистре. Длинные названия разделов в sidebar сохраняют обычный регистр для читаемости.
Не используем мелкую подпись для критичного предупреждения. В тексте статьи не больше трёх уровней заголовков. Длинные строки ограничиваем шириной 720 px.
Пространство и форма
Базовая сетка — 4 px. Контентные карточки 24 px, поля и компактные блоки 16 px, кнопки pill 100 px. Между разделами 64–80 px. Отступы карточек 20–32 px. Границы 1 px, контентные карточки без теней. Не превращаем каждый абзац в карточку.
Декор и движение
Белая основа, serif-заголовки, sans-serif текст, нейтральные поверхности. Персиковый #FBE1D1 с тёмно-коричневым #5D2A1A — редкий акцент. Синий, фиолетовый и зелёный не используются как декоративные брендовые цвета. Смысловые предупреждения и зелёный замок в демо сохраняются.
Переходы состояний занимают 120–180 мс и не задерживают действие. Фон не анимируется постоянно. prefers-reduced-motion отключает необязательные переходы. Видео, WebGL и вступительная хореография не нужны для начала разговора.