Nine palettes.
One hue apart.
Every palette here is the same lightness and chroma ladder at a different hue. That is the whole system, and it is why a theme change cannot break the hierarchy, and why dark mode stops being a second design.
blueprintoklch(55.40%0.140250.6)
Pick one. Watch what doesn’t change.
Not swatches. These are the site’s own components, imported and rendered in whichever palette is live. The nav above this page is one of them and is deliberately not copied in here, because a copy would drift from the thing it is arguing about.
Turning rough ideas into products people use
Eight years across enterprise data tools and one consumer turnaround.
2.3 → 4.2
What the boAt Crest redesign moved, drawn in whichever palette is pressed.
store ratingOne surface, three personas
Analysts, leads and admins reading the same data at different depths.
A palette that only recolours a card proves nothing about the system.
All 32 pairs for blueprint
Measured at build from blueprint’s own tokens. A palette on the other ground checks a different set, because the pairs follow the ground the design actually draws.
Try it across the site
Applies blueprint to every page for 30 minutes. It expires on its own, and an exit control follows you until it does. Nothing is published.
The kit.
Every part here is imported from the live site and rendered in whichever palette is live. Press one for the roles it reads and how to use it.
A part is a shipped public component that mounts on its own. That leaves out page-level sections, the fixed nav and reading indicator, and everything under the editor, which is frozen against the theme and so would sit here not moving.
Section heading
Shipping on the public site today, in every palette on this page.
Turning rough ideas into products people use
Eight years across enterprise data tools and one consumer turnaround.
<SectionHeading index="01" title="…" subtext="…" />
How to use it.
Role tokens in OKLCH, with the measured contrast riding inside the block as a comment.
Paste the block.
Everything is a role, so your components never name a colour. Swapping a theme touches this block and nothing else.
Change one number.
Move the hue and the whole palette moves with it. Lightness and chroma are held, so the contrast you measured still holds.
Dark mode is the same block.
Mirror the lightness values around the midpoint and leave hue alone. The identity survives and there is no second palette to maintain.
Check it. Don't trust it.
OKLCH is an authoring model, not a contrast certificate. Perceptual lightness and WCAG luminance are different measures. The 32 pairs above are computed at build from these tokens. Run the same check on yours.
The contrast report rides inside the block as a comment, so the figures travel with the tokens.
/*
blueprint — a palette from akshitas.com
dark ground. Its counterpart is drawing-office.
Values are OKLCH, as authored. Lightness carries the hierarchy, chroma the energy,
hue the identity — so retheming this block is a change to the third number.
measured contrast, 32 pairs the design actually draws
ink-800 on cream-50 14.86
ink-800 on cream-100 14.09
ink-600 on cream-50 8.86
ink-600 on cream-100 8.40
text-primary on band-dark 12.67
text-secondary on band-dark 7.08
text-primary on surface 11.03
text-secondary on surface 6.17
text-subtle on surface 5.77
text-subtle on band-dark 6.62
text-subtle on cream-200 5.30
reference on band-dark 7.86
reference on surface 6.85
accent-text on surface 11.42
accent-text on surface-well 12.26
accent-text on band-dark 13.11
on-dark on band-dark 12.67
on-dark-muted on band-dark 7.08
on-dark-quote on band-dark 13.11
accent-on-dark on band-dark 13.11
text-body on band-dark 7.93
on-accent on accent 13.11
accent-500 on cream-50 4.61
accent-500 on band-dark 3.04
accent-500 on cream-100 (non-text) 4.37
ink-400 on cream-50 (non-text) 3.44
ink-400 on cream-100 (non-text) 3.26
ink-400 on cream-200 (non-text) 3.26
ground step cream-50 / cream-100 1.05
ground step cream-100 / cream-200 10.65
ground step cream-200 / cream-300 8.14
cream-300 on band-dark 10.16
*/
:root {
--color-accent: oklch(96.29% 0.018 250.6);
--color-accent-500: oklch(55.40% 0.140 250.6);
--color-accent-600: oklch(48.00% 0.120 250.0);
--color-accent-on-dark: oklch(96.29% 0.018 250.6);
--color-accent-text: oklch(96.29% 0.018 250.6);
--color-background: oklch(28.03% 0.063 251.8);
--color-band-dark: oklch(28.03% 0.063 251.8);
--color-border: oklch(38.7% 0.055 252.1);
--color-bounce: oklch(99.50% 0.003 248.0);
--color-canvas: oklch(92.00% 0.009 248.0);
--color-case-study-sand: oklch(28.03% 0.063 251.8);
--color-cream-100: oklch(96.80% 0.009 248.0);
--color-cream-200: oklch(34.1% 0.058 250.7);
--color-cream-300: oklch(88.00% 0.009 249.0);
--color-cream-50: oklch(98.50% 0.007 248.0);
--color-danger-600: oklch(45.0% 0.16 25);
--color-draft-600: oklch(48.0% 0.100 75);
--color-etch: oklch(95.14% 0.014 248.0);
--color-glow-paper: oklch(0.63 0.100 250.6 / 0.20);
--color-glow-web: oklch(48.00% 0.083 250.0);
--color-ink-200: oklch(80.00% 0.010 248.0);
--color-ink-400: oklch(62.50% 0.012 249.7);
--color-ink-600: oklch(40.00% 0.013 250.8);
--color-ink-800: oklch(26.20% 0.015 251.5);
--color-ink-950: oklch(15.00% 0.015 251.8);
--color-on-accent: oklch(28.03% 0.063 251.8);
--color-on-dark: oklch(95.14% 0.014 248.0);
--color-on-dark-muted: oklch(77.03% 0.045 245.3);
--color-on-dark-quote: oklch(96.29% 0.018 250.6);
--color-reference: oklch(79.94% 0.084 244.2);
--color-rule: oklch(58.28% 0.093 249.7);
--color-smoke-1: oklch(0.84 0.008 250 / 0.74);
--color-smoke-2: oklch(0.90 0.007 250 / 0.74);
--color-smoke-3: oklch(0.97 0.005 248 / 0.74);
--color-smoke-4: oklch(0.87 0.007 250 / 0.74);
--color-success-50: oklch(94.5% 0.030 145);
--color-success-700: oklch(46.0% 0.075 145);
--color-surface: oklch(32.0% 0.061 252.5);
--color-surface-well: oklch(30.0% 0.062 252.1);
--color-text-body: oklch(80.4% 0.039 245.9);
--color-text-lead: oklch(86.9% 0.028 248.2);
--color-text-primary: oklch(95.14% 0.014 248.0);
--color-text-secondary: oklch(77.03% 0.045 245.3);
--color-text-subtle: oklch(75.1% 0.046 245.3);
--color-vessel-capsule: oklch(80.50% 0.010 248.0);
--color-vessel-glass: oklch(94.50% 0.020 248.0);
--color-vessel-ink: oklch(16.00% 0.014 251.8);
--color-vessel-pearl: oklch(96.50% 0.009 248.0);
--color-vessel-shadow: oklch(92.50% 0.016 248.0);
--color-vessel-wave: oklch(93.50% 0.013 248.0);
}
/* sRGB fallback, GENERATED from the values above — do not edit it by hand, and do not treat it
as the palette. It exists for browsers with no oklch() support and is otherwise unread. The
eight-digit entries carry the alpha the six-digit form would silently drop. */
@supports not (color: oklch(0% 0 0)) {
:root {
--color-accent: #eaf4ff;
--color-accent-500: #2375c1;
--color-accent-600: #1a609e;
--color-accent-on-dark: #eaf4ff;
--color-accent-text: #eaf4ff;
--color-background: #0e2a47;
--color-band-dark: #0e2a47;
--color-border: #2e4661;
--color-bounce: #fcfeff;
--color-canvas: #e0e5ea;
--color-case-study-sand: #0e2a47;
--color-cream-100: #f0f5fa;
--color-cream-200: #203a55;
--color-cream-300: #d3d8dd;
--color-cream-50: #f7fbff;
--color-danger-600: #9b1e22;
--color-draft-600: #7e5403;
--color-etch: #e8f0f8;
--color-glow-paper: #598dc433;
--color-glow-web: #37618b;
--color-ink-200: #b9bec4;
--color-ink-400: #82888f;
--color-ink-600: #43484f;
--color-ink-800: #1f252c;
--color-ink-950: #070c11;
--color-on-accent: #0e2a47;
--color-on-dark: #e8f0f8;
--color-on-dark-muted: #9db8d0;
--color-on-dark-quote: #eaf4ff;
--color-reference: #8fc4f0;
--color-rule: #4e7fb0;
--color-smoke-1: #c7cbd0bd;
--color-smoke-2: #dbdee3bd;
--color-smoke-3: #f2f5f8bd;
--color-smoke-4: #d1d5d9bd;
--color-success-50: #e1f3e1;
--color-success-700: #3c633d;
--color-surface: #1a3451;
--color-surface-well: #142f4c;
--color-text-body: #abc2d7;
--color-text-lead: #c6d6e6;
--color-text-primary: #e8f0f8;
--color-text-secondary: #9db8d0;
--color-text-subtle: #97b2ca;
--color-vessel-capsule: #bac0c6;
--color-vessel-glass: #e3eefa;
--color-vessel-ink: #090e13;
--color-vessel-pearl: #eff4f9;
--color-vessel-shadow: #dee7f1;
--color-vessel-wave: #e3eaf2;
}
}
Free to use. No attribution needed.