Tostada
Try Tostada Join Slack

Your first export

The point of Tostada isn't the editor — it's the export. This walkthrough takes ~10 minutes and ends with tokens.css styling a real component app.

Step 1 — Pick a brand color

Library → Properties → Tokens → Primitives.

Find the brand-colored primitive (often color-blue-500 or similar in the seeded set). Click its value, replace it with your brand hex, press Enter.

The swatch updates. Hop to Components → Button — the primary button is now your brand color.

Step 2 — Verify the change in three places

The same edit shows up everywhere:

  1. Primitives editor — the swatch on the row.
  2. Components → Button — the Primary variant.
  3. Documentation → tokens.css — :root { --color-blue-500: <your hex>; } near the top.

If any of those is stale, see troubleshooting.

Step 3 — Add one Do rule

Components → Button → click into Application Rules.

Click + Add do and write:

Use Primary for the single most important action on the page.

(You can write your own — the rule above is just a placeholder if you're following along verbatim.)

This rule will now ship in design-system.md.

Step 4 — Download the ZIP

Library → Documentation → Download ZIP in the page header.

The download is <library-name>.zip, containing three files:

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

Step 5 — Drop tokens.css into a fresh component project

If you don't already have a target app handy, scaffold one in 30 seconds:

npx create-vite my-app -- --template react-ts
cd my-app
npm install
npm install -D tailwindcss@next @tailwindcss/vite
npx shadcn@latest init
npx shadcn@latest add button

Now wire tokens.css:

  1. Copy your tokens.css to my-app/src/styles/tokens.css.

  2. In src/index.css, import it after Tailwind:

    @import "tailwindcss";
@import "./styles/tokens.css";

  3. Run npm run dev.

Open the app — every <Button variant="default"> is your brand color. You've connected Tostada to a real app.

For deeper integration tips (overrides, dark mode toggling, multiple apps), see integrating tokens.css.

Step 6 — Feed design-system.md to your AI tool

In the same ZIP:

  • For Claude Code: append design-system.md contents into CLAUDE.md (see feeding design-system.md to AI agents).
  • For Cursor: drop it into .cursor/rules/design-system.mdc.
  • For Claude.ai Project memory: paste it as a project document.

From the next prompt on, the AI tool generates UI code using your tokens and your Do/Don't rules.

What you've done

  • Edited the source-of-truth library
  • Verified the change propagates to the live previews, the CSS export, and the Markdown export
  • Wired the export into a real component app
  • Fed the same export into an AI agent

That's the full loop. Every subsequent token edit follows the same path.

What's next

  • Iterate on the rest of your tokens (semantic + component bindings) — see the Library guide.
  • Add layout principles and navigation rules — see Concepts.
  • Set up an API key and try Ask AI on Primitives.