Changelog

A living list, latest first. User-visible changes only — engineering refactors live in REBUILD_PLAN.md.

Unreleased

Patterns are yours to shape, and Layout became part of them. The Library now has three levels — Foundations, Components and Patterns. Your shells and layouts appear under Patterns as layout patterns, with guidance, their arrangement and a live preview; the layout editor moved there too, and old links still work. Every pattern page is editable: on Tostada's patterns, only the sections you change become yours, each marked Edited with a way back, so the rest keeps receiving our corrections. You can write your own patterns, with variants, reference code and live previews, and add images, which show at the top of the page and are copied into your downloaded documentation. Writing, editing and images are part of Pro in cloud libraries; local libraries are never limited. See Patterns.
Elevation and intents. Colour now has two axes: a five-level elevation scale (sunken, then 01–04) for where a surface sits, and five intents — Primary, Destructive, Success, Warning, Info — in a bold and a subtle emphasis for what something means. Every pair is measured against WCAG AA in all four palettes, light and dark. See Foundations → Elevation, and set a component's level or intent from its page. Your exported bundle gains the scale, a class per level and a record of each component's choice. Libraries you have customised keep their look: levels 01–03 are today's page, card and popover. See Elevation and intents.
Patterns are structured, and they reach your documentation, your bundle and Spread. The patterns Tostada ships — forms and validation, empty states, error and loading states, filtering and search, data tables, destructive actions, navigation and accessibility — are now a problem, a set of do and don't rules, and the reasoning behind them, rather than pages of prose. Until now they lived only in the app; your generated documentation site now has a page for each (the accessibility page shows its guidance above the measured colour pairs), your design/ bundle gains a seventh file, patterns.md, and AGENTS.md points coding agents at it. In-app Spread reads the bundle, so the same patterns shape the pages it rebuilds. They are part of the open format, so regenerating from tostada.json outside the app carries them too. If you apply a reviewed spread map, re-exporting your bundle changes its hash and the map asks to be reviewed again — the system it was reviewed against changed. See Patterns.
The paid plan has a name, a page, and a way in. It is called Pro, and there is now a Plans page you can read without an account, listing exactly what each plan includes — generated from the code that enforces it, so it cannot advertise something the product does not gate. Every locked screen links to it instead of stopping at "not on your plan", and Settings → Plan & billing shows your plan, your seats and your libraries in one place. Card payment is not switched on yet: Get Pro records your request, we set it up by hand the same day, and the page says so before you click rather than after. Pro includes five editor or admin seats — readers stay unlimited and free — and the sixth editor is refused in the invite form rather than silently allowed. Engagements that include a period of Pro now show "Pro until {date} — included with your engagement", with a reminder a month before it ends. And the part worth knowing before you decide anything: going back to Free deletes nothing. Your libraries, your history and your reports stay exactly where they are; what changes is what you can read. See Plans.

(Earlier entries call this tier "the team plan" — the column in the database still says team, and those entries are left as they were written.)
One scan, and your report has an address. npx @tostada-ui/scan measures the front-end debt in any React repo — no account needed to run it — prints your score straight away, and sends the finished report to a one-time link. A free account opens your score, your counts and the top findings with their locations; the team plan opens every finding, the accessibility section and the remediation plan. Your code never leaves your machine; only the report does, and if the upload fails you still get your number and one command to retry. A report nobody claims is deleted after 30 days. The capped teaser retires — there is one scanner now, and the difference is what a report read returns. See the CLI reference.
A share link shows the library and none of the app. A visitor following a public link no longer sees the Designer / Developer switch — it used to appear dimmed, with a tooltip written for team members ("Your role is Reader"). Export is unchanged.
Your design system has a memory. Every save of a cloud library is archived automatically. Open the timeline to see who changed what and roll back with one confirmed click — the state you are leaving is saved first, so even a restore can be undone. Every token carries its own history, where Ctrl+Z steps that token back without touching anything else, and Settings → History is the whole log, filterable by date, person and what changed. Team plan; capture runs on the free plan too, so upgrading reveals the past that was already kept. See Version history.
Your audit says what to do, not just what you have. A hardcoded colour now records what it was doing — a border, a surface, text — so twenty-nine uses of #ffffff become three rows with three different recommendations instead of one row saying "nearest scale step: white". Where a border sits on a dark panel, the report proposes the grey that reads as a border there rather than the value nearest white.
Every section says what the system cannot absorb. A computed blend, a four-stop gradient, a currentColor — each named, with why it cannot be taken and what somebody has to decide. A report that only lists what it can absorb reads as a promise to absorb everything.
Every component names its replacement, or says plainly that there isn't one and a decision is needed — which is the row that tells you what the migration actually costs.
The stack section lists your stack. It used to spend its first three lines on what you don't have.
The library covers the screens products actually ship. A sortable, filterable, paginated data grid; a date picker and a range picker; a file upload that works from the keyboard as well as by dragging; and a stepper. Plus page blocks for settings, a records table, a create form and empty states — the parts every product needs and most starter libraries skip.
Every component has a preview now. chart, direction and form had none, so they rendered as an empty frame in generated documentation. All 60 are captured, on both the hosted site and the folder you can download.
A Patterns section that teaches. Six pages on forms and validation, empty states, error and loading states, filtering and search, data table usage, and destructive actions. Each says when to reach for something, not what it is.
The Library navigation is the four-level one — Foundations, Components, Layout, Patterns. Old links redirect, and they keep whatever was after the ?, so a hand-off link still opens in the mode it was sent in.
Your documentation says the same thing everywhere. The site you download, the one you host and the one the CLI writes had drifted into two different structures for the same library. They agree again.
Export PDF gives you the whole report. It used to give you the first page. Every section past the fold was clipped away — silently, with no gap and no warning, so a truncated file looked exactly like a complete one. Long tables now flow across as many pages as they need, repeating their column headers, and each section still starts a fresh page.
Your workspace has an address now. Sign in and your library, its documentation site, and the scan reports behind it are all in one account — on any machine, for anyone you have invited, with roles that decide who can change what. You can sign out (from Settings → Account), and signing in takes you where you were trying to go rather than leaving you on the form.

