Design Operating System

Наша дизайн-система

Визуальный фундамент, благодаря которому все наши проекты выглядят цельно. Токены, палитры, типографика, отступы — открыто и задокументировано.

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

Primary — терракотовый

--primary: 16 71% 42%

Единственный цвет действия: CTA, ссылки. 5,3:1 на белом

Accent — тёмно-синий

--accent: 214 52% 25%

Заголовки, структура. 11,3:1 на белом

Глубокий тёмно-синий

--navy-deep: 213 56% 17%

Фон баннеров и подвала

Яркое золото

--gold-bright: 41 88% 62%

Цифры только на тёмно-синем фоне

Текст

--foreground: 215 28% 17%

Основной текст. 14,7:1 на белом

Второстепенный текст

--muted-foreground: 215 14% 40%

Примечания, подписи. 6,0:1 на белом

Розовый

--rose: 14 62% 40%

Расширенная палитра, приглушённая до основной гаммы

Фиолетовый

--violet: 214 52% 32%

Расширенная палитра, приглушённая до основной гаммы

Голубой

--cyan: 205 48% 33%

Расширенная палитра, приглушённая до основной гаммы

Золото

--gold: 40 90% 30%

Отзывы, награды. ≥ 4,5:1 на белом

Индиго

--indigo: 213 56% 25%

Расширенная палитра, приглушённая до основной гаммы

Destructive

--destructive: 0 72% 42%

Ошибки, удаление

Типографика

Display — Outfit Variable

Типографская элегантность по-лионски

Заголовки, CTA, акценты. 100–900.

Body — Plus Jakarta Sans Variable

Оптимальная читаемость длинных абзацев и выверенный редакционный ритм.

Основной текст, навигация, подписи. 200–800.

Элемент	Размер (fluid)	Интерлиньяж	Назначение
`h1`	clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem)	1.06	Заголовок страницы, первый экран
`h2`	clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem)	1.14	Заголовок раздела
`h3`	clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem)	1.25	Подзаголовок, карточка
`h4`	1.125rem	1.35	Промежуточный заголовок
`h5, h6`	1rem	1.4	Малые заголовки
`body`	1rem	1.65	Основной текст (Plus Jakarta Sans)
`text-sm`	0.875rem	1.25rem	Второстепенный текст, примечания
`text-xs`	0.75rem	1rem	Метаданные, бейджи, подписи

Отступы (шкала Tailwind)

0.52px

14px

28px

312px

416px

624px

832px

1248px

1664px

2496px

Тени

shadow-e1

Едва заметная линия — поля, чипы

shadow-e2

Карточки в покое

shadow-e3

Карточки при наведении, плавающие кнопки

shadow-e4

Диалоги, панели

Собственные CSS-утилиты

.glass

Белая карточка, тонкая рамка, мягкая тень — карточки, поля

.glass-strong

Та же поверхность, более выраженная тень — диалоги, шапки

.glass-premium

Выделенная поверхность — первый экран, портфолио

.surface-sunken

Чередующийся холодно-серый раздел, края растушёваны на 40 px

.section-y

Вертикальный ритм разделов (--section-y)

.measure

Длина строки ограничена 68 символами

.text-gradient-warm

Терракотовая плашка на слове заголовка

.text-gradient-cool

Тёмно-синяя плашка на слове заголовка

.cta-gradient

Терракотовая плашка + текст --primary-foreground

.section-divider

Линия 1 px, растушёванная с обоих концов

.card-img-frame

Рамка изображения 16/10, нулевой CLS, зум при наведении

.spot-card

Свечение и контур, следующие за курсором

.btn-glow-fill

Заливная кнопка: блик + терракотовое свечение при наведении

.btn-glow-ring

Контурная кнопка: светящийся контур при наведении

.link-grow

Подчёркивание, растягивающееся слева

.skip-link

Ссылка для пропуска навигации, видна при фокусе

Обзор компонентов

Кнопки

Бейджи

PrimarySuccessWarningError

Градиенты

KAYZEN Premium

Современная инженерия

Glass Strong

Пример карточки с классом .glass-strong.

Переиспользуемая дизайн-система

Ваши проекты опираются на эту проверенную дизайн-систему. Визуальная целостность, доступность и производительность заложены в неё изначально.

Посмотреть технический стек Журнал изменений Начать проект