UA Distillery — Дизайн-система

Жива сторінка-еталон та правила оформлення порталу UA Distillery. Цей файл створено на основі дизайн-системи oCBot.

1. Дизайн-токени (палітра)

Єдине джерело правди — блок :root у global.css. У коді — тільки var(--rb-*).

--rb-green
#1B4D3E
--rb-gold
#D4AF37
--rb-gold-light
#E5C387
--rb-cream
#F9F4E8
danger @ 0.12
безпека/аварії
--rb-gradient-gold
gold @ 0.2
лінії модалок
gold @ 0.35
рамки карток
green @ 0.05
тло шапок
green @ 0.12
лінії секцій
--rb-text-body
--rb-text-muted
Палітра периферії (16 кольорів) — приглушені, видимі на білому, чітко відмінні
Кожен колір задається одним hex; відтінки AD22 (on/off) генеруються автоматично. Нижче кожного свотча — пастельний фон (0.18), як на плитці обраного пристрою.
2. Типографіка
Заголовок модалки / сторінки Plus Jakarta Sans, 700, --primary-color
Заголовок групи .dashboard-group-title — 0.75rem, 800, капс
Основний текст Montserrat, 400, line-height 1.6
3. Кнопки та контроли
Кнопки
Іконкові дії (.icon-btn) — завжди без рамки, лише скопійовані SVG-іконки
4. Картки розділів (.hub-card)

Калькулятор

Приклад картки з ефектом Luxury Glassmorphism та золотим підсвічуванням при наведенні.

Відкрити
5. Преміальне модальне вікно (.modal-premium)
Заголовок вікна
6. Перелік іконок порталу
Інлайнові іконки розділів та дій (IL_Icons, 9 шт.)
calculate
(Калькулятор)
menu_book
(Довідники)
person_search
(Кабінет)
campaign
(Ринок)
inventory
(Обладнання)
calendar_month
(Календар)
auto_stories
(База знань)
settings
(Налаштування)
arrow_forward
(Перехід)
Інтерфейсні іконки (UI Icons, 25 шт.)
Іконки господарських процесів (KB Images, 8 шт.)
distillation
(Гуральня)
cheese
(Сироварня)
poultry
(Птичник)
greenhouse
(Теплиця/Полив)
heating
(Опалення)
safety
(Безпека)
water_treatment
(Водопідготовка)
aquaculture
(Аквакультура)
Іконки обладнання (HW Icons, 45 шт.)
7. Загальні правила оформлення
  1. Кольори та шрифти: Використовувати виключно CSS-змінні var(--bg-color), var(--surface-color), var(--primary-color) тощо. Не додавати жорстко закодованих hex-кодів.
  2. Шрифтова пара: Для заголовків використовувати Plus Jakarta Sans, для основного тексту — Montserrat або Onest.
  3. Стиль кнопок: Основні кнопки мають бути із золотим градієнтом, другорядні — контурні. Для швидких дій використовувати іконкові кнопки .icon-btn без фону та рамок.
  4. Стиль карток: Завжди використовувати скруглення радіусом 24px чи 28px та тонку напівпрозору рамку золотого відтінку для створення ефекту "огранювання".
  5. Конструкція плитки (Card Grid Construction): Кожна картка .kb-peripheral-card має розділятися по вертикалі на дві зони:
    • Верхня зона: містить вирівняну по центру іконку SVG та інфо-кнопку «i» у правому верхньому кутку.
    • Нижня зона: містить заголовок пристрою/процесу з вирівнюванням тексту по верхньому краю.
    • Інфо-кнопка (Info Trigger) та Локалізація: при наведенні або натисканні на іконку «i» (інфо) має спливати деталізований, структурований опис можливостей чи характеристик об'єкта. Всі описи заборонено прописувати жорстко (inline) у верстці статей. Вони повинні мати унікальний маркер для системи перекладу data-kb-i18n="унікальний_ключ" та зберігатися у єдиному централізованому файлі локалізації public/kb/descriptions.json для забезпечення майбутнього масштабування та мультиязичності.
  6. Замкнутий простір (Standalone/Embedded): При додаванні параметрів ?standalone=true або ?embedded=true у URL сторінка автоматично приховує глобальну навігацію (sidebar, breadcrumbs, tabbar) та відображає в шапці кнопку «Повна версія» для переходу в повнорозмірний браузер. Використовуйте параметри tab та page для прямого роутингу.
  7. Збірка та Деплой (Обов'язково): Після будь-якого оновлення коду, дизайну чи бази знань обов'язково виконувати локальну збірку npm run build та запускати деплой через deploy.bat, щоб оновлена версія коректно відображалася на живому сервері.
  8. Використання господарських іконок: Всі іконки процесів (з public/kb/images/) мають створюватися у чистому форматі SVG із viewBox="0 0 64 64". Обов'язково застосовувати властивість stroke="currentColor" або fill="currentColor" до контурів для динамічного перефарбовування під колірну схему теми. Рекомендований розмір відображення у плитках сітки .kb-peripheral-grid становить 32px або 28px.