Design Tokens

Les Design Tokens sont les paramètres centraux qui déterminent l'apparence de l'ensemble de votre site web. Ils comprennent : • Couleurs – Primaire, secondaire, accent, arrière-plan, texte • Polices – Police des titres et police du corps • Espacement – Distances entre les sections • Rayon de bordure – L'arrondi des boutons et des cartes • Ombres – Style d'ombre par défaut pour les cartes et éléments Lorsque vous modifiez un design token, l'ensemble du site se met à jour automatiquement. Vous n'avez pas besoin d'ajuster chaque bloc individuellement.

Allez dans Design → Couleurs. Vous verrez les champs de couleur suivants : • Primaire – La couleur principale de votre marque (boutons, liens, accents) • Secondaire – Une deuxième couleur d'accent • Accent – Couleur de surbrillance supplémentaire • Arrière-plan – La couleur d'arrière-plan de la page • Surface – Couleur d'arrière-plan des cartes et sections • Texte – Couleur de texte par défaut • Texte atténué – Couleur pour les sous-textes et les espaces réservés Cliquez sur un champ de couleur pour ouvrir le sélecteur. Vous pouvez entrer un code HEX ou sélectionner une couleur visuellement.

Activez le Dark Mode via le bouton en bas du panneau Couleurs. Vous pouvez définir des couleurs séparées pour le mode sombre : • Primaire (sombre) – Souvent une variante plus claire de votre couleur primaire • Arrière-plan (sombre) – Fond sombre (ex. #1a1a2e) • Texte (sombre) – Couleur de texte claire pour la lisibilité Lorsque le dark mode est activé, les visiteurs voient un bouton soleil/lune sur votre site. Leur préférence est mémorisée.

Allez dans Design → Polices. Vous pouvez définir deux polices : • Police des titres – Utilisée pour tous les titres (H1 à H6) • Police du corps – Utilisée pour les paragraphes et autres textes Choisissez parmi des centaines de Google Fonts. Tapez le nom de la police pour chercher. La police est automatiquement chargée sur votre site.

Allez dans Design → Espacement. Ici vous définissez les distances par défaut : • Espacement des sections – Espace vertical entre les sections (ex. 64px, 80px, 96px) • Padding du contenu – Espace intérieur dans les sections Ces valeurs s'appliquent par défaut à toutes les sections. Vous pouvez encore remplacer par bloc via l'inspecteur.

Allez dans Design → Rayon de bordure. Cela détermine l'arrondi des éléments : • Aucun (0px) – Coins pointus, look corporate • Petit (4-8px) – Subtilement arrondi • Moyen (12-16px) – Moderne et convivial • Grand (24px+) – Fortement arrondi, ludique Le rayon de bordure s'applique aux boutons, cartes, champs de saisie et images.

Allez dans Design → Ombres. Les ombres ajoutent de la profondeur aux cartes et éléments. Choisissez un preset : • Aucune – Design plat, pas d'ombre • Subtile – Ombre légère, moderne • Moyenne – Ombre claire, les cartes se soulèvent • Forte – Ombre prononcée, beaucoup de profondeur Le paramètre d'ombre s'applique à tous les éléments de type carte sur votre site.

Cliquez sur 'Enregistrer' pour sauvegarder vos design tokens. Les modifications sont immédiatement visibles sur votre site en production. • Tout réinitialiser – Remet tous les tokens aux valeurs par défaut • Verrouiller – Verrouillez des couleurs individuelles pour qu'elles ne soient pas écrasées lors de la génération IA ou de l'import de template Note : Les design tokens sont enregistrés par site. Chaque site a son propre ensemble de tokens.