Основа бренда
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), а не более яркой палитре интерфейса.