Reports stopped being the one thing the product could not keep. Save one and a colleague can open it; delete the library it argued about and the report survives, because the audit outlives the artifact.

Shared links and published docs still need no account. Offline still works — the app mirrors your library to the device you are on.
The format is open source; the app is ours to run. Everything needed to read what Tostada produces — the schemas, the export generators, the offline documentation renderer — is Apache-2.0 in @tostada-ui/format. Take your tostada.json, install that package, and regenerate your token layer, your theme, your design-system.json, your AGENTS.md and your whole documentation site on a machine that never heard of us.

That is not a promise in a README: there is a test whose only job is to prove it, and it is deliberately written against a hand-made library file rather than our own starting content, because a proof that only works for our seed proves the wrong thing.

The dividing rule, if you ever wonder which side something falls on: reading what Tostada produced is open; authoring, auditing and hosting are the product.
The library, organised the way people look for things. Foundations, Components, Layout and Patterns — four levels instead of a "Properties" tab that meant nothing to anyone. Components are grouped by what they do rather than listed fifty-six at a time, the sidebar folds and remembers, and every section landing page is a set of real destinations rather than a heading that shows you its own name back.

Blocks appear as flows: the sixteen sidebar variants and the five sign-in screens are one sequence each, walked step by step, instead of twenty-six near-identical pages.

Every old address still works and lands where it used to point. The generated documentation site follows the same structure, from the same definition, so the two can never disagree about where something lives.

Behind a switch while it settles — turn on Four-level Library navigation in Settings.
Previews everywhere, and a preview that means something. Every token now shows what it does rather than what it is called: a spacing bar at the width it sets, a corner at the radius it defines, an Ag in the family, size and weight it carries, a swatch of the colour it holds. Change the value and the preview changes with it, before you commit anything — in the editor and in the generated documentation, drawn from the same description so the two cannot disagree.

Every preview is painted by your CSS variable, never by a value resolved behind the scenes. If your tokens.css is broken the preview is visibly broken too, which is the only way a preview can be evidence rather than decoration.

Tokens and components now link to each other. A token page says which components use it — or says plainly that none do, which is a fact worth acting on. A component page says which tokens paint it, which family owns it, and where it may appear. Where an answer cannot be worked out, the page says why instead of showing an empty list.

On a hosted site component previews are now live: the component itself, wearing your system as it stands when somebody opens the page. The folder npx tostada-ui docs writes keeps snapshots and fetches nothing at all — not a preview, not a stylesheet, not a demo avatar — so it still opens from a disk with no network.
See what drifted since hand-off. npx tostada-ui diff old.json new.json compares two exports of your design system and reports every token that moved, every family that was rebound, every rule that was edited — as a page you can read in two minutes, plus complete JSON.

Pair it with a codebase scan (--scan) and it also finds the drift that never touched the library: hardcoded values that your system already defines, with the file and line where each was written. An unchanged library is not a clean bill of health, and the report says so.

It never guesses. Renames appear as a removal and an addition rather than a heuristic pairing; near-miss values are not reported as regressions; and anything one export does not record gets a "Not compared" section instead of silence. See Tracking drift.
The documentation site, hosted. On the hosted plan, your site lives at a stable URL and republishes itself a minute after every save — no command, no upload, no wondering which version someone is looking at. Same pages, same previews, same generator as the free npx tostada-ui docs.

