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
8px
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
#fbfaf5
Surface
#ffffff
Aa
Foreground
#14120f
Aa
Accent
#d1541f
CSS output
:root, .light{
--bg:#fbfaf5;
--surface:#ffffff;
--surface-2:#f1ede2;
--fg:#14120f;
--muted:#6f6a60;
--border:rgba(20, 18, 15, 0.12);
--accent:#d1541f;
--accent-soft:rgba(209, 84, 31, 0.10);
}
.dark{
--bg:#0f0e0c;
--surface:#171512;
--surface-2:#211e1a;
--fg:#f7f4ec;
--muted:#a29b8f;
--border:rgba(247, 244, 236, 0.13);
--accent:#f0854a;
--accent-soft:rgba(240, 133, 74, 0.15);
}
:root{--radius:8px;--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;}