The surface stays calm.
Brand color directs attention while neutral space carries the experience.
Interactive blueprint
Build a palette from the brand, not a trend.
Add up to three identity colors. The studio builds a perceptual tonal system, maps each theme independently, checks contrast, and prepares developer-ready exports.
Tonal system
Perceptual steps generated in OKLCH
50#ffd6bf
100#ffc9b2
200#ffb39b
300#ff9279
400#f16d54
500#d3462e
600#b2280f
700#8f0800
800#6d0000
900#4c0000
950#330000
New identity
Live interface preview
:root {
--brand-50: #ffd6bf;
--brand-100: #ffc9b2;
--brand-200: #ffb39b;
--brand-300: #ff9279;
--brand-400: #f16d54;
--brand-500: #d3462e;
--brand-600: #b2280f;
--brand-700: #8f0800;
--brand-800: #6d0000;
--brand-900: #4c0000;
--brand-950: #330000;
--background: #ffffff;
--foreground: #18181b;
--surface: #ffffff;
--surface-raised: #ffffff;
--border: #e4e4e7;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--accent: #b2280f;
--accent-hover: #8f0800;
--accent-soft: #ffd6bf;
--accent-ink: #ffffff;
}
[data-theme="dark"] {
--background: #09090b;
--foreground: #fafafa;
--surface: #18181b;
--surface-raised: #202024;
--border: #303036;
--muted: #27272a;
--muted-foreground: #a1a1aa;
--accent: #f16d54;
--accent-hover: #ff9279;
--accent-soft: #330000;
--accent-ink: #171719;
}