Design system
Every token and every component, rendered from the real stylesheet. If something breaks, it breaks here first.
This same inventory is one click away from any page: the Design system pill at the bottom-left, or Shift + D.
Colour
Six playful ramps and a warm neutral scale, all OKLCH. Every ramp carries a -dark step. That is the colour a control sits on, and the reason buttons feel physical.
grape-tint grape-tint-2 grape-bright grape-light grape grape-dark leaf-tint leaf-bright leaf leaf-dark sky-tint sky-bright sky sky-dark sun-tint sun-bright sun sun-dark coral-tint coral-bright coral coral-dark tangerine-tint tangerine-bright tangerine tangerine-dark Neutrals
snow polar cloud swan hare wolf eel ink Semantic aliases
These are the only names components should use. The accessibility modes re-point them, which is why High Contrast and Dark Contrast work everywhere without a single component change.
primary primary-dark primary-50 green blue accent error text heading text-muted bg bg-alt border bg-dark Typography
Nunito carries the personality: rounded and heavy, set tight with negative tracking so big headlines hold together. Lexend carries the reading, at a generous 1.7 line-height.
Making sense
Together, always
How we help
Upcoming events
Parent support groups
Advocacy helpline
Free, confidential and answered by people who understand.
One-to-one help understanding the SEND system, aged 0 to 25.
Supporting families across Greater Manchester.
DATE TO BE ANNOUNCED
Line height
--leading-display Every family deserves someone in their corner who knows how the system works and will not let go until it does.
--leading-tight Every family deserves someone in their corner who knows how the system works and will not let go until it does.
--leading-snug Every family deserves someone in their corner who knows how the system works and will not let go until it does.
--leading-body Every family deserves someone in their corner who knows how the system works and will not let go until it does.
--leading-loose Every family deserves someone in their corner who knows how the system works and will not let go until it does.
Space & shape
A 4px base scale for components; fluid --section-y and --gutter for the page itself, so the layout breathes at every width instead of cramping on the way down.
--space-1 --space-2 --space-3 --space-4 --space-6 --space-8 --space-12 --space-16 --space-24 --gutter --section-y Radius
-sm base -md -lg -xl -2xl Depth
Surfaces are flat. Dimension comes from a solid slab of the surface's own darker colour underneath it, never a blur. Press a control and it drops onto that slab.
--depth--depth-lg--shadow-md--shadow-lgMotion
Bouncy by default. Hit replay to run every loop and easing at once, the fastest way to check nothing has gone stiff.
Easing
Duration
--dur-instant--dur-fast--dur-base--dur-slow--dur-loopLooping animations, hover lifts and scroll reveals were removed at the client's request: moving objects were reported as distracting from a neurodiverse perspective. Durations above are still used for colour and shadow transitions, and by the mobile menu.
Buttons
The signature control. Press one and the face drops the full --depth onto its slab, and the shadow disappears. Every variant only sets --btn-bg and --btn-slab.
Variants
What each colour means
Colour carries the intent, so the same action is the same colour everywhere. Pick the variant by what the button does, not by what looks good in that spot.
| Colour | Means | Used by |
|---|---|---|
| Yellow | The one action a page is built around | Learn more in the hero, and the campaign appeal |
| Teal | Giving money | Donate, in the header and the banner |
| Purple | Go to another part of the site | See all our services |
| Outline | Getting in touch, and anything secondary — present without competing with the coloured button beside it | Contact in the header, every phone and email button |
| White | Any of the above on a purple band, where the colour above would be too dark to make out | The helpline number |
On a coloured field
The site has two purple fields and they behave in opposite ways in dark mode, so each takes a different button. Yellow is not shown above with the others because on a light surface it is 1.76:1 against the page — you could not see where the button ends.
--color-band) stay dark in both themes, so yellow holds
at 6.11:1 and btn-on-band stays a white button. --color-primary)
flips to pale pink in dark, and the white button flips with it to stay
readable. Yellow would not survive that flip. Sizes
States
Surfaces & badges
Flat sticker
Two-pixel border, solid slab beneath. .surface
Lifts on hover
Rises and its slab grows with it. .surface--lift
Flat, no slab
For nesting inside another surface. .surface--flat
Badges
Progress
Form controls
Page patterns
Section heading
How we help
Every service is free for families of children with special educational needs and disabilities.