Sticker Book Dev

Apply this design skill

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

Design Language

All colors use OKLCH. The palette is warm craft-paper tones with saturated sticker accent pops.

| Token | Value | Usage |
|---|---|---|
| `--paper` | `oklch(0.96 0.005 100)` | Page background, graph-paper base |
| `--grid-line` | `oklch(0.90 0.01 220)` | Graph-paper grid stroke |
| `--vinyl-white` | `oklch(0.99 0 0)` | Sticker border "vinyl" ring |
| `--text-dark` | `oklch(0.20 0 0)` | Primary heading text |
| `--text-mid` | `oklch(0.45 0.01 100)` | Subtitles, secondary copy |
| `--tape-bg` | `oklch(0.88 0.04 85)` | Masking-tape section labels |
| `--tape-text` | `oklch(0.35 0.02 85)` | Text on tape labels |
| `--peel-shadow` | `oklch(0.80 0.01 60)` | Peel-corner drop shadow |

### Sticker Accent Colors (per-sticker via CSS custom properties)
| Sticker | `--sticker-bg` | Hue family |
|---|---|---|
| Wavelength (hex) | `oklch(0.65 0.2 280)` | Indigo |
| Terracotta (hex) | `oklch(0.60 0.15 50)` | Warm orange |
| Nightjar (hex) | `oklch(0.45 0.12 160)` | Teal |
| Vite patch (circle) | `oklch(0.70 0.18 300)` | Violet |
| Deno patch (circle) | `oklch(0.55 0.10 180)` | Cyan |
| Astro patch (circle) | `oklch(0.65 0.15 30)` | Coral |
| Trading: Rust collab | `oklch(0.50 0.14 280)` | Purple |
| Trading: OSS buddies | `oklch(0.55 0.12 145)` | Green |
| Trading: Co-speakers | `oklch(0.60 0.13 30)` | Vermillion |
| Recurse Center | `oklch(0.35 0.08 145)` | Dark green |

### Special Surface Colors
- **Holographic conic gradient:** Sweeps hue 0-360 at `oklch(0.75-0.80 0.2 {hue})` — mouse-tracked center
- **Gold badge:** `oklch(0.70-0.82 0.10-0.14 78-90)` multi-stop linear gradient
- **Address label dashed border:** `oklch(0.82 0.01 100)`
- **Highlight marker:** `oklch(0.92 0.08 280)` — behind hero title word

Agent instructions (SKILL.md)(advanced)

Design Skill

**Brand archetype:** A developer's personal portfolio disguised as a physical sticker collection page. Think laptop-lid culture meets graph-paper notebook — not a corporate resume.

**Target audience:** Developers, hiring managers, and OSS collaborators who appreciate craft and personality. They have sticker-covered laptops, attend JSConf, contribute to open source, and judge portfolios by taste not templates.

**Use cases:** Developer portfolio, personal site, open-source showcase, conference speaker page, side-project gallery, contribution tracker, any maker who ships things and wants to show them as collectible trophies.

**Brand personality:** Playful precision. The voice is informal and proud — every shipped project earns a sticker. The aesthetic sits between a DevRel swag table and a carefully curated notebook page.

---

Reviews

Related styles

Candy Shop 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. The palette is warm craft-paper tones with saturated sticker accent pops. | Token | Value | Usage | |---|---|---| | `--paper` | `oklch(0.96 0.005 100)` | Page background, graph-paper base | | `--grid-line` | `oklch(0.90 0.01 220)` | Graph-paper grid stroke | | `--vinyl-white` | `oklch(0.99 0 0)` | Sticker border "vinyl" ring | | `--text-dark` | `oklch(0.20 0 0)` | Primary heading text | | `--text-mid` | `oklch(0.45 0.01 100)` | Subtitles, secondary copy | | `--tape-bg` | `oklch(0.88 0.04 85)` | Masking-tape section labels | | `--tape-text` | `oklch(0.35 0.02 85)` | Text on tape labels | | `--peel-shadow` | `oklch(0.80 0.01 60)` | Peel-corner drop shadow | ### Sticker Accent Colors (per-sticker via CSS custom properties) | Sticker | `--sticker-bg` | Hue family | |---|---|---| | Wavelength (hex) | `oklch(0.65 0.2 280)` | Indigo | | Terracotta (hex) | `oklch(0.60 0.15 50)` | Warm orange | | Nightjar (hex) | `oklch(0.45 0.12 160)` | Teal | | Vite patch (circle) | `oklch(0.70 0.18 300)` | Violet | | Deno patch (circle) | `oklch(0.55 0.10 180)` | Cyan | | Astro patch (circle) | `oklch(0.65 0.15 30)` | Coral | | Trading: Rust collab | `oklch(0.50 0.14 280)` | Purple | | Trading: OSS buddies | `oklch(0.55 0.12 145)` | Green | | Trading: Co-speakers | `oklch(0.60 0.13 30)` | Vermillion | | Recurse Center | `oklch(0.35 0.08 145)` | Dark green | ### Special Surface Colors - **Holographic conic gradient:** Sweeps hue 0-360 at `oklch(0.75-0.80 0.2 {hue})` — mouse-tracked center - **Gold badge:** `oklch(0.70-0.82 0.10-0.14 78-90)` multi-stop linear gradient - **Address label dashed border:** `oklch(0.82 0.01 100)` - **Highlight marker:** `oklch(0.92 0.08 280)` — behind hero title word

**Brand archetype:** A developer's personal portfolio disguised as a physical sticker collection page. Think laptop-lid culture meets graph-paper notebook — not a corporate resume. **Target audience:** Developers, hiring managers, and OSS collaborators who appreciate craft and personality. They have sticker-covered laptops, attend JSConf, contribute to open source, and judge portfolios by taste not templates. **Use cases:** Developer portfolio, personal site, open-source showcase, conference speaker page, side-project gallery, contribution tracker, any maker who ships things and wants to show them as collectible trophies. **Brand personality:** Playful precision. The voice is informal and proud — every shipped project earns a sticker. The aesthetic sits between a DevRel swag table and a carefully curated notebook page. ---