# 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   | `#FCFCFC` |
| 50  | `#F7F7F8` |
| 100 | `#F0F0F0` |
| 200 | `#E1E2E3` |
| 300 | `#D9D9D9` |
| 400 | `#B7BABE` |
| 500 | `#9CA3AF` |
| 600 | `#82868D` |
| 700 | `#6B7280` |
| 800 | `#3F4145` |
| 900 | `#1A1A1A` |

#### 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 | `#FEF0DD` | `#B45309` |

### Semantic aliases

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

## Радиусы

| Токен | Значение |
|-------|----------|
| `$radius-sm`  | 6px |
| `$radius-md`  | 10px |
| `$radius-lg`  | 16px |
| `$radius-xl`  | 24px |
| `$radius-full`| 9999px |

> Точные значения радиусов не были видны в Style Guide; подбираются и уточняются через Playwright-сравнение с компонентными фреймами.

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

### 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%) |

## Иконки

- Phosphor Icons — единственный поддерживаемый набор.
- Всегда используйте base class `ph`: `<i class="ph ph-house"></i>`.
- В Vue icon props всегда с префиксом `ph-`.

## Варианты

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

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

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