A site that stops updating stays online and keeps everything, with a dated line at the top of every page saying so. That notice is written into the pages, so a year-old site can never quietly look current. See Hosted documentation site.
Your design system, as a website. npx tostada-ui docs — or Export docs site in Dev mode — writes a small static site of your system: rendered component previews wearing your colours, 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 a folder. Open index.html in any browser — no server, no install, nothing to configure. Every link inside is relative, so it works the same double-clicked on a laptop, committed to a repo, or served from a bucket.

It is generated from the library, so it cannot drift from it: there is no page to maintain and no screenshot to retake. See Documentation site.
Your library has a share link. Flip one toggle and it gets a public, read-only URL. Send it to anyone — no account needed — and they see the real thing: your tokens, live component previews, your Do/Don't rules.

Your edit history is never included. It records who changed what, by email address, so publishing it would publish your team's activity to whoever the link reaches. It is absent from what the server sends, not merely hidden.

Revoke per library, reset a link that has travelled too far, or turn sharing off for the whole organisation from Settings → Sharing (admins only). All of it is enforced by the database, so a revoked link stops working for everyone immediately — including anyone who saved the URL. Every dead link looks the same, whatever killed it.

Teammates who need ongoing access are better invited as readers: free, unlimited, and they keep the export bundle. See Sharing your library.
Spread is real. Paste a URL — or upload a saved page — and Spread rebuilds it in your design system, then lists every approximation it made in a report you can hover to inspect. It runs on your own Anthropic key and shows the estimate, in euros, at a checkpoint before anything is spent; you choose there what to keep untouched (logos, maps, embeds). Drag the slider to compare against the original, and download a standalone file with the report inside it.

Three things it deliberately won't do: render a rebuild that came back without its report (you get told which part was missing instead), charge you to rebuild a JavaScript app's empty shell (it detects that and points at file mode), or ask for your login to reach a page behind one — save the rendered page yourself and your credentials never leave your browser.

No key? The /spread skill in Claude Code still does the job with no key and no account, and can crawl a whole site. See Spread.
Tostada has teams now — and local mode didn't change. Sign in at app.tostada-ui.app, name your organisation, invite your crew by email with a role: readers browse and export the hand-off, editors author the system, admins manage the team. Your library auto-saves to your org, and every save also keeps a current copy on your device, so losing connection is a mode rather than an error. If two people save at once, the second one is told who changed it and when, and chooses — instead of silently winning or silently losing. Your first sign-in offers to carry your local library up with you, and leaves the local copy exactly where it is either way.

For everyone running Tostada from the repo: nothing changed, and that is now a test rather than a promise. The open-source build has no path to the cloud code at all — our own suite runs against a build with no server configuration on every commit. Export and import stay in both modes, forever.
Ask AI now actually asks Claude. The token generator on Properties → Primitives makes a real call on your own Anthropic key: describe a brand, review the proposed primitives and re-bindings in a diff, apply it as a single undoable step. The mock responses that used to stand in for this are gone — a canned answer that looks real makes a broken feature indistinguishable from a working one. With no key set, Generate is disabled and every manual control on the page does the same job. Failures say which end went wrong, keep your prompt, and change nothing: a rate limit shows the wait Anthropic asked for and waits for you to click Retry, rather than spending your quota on your behalf. See AI & BYOK and Privacy for where the call goes in each build.
Your scan report, as a page you can walk instead of a document you scroll. A new Reports tab opens the report.json from a Tostada scan: the debt score, an auto-generated Highlights block, every hardcoded colour as a swatch with its usage count, your most-duplicated components, the accessibility findings with their measured contrast ratios, and the Now / Next / Later plan. Click any number to jump to the files behind it. One button exports the whole thing as a PDF. The file is read in your browser — never uploaded, never stored. On a re-scan it also draws a Before / After view of what actually changed. See Scan reports.
A one-command read of how much design debt a codebase is carrying. Point the new tostada-scan at a React + Tailwind repo and it reports what's hardcoded, which components exist in three slightly different versions, and what to fix first — as a debt score plus a Now / Next / Later plan. It is read-only: it makes no network calls, writes only where you tell it to, and never runs any of your code or config, including your Tailwind config. This is a commercial module and is not part of the open-source tostada-ui package.
The open-source line is now drawn in code, not just in a footer. Everything you use today — the editor, tokens, previews, every export, the tostada-ui CLI — is Apache 2.0 and stays that way. The commercial modules (cloud/teams code, the upcoming Spread codemod engine) live in clearly-marked BSL 1.1 trees that convert to Apache 2.0 on a published date. NOTICE carries the authoritative map, and CI now fails the build if a single byte of commercial code reaches the npm package. See Is Tostada open source?
Sizing makes sense now: one dial for spacing, one for corners. Size moved out of the colour map into its own Sizing tab. Set one spacing base (or pick Compact / Comfortable / Spacious) and every padding and gap follows the same rhythm; drag one radius dial and every corner rounds together. Spacing is named by intent — inset (padding), stack (vertical gap), inline (side-by-side gap) — so you know where each value goes; radius is just none / small / medium / full. Add your own steps, intents, or content widths whenever you outgrow the defaults. (Behind a flag: every component can also size itself Fit, Fill, or Fixed with optional min/max bounds and separate horizontal/vertical padding.)
Every component now wears a colour family — and you can re-skin it. Each component is seeded with the family that matches its role (CTAs → Primary, panels → Block, popovers/menus → Block highlight, inputs → App, the nav rail → the new Sidebar family). Pick a different family in Components → a component → Apply family and the live preview recolours instantly — the whole component, composite parts included — while the rest of your UI stays put. Structural components with no colour of their own (separators, spinners, layout wrappers) are intentionally left unthemed.
New Sidebar family. The sidebar/navigation rail now has its own family (surface, text, selected-item tint, divider, focus ring) so it's themeable like any other surface — previously its colours weren't owned by the design system.
Starter themes, a colour picker, and gradients. Primitives are now organised by role ramp (neutral, primary, accent, success, warning, error, info/blue), each a full 50→950 scale. Pick one of four starter themes (Orange, Blue, Purple, Teal) and your whole system recolours in a click. Every swatch opens a proper colour picker (visual + hex), and you can set a value as a solid or a gradient — gradients reference your family colours, so they follow your theme and dark mode automatically. Themes are editable (your tweaks stay with the theme). Existing libraries re-seed to the new role ramps on load.
Colour model moved to families (breaking). The flat semantic + component colour tiers are replaced by editable colour families — surfaces (app, block, block highlight, success/warning/error/info) and components (primary, secondary, tertiary, ghost, destructive). Edit a family once and every component that wears it updates; apply a family to a component and override any part. Existing alpha libraries are reset to the new preset (a backup of your old library is offered for download on first load).
User-facing docs site scaffolded (this site).
Hero grid extended to bleed past 1920px viewports.

