Архитектура
интерфейса
Полный обзор строительного набора Zenvy. От атомарных токенов до сложных интерактивных состояний.
Библиотека
компонентов
Интерактивность без лишнего шума. Жесткие тени, мгновенный отклик, абсолютная ясность.
Кнопки (Buttons)
Три состояния: Default, Hover (сдвиг -2px), Active (нажатие). Никаких полупрозрачных оверлеев. Только твердые цвета и четкие границы.
Поля ввода (Inputs)
Толстые рамки 2px. Фокус выделяется не мягким свечением, а сменой фона на "Неоновый лайм" (#D3F261) для максимальной видимости.
Карточки (Cards)
Контейнеры с жесткими тенями. При наведении карточка "приподнимается", а тень увеличивается, создавая тактильный эффект глубины.
Математика
визуала
Система построена на строгих переменных. Никаких случайных отступов или цветов.
Цвет (Color)
- Concrete Light #F4F4F5
- Deep Charcoal #1C1917
- Neon Lime #D3F261
Шрифты (Type)
Заголовки: Space Grotesk (Monospace feel).
Текст: Inter (System UI).
Масштабирование через clamp() для идеальной адаптивности от 320px до 4k экранов.
Сетка (Grid)
Использование minmax(300px, 1fr) для автоматической перестройки колонок. Отступы (gaps) задаются динамически через clamp(2rem, 5vw, 6rem).
Интеграция
в стек
Zenvy не привязан к фреймворку, но идеально в него встраивается.
React / Next.js
Компоненты доступны как набор классов или через обертки. Полная совместимость с CSS Modules и Styled Components.
npm install @zenvy/core
Vue / Nuxt
Поддержка scoped CSS и автоматический импорт стилей. Никаких конфликтов имен классов благодаря уникальному префиксу.
yarn add zenvy-vue
Figma
Автолейауты, настроенные Auto-Layout, и переменные тем (Variables). Дизайн и код синхронизированы на 100%.
Open in Figma ↗
WCAG в
брутализме
Брутализм часто обвиняют в визуальной агрессии. Мы доказываем обратное: наша система обеспечивает высочайшую контрастность и читаемость.
Все текстовые элементы соответствуют стандарту AA (4.5:1), а крупные заголовки — AAA (7:1).
Проверки (Audits)
-
✓Семантическая верстка (header, main, nav)
-
✓Навигация с клавиатуры (Tab-индексы)
-
✓Состояния фокуса для скринридеров