shadcn/ui theme · light original

Nordic

Cool arctic greys and a muted frost-blue primary — a calm, low-contrast Scandinavian palette that is easy to live in all day.

bluecalmminimal

Install

npx shadcn@latest add https://csscreme.com/r/nordic.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(95.1% 0.007 260.7);
  --foreground: oklch(32.4% 0.023 264.2);
  --card: oklch(100.0% 0.000 89.9);
  --card-foreground: oklch(32.4% 0.023 264.2);
  --popover: oklch(100.0% 0.000 89.9);
  --popover-foreground: oklch(32.4% 0.023 264.2);
  --primary: oklch(59.4% 0.077 254.0);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(98.2% 0.003 264.5);
  --secondary-foreground: oklch(32.4% 0.023 264.2);
  --muted: oklch(98.2% 0.003 264.5);
  --muted-foreground: oklch(45.2% 0.035 264.1);
  --accent: oklch(77.5% 0.062 217.5);
  --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(78.5% 0.017 266.3);
  --input: oklch(78.5% 0.017 266.3);
  --ring: oklch(59.4% 0.077 254.0);
  --radius: 8px;
}

.dark {
  --background: oklch(18.5% 0.005 248.1);
  --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(59.4% 0.077 254.0);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(23.0% 0.002 197.1);
  --secondary-foreground: oklch(96.4% 0.001 286.4);
  --muted: oklch(23.0% 0.002 197.1);
  --muted-foreground: oklch(70.3% 0.009 271.3);
  --accent: oklch(77.5% 0.062 217.5);
  --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.8% 0.006 258.3);
  --input: oklch(34.8% 0.006 258.3);
  --ring: oklch(59.4% 0.077 254.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 Nordic 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