01
02
03
04
Sätt ditt varumärkei arbete.
Designsystem
Ditt varumärke, som data.
Samlat som strukturerade design-tokens — inte skärmdumpar, inte en PDF.
Open studioImport
Tokens.definierade en gång, som data
◆Accent colour
#3a3a40
⛶
Derived scale
Typography
Aa
Inter · 800Display
▢Radius & spacing
Regler.läsbart för människa & maskin
✎Designregler
✓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
}
Ett system,alla kunder.
Aurora
Sans · soft
Aa
Meridian
Serif · sharp
Aa
Halo
Grotesk · pill
Aa
Konsekvens,som standard.
tokens·core·
❖Components
ButtonSave
Input
you@studio.com
Toggle
Callout
Saved to your brand ✓
▤Wireframe
→ Designsystem
Ditt varumärke, samlat som strukturerade design-tokens.
01 Design-tokens
Färg, typografi, spacing & radius — samlat en gång, aldrig utspritt över CSS.
02 Designregler
Gör och gör-inte lever precis intill tokens — läsbara för både människor och maskiner.
03 System per kund
Ett designsystem per kund — typografin & formen ändras, verktygen aldrig.
04 Ekosystemet
Komponenter stylar sig själva från dina tokens; wireframes antar ett system. Konsekvens, som standard.
Aurora
Skrolla
AI
La tua AI, via MCP
Questo è il modulo che mantiene la tua IA fedele al brand. Legge sstm://design/tokens, le regole e la ricetta prima di costruire — e può aggiungere o affinare token con gli strumenti design: un rebrand è a una conversazione di distanza.
Come funziona il gate umano
Design System · Premium — à la carte
Metti Design System
al lavoro.
Il tuo brand in design token strutturati.
Accesso con Cloudflare · workspace di base gratuito