Yexit · Design system · 2026

An AI-ready design system for Yexit

The file came from a kit. Its colour variables kept the kit's names, a second colour collection sat unused, and one name, bg-brand-solid, filled the primary button with slate in light mode and blue in dark mode. The components carried no descriptions.

A designer works around that by looking at the file. An AI agent picks a token by its name and its description. Where neither says what a colour is for, the choice is a guess.

An AI agent read the variable collections through the Figma plugin API and listed every token with its value in each mode. Four findings shaped the rest.

1. F1 The brand's royal blue existed only in the unused collection.
2. F2 One name carried two different colours across modes: bg-brand-solid.
3. F3 The kit's border on inputs and secondary buttons measured 1.6:1 against the page in light mode, below the 3:1 that controls need.
4. F4 Some text pairs fell below 4.5:1 in dark mode as defined in the file: text-tertiary at 4.3:1, text-placeholder at 2.4:1. Their notes say so.

The system keeps three layers, each with one job. Screens never use the first layer directly. Where an intent token exists, it replaces the kit role: the primary button is ink, not bg-brand-solid.

The renaming is where the system became readable. Each new name states a job and a limit.

Each of the 473 colour tokens carries a note: what it is for and, where it matters, what it pairs with and its contrast ratio. The note is what an agent reads when it chooses a colour, and what a reviewer checks the screen against.

The brand book is written as rules that can be checked, not as mood. Each rule names the tokens it uses. The same list serves the agent that generates a screen and the person who reviews it.

1. C1 One accent per screen, and at most one accent word in a headline.
2. C2 Touch targets of at least 44pt. Nothing reachable only on hover.
3. C3 Fields are cards on surface with shadow-soft-sm, never outlined.
4. C4 The tints mark people and categories, never decoration.
5. C5 Sentence case. No emoji in interface copy.
6. C6 Phone first: a 390pt screen, one column, the primary action in the thumb zone.

41 components are built in code from the structure of the Figma file: 32 from the kit and 9 Yexit patterns. The Figma components had no descriptions, so their guidelines were written from the file. Each component page lists the Figma variants it leaves out and the quirks it keeps from the source.

The system lists what it does not cover, so an agent does not fill the gap with a guess: social login buttons and store badges that need third-party logos, some field types and sizes, the kit's 30 application and 16 marketing pages, its icon pages, a few effects, and the dark logo variant.

The reference is the default design system for the AI tools that generate Yexit's screens and prototypes.

The kit's names stay in the token file, marked for reference, until the Figma variables carry the intent names.