Theming

kraft-ui uses Tailwind CSS v4's @theme block. Override any token to match your brand — zero config changes needed.

Design Token Catalog

All tokens are CSS custom properties defined in tailwind.css. Override only what you need.

tailwind.css

@import "tailwindcss";

@theme {
  /* ── Brand — change this to match your product ────── */
  --color-brand-500: oklch(55% 0.185 260);   /* primary */
  --color-brand-600: oklch(46% 0.175 260);   /* hover */
  --color-brand-700: oklch(38% 0.155 260);   /* active */
  --color-brand-50:  oklch(97.5% 0.012 260); /* light tints */
  --color-brand-100: oklch(94% 0.030 260);

  /* ── Surface & border ─────────────────────────────── */
  --color-surface:        white;
  --color-surface-muted:  oklch(97.5% 0 0);
  --color-surface-subtle: oklch(95% 0 0);
  --color-border:         oklch(88% 0 0);

  /* ── Text ─────────────────────────────────────────── */
  --color-text-primary:   oklch(12% 0 0);
  --color-text-secondary: oklch(42% 0 0);
  --color-text-muted:     oklch(62% 0 0);

  /* ── Semantic ─────────────────────────────────────── */
  --color-success-500: oklch(55% 0.18 155);
  --color-warning-500: oklch(72% 0.20 85);
  --color-error-500:   oklch(55% 0.22 25);
  --color-info-500:    oklch(58% 0.17 230);

  /* ── Border radius ────────────────────────────────── */
  --radius-md:  0.375rem;  /* most components */
  --radius-lg:  0.5rem;    /* cards */
  --radius-xl:  0.75rem;   /* modals, sheets */

  /* ── Typography ───────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

One-line brand change

Changing your brand is literally one line. Switch from blue to green:

css

/* Blue (default) */
--color-brand-500: oklch(55% 0.185 260);

/* Switch to green */
--color-brand-500: oklch(55% 0.185 155);

/* Switch to orange */
--color-brand-500: oklch(65% 0.20 50);

Use oklch.com to pick colors — OKLCH gives perceptually uniform brightness across hues.

Dark mode

Override surface and text tokens inside a .dark class or @media (prefers-color-scheme: dark):

css

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface:        oklch(15% 0 0);
    --color-surface-muted:  oklch(18% 0 0);
    --color-surface-subtle: oklch(20% 0 0);
    --color-border:         oklch(28% 0 0);
    --color-text-primary:   oklch(96% 0 0);
    --color-text-secondary: oklch(70% 0 0);
    --color-text-muted:     oklch(50% 0 0);
  }
}