Documentation site

The export bundle is for your codebase. This is for people: a small static website of your design system, with rendered component previews, every token with a click-to-copy variable, your layout principles, your Do/Don't rules, and a page of measured colour contrast.

It is generated from the library, so it cannot drift from it. There is no page to maintain, no screenshot to retake, and nothing to remember to update.

Getting one

From the CLI — keep your tostada.json at the repo root and run:

npx @tostada-ui/format docs                                  # writes ./design-docs
npx @tostada-ui/format docs --from ./design.json --out ./site

From the app — switch the Library to Dev mode and click Export docs site. You get a ZIP; unzip it and open index.html.

What you get

A folder. Open index.html in any browser — no server, no build step, no install. Every link inside it is relative, so it works the same whether you double-click it on a laptop, commit it to a repo, drop it on an intranet, or serve it from a bucket.

design-docs/
├── index.html              overview
├── tokens-primitives.html  the raw values
├── tokens-semantic.html    the ones to actually use
├── families.html           colour families and their slots
├── shells.html · layouts.html · overlays.html · navigation.html
├── accessibility.html      accessibility guidance, then measured contrast pairs
├── patterns/*.html         one page per pattern — the problem, the rules, and why
├── components/*.html       one page per component
└── assets/                 three stylesheets

Component pages carry a rendered preview of the component wearing your tokens, a tab per variant, the install command, the snippet, and whatever Do/Don't rules you have authored. Token pages carry a swatch, the value, what it resolves to, and a copy button that gives you var(--your-token).

Sections you have not filled in say so, plainly, rather than disappearing — an empty Overlays page tells a reader the section exists and is theirs to fill.

What the previews are

Snapshots of the components as they ship in Tostada, captured once and rendered with your colours, spacing and type. They are pictures, not applications: links inside them do not navigate, and buttons do not open anything.

They also mean the site describes the components Tostada ships, not any local edits you have made in your own codebase after exporting. If those have diverged a long way, the component pages will show you the original.

Snapshots are also what makes the folder work with no network at all. Commit it, open index.html from your own disk six months later on a plane, and every page renders: nothing on it is fetched from anywhere — not a preview, not a stylesheet, not so much as a demo avatar. That is the point of having the folder rather than only a URL.

(The hosted site is the one exception, and it goes the other way — see below.)

The accessibility page

Every colour pair your system defines — a background and the foreground placed on it — measured against WCAG 2.1 AA: 4.5:1 for text, 3:1 for the parts that identify a control and its focus. Light mode and dark mode, separately.

Two things it deliberately does not do:

• It never says "compliant". It reports which pairs were measured and what each one achieved. Whether a product is accessible is not a question a table of ratios can answer.
• It never guesses. A pair it cannot resolve from tokens alone — translucency, a gradient, currentColor — is counted and listed unjudged rather than scored. Guessing would invent either bad news or good news, and good news is the dangerous one.

It measures the system, not a product built with it. Nothing on it speaks to focus order, labelling, keyboard traps or motion. It is one input to an accessibility review, not a replacement for one.

Sharing it

The site is a folder of files, so anywhere you can put files works: a docs/ directory in your repo, a static host, an intranet share, a ZIP in an email. Nothing in it phones home and nothing in it needs an account.

If what you want is a link that stays current as you edit, see sharing your library — a share link is live, where this is a snapshot you regenerate when you want to.

And if what you want is this site, at a URL, updating itself after every save without anyone running a command — that is the hosted documentation site, part of the hosted plan. The generator on this page stays free either way.