— Door 02 · Show, don't tell
A working visual design system.
This is the part of the job you can't fake in a cover letter: the discipline a key brand custodian maintains. Type scale, a colour system with real accessibility checks, a layout grid, a spacing rhythm, and live components — all hand-built for this application.
HONESTY NOTE — The colours and forms here are my own creative interpretation inspired by the Foundation's public site (warm purple · magenta · mango). This is not the Foundation's official brand guideline. It demonstrates how I build and document a system, which is what the role protects day to day.
01Type scale & pairing
Modular · 1.25 ratio
Display52 / 53px
Playfair · 700
Every child, safe.
Heading 138 / 41px
Playfair · 700
For their right to be safe
Heading 227 / 31px
Playfair · 600
Care, prevention and advocacy
Lede20 / 29px
Inter · 500
A confident lede sets the emotional tone before a reader hits the body copy.
Body16 / 26px
Inter · 400
Body copy stays at 16px minimum for comfortable reading and accessibility, with generous line-height so longer stories about families and young people never feel dense.
Label12px · 0.16em
JetBrains Mono
EYEBROW · METADATA · UI LABEL
Playfair Display
Headlines · emotional
A warm editorial serif for human, hopeful headlines that carry the mission.
Inter
Body · UI · accessible
A neutral, highly legible workhorse for body, forms and interface — strong accessibility.
JetBrains Mono
Labels · data
Monospace for eyebrows, metadata and stat callouts — adds structure and trust.
02Colour system + WCAG contrast
AA = 4.5:1 body · 3:1 large
AA · white text 6.9:1
Purple · Primary
#6A2C91
Primary brand, headings on light, primary buttons. Passes AA with white text.
AA large · white 4.0:1
Magenta · Energy
#E6007E
Accents, links, campaign energy. Use white text at large sizes; pair with plum for body.
AA · plum text 9.1:1
Mango · Warmth
#FFC845
Donate CTAs, highlights, hope. Never white text on mango — always plum/ink.
AAA · white 14.6:1
Plum · Ink
#2A1438
Primary text, dark sections, footers. Highest-contrast partner for every brand colour.
Surface
Paper · Surface
#F8F4FB
Page background. A whisper of purple keeps the system warm, never clinical white.
AA · white 3.4:1
Success · Functional
#1F9D6A
Confirmation states only — kept outside the brand palette so meaning stays clear.
03Layout grid
12-col · responsive
Hero · span 12
Feature story · span 8
Donate · span 4
Program · 4
Program · 4
Program · 4
04Spacing rhythm
8px base unit
Everything on every page in this hub snaps to multiples of 8px. It's invisible to a reader and the reason a layout feels calm instead of accidental — and the reason a small team can keep output consistent without re-deciding spacing every time.
05Live components
accessible by default
Buttons & pills
Primary action
Secondary
Donate ♥
CarePreventionAdvocacyDolly's Dream
Donation card pattern
— For their right to be safe
Help a child feel safe today
ALT-TEXT DISCIPLINE » Every image asset I produce ships with descriptive alt text and a documented contrast pass. Inclusive design isn't a final step — it's a field in the template. That's how an asset bank stays accessible at scale.