What format are design tokens exported in?

AIDesignSys exports tokens as design-tokens.json, grouped into colors, typography, radius, and elevation, alongside a human-readable theme markdown file you can edit and re-upload.

Foundations

Design tokens, explained

Q: What are design tokens?

Design tokens are named values — like primary, surface, radius-md, or shadow-lg — that store the raw decisions of a design system. Instead of hardcoding a hex code in fifty places, you reference one token, so a single change updates everything.

Q: Why do design tokens matter for AI development?

AI assistants need concrete values to build on-brand UI. A tokens file gives them an exact, machine-readable palette and scale to reference, instead of guessing colors and spacing.

Tokens are the named values behind every design system — the single source of truth for color, type, spacing, radius, and elevation. Change the token, and everything built on it updates at once.

From hardcoded values to named decisions

Without tokens, a brand color is a hex code copy-pasted into hundreds of files. Rebranding means a fragile find-and-replace. With tokens, that color has a name — primary — and every button, link, and badge references the name. One edit, system-wide.

The swatches below are the live tokens of your currently active theme. Switch themes back in the playground and this page inherits the change — that's tokens doing their job:

primary

surface-alt

success

error

● success radius-full

The token categories

Color — brand (primary, accent), surfaces (bg, surface, surface-alt), text, and semantic states (success, warning, error, info).
Typography — font-heading, font-body, font-mono.
Radius — radius-sm through radius-full for consistent corners.
Elevation — shadow-sm, shadow-md, shadow-lg for depth.

In AIDesignSys, every theme is just these tokens written in plain markdown. Open the Foundations panel on the homepage to see them rendered as a live specimen — colors, a type scale, and shape demos — for the active theme.

Why tokens are the unit AI needs

When you ask an assistant to build UI, "make it match our brand" is meaningless without values. A design-tokens.json file gives it the exact palette and scale to reference — so it writes var(--primary) instead of inventing #3B82F6. Tokens turn "on-brand" from a vibe into a constraint the model can actually follow.

That's why every AI Package export leads with the tokens file, and why every component prompt is pre-filled with the active theme's real values.

Frequently asked questions

What are design tokens?

Named values — like primary, surface, radius-md, shadow-lg — that store the raw decisions of a design system. Reference the name instead of hardcoding a value, and a single change updates everywhere.

Why do design tokens matter for AI development?

Assistants need concrete values to build on-brand UI. A tokens file gives them an exact, machine-readable palette and scale to reference instead of guessing.

What format does AIDesignSys export tokens in?

As design-tokens.json grouped into colors, typography, radius, and elevation — plus a human-editable theme markdown file you can download, edit, and re-upload.

Can I edit tokens by hand?

Yes. Download any theme's .md, change a value, and upload it back — the entire component library re-themes live so you can validate before exporting.

Edit a token, watch everything change

Open the Foundations panel and see your active theme's tokens as a live specimen.

Explore the tokens →