What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';/color
This page embeds the color theme gallery: home-layout previews with OKLCH tokens applied on top of jonplummer.css. The live embed files live under src/_includes/partials/ and src/assets/css/; they refresh when you run pnpm run build or pnpm run dev. For generator flags and a standalone copy, run pnpm run color-gallery and open scripts/color-explore/output/index.html from the repo.
Hue reference
APCA ≥ 60 · min Lc sRGB 60 · P3 61
0°
Shifts each oklch() hue; Copy tokens stays the build snapshot.
Light
Jon Plummer
Today I Learned
Preview main column (Light, hue-0-L)
How product trios survive reorgs — remaindered link blurb.
Dark
Jon Plummer
Today I Learned
Preview main column (Dark, hue-0-D)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
View CSS tokens
/* Hue reference — Hue 0° · preview hue rotation +0° (Copy tokens = APCA-tuned build snapshot): OKLCH (sRGB gamut), exported from this gallery build (APCA-tuned to ≥ 60 Lc on the sRGB path). light-dark(light, dark) picks the value matching the user's color scheme. */ color-scheme: light dark; --text-color: light-dark(oklch(22% 0.04 0deg), oklch(93% 0.02 0deg)); --text-color-light: light-dark(oklch(42% 0.04 0deg), oklch(79.2% 0.028 0deg)); --border-color: light-dark(oklch(80% 0.033 0deg), oklch(40% 0.066 0deg)); --background-color: light-dark(oklch(91% 0.0605 0deg), oklch(15% 0.0825 0deg)); --content-background-color: light-dark(oklch(99.4% 0.022 0deg), oklch(27% 0.099 0deg)); --link-color: light-dark(oklch(50% 0.19 0deg), oklch(80.8% 0.1425 0deg)); --link-hover-color: light-dark(oklch(44% 0.19 38deg), oklch(82% 0.1235 38deg)); --link-visited-color: light-dark(oklch(38% 0.1045 318deg), oklch(79.2% 0.0855 318deg)); --link-active-color: light-dark(oklch(48% 0.171 145deg), oklch(78% 0.133 145deg));
Dieter Rams-inspired
APCA ≥ 60 · min Lc sRGB 61 · P3 61
Light
Jon Plummer
Today I Learned
Preview main column (Light, dr-combo-L)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
Dark
Jon Plummer
Today I Learned
Preview main column (Dark, dr-combo-D)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
View CSS tokens
/* Dieter Rams-inspired — site preset Default: OKLCH (sRGB gamut), exported from this gallery build (APCA-tuned to ≥ 60 Lc on the sRGB path). light-dark(light, dark) picks the value matching the user's color scheme. */ color-scheme: light dark; --text-color: light-dark(oklch(28.5% 0 0deg), oklch(93% 0 0deg)); --text-color-light: light-dark(oklch(46.8% 0 0deg), oklch(78% 0 0deg)); --border-color: light-dark(oklch(85.8% 0 0deg), oklch(38% 0 0deg)); --background-color: light-dark(oklch(87.7% 0.0098 140.51deg), oklch(12% 0.0098 140.51deg)); --content-background-color: light-dark(oklch(100% 0 0deg), oklch(20% 0 0deg)); --link-color: light-dark(oklch(58.6% 0.1911 27.41deg), oklch(86.6% 0.1911 27.41deg)); --link-hover-color: light-dark(oklch(57.7% 0.1348 59.17deg), oklch(85.7% 0.1348 59.17deg)); --link-visited-color: light-dark(oklch(42.2% 0.0332 63.17deg), oklch(77.4% 0.0332 63.17deg)); --link-active-color: light-dark(oklch(48.1% 0.1152 154.58deg), oklch(76.1% 0.1152 154.58deg));
Harmony lab
9 harmony recipes · L/C from APCA-tuned export (≥ 60 Lc at build)Recipe, hue, and angle sliders (L/C from the APCA-tuned export). themes.json matches this selector after hide-failed.
0°
28°
28°
12°
Light
Jon Plummer
Today I Learned
Preview main column (Light, harmony-lab-L)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
Dark
Jon Plummer
Today I Learned
Preview main column (Dark, harmony-lab-D)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
View CSS tokens
/* Harmony lab — recipe Monochromatic · base hue 0° · hue rotation +0°: OKLCH (sRGB gamut), exported from this gallery build (APCA-tuned to ≥ 60 Lc on the sRGB path). light-dark(light, dark) picks the value matching the user's color scheme. */ color-scheme: light dark; --text-color: light-dark(oklch(22% 0.04 0deg), oklch(93% 0.02 0deg)); --text-color-light: light-dark(oklch(42% 0.04 0deg), oklch(79.2% 0.028 0deg)); --border-color: light-dark(oklch(80% 0.033 0deg), oklch(40% 0.066 0deg)); --background-color: light-dark(oklch(91% 0.0605 0deg), oklch(15% 0.0825 0deg)); --content-background-color: light-dark(oklch(99.4% 0.022 0deg), oklch(27% 0.099 0deg)); --link-color: light-dark(oklch(50% 0.19 0deg), oklch(80.8% 0.1425 0deg)); --link-hover-color: light-dark(oklch(44% 0.1805 0deg), oklch(82% 0.133 0deg)); --link-visited-color: light-dark(oklch(38% 0.1045 0deg), oklch(79.2% 0.0855 0deg)); --link-active-color: light-dark(oklch(48% 0.1672 0deg), oklch(81.6% 0.1425 0deg));
Black & white
APCA ≥ 60 · min Lc sRGB 61 · P3 61
Light
Jon Plummer
Today I Learned
Preview main column (Light, bw-combo-L)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
Dark
Jon Plummer
Today I Learned
Preview main column (Dark, bw-combo-D)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
View CSS tokens
/* Black & white — preset Strict: OKLCH (sRGB gamut), exported from this gallery build (APCA-tuned to ≥ 60 Lc on the sRGB path). light-dark(light, dark) picks the value matching the user's color scheme. */ color-scheme: light dark; --text-color: light-dark(oklch(6% 0 0deg), oklch(96% 0 0deg)); --text-color-light: light-dark(oklch(40% 0 0deg), oklch(77.2% 0 0deg)); --border-color: light-dark(oklch(82% 0 0deg), oklch(38% 0 0deg)); --background-color: light-dark(oklch(93% 0 0deg), oklch(4% 0 0deg)); --content-background-color: light-dark(oklch(100% 0 0deg), oklch(20% 0 0deg)); --link-color: light-dark(oklch(10% 0 0deg), oklch(90% 0 0deg)); --link-hover-color: light-dark(oklch(2% 0 0deg), oklch(98% 0 0deg)); --link-visited-color: light-dark(oklch(32% 0 0deg), oklch(77.6% 0 0deg)); --link-active-color: light-dark(oklch(16% 0 0deg), oklch(84% 0 0deg));
Wild
APCA ≥ 60 · min Lc sRGB 60 · P3 60
Light
Jon Plummer
Today I Learned
Preview main column (Light, wild-combo-L)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
Dark
Jon Plummer
Today I Learned
Preview main column (Dark, wild-combo-D)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
View CSS tokens
/* Wild — scheme Wild · complementary (260°): OKLCH (sRGB gamut), exported from this gallery build (APCA-tuned to ≥ 60 Lc on the sRGB path). light-dark(light, dark) picks the value matching the user's color scheme. */ color-scheme: light dark; --text-color: light-dark(oklch(15.5% 0.0207 259.7deg), oklch(92.4% 0.0309 259.7deg)); --text-color-light: light-dark(oklch(38.1% 0.043 259.7deg), oklch(79.1% 0.034 259.7deg)); --border-color: light-dark(oklch(78% 0.0309 259.7deg), oklch(40% 0.0516 259.7deg)); --background-color: light-dark(oklch(91.7% 0.0516 259.7deg), oklch(15.3% 0.0619 259.7deg)); --content-background-color: light-dark(oklch(97.9% 0.0258 259.7deg), oklch(26.8% 0.0722 259.7deg)); --link-color: light-dark(oklch(45% 0.27 79.7deg), oklch(78% 0.2295 79.7deg)); --link-hover-color: light-dark(oklch(38% 0.2835 104.7deg), oklch(80% 0.2025 109.7deg)); --link-visited-color: light-dark(oklch(40% 0.1485 349.7deg), oklch(80% 0.1215 354.7deg)); --link-active-color: light-dark(oklch(48% 0.2295 314.7deg), oklch(80.8% 0.1755 319.7deg));
Terminal-inspired
APCA ≥ 60 · min Lc sRGB 60 · P3 61
Light
Jon Plummer
Today I Learned
Preview main column (Light, terminal-combo-L)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
Dark
Jon Plummer
Today I Learned
Preview main column (Dark, terminal-combo-D)
What we owe junior designers in review
Feedback works when it is specific and grounded in examples. Kind delivery helps the second sentence read like a real lede.
const tone = 'curious';How product trios survive reorgs — remaindered link blurb.
View CSS tokens
/* Terminal-inspired — scheme Solarized (inspired): OKLCH (sRGB gamut), exported from this gallery build (APCA-tuned to ≥ 60 Lc on the sRGB path). light-dark(light, dark) picks the value matching the user's color scheme. */ color-scheme: light dark; --text-color: light-dark(oklch(52.3% 0.0283 219.14deg), oklch(79.8% 0.0197 205.26deg)); --text-color-light: light-dark(oklch(56.8% 0.0285 221.9deg), oklch(79.4% 0.0159 196.79deg)); --border-color: light-dark(oklch(69.8% 0.0159 196.79deg), oklch(52.3% 0.0283 219.14deg)); --background-color: light-dark(oklch(93.1% 0.026 92.4deg), oklch(26.7% 0.0486 219.82deg)); --content-background-color: light-dark(oklch(97.4% 0.0261 90.1deg), oklch(30.9% 0.0518 219.65deg)); --link-color: light-dark(oklch(60.3% 0.1394 244.93deg), oklch(79.5% 0.1394 244.93deg)); --link-hover-color: light-dark(oklch(58.1% 0.1732 39.5deg), oklch(78.8% 0.1019 187.38deg)); --link-visited-color: light-dark(oklch(58.2% 0.1261 279.1deg), oklch(81% 0.1261 279.1deg)); --link-active-color: light-dark(oklch(59.6% 0.1508 118.6deg), oklch(78.8% 0.1508 118.6deg));