Design System Hub

Every project has a Design System page that pulls tokens, assets, context, and the live layout.md editor into a single workspace. Raw extraction is useful, but rarely ready to ship to AI agents. The hub is where you curate it.

The four tabs

Tab	What it's for
Tokens	The curated view. Extracted tokens are assigned to canonical roles (Backgrounds, Text, Borders, Accent, Status, Primitives, Palette, Components). Add, edit, or delete tokens here.
Assets	Upload brand logos, wordmarks, favicons, and custom fonts. See Branding & Assets for the full walkthrough.
Context	Attach brand voice docs, copy guidelines, and product descriptions that feed into every Explorer generation. See Product Context.
Editor	The same Monaco editor as the Studio, inline. Handy for quick prose edits to layout.md without leaving the hub.

The curated view

Extraction produces raw tokens. The curated view is where those raw tokens become a design system. Each canonical role is a named slot you assign an extracted token to (or leave empty). Agents readinglayout.mdsee your curated assignments in Core Tokens, not the full raw dump.

Role groups

Backgrounds — page, panel, surface, elevated, hover.
Text — primary, secondary, muted, on-accent.
Borders — subtle, strong, focus.
Accent — base, hover, subtle, text on accent.
Status — success, warning, error, info (fill and text).
Primitives — raw hex references used elsewhere.
Palette — brand and secondary brand colours.
Components — token slots specific to a component.

Each header shows counts like BACKGROUNDS 3 of 6 rolesso you can see at a glance which groups still need coverage.

The Tokens groupings in the Source Panel now match the curated taxonomy exactly. You won't see Brand/Surfaces in one place and Accent/Backgrounds in another.

Adding a token manually

If extraction missed something — or you're working in a blank project — click the + button on any group. Enter a name, value, and (for colours) a mode tag if you want it to appear only in light or dark. The new token flows into layout.md and every export immediately.

Custom hex values entered in the role assignment popover also persist. They save to the project, not just the session.

Light and dark modes

Tokens extracted from Figma Variables or website selectors like [data-theme="dark"] carry a mode tag. The mode filter pills above the token grid let you view one mode at a time. When both modes are populated, exports include the dark variant automatically:

tokens.css

:root {

--color-bg: #ffffff;

--color-text: #0a0a0a;

}

[data-theme="dark"] {

--color-bg: #0a0a0a;

--color-text: #ededf4;

}

@media (prefers-color-scheme: dark) {

:root:not([data-theme]) {

--color-bg: #0a0a0a;

--color-text: #ededf4;

}

tokens.json tags mode-scoped entries via $extensions.mode in the W3C DTCG format.
tailwind.config.js picks up the darkMode selector automatically.
layout.md emits a :root block and a [data-theme="dark"] block side by side, so agents can reason about both.

Snapshots and rollback

The curated view supports named snapshots. Take one before a risky re-extraction or a round of manual edits. Snapshots persist server-side, so they survive browser refreshes, tab closes, and different devices. Roll back any time from the snapshots list.

Snapshots are per-project, not per-browser. A teammate can roll back a change you made and vice versa.

Starting from a blank design system

You don't have to extract from a Figma file or website. On the new-project page, pick Start blankto create an empty kit with all the standard sections. Add tokens by hand, upload branding, attach context, and regenerate layout.md when you're ready. This is the right starting point when you're building a design system from scratch rather than codifying an existing one.

Regenerated sections

Some sections of layout.md are regenerated every time the file is read — Core Tokens, Appendix A, Brand Assets, Icons, Component Inventory, and Product Context. The Editor marks these with a striped gutter and a subtle background. Edits inside are reverted with a toast pointing you to the right tab to make the change durable (Tokens, Assets, Context, or the Scanner).