🎨 Système de Design Tokens¶

Le système de Design Tokens d'Instatic centralise les décisions de design sous forme de variables CSS typées, garantissant une cohérence visuelle absolue sur l'ensemble du site.

🌈 Catégories de Tokens¶

Design Tokens
  ├── Couleurs
  │     ├── Primaires (ex: --color-primary: #1B3B2B)
  │     ├── Neutres (ex: --color-bg: #F7F5EE, --color-surface: #FFFFFF)
  │     └── Accents (ex: --color-accent: #386641)
  ├── Typographie
  │     ├── Polices de caractères (ex: --font-heading: 'Overused Grotesk')
  │     ├── Échelles de taille (ex: --text-xs à --text-5xl)
  │     └── Épaisseurs et hauteurs de ligne
  ├── Espacements & Grille
  │     ├── Spacing fluid (ex: --space-2, --space-4, --space-8)
  │     └── Rayons de courbure (ex: --radius-sm, --radius-md)
  └── Ombres Directionnelles & Bordures

📱 Surcharge par Breakpoint¶

Chaque token peut être surchargé de manière responsive sans écrire de media queries verbeuses : - Les valeurs desktop s'appliquent par héritage naturel vers le mobile. - Une modification appliquée en mode tablette ou mobile crée un override scopé dans viewportOverrides. - Lors de la publication, le moteur d'Instatic compile des feuilles de style CSS ultra-légères et minifiées sans règles mortes.