# Style guide

Дизайн-система `vmk-ui-kit` основана на Figma-макете **Oselya.AI_Copy**. Ниже зафиксированы актуальные токены, вытащенные из стилей Colors и Typography.

## Шрифт

- **Plus Jakarta Sans** — основной шрифт интерфейса.
- Веса: Regular (400), Medium (500), Semibold (600), Bold (700).
- Запасной стек: `"Inter", "SF Pro Display", system-ui, -apple-system, sans-serif`.

## Цвета

### Primitive palette

#### Neutral

| Шаг | Hex |
|-----|-----|
| 0   | `#FFFFFF` |
| 25  | `#FCFCFC` |
| 50  | `#F7F7F8` |
| 100 | `#F0F0F0` |
| 200 | `#E1E2E3` |
| 300 | `#D9D9D9` |
| 400 | `#B7BABE` |
| 500 | `#9CA3AF` |
| 600 | `#82868D` |
| 700 | `#6B7280` |
| 800 | `#3F4145` |
| 900 | `#1F1F1F` |

#### Lavender

| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|----|----|----|----|----|----|----|----|----|----|
| `#F4F3FC` | `#ECE8FA` | `#E1E0F7` | `#D8D7F5` | `#C0BEF0` | `#A19FE0` | `#8482C4` | `#5B5A9C` | `#4A4880` | `#3D3B7A` |

#### Mint

| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|----|----|----|----|----|----|----|----|----|----|
| `#F2FAFB` | `#E9F6F8` | `#DFF1F4` | `#D9EEF2` | `#BEE0E6` | `#A9D8DF` | `#7EC0C9` | `#4E96A0` | `#316873` | `#1F4B52` |

#### Yellow

| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|----|----|----|----|----|----|----|----|----|----|
| `#FEFEF0` | `#FDFCB8` | `#FCFB94` | `#FCFD76` | `#F0F166` | `#E8E94A` | `#D5D636` | `#C4C520` | `#A6A71B` | `#8A8B12` |

#### Semantic primitives

| Токен | bg | text |
|-------|----|------|
| danger  | `#FBE4E2` | `#D64545` |
| info    | `#EAF4FE` | `#2563A6` |
| success | `#DDF3E4` | `#1E7A46` |
| warning | `#FEF3E5` | `#B45309` |

### Semantic aliases

| Имя | Значение | Описание |
|-----|----------|----------|
| `$surface-page`      | `neutral-0`  | Основной фон страницы |
| `$surface-primary`   | `neutral-50` | Основная поверхность |
| `$surface-secondary` | `mint-300`   | Вторичная поверхность |
| `$surface-accent`    | `yellow-300` | Акцентная поверхность |
| `$surface-surface`   | `neutral-100`| Фон карточек/панелей |
| `$border-color-base` | `neutral-300`| Основной бордер |
| `$border-color-muted`| `neutral-100`| Вторичный бордер |

## Радиусы

Радиус-шкала выгружена из `radius.tokens.json`.

| Токен | Значение |
|-------|----------|
| `$radius-xs`   | 4px  |
| `$radius-sm`   | 8px  |
| `$radius-md`   | 12px |
| `$radius-lg`   | 16px |
| `$radius-xl`   | 20px |
| `$radius-2xl`  | 24px |
| `$radius-full` | 999px |

Применение компонентов:
- buttons, badges, avatars, icon-buttons — `full`;
- inputs — `lg` (16px);
- cards — `xl` (20px);
- modals — `2xl` (24px);
- checkboxes — `xs` (4px).

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

### Headings — desktop

| Стиль | Вес | Размер | Интерлиньяж | Letter-spacing |
|-------|-----|--------|-------------|----------------|
| Display | Bold | 48px | 56px | -2% |
| Heading 1 | Bold | 40px | 48px | -2% |
| Heading 2 | Bold | 32px | 40px | -1% |
| Heading 3 | Semibold | 28px | 34px | 0 |
| Heading 4 | Semibold | 22px | 30px | 0 |
| Heading 5 | Semibold | 18px | 26px | 0 |
| Heading 6 | Semibold | 16px | 22px | 0 |

### Headings — mobile

| Стиль | Вес | Размер | Интерлиньяж | Letter-spacing |
|-------|-----|--------|-------------|----------------|
| Display | Bold | 32px | 40px | -2% |
| Heading 1 | Bold | 28px | 36px | -2% |
| Heading 2 | Bold | 24px | 32px | -1% |
| Heading 3 | Semibold | 20px | 28px | 0 |
| Heading 4 | Semibold | 18px | 26px | 0 |
| Heading 5 | Semibold | 16px | 24px | 0 |
| Heading 6 | Semibold | 14px | 20px | 0 |

### Body — desktop

| Стиль | Размер | Интерлиньяж |
|-------|--------|-------------|
| Large  | 20px | 32px |
| Medium | 18px | 28px |
| Small  | 16px | 24px |
| XSmall | 14px | 20px |

### Body — mobile

| Стиль | Размер | Интерлиньяж |
|-------|--------|-------------|
| Large  | 18px | 26px |
| Medium | 16px | 24px |
| Small  | 14px | 20px |
| XSmall | 12px | 16px |

### Button / Caption

| Элемент | Desktop | Mobile |
|---------|---------|--------|
| Button | Semibold 16px / 22px | Semibold 15px / 20px |
| Caption | Regular 12px / 16px (-1%) | Regular 11px / 14px (-1%) |
| Overline | Regular 12px / 16px (-0.8%) | Medium 12px / 14px (-0.8%) |

## Иконки

- Набор иконок проекта — 967 custom SVG из `public/assets/icons/svg/`.
- Для совместимости с `gnexus-ui-kit` Vue-адаптер всё ещё принимает legacy `ph-` префиксы (`ph-x`, `ph-check`) и маппит их на VMK-ключи.
- Inline SVG-иконки рендерятся через `src/js/components/icon-helper.js` и Vue-компонент `VmkIcon`.

## Варианты

Разрешённые имена вариантов:

```
primary, secondary, accent, success, warning, danger, error, info
```

`danger` и `error` рендерят одинаковый цвет.