2026-05-28 — Developer export: bundle + playground

New Developer page (replaces the Documentation page). Export your design system as a committable design/ bundle, or browse the whole library — tokens, components, principles — in one place.
Export bundle — one click downloads a ZIP: tokens.css, a Tailwind v4 theme.css preset, layout-principles.md, design-system.json, an AGENTS.md your AI coding agent follows, and a README. A tostada.json snapshot rides along for CI.
CLI — npx tostada-ui export regenerates the bundle from tostada.json (auto-found in the repo; --from / --out to override).
Component playground — pick any component, read its do/don't rules, tweak the snippet against a live preview, toggle variants, and copy. Tokens and principles get read-only catalog views with copy-to-clipboard.

2026-05-28 — Layout principles, rebuilt

New Layout principles surface in Library → Properties, preview-first. A live structural preview renders the active principle; edits repaint it within a moment, no save click.
Four principle types: shells, layouts (composed from labelled blocks), overlays (drawer / modal / toast / popover / full-page), and navigation defined per container as ordered nav levels (component + location + rules).
Application tags — every principle carries structured when to use and when NOT to use tags (content-type, has-filters, audience, …) so the Spread and AI agents can match and rule out pages.
Default preset ships with every library (1 shell + its nav + 7 layouts + 4 overlays + a z-index stacking order). Reset to default preset from the header "…" menu.
Block canvas for composing a layout's blocks (add / reorder / edit usage, flex/grid, tags).
Falls back gracefully when the preview-host (:5179) isn't running — the inline editor keeps working.

2026-05-27 — Typography tokens

New Typography section in Library: primitive font-family + font-size tokens, plus 11 semantic roles (typography-heading, typography-body, typography-code, …) that compose them.
Font picker with the bundled Google Fonts catalog (54 families) and system stacks. Loads with display=swap and surfaces an inline error if the network blocks it.
Scale generator computes the xs..3xl size ladder from a base + ratio (defaults 1rem / 1.25). Quick-picks for 1.2, 1.25, 1.333, 1.414, 1.5.
Guarded delete: deleting a primitive that semantic tokens reference opens a reassign modal — pick a replacement before the delete proceeds. The last primitive of either kind (family or size) can't be removed.
tokens.css export now includes typography variables (--font-family-*, --font-size-*, --typography-*-{family,size,weight,line-height,…}).

2026-05-20 — M5.5 post-MVP enhancements

Block picker for layout principles
Component detail page rebuild with per-variant rendering
Variant-aware code snippets
Tokens-used analyzer

2026-05-19 — M0–M5 MVP

Three-tier tokens (primitive · semantic · component)
Layout principles + design rules
Live component previews via sibling Vite app
Documentation export (tokens.css · design-system.md · design-system.json)
BYOK Anthropic key in Settings
Spread (mock pipeline)