---
name: playful-color
description: |
  Genre pack: bold, joyful consumer design — giant display type, thick ink outlines, flat vibrant color fields, sticker-like shapes, chunky buttons. For D2C brands, consumer apps, events, education, and youth-facing products. Fun without looking childish: the structure stays strict, only the attitude is loud. Stack on the design-taste core skill.
triggers:
  - "playful"
  - "colorful"
  - "fun"
  - "d2c"
  - "consumer brand"
  - "youth brand"
  - "bold"
  - "sticker"
  - "chunky"
---

# playful-color

> One identity: **a poster you can't walk past — loud, but never sloppy.**

## 1. PALETTE (Fixed)

- Ground: cream `#FDF6EC` or bright paper `#FFF9EF`. Never plain white.
- Ink: `#101014` coat-black for type and outlines.
- Color fields — **two saturated inks max**, chosen deliberately: cobalt `#2E4BFF`, tomato `#FF4D2E`, banana `#FFD100`, mint `#2BD99B`, fuchsia `#FF3ED2`. One dominant (spread across large fields) + one supporting (accents, marks).
- Outlines: 2–3px solid ink everywhere shapes meet paper — sticker cut-line aesthetic.
- No gradients, no drop-shadow blur; hard offset shadows ONLY (`6px 6px 0 ink`), and only on 2–3 hero elements — one per viewport max.

## 2. TYPOGRAPHY (Fixed)

- **Display:** ultra-heavy — Archivo Black, Bricolage Grotesque 800, or system bold-900. Sizes `clamp(3rem, 8vw, 7rem)`, leading 0.95, tracking −0.02em. Uppercase or sentence-case with a rotated word for emphasis.
- **Body:** same family at 500/400, 16–18px, 1.55. Or mono for the technical bits.
- **Labels:** mono or bold caps, `letter-spacing: 0.06em`, 11–12px, always readable on its color field.
- One emphasis trick allowed: a word underlined with a 6px accent bar, or set on a rotated solid field. Pick one, use it ≤ 3 times per page.

## 3. COMPOSITION (Fixed)

- **Off-grid energy, on-grid bones:** everything aligns to a 12-col grid EXCEPT deliberate 2–4° rotations on 2–3 hero elements (badge shapes, single words, button pair). Rotation is the spice; overuse = broken.
- **Color-blocked sections:** alternate paper sections with full-bleed ink or accent fields (ink sections get paper text). This is the structure that makes loud colors feel designed.
- **Sticker components:** badges and chips are solid fields with 2.5px ink outlines, square or pill — never gradient, never glass.
- **Hero:** huge type + sticker badge + one chunky CTA + color-blocked product panel. Two colors max in the hero viewport.
- Pricing: 3 chunky cards, each a solid field (paper / accent / paper), ink outlines, hard offset shadow on the featured one only.

## 4. CONTENT TREATMENT

- No emoji. Draw simple marks: dot grids, asterisks, arrows (→ with 3px strokes), and hand-drawn-feel SVG squiggles — underlines, scribble circles.
- Illustration allowed and encouraged: flat geometric shapes (circles, half-circles, spokes) in the two ink colors. No gradients, no 3D, no photorealism.
- Copy: short, direct, exclamation-mark budget ONE per page. Hype comes from color, not syntax.
- CTA: chunky — min 56px height, 2.5px ink outline, hard offset shadow, pressed state = shadow removed + 2px translate.

## 5. MOTION (Bouncy But Brief)

- Springs: overshoot allowed — `cubic-bezier(0.34, 1.56, 0.64, 1)` on entrances, 350–500ms, one wave per element (no repetition).
- Hover: buttons translate −3px with shadow growing +2px. Logo wiggle ≤ 1 time. No infinite loops, no marquees.

## 6. CHECKLIST (Fail the page if…)

- [ ] More than two saturated colors + cream + ink on the palette.
- [ ] Any gradient or soft blur shadow.
- [ ] More than ~3 rotated elements per page.
- [ ] Any emoji.
- [ ] Body text below 16px or lacking contrast (4.5:1 minimum).
- [ ] Display type under 3rem.
- [ ] Any element of the design that looks scared to be there.