Documentation export

Route: Developer (top-level nav)

Superseded (2026-05-28). The standalone Documentation page was replaced by the Developer page. The same files are now part of a committable design/ bundle (plus a Tailwind theme.css preset and an AGENTS.md for coding agents), exported with one Export bundle click or via npx tostada-ui export. See using Tostada in your codebase. The file reference below still applies to tokens.css / design-system.{md,json}.

Auto-generated from Properties. Edit the Library to change.

The Documentation page is the export surface. Everything you've authored in Properties — tokens, principles, navigation rules — renders into three files on this page. Copy them, download them, drop them into your apps and AI tools.

The three tabs

tokens.css

CSS custom properties for every primitive, semantic alias, and component binding. Light + dark.

The drop-in stylesheet your developers paste into any app. See integrating tokens.css for placement and import order.

design-system.md

Markdown reference of tokens, layout principles, and design rules. The Spread's primary input.

The AI-readable artifact. Feed it to Claude Code, Cursor, v0, or Claude Project memory — see feeding design-system.md to AI agents.

design-system.json

Structured JSON of the full design system. Machine-readable for downstream tooling.

For custom linters, build-time validators, future Figma sync. See using design-system.json.

Copy to clipboard

Each tab has a Copy button. Click it; the active tab's full content lands in your clipboard. The button briefly shows Copied! as confirmation.

Download ZIP

The Download ZIP button in the page header bundles all three files into a single archive named after your library:

<library-name>/
├── tokens.css
├── design-system.md
└── design-system.json

The browser triggers a normal download — no server round-trip.

Re-generating

There's nothing to re-generate. Every render of the Documentation page reads the current library state and produces fresh content. Edit a token in another tab, come back, and the tab content reflects the change.

What's in each file

For full specs of the output formats, see export formats.