Documentation

Theming

Every component reads from a small set of semantic CSS variables — swap the values, and the whole kit follows, in both light and graphite-dark mode.

How it works

Tokens are plain CSS custom properties defined once on :root and again under.dark, then mapped into Tailwind utilities via a single @theme inline block. Surface hierarchy and radius tiers follow the same editorial density as Data Table Pro; the rose accent remains the one deliberate brand difference.

Typography

The site uses IBM Plex Sans (400–700) for UI copy and IBM Plex Mono (500) for code, filenames, and install commands — loaded via @fontsource in the root layout. Component source itself stays font-agnostic; only the documentation site applies this stack.

Radius tiers

Instead of a single global radius, the kit uses tiered values aligned with compact product UI:

--radius-xs · 4px — Brand tags, tiny badges

--radius-sm · 6px — Skip links, code blocks

--radius-md · 8px — Buttons, inputs, nav links

--radius-lg · 10px — Panels, dropdown menus, cards

--radius-xl · 16px — Browser frame, hero chrome

--radius-2xl · 18px — Heavy CTA sections

Token reference

Surfaces

--background

--surface

--surface-2

--foreground

--muted

--muted-foreground

Borders & focus

--border

--border-strong

--ring

Accent (rose)

--primary

--primary-foreground

--primary-soft

--primary-soft-foreground

Semantic

--destructive

--success

--warning

--accent

Code & overlays

--code-bg

--code-foreground

--code-muted

--popover

--card

Rose accent

The accent is rose-600 in light mode (#e11d48) and rose-400 in dark mode (#fb7185) for sufficient contrast against graphite surfaces. Every focus ring, primary button, and selection highlight derives from --primary and --ring.

Customizing

Copy the token block from this site's app/globals.css and adjust the hex values — no rebuild step or config file needed since Tailwind v4 reads tokens straight from CSS.

app/globals.css

:root {
  --primary: #e11d48;
  --ring: #e11d48;
  --radius-md: 8px;
  /* …swap for your own accent and radius tiers */
}

.dark {
  --primary: #fb7185;
  --ring: #fb7185;
}

Dark mode toggle

The header's toggle button calls useTheme() from next-themes. Any component in your app can do the same — no additional setup beyond the ThemeProvider already wrapping the root layout.