Design System v4.4

Product updates

Changelog

New features, improvements, and fixes shipped to Design System Builder.

v4.4

App shell benchmarked against App Blueprint, accessibility and SEO pass

  • NewShell redesign — the topbar, navigation, token editor and footer now follow the App Blueprint design system: shadcn-neutral palette, 52px topbar with version pill, 240px navigation that collapses to an icon rail, inspector-style editor with an edge tab to reopen it, slim app-wide footer, and a dot-grid canvas around the preview.
  • NewMobile shell — navigation and token editor open as off-canvas drawers from a bottom navigation bar, replacing the read-only mobile banner. Every feature now works on phones.
  • NewNavigation filter, Ctrl/⌘ K shortcut for the command palette, and a system-preference default for light/dark theme applied before first paint.
  • ImprovedAccessibility — skip link, semantic landmarks and lists, real buttons for every control, focus rings on every interactive element, focus trapping and return for the settings, confirm and command dialogs, combobox semantics for search, roving tabs in the CSS panel, and text alternatives for modified-token indicators. Text colours meet WCAG AA contrast.
  • ImprovedOn-page SEO — descriptive titles, canonical URLs, Open Graph and Twitter cards with a social image, JSON-LD structured data, robots.txt and sitemap.xml, SVG favicon and touch icon.
  • FixChangelog page referenced a missing favicon and still loaded an analytics script; both removed. Entry titles are now proper headings with machine-readable dates.
  • RemovedNoise texture overlay and the "open on a wider screen" mobile banner.

v4.3

Framework tab CSS output fix on page load

  • FixCSS output panel no longer shows tokens-only on a fresh load when the Framework tab was last active. The panel initialisation now restores the saved tab before rendering CSS, so the correct output appears immediately without needing a second click.

v4.2

CSS panel polish & changelog fixes

  • FixCSS panel header — "Framework" tab text and action buttons were being clipped by overflow:hidden. Title now truncates instead; tabs and buttons are always fully visible.
  • Improved"CSS Output" label shortened to "CSS" — frees space in the compact panel header.
  • FixChangelog page header — mismatched closing tag broke the page layout; version badge corrected from v3 to v4.

v4.1

Full Geist colour palette

  • NewSix new colour scales added to primitives — Purple, Pink, Teal, Cyan, Orange, Yellow — each with full 100–900 steps and light/dark values matching Geist's palette.
  • ImprovedGreen, Red, and Amber scales expanded from 5 sparse steps to full 9-step scales (100–900).
  • FixColour primitives preview was showing only 3 scales — Green and Red were mapped to wrong prefixes (emerald-, rose-) and rendered blank. All 11 scales now display correctly.

v4.0

v4 — Geist-identical styles, token editor redesign & full live sync

  • NewAll exported component styles now match Vercel Geist exactly — 36px button height, 6px radius, black/white focus borders, flat cards, true neutral grays, uppercase table headers.
  • NewToken editor panel rebuilt — double-dash prefix label, moon icon dark toggle, checkerboard colour swatch, 26px compact inputs, modified indicator as left border stripe.
  • ImprovedFull live sync audit — editing any component token (btn-, card-, input-, tab-, etc.) now immediately rerenders the correct preview section via a regex-based component section map.
  • FixDark mode hardcoded values replaced with token vars — toggle thumb, modal shadow, table hover, tabs border, input placeholder, select chevron SVG.
  • FixFluid token resolution — computeTokenValue now receives the full token map so clamp() endpoints that reference token names resolve correctly.
  • FixDark block generation — fluid tokens were incorrectly excluded from the dark override output due to a falsy check on fluidMin.

v3.4

Changelog, class labels & app tooltips

  • NewChangelog page with two-column layout, tagged entries, and full release history.
  • NewComponent section headers now show their CSS class names in muted monospace for quick reference.
  • NewApp header buttons use styled data-tooltip tooltips — replaces slow browser title attributes. Toggle buttons update their label dynamically.
  • ImprovedGetting Started section redesigned with a controls reference grid covering every top-bar button.
  • FixNon-working keyboard shortcut references removed from tooltips and documentation.

