Skip to main content

Clarity

High-contrast, accessibility-first light theme. WCAG AA throughout, AAA on primary reading surfaces. Pure white canvas, near-black ink, cobalt-blue action — a government-digital-service register.

Version 1.0.0

Meet Clarity

A look at its colors and typography, from the headline to the smallest details.

ClarityLight / Design sample

A place for your next chapter.

Your ideas, your stories, your point of view. Give them a home that feels like you.

Start somethingExplore the story →
Room for the details.

Thoughtful type, a clear palette, and space for what matters.

ClarityDark / Design sample

A place for your next chapter.

Your ideas, your stories, your point of view. Give them a home that feels like you.

Start somethingExplore the story →
Room for the details.

Thoughtful type, a clear palette, and space for what matters.

The identity

A character of its own

Clarity is an accessibility-first system in the register of a well-run government digital service: pure white canvas, near-black text, and one decisive cobalt blue for action. Every colour, every rule, every treatment is chosen to serve orientation or reading, never decoration. Contrast is not a review afterthought here — it is the brand.

  • high-contrast
  • accessible
  • structured
  • unadorned
  • precise

The palette

Color with intention

Light palette

Canvas#ffffff
Ink#0d0d0d
Primary#0052cc
Accent#dceeff
Surface#f2f2f2

Dark palette

Canvas#0b0d10
Ink#f4f6f8
Primary#5c9bff
Accent#132132
Surface#171a1f

The typography

Find your voice in type

Headings

Make a little room for possibility.

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Body

Good stories start with a clear point of view.

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Code & details

Aa Bb Cc · 0123456789

"SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace

Made for

Who it speaks to

Public services, developer tools, documentation-first platforms, and accessibility-conscious products — teams that are judged on whether every visitor, on any device or assistive technology, can read the page and complete the task. Typical owners: a government agency publishing guidance and forms, an open-source project maintaining reference docs, a compliance or civic-tech team that must clear WCAG audits and mean it.

The voice

How it sounds

Plain, exact, and useful. Say what the thing is and what to do next; cut adjectives before nouns. Prefer a verified number to a claim, a labelled step to a flourish. The tone is that of good public writing: calm, literal, and confident because it is correct — never salesy, never clever for its own sake.

Art direction

The thinking behind the look

Pure white (#ffffff) canvas with near-black (#0d0d0d) text — a 19.4:1 reading contrast — and cobalt blue (#0052cc) reserved for decisive action, links, and focus rings. A deliberately visible mid-grey border (#767676, 4.5:1) draws crisp structural rules; #dceeff is the only tint, used sparingly for controlled emphasis. System sans-serif for both headings and body (no serif, no webfont) at 16px / 1.75 line-height, sharp 0.375rem radius, generous 5rem section rhythm. In dark mode the same logic holds on a near-black slate (#0b0d10) with near-white text (#f4f6f8, 18:1) and a lifted cobalt (#5c9bff) that stays unmistakably cobalt.