Two themes from one set of tokens
Dark is the signature theme. Light is the working surface. The same tokens drive both, so an agent never picks colours for a theme. It picks a role, and the theme supplies the value.
Brand energy where it counts
Switch the preview between the two themes.
Demo theme, this preview only
Radius by role
Components reference a role, never a raw value, so one edit changes every card's corner. A modal, a surface, a control and a pill each get their own radius, so hierarchy shows in the corners.
AI disclosure, designed for regulation
The AI disclosure badge is the one component unique to this spec. I framed it as a legal disclosure first, so it is persistent and can't be dismissed. I scoped it first to AI built into products, such as automatic categorisation, AI-suggested values and actions taken on the user's behalf, rather than to chatbots.
- Always visible, never dismissible
- Always labelled in text, never colour alone
Brand against legibility
The gradient is a brand device, but the badge has to stay legible and can never rely on colour alone. Accessibility settled it. The text label carries the meaning, the gradient is decoration hidden from assistive technology, and a badge that relied on colour alone would fail WCAG 1.4.1.
Three options
Option A, chosen
Gradient on the border and dot only
The label sits in the text colour on a neutral fill, so no text ever sits on the gradient.
Option B
Gradient fill with dark text
It passed AA at both ends of the gradient, but the worst case was about 4.72:1 at the pink end, a thin margin. The gate can't check text over a gradient either, so this option looks worse now than it did then.
Option C
Gradient fill with white text
It fails contrast at the light teal end.
One state, two variants
The badge has a single state. It is static and persistent, with no hover, focus or dismiss state, and it isn't interactive unless a variant adds an info control, which then follows the button or tooltip rules.
It comes as an inline badge or as a region marker, which is linked to its region with aria-describedby. Each comes in compact and standard sizes. An optional slow gradient animation, about 4 seconds long, is the one exception to the duration tokens, and it falls back to a static gradient when reduced motion is set.
Building from the spec found one problem. An agent emitted the primitive radius token instead of the role, so I renamed the role to pill. The gate also can't see the duration exception yet, and that is logged as an open issue.
What it covers under the EU AI Act
Most of Article 50 applies from 2 August 2026. I scoped the badge to AI built into products. Where AI acts on the user's behalf, the badge supports the Article 50(1) duty to tell people they are dealing with an AI system, which the Commission's guidelines extend to agents that interact with people while performing tasks. Suggested values and automatic categorisation go further than Article 50 requires, so the badge treats them as voluntary transparency. Machine-readable marking under Article 50(2) sits outside the design system, and so does Article 50(4), which covers deepfakes and AI-generated text published on matters of public interest. The spec says so, so nobody oversells the badge as compliance.
In June 2026 the Commission's AI Office published optional EU icons for labelling AI-generated content: a basic icon, a fully AI-generated variant and a partially AI-modified variant. They target deepfakes and public-interest text, and displaying one doesn't establish compliance on its own. The AI Office's user testing found people understood the icon better with a short text label, which the badge already has.
This read comes from I replaced my own component library with a spec AI builds from, the full case study.