v3.3

Git, Cloudflare deployment, favicon & mobile layout

  • NewProject moved to Git — version controlled and pushed to GitHub.
  • NewDeployed to Cloudflare Pages from the repo root — index.html, app.js, style.css served as a static site.
  • NewCustom favicon from brand logo SVG. Full Open Graph and Twitter card meta tags for clean link previews.
  • NewMobile layout — app UI hidden below 1000px, style guide shown alone with a banner and footer.
  • ImprovedStyle guide constrained to 900px max-width and centered. Logo in header is now a reload link.
  • FixPanel toggle desync resolved — nav and editor now share a single sync function so neither clobbers the other.
  • FixHero title italic text no longer clips on the right edge.

v3.2

Colour palette redesign, code tokens & preview polish

  • NewColour primitives redesigned in Geist style — connected horizontal strips with label left and numbered steps.
  • NewCode tokens split into inline and block — each controls colour, font size, line height, padding, radius, background, and border independently.
  • ImprovedRadius and shadow previews rebuilt with a minimal stage layout. Consistent spacing rhythm across all sections.
  • RemovedDuplicate status colours removed from primitives. Hover animation removed from colour swatches.
  • FixPre/block code colour no longer overrides to accent on every render.

v3.1

Fluid type, type-scale token linking & settings

  • NewFluid type tokens reference type scale token names as endpoints — max always matches the actual scale.
  • NewFluid spacing tokens using clamp(). Settings panel exposes min/max viewport breakpoints for all clamp calculations.
  • FixCrash resolved when fluid token endpoints referenced token names instead of raw values.

v3.0

v3 — Geist-inspired redesign & live token editor

  • NewComplete redesign — dark/light mode, three-panel layout (nav, preview, editor), noise texture background.
  • NewLive token editor — add, edit, delete tokens with instant preview and CSS output updates. Zero page refresh.
  • NewCSS output panel with Tokens and Framework tabs, copy to clipboard, and download as file.
  • NewUndo / redo with step badges. Import / export token sets as JSON. Command palette for quick navigation.
  • NewFull component library in the preview — buttons, inputs, badges, alerts, cards, modals, tabs, tooltips, avatars, and more.
  • ExperimentalModular IIFE architecture — TokenStore, CSSEngine, ThemeEngine, PreviewEngine, UI. No build step, no frameworks.

v2.3

Component token controls & framework CSS output

  • NewComponent-level token controls — buttons, inputs, badges, and cards each have dedicated editable tokens for padding, radius, colour, and font size.
  • NewFramework CSS tab — generates utility classes and component styles driven by the active token set.
  • ImprovedIndividual colour tokens can carry separate light and dark values with a per-token toggle.

v2.2

Motion, shadow tokens & visual scale previews

  • NewMotion tokens — duration and easing values with interactive click-to-preview boxes in the style guide.
  • NewShadow tokens from sm to 2xl with live preview and CSS output.
  • ImprovedType scale and spacing sections show visual scale previews, not just raw values.

v2.1

Live CSS output & semantic token mapping

  • NewCSS :root block generated live from all tokens. Dark mode override block auto-generated from tokens with dark values.
  • NewPrimitive → semantic token mapping — component styles reference semantic tokens, never hardcoded values.
  • NewUndo / redo and import / export token sets as JSON.

v2.0

Token-driven live preview

  • NewReplaced static markup with a JS-rendered live preview — every section re-renders instantly when tokens change.
  • NewToken categories introduced — colour, typography, spacing, and radius.
  • ImprovedSingle-file app — no build step, no external dependencies beyond Google Fonts.

v1.0

Initial release — static style guide

  • NewStatic HTML/CSS style guide — colour swatches, type scale, spacing scale, and basic component examples.
  • NewDark / light mode via data-theme attribute. Single file, no dependencies, instant load.