shadcn/ui theme · dark original

Emerald SaaS

Deep forest-black surfaces under a bright emerald primary — the confident, modern look of open-source dashboards and data tools.

darkgreensaas

Install

npx shadcn@latest add https://csscreme.com/r/emerald-saas.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(99.0% 0.002 145.6);
  --foreground: oklch(27.6% 0.020 163.1);
  --card: oklch(97.4% 0.002 165.1);
  --card-foreground: oklch(27.6% 0.020 163.1);
  --popover: oklch(97.4% 0.002 165.1);
  --popover-foreground: oklch(27.6% 0.020 163.1);
  --primary: oklch(69.6% 0.149 162.5);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(98.0% 0.002 165.1);
  --secondary-foreground: oklch(27.6% 0.020 163.1);
  --muted: oklch(98.0% 0.002 165.1);
  --muted-foreground: oklch(55.0% 0.017 164.3);
  --accent: oklch(77.3% 0.153 163.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(84.4% 0.007 160.0);
  --input: oklch(84.4% 0.007 160.0);
  --ring: oklch(69.6% 0.149 162.5);
  --radius: 10px;
}

.dark {
  --background: oklch(16.7% 0.016 165.4);
  --foreground: oklch(95.7% 0.018 166.4);
  --card: oklch(22.2% 0.027 161.4);
  --card-foreground: oklch(95.7% 0.018 166.4);
  --popover: oklch(22.2% 0.027 161.4);
  --popover-foreground: oklch(95.7% 0.018 166.4);
  --primary: oklch(69.6% 0.149 162.5);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(20.3% 0.022 163.7);
  --secondary-foreground: oklch(95.7% 0.018 166.4);
  --muted: oklch(20.3% 0.022 163.7);
  --muted-foreground: oklch(68.9% 0.049 164.4);
  --accent: oklch(77.3% 0.153 163.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(33.1% 0.025 167.5);
  --input: oklch(33.1% 0.025 167.5);
  --ring: oklch(69.6% 0.149 162.5);
}

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 Emerald SaaS 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 10px