shadcn/ui theme · light original

Clay

Soft lavender surfaces, a gentle violet primary and generous rounding — the puffy, claymorphic look that reads friendly and tactile.

softpurpleplayful

Install

npx shadcn@latest add https://csscreme.com/r/clay.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(96.3% 0.014 299.8);
  --foreground: oklch(28.1% 0.051 292.7);
  --card: oklch(100.0% 0.000 89.9);
  --card-foreground: oklch(28.1% 0.051 292.7);
  --popover: oklch(100.0% 0.000 89.9);
  --popover-foreground: oklch(28.1% 0.051 292.7);
  --primary: oklch(65.7% 0.176 286.1);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(98.7% 0.005 297.7);
  --secondary-foreground: oklch(28.1% 0.051 292.7);
  --muted: oklch(98.7% 0.005 297.7);
  --muted-foreground: oklch(55.1% 0.056 293.4);
  --accent: oklch(81.5% 0.095 353.7);
  --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(82.4% 0.028 297.2);
  --input: oklch(82.4% 0.028 297.2);
  --ring: oklch(65.7% 0.176 286.1);
  --radius: 24px;
}

.dark {
  --background: oklch(17.6% 0.017 301.8);
  --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(65.7% 0.176 286.1);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(22.5% 0.006 301.1);
  --secondary-foreground: oklch(96.4% 0.001 286.4);
  --muted: oklch(22.5% 0.006 301.1);
  --muted-foreground: oklch(70.0% 0.010 299.2);
  --accent: oklch(81.5% 0.095 353.7);
  --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.2% 0.012 298.8);
  --input: oklch(34.2% 0.012 298.8);
  --ring: oklch(65.7% 0.176 286.1);
}

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

Font pairing Poppins headings · Nunito Sans body · Radius 24px