Skip to content
KaufmannCommerce UI
Foundations · v0.1⌘ K

Kaufmann Commerce UI / Foundation

Theme

A procedural OKLCH colour engine: pick a hue, a mode and a depth, and every token in the system is re-derived from twelve-step perceptual ramps.

Four axes

The palette is not a list of colours any more. It is the output of a generator that takes three seeds — background, neutral, accent — finds the two nearest reference ramps in a 29-scale OKLCH dataset, interpolates between them by perceptual distance, re-chromas the result onto your seed, and then re-seats the whole lightness progression onto the background you asked for.

That last step is what makes depth work: the same ramp can sit on paper at L 0.995 or on near-black at L 0.13 and stay coherent, because it is rebuilt rather than dimmed.

Server-rendered by defaultThe generator runs at build time. The theme is inlined into the document, so the first paint is already correct — no flash, no JavaScript, no round trip. Switching is one attribute on <html>.

Theme

Hue

Overrides the preset's accent. Everything that derives from it follows — including the focus ring, which is the same token.

39°

Mode

Depth

How far the ground sits from the extreme. The whole ramp moves with it.

Accent ramp

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

Neutral ramp

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

What follows

New
GezähltBeobachtetUngeklärt

What stays put

Two things deliberately do not follow the brand hue. Status colours — success, warning, error, info — are pinned: a shop whose "sold out" drifted toward its brand hue would be unreadable, so meanings keep their anchors and only lift in dark mode, where the same colour reads heavier. The support accents, spruce and gold, are stated by each preset rather than derived, because their job is depth and the generator's solid step is a vivid button colour.

Ink is the third adjustment. Radix's step 12 is a true high-contrast text colour; Kaufmann's ink is softer by constitution (§7.3), and that softness is most of why these pages read as paper rather than as a dashboard. Each preset says how hard its ink should be.

Measured, not assertedGenerated "Kaufmann Paper" reproduces the hand-authored palette to a mean ΔE of 0.097 — worst case 0.255 on a border — where ~0.02 is the just-noticeable threshold and 1.0 is a clearly different colour. Clay, the three status colours and both support accents are exact.
Astro
import { themeSheet, themeAttributes } from "@kaufmann/ui/theme";

// Build time: generate exactly the combinations this page can switch to.
const generated = themeSheet(["paper"], ["default"]);   // ~6 KB, light + dark
const attrs = themeAttributes("paper", "light", "default");
---
<html {...attrs}>
  <head><style set:html={generated} /></head>
Astro
// Switching costs one attribute. No JavaScript required for it to be
// correct on first paint — the block is already in the document.
document.documentElement.dataset.mode = "dark";

// Or generate a theme that was never pre-rendered, for arbitrary hues:
import { themeCss } from "@kaufmann/ui/theme";
style.textContent = themeCss({ hue: 212, mode: "dark", depth: "deep" },
                             { selector: ":root" });