POA Design System
Perceptual Object Anchor Framework. Built to WCAG 2.2 AA today, and designed toward WCAG 3.0's color-blind affirming, RSD-safe, neurodistinct-supportive direction.
Profile is locked
Saving your work
Profile saved
New version available
If it reads in greyscale, it is future-proof. Toggle to verify every state stays readable without color.
Rule 01
Forbidden color pairs
Never mix these pairs as the only way to tell two things apart.
Protanopia / Deuteranopia
- Red vs Green
- Brown vs Green
- Purple vs Blue
- Grey vs Teal
Tritanopia
- Blue vs Green
- Yellow vs Violet
- Dark Blue vs Black
- Pink vs Cyan
Achromatopsia
- Any two colors with the same Lightness value
Rule 02
APCA contrast (WCAG 3.0)
Small text — Lc 75 minimum
Large text — Lc 60 minimum
Icons & borders — Lc 45
Flipped to greyscale, all still readable.
Rule 03
The palette — grounding real-world tones
Locked / Hard Stop
Lc 78text #4A2E2B · bg #F9F6F0
Architectural gate, not an error.
Caution / Working
Lc 81text #3D2A1C · bg #F3EFE0
System working. You did not break it.
Success / Complete
Lc 76text #1E2E22 · bg #E8EFE9
Positive confirmation.
Information / Neutral
Lc 84text #111E2E · bg #EDF1F2
Announcement or reading invitation.
Rule 04
Perceptual object anchors
Abstract geometric shapes are replaced with real-world physical objects. Every anchor is aria-hidden with a screen-reader label.
Stop Sign / Padlock
Locked or secure state
Construction Barrier / Tools
System working or maintenance
Trophy / Wrapped Gift
Task complete
Megaphone
Announcement
Open Book
Reading invitation
Life Ring
Support menu (judgment-free)
Rule 05
Literal copywriting
- • No metaphors, idioms, slang, or technical jargon.
- • No punitive words. “Error!”, “Invalid!”, “Rejected!” are banned.
- • Maximum 15 words for any explanatory line.
- • Active voice, action first.
Banned
Error! Invalid email address.
Use instead
Missing information. Type an @ symbol to complete your email address.
Rule 06
Form error pattern — RSD Guard
On error the border never turns red. It thickens, a closed padlock appears, and the label describes what is needed.
Rule 07
Autonomy rules
Every destructive action has an immediate, persistent Undo.
- • No forced focus, auto-scroll, or flashing interruptions.
- • No single rigid accessibility mode — granular toggles for animations, icons, text weight.
- • Zero dark patterns — a permanent escape route is always visible.
Rule 08
Technical standards
Color never acts as the sole indicator — always pair with layout change + icon + text.
16px minimum padding around all alert cards.
44x44px minimum touch targets.
aria-hidden on visual icons, paired with screen-reader text.
Design in grayscale first — if it works without color, it is future-proof.
POA Design System is the global standard for all new and existing pages. State tokens (.poa-state-*), the RSD-guard input (<POAInputBox>), object anchors (<POAAnchor>), and alert cards (<POAAlert>) are available app-wide. Pages adopt them progressively.