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)

Pair	Foreground	Background	Ratio	Result
--text on --white (body)	#0F172A	#FFFFFF	17.85:1	PASS
--text on --surface (body)	#0F172A	#F7F9FC	16.93:1	PASS
--text on --brand-blue-50 (body)	#0F172A	#EEF4FE	16.16:1	PASS
--text-muted on --white	#475569	#FFFFFF	7.58:1	PASS
--white on --brand-navy	#FFFFFF	#0B2A5B	14.03:1	PASS
--white on --brand-blue	#FFFFFF	#1747A6	8.44:1	PASS
--white on --brand-blue-500 (UI)	#FFFFFF	#2F6FDB	4.75:1	PASS
--white on --brand-red	#FFFFFF	#C8102E	5.88:1	PASS
--white on --danger	#FFFFFF	#A4161A	7.75:1	PASS
--brand-blue on --white (link)	#1747A6	#FFFFFF	8.44:1	PASS
focus --brand-blue-500 on --white	#2F6FDB	#FFFFFF	4.75:1	PASS

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

Photography

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.

Graduates in gowns seen from behind throwing caps into the air at dusk.

A colourful stack of closed hardcover books on a plain background.

Curved library shelves filled with books and an empty walkway.

Adult hands writing on paper between two open laptops.