Дизайн-система и стилизация¶

Уровень: L2 (детали) | Вверх: ../README.md

Подход¶

Стилизация построена на трёх слоях:

CSS Modules — изолированные стили для каждого компонента (.module.css)
CSS Custom Properties — дизайн-токены, доступные глобально через var(--pl-*)
Ant Design Theme — кастомизация компонентной библиотеки через Design Token System

Эволюция¶

В процессе разработки глобальный index.css был сокращён с 2511 строк до 37 строк полезного кода (без учёта пустых строк). Все компонентные стили мигрировали в CSS Modules, а переменные — в theme/cssVars.css. Глобальный файл оставлен только для: - CSS-ресеты (box-sizing, body) - Safe-area-inset переменные - Утилитарный класс .sr-only (screen-reader only) - Переопределение стилей Ant Design message компонента - Анимация @keyframes shimmer

Типографика¶

Используются три шрифтовых семейства, подключённых через @fontsource (self-hosted):

Семейство	Назначение	Переменная
Funnel Sans	Заголовки (display, pageTitle, sectionTitle)	`--pl-font-display`
Geist Sans	Основной текст (body, caption, meta, action)	`--pl-font-body`
Geist Mono	Данные, коды	`--pl-font-data`

Размерная шкала:

Токен	Размер	Использование
`--pl-font-size-display`	28px	Заголовки страниц (AuthShell)
`--pl-font-size-page-title`	24px	Заголовки страниц (PageHeader)
`--pl-font-size-section-title`	20px	Секции на странице
`--pl-font-size-body`	15px	Основной текст
`--pl-font-size-caption`	13px	Подписи, чипы
`--pl-font-size-meta`	11px	Метаданные, теги

Цветовая палитра¶

Основной акцентный цвет — тёплый терракотовый #D18A62, формирующий визуальную идентичность приложения. Фон — тёплый бежевый #F7F4EF, создающий ощущение уюта.

Accent:      #D18A62  (терракотовый)
Background:  #F7F4EF  (тёплый бежевый)
Surface:     #FFFDFB  (почти белый)
Text:        #1F1B16  (тёмно-коричневый)
Text Muted:  rgba(31,27,22, 0.55)
Border:      rgba(31,27,22, 0.08)
Success:     #5B8C51
Warning:     #D4A12A
Danger:      #C4483F

Примеры стилизации¶

Кнопки — pill-shaped (borderRadius 999px), без box-shadow:

.chip {
  min-height: var(--pl-control-height-sm);  /* 38px */
  padding: 0 14px;
  border-radius: var(--pl-radius-pill);     /* 999px */
  border: 1px solid var(--pl-color-border);
  font-size: var(--pl-font-size-caption);   /* 13px */
  font-weight: 600;
}

Карточки — скруглённые, с тенью:

.root {
  border-radius: 20px;
  border: 1px solid var(--pl-color-border);
  background: var(--pl-color-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

Навигация — floating pill с backdrop-blur:

.pill {
  border-radius: var(--pl-radius-pill);
  background: rgba(255, 253, 252, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.06);
}

-> Все токены: css-tokens.md | Тема Ant Design: ant-theme.md