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
Compare Nova and Prism, then choose a neutral palette, brand accent, typeface, radius and appearance.
Theme studioShape the foundations
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 --style nova --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);
--action-background: var(--foreground);
--action-foreground: var(--background);
--action-background-hover: color-mix(in oklch,var(--foreground) 92%,transparent);
--action-shadow: 0 1px 0 color-mix(in oklch,var(--background) 28%,transparent), 0 8px 24px -14px var(--foreground);
--action-shadow-hover: 0 1px 0 color-mix(in oklch,var(--background) 32%,transparent), 0 14px 30px -16px var(--foreground);
--control-background: color-mix(in oklch,var(--foreground) 4.5%,transparent);
--control-background-hover: color-mix(in oklch,var(--foreground) 6.5%,transparent);
--control-border: transparent;
--control-border-hover: color-mix(in oklch,var(--foreground) 10%,transparent);
--control-focus-border: color-mix(in oklch,var(--foreground) 14%,transparent);
--control-shadow: inset 0 1px 0 color-mix(in oklch,var(--background) 72%,transparent), inset 0 -1px 0 color-mix(in oklch,var(--foreground) 7%,transparent);
--control-shadow-hover: inset 0 1px 0 color-mix(in oklch,var(--background) 72%,transparent), inset 0 -1px 0 color-mix(in oklch,var(--foreground) 9%,transparent);
--control-focus-shadow: inset 0 -2px 0 var(--primary), 0 14px 34px -24px var(--foreground);
--surface-background: color-mix(in oklch,var(--foreground) 2.5%,transparent);
--surface-border: color-mix(in oklch,var(--foreground) 10%,transparent);
--surface-shadow: inset 0 1px 0 color-mix(in oklch,var(--background) 72%,transparent), 0 18px 50px -38px var(--foreground);
--surface-shadow-hover: inset 0 1px 0 color-mix(in oklch,var(--background) 76%,transparent), 0 24px 60px -38px var(--foreground);
--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);
--action-background: var(--foreground);
--action-foreground: var(--background);
--action-background-hover: color-mix(in oklch,var(--foreground) 92%,transparent);
--action-shadow: 0 1px 0 color-mix(in oklch,var(--background) 28%,transparent), 0 8px 24px -14px var(--foreground);
--action-shadow-hover: 0 1px 0 color-mix(in oklch,var(--background) 32%,transparent), 0 14px 30px -16px var(--foreground);
--control-background: color-mix(in oklch,var(--foreground) 4.5%,transparent);
--control-background-hover: color-mix(in oklch,var(--foreground) 6.5%,transparent);
--control-border: transparent;
--control-border-hover: color-mix(in oklch,var(--foreground) 10%,transparent);
--control-focus-border: color-mix(in oklch,var(--foreground) 14%,transparent);
--control-shadow: inset 0 1px 0 color-mix(in oklch,var(--background) 72%,transparent), inset 0 -1px 0 color-mix(in oklch,var(--foreground) 7%,transparent);
--control-shadow-hover: inset 0 1px 0 color-mix(in oklch,var(--background) 72%,transparent), inset 0 -1px 0 color-mix(in oklch,var(--foreground) 9%,transparent);
--control-focus-shadow: inset 0 -2px 0 var(--primary), 0 14px 34px -24px var(--foreground);
--surface-background: color-mix(in oklch,var(--foreground) 2.5%,transparent);
--surface-border: color-mix(in oklch,var(--foreground) 10%,transparent);
--surface-shadow: inset 0 1px 0 color-mix(in oklch,var(--background) 72%,transparent), 0 18px 50px -38px var(--foreground);
--surface-shadow-hover: inset 0 1px 0 color-mix(in oklch,var(--background) 76%,transparent), 0 24px 60px -38px var(--foreground);
}