Foundations / Theming

Make it unmistakably yours.

Tune Rivelle’s semantic tokens and preview every decision in context. The generated CSS remains readable, portable and entirely yours.

Configurator

Choose a neutral palette, brand accent, typeface, radius and appearance.

Theme studioShape the foundations

Neutral palette

Accent

Font

Radius

Appearance

Live previewneutral · indigo · geist

New project

Launch with clarity.

A compact preview using the same tokens as every Rivelle component.

Tokens update instantly

globals.css

$pnpm dlx rivelle@latest init --font geist --base-color neutral --accent indigo --radius 0.625rem

:root {
  --background: oklch(0.985 0 0);
  --foreground: oklch(0.18 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0 0);
  --primary: oklch(0.54 0.22 265);
  --destructive: oklch(0.61 0.22 25);
  --destructive-foreground: oklch(0.985 0 0);
  --ring: oklch(0.54 0.22 265);
  --chart-1: oklch(0.54 0.22 265);
  --chart-2: oklch(0.68 0.16 210);
  --chart-3: oklch(0.7 0.17 150);
  --chart-4: oklch(0.75 0.17 80);
  --chart-5: oklch(0.64 0.2 320);
  --primary-foreground: oklch(.985 0 0);
  --secondary: oklch(0.95 0 0);
  --secondary-foreground: oklch(0.27 0 0);
  --muted: oklch(0.955 0 0);
  --muted-foreground: oklch(0.52 0 0);
  --accent: oklch(0.93 0 0);
  --accent-foreground: oklch(0.25 0 0);
  --border: oklch(0.89 0 0);
  --input: oklch(0.89 0 0);
  --sidebar: oklch(0.975 0 0);
  --sidebar-foreground: oklch(0.22 0 0);
  --sidebar-primary: oklch(0.54 0.22 265);
  --sidebar-primary-foreground: oklch(.985 0 0);
  --sidebar-accent: oklch(0.94 0 0);
  --sidebar-accent-foreground: oklch(0.25 0 0);
  --sidebar-border: oklch(0.89 0 0);
  --sidebar-ring: oklch(0.54 0.22 265);
  --radius: 0.625rem;
  --font-family-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, sans-serif;
}

.dark {
  --background: oklch(0.15 0 0);
  --foreground: oklch(0.96 0 0);
  --card: oklch(0.19 0 0);
  --card-foreground: oklch(0.96 0 0);
  --popover: oklch(0.19 0 0);
  --popover-foreground: oklch(0.96 0 0);
  --primary: oklch(0.7 0.1716 265);
  --destructive: oklch(0.66 0.2 25);
  --destructive-foreground: oklch(0.985 0 0);
  --ring: oklch(0.7 0.1716 265);
  --chart-1: oklch(0.7 0.1716 265);
  --chart-2: oklch(0.68 0.16 210);
  --chart-3: oklch(0.7 0.17 150);
  --chart-4: oklch(0.75 0.17 80);
  --chart-5: oklch(0.64 0.2 320);
  --primary-foreground: oklch(0.16 0 0);
  --secondary: oklch(0.24 0 0);
  --secondary-foreground: oklch(0.94 0 0);
  --muted: oklch(0.24 0 0);
  --muted-foreground: oklch(0.69 0 0);
  --accent: oklch(0.28 0 0);
  --accent-foreground: oklch(0.94 0 0);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --sidebar: oklch(0.18 0 0);
  --sidebar-foreground: oklch(0.96 0 0);
  --sidebar-primary: oklch(0.7 0.1716 265);
  --sidebar-primary-foreground: oklch(0.16 0 0);
  --sidebar-accent: oklch(0.25 0 0);
  --sidebar-accent-foreground: oklch(0.94 0 0);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.7 0.1716 265);
}