shadcn/ui theme · light original

Azure

Crisp white with a bright sky-blue primary and an indigo accent — the clean, trustworthy default of modern SaaS marketing sites.

bluesaaslight

Install

npx shadcn@latest add https://csscreme.com/r/azure.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(20.8% 0.040 265.8);
  --card: oklch(98.4% 0.003 247.9);
  --card-foreground: oklch(20.8% 0.040 265.8);
  --popover: oklch(98.4% 0.003 247.9);
  --popover-foreground: oklch(20.8% 0.040 265.8);
  --primary: oklch(58.8% 0.139 242.0);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(99.0% 0.003 228.8);
  --secondary-foreground: oklch(20.8% 0.040 265.8);
  --muted: oklch(99.0% 0.003 228.8);
  --muted-foreground: oklch(55.4% 0.041 257.4);
  --accent: oklch(58.5% 0.204 277.1);
  --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.012 259.8);
  --input: oklch(85.0% 0.012 259.8);
  --ring: oklch(58.8% 0.139 242.0);
  --radius: 10px;
}

.dark {
  --background: oklch(18.7% 0.000 89.9);
  --foreground: oklch(96.4% 0.003 264.5);
  --card: oklch(25.0% 0.011 254.0);
  --card-foreground: oklch(96.4% 0.003 264.5);
  --popover: oklch(25.0% 0.011 254.0);
  --popover-foreground: oklch(96.4% 0.003 264.5);
  --primary: oklch(58.8% 0.139 242.0);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(22.9% 0.007 248.1);
  --secondary-foreground: oklch(96.4% 0.003 264.5);
  --muted: oklch(22.9% 0.007 248.1);
  --muted-foreground: oklch(70.5% 0.007 255.5);
  --accent: oklch(58.5% 0.204 277.1);
  --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.003 286.2);
  --input: oklch(34.9% 0.003 286.2);
  --ring: oklch(58.8% 0.139 242.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 Azure 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