Palette · pink · playful · pastel

Bubblegum

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

Copy as

Building with shadcn/ui?

Install Bubblegum as a real theme — light and dark, OKLCH tokens, every colour pair measured, DTCG export.

Get the theme →

Usage system

Everything you need to wire this palette into a real project, not just the colors.

CSS variables

:root {
  --color-bg: #FFF0F6;
  --color-surface: #FFFFFF;
  --color-primary: #EC4899;
  --color-accent: #8B5CF6;
  --color-text: #4A1D3F;
  --color-muted: #9C5F82;
}

Tailwind config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bg: '#FFF0F6',
        surface: '#FFFFFF',
        primary: '#EC4899',
        accent: '#8B5CF6',
        text: '#4A1D3F',
        muted: '#9C5F82',
      },
    },
  },
};

SCSS variables

$color-bg: #FFF0F6;
$color-surface: #FFFFFF;
$color-primary: #EC4899;
$color-accent: #8B5CF6;
$color-text: #4A1D3F;
$color-muted: #9C5F82;

DESIGN.md for AI agents

Paste into Cursor, Claude Code, Codex, v0 or Lovable before you ask for UI, or fetch it directly from /d/bubblegum.md. Colors, contrast ratios and the rules an agent must follow, all computed from this palette.

# DESIGN.md — Bubblegum

> Design context for AI coding agents. Paste this file into Cursor, Claude Code, Codex, v0 or Lovable
> before asking for UI, or commit it at your repo root as `DESIGN.md`.

