CSSA design system
Brand system
Every colour, type step and component on this page is rendered from the tokens in src/styles/global.css. Change a token and this page changes with it.
Palette
The five brand colours from the guideline, plus the dark canvas the house style sits on. Use these directly only for things that must stay the same colour on every surface.
Grey
#555555
Blue
#3F7FE8
Bright Blue
#00DDF4
Green
#2CD788
Pink
#F92ED7
Canvas
#1E1E1E
Logo gradient
Decorative only. Never re-coloured on the logo, never behind body text.
Surfaces
One class per colour. Each paints itself and swaps the whole token set, so everything inside follows automatically. This is the only thing a block, card or page needs to change colour.
Dark canvas (default)
.surface-canvasThe house style: near-black canvas with white text.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Grey panel
.surface-greyBrand grey (#555555) with white text.
Eyebrow label
A raised card on this surface, with subtle text beside it.
White
.surface-whiteWhite with dark text. Use for long reading pages.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Light grey
.surface-lightOff-white with dark text. A quieter reading surface.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Blue (Innovation)
.surface-blueBrand blue with white text.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Bright blue (Member services)
.surface-bright-blueBrand bright blue with dark text.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Green (Impact)
.surface-greenBrand green with dark text.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Pink (People)
.surface-pinkBrand pink with dark text.
Eyebrow label
A raised card on this surface, with subtle text beside it.
Semantic tokens
What components actually use. Each one is redefined by every surface, so a component written against these is correct everywhere without variants.
| Token | Used for | Here |
|---|---|---|
--color-surface | Background of the current panel | |
--color-surface-raised | A card sitting on that surface | |
--color-surface-sunken | Inset areas: form fields, empty slots | |
--color-fg | Headings and emphasised text | |
--color-fg-muted | Body text | |
--color-fg-subtle | Captions, meta, placeholders | |
--color-fg-blue | Headings and figures in brand blue (large text only) | |
--color-edge | Hairline dividers | |
--color-edge-strong | Outlines and outline buttons | |
--color-accent | Decorative brand colour | |
--color-accent-ink | The accent for small text (AA-safe) | |
--color-accent-fg | Text on an accent-filled shape | |
--color-btn-primary | Primary button fill | |
--color-link | Inline link colour | |
--color-focus | Focus ring | |
--color-overlay | Scrim over photography |
Typography
Ubuntu 700 for headlines, Arial for body. Body text never drops below 16px on screen. Sizes below are desktop / mobile.
h172 / 40pxDisplay heading
h248 / 32pxSection heading
h332 / 28pxSub-heading
h428 / 24pxCard heading
h524 / 20pxSmall heading
h620 / 18pxLabel heading
Large body, 18px. Used for section intros and article leads.
Body, 16px. The default for everything written to be read.
Small, 14px. Labels, captions and meta only.
Eyebrow, 14px bold uppercase
Buttons
Three variants, three sizes. Colour comes from the surface, so the same markup is correct on every panel. Active verbs on labels: Join CSSA, Register, Download, Read.
The pillars
Impact, Innovation and Celebrating People each have a fixed brand colour, plus bright blue for Member services. Use the surface, not a one-off colour.
Impact
The scale, importance and influence of the cleaning industry.
Innovation
Technology, sustainability, automation and cobotics.
Celebrating People
The people, members and community behind the industry.
Member services
HR, health and safety, legal, training and standards.
Shape
Rounded corners, consistent card geometry, generous padding, no drop shadows. Four radii exist and nothing else.
12px
Inputs and chips
.rounded-field16px
Images and nested cards
.rounded-card24px
Section panels
.rounded-panelfull
Buttons and tags
.rounded-pillRich text
Everything an editor can produce from a CMS rich-text field, on two different surfaces.
A rich-text heading
A paragraph of body copy with bold text, an inline link and a little emphasis. Written for the micro-business owner first.
- An unordered list item
- Another item
A quotation, set off from the body copy around it.
A rich-text heading
A paragraph of body copy with bold text, an inline link and a little emphasis. Written for the micro-business owner first.
- An unordered list item
- Another item
A quotation, set off from the body copy around it.