shadcn/ui theme · light original

Bubblegum

Bright bubblegum pink and grape purple on a blush base — high-energy and fun, for consumer apps that want to feel joyful.

pinkplayfulpastel

Install

npx shadcn@latest add https://csscreme.com/r/bubblegum.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.9% 0.018 351.1);
  --foreground: oklch(31.1% 0.083 337.8);
  --card: oklch(100.0% 0.000 89.9);
  --card-foreground: oklch(31.1% 0.083 337.8);
  --popover: oklch(100.0% 0.000 89.9);
  --popover-foreground: oklch(31.1% 0.083 337.8);
  --primary: oklch(65.6% 0.212 354.3);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(98.9% 0.006 350.8);
  --secondary-foreground: oklch(31.1% 0.083 337.8);
  --muted: oklch(98.9% 0.006 350.8);
  --muted-foreground: oklch(56.4% 0.092 345.0);
  --accent: oklch(60.6% 0.219 292.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(83.0% 0.041 345.5);
  --input: oklch(83.0% 0.041 345.5);
  --ring: oklch(65.6% 0.212 354.3);
  --radius: 18px;
}

.dark {
  --background: oklch(17.7% 0.026 352.9);
  --foreground: oklch(96.6% 0.003 345.2);
  --card: oklch(25.2% 0.000 89.9);
  --card-foreground: oklch(96.6% 0.003 345.2);
  --popover: oklch(25.2% 0.000 89.9);
  --popover-foreground: oklch(96.6% 0.003 345.2);
  --primary: oklch(65.6% 0.212 354.3);
  --primary-foreground: oklch(15.2% 0.009 285.3);
  --secondary: oklch(22.4% 0.009 351.7);
  --secondary-foreground: oklch(96.6% 0.003 345.2);
  --muted: oklch(22.4% 0.009 351.7);
  --muted-foreground: oklch(70.1% 0.015 343.4);
  --accent: oklch(60.6% 0.219 292.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.1% 0.021 348.8);
  --input: oklch(34.1% 0.021 348.8);
  --ring: oklch(65.6% 0.212 354.3);
}

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

Font pairing Baloo 2 headings · Nunito Sans body · Radius 18px