Сила
Щільні маси, високий контраст, впевнена геометрія. Без декору «про всяк випадок».
brandbook.x-dragon.com
Візуальна мова X-DRAGON
Єдині нормативи візуалу та інтерфейсу для сайтів і піддоменів x-dragon.com. Сила, мудрість, інновації — у кожному пікселі.
01
Ідентичність
Хто ми і як це читається у візуалі.
Мудрість
Порядок і читабельність: сітка, ритм, ієрархія. Складне подаємо просто.
Інновації
Технологічне свічення, градієнти, кристалічні форми — акуратно і дозовано.
Позиціонування. Технологічний бренд із фентезійним ядром: дракон як символ,
інженерна подача як форма. Тон — впевнений, без пафосу.
02
Логотип
Підноготна знака, дві форми, кольорова й монохромна версії, правила розміщення та готові файли — усе зібрано на окремій сторінці.
Логотип живе у двох формах — квадратній і горизонтальній — і двох версіях: кольоровий кристал для темного фону та монохромний силует для всього іншого. Свічення не використовуємо.
На сторінці логотипу — звідки взявся знак, точні пропорції лок-апів, мінімальні розміри, охоронне поле, перелік заборон і завантаження SVG та PNG.
03
Колір
Темна база, ядро бренду з чотирьох синьо-фіолетових тонів і два теплі акценти. Далі — ролі, у яких ці кольори працюють в інтерфейсі. Клік по зразку копіює HEX.
Ядро бренду
Акценти
Нейтральні
Градієнт бренду
linear-gradient(120deg, #321467 0%, #263ABA 42%, #4389E5 100%) —
тільки для великих площин і головних кнопок. Теплі акценти в градієнт не входять.
Ролі в інтерфейсі
Бренд дає палітру, інтерфейс потребує ролей. Чотири семантичні кольори, кожен із трьох токенів: чистий тон, підкладка 14 % і освітлений текст на ній.
Три ролі з чотирьох беруться з палітри: Info — це Ocean, Warning — Flame, Danger — Coral, найчастіший теплий тон у самому знаку. Доданий лише Success: зеленого в палітрі немає, а інтерфейс без нього не працює.
Два правила, які ламають більшість темних тем
Текст на підкладці — світлий тон, не сам колір
Ocean на підкладці з Ocean 14 % дає 3.9:1 і не проходить. Той самий фон з Azure — 8.5:1.
Так: Azure
Ні: Ocean
На суцільній заливці — темний текст, не білий
#F1F2F3 на Success дає 2.1:1, на Warning — 1.9:1. Темний #0D1011 дає 8.2 і 9.0.
Так
Ні
Виміряний контраст
| Пара | Роль | Норма | Факт |
|---|---|---|---|
| #F1F2F3 на #0D1011 | основний текст | 4.5 | 17.0 |
| #8B959C на #161A1D | другорядний текст | 4.5 | 5.7 |
| #7C868D на #0D1011 | placeholder | 4.5 | 5.1 |
| #697680 на #161A1D | межа контрола | 3.0 | 3.8 |
| #3B444B на #161A1D | розділювач (декор) | — | 1.8 |
| #A2C9F6 на Info 14 % | текст на підкладці | 4.5 | 8.5 |
| #4389E5 на Info 14 % | той самий, тоном | 4.5 | 4.1 |
| #0D1011 на Success | текст на заливці | 4.5 | 8.2 |
| #F1F2F3 на Success | той самий, білим | 4.5 | 2.1 |
| #F86570 на #0D1011 | Danger на базі | 4.5 | 6.5 |
| #FA8B93 на Danger 14 % | текст на підкладці | 4.5 | 6.4 |
Розділювач і межа — різні речі. Лінія, яка просто ділить контент,
може бути тихою:
--color-separator з 1.8:1 достатньо. Але межа інтерактивного
елемента несе інформацію «сюди можна клікнути», тому для неї є окремий
--color-line з 3.8:1. Одним токеном ці дві задачі не закриваються.
04
Типографіка
Cormorant SC — H1, Montserrat — H2 і H3, Inter — текст, JetBrains Mono — код і токени.
Dragon
Заголовок H1
Заголовок H2
Заголовок H3
Підзаголовок або lead-абзац
Основний текст. Пояснюємо коротко, технічно, без зайвого пафосу.
Другорядний текст, підписи, метадані
--brand-flame: #FE9B22;
Правила. Cormorant SC — це small caps, тому H1 не пишемо капсом додатково
і не ставимо його дрібнішим за 28 px. Максимум два рівні заголовків на екран.
Довжина рядка — 60–75 символів. Uppercase — лише для eyebrow і кнопок, з letter-spacing +6%.
Fallback
Системні шрифти для середовищ, де основні недоступні: email-розсилки, офісні документи, офлайн-експорт, корпоративні машини без веб-шрифтів.
Заголовок H1
Заголовок H2 і H3
Основний текст у fallback-режимі: та сама ієрархія, інші шрифти.
--brand-flame: #FE9B22;
Ваги. Georgia і Arial мають лише Regular і Bold. Тому вагу заголовків тримаємо
на 500 для H1 і 600 для H2–H3: у fallback це дає Georgia Regular і Arial Bold, а не найжирніші
начерки. Не ставимо H1 на 600, інакше Georgia перемикається на Bold і заголовок стає грубим;
Arial Black не використовуємо з тієї ж причини. Georgia не має малої капітелі,
тому H1 у fallback пишемо звичайним регістром, без ручного капсу.
05
Зображення і стиль
Кристалічна геометрія, темний фон, технологічне свічення.
Можна
- Low-poly та кристалічні 3D-форми
- Темний фон із дрібним зерном
- Свічення по краях, Azure-підсвітка
- Градієнт бренду як джерело світла
Не можна
- Стокові фото людей в офісі
- Світлий фон під основним візуалом
- Реалістичні дракони й фентезійний кітч
- Більше двох градієнтів на екран
06
Голос
Коротко, технічно, без зайвого пафосу.
Так
«Розгортання за 30 секунд. Один конфіг, будь-який регіон.»
Ні
«Революційна платформа нового покоління, що змінить ваше уявлення про хмару!»