---
version: alpha
name: Wrapped Party
description: Immersive WebGL party energy — Spotify Wrapped reimagined as a live event. Maximalist neon gradients over near-black canvas, oversized condensed display type, vivid candy accents (magenta, lime, cyan, violet), pill-shaped controls, and high-saturation playful chrome built for full-screen motion.

colors:
  # Canvas + ink
  background: "#0a0612"
  surface: "#15101f"
  surface-soft: "#1d1729"
  ink: "#ffffff"
  ink-secondary: "#c9c0d6"
  ink-muted: "#8a7f9e"

  # Vivid candy accents
  primary: "#ff2d9b"        # hot magenta
  lime: "#c8ff3d"           # electric lime
  cyan: "#22e3ff"           # neon cyan
  violet: "#7b3dff"         # ultraviolet
  coral: "#ff5e3a"          # warm coral
  gold: "#ffd23d"           # party gold

  # Gradient stops (flattened opaque)
  gradient-start: "#ff2d9b"
  gradient-mid: "#7b3dff"
  gradient-end: "#22e3ff"

  # On-color
  on-primary: "#ffffff"
  on-lime: "#0a0612"
  on-cyan: "#0a0612"

  # Chrome / structure
  border: "#2a2238"
  border-strong: "#3d3352"
  overlay-scrim: "#070410"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -2px
  display-large:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1px
  section-heading:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  card-title:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-semibold:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px
  caption:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.4px
  overline:
    fontFamily: "Montserrat, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  button-lime:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.on-lime}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.violet}"
    textColor: "{colors.on-primary}"
    typography: "{typography.overline}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border-strong}"

  stat-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.lime}"
    typography: "{typography.display-large}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
    borderColor: "{colors.border-strong}"

  nav-bar:
    backgroundColor: "{colors.overlay-scrim}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  chip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.cyan}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    borderColor: "{colors.border}"
---

# Wrapped Party Design System

## Overview

Wrapped Party is Spotify Wrapped reimagined as a live, full-screen event — an immersive WebGL experience by Active Theory where your year in music becomes a party you can move through. The design system throws restraint out the window in favor of pure energy: a near-black canvas (`{colors.background}`) saturated with neon gradients, oversized condensed display type, and a candy palette of magenta, lime, cyan, and ultraviolet. Every screen is built to be felt at arm's length on a phone or projected across a wall, not read like a document.

The visual identity leans on contrast between a deep ink-violet void and screaming high-saturation accents. Where most product UIs treat color as functional, Wrapped Party treats it as celebration — magenta (`{colors.primary}`) and electric lime (`{colors.lime}`) collide against the dark like club lighting. Gradients sweep from hot pink through ultraviolet to neon cyan, giving the whole experience a chromatic, in-motion glow. Text is overwhelmingly white (`{colors.ink}`) for maximum punch against the void.

Typography does the heavy lifting on personality. Big moments use a tall condensed display face (Anton-style) at billboard sizes with tight line-heights, stacking giant words like a tour poster. Supporting copy switches to a rounded, heavy geometric sans (Montserrat) at bold weights, keeping the energy high even in the small print. Nothing whispers — the lightest body weight is still medium (500).

Shape language is friendly and inflatable: everything interactive is a full pill (`{rounded.pill}`), cards get generous 24–32px corners, and there are no hard right angles in the chrome. The combination of soft rounded forms, maximal color, and motion-first layout makes the system unmistakably playful — built for sharing, screenshotting, and dancing.

**Key Characteristics:**
- Near-black ink-violet canvas (`{colors.background}`) as the stage for neon accents
- Candy accent palette: hot magenta, electric lime, neon cyan, ultraviolet, coral, gold
- Sweeping multi-stop gradients (`{colors.gradient-start}` → `{colors.gradient-mid}` → `{colors.gradient-end}`)
- Oversized condensed display type (Anton) at billboard sizes with tight 0.92–1.0 line-heights
- Heavy geometric sans (Montserrat) at 500–800 weights for all supporting copy
- Pill-shaped everything — buttons, inputs, chips, badges all fully rounded
- Generously rounded cards (24–32px), no hard chrome corners
- Maximalist, motion-first, screenshot-ready aesthetic

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black ink-violet stage behind everything.
- **Surface** (`{colors.surface}`): Slightly lifted panels and cards.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, nested fills, one step brighter.
- **Ink** (`{colors.ink}`): Pure white — primary text, maximum punch against the void.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, muted lavender-white.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, the quietest text.

