X-DRAGON — Логотип

01

Підноготна

Логотип складається з двох частин: кристалічного знака й напису. Кожне рішення тут має причину — і саме з цих причин ростуть правила в наступних розділах.

Знак

Дракон складений зі 141 кристалічної грані. Це не текстура поверх силуету: кожна грань — окрема фігура з власним градієнтом, а між ними лишаються прозорі проміжки. Саме тому знак усюди бере колір фону і виглядає вбудованим, а не наклеєним.

Колір іде від фіолетового в голові через синій у тілі до коралового й полум'яного у хвості — від глибини до енергії. Поза читається як згорнута сила: дракон сидить, але вже піднімає лапу.

Напис

Cormorant SC Medium, трекінг +2 % — та сама пара, що тримає заголовки в брендбуку. Мала капітель дає спокійний, дорослий тон без крику.

У файлах напис переведений у криві, тому логотип виглядає однаково на машині без брендових шрифтів. Пишемо тільки x-dragon, без домену: адреса живе в підписі, не в знаку.

Два рішення, які варто пояснити

Свічення прибрано

Ми пробували ореол навколо хвоста і відмовились від нього. Він не відтворюється у друці, розсипається на світлому фоні, вимагає зайвого поля навколо знака й не переживає масштабування вниз.

Замість свічення працює контраст плашки. У жодному файлі логотипу свічення немає — і додавати його вручну не можна.

Монохром — окремий малюнок

Монохромний знак — це не кристал, з якого прибрали колір. Спроби звести 141 грань в одну масу давали кашу: паща розпливалась, усередині з'являлись випадкові дірки.

Тому силует намальовано окремо й обведено у вектор: та сама поза, паща, грива, лапи й хвіст, але жодної грані. Один контур, одна заливка.

Два знаки — одна пара форм. Кольоровий кристал і монохромний силует складаються в ті самі два лок-апи з тими самими пропорціями, тож перемикання між ними ніколи не зсуває композицію.

02

Дві форми

Квадратна і горизонтальна. Третьої немає — це навмисно, щоб логотип не розповзався по варіантах.

Квадратний. Знак згори, напис під ним по всій ширині знака. Аватарки, соцмережі, титульні сторінки, мерч, усе з полем 1:1.

Горизонтальний. Знак ліворуч, напис праворуч по центральній осі. Основна форма: шапки сайту, обкладинки, підписи, бланки.

Пропорції

Усе міряється висотою знака. Ці числа зашиті у файли — відтворювати композицію вручну не треба, але якщо доводиться, ось вони.

Квадрат: ширина напису = ширині знака

Квадрат: повітря між знаком і написом 10 % висоти знака

Горизонталь: висота напису ⅓ висоти знака

Горизонталь: зазор до напису 16 % висоти знака

Горизонталь: вирівнювання по центральній осі знака

Поле артборда у файлах 12 % висоти знака

03

Кольоровий

Кристалічний знак із повним градієнтом. Головна, парадна версія логотипу.

Правило: кольоровий логотип — тільки на темному фоні. Градієнт побудований під #0D1011. На світлому він втрачає контраст, фіолетова голова провалюється, а прозорі проміжки між гранями забиваються білим і малюнок розпадається. Потрібен світлий фон — беремо монохромну версію з наступного розділу.

Квадратний, кольоровий. Темна плашка вшита у файл. SVG.

Горизонтальний, кольоровий. Темна плашка вшита у файл. SVG.

Обидва файли — лише SVG. Кольоровий логотип завжди йде у вектор: це слайди, сайт і друк, де масштаб заздалегідь невідомий. Растрову копію робимо тільки для монохрому, якому дійсно бракує PNG.

04

Монохромний

Трасований силует в одну заливку. Працює там, де кольору немає або він заважає: документи, факс і печатка, гравіювання, вишивка, партнерські стрічки логотипів, світлий фон.

Біле на чорному

Квадратний. SVG + PNG 1024.

Горизонтальний. SVG + PNG 2048.

Чорне на білому

Квадратний. SVG + PNG 1024.

Горизонтальний. SVG + PNG 2048.

Фон вшитий у файл. На відміну від кольорових версій, монохром існує саме парою «фарба + плашка»: біле на #0D1011 і чорне на #F1F2F3. Не перефарбовуйте білий варіант у чорний вручну — візьміть готовий, у ньому вже правильна плашка.

05

Розміри й охоронне поле

Нижче мінімуму силует злипається: пропадають лапи, зникає паща, дракон перетворюється на пляму.

24 — замало

32 — мінімум

48

72

120

Мінімальна висота знака 32 px на екрані / 12 мм у друці

Мінімальна висота лок-апа 40 px на екрані / 15 мм у друці

Охоронне поле ≥ 0.5 висоти знака з усіх боків

Охоронне поле — це порожнеча навколо логотипу, куди не заходить ні текст, ні лінія, ні край макета. Міряється висотою знака: пів висоти з кожного боку.

У файлах уже є поле 12 % для дихання всередині артборда. Решту до половини висоти додає макет — це не привід ставити логотип упритул до краю.

06

Заборонено

Кожен пункт тут — наслідок правил вище, а не примха.

✕ Ставити кольоровий логотип на світлий фон

✕ Додавати свічення, тіні чи обведення

✕ Змінювати кольори градієнта

✕ Розтягувати чи нахиляти

✕ Ставити на строкате фото

✕ Перенабирати напис іншим шрифтом

✕ Міняти зазор між знаком і написом

✕ Дописувати домен до напису

✕ Ставити знак у рамку чи коло

✕ Зменшувати нижче 32 px

✕ Збирати свою форму лок-апа

✕ Перефарбовувати монохром вручну

07

Файли

SVG — для всього, що масштабується: слайди, макети, сайт, друк. PNG — для інструментів, які не приймають вектор.

Варіант	Фон	Файли
Квадратний, кольоровий	темний `#0D1011`	SVG
Горизонтальний, кольоровий	темний `#0D1011`	SVG
Квадратний, білий	чорний `#0D1011`	SVG PNG 1024
Квадратний, чорний	білий `#F1F2F3`	SVG PNG 1024
Горизонтальний, білий	чорний `#0D1011`	SVG PNG 2048
Горизонтальний, чорний	білий `#F1F2F3`	SVG PNG 2048
Знак без напису	прозорий	SVG кольоровий SVG монохром

Файли збираються скриптом. tools/build-logo.py бере кристалічний знак, трасований силует і шрифт, і генерує весь пак разом із PNG. Правити SVG руками не треба — зміна пропорцій робиться в скрипті, щоб усі сім файлів лишались узгодженими.