# Identité de marque — bikedo.app > Guide d'identité visuelle pour bikedo.app : logotype, palette, typographie, voix et ton. Source: https://bikedo.app/fr/brand Locale: fr Comment utiliser la marque bikedo.app. Petit guide du logotype, de la palette, de la typographie et de notre manière de parler du produit. Si vous utilisez des éléments BikeDo sur un site partenaire, dans un kit presse ou un post communautaire, c'est la source de vérité. --- ## Logotype Deux couleurs, deux graisses, un accent Clay. Inter Black, interlettrage resserré. - Le logotype est toujours « bikedo.app » (minuscules). Le suffixe « .app » est toujours en Clay. - Espace libre autour du logotype au moins égal à la hauteur du « b ». Pas de tassement. - Dans le texte, écrivez le produit BikeDo (CamelCase) — jamais « BikeDo App » ni « BikeDo API ». --- ## Icônes La marque de l’app — un « b » minuscule en Clay sur une tuile sombre. La même marque sert d’icône d’app, de favicon et d’icône dans les pieds de page ou les signatures. ![bikedo.app](https://bikedo.app/brand/app-icon-512.png) - **Icône de l’app** — Carré arrondi, « b » en Clay sur Black/Charcoal. iOS et Android, l’App Store et Google Play. ([PNG 1024](https://bikedo.app/brand/app-icon-1024.png)) - **Favicon / petite** — Une lettre plus grande pour la lisibilité à 16–32 px. Onglets du navigateur, favoris et PWA. ([.ico](https://bikedo.app/brand/favicon.ico)) - **Source vectorielle** — SVG maître pour les grands rendus et l’impression — se met à l’échelle sans perte de qualité. ([SVG](https://bikedo.app/brand/icon.svg)) - Ne recolorez pas, ne déformez pas et ne faites pas pivoter la marque. Conservez ses proportions et son espace de protection. - L’icône intègre son fond sombre — ne la placez pas sur une autre tuile sombre sans espacement. --- ## Fonds d’écran Fonds d’écran dans la palette de la marque — la marque sur charcoal, en 5K. Choisissez la marque seule ou avec le slogan. ![bikedo.app wallpaper](https://bikedo.app/brand/wallpapers/wallpaper-plain.jpg) - **Marque seule** — La marque bikedo.app centrée sur charcoal. Épuré, sans slogan. 5120×2880. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-5120x2880.png)) - **Avec le slogan · PL** — La marque avec le slogan. 5120×2880 — choisissez votre langue. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-5120x2880.png)) - **Avec le slogan · EN** — La marque avec le slogan. 5120×2880 — choisissez votre langue. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-5120x2880.png)) - **Ultrawide** — Un recadrage panoramique pour ultrawide et double écran. 5120×1008. ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-ultrawide-5120x1008.png)) **Pour téléphone** - **Marque seule** — La marque seule, dans la moitié inférieure (compatible écran de verrouillage). iPhone et 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)) - **Avec le slogan · PL** — La marque avec le slogan, dans la moitié inférieure. iPhone et 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)) - **Avec le slogan · EN** — La marque avec le slogan, dans la moitié inférieure. iPhone et 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)) **Réseaux / partage** Image Open Graph 1200×630 pour les partages et aperçus sur les réseaux. - **Marque seule** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-og-1200x630.png)) - **Avec le slogan · PL** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-og-1200x630.png)) - **Avec le slogan · EN** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-og-1200x630.png)) --- ## Palette de couleurs Inspirée des canyons. Un accent chaud (Clay), deux foncés, deux neutres, deux tons de texte. Chaque couleur a un rôle défini — restez dans le cadre. | Name | Hex | Role | |------|-----|------| | Clay | `#C45E3A` | Accent principal. CTA, liens, focus, états actifs. Jamais en fond de page. | | Black | `#1A1A1A` | Fond de page (surfaces sombres). Canvas par défaut de l'app mobile et du web. | | Charcoal | `#2D2D2D` | Fond des cartes/panneaux sur surfaces sombres. Une nuance plus claire que Black. | | Stone | `#4A4A4A` | Bordures, séparateurs, filets sur surfaces sombres. Réduire à 30–60% d'opacité pour les séparateurs discrets. | | Text light | `#F5F5F5` | Texte principal sur surfaces sombres. Titres et corps sur Black/Charcoal. | | Text muted | `#78716C` | Texte secondaire, légendes, indices, placeholders. WCAG AA sur Black pour les tailles body. | | Sand | `#E8DED5` | Bordure sur surfaces claires (marketing, mockups). Va avec Light bg. | | Light bg | `#F8F6F3` | Blanc cassé pour le thème clair et les mockups. Jamais de blanc pur. | --- ## Typographie Inter pour le produit et le corps. Playfair Display pour les titres éditoriaux des pages marketing. Ne pas mélanger — un rôle par surface. - **Inter** — UI + corps - **Playfair Display** — Titres éditoriaux Hierarchy: - H1 — Playfair, 48–60px: _Un foyer plus simple pour vos vélos._ - H2 — Playfair, 28–36px: _L'historique d'entretien sans tableurs._ - Body — Inter, 16–18px: Saisissez un entretien en deux taps. Ajoutez une photo. Partagez avec un atelier. L'historique complet voyage avec le vélo quand il change de mains. - Caption — Inter, 12–13px: Dernier entretien il y a 14 jours · 1 240 km --- ## Voix & ton BikeDo parle comme un ami calme et compétent qui s'y connaît en vélos. Sûr, précis, jamais racoleur. On ne crie pas. ### À faire - **Utilisez le logotype « bikedo.app » avec « .app » en Clay.** — Associez-le à Inter Black/Bold et laissez-le respirer — au moins la hauteur du « b » en espace libre. - **Écrivez le produit en texte comme « BikeDo » (CamelCase).** — Le CamelCase se lit mieux dans une phrase que le logotype en minuscules. - **Utilisez Clay avec parcimonie — un seul accent par page Black/Charcoal.** — Si tout est accentué, plus rien ne l'est. Clay doit attirer l'œil vers l'action suivante. - **Sentence case pour titres et boutons.** — Le sentence case sonne plus humain, moins corporate. ### À éviter - **N'écrivez pas « BikeDo App », « BikeDo Mobile » ou « BikeDo API » dans le texte.** — C'est juste BikeDo — l'app et l'API sont des détails techniques, pas le nom. - **Ne modifiez pas la séparation de couleurs du logotype.** — « bikedo » toujours en Text light (fonds sombres) ou Charcoal (fonds clairs) ; « .app » toujours en Clay. - **Ne mettez pas Clay sur Clay et ne recolorez pas le suffixe « .app ».** — Vous perdez le signal de reconnaissance qui ancre la marque. - **N'utilisez pas du blanc pur en fond.** — Utilisez Light bg (#F8F6F3). Le blanc pur paraît clinique à côté de la palette terreuse. - **N'ajoutez pas de tagline accolée au logotype.** — Si vous avez besoin d'une tagline, mettez-la sur une ligne séparée sous le logotype, en Text muted. --- Besoin de quelque chose qui ne figure pas ici (logo vectoriel, templates OG, badges partenaires) ? Écrivez à hello@bikedo.app.