### Candy Accents
- **Magenta** (`{colors.primary}`): The signature — primary CTAs, highlights, hot moments.
- **Lime** (`{colors.lime}`): Electric secondary accent, big stat numbers, energy callouts.
- **Cyan** (`{colors.cyan}`): Cool counterpoint, chips, links, data labels.
- **Violet** (`{colors.violet}`): Ultraviolet badges and gradient anchor.
- **Coral** (`{colors.coral}`): Warm accent for variety in playful contexts.
- **Gold** (`{colors.gold}`): Celebratory highlight, top-rank moments.

### Gradient Stops
- **Gradient Start** (`{colors.gradient-start}`): Hot magenta — the sweep origin.
- **Gradient Mid** (`{colors.gradient-mid}`): Ultraviolet midpoint.
- **Gradient End** (`{colors.gradient-end}`): Neon cyan terminus.

### Chrome & Structure
- **Border** (`{colors.border}`): Subtle hairline on dark surfaces.
- **Border Strong** (`{colors.border-strong}`): More visible outline on feature cards/inputs.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Deepest dark for nav/overlays.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on magenta/violet.
- **On Lime** (`{colors.on-lime}`): Dark text on lime (lime is too bright for white).
- **On Cyan** (`{colors.on-cyan}`): Dark text on cyan fills.

## Typography

