shadcn/ui theme · light original

Neo Brutalist

Pure white, hard black type and a jolt of electric yellow with zero corner radius — the loud, unapologetic brutalist look, built for maximum contrast.

brutalistlightvibrant

Install

npx shadcn@latest add https://csscreme.com/r/neo-brutalist.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(100.0% 0.000 89.9);
  --foreground: oklch(14.5% 0.000 89.9);
  --card: oklch(96.9% 0.007 106.5);
  --card-foreground: oklch(14.5% 0.000 89.9);
  --popover: oklch(96.9% 0.007 106.5);
  --popover-foreground: oklch(14.5% 0.000 89.9);
  --primary: oklch(89.9% 0.186 97.9);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(98.1% 0.005 106.5);
  --secondary-foreground: oklch(14.5% 0.000 89.9);
  --muted: oklch(98.1% 0.005 106.5);
  --muted-foreground: oklch(44.4% 0.010 73.6);
  --accent: oklch(70.8% 0.207 357.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(81.7% 0.003 84.6);
  --input: oklch(81.7% 0.003 84.6);
  --ring: oklch(89.9% 0.186 97.9);
  --radius: 0px;
}

.dark {
  --background: oklch(18.7% 0.000 89.9);
  --foreground: oklch(96.7% 0.000 89.9);
  --card: oklch(26.3% 0.009 107.0);
  --card-foreground: oklch(96.7% 0.000 89.9);
  --popover: oklch(26.3% 0.009 107.0);
  --popover-foreground: oklch(96.7% 0.000 89.9);
  --primary: oklch(89.9% 0.186 97.9);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(23.8% 0.007 107.0);
  --secondary-foreground: oklch(96.7% 0.000 89.9);
  --muted: oklch(23.8% 0.007 107.0);
  --muted-foreground: oklch(70.9% 0.003 84.6);
  --accent: oklch(70.8% 0.207 357.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(35.2% 0.002 106.5);
  --input: oklch(35.2% 0.002 106.5);
  --ring: oklch(89.9% 0.186 97.9);
}

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 Neo Brutalist palette for the full role breakdown, font pairing and spacing scale, or browse the showcase and breakdowns the palettes are drawn from.

Font pairing Archivo headings · Inter body · Radius 0px