Aller au contenu
Design system

Fondations

Couleurs

Marine = couleur primaire (boutons principaux, sidebar, titres) ; menthe = accent (indicateur actif, focus, graphiques) ; menthe foncée pour les liens sur fond clair. En mode sombre, la menthe devient la couleur d’action avec du texte marine dessus. Les ratios ci-dessous sont calculés en direct dans votre navigateur à partir des valeurs calculées (getComputedStyle) : changez de thème pour les voir se recalculer.

Tokens sémantiques

Seuls rôles autorisés dans les composants. Chaque ligne indique la variable CSS, l’utilitaire Tailwind et le contraste mesuré avec son fond de référence (paire CI de tokens.json lorsqu’elle existe).

Fonds (8)

Application, surfaces, zones atténuées, sélection et voile des fenêtres.

  • bg-app--sy-bg-appbg-bg-appfg-default / bg-appCalcul…CI
  • bg-surface--sy-bg-surfacebg-bg-surfacefg-default / bg-surfaceCalcul…CI
  • bg-subtle--sy-bg-subtlebg-bg-subtlefg-default / bg-subtleCalcul…
  • bg-muted--sy-bg-mutedbg-bg-mutedfg-default / bg-mutedCalcul…CI
  • bg-emphasis--sy-bg-emphasisbg-bg-emphasisfg-default / bg-emphasisCalcul…
  • bg-inverse--sy-bg-inversebg-bg-inversefg-inverse / bg-inverseCalcul…CI
  • bg-selected--sy-bg-selectedbg-bg-selectedfg-default / bg-selectedCalcul…CI
  • bg-overlay--sy-bg-overlaybg-bg-overlayfg-default / bg-surfacenon mesuré (voile)

Texte (7)

Hiérarchie du texte, liens, texte désactivé et inversé.

  • fg-default--sy-fg-defaulttext-fg-defaultfg-default / bg-appCalcul…CI
  • fg-muted--sy-fg-mutedtext-fg-mutedfg-muted / bg-surfaceCalcul…CI
  • fg-subtle--sy-fg-subtletext-fg-subtlefg-subtle / bg-surfaceCalcul…CI
  • fg-disabled--sy-fg-disabledtext-fg-disabledfg-disabled / bg-surfaceexempté (désactivé)
  • fg-inverse--sy-fg-inversetext-fg-inversefg-inverse / bg-inverseCalcul…CI
  • fg-link--sy-fg-linktext-fg-linkfg-link / bg-surfaceCalcul…CI
  • fg-link-hover--sy-fg-link-hovertext-fg-link-hoverfg-link-hover / bg-surfaceCalcul…

Bordures (4)

Séparateurs, contours de champs (3:1) et focus.

  • border-default--sy-border-defaultborder-border-defaultborder-default / bg-surfaceCalcul…
  • border-strong--sy-border-strongborder-border-strongborder-strong / bg-surfaceCalcul…
  • border-input--sy-border-inputborder-border-inputborder-input / bg-surfaceCalcul…CI
  • border-focus--sy-border-focusborder-border-focusborder-focus / bg-surfaceCalcul…

Action et accent (10)

Marine en clair, menthe en sombre pour l’action principale ; menthe pour l’accent.

  • primary--sy-primarybg-primaryon-primary / primaryCalcul…CI
  • primary-hover--sy-primary-hoverbg-primary-hoveron-primary / primary-hoverCalcul…CI
  • primary-active--sy-primary-activebg-primary-activeon-primary / primary-activeCalcul…
  • on-primary--sy-on-primarytext-on-primaryon-primary / primaryCalcul…CI
  • primary-subtle--sy-primary-subtlebg-primary-subtleon-primary-subtle / primary-subtleCalcul…CI
  • on-primary-subtle--sy-on-primary-subtletext-on-primary-subtleon-primary-subtle / primary-subtleCalcul…CI
  • accent--sy-accentbg-accenton-accent / accentCalcul…CI
  • accent-strong--sy-accent-strongtext-accent-strongaccent-strong / bg-surfaceCalcul…CI
  • accent-subtle--sy-accent-subtlebg-accent-subtlefg-default / accent-subtleCalcul…
  • on-accent--sy-on-accenttext-on-accenton-accent / accentCalcul…CI

Statuts fonctionnels (24)

Succès, avertissement, erreur, information, neutre et spécial : texte, fond, bordure, aplat.

  • success-fg--sy-success-fgtext-success-fgsuccess-fg / success-bgCalcul…CI
  • success-bg--sy-success-bgbg-success-bgsuccess-fg / success-bgCalcul…CI
  • success-border--sy-success-borderborder-success-bordersuccess-border / bg-surfaceCalcul…
  • success-solid--sy-success-solidbg-success-solidsuccess-solid / bg-surfaceCalcul…CI
  • warning-fg--sy-warning-fgtext-warning-fgwarning-fg / warning-bgCalcul…CI
  • warning-bg--sy-warning-bgbg-warning-bgwarning-fg / warning-bgCalcul…CI
  • warning-border--sy-warning-borderborder-warning-borderwarning-border / bg-surfaceCalcul…
  • warning-solid--sy-warning-solidbg-warning-solidwarning-solid / bg-surfaceCalcul…CI
  • danger-fg--sy-danger-fgtext-danger-fgdanger-fg / danger-bgCalcul…CI
  • danger-bg--sy-danger-bgbg-danger-bgdanger-fg / danger-bgCalcul…CI
  • danger-border--sy-danger-borderborder-danger-borderdanger-border / bg-surfaceCalcul…
  • danger-solid--sy-danger-solidbg-danger-soliddanger-solid / bg-surfaceCalcul…CI
  • danger-solid-hover--sy-danger-solid-hoverbg-danger-solid-hoveron-danger / danger-solid-hoverCalcul…CI
  • on-danger--sy-on-dangertext-on-dangeron-danger / danger-solidCalcul…CI
  • info-fg--sy-info-fgtext-info-fginfo-fg / info-bgCalcul…CI
  • info-bg--sy-info-bgbg-info-bginfo-fg / info-bgCalcul…CI
  • info-border--sy-info-borderborder-info-borderinfo-border / bg-surfaceCalcul…
  • info-solid--sy-info-solidbg-info-solidinfo-solid / bg-surfaceCalcul…CI
  • neutral-fg--sy-neutral-fgtext-neutral-fgneutral-fg / neutral-bgCalcul…CI
  • neutral-bg--sy-neutral-bgbg-neutral-bgneutral-fg / neutral-bgCalcul…CI
  • neutral-border--sy-neutral-borderborder-neutral-borderneutral-border / bg-surfaceCalcul…
  • special-fg--sy-special-fgtext-special-fgspecial-fg / special-bgCalcul…CI
  • special-bg--sy-special-bgbg-special-bgspecial-fg / special-bgCalcul…CI
  • special-border--sy-special-borderborder-special-borderspecial-border / bg-surfaceCalcul…

