Tostada
Try Tostada Join Slack

10-minute tour

This tour walks you through every surface of Tostada in about 10 minutes. By the end you'll have edited a token, seen a component restyle live, adopted a layout principle, written an application rule, and exported the result.

Assumptions: you have both dev servers running (see install) and you're looking at http://localhost:5174.

1 · Library landing (30 sec)

The Library tab is where you author. Three top-level sections:

  • Properties — Tokens · Layout Principles · Navigation rules
  • Components — 56 components, live-previewed with your tokens
  • Documentation — the generated export (tokens.css, design-system.md, design-system.json)

Take the dark-mode toggle in the top nav for a spin. Notice every preview reacts live.

2 · Edit a primitive token (1 min)

Go to Properties → Tokens → Primitives. Find color-accent (or similar). Click the value cell and change it to #1B19FF. Press Enter.

  • The swatch updates instantly.
  • Hop to Components → Button. The primary button is now blue.
  • Hop to Documentation. The first line of tokens.css reflects the new value.

Every change is debounce-saved to localStorage after ~500 ms. No save button.

3 · Bind a semantic token (1 min)

Go to Tokens → Semantic. bg-accent is bound to a primitive. Change the binding to a different primitive — the swatch resolves to the new value.

Set the dark-mode override (the rightmost dropdown) to a different primitive. Toggle dark mode in the top nav. The swatch swaps.

4 · Map a component variable (1 min)

Go to Tokens → Component mapping. This is where Tostada's three-tier tokens meet component's CSS variables (--primary, --background, etc.).

Change --primary to bind to a different semantic. Open Components → Button in a second tab. Every variant updates.

5 · Adopt a layout principle from a block (1 min)

Go to Properties → Layout Principles. Click Start from a block.

The block picker shows 27 component blocks (dashboards, sidebars, login, signup). Hover one — it previews in the right pane with your tokens applied. Click Adopt as principle. A new principle appears with its fields pre-filled.

6 · Write an application rule (1 min)

Go to Components → Button. Click into the Application Rules panel under any variant.

Add a Do: "Use Primary for the single most important action on the page."

Add a Don't: "Don't stack two Primary buttons in the same view."

These rules become entries in design-system.md so AI agents reading the export apply them automatically.

7 · Export the system (1 min)

Go to Documentation. Three tabs: tokens.css, design-system.md, design-system.json.

  • Click Copy on tokens.css — drop it into any project's stylesheet.
  • Click Download ZIP — all three files land in your downloads folder.

8 · Apply your system to anything (1 min, optional)

Go to Spread. Paste a URL — say, your team's marketing page. Click Spread. Tostada rebuilds the page using your tokens. Drag the slider to compare before/after.

The Spread pipeline is mocked today — it injects your tokens as high-specificity overrides. A real AI-driven rewrite is on the roadmap.

9 · Wrap up (30 sec)

You've now touched every authoring surface. Next steps: