Guide interne

Charte graphique

Cette page liste les tokens visuels du projet et montre leur usage direct avec les variables CSS du theme. Chaque valeur vient du fichier src/styles/global.css via var(...).

Retour accueil

Palette

Couleurs actives utilisees dans le layout global.

Page

--color-page

Valeur calculee...

Fond global de la page

Section soft

--color-section-soft

Valeur calculee...

Fond léger pour blocs secondaires

Section mid

--color-section-mid

Valeur calculee...

Fond moyen pour sections alternées

Section strong

--color-section-strong

Valeur calculee...

Fond accentué pour cartes importantes

Text

--color-text

Valeur calculee...

Couleur principale de texte

Muted

--color-muted

Valeur calculee...

Titres secondaires et méta informations

Accent

--color-accent

Valeur calculee...

Boutons, liens actifs, call-to-action

Accent hover

--color-accent-hover

Valeur calculee...

État survol des actions

Typographies

Tokens partages pour tous les titres et le corps de texte.

Heading

Titre en heading

--font-heading

Police calculee...

Body

Paragraphe body

--font-body

Police calculee...

Elements UI

Mini-reference de composants reutilisables.

Bouton principal

Champ input

Carte standard

Titre carte

Fond, rayon et bordure suivent le systeme actuel.

Regles d'usage

A faire

• Utiliser exclusivement les variables globales pour les couleurs et les typographies
• Conserver un contraste lisible entre texte et fonds
• Limiter les nouveaux composants aux formes arrondies et au style actuel

A eviter

• Ajouter des couleurs arbitraires hors gamme (notamment des teintes froides)
• Créer de nouvelles polices sans passer par les variables de police
• Ajouter des composants qui imposent des tailles de texte incohérentes

Notes de maintenance

Quand une variable du theme change, cette page s'actualise sans modification du code. Ajouter un token ici seulement quand il est global au site.