# Brand identity — bikedo.app > Visual identity guidelines for bikedo.app: wordmark, color palette, typography, and voice & tone. Source: https://bikedo.app/en/brand Locale: en How to use the bikedo.app brand. A short guide to the wordmark, palette, typography, and the way we talk about the product. If you're using BikeDo assets in a partner site, a press kit, or a community post, this is the source of truth. --- ## Wordmark Two color, two weight, one Clay accent. Inter Black, letter-spacing tightened. - Wordmark is always “bikedo.app” (lowercase). The “.app” suffix is always Clay. - Clearspace around the wordmark is at least the height of the “b” glyph. Don't crowd it. - In prose, write the product as BikeDo (CamelCase) — never “BikeDo App” or “BikeDo API”. --- ## Icons The app mark — a lowercase “b” in Clay on a dark tile. The same mark works as the app icon, the favicon, and the icon in footers or signatures. ![bikedo.app](https://bikedo.app/brand/app-icon-512.png) - **App icon** — Rounded square, Clay “b” on a Black/Charcoal tile. iOS and Android, the App Store and Google Play. ([PNG 1024](https://bikedo.app/brand/app-icon-1024.png)) - **Favicon / small** — A larger letter for legibility at 16–32 px. Browser tabs, bookmarks and PWA. ([.ico](https://bikedo.app/brand/favicon.ico)) - **Vector source** — Master SVG for large renders and print — scales without losing quality. ([SVG](https://bikedo.app/brand/icon.svg)) - Don’t recolor, distort or rotate the mark. Keep its proportions and clear space. - The icon has its dark background built in — don’t place it on another dark tile without spacing. --- ## Wallpapers Desktop wallpapers in the brand palette — the wordmark on charcoal, in 5K. Pick the plain mark or one with the slogan. ![bikedo.app wallpaper](https://bikedo.app/brand/wallpapers/wallpaper-plain.jpg) - **Wordmark only** — The bikedo.app mark centered on charcoal. Clean, no slogan. 5120×2880. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-5120x2880.png)) - **With the slogan · PL** — The mark with the brand slogan. 5120×2880 — pick your language. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-5120x2880.png)) - **With the slogan · EN** — The mark with the brand slogan. 5120×2880 — pick your language. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-5120x2880.png)) - **Ultrawide** — A letterbox crop for ultrawide and dual-monitor setups. 5120×1008. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-ultrawide-5120x1008.png)) **For phone** - **Wordmark only** — Just the wordmark, mark in the lower half (lock-screen safe). iPhone and 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)) - **With the slogan · PL** — The wordmark with the slogan, in the lower half. iPhone and 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)) - **With the slogan · EN** — The wordmark with the slogan, in the lower half. iPhone and 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)) **Social / share** Open Graph 1200×630 image for shares and social previews. - **Wordmark only** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-og-1200x630.png)) - **With the slogan · PL** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-og-1200x630.png)) - **With the slogan · EN** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-og-1200x630.png)) --- ## Color palette Canyon-inspired. One warm accent (Clay), two darks, two neutrals, two text tones. Each color has a defined role — keep them in that lane. | Name | Hex | Role | |------|-----|------| | Clay | `#C45E3A` | Primary accent. CTAs, links, focus rings, active states. Never as page background. | | Black | `#1A1A1A` | Page background (dark surfaces). Default canvas in the mobile app and the web product surfaces. | | Charcoal | `#2D2D2D` | Card / panel background on dark surfaces. One step lighter than Black. | | Stone | `#4A4A4A` | Borders, dividers, hairlines on dark surfaces. Reduce to 30–60% opacity for subtle separators. | | Text light | `#F5F5F5` | Primary text on dark surfaces. Headings and body copy on Black / Charcoal. | | Text muted | `#78716C` | Secondary text, captions, helper text, placeholders. Meets WCAG AA on Black for body sizes. | | Sand | `#E8DED5` | Border on light surfaces (marketing pages, mockups). Pairs with Light bg. | | Light bg | `#F8F6F3` | Off-white surface for the light theme and product mockups. Never pure white. | --- ## Typography Inter for the product and body. Playfair Display for editorial headings on marketing surfaces. Don't mix them — pick one role per surface. - **Inter** — UI + body - **Playfair Display** — Editorial headings Hierarchy: - H1 — Playfair, 48–60px: _A simpler home for your bikes._ - H2 — Playfair, 28–36px: _Track service history without spreadsheets._ - Body — Inter, 16–18px: Log a service in two taps. Add a photo. Share with a shop. The whole history travels with the bike when it changes owners. - Caption — Inter, 12–13px: Last serviced 14 days ago · 1,240 km --- ## Voice & tone BikeDo sounds like a calm, competent friend who happens to know a lot about bikes. Confident, specific, never hypey. We don't shout. ### Do - **Use the wordmark as “bikedo.app” with .app in Clay.** — Pair it with Inter Black/Bold and let it breathe — at least the height of the “b” glyph as clearspace. - **Write the product in prose as “BikeDo” (CamelCase).** — Body copy reads better mid-sentence with the CamelCase form than with the lowercase wordmark. - **Use Clay sparingly — as the one accent on a Black/Charcoal page.** — When everything is accented, nothing is. Clay should pull the eye to the next action. - **Use sentence case for headings and buttons.** — Sentence case feels more like a person talking, less like a corporate product. ### Don't - **Don't write “BikeDo App”, “BikeDo Mobile”, or “BikeDo API” in prose.** — It's just BikeDo — the app and the API are implementation details, not part of the name. - **Don't change the wordmark color split.** — “bikedo” always in Text light (dark backgrounds) or Charcoal (light backgrounds); “.app” always in Clay. - **Don't put Clay on Clay or recolor the “.app” suffix.** — It loses the recognition cue that anchors the wordmark. - **Don't use pure white as a background.** — Use Light bg (#F8F6F3). Pure white feels clinical against the earthy palette. - **Don't add a tagline lockup next to the wordmark.** — If you need a tagline, set it on its own line below the wordmark in Text muted. --- Need anything not covered here (vector logo, OG templates, partner badges)? Email hello@bikedo.app.