Theming

Seven colours, three fonts, a radius and a base size. Change them and every block follows.

Steps

Describe your style

A Style is plain data. Colours are authored for one mode; add altColors for the other or let them be derived.

const style = {
  mode: 'light',
  colors: { canvas: '#faf9f7', surface: '#ffffff', ink: '#17171a', muted: '#6b6b75',
            line: '#e8e6e1', accent: '#1c6ee0', accentFg: '#ffffff' },
  fonts: { display: 'Geist', sans: 'Geist', mono: 'Geist Mono' },
  radius: 8, size: 16,
};

2
Pass it to Theme
Theme writes the palette, font stacks, radius and size as CSS variables. Shades and tones are derived in CSS.
```
<Theme theme="brand" style={style}>…</Theme>
```
3
Use the tokens in your own code
Every Tailwind name is kh- prefixed, so it never collides with yours.
```
<div className="rounded-kh-lg border border-kh-line bg-kh-surface p-6 text-kh-ink">…</div>
```

What changes with a style

Blocks read tokens only, never raw colours, so a style is the whole visual change.

Contrast is kept

Keep ink on canvas and accent text on accent at 4.5:1 or more. Derived palettes are walked until they meet that.

Tones follow

Each section can sit on a default, muted, inverse or accent surface. Tones read the palette, so they follow your style too.

Wireframe

theme="wireframe" swaps everything for greys, square corners and no shadows: the same layout, for planning.

Copy for AI