- **Source:** [Bubblegum on CSS Crème](https://csscreme.com/themes/bubblegum)
- **Default mode:** light
- **Tags:** pink, playful, pastel
- **Install as a real shadcn/ui theme:** `npx shadcn@latest add https://csscreme.com/r/bubblegum.json`
- **Fingerprint:** `fnv1a-83152133` — a hash of the token set below. It changes only when a token changes.
- **Verify this copy:** call the MCP tool `verify_design_md` with `{ "id": "bubblegum", "fingerprint": "fnv1a-83152133" }`
  at `https://csscreme.com/mcp`, or refetch https://csscreme.com/d/bubblegum.md. A stale copy is worse than none: an agent will follow it faithfully.
- **Also available as:** [DTCG tokens](https://csscreme.com/d/bubblegum.tokens.json) for Tokens Studio / Figma Variables · [agent rules block](https://csscreme.com/d/bubblegum.rules.md) for CLAUDE.md, AGENTS.md or .cursor/rules

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

---

## Semantic color roles

Six roles carry the identity. Everything else in this file is derived from them.

| Role | Hex | OKLCH | Use it for |
| --- | --- | --- | --- |
| `bg` | `#FFF0F6` | `oklch(96.9% 0.018 351.1)` | page background |
| `surface` | `#FFFFFF` | `oklch(100.0% 0.000 89.9)` | cards, panels, popovers |
| `primary` | `#EC4899` | `oklch(65.6% 0.212 354.3)` | brand actions: primary buttons, links, focus rings |
| `accent` | `#8B5CF6` | `oklch(60.6% 0.219 292.7)` | secondary emphasis only, never a second primary |
| `text` | `#4A1D3F` | `oklch(31.1% 0.083 337.8)` | body and heading text |
| `muted` | `#9C5F82` | `oklch(56.4% 0.092 345.0)` | secondary text, borders, disabled states |

## Full token set (shadcn/ui, both modes)

Colors are OKLCH (Tailwind v4 / shadcn native). Brand colors are identical in both modes by design:
only the neutrals move, and they keep their hue, so light and dark read as the same design system.

| Token | Light | Dark |
| --- | --- | --- |
| `--background` | `oklch(96.9% 0.018 351.1)` | `oklch(17.7% 0.026 352.9)` |
| `--foreground` | `oklch(31.1% 0.083 337.8)` | `oklch(96.6% 0.003 345.2)` |
| `--card` | `oklch(100.0% 0.000 89.9)` | `oklch(25.2% 0.000 89.9)` |
| `--card-foreground` | `oklch(31.1% 0.083 337.8)` | `oklch(96.6% 0.003 345.2)` |
| `--popover` | `oklch(100.0% 0.000 89.9)` | `oklch(25.2% 0.000 89.9)` |
| `--popover-foreground` | `oklch(31.1% 0.083 337.8)` | `oklch(96.6% 0.003 345.2)` |
| `--primary` | `oklch(65.6% 0.212 354.3)` | `oklch(65.6% 0.212 354.3)` |
| `--primary-foreground` | `oklch(15.2% 0.009 285.3)` | `oklch(15.2% 0.009 285.3)` |
| `--secondary` | `oklch(98.9% 0.006 350.8)` | `oklch(22.4% 0.009 351.7)` |
| `--secondary-foreground` | `oklch(31.1% 0.083 337.8)` | `oklch(96.6% 0.003 345.2)` |
| `--muted` | `oklch(98.9% 0.006 350.8)` | `oklch(22.4% 0.009 351.7)` |
| `--muted-foreground` | `oklch(56.4% 0.092 345.0)` | `oklch(70.1% 0.015 343.4)` |
| `--accent` | `oklch(60.6% 0.219 292.7)` | `oklch(60.6% 0.219 292.7)` |
| `--accent-foreground` | `oklch(15.2% 0.009 285.3)` | `oklch(15.2% 0.009 285.3)` |
| `--destructive` | `oklch(62.6% 0.193 23.0)` | `oklch(62.6% 0.193 23.0)` |
| `--destructive-foreground` | `oklch(15.2% 0.009 285.3)` | `oklch(15.2% 0.009 285.3)` |
| `--border` | `oklch(83.0% 0.041 345.5)` | `oklch(34.1% 0.021 348.8)` |
| `--input` | `oklch(83.0% 0.041 345.5)` | `oklch(34.1% 0.021 348.8)` |
| `--ring` | `oklch(65.6% 0.212 354.3)` | `oklch(65.6% 0.212 354.3)` |
| `--chart-1` | `oklch(65.6% 0.212 354.3)` | `oklch(65.6% 0.212 354.3)` |
| `--chart-2` | `oklch(60.6% 0.219 292.7)` | `oklch(60.6% 0.219 292.7)` |
| `--chart-3` | `oklch(66.9% 0.174 33.3)` | `oklch(66.9% 0.174 33.3)` |
| `--chart-4` | `oklch(65.7% 0.252 320.8)` | `oklch(65.7% 0.252 320.8)` |
| `--chart-5` | `oklch(61.8% 0.198 323.5)` | `oklch(61.8% 0.198 323.5)` |
| `--sidebar` | `oklch(98.5% 0.008 349.2)` | `oklch(21.4% 0.012 350.6)` |
| `--sidebar-foreground` | `oklch(31.1% 0.083 337.8)` | `oklch(96.6% 0.003 345.2)` |
| `--sidebar-primary` | `oklch(65.6% 0.212 354.3)` | `oklch(65.6% 0.212 354.3)` |
| `--sidebar-primary-foreground` | `oklch(15.2% 0.009 285.3)` | `oklch(15.2% 0.009 285.3)` |
| `--sidebar-accent` | `oklch(98.9% 0.006 350.8)` | `oklch(22.4% 0.009 351.7)` |
| `--sidebar-accent-foreground` | `oklch(31.1% 0.083 337.8)` | `oklch(96.6% 0.003 345.2)` |
| `--sidebar-border` | `oklch(83.0% 0.041 345.5)` | `oklch(34.1% 0.021 348.8)` |
| `--sidebar-ring` | `oklch(65.6% 0.212 354.3)` | `oklch(65.6% 0.212 354.3)` |

**What is measured and what is derived.** The six roles are the source. `chart-*` and `sidebar-*` follow
fixed rules over them (chart-1 = primary, chart-2 = accent, chart-3/4 = primary rotated ±40°, chart-5 = the
midpoint of primary and accent; sidebar maps onto surface, border and primary). `shadow-*` is the foreground
colour at a fixed opacity per step. None of those is a measurement, and an agent should treat them as
defaults it may override, unlike the six roles, which it may not.

## Typography

- **Headings:** Baloo 2
- **Body:** Nunito Sans

## Shape and rhythm

- **Radius:** `18px` (the `--radius` token; derive smaller/larger from it, do not invent new values)
- **Spacing scale:** 4px base · 4 / 8 / 16 / 24 / 32

## Contrast, measured

Computed from the tokens above in light mode, not asserted. Ratios are WCAG 2.1 relative luminance.

| Pair | Foreground | Background | Ratio | Verdict |
| --- | --- | --- | --- | --- |
| Body text on page background | `#4A1D3F` | `#FFF0F6` | 12.38:1 | AAA |
| Body text on card | `#4A1D3F` | `#FFFFFF` | 13.65:1 | AAA |
| Muted text on page background | `#9C5F82` | `#FFF0F6` | 4.36:1 | AA large text only |
| Button label on primary | `#0b0b0f` | `#EC4899` | 5.57:1 | AA |
| Button label on accent | `#0b0b0f` | `#8B5CF6` | 4.64:1 | AA |

## Rules for the agent

These are constraints, not suggestions. Each one is checkable against the tables above.

1. **Use only the tokens listed here.** Do not introduce a hex value that is not in the token table. If
   you need an in-between shade, mix two existing tokens rather than inventing a new hue.
2. **`#EC4899` (primary) is the only call-to-action color.** One primary action per view. `accent`
   is for secondary emphasis and must never be styled as a second primary button.
3. **Never restyle brand colors between light and dark.** Only neutrals change mode. A theme whose
   primary shifts between modes is a different theme.
4. **Respect the radius token.** Every corner derives from `18px`. Mixed radii across a view is
   the most common tell of generated UI.
5. **Stay on the spacing scale.** 4px base · 4 / 8 / 16 / 24 / 32. No arbitrary pixel values.
6. **Do not drop below the contrast ratios above.** If a combination you need is not in the contrast
   table, compute it before shipping it. Text under 4.5:1 fails AA.
7. **Headings in Baloo 2, body in Nunito Sans.** Do not add a third family.
8. **Use the semantic role, not the raw color.** Write `var(--primary)`, never `#EC4899`, so the
   theme stays swappable.

## CSS variables

Paste into `globals.css`:

```css
: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);
  --chart-1: oklch(65.6% 0.212 354.3);
  --chart-2: oklch(60.6% 0.219 292.7);
  --chart-3: oklch(66.9% 0.174 33.3);
  --chart-4: oklch(65.7% 0.252 320.8);
  --chart-5: oklch(61.8% 0.198 323.5);
  --sidebar: oklch(98.5% 0.008 349.2);
  --sidebar-foreground: oklch(31.1% 0.083 337.8);
  --sidebar-primary: oklch(65.6% 0.212 354.3);
  --sidebar-primary-foreground: oklch(15.2% 0.009 285.3);
  --sidebar-accent: oklch(98.9% 0.006 350.8);
  --sidebar-accent-foreground: oklch(31.1% 0.083 337.8);
  --sidebar-border: oklch(83.0% 0.041 345.5);
  --sidebar-ring: oklch(65.6% 0.212 354.3);
  --radius: 18px;
  --shadow-2xs: 0 1px 2px 0px rgb(74 29 63 / 0.05);
  --shadow-xs: 0 1px 3px 0px rgb(74 29 63 / 0.06);
  --shadow-sm: 0 1px 3px 0px rgb(74 29 63 / 0.08), 0 1px 2px -1px rgb(74 29 63 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(74 29 63 / 0.09), 0 2px 4px -2px rgb(74 29 63 / 0.09);
  --shadow-lg: 0 10px 15px -3px rgb(74 29 63 / 0.1), 0 4px 6px -4px rgb(74 29 63 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(74 29 63 / 0.12), 0 8px 10px -6px rgb(74 29 63 / 0.12);
  --shadow-2xl: 0 25px 50px -12px rgb(74 29 63 / 0.22);
  --spacing: 4px;
}

.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);
  --chart-1: oklch(65.6% 0.212 354.3);
  --chart-2: oklch(60.6% 0.219 292.7);
  --chart-3: oklch(66.9% 0.174 33.3);
  --chart-4: oklch(65.7% 0.252 320.8);
  --chart-5: oklch(61.8% 0.198 323.5);
  --sidebar: oklch(21.4% 0.012 350.6);
  --sidebar-foreground: oklch(96.6% 0.003 345.2);
  --sidebar-primary: oklch(65.6% 0.212 354.3);
  --sidebar-primary-foreground: oklch(15.2% 0.009 285.3);
  --sidebar-accent: oklch(22.4% 0.009 351.7);
  --sidebar-accent-foreground: oklch(96.6% 0.003 345.2);
  --sidebar-border: oklch(34.1% 0.021 348.8);
  --sidebar-ring: oklch(65.6% 0.212 354.3);
  --shadow-2xs: 0 1px 2px 0px rgb(245 243 244 / 0.16);
  --shadow-xs: 0 1px 3px 0px rgb(245 243 244 / 0.18);
  --shadow-sm: 0 1px 3px 0px rgb(245 243 244 / 0.22), 0 1px 2px -1px rgb(245 243 244 / 0.22);
  --shadow-md: 0 4px 6px -1px rgb(245 243 244 / 0.26), 0 2px 4px -2px rgb(245 243 244 / 0.26);
  --shadow-lg: 0 10px 15px -3px rgb(245 243 244 / 0.3), 0 4px 6px -4px rgb(245 243 244 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(245 243 244 / 0.34), 0 8px 10px -6px rgb(245 243 244 / 0.34);
  --shadow-2xl: 0 25px 50px -12px rgb(245 243 244 / 0.45);
}
```

Tailwind v4 maps them into utilities:

```css
@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);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius: var(--radius);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
  --spacing: var(--spacing);
}
```

---

Generated by [CSS Crème](https://csscreme.com) — curated web design, decoded so you can build it.
Every value above is computed from the palette, not written by hand.

Font pairing Baloo 2 / heading · Nunito Sans / body

Corner radius 18px

Spacing scale 4px base · 4 / 8 / 16 / 24 / 32

In context

New

Build better, faster

A card, a heading, a button and a hint of text: the palette doing real work.

Every pair, measured

Body text on the page background measures 12.38:1, which passes AAA. Below is every ink on every ground in this palette, computed with the WCAG 2.1 relative-luminance formula and reported against normal body text, which is the strictest case. 3 of 14 usable pairs reach AA or better. The failures are left in: a palette that hides them is less useful than one that tells you which two colours never to put together.

ink on ground	Background	Surface	Primary	Accent
Text	Aa 12.38 AAA	Aa 13.65 AAA	Aa 3.87 Large only	Aa 3.22 Large only
Muted	Aa 4.36 Large only	Aa 4.8 AA	Aa 1.36 Fail	Aa 1.13 Fail
Primary	Aa 3.2 Large only	Aa 3.53 Large only	—	Aa 1.2 Fail
Accent	Aa 3.84 Large only	Aa 4.23 Large only	Aa 1.2 Fail	—

Each cell is the ink actually painted on the ground, so you are reading the real pair rather than a swatch of it. Ratios are computed at build time from the hex values on this page; nothing here is asserted. Need the other standard? The contrast checker takes any two colours.

Under colour-vision deficiency

The six roles as they read under each simulated deficiency (Machado 2009, full severity). What to check: do primary and accent still tell apart, and does text still sit off surface? A simulation, not a measurement of anyone's vision.

Typical

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Found one you like? Pair it with a template, generate a matching background in the gradient generator, or browse all palettes.