Цвета
Цветовая система базы знаний устроена в два слоя:
- VitePress Default Theme — основа. Все нейтральные тона, текст, фоны, разделители берутся из встроенных
--vp-c-*переменных. - Брендовая кастомизация — поверх. Один цвет, переопределяющий primary-CTA, плюс несколько кастомных
--vp-*переменных для layout-параметров.
Брендовая палитра
Айдентика «Профстандарт» — два фирменных цвета: синий и жёлто-оранжевый. Оба видны в логотипе и используются в продукте как primary / secondary CTA.
Где используется в docs-app сейчас
Синий (#5681c8 / #4566a0) — vp-home-btn--primary на главной (см. custom.css:629–639).
Жёлто-оранжевый (#f6af19) — заведён как класс vp-home-btn--accent в custom.css:641–653 и как переменная --cl-accent в :root. Используется в логотипе (/img/logo.svg), в SVG-иллюстрациях статей (public/img/stati/*.svg) и точечно в маркетинге (бейджи «Бесплатно», бонусы, второстепенные CTA).
⚠️ Важно: в main-app параллельно живут два жёлтых — #f6af19 (54 раза) и #fea904 (27 раз). Канон — #f6af19. В docs-app после миграции остался только #f6af19. Никогда не вводите #fea904 обратно.
Как применять оранжевый CTA
Класс vp-home-btn--accent уже доступен — используйте его, не переопределяйте цвет литерально:
<a class="vp-home-btn vp-home-btn--accent" href="…">
Получить бесплатный аудит
</a>Правила применения:
- Оранжевый не ставим на главный primary-CTA — для primary всегда
vp-home-btn--primary(синий). - Оранжевый уместен там, где смысл — «акция, бесплатно, бонус, второстепенное действие в паре». Пример: «Запросить демо» (primary, синий) + «Получить бесплатный аудит» (accent, оранжевый).
- На странице должна быть одна accent-кнопка в зоне видимости. Если две — обе становятся фоном, и весь смысл «акцента» теряется.
Контраст
Жёлтый #f6af19 с белым текстом даёт контраст 2.1:1 — это ниже WCAG AA даже для крупного текста. С тёмным текстом (#202020) контраст 9.2:1 — отлично. Поэтому на оранжевых кнопках текст должен быть тёмным, не белым.
Откуда взяты значения: .vp-home-btn--primary (custom.css:629–639) для синего; main-app/src/views/**/btn-orange для жёлтого (см. Анализ кода/design-system-audit.md §2.3).
.vp-home-btn--primary {
background: #5681c8;
color: #fff;
border-color: #5681c8;
}
.vp-home-btn--primary:hover {
background: #4566a0;
border-color: #4566a0;
color: #fff;
}State-цвета (успех / предупреждение / ошибка)
Помимо двух фирменных цветов, в продукте есть набор служебных state-цветов — для галочек «всё ок», для предупреждений и дедлайнов, для штрафов и ошибок. Они согласованы с brand (приглушённые оттенки, не «фосфорный» green/red), чтобы интерактивы и иллюстрации не выбивались из общего стиля.
В custom.css они выведены как CSS-переменные:
:root {
--cl-state-ok: #3e8635;
--cl-state-warn: #b86f00;
--cl-state-urgent: #c45a4a;
--cl-state-danger: #a32d2d;
--cl-state-info: #476582;
}Используйте только переменные, не литералы. Если нужен полупрозрачный фон (бэйдж, плашка) — через color-mix:
background: color-mix(in srgb, var(--cl-state-ok) 12%, transparent);
color: var(--cl-state-ok);⚠️ Важно: state-цвета — не для CTA. Кнопки берут brand-цвета (--cl-brand / --cl-accent), даже если кнопка ведёт к «срочному» действию. State-цвета — для иконок, рамок плашек, текста статусов («просрочено», «выполнено», «требуется обучение»).
VitePress-токены (используются как есть)
Все остальные цвета приходят от VitePress. В custom.css они доступны через переменные:
| Переменная | Назначение | Где применяется в custom.css |
|---|---|---|
--vp-c-bg | Основной фон страниц/карточек | .vp-home-card, .vp-doc-hub-card, .vp-video-card |
--vp-c-bg-soft | Альт. фон, hover для secondary | .vp-home-btn--secondary:hover, .vp-video-thumb |
--vp-c-text-1 | Основной текст | .vp-home-lead, .vp-doc-hub-card__title |
--vp-c-text-2 | Вторичный текст | .vp-home-registry, .vp-home-card-body p |
--vp-c-brand-1 | Акцент (focus, hover-бордер карточек) | :focus-visible, .vp-home-card:hover |
--vp-c-divider | Разделители | как fallback в .vp-video-card |
VitePress хранит эти значения отдельно для светлой и тёмной темы. Сейчас в config.mts стоит appearance: false — тёмная тема отключена; используется только светлая.
Не лезть в --vp-c-brand-1
Дефолт VitePress для --vp-c-brand-1 — #3451b2 (фиолетовый). Он встречается как fallback в custom.css:999, но фактически используется только для focus-ring и hover-бордеров карточек. Менять его на наш #5681c8 глобально не нужно — это потянет переопределение всех brand-2 / brand-3 и сломает дефолтную тему.
Если когда-то понадобится сменить акцент VitePress — делать через :root { --vp-c-brand-1: ...; --vp-c-brand-2: ...; ... } в начале custom.css, а не точечно по компонентам.
Кастомные --vp-* переменные
Переопределяют layout и elevation для главной и хабов (custom.css:4–17):
| Переменная | Значение | Назначение |
|---|---|---|
--vp-sidebar-width | 336px | Ширина левого sidebar |
--vp-layout-max-width | 1680px | Максимальная ширина основного контента |
--vp-news-layout-max-width | 960px | Узкая колонка для новостей |
--vp-sidebar-bg-color | #ffffff | Белый фон левой панели |
--vp-home-radius | 12px | Радиус карточек главной и хабов |
--vp-home-border | 1px solid color-mix(in srgb, var(--vp-c-text-2) 18%, transparent) | Бордер карточек |
--vp-home-shadow | 0 1px 2px color-mix(in srgb, var(--vp-c-text-1) 6%, transparent) | Тень карточек |
Использование color-mix() для прозрачностей
В custom.css уже принят паттерн через color-mix вместо hex-альфы:
/* пример: бордер при hover карточки документации */
border-color: color-mix(in srgb, var(--vp-c-brand-1) 55%, transparent);
/* пример: тень карточки */
box-shadow: 0 4px 14px color-mix(in srgb, var(--vp-c-text-1) 8%, transparent);Это правильный паттерн — продолжать его. Не вводить #5681c8aa, #5681c855 и подобные альфа-литералы.
Контракт
| Хочу сделать | Что использовать |
|---|---|
| Primary CTA-кнопка (синий) | vp-home-btn--primary (var(--cl-brand)) |
| Secondary CTA (нейтральная) | vp-home-btn--secondary (через --vp-c-* токены) |
| Accent CTA (оранжевый, по бренду) | vp-home-btn--accent (var(--cl-accent) + тёмный текст var(--cl-accent-on)) |
| Бейдж «Бесплатно» / «Бонус» | var(--cl-accent) фон + тёмный текст var(--cl-accent-on) |
| Статус «успех», галочка | var(--cl-state-ok) |
| Статус «предупреждение» | var(--cl-state-warn) |
| Статус «срочно» | var(--cl-state-urgent) |
| Статус «ошибка / штраф» | var(--cl-state-danger) |
| Цитата, нейтральная плашка | var(--cl-state-info) |
| Фон страницы / карточки | var(--vp-c-bg) |
| Основной текст | var(--vp-c-text-1) |
| Вторичный текст / подписи | var(--vp-c-text-2) |
| Hover-бордер карточки | color-mix(in srgb, var(--vp-c-brand-1) 40-55%, transparent) |
| Focus-кольцо | outline: 2px solid var(--vp-c-brand-1) |
| Радиус карточки | var(--vp-home-radius) (= 12px) |
| Тень карточки | var(--vp-home-shadow) |
| Альфа-цвет | color-mix(in srgb, <token> N%, transparent) |
Запреты для нового кода в custom.css
- Никаких новых hex-литералов в Vue-компонентах и SVG-иллюстрациях. Все цвета — через переменные
--cl-*(brand, accent, state) или VitePress-токены--vp-c-*. Литералы допустимы только в:rootcustom.css— там, где переменные объявляются. - Никаких альфа-hex (
#xxxxxxaa,#xxxxxxYY). Толькоcolor-mix(in srgb, var(--cl-…) N%, transparent). - Не дублировать
--vp-c-*в:rootбез явной задачи. Если переопределяем — комментарий «почему». - Никогда
#fea904— канонический оранжевый только#f6af19. - Не вводить параллельные green/red вроде
#1a7340,#b3261e,#3c9d5d— они выбиваются из приглушённой brand-палитры.