A-17 · DESIGN

Brand

Blue / white / red system. White and very light blue ≈ 70% of a view; blue ≈ 20–25%; red ≤ 5%. Red is accent only. Focus rings are --brand-blue-500 at 3px — never red.

Tokens

--brand-navy

#0B2A5B

--brand-blue

#1747A6

--brand-blue-500

#2F6FDB

--brand-blue-50

#EEF4FE

--white

#FFFFFF

--surface

#F7F9FC

--border

#D6DEEA

--text

#0F172A

--text-muted

#475569

--brand-red

#C8102E

--danger

#A4161A

Palette ratios

~70% white / light blue~23% blue≤5% red

Contrast (WCAG 2.2 AA)

PairForegroundBackgroundRatioResult
--text on --white (body)#0F172A#FFFFFF17.85:1PASS
--text on --surface (body)#0F172A#F7F9FC16.93:1PASS
--text on --brand-blue-50 (body)#0F172A#EEF4FE16.16:1PASS
--text-muted on --white#475569#FFFFFF7.58:1PASS
--white on --brand-navy#FFFFFF#0B2A5B14.03:1PASS
--white on --brand-blue#FFFFFF#1747A68.44:1PASS
--white on --brand-blue-500 (UI)#FFFFFF#2F6FDB4.75:1PASS
--white on --brand-red#FFFFFF#C8102E5.88:1PASS
--white on --danger#FFFFFF#A4161A7.75:1PASS
--brand-blue on --white (link)#1747A6#FFFFFF8.44:1PASS
focus --brand-blue-500 on --white#2F6FDB#FFFFFF4.75:1PASS

Full table: docs/spec/evidence-summaries/DESIGN-contrast.md

Photo credits

A red-brick school building with a clock tower and a tree-lined walkway.
A red-brick school building with a clock tower and a tree-lined walkway.
Empty classroom with rows of desks facing a chalkboard and a teacher’s desk.
Empty classroom with rows of desks facing a chalkboard and a teacher’s desk.
Graduates in gowns seen from behind throwing caps into the air at dusk.
Graduates in gowns seen from behind throwing caps into the air at dusk.
A colourful stack of closed hardcover books on a plain background.
A colourful stack of closed hardcover books on a plain background.
Curved library shelves filled with books and an empty walkway.
Curved library shelves filled with books and an empty walkway.
Adult hands writing on paper between two open laptops.
Adult hands writing on paper between two open laptops.