The ACT Foundation design system
Rebranded from Ammucare’s “clean-c” system to ACT’s own mark: blue, orange and gold resampled from the logo, on a light base, never pure black, Petrona for display and Inter for everything else. The rules live in docs/design/DESIGN-TOKENS.md; the values live in src/app/globals.css. This page is what they actually look like.
Blue, orange and gold — from ACT's own mark
Blue is the single primary action colour across every screen, sampled from the roundel's ring lettering. Orange is the accent — and orange TEXT always uses the deep shade, because the bright value fails AA on cream.
primary
#0055A4
Every primary action
primary-deep
#003A70
Pressed / hover
primary-wash
#E9F0F7
Tinted surfaces
accent
#F15D22
Accent fills only
accent-deep
#B33D0F
ALL orange text
accent-wash
#FAEBE6
Tinted surfaces
kindness
#DBBA06
Tertiary, used sparingly
ink
#202732
Headings & body — never black
muted
#606976
Secondary text
paper
#FCF9F5
Page background
Petrona for display, Inter for everything else
Petrona on headings, proper nouns and hero numerals only. Never on small UI labels. Body text is 16px minimum — a core audience for this kind of site is older donors.
Compassion, put to work
Plain sentences, short paragraphs, no justified text. Say what happened and who it happened to. If a number appears, it must be traceable to a source in _reference/.
1,20,480
Drawn in house, not licensed
A house icon at 30–36px inside a washed, ringed tile. Tones rotate blue → orange → gold across a grid so different kinds of work read as different without adding hues.
Labelled, hinted, and honest about errors
Every input has a visible label — placeholders are not labels. Errors say what to do, not that something is invalid.
We only use this to reply.
Enter a 10-digit number, without the country code.
This scaffold is a static export — no form here posts anywhere yet.