ABOUT

CONCEPT
AI governance tools treat the EU AI Act as a checklist and report a compliance percentage. The law runs on clocks and changes: retrain a model and your evidence no longer applies, one incident starts separate deadlines under the AI Act, DORA and GDPR, and every "not high-risk" decision has to be defensible. The brief I set myself: design the components for those moments, not another generic dashboard kit.

EXECUTION
A self-initiated design system built from scratch in Figma and React on one set of tokens, using an 8pt grid, WCAG 2.2 AA and the 10 NN/g usability heuristics.
- 79 components and 638 variants on 171 variables, in Light, Dark and Compact
- 8 EU AI Act atoms: risk tier, role, lifecycle stage, article reference, regulatory clock, evaluation result, model version and regime
- 15 screens for Clause, a fictional governance product at Nordhaven Bank, all set at one moment so clocks and counts agree
- 4 maps and monitoring charts, each with a table view
- A React library where the legal rules are tested code: release gate, incident clock ordering, obligation totals
Key decisions: risk tiers have their own colour group (High-risk is never red), no status relies on colour alone, the earliest deadline is always on top, and a blocked action always says why.

RESULTS
177 automated checks and 0 axe violations at WCAG 2.2 AA. Released as a free Figma Community file and a paid kit (Figma Pro, Complete with React, and Team).

The free edition is on Figma Community (search "EU AI Act Design System"); the full kit is on Gumroad and Lemon Squeezy.

Nordhaven Bank, Clause and all people shown are fictional. Designed around the EU AI Act; not legal advice.