EU AI Act Design System

A Figma and React design system for AI governance products, built around what the law actually asks: classify, prove, and report before the clock runs out.

Role: Lead product designer
Scope: Research, 79 components, 15 screens, React library
Built with: Figma variables, React, Radix Primitives

Get the design system Try the live demo

Governance overview for a fictional bank: an open incident with three reporting clocks (DORA due in 3 hours 20 minutes, AI Act in 1 day 14 hours, GDPR in 2 days 14 hours), readiness at 2 of 3 high-risk systems, alerts that need attention, and a table of AI systems sorted by next deadline.

Governance tools treat the AI Act as a checklist. The law runs on clocks and changes.

A checklist says a system is compliant. The Act asks what happens when the model changes, when something goes wrong, and when an authority questions a decision. I designed for those three moments.

A retrain can quietly break compliance

Evidence, evaluations and the technical file describe one model version. Retrain it, and they no longer apply until someone checks again.

One incident, several legal clocks

The AI Act, DORA and GDPR each start their own deadline from the moment you became aware, and they don't wait for each other.

A classification is a decision you must defend

"Not high-risk" is allowed under Art. 6(3), but an authority can challenge it, so the reasoning has to be on record.

Four decisions I'd defend in any design review

Each one is built into the components, so a team using the system gets it without having to remember it.

Status is never colour alone

Every risk tier, stage and clock pairs its colour with its own icon and word, so it still reads in greyscale and for people with colour blindness. Try it: the switch turns every chip in this section grey.

Prohibited High-risk Transparency Minimal Not high-risk GPAI

A state word can't contradict its value

"Below threshold" is fixed to the component state; only the number is editable. A chip can never say "Pass" next to 71%.

Pass 81.2% vs 78% min Below threshold 71.0% vs 78% min

The earliest deadline leads

Clocks count from "became aware", sort earliest first, and only the first is a primary action. Under six hours always reads as due soon.

DORA Due soon: 3h 20m AI Act Due in 1d 14h GDPR Due in 2d 14h

Every decision leaves a record

Classifications, overrides and freezes are written with who, why, when in UTC, and the article. The trail has no edit or delete.

Clara Visser changed the tier from Minimal to High-risk: "Purpose now includes credit limit decisions, which is Annex III 5(b)." 21 Sep 2026, 09:40:12 UTC · Art. 6

One set of tokens, two themes, every screen built from components

Colour, type, spacing and density live in Figma variables with Light, Dark and Compact modes. The same names become CSS variables in code, so a designer's spec and a developer's component read alike.

79components

638variants

171variables

100icons

15screens in both themes

Incident detail in the light theme: three reporting clocks, what happened, a timeline and the actions taken, each with its article. — Incident detail, Light

The same incident detail in the dark theme. — The same screen, Dark. One attribute switches every token.

"I retrained the model. Can I ship?"

A material change resets the evidence behind a high-risk system. The change review turns that into a gate with a clear answer, instead of a report someone has to interpret.

Detect the change
New training data counts as a material change, so the review starts before anything reaches customers.
Re-run against thresholds
Every metric shows its value, its threshold and the certified version, so a drop is visible even when it still passes.
Release or block
Release stays disabled and says exactly what unblocks it, including an open incident that freezes the model.

Change review for model v4.2: releases paused by an open incident, accuracy and robustness passing, approval rate for applicants over 60 below threshold at 71 percent against a 78 percent minimum, a disabled Release button with the list of blockers, and approval rate by age group. — Change review: the blocked Release button lists what has to happen first, next to the fairness gap that caused it.

Designed in Figma. Built in React.

Every variant value is a prop value, and the legal logic is code with tests, so a clock or a release gate can't drift from the design.

import { IncidentClockPanel, releaseGate } from "./euaiact-ds";

const gate = releaseGate([
  { label: "Approval rate 60+ at or above 78%", met: false },
  { label: "Authority told about INC-0142", met: false },
]);
// gate.canRelease === false, gate.blockers.length === 2

One file, every component. euaiact-ds.tsx with the tokens and styles embedded, on Radix Primitives.
177 automated checks for logic, rendering and keyboard use, including every deadline and chart value shown in the Figma screens.
WCAG 2.2 AA: axe finds 0 violations, and a screen-reader readiness check runs on a composed screen.
One source of tokens for Figma and code, with a contrast gate on every colour pair in both themes.

Use it in your product

The Figma file has a free version with the foundations, all eight EU AI Act atoms and 15 components, plus previews of everything else. The full kit adds every component in all sizes, the domain components, charts, all fifteen screens (including post-market monitoring, AI literacy and vendor assessment) and four maps, from $49, or $119 with the React library.

Get it free on Figma Community Buy the full kit on Gumroad Buy the full kit on Lemon Squeezy

Building an AI governance product?

I design for fintech, healthcare and compliance software. If you're working on AI governance, model risk or the EU AI Act, I'd like to hear about it.

Email me