Why it was neededColour, spacing, components and states diverged across the app, and every new build re-litigated the basics — a real consistency problem.
What I didReverse-engineered the product into tokens, components and patterns (WCAG AA/AAA by default), and rolled it out incrementally rather than as a big-bang redesign. Documented live with an interactive demo built in.
Design System · Illustrative

Accessible Foundations

A token-driven UI system for products serving older adults. Large by default, high-contrast everywhere, and exactly one color for everything you can act on.

AA→AAAWCAG contrast
44pxtouch targets
1interactive color
20+components
Explore components See it in a product
Accessibility firstAA is the floor; primary text and structure target AAA.
One interactive colorOne hue means "you can act on this" — affordance, unambiguous.
Structure over colorWhite canvas; separation from spacing, borders and elevation.
Generous by defaultLarge type and roomy targets absorb reduced acuity and tremor.
Foundations

The tokens everything inherits

Color, type, spacing, radius and elevation as variables — change one, and it ripples everywhere, accessibly.

Color
Brand · the only interactive hue
brand-700#4F46E5 · AA
brand-900#4338CA · AAA
surface-active#E7E5F7
surface-hover#F4F3FC
Neutrals · text & structure
950#1D1C22 · titles
800#2E2D34 · icons
700#36353D · body
500#66656E · helper
300#E4E3E8 · borders
200#EFEFF2 · fills
Status · indicate only, never interactive
danger#E03A3A
tier-0highest
tier-1/2/3#FFFABC
Type · Instrument Sans / Google Sans Flex
Read it clearlyH1 · 72 / 700
Section titleH2 · 48 / 600
Section headingH3 · 24 / 600
Card title / nav itemH4 · 16 / 600
Primary body reads at 16px with a generous line height, comfortable for older eyes without zooming.Body · 16 / 400
Form labelLabel · 14 / 500
Helper & meta: the 12px minimum, never smaller.Meta · 12 / 400
Spacing · 4px base grid
4
8
12
16
24
32
48
64
80
Radius
sm · 4
item · 6
btn · 10
lg · 14
full
Elevation
shadow-smcontrols, hover
shadow-mdcards & tabs, field focus
shadow-lgmenus, tooltips, toasts
shadow-modaldialogs
Sizing · touch
min · 36
control · 44
field · 48
Focus & motion
2px ring · 2px offset, on every interactive element.
fast · 100ms · normal · 200ms · slow · 300ms
Components

A live component library

Real, interactive components. Every one already meets the floor: 44px targets, AAA text, one interactive color, a visible focus ring. Click around.

In use

From system to product

The same tokens and components, composed into a real, accessible app: My Library. Nothing here is bespoke; it's all the system.

My Library, built entirely from Accessible Foundations
Handoff · documentation

Developer handoff

Every token, spec and state is already defined, so there's no accessibility audit bolted on at the end.

One interactive colorOnly the brand hue is clickable. Status colors indicate, never afford a tap.
14px floor · 44px targetsNever smaller. Generous sizing absorbs reduced acuity and dexterity.
Never color aloneState is always paired with text, icon, weight or position.
Visible focus, alwaysA 2px ring with 2px offset on every interactive element.