Style guide
Every colour, type size, component and movement this site is built from, on show and working.
Use the palette bar at the top of any page to see the whole guide in any of the six palettes. Each example also has its own palette menu, so you can compare one component across palettes without changing the rest of the page.
-
Palettes
The six palettes, their colour roles and measured contrast.
-
Typography
The typeface, the type scale and line length.
-
Elements
Plain HTML elements: headings, lists, tables, code and form fields.
-
Components
The Astro components the pages are assembled from.
-
Layout
Page widths, spacing and palette sections.
-
Motion
How the animation is built, timed and switched off.
How it is built
-
Colour is assigned by role. Components ask for
ink,linkormark, never a hex value, so any palette can restyle any part of a page. - Contrast is measured at build time. The Palettes page calculates every WCAG ratio from the same file that generates the CSS, so the figures cannot drift from the colours.
- The typeface is Atkinson Hyperlegible Next, drawn for the Braille Institute so that similar letters stay distinct for readers with low vision.
- Pages are static HTML. The site is built with Astro and Tailwind CSS. All text and links are in the markup, and the animation is drawn over it.
- Animation is hand-written and optional. One switch in the header turns it off for the whole site, and every piece then shows its finished state as a still. The Motion page has the rules.
- Keyboard users get the same site. Every control is a real button, field or link with a visible focus outline.