Документация / Токены

Дизайн
токены

Фундаментальный слой Zenvy. Токены заменяют хардкод на семантические переменные, обеспечивая консистентность между дизайном и кодом.

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

Основной спектр

Строгая палитра для максимальной контрастности и читаемости.

Deep Charcoal

#1C1917

Текст, линии сетки, основные границы. WCAG AAA на белом.

Neon Lime

#D3F261

Акценты, CTA, индикаторы успеха. Требует темного фона.

Concrete Light

#F4F4F5

Основной фон страницы (Body). Нейтральный серо-бежевый.

Pure White

#FFFFFF

Фон карточек, модалок и хедера. Используется для "приподнятости".

02. Типографика

Шрифтовые пары

Моноширинный характер заголовков против читабельности основного текста.

Space Grotesk

Назначение: Заголовки (H1-H6), навигация, кнопки, данные в таблицах.
Вес: 500 (Medium), 700 (Bold).

Пример заголовка

Inter

Назначение: Основной текст (body), подписи, метки форм.
Вес: 400 (Regular), 500 (Medium).

Этот шрифт обеспечивает отличную читаемость на любых экранах благодаря своей нейтральной форме.
03. Сетка и отступы

Пространство

Потенциальная энергия дизайна раскрывается через пустоту.

.zenvy-wrap

max-width: 1280px

Основной контейнер. Центрирует контент.

Padding: 1rem — 4rem

.zenvy-grid

gap: 2rem — 6rem

Адаптивный отступ между колонками. Увеличивается на больших экранах.

Responsive Gap

.zenvy-section

padding-block

Вертикальный ритм секций. От 4rem на мобильных до 8rem на десктопе.

4rem — 8rem