Design system

What every new component on this site should look like. Everything below uses the project's own real CSS classes, so this page updates itself whenever they change.

Marketing and product tracks

Marketing pages (Belong, Placid, case studies, principles) and product pages (currently just the audit tool) are deliberately styled differently.

Marketing Product
Section rhythm py-16 py-8
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 reserved for status and actions.

Colour

Full scales live in tailwind.config.js. dark-200 is the card border colour, always paired with a shadow since border alone only reaches about 1.24 to 1 contrast. Info/success/warning/danger were redesigned 2026-07-27, each verified >= 4.5:1 contrast against white at the 600/DEFAULT shade - see the wiki for why.

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

A single flat colour, not a scale - used for inline text links only.

link

#1d4ed8

Typography

Every bare <h1> through <h6> gets text-wrap: balance automatically, so a heading's last line never leaves a single orphan word.

This is what an h1 looks like

font-serif text-3xl/snug lg:text-4xl/snug - the base rule every bare h1 gets sitewide, no class needed (the size/leading shorthand, not size and leading as separate utilities - see the CSS comment for why that combination silently loses its line-height at desktop widths). Styled as a p here, not a real h1, since a page should only have the one (above)

This is a real h2

Section headings pick their own size by track - text-3xl marketing, text-xl product (see the table above)

This is a real h3

A card or content subheading - a smaller, more frequent role than a section's one h2

A section-title heading

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

Belong

.eyebrow - the small bold label above a hero naming what the thing is, skipped 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

Cards

Border plus shadow define the edge together, since border colour alone doesn't reach usable contrast on its own. Corner radius is rounded-md on product pages, rounded-2xl on marketing (shown here).

Accessible

One of the five Local Offer principles. Border plus shadow, no colour needed to read as a group.

.card for grids of equal weight items

The vision

Tinted fill, no border. For a highlighted pull quote or single item, not a grid.

.card-tint for one emphasised item

Belong The Universal Offer Agreement

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

.card-feature for the home page's product intros

Buttons, tags, and CTA banners

Book a demo Inverse, on dark

.btn-primary, always rounded full on both tracks

Inclusion SEND funding Conference Webinar

.tag for topics, .tag-neutral for classification (defined, not yet used anywhere)

Book a demo of Belong

See how Belong can help SENCOs, teachers, and TAs

Book a demo

One CTA banner radius, rounded-2xl, not a mix

Status icons

A border plus a symbol, not a full background fill, so a status stays quiet until it actually needs attention. Icons are CC0 from SVG Repo's Jtb Variety Oval Icons collection, kept in site/templates/icons/.

Success
Warning
Danger
Info

The main expected use: a form field that's failed validation

Enter a full web address, starting with https://

Focus states

Product track form inputs get a visible ring on top of the global focus outline. Tab into the field below to see it.

Principles

  1. 1

    Never use full capitalisation, anywhere

    Not in an eyebrow bar, not in a tag, not in a badge. Always sentence case, even if a reference mockup shows capitals for illustration.

  2. 2

    Section rules apply to the one major heading and the section's own padding

    Not to repeated card titles, content subheadings, or one off inner spacing. Those are a legitimately different, smaller role.

  3. 3

    Shared components, per track overrides

    .card and .card-tint are shared between both tracks. The marketing rounded-2xl is a utility override applied per use, not a change to the component's own default, which stays rounded-md for product.

Full detail and rationale is on the Design system wiki page.