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 рендерят одинаковый цвет.