# Notes d'import — Brand Library (10 juillet 2026)
Source de vérité confirmée par la cliente. Extrait des frames inlinées.

## Foundations (frame /Foundations/Foundations, node 78:2)
- Fond page: rgb(245,240,230) (#F5F0E6), padding 120, gap 80, cards radius 24/16
- **Vision**: « Faire du vélo le réflexe du quotidien - pour toutes et tous, en entreprise. » (Instrument Sans Bold 64/1.1, -2%, lime #E6FF55 sur dark green #0C1E18)
- Vision keywords (pills green-ice #D4F5E0, texte vert): mobilité, douce, bouger, responsable, engagement, déplacement, exigence
- **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. » (+ note "[Édite ce paragraphe avec ta version définitive]")
- **Brand Principles (4 piliers)** — cards vertes #008558(?) titre lime:
  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.
- **Tone of Voice**: « On écrit comme on parle à un collègue qu'on apprécie : direct, chaleureux, sans formules creuses. »
  - DO (card mint #D4F5E0): 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 (card rose): Corporate, vague, jargonneux — « Solution holistique d'écomobilité B2B. » / « Disrupter le paradigme de la mobilité. » / « Une expérience utilisateur incomparable. » / « Synergiser nos verticales mobilité. »
- Labels de section: numéro 12px +8% gris #A0A0A0 + titre Instrument Sans Bold 32 -2% #0C1E18
- Eyebrow: Instrument Sans Medium 11-12px, +12% tracking, uppercase

## Color System (frame /Color/Color-System, node 6:2) — 42 tokens
Intitulé: "42 tokens couleur organisés en trois catégories : Brand (5), Expressive (8 familles × 3 tons), Greyscale (11) et Base (2). Tous reliés à des variables Figma compatibles Tokens Studio."

### Brand Greens (5)
- brand/lime — #E6FF55 (1er slot, nom "Lime")
- brand/dark-green — #0C1E18
- brand/green-grass — #005236
- brand/green-light — #008558
- brand/green-ice — #D4F5E0

### Expressive (8 familles × 3 tons: light / dark / bg)
- coquelicot: light #FFC4CE(1er slot ~), dark #86071C, bg #FFEBEE  (valeurs du 1er item par défaut des props: Coquelicot light=#FFC4CE dark=#86071C bg=#FFEBEE)
- amethyste: light #D3BFF3, dark #4B1A9A, bg #F3EEFC
- mango: light #F7C9BA, dark #E54C1E, bg #FDF1ED
- cacao: light #FCEE98, dark #372411, bg #FEFCEB
- marine: light #8CCAF7, dark #033968, bg #ECF6FE
- pivoine: light #FFD0E0, dark #B01E5C, bg #FFF0F5
- cobalt: light #C2CCFF, dark #3457FF, bg #EFF1FF
- ardoise: light #C8D1DA, dark #2C3E50, bg #F0F3F6

### Greyscale Zinc (11)
greyscale/50 #FAFAFA (1er slot), 100 #F4F4F5, 200 #E4E4E7, 300 #D4D4D8, 400 #A1A1AA, 500 #71717A, 600 #52525B, 700 #3F3F46, 800 #27272A, 900 #18181B, 950 #09090B

### Base (2)
- base/white #FFFFFF, base/black #000000

### Combinations: 25 pairings approuvés (section "Combinations" — à lire si besoin)

## Typography System (frame /Typography/Typography-System, node 17:42) — 18 styles
"Système basé sur Parkinsans (display) et Instrument Sans (body). 18 styles organisés en 7 groupes sémantiques."
Fonts: Parkinsans (Headlines, titres, display) + Instrument Sans (Content, labels, UI, code)

| style | fonte | spec |
|---|---|---|
| display/l (1er slot) | Parkinsans ExtraBold(?) | 100px(?) · 100% · -3% (1er item défaut: "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% · 0% |
| body/m | Instrument Sans Regular | 16px · 150% · 0% |
| body/s | Instrument Sans Regular | 14px · 150% · 0% |
| label/m | Instrument Sans Medium | 14px · 140% · 0% |
| label/s | Instrument Sans Medium | 12px · 140% · 0% |
| 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% · 0% |
| code/m | Instrument Sans Regular (mono?) | 14px · 150% · 0% |
| code/s | Instrument Sans Regular (mono?) | 12px · 150% · 0% |

## Brandbook (fichier séparé, 59 slides 1920×1080, radius 20)
- slide-01: cover dark-green #0C1E18, Shape Figure=05 lime en rotation, "Brand Guidelines V1.0" Instrument Sans Medium 64/67 -2.5% #F5F0E6, logo full bas
- Meta corners: Schibsted Grotesk Medium 14 -4% #008558 — top-left "Quick Guide", bottom-left "NN Beetogreen Brand Identity Guidelines", top-right "Version 1.0" (Instrument Sans)
- slide-02: sommaire beige #F5F0E6 + photo gauche; chapitres: 02 Logo System, 03 Color System, 04 Typography, 05 Layout & Grids, 06 Visual Content
- slide-03: bg green-grass #005236, texte 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. »

## Fichiers Figma fournis (10 juillet 2026)
1. Brand Library — SOURCE DE VÉRITÉ (Foundations, Color, Typography, Logo, Iconography, Shapes, Grid-Spacing, Effects, Components)
2. Brandbook — 59 slides + Motion + Slides-presentation + Post-social-media (175 frames)
3. Digital website — Grid, DEV-Module-comparaison, Art-direction-UI (pages D-finale), Marketplace-HP, Wireframes (90 frames)
4. Social Media — posts/stories/reveal branding (fichier complet)

## Composants à matérialiser (Brand Library / METADATA du fichier Social qui référence les mêmes)
- Button — 44 variants (Shape rect/circle × Type Primary/Secondary/Tertiary × Size × Icon × State)
- Logo Beetogreen full — 14 variants (Style: 2, Color: 8)
- Logo icons B — 7 couleurs; Logo Icons Circle B — 37 FG×BG
- Shapes — 25 variants (Figure 01-05 × Color 5) — formes organiques "curl"
- Push — 9 variants; Cercle-03 — 10 variants
- Interface — 1627 variants = SET D'ICÔNES (Streamline Flex) → icon-data
- Arrows Streamline Flex (Line-Arrow-Left/Right, Zoom-In)

## Statut mounts
Un seul .fig lisible à la fois (le dernier attaché = Social Media). Demander à la cliente/user de ré-attacher le fichier voulu pour chaque phase.