The rules the site is built from, and the fourteen rows every page is assembled out of. Pages are composed from these rows, so nothing is designed page by page.
Colour
Navy is the ink. Cyan is the single interactive accent: buttons, link underlines, focus, the mark. Only two neutrals sit alongside them: white and the warm off-white. Everything else is Stuart’s category palette, used unaltered and only as a small dot accent. Never invent a colour.
Navy ink
#26224C
Cyan accent
#00E9F5
Warm off-white
#F4F1EA · ground
Warm panel
#ECE7DB
White
#FFFFFF · cards
Category coding. Six sanctioned brand colours identify a service or programme. They appear as a dot, never as a background wash, never on type, never on a button.
Strategy
#5888F8
Brand & websites
#A888F8
Marketing
#F88878
Digital Trustees
#12D9B8 · [confirm]
The Curve
#F86898 · [confirm]
Open Working
#F4EF6E · [confirm]
Do
Warm off-white as the default ground, navy for depthCyan only where something is interactiveCategory colour as a dot, on a static surfaceWhite cards to lift content off the beige
Don’t
Pastel washes behind blocks of contentCategory colour on type, buttons or linksNew colours mixed to “balance” a layoutMore than two background tones in one view
The one exception
Inside a programme page (.prog-curve, .prog-trustees, .prog-open) that programme’s colour becomes the interactive accent, replacing cyan on buttons, link underlines and CTAs. The point is that a single page never shows two accent colours for the same kind of action. Everywhere else, cyan is the only interactive colour.
Typography
Three faces, three jobs. Kante carries every heading and statement. StupidSans does body copy, UI and figures. Cognate is reserved for programme names only: Digital Trustees, The Curve, Open Working. Using it anywhere else spends the brand’s loudest asset on something that isn’t a programme.
Display · Kante 400 page-opening statement
Digital, done properly
H2 · Kante 400 section heading
Programmes you can join or fund
H3 · StupidSans 800 card and sub-heading
How the partnership works
Programme name · Cognate 900 the only use of Cognate
Digital Trustees
Lede · StupidSans 600
We help charities use digital, data and design to do better work, and stick around to keep it working.
Body · StupidSans 600
Live 90-minute online workshops on the things third sector teams actually need, from AI to accessible content. Come to one, or make it a habit.
Figure · StupidSans 900 tabular numerals
8,000+
Do
Sentence case everywhere, including buttonsOne statement per section, in KanteLet type size and space create hierarchy
Don’t
Tracked uppercase eyebrows above headingsCognate on service names, headings or UIMore than two type sizes in one card
Space, not lines
Rows separate themselves with generous vertical space. There are no divider rules, no grid lines between cells, no boxes drawn around things that space already separates. A row breathes at clamp(4rem, 2.5rem + 5vw, 7rem); a tight row at roughly half that.
Do
Let a row’s padding do the separatingAlternate ground and navy for rhythmKeep measure under about 70 characters
Don’t
Horizontal rules between sectionsBorders around cards on a tinted groundTwo dark rows running into each other
Buttons and links
One primary action per row. Cyan fill with navy label is the primary; the ghost button is the secondary and always inherits its outline from the surface it sits on. Text links stay navy and show the accent as an underline, so colour never carries meaning on its own.
The dash-and-dot from the logo is the brand’s signature device. Use it sparingly: once in a hero, beside a quote attribution, or as a full stop at the end of a statement. It is not a bullet and not a divider.
Icons and shapes (suggested extras)
Two optional layers that add warmth without adding photography. Both are proposals for Stuart to confirm; see them live on work-alt and services-alt.
Icon circles
Icons are Streamline Ultimate Light: detailed, friendly line work, always inside a circle. Two treatments, chosen by the surface. On a light surface: white circle, navy icon. On a dark surface: navy circle, off-white icon. Never a bare icon, never cyan, never mixed treatments in one row. When icons mark stages of a process, a single line joins the circles.
On ink: white circle, navy icon
On ground: navy circle, off-white icon
Abstract shapes
Flat geometric compositions built only from palette colours, used where a photograph would be filler: hero sides on pages with nothing to show, and section punctuation. No gradients, no outlines mixed with fills, no people. Two candidate sets are in play; Stuart picks one (or blends).
Set one: logo geometry
Quarter-rounds, half-pills and an oversized dash-dot, all derived from the mark itself.
Set two: signal and ripple
Concentric rings, dot grids and sunrise arcs. Softer, more editorial.
Do: keep shapes flat and large; one composition per page; category colours allowed as fills.
Don’t: use shapes and a photo in the same hero; scale a composition below 280px wide; put text on top of shapes.
The fourteen rows
Every page is assembled from these. Each row owns its own vertical rhythm and its own dark or light surface; nothing inside a row sets section padding. Build a new page by choosing rows and ordering them, rather than by designing a new layout. If a page seems to need a row that is not here, first check whether an existing one, restyled by surface, does the job — new one-off components are how a system drifts.
01Hero, splitHomepage and section openers.row-hero-split
On ink:
On ground: