Дизайн-система базы знаний

Раздел для контрибьюторов базы знаний — описывает стили, которые используются на этом сайте: цвета CTA, кнопки, карточки. Полезен тому, кто редактирует Markdown-страницы (вставка vp-home-btn, vp-home-card) и тому, кто правит custom.css.

Где это всё на самом деле

Сайт построен на VitePress + Default Theme (vitepress: ^1.6.4, vue: ^3.5.33). Большая часть визуала наследуется от VitePress — шрифты, отступы, типографика, базовая палитра нейтральных. Кастомизация лежит в одном файле:

.vitepress/theme/custom.css (~1050 строк)

Здесь же — переопределение CTA-цвета, кастомные блоки vp-home-*, vp-doc-hub-*, vp-video-* для домашней страницы и хабов.

Что описано

Раздел	Что внутри
Цвета	Брендовая палитра (синий #5681c8, оранжевый #f6af19), VitePress-токены нейтральных, кастомные --vp-* переменные
Кнопки и CTA	vp-home-btn, варианты --primary / --secondary, размер vp-home-btn-big
Картинки и иллюстрации	Правила использования изображений в базе знаний

В будущем сюда же — карточки (vp-home-card, vp-doc-hub-card, vp-video-card), hero-блок, сетка карточек.

Этот раздел не в публичном меню

Страница доступна по прямому URL /knowledge_base/design-system/, но не показывается в верхнем меню. Это сделано намеренно: дизайн- система — внутренний материал для команды, не для клиентов- специалистов по охране труда.

Если нужно отключить индексацию поисковиками — можно добавить <meta name="robots" content="noindex"> в frontmatter этих страниц (по умолчанию не добавлено).

Принципы

1. VitePress — основа. Большинство «токенов» уже есть в --vp-c-* (см. документацию vitepress.dev/reference/default-theme-config). Не изобретать своё, если у VitePress уже есть.
2. Брендовая кастомизация — минимальная. Сейчас весь фирменный слой = синий CTA #5681c8. Расширять только при необходимости.
3. Один CSS-файл. Кастомные стили живут только в .vitepress/theme/custom.css. Не создавать style2.css, landing.css и подобные.
4. CSS-переменные для размеров, hex для бренда. Все размеры/радиусы/тени — через --vp-* переменные. Брендовый цвет можно литералом (он один).

Файлы

.vitepress/theme/
├── custom.css                 ← все стили базы знаний (1 файл)
├── index.ts                   ← регистрация темы и компонентов
├── TidioChat.vue              ← виджет онлайн-чата
└── components/
    ├── DsSwatch.vue           ← цветовая плашка для design-system страниц
    ├── DsPalette.vue          ← grid-обёртка
    ├── DsHomeBtn.vue          ← рендерит реальный <a class="vp-home-btn">
    └── DsRow.vue              ← ряд для примеров

Компоненты Ds* используются только на страницах /design-system/* — это превью-обёртки, чтобы можно было показать живые элементы прямо в Markdown.