Studio · Design tokens playground
Tokens, live.
Every value here writes to localStorage and re-renders the portfolio in real time. Unlisted route — the designer's back room, not part of the case-study reel.
Colors
8 tokens
Radius
10px
Type
Sora · Manrope
Density
Balanced
01
Presets
02
Colors
03
Radius
04
Type
Aa
Aa
05
Density
Preview · rendered with your tokens
Design is the ground truth of the product.
Body copy in Manrope. Every color, radius, and rhythm below is live from the token store. Change a value on the left and the entire portfolio follows.
Chip / tag
Background
#f6f9fc
Surface
#ffffff
Aa
Foreground
#0a2540
Aa
Accent
#635bff
CSS output
:root, .light{
--bg:#f6f9fc;
--surface:#ffffff;
--surface-2:#eef2f7;
--fg:#0a2540;
--muted:#425466;
--border:rgba(10, 37, 64, 0.10);
--accent:#635bff;
--accent-soft:rgba(99, 91, 255, 0.10);
}
.dark{
--bg:#0a0f1f;
--surface:#101830;
--surface-2:#182140;
--fg:#f5f7fb;
--muted:#8a94ad;
--border:rgba(245, 247, 251, 0.10);
--accent:#8b85ff;
--accent-soft:rgba(139, 133, 255, 0.16);
}
:root{--radius:10px;--density-padding:1.75rem;}
body{font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;}
h1,h2,h3,h4{font-family:"Sora",ui-sans-serif,system-ui,sans-serif;}