Design system

What every new component should look like. Built from the site's real CSS, so it never drifts out of date.

Part 1

Structure

Bootstrap style page structure, built in Tailwind. Four layers, always in this order.

The four structural layers, class and job
Layer	Class	Job
Section	`<section>`	One block of the page. Sets vertical rhythm (`py-16` marketing, `py-8` product).
Container	`.container`	Centres content, caps width at 1220px, adds side padding.
Row	`.row`	Flexbox, not CSS Grid. Wraps, negative margin lines up columns, `gap-y-8` spaces stacked columns on mobile.
Column	`.col`	Paired with a Tailwind width, e.g. `md:w-1/2`.

<section>
  <div class="container">
    <div class="row">
      <div class="col md:w-1/2">...</div>
      <div class="col md:w-1/2">...</div>
    </div>
  </div>
</section>

Never nest .container inside .container. One per section.
A row of columns always needs .row as the wrapper, even for one column. .col depends on the row's negative margin and gap.
Not Bootstrap's own classes, no .col-md-6. Widths are plain Tailwind fractions (w-1/2, w-1/3, w-1/4...), but they are still built on a 12-column base, so columns of different widths line up across rows.
CSS Grid is not used anywhere on the site.

Marketing and product tracks

Marketing pages (Belong, Placid, case studies, principles) and product pages (Spoke, Bearing) are styled differently, on purpose.

Marketing track versus product track, by design property
	Marketing	Product
Section rhythm	`py-16`	`py-8`
H1 font	Mochiy Pop One (`font-serif`, default)	Bitter (`font-sans` override)
H2 size	`text-3xl`	`text-xl`
Corner radius	`rounded-2xl`	`rounded-md`
Focus states	Global outline	`.input-focus-ring` on every field

Marketing

Inspiration for inclusion

Generous space, a display headline, primary colour throughout.

Product

4.1 Local authorities must publish a Local Offer

Dense rhythm, functional heading, colour saved for status and actions.

Typography

Every bare <h1> to <h6> gets text-wrap: balance automatically. No orphan word on a heading's last line.

Marketing and product share the same scale. H1 font and H2 size differ by track, see Marketing and product tracks above. H3 and the named classes below are the same on both.

This is what an h1 looks like

font-serif text-3xl/snug lg:text-4xl/snug. Base rule for a bare h1, marketing pages need no class. Product overrides with font-sans, see the tracks table above. One h1 per page.

This is a real h2

Marketing size shown here. Product uses text-xl instead.

This is a real h3

A card or content subheading. Smaller and more frequent than a section's one h2.

A section-title heading

.section-title. A section's one major heading, marketing size only.

Belong

.eyebrow. Small bold label above a hero, naming what the thing is. Skip it if the h1 already says it.

Together, today and tomorrow

.hero-tagline. The line between .eyebrow and a hero's h1.

Photo by Jonny Holden

.photo-credit. Under a hero image, base size like everything else.

Nothing below 16px

No text anywhere under the 16px base. None of Tailwind's smaller text-size utilities (the ones a size code like "sm" or "xs" would pick), no stylesheet size under 1rem.
Hints, captions, tags, table cells, photo credits: all base size. Secondary feel comes from colour and weight, not size.
Check: grep -o 'text-$sm\|xs$\b' site/templates/*.php should print nothing.

This is body text at the base size.

This is secondary text. Same size, quieter colour.

text-dark-600 for secondary text, not a smaller size

Inclusion Draft

.tag and .tag-neutral at base size too

Colour

Full scales live in tailwind.config.js.
dark-200 is the card border colour. Always paired with a shadow, since border alone is only about 1.24 to 1 contrast.
Info, success, warning and danger are each checked at 4.5 to 1 contrast or better against white. Full rationale on the wiki.

Primary

50

#fdf4f8

100

#fedfe8

200

#fbbace

300

#f598b7

400

#ee76a2

500

#e6528e

600

#dd227c

700

#c30067

800

#a50050

900

#870039

950

#680023

Secondary

50

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500

#ec4899

600

#db2777

700

#be185d

800

#9d174d

900

#831843

950

#500724

Tertiary

50

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a78bfa

500

#8b5cf6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

950

#2e1065

Dark

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

950

#030712

Light

50

#ffffff

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

Neutral

50

#f5f5f5

100

#e9e9e9

200

#d0d0d0

300

#b7b7b7

400

#9f9f9f

500

#858585

600

#646464

700

#464646

800

#3a3a3a

900

#2f2f2f

950

#232323

Info

50

#f2f4f8

100

#dee4f2

200

#b1c2e7

300

#7394de

400

#4d7be0

500

#376ee6

600

#2563eb

700

#1147bd

800

#0e3a9a

900

#0b2f7d

950

#092564

Success

50

#f2f8f2

100

#e1f2de

200

#b9e7b1

300

#81de73

400

#48bb37

500

#379e28

600

#2b861d

700

#216616

800

#1b5312

900

#16430f

950

#11360c

Warning

50

#f8f4f2

100

#f2e7de

200

#e7cab1

300

#dea373

400

#e17821

500

#cc6712

600

#b8590a

700

#8c4408

800

#723706

900

#5c2d05

950

#4a2404

Danger

50

#f8f2f2

100

#f2dede

200

#e7b1b1

300

#de7373

400

#d55050

500

#d83a3a

600

#dc2626

700

#a91b1b

800

#8a1616

900

#6f1212

950

#590e0e

Link

Default link colour is Primary (shown above), from the global a rule. Every link is coloured and underlined, everywhere (see Design principles).

A separate flat colour, text-link, exists only for one narrow case: a course lesson list's not-yet-done links (done ones use Tertiary instead).

link

#1d4ed8

Blob characters

Our illustrations. The drawn share cards use them too.
In the Image Library, tagged blob. Use Choose from library to put one in any image field.
Add, remove or re-describe them in the Brand images field on this page. This section follows.
The words under each one are its image description, which screen readers read out.

Cards

Border plus shadow define the edge. Border colour alone is not enough contrast on its own. Radius: rounded-md product, rounded-2xl marketing (shown here).

Pick the pattern by what the box does, not by looks: is the whole thing one link, does it hold exactly one button, or is there nothing to click?

Accessible

One of the five Local Offer principles.

Whole card is one link. .card plus .stretched-link on the heading. Never wrap the card itself in an <a>.

The vision

One emphasised item, not several. Tinted fill, no border.

See the vision

Exactly one button inside. Card is not a link, only the button is, sized to its own text.

153 councils

A stat, an aside, a category explanation. Nothing in it links anywhere.

Nothing to click. .panel, not .card. Flat fill, no shadow, no border. The moment it needs a link, make it a card.

A button inside a flex-column card needs its own wrapper (a <p>), or it stretches full width.

Short version

One line of text.

Long version

The same card, with a summary running to two or three lines instead of one.

Belong The Universal Offer Agreement

A coloured eyebrow bar over a tinted body, one heading with the eyebrow label folded in.

.card-feature. Home page product intros only. Rare, not a general option.