hello@zenvy.design Начать
Документация

Темизация
и Брендинг

Превратите Zenvy в свой собственный инструмент. Полное руководство по переопределению переменных, настройке цветовых палитр и интеграции фирменного стиля.

/* root.css */
:root {
  --primary: #D3F261;
  --surface: #F4F4F5;
  --border: #1C1917;
  --font-display: 'Space Grotesk';
}

Глобальное переопределение
темы (Global Override)

Не переписывайте стили. Используйте CSS Custom Properties для мгновенной смены внешнего вида всего приложения.

#

Цветовые токены

Zenvy использует 12 базовых переменных. Измените --color-primary и --color-surface в блоке :root, и вся сетка, типографика и кнопки обновятся автоматически.

:root {
  --color-primary: #FF4500;
  --color-bg: #000000;
}
Aa

Типографика

Замените системные шрифты на корпоративные. Переменные --font-display и --font-body управляют заголовками и текстом. Поддерживает любые Google Fonts.

    Inter Roboto Montserrat

Режимы: Свет vs Темнота

CSS Media Queries

Светлая тема (Default)

Идеальна для документации и дашбордов. Максимальная читаемость за счет высокого контраста на светло-сером фоне (#F4F4F5).

Темная тема (Dark Mode)

Активируется через prefers-color-scheme: dark. Переключает фоны на глубокий уголь (#1C1917), а границы делает белыми для четкости.

Интеграция
Брендовой Идентичности

Zenvy — это скелет. Ваша задача — дать ему лицо. Используйте компонентную структуру для внедрения логотипов и специфичных UI элементов.

01. Логотип

Класс .zenvy-logo настроен на использование моноширинного шрифта. Замените ::before псевдоэлемент на ваш SVG логотип.

02. Кнопки

Измените --btn-radius на 0px для строгого стиля или 50px для "Tech-Bubble" эстетики. Tilt-эффект сохраняется.

03. Бейджи

Класс .h-eyebrow используется для меток. Настройте его цвета под вторичный цвет вашего бренда.

Следующий шаг

Изучите
Компоненты

Теперь, когда ваша тема настроена, пора начать собирать интерфейс. Перейдите к каталогу UI элементов.