shadcn/ui theme · dark original

Deep Ocean

A restrained, professional blue palette — trustworthy without the corporate stiffness.

darkbluecalm

Install

npx shadcn@latest add https://csscreme.com/r/deep-ocean.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.8% 0.002 247.8);
  --foreground: oklch(26.9% 0.014 220.1);
  --card: oklch(97.2% 0.003 247.9);
  --card-foreground: oklch(26.9% 0.014 220.1);
  --popover: oklch(97.2% 0.003 247.9);
  --popover-foreground: oklch(26.9% 0.014 220.1);
  --primary: oklch(71.6% 0.109 203.5);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(97.8% 0.003 228.8);
  --secondary-foreground: oklch(26.9% 0.014 220.1);
  --muted: oklch(97.8% 0.003 228.8);
  --muted-foreground: oklch(54.0% 0.014 240.1);
  --accent: oklch(71.4% 0.140 251.4);
  --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(83.8% 0.005 247.9);
  --input: oklch(83.8% 0.005 247.9);
  --ring: oklch(71.6% 0.109 203.5);
  --radius: 10px;
}

.dark {
  --background: oklch(21.2% 0.042 247.8);
  --foreground: oklch(95.0% 0.015 222.7);
  --card: oklch(27.6% 0.052 245.9);
  --card-foreground: oklch(95.0% 0.015 222.7);
  --popover: oklch(27.6% 0.052 245.9);
  --popover-foreground: oklch(95.0% 0.015 222.7);
  --primary: oklch(71.6% 0.109 203.5);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(25.3% 0.050 247.7);
  --secondary-foreground: oklch(95.0% 0.015 222.7);
  --muted: oklch(25.3% 0.050 247.7);
  --muted-foreground: oklch(67.1% 0.041 236.4);
  --accent: oklch(71.4% 0.140 251.4);
  --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.3% 0.041 242.5);
  --input: oklch(35.3% 0.041 242.5);
  --ring: oklch(71.6% 0.109 203.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 Deep Ocean palette for the full role breakdown, font pairing and spacing scale, or browse the showcase and breakdowns the palettes are drawn from.

Font pairing Sora headings · Inter body · Radius 10px