Palettes
Six palettes share one set of colour roles, so a page or a single section can change palette without changing any markup.
The default is Two-colour print. A palette is applied with a
data-palette attribute, and everything inside that element picks it up.
<Section palette="kingfisher">…</Section>
<div data-palette="night-hike">…</div>Roles
| Role | CSS property | Utility | Used for |
|---|---|---|---|
| bg |
--bg
|
bg-bg
|
Page or section background. |
| surface |
--surface
|
bg-surface
|
Panels that sit on the background. |
| ink |
--ink
|
text-ink
|
Headings and body text. |
| muted |
--muted
|
text-muted
|
Secondary text such as dates. Also the border of form fields. |
| line |
--line
|
border-line
|
Hairlines and dividers that carry no meaning on their own. |
| link |
--link
|
text-link
|
Links and focus outlines. |
| fill |
--fill
|
bg-fill
|
Solid button background. |
| fillInk |
--fill-ink
|
text-fill-ink
|
Text on a solid button. |
| mark |
--mark
|
bg-mark
|
Rules and graphics. Never used for text. |
Two-colour print
The default palette. A two-ink print job in blue and fluorescent pink on plain white stock.
data-palette="two-colour-print"
-
bg
#ffffff -
surface
#f1f3fb -
ink
#131a3a -
muted
#515a80 -
line
#d5daec -
link
#2747d8 -
fill
#2747d8 -
mark
#f5347b
Alex Hollyman
Technical lead and software engineer
Designing, building and maintaining web systems since 2008, mostly in Laravel.
June 2024 to present
Technical Lead (Web)
Immersive technology studio
Building the systems that manage VR and AR experiences and their data.
- PHP
- Laravel
- TypeScript
- Vue
- AWS
- MySQL
Contrast, measured to WCAG 2.2. Text needs 4.5:1 and graphics need 3:1.
| Pair | Colours | Ratio | Minimum | Result |
|---|---|---|---|---|
| Text on background | ink on bg | 17.0:1 | 4.5:1 | Pass |
| Secondary text on background | muted on bg | 6.7:1 | 4.5:1 | Pass |
| Link on background | link on bg | 7.0:1 | 4.5:1 | Pass |
| Text on panel | ink on surface | 15.3:1 | 4.5:1 | Pass |
| Secondary text on panel | muted on surface | 6.1:1 | 4.5:1 | Pass |
| Link on panel | link on surface | 6.4:1 | 4.5:1 | Pass |
| Button text on button | fillInk on fill | 7.0:1 | 4.5:1 | Pass |
| Rule on background | mark on bg | 3.7:1 | 3:1 | Pass |
| Rule on panel | mark on surface | 3.3:1 | 3:1 | Pass |
Explorer sheet
An OS Explorer map with the paper taken away: the green wash of woodland as the page, cover orange for buttons, water blue for anything you can follow.
data-palette="explorer"
-
bg
#cfe6bd -
surface
#e3f1d6 -
ink
#14301f -
muted
#3a5640 -
line
#a3c48e -
link
#0a4c7d -
fill
#f07d00 -
mark
#c2410c
Alex Hollyman
Technical lead and software engineer
Designing, building and maintaining web systems since 2008, mostly in Laravel.
June 2024 to present
Technical Lead (Web)
Immersive technology studio
Building the systems that manage VR and AR experiences and their data.
- PHP
- Laravel
- TypeScript
- Vue
- AWS
- MySQL
Contrast, measured to WCAG 2.2. Text needs 4.5:1 and graphics need 3:1.
| Pair | Colours | Ratio | Minimum | Result |
|---|---|---|---|---|
| Text on background | ink on bg | 10.7:1 | 4.5:1 | Pass |
| Secondary text on background | muted on bg | 6.1:1 | 4.5:1 | Pass |
| Link on background | link on bg | 6.7:1 | 4.5:1 | Pass |
| Text on panel | ink on surface | 12.1:1 | 4.5:1 | Pass |
| Secondary text on panel | muted on surface | 6.9:1 | 4.5:1 | Pass |
| Link on panel | link on surface | 7.6:1 | 4.5:1 | Pass |
| Button text on button | fillInk on fill | 5.2:1 | 4.5:1 | Pass |
| Rule on background | mark on bg | 3.9:1 | 3:1 | Pass |
| Rule on panel | mark on surface | 4.4:1 | 3:1 | Pass |
Kingfisher
The fish in albofish, by way of the RSPB: deep river teal, the electric blue of the back and the orange of the breast.
data-palette="kingfisher"
-
bg
#0c3440 -
surface
#124453 -
ink
#eaf6f7 -
muted
#a9cad0 -
line
#2a5b69 -
link
#74d6ee -
fill
#f58a3c -
mark
#f58a3c
Alex Hollyman
Technical lead and software engineer
Designing, building and maintaining web systems since 2008, mostly in Laravel.
June 2024 to present
Technical Lead (Web)
Immersive technology studio
Building the systems that manage VR and AR experiences and their data.
- PHP
- Laravel
- TypeScript
- Vue
- AWS
- MySQL
Contrast, measured to WCAG 2.2. Text needs 4.5:1 and graphics need 3:1.
| Pair | Colours | Ratio | Minimum | Result |
|---|---|---|---|---|
| Text on background | ink on bg | 12.0:1 | 4.5:1 | Pass |
| Secondary text on background | muted on bg | 7.6:1 | 4.5:1 | Pass |
| Link on background | link on bg | 8.0:1 | 4.5:1 | Pass |
| Text on panel | ink on surface | 9.6:1 | 4.5:1 | Pass |
| Secondary text on panel | muted on surface | 6.1:1 | 4.5:1 | Pass |
| Link on panel | link on surface | 6.4:1 | 4.5:1 | Pass |
| Button text on button | fillInk on fill | 6.2:1 | 4.5:1 | Pass |
| Rule on background | mark on bg | 5.4:1 | 3:1 | Pass |
| Rule on panel | mark on surface | 4.3:1 | 3:1 | Pass |
Camp blanket
A camp blanket in red wool: the page is the blanket, the text is stitched in white and the badges are mustard.
data-palette="camp-blanket"
-
bg
#9c1b26 -
surface
#83131d -
ink
#fff8f2 -
muted
#f6cdc8 -
line
#bf4a53 -
link
#ffcf5c -
fill
#f4b83a -
mark
#f4b83a
Alex Hollyman
Technical lead and software engineer
Designing, building and maintaining web systems since 2008, mostly in Laravel.
June 2024 to present
Technical Lead (Web)
Immersive technology studio
Building the systems that manage VR and AR experiences and their data.
- PHP
- Laravel
- TypeScript
- Vue
- AWS
- MySQL
Contrast, measured to WCAG 2.2. Text needs 4.5:1 and graphics need 3:1.
| Pair | Colours | Ratio | Minimum | Result |
|---|---|---|---|---|
| Text on background | ink on bg | 7.7:1 | 4.5:1 | Pass |
| Secondary text on background | muted on bg | 5.6:1 | 4.5:1 | Pass |
| Link on background | link on bg | 5.5:1 | 4.5:1 | Pass |
| Text on panel | ink on surface | 9.6:1 | 4.5:1 | Pass |
| Secondary text on panel | muted on surface | 7.0:1 | 4.5:1 | Pass |
| Link on panel | link on surface | 6.9:1 | 4.5:1 | Pass |
| Button text on button | fillInk on fill | 8.4:1 | 4.5:1 | Pass |
| Rule on background | mark on bg | 4.5:1 | 3:1 | Pass |
| Rule on panel | mark on surface | 5.7:1 | 3:1 | Pass |
Night hike
A fell after dark: navy sky, head-torch yellow, and the cold blue of a phone screen.
data-palette="night-hike"
-
bg
#0f1a2b -
surface
#18273d -
ink
#e8edf5 -
muted
#9fb0c8 -
line
#2b3d58 -
link
#ffd24a -
fill
#ffd24a -
mark
#7fb2ff
Alex Hollyman
Technical lead and software engineer
Designing, building and maintaining web systems since 2008, mostly in Laravel.
June 2024 to present
Technical Lead (Web)
Immersive technology studio
Building the systems that manage VR and AR experiences and their data.
- PHP
- Laravel
- TypeScript
- Vue
- AWS
- MySQL
Contrast, measured to WCAG 2.2. Text needs 4.5:1 and graphics need 3:1.
| Pair | Colours | Ratio | Minimum | Result |
|---|---|---|---|---|
| Text on background | ink on bg | 14.8:1 | 4.5:1 | Pass |
| Secondary text on background | muted on bg | 7.9:1 | 4.5:1 | Pass |
| Link on background | link on bg | 12.1:1 | 4.5:1 | Pass |
| Text on panel | ink on surface | 12.8:1 | 4.5:1 | Pass |
| Secondary text on panel | muted on surface | 6.8:1 | 4.5:1 | Pass |
| Link on panel | link on surface | 10.4:1 | 4.5:1 | Pass |
| Button text on button | fillInk on fill | 12.1:1 | 4.5:1 | Pass |
| Rule on background | mark on bg | 8.1:1 | 3:1 | Pass |
| Rule on panel | mark on surface | 7.0:1 | 3:1 | Pass |
Autumn hillside
A Lakeland fellside in October: faded grass for the page, heather for links and buttons, a line of rusted bracken.
data-palette="autumn-hillside"
-
bg
#ccd1ae -
surface
#dde1c5 -
ink
#262a1c -
muted
#4a4f38 -
line
#a7ad86 -
link
#6b2a73 -
fill
#6b2a73 -
mark
#a8501a
Alex Hollyman
Technical lead and software engineer
Designing, building and maintaining web systems since 2008, mostly in Laravel.
June 2024 to present
Technical Lead (Web)
Immersive technology studio
Building the systems that manage VR and AR experiences and their data.
- PHP
- Laravel
- TypeScript
- Vue
- AWS
- MySQL
Contrast, measured to WCAG 2.2. Text needs 4.5:1 and graphics need 3:1.
| Pair | Colours | Ratio | Minimum | Result |
|---|---|---|---|---|
| Text on background | ink on bg | 9.3:1 | 4.5:1 | Pass |
| Secondary text on background | muted on bg | 5.4:1 | 4.5:1 | Pass |
| Link on background | link on bg | 6.0:1 | 4.5:1 | Pass |
| Text on panel | ink on surface | 10.9:1 | 4.5:1 | Pass |
| Secondary text on panel | muted on surface | 6.3:1 | 4.5:1 | Pass |
| Link on panel | link on surface | 7.1:1 | 4.5:1 | Pass |
| Button text on button | fillInk on fill | 8.3:1 | 4.5:1 | Pass |
| Rule on background | mark on bg | 3.5:1 | 3:1 | Pass |
| Rule on panel | mark on surface | 4.1:1 | 3:1 | Pass |