Public inquiry into the local development plan From 26 October to 27 November, have your say on the revised local plan. Read the notice
Design system
The tokens, components and rules that make this site look the way it does. This page is produced from the code: what it shows is what the site uses.
One base, eight charters: each changes the tokens — colours, typefaces, radii, shadows, sizes, ornaments — and nothing else. Pages, components and content stay the same; the components work with the keyboard and announce themselves to screen readers in every charter, light and dark.
Charters
Eight identities on the same site, five demonstration charters and three proposals. Each is chosen with the “Style” button in the header or through the address (?charte=verdane), applies through the page's data-palette attribute and comes in light and dark. A client town brings its own charter: these show what the base can carry.
Demonstration styles
Town hall
Institutional and plain: navy blue, light surfaces, Inter.
Accent12
Typefaces
Inter — OFL-1.1, variable file, Latin set, 48.3 KB
Lowest text contrast: 5.44:1 in light, 6.43:1 in dark (threshold 4.5:1)
Three of them take up design proposals rhanb submitted to public buyers in 2026, carried over to the imaginary town: their palettes, their shapes and free typefaces, without the original logo, name or photographs.
Grid and markers
Light gridded background, orange kept for actions, near-black ink, Inter.
Accent12
Typefaces
Inter — OFL-1.1, variable file, Latin set, 48.3 KB
Lowest text contrast: 4.70:1 in light, 5.68:1 in dark (threshold 4.5:1)
Every pair of tokens a screen draws, measured with the WCAG formula on every test run (tools/contrast.test.ts): 4.5:1 for text, 7:1 in the “Readable for all” charter, 3:1 for field borders, buttons and focus. Each cell gives the ratio in light, then in dark.
Measured contrast
Pair
Threshold
Town hall
Verdane riverside
Stone and heritage
Active town
Readable for all
Grid and markers
Deep teal
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
agenda date (tokens chosen by each style)
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
Colours
Each colour is a token named for its role, never its hue; the swatches below are those of the charter on display. Text reaches at least 4.5:1 contrast (RGAA 3.2) in every charter and both themes, 7:1 in the “Readable for all” charter; the boundary of interface components (fields, bordered buttons) is a token of its own, border-strong, at 3:1 or better on every background (RGAA 3.3), border staying the decorative rule; the focus colour reaches 3:1 and stays distinct from the accent so it shows on an accented button.
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
Mini-site accents
A mini-site changes four accent tokens and nothing else: the library is green, the cultural centre plum. Each charter redefines these two accents so they stay readable on its backgrounds.
vert
prune
Typography
Each charter loads one or two free typefaces (SIL Open Font License 1.1), self-hosted as variable files, Latin set only; the browser downloads only those of the charter on display. Sizes follow a nine-step scale of each charter's own; line height tightens as size grows.
A home page title, at the largest size
A page title
A heading
A subheading
A lead paragraph, introducing a page and reading easily over two or three lines.
Body text, on lines of 70 characters at most.
A caption or a date
An overline in capitals
Scales per charter
Radii, sizes, line heights, control heights and shadows vary per charter; the components read them through variables, so the same button takes on each charter's look with no exception in its code.
Scales per charter
Token
Town hall
Verdane riverside
Stone and heritage
Active town
Readable for all
Grid and markers
Deep teal
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
Spacing
Eight steps, from 2 to 96 pixels, the same in every charter. No margin is hard-coded: a repository guard refuses a value off the scale.
space-2xs2px
space-xs4px
space-sm8px
space-md16px
space-lg24px
space-xl40px
space-2xl64px
space-3xl96px
Radii
radius-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-pill
Elevations
shadow-elevation-sm
shadow-elevation-md
shadow-elevation-lg
Widths and heights
layout-form28rem
layout-narrow38rem
layout-prose46rem
layout-content60rem
layout-page76rem
Components
Built on React Aria Components: roles, states and keyboard navigation come from the library, the styling from the tokens, following the charter chosen in the header. Each component is tested for its accessible behaviour.
Buttons
Tags
NeutralAccentSuccessWarningError
Icons
Fields
A hint, announced with the field.
District
Messages
Information
The message says what happened and what to do.
Success
The message says what happened and what to do.
Warning
The message says what happened and what to do.
Error
The message says what happened and what to do.
Dialog
Tabs
Identity
Documents
Archive
Arrow keys change tab; the panel receives focus.
States
Focus: a two-pixel outline in the focus colour, offset from the component, on every interactive element.
Error: the field is marked invalid, the message is tied to the field and announced.
Empty: a list with no result says so in words and offers a way out.
Loading: pages are server-rendered and complete; there is no loading state to hide.
Sources and licences
Inter, Commissioner, Newsreader, Source Sans 3, Archivo, Atkinson Hyperlegible Next and Nunito (SIL Open Font License 1.1, files from Fontsource), React Aria Components (Apache 2.0), Tailwind CSS (MIT), Lucide icons (ISC). The tokens are in packages/ui/src/tokens.ts in the repository.