Accent theme

Base radius

Accent theme

Base radius

Colour scheme
Components

Theming

Every colour, radius, spacing, and duration a component uses comes from a CSS custom property in @kernelui/styles — there's no per-component theme prop, no config file. Override a token on :root (or on any container, for scoped theming) and it reaches every component reading it, immediately, including whichever accent and radius you've picked from the theme menu in this site's own header.

@import "@kernelui/styles";

:root {
  --kernel-hue-accent: 260;      /* → every accent shade re-hues */
  --kernel-radius-base: 1.25rem; /* → every corner re-rounds */
  --kernel-space-unit: 0.25rem;  /* → every gap and padding rescales */
}

Colour scale

Colours follow Radix Colors' scale model: a 12-step ramp per role (accent, gray, danger, success, warning), generated in OKLCH from one hue and one chroma rather than 12 hand-picked swatches. Every step has one fixed job, so choosing a colour is choosing a step, not guessing a shade:

--kernel-accent-1   through -2   backgrounds
--kernel-accent-3   through -5   component background (rest / hover / pressed)
--kernel-accent-6   through -8   borders (static / interactive / hover)
--kernel-accent-9   through -10  solid fill (normal / hover)
--kernel-accent-11  through -12  text (low-contrast / high-contrast)

Components never read a raw scale step directly — they read semantic aliases (--kernel-color-accent, --kernel-color-border, --kernel-color-text-muted, and similar) that point at a specific step. Change --kernel-hue-accent and every alias downstream re-hues at once.

Accent presets

--kernel-hue-accent reshades the accent scale with one shared lightness/chroma curve across every hue — close, but not individually calibrated per hue. For a curated, gamut-checked alternative, seven named presets (amber, blue, green, red, violet, orange, teal) ship as importable stylesheets, each hand-checked for the punchiest chroma that still renders in sRGB at every step:

<html data-kernel-accent="violet">

This is exactly what the theme menu in the header writes when you pick an accent swatch — a data-kernel-accent attribute on <html>, persisted to localStorage so it survives navigation.

Shape

One radius token, --kernel-radius-base, drives every corner on the site. Components read a semantic tier — --kernel-radius-control for standalone controls (buttons, inputs), --kernel-radius-container and --kernel-radius-sheet for surfaces that wrap them — and those container tiers are generated as --kernel-radius-base + that container's own padding, so a button nested inside a card shares a concentric corner with it instead of just looking independently rounded.

Space

Every gap and padding is a multiple of one unit, --kernel-space-unit (--kernel-space-1 through --kernel-space-12). Changing the unit rescales the entire site's density at once, rather than each component picking its own gap value.

Type and motion

--kernel-font-sans and --kernel-font-mono fall through to the system font stack unless you also load the named webfonts yourself — the package never forces a font download. --kernel-duration-fast/base/slow and --kernel-ease-spring/out/in drive every transition the same way: change the curve once, every hover, open, and close animation on the page moves the same way.