01
02
03
04
Put tu brandun lun trabajo.
Design System
Dunun Marke, como Daten.
Erfasst como strukturierte Design-Tokens — kunun Screenshots, kun PDF.
Open studioImport
Tokens.einmal definuncart, como Daten
◆Accent colour
#3a3a40
⛶
Derived scale
Typography
Aa
Inter · 800Display
▢Radius & spacing
Regeln.parun humanoo & máquina
✎Design rules
✓Primary actions use
accent.solid with white text.✓Body copy stays on
surface, minimum contrast AA.✕Never place
text/muted on surface-2.✕No gradients on interactive surfaces.
rules.json
{
"primary": { "bg": "accent.solid" },
"contrast": { "min": "AA" },
"gradients": false
}
Een System,cada clientee.
Aurora
Sans · soft
Aa
Meridian
Serif · sharp
Aa
Halo
Grotesk · pill
Aa
Konsesenz,po predeterminado.
tokens·core·
❖Components
ButtonSave
Input
you@studio.com
Toggle
Callout
Saved to your brand ✓
▤Wireframe
→ Sistema de diseño
Dunun Marke, erfasst como strukturierte Design-Tokens.
01 Design-Tokens
Colour, type, spacing & radius — captured once, never scattered across CSS.
02 Design rules
Die Dos y Don'ts stehen directoo neben den Tokens — legible parun humanooen y Maschinen.
03 Per-client systems
One design system per client — the type & shape change, the tooling never does.
04 Das Ökosystem
Components style themselves from tu tokens; wireframes adopt a system. Consistency, by default.
Aurora
Desplazar
IA
Tu IA, vía MCP
Este es el módulo que mantiene tu IA fiel a la marca. Lee sstm://design/tokens, las reglas y la receta antes de construir — y puede añadir o ajustar tokens con las herramientas de diseño: un rebrand está a una conversación.
Cómo funciona la puerta humana
Design System · Premium — à la carte
Pon Design System
a trabajar.
Tu marca como design tokens estructurados.
Inicio de sesión con Cloudflare · workspace principal gratis