Focus et graphiques (7)

Anneau de focus et palette catégorielle des séries (chart-1 → chart-6).

  • focus-ring--sy-focus-ringoutline-focus-ringfocus-ring / bg-surfaceCalcul…CI
  • chart-1--sy-chart-1fill-chart-1 / bg-chart-1chart-1 / bg-surfaceCalcul…CI
  • chart-2--sy-chart-2fill-chart-2 / bg-chart-2chart-2 / bg-surfaceCalcul…CI
  • chart-3--sy-chart-3fill-chart-3 / bg-chart-3chart-3 / bg-surfaceCalcul…CI
  • chart-4--sy-chart-4fill-chart-4 / bg-chart-4chart-4 / bg-surfaceCalcul…CI
  • chart-5--sy-chart-5fill-chart-5 / bg-chart-5chart-5 / bg-surfaceCalcul…CI
  • chart-6--sy-chart-6fill-chart-6 / bg-chart-6chart-6 / bg-surfaceCalcul…CI

Couleurs fonctionnelles

Le vert de statut est volontairement distinct de la menthe de marque, pour éviter toute confusion marque / statut. La couleur n’est jamais le seul indice : un libellé accompagne toujours la pastille.
  • SuccèsLivré · Payé · Libéré

    Statuts positifs : validé, livré, payé, lot libéré.

    success-fg / success-bg
    Calcul…
    success-solid / bg-surface
    Calcul…
  • AvertissementÀ valider · En quarantaine

    À traiter : à valider, partiellement livré, quarantaine.

    warning-fg / warning-bg
    Calcul…
    warning-solid / bg-surface
    Calcul…
  • ErreurRefusé · Bloqué · En retard

    Refusé, bloqué, en retard, erreurs de saisie.

    danger-fg / danger-bg
    Calcul…
    danger-solid / bg-surface
    Calcul…
  • InformationConfirmé · En cours · Planifié

    En cours, confirmé, planifié.

    info-fg / info-bg
    Calcul…
    info-solid / bg-surface
    Calcul…
  • NeutreBrouillon · Annulé · Clôturé

    Brouillon, annulé, clôturé, archivé.

    neutral-fg / neutral-bg
    Calcul…
  • SpécialFacturé · Extourné

    Facturé, extourné : états comptables distincts.

    special-fg / special-bg
    Calcul…

Primitives

Palette brute de la charte (valeurs fixes, identiques dans les deux thèmes). Jamais utilisée directement dans un composant : passer par un rôle sémantique.

navy

  • 50#EEF2F8
  • 100#D9E1EE
  • 200#B3C2DB
  • 300#8399BE
  • 400#56709E
  • 500#3A5482
  • 600#263F68
  • 700#1B3358
  • 800#132A4B
  • 900#0B1F3A
  • 950#061428

mint

  • 50#E8F8F3
  • 100#C7EFE3
  • 200#95E2CC
  • 300#5DD3B3
  • 400#33C9A5
  • 500#19C39C
  • 600#12A383
  • 700#0E7C63
  • 800#0B624F
  • 900#094F40

neutral

  • 0#FFFFFF
  • 25#FAFBFD
  • 50#F5F7FA
  • 100#EDF0F5
  • 200#E0E5EC
  • 300#C9D1DC
  • 400#98A3B4
  • 450#858FA1
  • 500#677488
  • 600#4C586B
  • 700#374254
  • 800#232D3B
  • 850#1A2330
  • 900#141B26
  • 950#0C121B

green

  • 50#ECFDF3
  • 100#D1FADF
  • 300#6CE9A6
  • 500#22A05A
  • 600#15803D
  • 700#116A33
  • 900#0B3D1F

amber

  • 50#FFF8EB
  • 100#FDECC8
  • 300#FCC870
  • 500#D97706
  • 600#B45309
  • 700#92400E
  • 900#4A2306

red

  • 50#FEF2F2
  • 100#FDE0E0
  • 300#FCA5A5
  • 500#DC2626
  • 600#B91C1C
  • 700#991B1B
  • 900#4C0D0D

blue

  • 50#EFF5FF
  • 100#DBE7FE
  • 300#93B4FD
  • 500#2563EB
  • 600#1D4ED8
  • 700#1E40AF
  • 900#11214F

violet

  • 50#F5F3FF
  • 100#EDE9FE
  • 300#C4B5FD
  • 600#6D28D9
  • 700#5B21B6
  • 900#2E1065