--- title: "Systhema Design" description: "The browser-based design-system generator: workflow, undo, and status." requested_language: fr language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/fr/next/design/systhema-design version: unreleased (main) docs_index: https://docs.systhema.app/fr/next/llms.txt --- > This page isn't translated yet. Showing English. 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`](https://docs.systhema.app/fr/next/design/figma.md) 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`](https://docs.systhema.app/fr/next/nextjs.md) components, so what you see in the editor is what your project ships. > [!TIP] > **Prefer the terminal?** The same platform exists as a CLI — [`systhema design`](https://docs.systhema.app/fr/next/design/systhema-design/cli.md): every editing area, the same four export targets, full round-trip with this app's sessions, plus applying the design directly into a project. Built for AI agents as much as for humans. > [!NOTE] > **Local-first.** Everything you do is stored in your browser — `localStorage` for the editor state plus IndexedDB for binary uploads (logos, fonts, OG images). Nothing is sent to a server. Each control has an inline reset icon (↺) to revert just that value; the per-ramp reset is a two-click armed confirm (a guard against wiping all 11 stops by accident); and the toolbar's single **Reset all** resets the whole _design_ — token edits, uploaded fonts, brand assets, and meta — back to Systhema's defaults and purges the uploaded binaries from IndexedDB, while deliberately keeping your editor preferences (sidebar width, light/dark chrome, current view, device, open sidebar sections, and colour format). It confirms first via an in-app dialog (not `window.confirm`, which blocks automation and can't follow the chrome theme). ## Undo and redo 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 workflow 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](https://docs.systhema.app/fr/next/design/systhema-design/exports-and-imports.md#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 `` 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. ## Status Systhema Design is in its first iteration. It is deployed at **[design.systhema.app](https://design.systhema.app)**; `design.syst.ma`, `design.systhemaui.com`, `design.systhema.dev` and `design.systhema.hu` all 301-redirect there, preserving path and query string.