Systhema Design
The browser-based design-system generator: workflow, undo, and status.
On this page
Systhema Design is a web-based design-system generator. You configure a project's design — colors, typography, layout, logo & favicon, SEO — in a sidebar, see your choices applied live to realistic, Systhema-powered example pages, and export the result as a Systhema config, Figma tokens, a full project, or an AI-agent handoff. Every export also imports back — so you can leave, work on the design elsewhere (in Figma, in a coded project, with an AI agent), and pick it up again in the editor later.
It is the visual front door to the same token system the rest of Systhema is built on. Where you would normally edit tokens in Figma and round-trip them through the @systhemaui/figma plugin, Systhema Design lets you do the whole "decide what the design system looks like" step in the browser — and it produces the very same artifacts.
The app is itself built with Systhema. The preview surface renders real @systhemaui/next components, so what you see in the editor is what your project ships.
Undo and redoLink to this section
The primary toolbar has Undo and Redo buttons beside the editor-theme selector. The same actions are available from the keyboard: Cmd/Ctrl+Z undoes; Shift+Cmd/Ctrl+Z or Cmd/Ctrl+Y redoes. The shortcuts work while either the editor shell or its preview iframe has focus. Focused text fields keep their native text-editing undo stack.
History keeps the latest 100 design transactions in memory only — your design persists across a reload, but the undo stack starts empty again. One gesture is one transaction even when it changes many values: dragging the custom type-scale ratio, choosing a palette's seeded foundation anchor, or selecting a font can update multiple token, overlay, or metadata leaves and still undo in one step. A new edit after Undo clears the redo branch. Editor/view preferences such as the sidebar width, current page, device, breakpoint, and light/dark chrome are not design history. Reset all is deliberately not undoable because it also purges uploaded font and asset binaries from IndexedDB; confirming it clears the history stack.
The workflowLink to this section
The screen is a split: a configuration sidebar on the left and a live preview on the right. The preview renders inside an isolated frame running Systhema's default tokens, and every edit re-skins it instantly by overwriting Systhema's CSS custom properties — no rebuild, no reload. Because the preview is isolated, your edits only ever affect the preview: the editor's own chrome stays put, styled in a clean dashboard design language so the surface you're configuring reads clearly against it. The left sidebar starts at 405px and is drag-resizable — grab the handle on its right edge to set its width (clamped 220–520px; the width persists across sessions), or double-click the handle to return to 405px — and collapses to give the preview full width (collapsed/expanded state is remembered on refresh).
Two stacked bars sit above the preview. The primary toolbar carries chrome-level controls; the secondary bar below it carries preview-level controls:
| Bar | Control | Options | What it does |
|---|---|---|---|
| Primary | Sidebar | Collapse · Expand | Hides the sidebar for a full-width preview, and brings it back. The choice persists across page refresh. |
| Primary | Editor theme | Auto · Light · Dark | Re-skins the editor chrome only — the dashboard surface you configure against. Auto (the default) follows your device's light/dark preference live; picking Light or Dark overrides it, and the choice is remembered in your browser. It never touches the preview. |
| Primary | Reset all | — | Resets the design (tokens, fonts, brand assets, meta) to defaults and purges uploaded binaries — but keeps your editor preferences — behind a confirm dialog. |
| Primary | Import | — | Opens the Import dialog — bring a previously exported design back in (see Imports). |
| Primary | Export | — | Opens the Export dialog (see below). |
| Secondary | Device | Responsive · Desktop · Tablet · Mobile | On the right side of the bar. Four presets that snap the preview frame to Systhema's reference screen sizes (not the breakpoints): Responsive fills the stage and reflows as it narrows (the default), Desktop is a fixed 1192px (and fills the height), Tablet is 768×1024, Mobile 390×844 — Tablet and Mobile render at a real device height that's used as-is when it fits the window or capped to the available height (minus a little padding) when it doesn't, so they read as a device rectangle rather than a full-height column. Off Responsive the frame floats on a shadowed stage with straight edges, a hairline border, and no rounded corners. You can also free-resize like Chrome DevTools — drag the always-visible bottom-right corner grip, or type an exact W × H into the live pixel readout pinned to the stage's top-right corner (↑/↓ step ±1, Shift ±10); either drops the toggle into a custom size. Click Responsive a second time to unlock free mode: the frame pulls inward with padding so the corner grip is easy to grab. Double-click the grip to snap back to the preset for the current breakpoint. |
| Secondary | View | Pages · Design-system catalog | On the left side of the bar. A grouped <select> with a Pages group (Landing · Typography · Post · Archive) plus a Design System group (the component catalog). Picking any component switches the preview to the single-component explorer. |
| Secondary | Color system | (live modes) | On the left side of the bar. A native <select> listing every visible colorSystem mode (Default, Dark, plus any you add). Sets the preview's data-theme. Independent of editor theme. |
Two independent theme controls. The primary toolbar's Editor theme (Auto/Light/Dark) re-skins the editor chrome by setting data-theme on the shell root, resolved through shell-theme.css (which now ships a dark-chrome block alongside the light default); Auto tracks the device's prefers-color-scheme live, and an explicit Light/Dark pick persists across sessions. The secondary bar's Color system (Default/Dark) sets the colorSystem data-theme on the preview page, bridged into the iframe. The two never affect each other: re-skinning the chrome leaves the preview's colors untouched, and switching the preview's color system leaves the chrome untouched.
The editing breakpoint — which breakpoint's tokens you're editing — lives inside the Typography and Layout sections, next to the values it governs. It is ordered LG → MD → SM (desktop-first) for authoring, while the tokens and generated CSS keep their mobile-first cascade. The preview itself always resolves its live breakpoint from the frame's actual width, so the Device modes double as a way to proof the responsive cascade. In Responsive and custom (free-resized) modes the editing breakpoint auto-syncs to the band the frame's current width falls into (≥1192 → LG, ≥640 → MD, else SM), so the Typography and Layout editors always show the breakpoint you're actually looking at; the three fixed presets pin their own breakpoint.
StatusLink to this section
Systhema Design is in its first iteration. It is deployed at design.systhema.app (opens in new tab); design.syst.ma, design.systhemaui.com, design.systhema.dev and design.systhema.hu all 301-redirect there, preserving path and query string.