Elements
The shared building blocks used inside templates and modules: buttons, tags, surfaces, forms and states. These aren't modules you add to a page yourself; they're the consistent pieces that modules are built from.
Buttons & CTAs
Four button styles cover every call-to-action on the site, plus a text link for inline use.
- Primary: the main action on a page. Use one per section at most.
- Secondary: an alternate action on a coloured or dark background, where a solid primary button would be too heavy.
- Outline: a lower-emphasis action placed next to a primary or secondary button.
- Text link: for inline or tertiary actions like "Learn more", not a standalone action that needs a visible boundary.
All four share the same hover, press and disabled behaviour, so switching between them is a style choice, not a functional one.
Tags & labels
A single tag style is used as a category tag, a filter, and an eyebrow label above a heading. It comes in a set of brand colours, so it can be adapted to match the surrounding content without needing a separate element for each use.
Surfaces & containers
Content sits in one of two consistent container treatments: a smaller, tighter-radius surface for content within a section (a tile, a stat block, a quote panel), and a larger, more-rounded container for something that holds a whole section, like the footer. These surfaces share a soft shadow that lifts slightly on hover, giving consistent depth across the site without each one needing its own rules.
Navigation
Header links, the mega-menu, footer links and pagination all follow the same shared language for hover, active and current-page states.
Quotes & stats
One pull-quote treatment is used everywhere a quote appears — whether it's a dedicated quote block, a testimonial, or a quote typed directly into a page's body copy. Stat and number blocks use the same surface treatment described above, so they sit naturally alongside the rest of a page.
Forms
Form fields, buttons and validation messages follow the same visual language as the rest of the site — the same button styles, the same focus indication, and a dedicated colour reserved for errors so they're always easy to spot.
Feedback & status
Success and error messages use their own dedicated colours, kept separate from the general brand palette. That keeps confirmation and error states clear and recognisable no matter what other colours are in use on a page.
Media
Video captions and background video overlays follow a consistent treatment, keeping text readable over moving footage without needing a one-off style per module.
Dividers & spacing
Sections share a consistent amount of breathing room throughout the site, with a couple of intentional divider styles available for light or dark backgrounds.