shadcn/ui theme · light original

Amber Minimal

A restrained near-white system warmed by a single amber primary — minimalism with a hint of heat, made for content and docs.

minimalwarmlight

Install

npx shadcn@latest add https://csscreme.com/r/amber-minimal.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(21.6% 0.006 56.0);
  --card: oklch(98.5% 0.001 106.4);
  --card-foreground: oklch(21.6% 0.006 56.0);
  --popover: oklch(98.5% 0.001 106.4);
  --popover-foreground: oklch(21.6% 0.006 56.0);
  --primary: oklch(66.6% 0.157 58.3);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(99.1% 0.001 106.4);
  --secondary-foreground: oklch(21.6% 0.006 56.0);
  --muted: oklch(99.1% 0.001 106.4);
  --muted-foreground: oklch(55.3% 0.012 58.1);
  --accent: oklch(51.1% 0.086 186.4);
  --accent-foreground: oklch(100.0% 0.000 89.9);
  --destructive: oklch(62.6% 0.193 23.0);
  --destructive-foreground: oklch(15.2% 0.009 285.3);
  --border: oklch(85.0% 0.004 39.5);
  --input: oklch(85.0% 0.004 39.5);
  --ring: oklch(66.6% 0.157 58.3);
  --radius: 8px;
}

.dark {
  --background: oklch(18.7% 0.000 89.9);
  --foreground: oklch(96.5% 0.001 17.2);
  --card: oklch(25.9% 0.005 106.8);
  --card-foreground: oklch(96.5% 0.001 17.2);
  --popover: oklch(25.9% 0.005 106.8);
  --popover-foreground: oklch(96.5% 0.001 17.2);
  --primary: oklch(66.6% 0.157 58.3);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(23.4% 0.004 106.7);
  --secondary-foreground: oklch(96.5% 0.001 17.2);
  --muted: oklch(23.4% 0.004 106.7);
  --muted-foreground: oklch(70.7% 0.003 48.7);
  --accent: oklch(51.1% 0.086 186.4);
  --accent-foreground: oklch(100.0% 0.000 89.9);
  --destructive: oklch(62.6% 0.193 23.0);
  --destructive-foreground: oklch(15.2% 0.009 285.3);
  --border: oklch(34.9% 0.001 17.2);
  --input: oklch(34.9% 0.001 17.2);
  --ring: oklch(66.6% 0.157 58.3);
}

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

Font pairing Inter headings · Inter body · Radius 8px