Confetti Party Planner

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/confetti-party-planner and apply its design language to my project

Design Language

All colors are defined as CSS custom properties on `:root`.

| Token | Hex | Role |
|---|---|---|
| `--mg` | `#FF3AF2` | Magenta — primary action, Guest section background, hero gradient start |
| `--cy` | `#00F5D4` | Cyan — secondary accent, Budget section background, hero eyebrow |
| `--ye` | `#FFE600` | Yellow — logo color, Themes section background, countdown card |
| `--or` | `#FF6B35` | Orange — Vendors section background, gradient element |
| `--pu` | `#7B2FFF` | Purple — ticker band, hero gradient, Themes label color |
| `--bg` | `#FFFAF5` | Warm off-white — Timeline section and page base background |
| `--ink` | `#14001F` | Near-black — ALL borders, ALL text on light backgrounds |
| `--card-bg` | `#FFFFFF` | Pure white — card interiors only |

**Section background map:**
- Hero: `#0D0D1A` (deep dark)
- Ticker: `var(--pu)`
- `#themes` section: `var(--ye)`
- `#guests` section: `var(--mg)`
- `#budget` section: `var(--cy)`
- `#timeline` section: `var(--bg)`
- `#vendors` section: `var(--or)`
- Footer: `var(--ink)`

**Gradient text** (hero title, budget total, footer logo):
```css
background: linear-gradient(135deg, var(--mg) 0%, var(--ye) 33%, var(--cy) 66%, var(--or) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
```

**Hero title animation:**
```css
@keyframes gradshift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(30deg); }
}
animation: gradshift 4s ease-in-out infinite alternate;
```

---

Agent instructions (SKILL.md)(advanced)

Design Skill

**Audience**: Social planners aged 20–35 who describe events with words like "vibe", "main character energy", and "going all out". They plan birthday bashes, friend gatherings, and milestone celebrations. They are comfortable with expressive, maximalist UI and expect energy and personality from every screen.

**Use cases**: Event creation flows, guest list management, budget dashboards, vendor booking, countdown timers, RSVP tracking, party theme selection.

**Brand personality**: Joyful chaos with structure underneath. Loud, bold, and unapologetically colorful — but every element earns its place through clear function. The ONE memorable thing: **section backgrounds are solid accent colors** (magenta, cyan, yellow, orange), not white cards on white. Each section owns its hue completely.

---

Reviews

Related styles

Workshop Tool Inventory@claude-code

LINEARFLOW — Project Tracker@claude-code

DAYSHAPE — Habit Tracker@claude-code

Frutiger Aero Cloud@claude-code

Cotton Candy Planner@claude-code

Corporate Trust Dashboard@claude-code

All colors are defined as CSS custom properties on `:root`. | Token | Hex | Role | |---|---|---| | `--mg` | `#FF3AF2` | Magenta — primary action, Guest section background, hero gradient start | | `--cy` | `#00F5D4` | Cyan — secondary accent, Budget section background, hero eyebrow | | `--ye` | `#FFE600` | Yellow — logo color, Themes section background, countdown card | | `--or` | `#FF6B35` | Orange — Vendors section background, gradient element | | `--pu` | `#7B2FFF` | Purple — ticker band, hero gradient, Themes label color | | `--bg` | `#FFFAF5` | Warm off-white — Timeline section and page base background | | `--ink` | `#14001F` | Near-black — ALL borders, ALL text on light backgrounds | | `--card-bg` | `#FFFFFF` | Pure white — card interiors only | **Section background map:** - Hero: `#0D0D1A` (deep dark) - Ticker: `var(--pu)` - `#themes` section: `var(--ye)` - `#guests` section: `var(--mg)` - `#budget` section: `var(--cy)` - `#timeline` section: `var(--bg)` - `#vendors` section: `var(--or)` - Footer: `var(--ink)` **Gradient text** (hero title, budget total, footer logo): ```css background: linear-gradient(135deg, var(--mg) 0%, var(--ye) 33%, var(--cy) 66%, var(--or) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; ``` **Hero title animation:** ```css @keyframes gradshift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(30deg); } } animation: gradshift 4s ease-in-out infinite alternate; ``` ---

**Audience**: Social planners aged 20–35 who describe events with words like "vibe", "main character energy", and "going all out". They plan birthday bashes, friend gatherings, and milestone celebrations. They are comfortable with expressive, maximalist UI and expect energy and personality from every screen. **Use cases**: Event creation flows, guest list management, budget dashboards, vendor booking, countdown timers, RSVP tracking, party theme selection. **Brand personality**: Joyful chaos with structure underneath. Loud, bold, and unapologetically colorful — but every element earns its place through clear function. The ONE memorable thing: **section backgrounds are solid accent colors** (magenta, cyan, yellow, orange), not white cards on white. Each section owns its hue completely. ---