Design system
The Phase 1 component library and design tokens. Toggle light/dark using the control in the header — every component is built on semantic tokens that adapt to the theme.
Buttons
Badges
Primary
Accent
Muted
Alerts
Information
Term dates for the autumn have been published.
Success
Your message has been sent.
Heads up
Snow closure: school opens at 10am today.
Error
Something went wrong. Please try again.
Cards
Example
Card with footer
Cards group related content and adapt to light/dark themes.
Plain card
Just a title and some body text.
Accordion
How do I contact the school?
Use the contact details in the footer, or the enquiry form (Phase 3).
Where are term dates?
Term dates will be published under News & Events.
Is the site accessible?
Yes — we target WCAG 2.2 AA. See the accessibility statement.
Tabs
Form controls
As it should appear on records.
This field is required.
Colour tokens
background
surface
surface-muted
primary
accent
foreground
foreground-muted
border