Fondations

Fondations

Les fondations définissent les règles visuelles, structurelles et techniques qui assurent la cohérence du Design System.

Typographies

Titres, paragraphes, liens, listes et états de texte.

.app-heading-1

Accueil applicatif

Couleur : var(--app-color-text)

.app-heading-2

Sections actifs

Couleur : var(--app-color-text)

.app-heading-3

Synthèse projet

Couleur : var(--app-color-text)

.app-heading-4

Dernières activités

Couleur : var(--app-color-text)

.app-text

Texte courant principal, lisible et non atténué.

Couleur : var(--app-color-text)

.app-field-label

Couleur : var(--app-color-text)

.app-meta-labelCréé le 04/05/2026

Couleur : var(--app-color-muted)

.app-icon-labelDétails

Couleur : var(--app-color-primary)

.app-paragraph

Texte courant utilisé pour les descriptions longues, les explications et les messages d’aide.

Couleur : var(--app-color-text)

.app-paragraph.is-large

Texte introductif plus large pour les zones importantes.

Couleur : var(--app-color-muted)

.app-text-small

Texte secondaire, métadonnées ou sous-titres.

Couleur : var(--app-color-muted)

.app-caption

Libellé court

Couleur : var(--app-color-muted)

.app-link

Couleurs : primary, accent, error, muted

.app-list
  • Créer un projet
  • Ajouter un indicateur
  • Suivre la progression

Couleur : var(--app-color-text) · marqueur : var(--app-color-primary)

.app-list
  1. Type
  2. Contacts
  3. Validation

Couleur : var(--app-color-text) · marqueur : var(--app-color-primary)

.app-strong / .app-code-text

Texte fort et code court.

Couleurs : var(--app-color-text) et surface var(--app-color-surface-soft)