Candy Shop Dev

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/candy-shop-dev and apply its design language to my project

Design Language

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

| Token | OKLCH Value | Role |
|---|---|---|
| `--bg` | `oklch(0.97 0.03 330)` | Warm pink-tinted off-white — page background |
| `--pink` | `oklch(0.75 0.18 350)` | Bubblegum pink — primary accent, nav logo, CTA button, link pills |
| `--mint` | `oklch(0.82 0.15 160)` | Spearmint green — secondary accent, gumballs, link pills |
| `--lemon` | `oklch(0.92 0.15 95)` | Lemon yellow — tertiary accent, bio highlights, gumballs |
| `--grape` | `oklch(0.72 0.18 300)` | Grape purple — quaternary accent, card patterns, link pills |
| `--blue-rasp` | `oklch(0.70 0.15 240)` | Blue raspberry — quinary accent, gumballs, link pills |
| `--text` | `oklch(0.30 0.05 330)` | Dark warm-tinted — all body text, headings |
| `--text-light` | `oklch(0.45 0.04 330)` | Muted warm — descriptions, stats, secondary text |

**Card tint system** (pastel versions of each accent, used as card backgrounds):

| Token | OKLCH Value | Used on |
|---|---|---|
| `--card-pink` | `oklch(0.93 0.06 350)` | Project card "Bubble Pop" |
| `--card-mint` | `oklch(0.93 0.06 160)` | Project card "Sugar Rush" |
| `--card-lemon` | `oklch(0.93 0.06 95)` | Project card "Gummy Grid", bio highlight |
| `--card-grape` | `oklch(0.93 0.06 300)` | Project card "Wrapper", bio highlight |
| `--card-blue` | `oklch(0.93 0.06 240)` | Project card "Flavor Text" |

**Nav backdrop**: `oklch(0.97 0.03 330 / 0.85)` with `backdrop-filter: blur(16px)`.

**Nav border**: `2px solid oklch(0.90 0.04 330)`.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

**Audience**: Early-career developers (students, junior engineers, bootcamp grads) who treat their portfolio as personal expression. They want to stand out on Twitter/TikTok, not blend into a sea of grey minimalism. They care about craft, open source, and having fun with code.

**Use cases**: Developer portfolios, personal sites, open-source project showcases, creative coding landing pages, tech-skill visualizations, side-project galleries.

**Brand personality**: Playful but technically credible. The candy metaphor (gumball machine, flavor wheel, wrapper textures) wraps real engineering work in joy. The ONE memorable thing: **your tech stack is candy in a gumball machine** — each skill is a labeled, colored sphere you can hover and inspect.

---

Reviews

Related styles

Sticker Book Dev@claude-code

Scatter Pin Studio@claude-code

Watercolor Wash Blog@claude-code

Packet Sniffer Dev@claude-code

Organic Blob Portfolio@claude-code

Illustrated Eco Brand@claude-code

All colors use OKLCH and are defined as CSS custom properties on `:root`. | Token | OKLCH Value | Role | |---|---|---| | `--bg` | `oklch(0.97 0.03 330)` | Warm pink-tinted off-white — page background | | `--pink` | `oklch(0.75 0.18 350)` | Bubblegum pink — primary accent, nav logo, CTA button, link pills | | `--mint` | `oklch(0.82 0.15 160)` | Spearmint green — secondary accent, gumballs, link pills | | `--lemon` | `oklch(0.92 0.15 95)` | Lemon yellow — tertiary accent, bio highlights, gumballs | | `--grape` | `oklch(0.72 0.18 300)` | Grape purple — quaternary accent, card patterns, link pills | | `--blue-rasp` | `oklch(0.70 0.15 240)` | Blue raspberry — quinary accent, gumballs, link pills | | `--text` | `oklch(0.30 0.05 330)` | Dark warm-tinted — all body text, headings | | `--text-light` | `oklch(0.45 0.04 330)` | Muted warm — descriptions, stats, secondary text | **Card tint system** (pastel versions of each accent, used as card backgrounds): | Token | OKLCH Value | Used on | |---|---|---| | `--card-pink` | `oklch(0.93 0.06 350)` | Project card "Bubble Pop" | | `--card-mint` | `oklch(0.93 0.06 160)` | Project card "Sugar Rush" | | `--card-lemon` | `oklch(0.93 0.06 95)` | Project card "Gummy Grid", bio highlight | | `--card-grape` | `oklch(0.93 0.06 300)` | Project card "Wrapper", bio highlight | | `--card-blue` | `oklch(0.93 0.06 240)` | Project card "Flavor Text" | **Nav backdrop**: `oklch(0.97 0.03 330 / 0.85)` with `backdrop-filter: blur(16px)`. **Nav border**: `2px solid oklch(0.90 0.04 330)`. ---

**Audience**: Early-career developers (students, junior engineers, bootcamp grads) who treat their portfolio as personal expression. They want to stand out on Twitter/TikTok, not blend into a sea of grey minimalism. They care about craft, open source, and having fun with code. **Use cases**: Developer portfolios, personal sites, open-source project showcases, creative coding landing pages, tech-skill visualizations, side-project galleries. **Brand personality**: Playful but technically credible. The candy metaphor (gumball machine, flavor wheel, wrapper textures) wraps real engineering work in joy. The ONE memorable thing: **your tech stack is candy in a gumball machine** — each skill is a labeled, colored sphere you can hover and inspect. ---