Design system

Les jetons, les composants et les règles qui font l’apparence de ce site. Cette page est produite depuis le code : ce qu’elle montre est ce que le site utilise.

Une charte neutre et sobre, faite pour une institution : une seule famille de caractères, une palette courte à fort contraste, des espacements sur une échelle fixe, un thème clair et un thème sombre, et des composants qui se pilotent au clavier et s’annoncent aux lecteurs d’écran.

Couleurs

Chaque couleur est un jeton nommé par son rôle, jamais par sa teinte. Les textes sur fond atteignent au moins 4,5:1 de contraste (RGAA 3.2) dans les deux thèmes ; la couleur de focus est distincte de l’accent pour rester visible sur un bouton accentué.

Thème clair

canvas#F6F5F2
surface#FFFFFF
surface-alt#ECEEF1
border#D3D8DE
ink#1A1F26
muted#525C66
accent#1F4E79
accent-text#FFFFFF
accent-soft#E1EAF3
accent-strong#163A5B
success#1F6B45
success-soft#DDF0E4
warning#7A4F00
warning-soft#FBECC8
danger#A52A21
danger-soft#F8DDDA
scrim#1A1F26B3
focus#B4520A

Thème sombre

canvas#0F1317
surface#171C22
surface-alt#1F262E
border#333D47
ink#EDF1F4
muted#A8B2BC
accent#8FBBE8
accent-text#0C1A28
accent-soft#1C2E42
accent-strong#B7D4F2
success#86CBA1
success-soft#173627
warning#EBBE6A
warning-soft#3D2F10
danger#F09A92
danger-soft#44201D
scrim#0F1317CC
focus#F0A75C

Accents des mini-sites

Un mini-site change quatre jetons d’accent et rien d’autre : la médiathèque est verte, le centre culturel prune, le reste de la charte est partagé.

vert#2F6B4F / #8CCBA6
prune#6B3A6B / #D1A3D1

Typographie

Inter, police variable libre (SIL OFL), auto-hébergée en un seul fichier de 48 Ko. Les tailles suivent une échelle de neuf pas ; l’interlignage se resserre avec la taille.

Un titre d’accueil en corps 48

Un titre de page en corps 38

Un intertitre en corps 30

Un sous-titre en corps 24

Un chapô en corps 18, qui introduit une page et se lit sans effort sur deux ou trois lignes.

Le texte courant en corps 16, avec un interlignage de 1,55 et des lignes de 70 caractères au plus.

Une légende ou une date en corps 14

Un surtitre en capitales

Typographie
Jeton	Valeur
type-xs	12px
type-sm	14px
type-base	16px
type-md	18px
type-lg	20px
type-xl	24px
type-2xl	30px
type-3xl	38px
type-display	48px
leading-tight	1.15
leading-snug	1.3
leading-normal	1.55
leading-relaxed	1.7

Espacements

Huit pas, de 2 à 96 pixels. Aucune marge n’est écrite en dur : une garde du dépôt refuse une valeur hors de l’échelle.

space-2xs2px
space-xs4px
space-sm8px
space-md16px
space-lg24px
space-xl40px
space-2xl64px
space-3xl96px

Rayons

radius-xs2px
radius-sm4px
radius-md8px
radius-lg12px
radius-xl20px
radius-pill999px

Élévations

shadow-elevation-sm
shadow-elevation-md
shadow-elevation-lg

Largeurs et hauteurs

layout-form28rem
layout-narrow38rem
layout-prose46rem
layout-content60rem
layout-page76rem
control-xs20px
control-sm32px
control-md44px
control-lg52px

Composants

Construits sur React Aria Components : rôles, états et navigation clavier viennent de la bibliothèque, l’habillage vient des jetons. Chaque composant est testé pour son comportement accessible.

Boutons

Étiquettes

NeutreAccentSuccèsAttentionErreur

Icônes

Champs

Votre courrielUne aide à la saisie, annoncée avec le champ.

Quartier

Champ inactif

Messages

Information

Le message explique ce qui s’est passé et ce qu’il faut faire.

Succès

Le message explique ce qui s’est passé et ce qu’il faut faire.

Attention

Le message explique ce qui s’est passé et ce qu’il faut faire.

Erreur

Le message explique ce qui s’est passé et ce qu’il faut faire.

Dialogue

Onglets

Identité

Documents

États

Focus : un contour de deux pixels, couleur de focus, décalé du composant, sur tout élément interactif.
Erreur : le champ est marqué invalide, le message est lié au champ et annoncé.
Vide : une liste sans résultat le dit en toutes lettres et propose une sortie.
Chargement : les pages sont rendues côté serveur, complètes ; il n’y a pas d’état de chargement à masquer.

Sources et licences

Inter (SIL Open Font License 1.1), React Aria Components (Apache 2.0), Tailwind CSS (MIT), icônes Lucide (ISC). Les jetons sont dans packages/ui/src/tokens.ts du dépôt.