# BeeToGreen — Design System **Livrable client · V1.0 · 12 juillet 2026** Source de vérité : fichiers Figma du 10 juillet 2026 (Brand Library, Brandbook, Digital website, Social Media). --- ## 1. La marque **Vision** — « Faire du vélo le réflexe du quotidien - pour toutes et tous, en entreprise. » **Mission** — BeeToGreen aide les entreprises à transformer la mobilité de leurs salariés grâce à une solution clé en main qui finance, structure et déploie le vélo en entreprise. **Positionnement** — « Beetogreen est la plateforme B2B de ceux qui veulent rouler mieux, pas rouler parfait. Pour les urbains exigeants qui cherchent l'expertise sans le discours, le conseil sans la leçon, et une marque qui leur ressemble : engagée, directe, et jamais ennuyeuse. » ### Les 4 piliers 1. **Expertise** — On connaît le vélo. Chaque conseil, chaque produit, chaque recommandation est fondée sur une vraie connaissance du sujet. On n'est pas un marketplace de plus - on est des conseillers. 2. **Engagement** — On assume nos convictions sur la mobilité durable. On agit, on propose, on avance - mais on ne fait jamais la morale. 3. **Accessibilité** — Pas de jargon, pas de posture. On parle à tout le monde, du débutant au passionné. Le vélo est pour tous, notre marque aussi. 4. **Décontracté** — Le vélo c'est du fun avant d'être un geste écologique. On garde l'énergie, l'humour, la bonne humeur dans tout ce qu'on fait. ### Ton de voix « On écrit comme on parle à un collègue qu'on apprécie : direct, chaleureux, sans formules creuses. » - ✅ **Do** — direct, vivant, chiffré : « Activez le vélo, simplement. » · « On finance, vous roulez. » · « Moins de bouchons, plus de sourires. » · « On parle vrai, on chiffre tout. » - ❌ **Don't** — corporate, vague, jargonneux : « Solution holistique d'écomobilité B2B. » · « Disrupter le paradigme de la mobilité. » · « Une expérience utilisateur incomparable. » --- ## 2. Couleurs — 42 tokens Trois catégories, toutes reliées à des variables Figma compatibles Tokens Studio. ### Brand Greens (5) | Token | Hex | |---|---| | brand/lime | `#E6FF55` | | brand/dark-green | `#0C1E18` | | brand/green-grass | `#005236` | | brand/green-light | `#008558` | | brand/green-ice | `#D4F5E0` | Surface récurrente : paper `#F5F0E6`. ### Expressive (8 familles × 3 tons) | Famille | light | dark | bg | |---|---|---|---| | coquelicot | `#FFC4CE` | `#86071C` | `#FFEBEE` | | amethyste | `#D3BFF3` | `#4B1A9A` | `#F3EEFC` | | mango | `#F7C9BA` | `#E54C1E` | `#FDF1ED` | | cacao | `#FCEE98` | `#372411` | `#FEFCEB` | | marine | `#8CCAF7` | `#033968` | `#ECF6FE` | | pivoine | `#FFD0E0` | `#B01E5C` | `#FFF0F5` | | cobalt | `#C2CCFF` | `#3457FF` | `#EFF1FF` | | ardoise | `#C8D1DA` | `#2C3E50` | `#F0F3F6` | ### Greyscale Zinc (11) + Base (2) `50 #FAFAFA · 100 #F4F4F5 · 200 #E4E4E7 · 300 #D4D4D8 · 400 #A1A1AA · 500 #71717A · 600 #52525B · 700 #3F3F46 · 800 #27272A · 900 #18181B · 950 #09090B` — plus `base/white #FFFFFF` et `base/black #000000`. 25 pairings de combinaisons sont approuvés (section « Combinations » de la Brand Library). ### Print - Standard / business → **Pantone 388 C** - Signature / hero → **Pantone 802 C (neon)**, option premium --- ## 3. Typographie — 18 styles / 7 groupes Deux fontes : **Parkinsans** (display, headlines, titres) et **Instrument Sans** (body, labels, UI, code). | Style | Fonte | Spécification | |---|---|---| | display/l | Parkinsans ExtraBold | 100px · 100% · -3% | | display/m | Parkinsans Bold | 72px · 100% · -3% | | display/s | Parkinsans Bold | 56px · 100% · -2.5% | | headline/l | Parkinsans Bold | 48px · 110% · -2% | | headline/m | Parkinsans Bold | 36px · 115% · -2% | | headline/s | Parkinsans Bold | 28px · 120% · -1.5% | | title/l | Parkinsans SemiBold | 24px · 130% · -1% | | title/m | Parkinsans SemiBold | 20px · 135% · -0.5% | | body/l | Instrument Sans Regular | 18px · 150% | | body/m | Instrument Sans Regular | 16px · 150% | | body/s | Instrument Sans Regular | 14px · 150% | | label/m | Instrument Sans Medium | 14px · 140% | | label/s | Instrument Sans Medium | 12px · 140% | | eyebrow/m | Instrument Sans Medium | 14px · 130% · +12% · UPPERCASE | | eyebrow/s | Instrument Sans Medium | 11px · 130% · +14% · UPPERCASE | | caption/default | Instrument Sans Regular | 12px · 145% | | code/m | Instrument Sans Mono | 14px · 150% | | code/s | Instrument Sans Mono | 12px · 150% | --- ## 4. Logo - **Logo full** — styles brand/expressive × 8 couleurs. - **Icône B** — 7 couleurs ; **B en cercle** — 37 combinaisons fond/forme approuvées. - Déclinaison pastille **Cercle-03** — 10 teintes. ### Règles d'usage - Ne pas faire pivoter le logo (toujours horizontal). - Ne pas changer la typographie. - Opacité 100 % — pas de transparence. - Ne pas détourer / outliner le logo. --- ## 5. Iconographie & formes - **Interface** — set complet d'environ 1 630 icônes (Streamline Flex), noms en kebab-case (`arrow-right`, `zoom-in`…). - **Icons / Graphic** — set web d'environ 470 icônes Streamline pour le site. - **Shapes** — 5 formes organiques « curl » de marque × 5 couleurs, utilisées en habillage (covers, posts, hero). - **Flags** — 15 drapeaux (sélecteur de langue). --- ## 6. Layout & grilles - **Espacement** : diviser le plus grand côté du layout par 25 (ex. 590 px / 25 = 24 px de marge). - Typo sur pleine image autorisée si marges et hiérarchie respectées ; photo full-frame OK si contraste suffisant. - Slides : 1920×1080, coins arrondis 20 px, meta corners (chapitre / version / mention) en Schibsted Grotesk Medium 14, green-light. --- ## 7. Composants livrés (63) Compilés et prêts à l'emploi dans ce projet (`_ds_bundle.js`). **Marque** — Button (44 variantes), Push (9 blocs CTA), Shapes, Cercle03, logos (full, icône B, B en cercle), Interface (icônes), Flag, NavigationBar, TextLineAbstract. **UI Web** (site Digital) — BTN et variantes de boutons, Input, Field, Tabs, Tag, Slider, ControlHandle, CardAides, CardService, CardCatégorie, IntroBlock, IconBox, Footer, MenuContainer, ModuleHeader/Hero Desktop, Marquee, PageNumber, CursorGrab, logos & carrousels partenaires, boutons sociaux, sets d'icônes web. --- ## 8. Templates - **Présentation BTG** (`templates/deck-btg/`) — deck 1920×1080 : cover, programme, chapitre, cartes offre, étapes, chiffre clé, clôture. - **Landing page BTG** (`templates/landing-page/`) — page marketing complète d'après la Homepage-D finale : nav, hero « Activez le vélo. Simplement. », promesse + 3 cartes, témoignage, FAQ, push CTA, footer. --- ## 9. Fichiers sources 1. **Brand Library** — source de vérité (Foundations, Color, Typography, Logo, Iconography, Shapes, Grid-Spacing, Effects, Components). 2. **Brandbook** — 59 slides + Motion + gabarits de présentation + posts social media. 3. **Digital website** — grilles, direction artistique UI, Homepage finale, wireframes. 4. **Social Media** — posts, stories, reveal branding. ### Points ouverts - Les chapitres Typography et Visual Content du Brandbook contiennent encore de la copie template en anglais — à remplacer côté Figma. - Paragraphe Mission à finaliser (note « [Édite ce paragraphe avec ta version définitive] » dans Foundations).