Enquête publique sur le plan local d’urbanisme Du 26 octobre au 27 novembre, donnez votre avis sur le projet de PLU révisé. En savoir plus
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.
Un socle, huit chartes : chacune change les jetons — couleurs, familles de caractères, rayons, ombres, corps, ornements — et rien d’autre. Les pages, les composants et les contenus restent les mêmes ; les composants se pilotent au clavier et s’annoncent aux lecteurs d’écran dans toutes les chartes, en clair comme en sombre.
Chartes
Huit identités sur le même site, cinq chartes de démonstration et trois pistes. Chacune se choisit avec le bouton « Charte » de l’en-tête ou par l’adresse (?charte=verdane), s’applique par l’attribut data-palette de la page et existe en clair et en sombre. Une commune cliente apporte sa propre charte : celles-ci montrent ce que le socle sait porter.
Chartes de démonstration
Hôtel de ville
Institutionnelle et sobre : bleu marine, surfaces claires, Inter.
Accent12
Familles
Inter — OFL-1.1, fichier variable, jeu latin, 48,3 Ko
Contraste minimal du texte : 5,44:1 en clair, 6,43:1 en sombre (seuil 4,5:1)
Trois pistes reprennent des propositions graphiques remises par rhanb en 2026 à des acheteurs publics, transposées à la commune imaginaire : leurs palettes, leurs formes et des polices libres, sans logo, sans nom et sans photographie d’origine.
Chaque paire de jetons qu’un écran dessine, mesurée par la formule du WCAG à chaque exécution des tests (tools/contrast.test.ts) : 4,5:1 pour le texte, 7:1 dans la charte « Lisible pour tous », 3:1 pour les bords de champ, les boutons et le focus. Chaque case donne le ratio en clair, puis en sombre.
Contrastes mesurés
Paire
Seuil
Hôtel de ville
Bords de Verdane
Pierre et patrimoine
Ville active
Lisible pour tous
Trame et repères
Vert d’eau
Signal
ink / canvas
4,5:1
15,19 / 16,42
13,50 / 15,77
14,49 / 15,72
16,01 / 16,90
17,55 / 17,50
13,87 / 15,55
14,64 / 11,05
18,42 / 14,68
ink / surface
4,5:1
16,56 / 15,09
15,24 / 14,42
15,79 / 14,71
17,79 / 15,32
18,48 / 16,29
15,13 / 13,52
15,97 / 6,29
18,42 / 12,25
ink / surface-alt
4,5:1
14,25 / 13,45
11,98 / 12,64
12,90 / 13,27
14,36 / 13,40
16,31 / 14,57
12,69 / 11,79
13,47 / 8,45
16,57 / 10,39
muted / canvas
4,5:1
6,25 / 8,67
6,44 / 9,13
6,91 / 8,84
7,52 / 9,87
9,68 / 12,31
6,99 / 9,10
6,73 / 8,96
6,86 / 10,12
muted / surface
4,5:1
6,81 / 7,96
7,27 / 8,35
7,53 / 8,27
8,36 / 8,95
10,19 / 11,46
7,63 / 7,91
7,35 / 5,10
6,86 / 8,44
muted / surface-alt
4,5:1
5,86 / 7,10
5,72 / 7,32
6,15 / 7,46
6,75 / 7,83
8,99 / 10,25
6,40 / 6,90
6,20 / 6,85
6,17 / 7,16
accent / canvas
4,5:1
7,95 / 9,27
6,78 / 10,20
8,49 / 9,06
5,85 / 7,90
8,89 / 11,73
5,48 / 7,49
6,07 / 8,06
6,31 / 7,02
accent / surface
4,5:1
8,66 / 8,52
7,66 / 9,33
9,25 / 8,48
6,50 / 7,16
9,36 / 10,92
5,98 / 6,52
6,63 / 4,59
6,31 / 5,85
accent / surface-alt
4,5:1
7,45 / 7,59
6,02 / 8,18
7,56 / 7,65
5,25 / 6,26
8,26 / 9,77
5,01 / 5,68
5,59 / 6,16
5,68 / 4,96
accent / accent-soft
4,5:1
7,12 / 6,87
6,31 / 7,31
7,62 / 7,40
5,41 / 6,29
7,85 / 8,61
5,01 / 6,28
5,52 / 9,39
4,99 / 6,23
accent / warning-soft
4,5:1
7,40 / 6,48
6,42 / 7,52
7,75 / 6,59
5,49 / 5,63
7,92 / 8,70
5,07 / 5,76
5,85 / 9,23
5,62 / 6,14
accent / success-soft
4,5:1
7,28 / 6,55
6,51 / 7,47
7,96 / 6,60
5,50 / 5,73
7,94 / 8,68
5,04 / 5,70
5,71 / 8,80
5,37 / 6,21
accent / danger-soft
4,5:1
6,74 / 7,10
6,07 / 8,05
7,38 / 6,87
5,04 / 6,03
7,45 / 9,09
4,70 / 6,12
5,80 / 9,83
5,05 / 6,70
accent-text / accent
4,5:1
8,66 / 8,74
7,85 / 9,55
9,65 / 8,76
6,50 / 8,23
9,36 / 10,33
5,98 / 7,85
6,63 / 11,06
6,31 / 9,01
accent-text / accent-strong
4,5:1
11,73 / 11,48
10,87 / 12,23
12,86 / 12,36
9,33 / 11,20
12,13 / 12,78
8,73 / 10,83
9,57 / 12,72
9,41 / 12,73
accent-text / danger
4,5:1
7,11 / 8,16
7,00 / 8,17
7,33 / 8,73
6,69 / 9,40
9,30 / 9,08
7,19 / 9,04
6,57 / 11,84
8,21 / 9,97
accent-strong / accent-soft
4,5:1
9,64 / 9,03
8,74 / 9,37
10,15 / 10,45
7,76 / 8,56
10,17 / 10,65
7,32 / 8,67
7,96 / 10,80
7,44 / 8,80
accent-strong / surface
4,5:1
11,73 / 11,19
10,61 / 11,95
12,32 / 11,97
9,33 / 9,75
12,13 / 13,51
8,73 / 8,99
9,57 / 5,28
9,41 / 8,27
accent-strong / canvas
4,5:1
10,76 / 12,18
9,40 / 13,07
11,31 / 12,79
8,40 / 10,75
11,52 / 14,51
8,00 / 10,34
8,77 / 9,27
9,41 / 9,91
ink / accent-soft
4,5:1
13,62 / 12,17
12,55 / 11,30
13,00 / 12,83
14,79 / 13,45
15,50 / 12,84
12,69 / 13,04
13,29 / 12,87
14,56 / 13,04
muted / accent-soft
4,5:1
5,60 / 6,43
5,99 / 6,54
6,20 / 7,22
6,95 / 7,85
8,54 / 9,03
6,40 / 7,63
6,11 / 10,44
5,42 / 8,98
ink / success-soft
4,5:1
13,93 / 11,60
12,96 / 11,54
13,58 / 11,46
15,06 / 12,26
15,68 / 12,95
12,76 / 11,82
13,75 / 12,06
15,69 / 12,99
ink / warning-soft
4,5:1
14,14 / 11,47
12,76 / 11,62
13,24 / 11,43
15,02 / 12,05
15,64 / 12,97
12,85 / 11,96
14,10 / 12,65
16,39 / 12,85
ink / danger-soft
4,5:1
12,89 / 12,58
12,07 / 12,44
12,61 / 11,92
13,80 / 12,90
14,72 / 13,56
11,89 / 12,71
13,97 / 13,46
14,75 / 14,01
success / success-soft
4,5:1
5,44 / 6,95
5,54 / 7,54
5,74 / 7,68
5,50 / 7,47
7,81 / 8,71
5,50 / 7,19
5,53 / 9,56
5,56 / 7,45
warning / warning-soft
4,5:1
6,09 / 7,51
5,88 / 7,73
5,75 / 7,73
6,20 / 8,07
8,29 / 9,00
6,11 / 8,18
6,61 / 10,09
6,66 / 9,20
danger / danger-soft
4,5:1
5,54 / 6,63
5,41 / 6,89
5,61 / 6,85
5,19 / 6,89
7,41 / 7,99
5,65 / 7,05
5,75 / 10,51
6,57 / 7,41
success / surface
4,5:1
6,47 / 9,03
6,51 / 9,42
6,67 / 9,86
6,50 / 9,34
9,21 / 10,96
6,52 / 8,23
6,42 / 4,98
6,53 / 7,02
danger / surface
4,5:1
7,11 / 7,95
6,83 / 7,98
7,03 / 8,45
6,69 / 8,18
9,30 / 9,59
7,19 / 7,50
6,57 / 4,91
8,21 / 6,48
danger / canvas
4,5:1
6,52 / 8,65
6,05 / 8,73
6,45 / 9,03
6,02 / 9,02
8,84 / 10,30
6,59 / 8,63
6,02 / 8,63
8,21 / 7,76
canvas / ink
4,5:1
15,19 / 16,42
13,50 / 15,77
14,49 / 15,72
16,01 / 16,90
17,55 / 17,50
13,87 / 15,55
14,64 / 11,05
18,42 / 14,68
border-strong / canvas
3,0:1
3,72 / 4,39
3,66 / 4,39
3,80 / 3,98
11,75 / 5,74
5,52 / 5,14
3,92 / 4,23
4,61 / 6,14
3,78 / 4,91
border-strong / surface
3,0:1
4,06 / 4,03
4,13 / 4,02
4,14 / 3,72
13,05 / 5,20
5,82 / 4,79
4,27 / 3,68
5,03 / 3,50
3,78 / 4,10
border-strong / surface-alt
3,0:1
3,49 / 3,59
3,25 / 3,52
3,38 / 3,36
10,54 / 4,55
5,13 / 4,28
3,58 / 3,21
4,24 / 4,70
3,40 / 3,47
focus / canvas
3,0:1
4,64 / 9,23
5,48 / 9,48
4,79 / 9,36
16,01 / 16,90
5,71 / 10,17
9,07 / 8,64
14,64 / 11,64
6,69 / 7,35
focus / surface
3,0:1
5,06 / 8,47
6,19 / 8,67
5,22 / 8,76
17,79 / 15,32
6,01 / 9,47
9,89 / 7,51
15,97 / 6,63
6,69 / 6,13
focus / surface-alt
3,0:1
4,35 / 7,55
4,86 / 7,60
4,26 / 7,90
14,36 / 13,40
5,31 / 8,47
8,30 / 6,55
13,47 / 8,90
6,01 / 5,20
date de l’agenda (jetons choisis par chaque charte)
4,5:1
9,64 / 9,03
8,74 / 9,37
9,25 / 8,48
16,01 / 16,90
10,17 / 10,65
12,69 / 11,79
6,43 / 6,43
6,86 / 8,44
Couleurs
Chaque couleur est un jeton nommé par son rôle, jamais par sa teinte ; les nuanciers ci-dessous sont ceux de la charte affichée. Les textes atteignent au moins 4,5:1 de contraste (RGAA 3.2) dans toutes les chartes et les deux thèmes, 7:1 dans la charte « Lisible pour tous » ; la bordure des composants d’interface (champs, boutons à bordure) est un jeton à part, border-strong, à 3:1 au moins sur chaque fond (RGAA 3.3), border restant le filet décoratif ; la couleur de focus atteint 3:1 et reste distincte de l’accent pour se voir sur un bouton accentué.
canvas
surface
surface-alt
border
border-strong
ink
muted
accent
accent-text
accent-soft
accent-strong
success
success-soft
warning
warning-soft
danger
danger-soft
scrim
focus
motif
blason
blason-or
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. Chaque charte redéfinit ces deux accents pour qu’ils restent lisibles sur ses fonds.
vert
prune
Typographie
Chaque charte charge une ou deux familles libres (SIL Open Font License 1.1), auto-hébergées en fichiers variables, jeu latin seul ; le navigateur ne télécharge que celles de la charte affichée. Les tailles suivent une échelle de neuf pas propre à chaque charte ; l’interlignage se resserre avec la taille.
Un titre d’accueil, au plus grand corps
Un titre de page
Un intertitre
Un sous-titre
Un chapô, qui introduit une page et se lit sans effort sur deux ou trois lignes.
Le texte courant, sur des lignes de 70 caractères au plus.
Une légende ou une date
Un surtitre en capitales
Échelles par charte
Les rayons, les corps, les interlignages, les hauteurs de contrôle et les ombres varient par charte ; les composants les lisent par variables, si bien qu’un même bouton prend l’allure de chaque charte sans exception dans son code.
Échelles par charte
Jeton
Hôtel de ville
Bords de Verdane
Pierre et patrimoine
Ville active
Lisible pour tous
Trame et repères
Vert d’eau
Signal
type-xs
12px
13px
12px
13px
15px
12px
13px
14px
type-sm
14px
15px
14px
15px
16px
14px
15px
16px
type-base
16px
17px
17px
17px
19px
16px
17px
18px
type-md
18px
19px
19px
19px
21px
18px
19px
20px
type-lg
20px
21px
21px
21px
23px
20px
21px
23px
type-xl
24px
25px
25px
26px
27px
24px
24px
29px
type-2xl
30px
31px
33px
34px
32px
28px
30px
37px
type-3xl
38px
40px
44px
44px
40px
40px
38px
47px
type-display
48px
50px
58px
58px
48px
56px
52px
60px
leading-tight
1.15
1.15
1.1
1.05
1.2
1.1
1.1
1.2
leading-snug
1.3
1.3
1.25
1.2
1.35
1.3
1.25
1.38
leading-normal
1.55
1.6
1.6
1.55
1.65
1.5
1.6
1.618
leading-relaxed
1.7
1.75
1.75
1.65
1.8
1.65
1.7
1.75
radius-xs
2px
4px
0
0
2px
2px
4px
2px
radius-sm
4px
8px
1px
0
4px
2px
6px
3px
radius-md
8px
12px
2px
0
6px
4px
10px
4px
radius-lg
12px
20px
2px
0
10px
4px
16px
6px
radius-xl
20px
28px
3px
0
14px
6px
24px
8px
radius-pill
999px
999px
2px
0
999px
999px
999px
999px
control-sm
32px
34px
32px
40px
48px
36px
36px
40px
control-md
44px
46px
44px
52px
52px
44px
46px
46px
control-lg
52px
54px
52px
60px
60px
52px
54px
56px
Espacements
Huit pas, de 2 à 96 pixels, les mêmes dans toutes les chartes. 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-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-pill
Élévations
shadow-elevation-sm
shadow-elevation-md
shadow-elevation-lg
Largeurs et hauteurs
layout-form28rem
layout-narrow38rem
layout-prose46rem
layout-content60rem
layout-page76rem
Composants
Construits sur React Aria Components : rôles, états et navigation clavier viennent de la bibliothèque, l’habillage vient des jetons et suit la charte choisie dans l’en-tête. Chaque composant est testé pour son comportement accessible.
Boutons
Étiquettes
NeutreAccentSuccèsAttentionErreur
Icônes
Champs
Une aide à la saisie, annoncée avec le champ.
Quartier
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
Archives
Les flèches changent d’onglet ; le panneau reçoit le focus.
É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, Commissioner, Newsreader, Source Sans 3, Archivo, Atkinson Hyperlegible Next et Nunito (SIL Open Font License 1.1, fichiers de Fontsource), 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.