shadcn/ui theme · light original

Crème

The CSS Crème house palette: near-white surfaces, near-black type, a deep indigo primary and a sparing CSSCreme-orange accent. Clean and technical.

lightminimalindigo

Install

npx shadcn@latest add https://csscreme.com/r/creme-brand.json

Requires a project with shadcn/ui set up. Prefer to paste? The CSS variables are below.

Live preview

Revenue

Last 30 days across all workspaces.

Total

$48,210+12.4%

Active

1,204+3.1%

Churn

0.8%-0.2%

Workspace name

Tokens

:root {
  --background: oklch(98.9% 0.003 286.4);
  --foreground: oklch(17.7% 0.011 260.6);
  --card: oklch(100.0% 0.000 89.9);
  --card-foreground: oklch(17.7% 0.011 260.6);
  --popover: oklch(100.0% 0.000 89.9);
  --popover-foreground: oklch(17.7% 0.011 260.6);
  --primary: oklch(51.1% 0.230 277.0);
  --primary-foreground: oklch(100.0% 0.000 89.9);
  --secondary: oklch(99.7% 0.000 89.9);
  --secondary-foreground: oklch(17.7% 0.011 260.6);
  --muted: oklch(99.7% 0.000 89.9);
  --muted-foreground: oklch(50.1% 0.025 259.2);
  --accent: oklch(72.6% 0.178 43.2);
  --accent-foreground: oklch(15.2% 0.009 285.3);
  --destructive: oklch(62.6% 0.193 23.0);
  --destructive-foreground: oklch(15.2% 0.009 285.3);
  --border: oklch(82.6% 0.009 264.5);
  --input: oklch(82.6% 0.009 264.5);
  --ring: oklch(51.1% 0.230 277.0);
  --radius: 14px;
}

.dark {
  --background: oklch(17.9% 0.008 285.5);
  --foreground: oklch(96.4% 0.001 286.4);
  --card: oklch(25.2% 0.000 89.9);
  --card-foreground: oklch(96.4% 0.001 286.4);
  --popover: oklch(25.2% 0.000 89.9);
  --popover-foreground: oklch(96.4% 0.001 286.4);
  --primary: oklch(51.1% 0.230 277.0);
  --primary-foreground: oklch(100.0% 0.000 89.9);
  --secondary: oklch(22.7% 0.002 286.2);
  --secondary-foreground: oklch(96.4% 0.001 286.4);
  --muted: oklch(22.7% 0.002 286.2);
  --muted-foreground: oklch(70.5% 0.005 258.3);
  --accent: oklch(72.6% 0.178 43.2);
  --accent-foreground: oklch(15.2% 0.009 285.3);
  --destructive: oklch(62.6% 0.193 23.0);
  --destructive-foreground: oklch(15.2% 0.009 285.3);
  --border: oklch(34.5% 0.007 274.8);
  --input: oklch(34.5% 0.007 274.8);
  --ring: oklch(51.1% 0.230 277.0);
}

Tailwind v4

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius: var(--radius);
}

Colors are OKLCH. Contrast is checked in both modes: foreground on background, on cards, and button labels on the primary fill.

Where this came from

Themes here aren't randomised swatches — they start life as a palette in our design layer, studied against real interfaces. See the Crème palette for the full role breakdown, font pairing and spacing scale, or browse the showcase and breakdowns the palettes are drawn from.

Font pairing Space Grotesk headings · Plus Jakarta Sans body · Radius 14px