# BeeToGreen Design System

> ⚠️ **Reconstruction en cours** (10 juillet 2026). L'ancien système (basé sur un brandbook provisoire) a été supprimé. Le nouveau système est reconstruit depuis les fichiers Figma officiels du 10 juillet 2026 — source de vérité : **Beetogreen—Brand_Library_10juillet2026.fig**.

## Fondations déjà en place (`styles.css`)

- **42 tokens couleur** : Brand Greens (lime `#E6FF55`, dark-green `#0C1E18`, green-grass `#005236`, green-light `#008558`, green-ice `#D4F5E0`), 8 familles Expressive × 3 tons (coquelicot, amethyste, mango, cacao, marine, pivoine, cobalt, ardoise), Greyscale Zinc (11), Base (2).
- **18 styles typo / 7 groupes** : Parkinsans (display, headline, title) + Instrument Sans (body, label, eyebrow, caption, code). Schibsted Grotesk pour les meta du brandbook.
- Surface récurrente : paper `#F5F0E6`.

## 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.
- **4 piliers** : Expertise · Engagement · Accessibilité · Décontracté.
- **Ton** : « On écrit comme on parle à un collègue qu'on apprécie : direct, chaleureux, sans formules creuses. » Do : direct, vivant, chiffré. Don't : corporate, vague, jargonneux.

## Composants (compilés dans `_ds_bundle.js`)

Disponibles sous `window.BeeToGreenDesignSystem_3a7d8f.<Nom>` :

- `Button` — 44 variantes (shape rectangle/circle × type primary/secondary/tertiary × size sm/lg × icône × état)
- `Push` — 9 variantes de bloc CTA (push-01 … push-09)
- `Shapes` — formes organiques de marque, 5 figures × 5 couleurs
- `Cercle03` — pastille cercle, 10 teintes (color-01 … color-10)
- `LogoBeetogreenFull` — logo complet, styles brand/expressive × 8 couleurs
- `LogoIconsB` / `LogoIconsB2` — icône « B » du logo, 7 couleurs
- `LogoIconsCircleB` — icône B en cercle, 37 combinaisons FG × BG
- `Interface` — set d'icônes complet (~1 630 icônes, noms kebab-case : `property1="arrow-right"`)
- `Icon` — wrapper bas niveau du set (`name="InterfaceProperty1ArrowRight"`, data : `components/icons/icon-data.js`)
- `LineArrowLeft1StreamlineFlex` / `LineArrowRight1StreamlineFlex` / `ZoomInStreamlineFlex` — flèches & loupe Streamline Flex (la version Left est un ajout intentionnel, miroir de la Right du kit)
- `Flag` — drapeaux, 15 pays (sélecteur de langue)
- `NavigationBar` — barre de navigation site, 3 types ; `NavigationBar01` / `NavigationBar02` / `NavigationBar03` / `NavigationBarType5` — variantes standalone du kit
- `Graphic` — set d’icônes « Graphic » (23 variantes)
- `TextLineAbstract` — lignes de texte abstraites (wireframes), 5 tailles

**UI Web** (fichier Digital website) :
- `BTN` — boutons du site (Taille × Priorité × Style, axes FR) ; `Base`, `Button5`, `ButtonArrowRight`, `TertiaryCircle` — variantes de base
- `Input`, `Field`, `Tabs`, `Tag`, `Tag2`, `Slider`, `ControlHandle` — formulaires & contrôles
- `CardAides`, `CardService`, `CardCatGorie`, `IntroBlock`, `IconBox` — cartes & blocs de section
- `PushVariant10`, `PushVariant11`, `PushVariant12`, `PushVariant13`, `PushVariant14` — blocs CTA web (Push/Variant10-14, page DEV-Module-comparaison) ; `Shapes3` — copie des formes de marque référencée par ces blocs
- `Footer`, `MenuContainer`, `ModuleHeaderDesktop`, `ModuleHeroDesktop`, `Marquee`, `PageNumber`, `CursorGrab` — modules de page
- `LogoBeetogreenAltColor`, `LogoCarousel`, `LogoFull`, `Logo3`, `Logo5`, `CompnayLogo`, `IndustryLeaders`, `Frame2` — logos & carrousels
- `Social`, `SocialButton`, `SocialIcon`, `Social3` — réseaux sociaux
- `InterfaceRounded`, `Interface2`, `Interface3`, `Interface4`, `Interface8`, `Interface9`, `Graphic2`, `Arrows2`, `Button3` — icônes & dépendances
- `components/icons-graphic/` — set d'icônes web « Icons / Graphic » (~470, Streamline) + `Graphic`, exposé via `IconGraphic`