### Font Family
- **Display**: `Anton` (tall condensed grotesque), fallbacks `Arial Narrow, sans-serif`
- **Body/UI**: `Montserrat` (geometric sans), fallbacks `Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 96px billboard moments — stacked tour-poster headlines |
| `display-large` | 64px big stats and section openers |
| `section-heading` | 40px screen titles |
| `card-title` | Card and module headings (Montserrat 800) |
| `body-large` | Lead copy, intros |
| `body` | Standard reading text |
| `body-semibold` | Emphasized inline text |
| `button-ui` | Buttons, controls, nav |
| `caption` | Metadata, chip labels |
| `overline` | Uppercase tracked labels, badges |

### Principles
- **Two voices, max contrast**: Condensed Anton for spectacle, geometric Montserrat for everything readable.
- **Billboard scale**: Display type runs huge (64–96px) with tight line-heights (0.92–1.0) to stack words like posters.
- **No light weights**: Montserrat never drops below 500 — the energy stays up even in body copy.
- **Uppercase tracking for labels**: Overlines use 2px letter-spacing for that "now playing" festival feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, scaling fast to large `{spacing.3xl}`–`{spacing.4xl}` gaps for full-screen moments.

### Grid & Container
- Full-bleed, full-viewport stages — content centered over WebGL backgrounds
- Single dominant focal element per screen (a giant number, a stacked headline)
- Cards arranged in loose 1–2 column stacks, not dense grids
- Generous safe-area padding for mobile-first full-screen layout

### Whitespace Philosophy
- **Stage, not page**: Each screen is one composed moment with breathing room around a hero element.
- **Color carries the density**: Where minimal systems use whitespace, Wrapped Party uses saturated background motion — the "empty" space is alive.
- **Big jumps**: Spacing leaps from `{spacing.xl}` to `{spacing.3xl}` for dramatic vertical rhythm.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Stage (Level 0) | WebGL gradient/particle background | Full-screen canvas |
| Flat (Level 1) | `{colors.surface}` fill, `{colors.border}` hairline | Standard cards |
| Lifted (Level 2) | `{colors.surface-soft}` fill, `{colors.border-strong}` | Feature cards |
| Glow (Level 3) | Accent-colored outer glow on hot CTAs | Magenta/lime buttons in focus |

**Depth Philosophy**: Depth comes from luminosity, not shadow. Brighter surfaces read as closer; the dark void recedes. Neon accents appear to glow off the screen, reinforced by gradient halos behind key elements rather than drop shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `sm` | 8px | Small inline elements |
| `md` | 16px | Compact cards, tags |
| `lg` | 24px | Standard cards |
| `xl` | 32px | Feature cards, large panels |
| `pill` | 9999px | All buttons, inputs, chips, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Hot magenta fill, white text, full pill. The default party CTA.
- **`button-lime`** — Electric lime fill with dark text — the high-energy alternate action.
- **`button-secondary`** — Dark surface with strong border for secondary actions.
- **`button-ghost`** — Transparent over the stage with a subtle border.

### Pills & Badges
- **`badge`** — Ultraviolet pill with uppercase tracked label.
- **`chip`** — Dark soft surface with cyan text for tags and filters.

### Cards
- **`card`** — Lifted dark surface, 24px corners, hairline border.
- **`card-feature`** — Brighter surface, 32px corners, strong border for spotlight modules.
- **`stat-card`** — Big lime display number over a dark surface — the signature "your number" moment.

### Inputs
- **`input`** — Fully pill-shaped dark field with strong border.

### Navigation
- **`nav-bar`** — Deepest scrim background, bold Montserrat controls, minimal chrome.

## Do's and Don'ts

### Do
- Keep the canvas near-black ink-violet so neon accents glow
- Use full pills for every interactive control
- Run display type huge with tight line-heights — stack words like a poster
- Pair condensed Anton spectacle with geometric Montserrat readability
- Put dark text on lime and cyan fills (they're too bright for white)
- Let gradients sweep magenta → violet → cyan

### Don't
- Don't use light font weights — Montserrat floors at 500
- Don't put white text on lime or cyan — fails contrast
- Don't use hard right-angle chrome — everything is rounded
- Don't dilute the palette toward pastels — saturation is the identity
- Don't lean on drop shadows for depth — use luminosity and glow
- Don't crowd screens — one composed hero moment per stage

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Primary target — full-screen single-column stages |
| Tablet | 600–1024px | Larger display type, more breathing room |
| Desktop | >1024px | Billboard display sizes, centered max-width content over full-bleed WebGL |

### Touch Targets
- Pill buttons use 14–16px vertical padding for large tap zones
- Controls are generously sized for full-screen mobile interaction

### Collapsing Strategy
- Display hero scales down proportionally, keeps tight line-height
- Multi-column card stacks → single column
- Full-screen stages maintain one focal element at every size

### Image Behavior
- WebGL/gradient backgrounds remain full-bleed edge-to-edge
- Album art and avatars use rounded or circular framing

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: ink-violet black `{colors.background}`
- Primary CTA: hot magenta `{colors.primary}`
- Energy accent: electric lime `{colors.lime}`
- Heading text: white `{colors.ink}`
- Body text: lavender-white `{colors.ink-secondary}`
- Gradient: `{colors.gradient-start}` → `{colors.gradient-mid}` → `{colors.gradient-end}`

### Example Component Prompts
- "Create a full-screen stat moment: near-black `{colors.background}` canvas, a 96px Anton headline in white, and a giant 64px lime number (`{colors.lime}`). Below, a magenta pill CTA (`{colors.primary}`, white text, 9999px radius, 16px 32px padding)."
- "Design a feature card: `{colors.surface-soft}` background, 32px radius, `{colors.border-strong}` border, 32px padding. Title in Montserrat 800 24px white, body in 16px weight 500 `{colors.ink-secondary}`."
- "Build a chip: `{colors.surface-soft}` background, `{colors.cyan}` text, full pill, 8px 16px padding, Montserrat 600 13px with 0.4px tracking."
- "Make an uppercase badge: `{colors.violet}` fill, white text, full pill, 12px Montserrat 700 with 2px letter-spacing."

### Iteration Guide
1. Start from the dark void — accents only glow against `{colors.background}`
2. Pill-shape every interactive control (`{rounded.pill}`)
3. Display type goes huge with tight line-heights; body stays bold Montserrat
4. Dark text on lime/cyan, white text on magenta/violet
5. Depth = luminosity and gradient glow, never drop shadows
6. One composed hero moment per screen — let color and motion fill the rest

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wrapped Party. Brand names and trademarks belong to their respective owners.