Design Tokens

Statut

Base de travail issue d’un scan visuel du site public et du logo. Les valeurs ci-dessous sont à confirmer avec les fichiers sources design / front.

1. Couleurs de marque

Brand

• color.brand.primary : #001C69 à confirmer
  Usage observé : titres, éléments de structure, accents UI.
• color.brand.accent : #FF8C00 / #FF8119 à confirmer
  Usage observé : CTA, pastilles d’action, mises en avant.
• color.brand.support : #61A94C à confirmer
  Usage observé : accents food / green, footer, tags et rappel du logo.

Logo

• color.logo.orange : #FD8616 approximatif
• color.logo.green : #68C951 approximatif
• color.logo.black : #000000

Neutres

• color.text.primary : #212529
• color.text.secondary : #666666
• color.text.muted : #6C757D
• color.surface.default : #FFFFFF
• color.surface.alt : #F8F9FA
• color.bg.page : #F5F5F5
• color.border.default : #DEE2E6

2. Typographie

Familles observées

• font.family.brand_ui : Montserrat, sans-serif
• font.family.fallback : Arial, Helvetica, sans-serif
• présence de Times New Roman observée sur certaines zones non harmonisées

Recommandation de structure

• font.heading : Montserrat
• font.body : Montserrat ou sans-serif système cohérente
• font.display : à confirmer selon le logotype et les supports de marque

Style perçu

• titres gras
• interface simple et lisible
• logique plus commerciale que premium luxe

3. Radius

Valeurs recommandées

• radius.xs : 4px
• radius.sm : 8px
• radius.md : 12px
• radius.lg : 16px
• radius.pill : 999px

Usage observé

• boutons fortement arrondis
• cartes produits à arrondi faible à moyen
• pastilles d’action circulaires

4. Ombres

Recommandation initiale

• shadow.sm : ombre légère de séparation
• shadow.md : ombre douce pour cartes secondaires
• éviter les ombres lourdes

5. Espacements

Base recommandée

• space.1 : 4px
• space.2 : 8px
• space.3 : 12px
• space.4 : 16px
• space.5 : 24px
• space.6 : 32px
• space.7 : 48px
• space.8 : 64px

6. Composants clés observés

• hero image + carte de contenu
• CTA orange en pill
• cards avantages colorées
• tabs catégories
• cartes produits avec prix + tags + action
• slider éditorial
• footer multi-colonnes

7. Points d’harmonisation recommandés

• clarifier la hiérarchie exacte bleu / orange / vert
• réduire les écarts typographiques non voulus
• uniformiser les cartes et boutons
• définir officiellement les couleurs de statut et de tags alimentaires

8. Prochaine étape utile

Transformer cette page en source de vérité design dès que les valeurs exactes front ou Figma sont disponibles.