Theme Playground

Live accent, radius, font, and density. Tokens export as CSS variables. The Deluxe pack zip on this page is the customizer plus the form kit.

Theme Customizer

Accent Color

Custom hue (264)

Border Radius

Font Family

Density

Preview: Accent, radius, font, and density apply live across the site. Sign in with Pro or Deluxe to persist across refresh.

Preview

DefaultSecondaryOutline

Accent surface — changes with the hue control

Card with background and foreground tokens

Token export + pack

Figma-free CSS variables from the live customizer. The zip is the theme components plus the form kit — drop into Next.js + Tailwind. Commercial use is the Deluxe small-team license (up to 5).

/* Patina theme tokens — Figma-free export
 * Generated from the /theme customizer (accent, radius, font, density).
 * Drop into a Next.js + Tailwind project as tokens.css (or merge into globals.css).
 */
:root {
  --accent: oklch(0.5 0.14 264);
  --brass: oklch(0.5 0.14 264);
  --ring: oklch(0.7 0.04 264);
  --sidebar-primary: oklch(0.5 0.14 264);
  --sidebar-ring: oklch(0.5 0.14 264);
  --radius: 0.625rem;
  --font-sans: var(--font-geist-sans);
  --font-display: var(--font-instrument);
  --font-heading: var(--font-instrument);
  --density-scale: 1;
}

.dark {
  --accent: oklch(0.55 0.16 264);
  --brass: oklch(0.55 0.16 264);
  --ring: oklch(0.4 0.04 264);
  --sidebar-primary: oklch(0.55 0.16 264);
  --sidebar-ring: oklch(0.55 0.16 264);
}

html[data-density="compact"] {
  --spacing: 0.21875rem;
}

Theme + form pack zip Open form kit

Token reference

--accent / --brass / --ring

Brand hue from the customizer

--radius

Border radius (sm / md / lg)

--font-sans / --font-display

Font pairing

--density-scale / data-density

Comfortable or compact spacing

Docs for the raw CSS variables: /docs/theming. Customizer stays here.