Dopamine Maximalism

---
name: dopamine-maximalism
description: Apply the Dopamine Maximalism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Dopamine Maximalism, mentions dopamine design, joyful maximalism, anti-minimalism, or describes clashing saturated brights, dense layered compositions, chunky juicy display type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Dopamine Maximalism Design System

Joy-first maximalism: saturated clashing brights, dense layered compositions, chunky juicy type, and sticker-cluster energy. Every section flips to a new loud ground color; restraint is treated as a bug, not a feature.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Dopamine Maximalism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (dopamine design, joyful maximalism, anti-minimalism, maximalist pop, dopamine dressing web), or describes its traits: clashing saturated brights; dense layered compositions; chunky juicy display type; sticker and badge clusters; per-section background color flips; playful oversized shapes.

## Design tokens

### Color palette

- Primary ground, saturated sunshine yellow: `#ffe14d` (--color-bg)
- Cards and stickers that need to pop off the loud ground: `#ffffff` (--color-surface)
- Primary text, deep violet-black: `#241332` (--color-text)
- Hot pink — fills, badges, and alternate section grounds: `#ff2e88` (--color-accent)
- Electric cobalt — links, alternate section grounds: `#3b2ef0` (--color-accent-2)
- Juicy orange for badges and highlights: `#ff6b1a` (--color-accent-3)
- Punchy green for success states and stickers: `#00a884` (--color-accent-4)
- Thick outlines around stickers and cards: `#241332` (--color-border)

### Typography

- Display / headings: Shrikhand (fallback: Georgia, serif)
- Body: Rubik (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.05, letter-spacing 0
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Deliberately dense: elements crowd, overlap, and rotate into each other's space. Whitespace exists only to make the next collision land harder.
- Border radius: sm 8px, lg 24px, pill 999px, blob 60% 40% 55% 45% / 50% 60% 40% 50% — Mix rounded cards with pill tags and irregular blob shapes; never a uniform radius across the whole page.
- Border treatment: 3px solid #241332 — Thick dark outlines make stickers and cards read as cutouts against the loud grounds.

### Shadows

- sticker: `0 4px 0 #241332` — Default sticker/badge lift
- pop: `6px 6px 0 #ff2e88` — Hero cards and CTAs — colored hard offset
- float: `0 12px 24px rgba(36, 19, 50, 0.18)` — Modals and overlays above the chaos

### Layout

- Max content width: 1280px
- Full-bleed sections, each with its own saturated ground color
- Overlapping clusters: stickers and badges break card and section boundaries
- Rotate elements between -6deg and 6deg so nothing sits perfectly straight
- Alternate dense collage sections with one loud oversized-type section for rhythm

### Effects

- Rotated sticker clusters overlapping section seams
- Scrolling marquee strips in a clashing accent color
- Irregular CSS blob shapes behind product imagery
- Confetti or starburst micro-illustrations sprinkled between content

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 120ms / 240ms / 420ms
- Bouncy overshoot on hover: scale(1.05) with a slight rotation wiggle
- Stickers pop in with a spring as they enter the viewport
- Marquees run continuously but pause on hover and under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffe14d;
  --color-surface: #ffffff;
  --color-text: #241332;
  --color-accent: #ff2e88;
  --color-accent-2: #3b2ef0;
  --color-accent-3: #ff6b1a;
  --color-accent-4: #00a884;
  --color-border: #241332;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-blob: 60% 40% 55% 45% / 50% 60% 40% 50%;
  --shadow-sticker: 0 4px 0 #241332;
  --shadow-pop: 6px 6px 0 #ff2e88;
  --shadow-float: 0 12px 24px rgba(36, 19, 50, 0.18);
  --border-default: 3px solid #241332;
  --font-display: Shrikhand, Georgia, serif;
  --font-body: Rubik, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.05;
  --leading-body: 1.55;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Shrikhand:wght@400&family=Rubik:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Chunky pill nav on a white strip with 3px border; logo in Shrikhand; cart/CTA as a hot-pink pill with sticker shadow
- **Hero:** Oversized Shrikhand headline in violet-black on yellow, surrounded by overlapping rotated stickers and one blob-masked product photo
- **Card:** White surface, 3px violet border, sticker shadow, a rotated badge pinned to one corner
- **Button (primary):** Hot-pink fill, violet-black text, 3px border, pop shadow, bouncy hover wiggle
- **Button (secondary):** White fill, violet-black text, same border, sticker shadow
- **Form fields:** White fill, 3px border, generous 14px padding; focus swaps border color to cobalt and adds the sticker shadow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The section color flip: as you scroll, each full-width section swaps to a new saturated ground — yellow to hot pink to cobalt — while rotated stickers, badges, and chunky display type pile up in deliberately dense layers. Spend boldness here; keep everything else quiet.

## Do

- Commit to density — clusters of 3-5 overlapping elements read as intentional; lone stickers read as mistakes
- Flip the ground color per section so the page feels like flipping through candy wrappers
- Keep all long-form text in the dark violet-black on light grounds
- Use the bright accents as fills, badges, and grounds rather than as text

## Don't

- Don't add gradients or blur — dopamine maximalism is flat, loud color
- Don't desaturate the palette to make it tasteful; the clash is the point
- Don't set body copy on the pink, orange, or cobalt grounds without a white card under it
- Don't use more than one display face — the color is already doing maximal work

## Accessibility notes

- Hot pink (#ff2e88) and orange (#ff6b1a) fail contrast as text on the yellow ground — use them only as fills or grounds with dark #241332 text on top
- Continuous marquees and spring animations must pause under prefers-reduced-motion
- Dense overlapping layouts need a sane DOM order so screen readers get linear content

## Reference sites

- Starface: https://www.starface.world
- It's Nice That: https://www.itsnicethat.com
- Godly web gallery: https://godly.website

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip dopamine-maximalism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/dopamine-maximalism.json

Settings → Capabilities → Skills → Upload skill → dopamine-maximalism.zip