Основа бренду
DIYRO KIWIYA — дизайн-студія Юрія Шириняна. Вона розробляє індивідуальні рішення в айдентиці, цифрових продуктах, маркетингу й автоматизації, а потім перетворює їх на візуальну мову, якою бізнес може володіти й користуватися.
Позиціонування
DIYRO KIWIYA працює там, де бізнес неправильно розуміють, забувають або візуально гублять у його категорії. Результат — система рішень і дизайн-мова, що належать цьому бізнесу, а не ринку навколо нього.
Характер
Знак передає вірменську спадщину через колір: життєву силу й оновлення, увагу й мир, тепло й майстерність. Голос тримає той самий баланс — спостережливий, теплий і прямий.
Аудиторія
Засновники й команди з переконливою пропозицією, чия айдентика вже не вирізняє її; чий продукт і комунікація розійшлися; або чий новий бізнес потрібно швидко зрозуміти, не сплутавши зі знайомим.
Обіцянка
Виразна візуальна мова, що працює в друці, на екрані, у продукті й фізичному просторі, — із правилами, достатньо ясними, щоб команда зберігала впізнаваність без звернення до дизайнера за кожним рішенням.
Назва бренду — DIYRO KIWIYA, а в суцільному тексті після першої згадки природно скорочується до «студія». Засновник — Юрій Ширинян — обличчя в особистій комунікації, тоді як студія — суб’єкт, що стоїть за кожним реалізованим проєктом.
Знак
Знак має три зони: маджентово-червону корона, фіолетово-сині лінзита золотаво-жовту піч. Літерні форми DIYRO KIWIYA вбудовані в геометрію. Використовуйте контур #121212 всюди, крім чистого чорного тла, де він стає білим.
Вертикально симетрична геометрія гарантує візуальну стійкість. Контур працює як основна структура: знак чисто зменшується до одноколірного фавікона або розгортається у деталізований підпис бренду.
Анатомія
| Зона | Поведінка кольору | Значення / Роль |
|---|---|---|
| Корона (верхня дуга) | Лінійний вертикальний градієнт, маджента → червоний обводка: #000000 (0,178 px) | Вірменська національна спадщина: жертва, що перетворюється на оновлення. Маджента додає історичної глибини. |
| Лінзи / Очі (бічні частини) | Лінійний горизонтальний градієнт, фіолетовий → синій | Точність і фокус: помічати деталі, спостерігати та вчитися. Синій уособлює мир. |
| Піч (нижній овал) | Лінійний вертикальний градієнт, золотий → жовтий | Творча піч: формує ідеї у свіжі, теплі й красиві форми. |
| Контури | Суцільний контур (#121212 або #ffffff) | Зв’язує геометрію. Використовує #121212 на всіх тлах і переходить на #ffffff на чисто чорному. |
Охоронне поле та мінімальні розміри
Захищайте знак вільним простором. Охоронне поле з усіх боків дорівнює 25% ширини знака (¼ діаметра). Ні текст, ні краї, ні інші логотипи не входять у цю зону.
Мінімальні розміри
| Контекст | Мін. розмір |
|---|---|
| Цифрове середовище — повний знак | 32 px |
| Цифрове середовище — контур фавікона | 16 px |
| Логотип у навігації (сайт) | 40–48 px |
| Друк — повний знак | 10 мм |
Нижче 32 px переходьте на складений контур фавікона. Нижче 16 px шестизонна колірна система руйнується — натомість використовуйте суцільну одноколірну версію.
Контейнер логотипа (навігація / застосунок)
У навігації та застосунках знак розміщується всередині сквіркл-контейнера з радіусом кутів ≈ 48 px, де знак займає ~64% контейнера. Це єдине схвалене «рамкове» виконання.
Неправильне використання логотипа
Цілісність знака тримається на послідовній геометрії та впізнаваному колірному підписі, але він також створений гнучким і адаптивним, коли цього потребує контекст.
Завжди
- Використовуйте наданий вектор (SVG) як вихідну точку
- Keep the three-zone gradient signature intact (crown, eyes, furnace; sides are mirrored)
- Контур можна розміщувати майже на будь-якому кольорі — робити білим, чорним, градієнтним або будь-яким, якого потребує дизайн
- Зберігайте повне охоронне поле
- Нижче 32 px використовуйте контур фавікона
- Послідовність — найвищий пріоритет: стилізуйте вільно, але зберігайте впізнаваність у всіх застосуваннях
Уникайте
- Не замінюйте градієнтні зони сторонніми кольорами. Водночас плоскі однотонні заливки — синя для очей, помаранчева для печі, багряна для корони — є прийнятним спрощенням там, де потрібна краща читабельність або одноколірне відтворення.
- Не відтворюйте й не наближайте знак з нуля — завжди починайте зі справжнього файла
- Не обрізайте коло й не впускайте елементи в охоронне поле
- Не змінюйте стилізацію в межах одного проєкту: щойно напрям для знака обрано, він діє в кожній точці контакту цього проєкту
Правила стилізації
Знак створено так, щоб його можна було стилізувати відповідно до візуальної мови платформи або проєкту, де він живе. Наприклад, логотип DIYRO KIWIYA у TikTok має той самий глітч-ефект зі зсувом RGB, що й власний знак TikTok: логотип адаптується до естетики платформи, залишаючись безпомилково собою.
- Сам контур можна й варто стилізувати: робити білим, кольоровим, градієнтним або навіть розміщувати безпосередньо на фотографії з контрастною обводкою
- Фавікон dkiwiya.com — це контур із застосованим градієнтом; канонічний приклад схваленої стилізації
- Ефекти на кшталт світіння, скла чи фаски не заборонені, якщо служать естетиці проєкту: вони підпорядковуються правилам стилізації, а не переліку помилок
- Адаптація — обертання, глітч, рухові ефекти — прийнятна, коли цього потребує дизайн-мова проєкту й знак лишається впізнаваним
- Єдина непорушна умова: послідовність у межах проєкту. Оберіть стиль і дотримуйтеся його в кожній точці контакту.
Колірна система
Палітра — єдиний свідомо обраний тональний діапазон, виражений двома способами: іменована системна палітра (для інтерфейсів, коду й застосувань) та справжні точки градієнтів знака (усередині логотипа). Вони свідомо споріднені, але не тотожні: іменована палітра — яскравіше, оптимізоване для екрана вираження глибших градієнтних тонів усередині знака.
Іменовані акценти (наприклад, червоний #E5194A) — не буквальні hex-значення всередині SVG (верх корони має #d90012). This is intentional and recorded: the mark uses deep, saturated gradient stops for physical reproduction richness; the UI palette uses brighter, more legible screen values. Treat them as one family — не «виправляйте» одне, щоб воно збігалося з іншим. Якщо майбутній реекспорт уніфікує їх, оновіть цей розділ.
Базові нейтральні кольори
Іменована системна палітра
Використовуйте для акцентів, посилань, станів фокусу, візуалізації даних і атмосферного світіння. В одному екрані домінує не більше одного акценту.
Справжні точки градієнтів знака
Ці точки існують лише всередині SVG логотипа. Вони забезпечують насичені тональні переходи для відтворення у високій роздільності та фізичного виробництва.
Корона — лінійний (вертикальний, 0° знизу вгору)
#FF00FF → #FB00EC (3%) → #F300B9 (13%) → #EC008C (24%) → #E60066 (35%) → #E10047 (46%) → #DD0030 (58%) → #DB001F (70%) → #D90015 (83%) → #D90012
Лінзи / Очі — лінійний (горизонтальний, від центру до краю)
#805AFF (центральний тон) → #564DE0 → #3142C4 → #1639B0 → #0534A4 → #0033A0 (зовнішній край)
Піч — лінійний (вертикальний, 0° знизу вгору)
#F2A800 → #FFD719
Рамки та лінії
| Токен | Значення | Застосування |
|---|---|---|
| Структурна лінія | rgba(240,237,232,0.08) | Стандартні рамки карток / розділів |
| Лінія наведення / активного стану | rgba(240,237,232,0.13) | Інтерактивне виділення |
Типографіка
Plus Jakarta Sans — єдина гарнітура всього бренду. Жодних антикв, Inter, Roboto, Arial чи системних стеків. Шрифт виконує основну роботу: щільний трекінг і насиченість 800 у великих кеглях створюють структурне, преміальне відчуття.
Шкала та правила типографіки
| Роль | Насиченість | Трекінг | Регістр |
|---|---|---|---|
| Дисплейний / H1 | 800 | −0,04em | Речення або ВЕРХНІЙ |
| H2 | 800 | −0,035em | Речення або ВЕРХНІЙ |
| H3 | 700 | −0,02em | Речення |
| Інтерфейс / кнопки | 600 | 0 | Речення |
| Основний текст | 500 | 0 | Речення |
| Надзаголовок / мета | 400 (моно) | +0,1 до +0,28em | ВЕРХНІЙ |
Моноширинний акцентний шрифт — JetBrains Mono; він використовується для надзаголовків, лічильників, технічних підписів і метаданих. Моноширинний шрифт ніколи не використовується для основного тексту.
Композиція та сітка
Вишукана темна розкіш із натхненням від Apple. За замовчуванням композиції центровані. Сміливі, структурні, симетричні. Вирівнювання ліворуч — лише в компонентах із високою щільністю даних.
Вирівнювання
- По центру — герой, заголовки розділів, окремі картки, контакт
- Ліворуч — списки компетенцій, метадані проєктів, таблиці, щільні дані
Геометрія
- Картки / поверхні: 22 px радіус
- Пілюлі / кнопки: 100 px радіус
- Контейнер логотипа: сквіркл ≈48 px
Навігація
Навігація на dkiwiya.com — це пілюля, що розгортається й згортається з логотипом. Вона згортається під час прокручування й розгортається при наведенні або у верхній частині сторінки. Над контентом з’являються розмиття тла й делікатна рамка.
Шкала відступів
Вертикальний ритм розділів: 90 px на комп’ютері / 60 px на мобільному. Максимальна ширина контенту ~980–1100 px, по центру.
Компоненти
- Картки робіт — сквіркл 22 px, справжній скриншот на тлі; наведення масштабує зображення й показує «Переглянути кейс →»
- Рядок показників — безпосередньо під закликом до дії героя, відокремлений верхньою рамкою
- Рухомий рядок — смуга на всю ширину між героєм і роботами, що прокручується та маскується з обох країв
- Компетенції — нумеровані рядки з вирівнюванням ліворуч: індекс · дисципліна (800) · теги-пілюлі
Зерно та світіння
Два атмосферні шари є непорушними й присутні на кожній поверхні: зернистий оверлей та акцентні світіння. Саме вони відділяють бренд від плаского темного шаблону.
Зерно
Делікатна текстура фрактального шуму з непрозорістю ~2,5% над усією областю перегляду: фіксована, неінтерактивна, поверх контенту. Реалізована як вбудований SVG feTurbulence у data URI (цей документ використовує саме його).
Світіння
Великі радіальні градієнти акцентних кольорів із непрозорістю 6–16%, сильно розмиті (~120 px), позаду контенту. Синій, червоний і помаранчевий використовуйте помірно для глибини — ніколи не настільки виразно, щоб вони читалися окремими колірними полями.
Рух та анімація інтро
Рух рівня Apple: спокійний, плавний, цілеспрямований. Стандартна функція плавності cubic-bezier(0.16, 1, 0.3, 1), тривалість 0,3–0,6 с. Ніщо не підстрибує й не обертається заради декору.
Анімації, керовані прокручуванням
- Анімації керуються прокручуванням і є зворотними — вони безперервно змінюються відповідно до позиції прокручування, а не відтворюються один раз за сесію
- Послідовність еволюції логотипа використовує справжні файли ресурсів — ніколи не наближення
- Еволюцію логотипа подано як горизонтальну прокручувану галерею (у стилі Cover Flow, як вінілові платівки в ранніх iPod/iOS): коли користувач прокручує вниз, логотипи рухаються горизонтально
- Точки прогресу й текстовий підпис позначають кожну епоху
- Фінальний логотип завжди є канонічним SVG
- Кнопка Пропустити завжди присутня
Рух у взаємодіях
- Картки: підняття й масштабування зображення при наведенні, плавність 0,4–0,5 с
- Кнопки: делікатний translateY при наведенні / активації
- Поява при прокручуванні: підняття на 30 px і згасання, послідовно, зворотно до прокручування
Голос і тексти
Голос студії — літературний, різноманітний і впевнений: речення пояснюють, описують, вибудовують контекст, а в потрібний момент доходять до лаконічної тези. Не уривчасті трьох-семислівні пункти в стилі ШІ й ніколи не корпоративний наповнювач. Текст щільний там, де це потрібно, ясний там, де має бути, і завжди поважає інтелект читача.
Звучить так
- «Айдентики, продукти, маркетингові стратегії, системи — усе, що потрібно бренду, студія проєктує».
- «Люди довіряють відомому, передбачуваному й стабільному. Системи студії дають саме це».
- «Щільно там, де потрібно, і ніколи не виснажливо для читання».
- «Чесна оцінка того, чи підходить студія цьому проєкту».
Ніколи не звучить так
- «Ми використовуємо синергії для рішень світового класу». — псевдопрофесійний жаргон, що жертвує розумінням заради ілюзії експертності
- «Закохані в піксельно досконалий дизайн!» — ажіотаж на знаках оклику
- Коротко. Влучно. Завжди. — шаблонні ШІ-фрагменти, що позбавляють текст особистості й знижують професійне сприйняття
- Скромні до непомітності застереження («лише маленька студія»)
Механіка
- Особа: голос студії безособовий — увага на тому, що створено, а не хто це створив. «Студія» або «DIYRO KIWIYA» позначають суб’єкт. Проєкти описуються через результати, а не через автора.
- Регістр: sentence case for copy; UPPERCASE reserved for mono eyebrows/labels.
- Числа: моноширинний шрифт, використовуються як структурні маркери (01 / Вибране).
Стандарти застосування
SEO та метадані
| Поле | Стандарт |
|---|---|
| Заголовок | DIYRO KIWIYA — студія дизайну брендів, продуктів і маркетингу |
| Опис | Одне речення, ≤160 символів, називає напрями роботи студії. Наголос на роботі по всьому світу. |
| Колір теми | #121212 |
| Зображення OG | 1200 × 630 |
| Локаль | en_US primary; ua, ru alternates |
| Структура | One <h1> per page; semantic header/main/section/footer/nav; alt text on all images |
Фавікон та іконки застосунків
Використовуйте складений контур фавікона з SVG. Надавайте розміри 16, 32, 180 (apple-touch), 512 (PWA). У найменших розмірах переконайтеся, що перехрестя K залишається читабельним, — тестуйте на світлому й темному інтерфейсі браузера.
Соціальні мережі та OG
Зображення OG: знак на майже чорному тлі з одним акцентним світінням, текстовий логотип у Plus Jakarta 800. Безпечну область тримайте по центру. Один акцент на картку.
Ділові матеріали / мерч (за потреби)
Лише майже чорне або молочно-біле тло. Блок зі знаком і текстовим логотипом — по центру або вгорі ліворуч. Відтворення точкового градієнта має відповідати справжнім точкам градієнтів знака (§06), а не яскравішій палітрі інтерфейсу.