# Айдентика — bikedo.app > Гайд із візуальної ідентифікації bikedo.app: вордмарк, палітра, типографіка, voice & tone. Source: https://bikedo.app/uk/brand Locale: uk Як використовувати бренд bikedo.app. Короткий гайд по вордмарку, палітрі, типографіці та тому, як ми говоримо про продукт. Якщо ти використовуєш ассети BikeDo на партнерському сайті, у пресс-кіті чи комʼюніті-пості — це джерело правди. --- ## Вордмарк Два кольори, дві товщини, один Clay-акцент. Inter Black, трохи стиснутий трекінг. - Вордмарк завжди «bikedo.app» (малими). Суфікс «.app» завжди в Clay. - Простір довкола вордмарку щонайменше висоти «b». Не стискай. - У тексті продукт пишемо як BikeDo (CamelCase) — ніколи «BikeDo App» чи «BikeDo API». --- ## Іконки Знак застосунку — маленька «b» кольору Clay на темній плитці. Той самий знак працює як іконка застосунку, фавікон та іконка в підвалах чи підписах. ![bikedo.app](https://bikedo.app/brand/app-icon-512.png) - **Іконка застосунку** — Заокруглений квадрат, «b» у Clay на Black/Charcoal. iOS та Android, App Store і Google Play. ([PNG 1024](https://bikedo.app/brand/app-icon-1024.png)) - **Фавікон / мала** — Більша літера для читабельності при 16–32 px. Вкладки браузера, закладки та PWA. ([.ico](https://bikedo.app/brand/favicon.ico)) - **Векторне джерело** — Майстер-SVG для великих рендерів і друку — масштабується без втрати якості. ([SVG](https://bikedo.app/brand/icon.svg)) - Не перефарбовуй, не спотворюй і не обертай знак. Зберігай пропорції та вільний простір. - Іконка має вбудований темний фон — не розміщуй її на ще одній темній плитці без відступу. --- ## Шпалери Шпалери для робочого столу в палітрі бренду — знак на charcoal, у 5K. Обери лише знак або версію зі слоганом. ![bikedo.app wallpaper](https://bikedo.app/brand/wallpapers/wallpaper-plain.jpg) - **Лише знак** — Знак bikedo.app по центру на charcoal. Чисто, без слогана. 5120×2880. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-5120x2880.png)) - **Зі слоганом · PL** — Знак зі слоганом бренду. 5120×2880 — обери мову. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-5120x2880.png)) - **Зі слоганом · EN** — Знак зі слоганом бренду. 5120×2880 — обери мову. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-5120x2880.png)) - **Ultrawide** — Панорамний кадр для ultrawide і двох моніторів. 5120×1008. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-ultrawide-5120x1008.png)) **Для телефона** - **Лише знак** — Лише знак, у нижній половині (безпечно для екрана блокування). iPhone та Android. ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-plain-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-plain-phone-android-1080x2400.png)) - **Зі слоганом · PL** — Знак зі слоганом, у нижній половині. iPhone та Android. ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-pl-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-pl-phone-android-1080x2400.png)) - **Зі слоганом · EN** — Знак зі слоганом, у нижній половині. iPhone та Android. ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-en-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-en-phone-android-1080x2400.png)) **Соцмережі / поширення** Зображення Open Graph 1200×630 для поширень і прев'ю в соцмережах. - **Лише знак** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-og-1200x630.png)) - **Зі слоганом · PL** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-og-1200x630.png)) - **Зі слоганом · EN** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-og-1200x630.png)) --- ## Палітра кольорів Натхненна каньйонами. Один теплий акцент (Clay), два темні, два нейтральні, два текстові тони. Кожен колір має роль — тримайся її. | Name | Hex | Role | |------|-----|------| | Clay | `#C45E3A` | Головний акцент. CTA, посилання, focus, активні стани. Ніколи як фон сторінки. | | Black | `#1A1A1A` | Фон сторінки (темні поверхні). Дефолтний canvas мобайла і вебу. | | Charcoal | `#2D2D2D` | Фон карток/панелей на темних поверхнях. На тон світліше за Black. | | Stone | `#4A4A4A` | Бордюри, роздільники, тонкі лінії на темних поверхнях. Знижуй до 30–60% непрозорості для делікатних сепараторів. | | Text light | `#F5F5F5` | Основний текст на темних поверхнях. Заголовки і body на Black/Charcoal. | | Text muted | `#78716C` | Другорядний текст, підписи, хінти, плейсхолдери. Відповідає WCAG AA на Black для body-розмірів. | | Sand | `#E8DED5` | Бордюр на світлих поверхнях (маркетинг, мокапи). Поєднується з Light bg. | | Light bg | `#F8F6F3` | Зламаний білий для світлої теми та мокапів. Ніколи чистий білий. | --- ## Типографіка Inter для продукту і body. Playfair Display для редакційних заголовків на маркетингових сторінках. Не міксуй — одна роль на поверхню. - **Inter** — UI + body - **Playfair Display** — Редакційні заголовки Hierarchy: - H1 — Playfair, 48–60px: _Простіша домівка для твоїх велосипедів._ - H2 — Playfair, 28–36px: _Сервісна історія без таблиць._ - Body — Inter, 16–18px: Додай сервіс у два тапи. Фото. Поділись із майстернею. Уся історія мандрує з велом, коли він змінює власника. - Caption — Inter, 12–13px: Останній сервіс 14 днів тому · 1 240 км --- ## Voice & tone BikeDo звучить як спокійний, компетентний друг, який знається на велосипедах. Впевнений, конкретний, ніколи не крикливий. Ми не кричимо. ### Так - **Використовуй вордмарк як «bikedo.app» із «.app» у Clay.** — Поєднай з Inter Black/Bold і дай простір — щонайменше висота «b» вільного місця. - **У тексті пиши продукт як «BikeDo» (CamelCase).** — CamelCase у реченні читається краще, ніж малими літерами. - **Використовуй Clay помірно — як єдиний акцент на сторінці Black/Charcoal.** — Коли все акцент — нічого не акцент. Clay має вести око до наступної дії. - **Використовуй sentence case у заголовках і кнопках.** — Sentence case звучить людяніше, менш корпоративно. ### Ні - **Не пиши «BikeDo App», «BikeDo Mobile» чи «BikeDo API» у тексті.** — Це просто BikeDo — застосунок і API є деталями реалізації, не частиною назви. - **Не змінюй розподіл кольорів вордмарку.** — «bikedo» завжди в Text light (темне тло) або Charcoal (світле); «.app» завжди в Clay. - **Не клади Clay на Clay і не перефарбовуй суфікс «.app».** — Втрачаєш сигнал упізнаваності, який тримає бренд. - **Не використовуй чистий білий як тло.** — Використовуй Light bg (#F8F6F3). Чистий білий поряд із землистою палітрою виглядає клінічно. - **Не додавай tagline lockup поруч із вордмарком.** — Якщо потрібен tagline, постав його окремим рядком під вордмарком у Text muted. --- Потрібне щось, чого тут немає (векторне лого, OG-шаблони, партнерські бейджі)? Пиши на hello@bikedo.app.