Familles Figma volontairement non construites (33 sets) : ce sont des doublons portant le même nom qu'une famille déjà compilée — « Button » ×7 sets identiques (44 variantes), « Interface » ×9 sets identiques (~1627 variantes), « Push » ×3, « Arrows » ×2, « Footer » ×2, « Navigation Bar » ×2, « Shapes » ×2, « Social » ×2, « Tag » ×1, « Cercle-03 » ×1, « Logo Beetogreen full » ×3, « Logo icons B » ×1, « Logo Icons Circle B » ×1, « Graphic » ×1 (couvert par `Graphic`/`Graphic2`), « Component 2/3/4 » doublons. Deux fichiers ne peuvent pas porter le même nom de composant ; chaque famille distincte du kit est construite.variante (couvert par les flèches Streamline), « _Control handle » (intégré à `Slider`), « Screen (to update) », « Frame 1321316223 », « Frame 1321316768 » et « Frame 1321316754 » (frames de travail sans nom), « Custom » (1 variante). Copies identiques non dupliquées (le fichier contient plusieurs exemplaires des mêmes sets) : « Interface » ×7 copies de 1627 variantes + ×2 copies de 10 icônes, « Button » ×7 copies de 44 variantes, « Push » ×3 copies, « Shapes » ×2 copies de 25 variantes + ×1 de 4, « Logo Beetogreen full » ×3 copies, « Logo icons B » ×2 copies, « Logo Icons Circle B » ×1 copie, « Navigation Bar » ×2 copies + standalones 01/02/03/Type5 (couverts par `NavigationBar`), « Social » ×2 copies, « Footer » ×1 copie, « Cercle-03 » ×1 copie, « Tag » ×2 copies, « Graphic » ×1 copie (couvert par `IconGraphic`), « logo full », « logo », « Logo » et « logo-V4 » (anciennes versions couvertes par `LogoBeetogreenFull`/`LogoIconsB`/`LogoFull`), « Logo icons B/Icon/Green Ice » (variante unique couverte par `LogoIconsB`), « Line-Arrow-Right-1 Streamline Flex » et « Zoom-In Streamline Flex » (déjà construits sous ces noms).


**Imports Playground / Exploration** (frames de travail & scrapes html.to.design du site live — construits pour la couverture complète du kit, à ne pas utiliser dans les livrables) :
- `Component1`, `Component2`, `Component3`, `Component4`, `Component5`, `Component6`, `Component7`, `Component8`, `Component9`, `Component10`, `Component11`, `Component12`, `Component13`, `Component14`, `Component15`, `Component16` — helpers anonymes d'états hover issus des scrapes du site app.beetogreen.com
- `Custom`, `ScreenToUpdate`, `Frame1321316223`, `Frame1321316768`, `Frame1321316754` — frames de travail sans nom
- `Arrows` — set d'1 variante (doublon des flèches Streamline) ; `LogoV4` — ancienne version du logo
- `IconsGraphic` — alias du set « Icons / Graphic » (473 variantes, données dans `components/icons-graphic/icon-data.js`)

### Templates

- **Présentation BTG** (`templates/deck-btg/`) — deck 1920×1080 : cover, programme, chapitre, cartes offre, étapes, chiffre clé, clôture. D'après les gabarits « Slides presentation BTG » du Brandbook.
- **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.

Familles Figma volontairement non dupliquées : « logo full » (7 types) et « logo-V4 » = anciennes versions du logo déjà couvertes par `LogoBeetogreenFull`/`LogoIconsB` ; « Interface » apparaît en plusieurs copies identiques dans les fichiers.

## Livrable client

`Livrable Client — BeeToGreen.md` — synthèse marque + fondations + composants + templates à destination de la cliente.

## À venir (import Figma en cours)

Logos additionnels, templates slides / social / web (Brandbook, Digital website, Social Media).

Notes d'import détaillées : `_import/notes-brand-library.md`.