DS Studio
Author a complete Koder Design System — not just a palette — with no code. Fork an existing system or start from a seed, derive all six token families, validate contrast inline, and export a manifest + tokens. Deterministic and client-side: the URL hash carries your whole session.
Entry — seed or fork
Start from a brand seed colour, or fork an existing design system as an editable starting point.
Forking reproduces the source system's seed, kind and selections (components/templates/icons/a11y); imported systems also overlay their published token set.
Derive — six token families
Colour is derived from the seed (HCT, WCAG-aware). Mode and density scale the whole system.
Non-colour seeds — shape, space, type and motion, each editable:
Select — components, templates, icons & a11y
Choose what the design system provides. Full systems author a corpus; look-only systems inherit the official one.
This is a look-only system — it inherits the official corpus. Component and template selection is disabled; only its tokens are authored.
Validate — conformance gate
Every interactive colour pair must meet WCAG 2.2 AA (4.5:1). A system below AA cannot publish as stable.
Export — manifest + tokens
Emit a valid design-system directory: koder.designsystem.toml plus a multi-language token set. Deterministic — the URL replays this exact export.
Ready to publish? The Publish stage hands the exported directory to the Koder Hub.
Publish — to the Koder Hub
Package the exported design system as a kpkg and publish it to the Koder Hub. Choose its Hub category and price; the icon and previews use the exported preview/ assets.
Elevated card
Body text on accent-derived surface. The buttons below show your accent role plus its WCAG-aware on-accent text.
Surface 2
A muted container holding secondary content — typically a section, sub-card, or a list row that doesn't need the full elevation.
Display sample 32
Headline sample 22
Body sample 15 — verify legibility at the small sizes too; this is where contrast bugs hide.
Caption muted 12