🎨

Дизайн-система DNR.GURU

Визуальный язык платформы: цвета, типографика, компоненты и паттерны. Единый стиль для всех страниц.

🎨 Цвета 🔤 Типографика 👆 Кнопки 🃏 Карточки 📝 Формы ⬜ Скругления 💨 Тени 💡 Подсказки 😀 Иконки
🎨
Цветовая палитра
Автоматически адаптируется к светлой и тёмной теме

Основные цвета

Aa
Accent
--accent
Aa
Accent Hover
--accent-hover
Accent Soft
--accent-soft
Aa
Success
--success
Aa
Warning
--warning
Aa
Error
--error

Фоны

Primary
--bg-primary
Secondary
--bg-secondary
Tertiary
--bg-tertiary

Текст

Aa
Primary
--text-primary
Aa
Secondary
--text-secondary
Aa
Tertiary
--text-tertiary
Border
--border
💡 Автотема: все цвета автоматически переключаются между светлой и тёмной темой. Используйте CSS-переменные вместо хардкод-значений.
🔤
Типографика
Шрифт Onest · 8 начертаний · 300–800
H1 · 800
Создайте сайт для бизнеса
H2 · 800
Готовые шаблоны для вашей ниши
H3 · 700
Онлайн-запись клиентов
Body · 400
Выберите готовый шаблон, измените текст и запустите сайт за 5 минут. Всё просто — как отправить сообщение. Платформа автоматически адаптирует дизайн под мобильные устройства.
Small · 500
Дополнительная информация, метаданные, подписи
Mono · 400
font-family: 'Onest', sans-serif;
Gradient
Акцентный градиент
👆
Кнопки
Три варианта: primary, outline, ghost
Основные кнопки
Primary Outline Ghost
Размеры
Small Default Large
С иконками
🚀 Создать сайт 🎨 Шаблоны ✓ Сохранить 🗑 Удалить
.btn { padding: 13px 28px; font-weight: 600; border-radius: var(--radius-md); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 16px var(--accent-glow); }
🃏
Карточки и блоки
Контейнеры для контента
Стандартная карточка

Фон --bg-secondary, рамка --border, скругление --radius-lg.

Акцентная карточка

Для выделения важных блоков — баланс, статистика, CTA.

📊
Feature-карточка

Для списков возможностей, модулей и функций платформы.

📝
Элементы форм
Инпуты, селекты, чекбоксы
🔍
⬜
Скругления
Три уровня border-radius
--radius-sm
6px
--radius-md
8px
--radius-lg
8px
99px
Pills / Tags
50%
Аватары
💨
Тени
Четыре уровня глубины
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
accent-glow
💡
Подсказки и уведомления
Цветные блоки для привлечения внимания
💡 Совет: Используйте акцентный цвет для основных подсказок и рекомендаций.
✅ Готово: Зелёный блок для подтверждений и успешных действий.
⚠️ Внимание: Жёлтый блок для предупреждений и важных замечаний.
❌ Ошибка: Красный блок для критических предупреждений и ошибок.
«Цитата или выделенный текст — для отзывов, важных высказываний и акцентов.»
😀
Иконки
Emoji-first подход — без внешних библиотек

Платформа использует системные emoji вместо иконочных шрифтов. Это быстрее (0 KB загрузки), кроссплатформенно и не требует CDN.

Навигация

🏠
Главная
🧩
Модули
🎨
Шаблоны
⚙️
Настройки
💰
Баланс
📊
Аналитика
👤
Профиль
🔔
Уведомления

Модули

💼
Услуги
📅
Запись
🛒
Магазин
🖼️
Галерея
📝
Блог
⭐
Отзывы
💬
Мессенджеры
📍
Контакты
🍽️
Ресторан
🔧
Автосервис
🏠
Недвижимость
🏅
Сертификаты

Статусы и действия

✅
Успех
⚠️
Внимание
❌
Ошибка
💡
Совет
🚀
Запуск
🔒
Защита
📱
Мобильный
🌐
Домен
🎨
Дизайн-система DNR.GURU

Единый визуальный язык для всех страниц платформы

🏠 На главную 📘 Руководство