# Bandcamp — Marketing Site Design Spec

> Source: bandcamp.com (live DOM, computed styles), 2026-07-30 (desktop 1512px).
> Coverage: logged-out homepage. Hover/focus states and breakpoints: not captured — 2 of the site's stylesheets are cross-origin (`sheetsBlocked: 2`) and hold the pseudo-class + `@media` rules; readable sheets carried none matching the real nav links. Dashboard (fan/artist account): behind login, `needs-dashboard`.
> Reality check: the queue hint ("utilitarian indie-editorial, artist-first") is half right — utilitarian, dense and artist-first, yes, but the homepage is NOT the classic aqua-on-white album-page look. It is a DARK charcoal `#222222` surface; the Bandcamp aqua `#0cacd7` survives only in the logo mark and links, the ink is a pale cyan-white `#ecf3f4`, and the signature moment is the animated live "Selling right now" sales feed plus hero stat-counters and outlined burst-star motifs.

## 1. Visual Theme & Atmosphere

A dark, utilitarian music marketplace that puts the music (and the money going to artists) first. The homepage is a flat charcoal `#222222` stage with a single humanist grotesque (Helvetica Neue) doing every job — no display face, no decorative type. What makes it recognisable is content, not chrome: a live real-time "Selling right now" feed of album thumbnails ticking past ("Sold for €2 · 31 seconds ago"), giant hero stat-counters with the numbers boxed in a pale-cyan highlight, and hand-drawn outlined burst-stars scattered as the one piece of ornament. Colour is rationed hard — the aqua `#0cacd7` logo mark and links, and a transactional green `#008000` for prices — everything else is a cyan-cast greyscale. Deliberately avoids gradients, glass, shadows-as-structure and any hero mockup. Feels: utilitarian, artist-first, live, unpretentious.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#222222` | Page background (dark charcoal) |
| surface-footer | `#333333` | Footer band |
| surface-alt | `#272727` / `#2c2c2c` | Occasional inset panels |
| white | `#ffffff` | Light card surfaces (album pages), logo wordmark, star strokes |
| wash-08 | `rgba(255,255,255,.08)` | Search field fill, subtle panel fills |
| wash-16 | `rgba(255,255,255,.16)` | Hover fills, stronger insets |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#ecf3f4` | Primary text — a pale cyan-white (most-used colour, 1275×) |
| white | `#ffffff` | Nav + category links, high-contrast labels |
| ink-soft | `#f8f8f8` | Footer text, tertiary |
| muted | `#8f8f8f` | Category icons, captions, muted labels |
| ink-72 | `rgba(255,255,255,.72)` | Secondary text on dark |
| on-highlight | `#222222` | Dark text inside the pale hero-stat highlight |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| aqua | `#0cacd7` | The Bandcamp brand mark + links (the one brand hue) |
| highlight | `#ecf3f4` | Background of the boxed hero stat numbers (with `#222222` text) |
| buy-green | `#008000` | Prices / buy affordance — transactional only |

Rule: chrome is a cyan-cast greyscale on charcoal; aqua `#0cacd7` is reserved for the logo mark and links, green `#008000` for prices only. Never introduce a second decorative colour — album art supplies all the colour on the page.

## 3. Typography Rules

- Font stack: `"Helvetica Neue", Helvetica, Arial, sans-serif` — ONE family across the entire page (2073×), no display or mono face. (Helvetica Neue is a system face; the preview uses the same stack — no webfont needed.)
- Body: 14px / 22px / 400 / `#ffffff`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1 hero) | 32 / 44.8 | 500 | normal |
| Section head ("Bandcamp Daily") | 24–32 | 500 | normal |
| Sub / card title (h3) | 12 / 20 | 400 | normal |
| Body | 14 / 22 | 400 | normal |
| Nav + category | 14 / 22 | 400 | normal |
| Caption ("Sold for … · 31 seconds ago") | 12–16 | 400 | normal |

Patterns: no display face, no bold-700 headlines — weight tops out at 500. Tracking is left NORMAL at every size, even the 32px hero. Hierarchy comes from size and the pale-cyan/white ink split, not from weight or letter-spacing.

## 4. Component Stylings

### Search field (nav)
- h 36px, bg `rgba(255,255,255,.08)`, NO border, radius 3px, text `#ffffff`, leading magnifier icon, placeholder "Search and discover music".

### Nav / category bar
- Top nav: "Sign up" / "Log in" as plain white text links (transparent bg, 0px radius). Logo mark is aqua `#0cacd7`, wordmark white.
- Category row: icon + label pairs (Digital music, Vinyl, Compact discs, Cassettes, T-shirts, Gift cards, Editorial, Radio, Clubs), 14/400 white labels with `#8f8f8f` icons.

### Buttons
- Homepage primary actions are text links, not filled buttons. The transactional CTA on product/album pages is a **green `#008000`** buy button. Filled 44px white/outline buttons at radius 4px seen on the page belong to the third-party consent widget — excluded from the brand spec.

### Sales-feed card ("Selling right now")
- Square album-art thumbnail, 16px radius on the framed variants, with a caption below: price + country flag + relative time (`#ecf3f4`, 12–16px). New items animate in with `salesfeed-scale 0.33s ease-out` (see §7).

### Hero stat highlight
- Live counter numbers wrapped in a pale-cyan box: bg `#ecf3f4`, text `#222222`, tight inline padding — a "marker highlight" over the charcoal headline.

### States
- Hover / focus: **not captured** — the pseudo-class rules live in the 2 cross-origin stylesheets. Observed behaviour: link/caption text underlines on hover (e.g. the active sales caption). Focus ring not readable; recommend a `2px #0cacd7` outline if reconstructing.

## 5. Layout Principles

- Full-bleed dark canvas; content left-aligned at a generous ~1200px+ working width (nav spans edge to edge with 40px side gutters).
- Nav: logo + search field (left), Sign up / Log in (right); a second full-width category bar beneath it.
- Hero: giant stat-counter sentence with boxed numbers, flanked by outlined burst-star SVGs, then the horizontal "Selling right now" live feed of album thumbnails with a pause/unpause control.
- Below the fold: "Bandcamp Daily" editorial section, discovery rows, dense multi-column footer.
- Footer: `#333333` band, `#f8f8f8` text, ~30 links in columns.

## 6. Depth & Elevation

- Radii: `16px` (framed thumbnails/cards, 67×), `4px` (small controls, 55×), `50%` (flags/avatars, 28×), `3px` (search field), `2px`.
- Shadows: mostly flat. Common hairline `rgba(0,0,0,.1) 0 1px 1px` (40×); a deep modal shadow `rgba(0,0,0,.16) 0 16px 40px, rgba(0,0,0,.1) …`; one grey glow `rgb(128,128,128) 0 0 5px`.
- Borders: `1px #ffffff` (69×), `1px rgba(255,255,255,.32)`, `2px #ecf3f4`, `1px rgba(255,255,255,.08)` — light hairlines on the dark ground do most of the structural work.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.1s | ease | link/hover fades |
| background-image | 0.15s | ease-in-out | thumbnail swaps |
| height | 0.5s | ease-out | expanding panels |
| all | 0.2s | ease / ease-out | misc controls |
| right | 0.3s | ease | drawer/slide |

- Signature animation: **`salesfeed-scale 0.33s ease-out`** (40×) scales each new item into the live "Selling right now" feed; `fade-in 0.33s ease-in` for content reveals.
- No animation library detected (no GSAP/Framer/Lenis). `@keyframes` bodies live in the blocked cross-origin sheets, so their step definitions were not read (the names above come from computed `animation-name`).
- `prefers-reduced-motion`: no honouring block found in readable sheets — treat the live feed as an accessibility risk and gate it under reduced-motion if rebuilding.

## 8. Backgrounds, Effects & WebGL

- Flat charcoal canvas — no canvas/WebGL, no background video, no grain, no backdrop-filter.
- The only gradients are **album-art-derived scrims**: `linear-gradient(rgb(99,86,79), rgba(99,86,79,.7) 50%, rgba(153,136,128,0) 100%)` and seven siblings — each computed from the dominant colour of the album currently featured, fading it into the dark. These are content-derived, not brand tokens; do not treat them as a fixed palette.
- 46 raster layers (album covers) carry all the colour on the page.

## 9. Do's and Don'ts

### Do
- Keep the canvas dark charcoal `#222222` (footer `#333333`) and the ink a pale cyan-white `#ecf3f4`.
- Use ONE family, Helvetica Neue, weights 400/500 only, tracking normal at every size.
- Reserve aqua `#0cacd7` for the logo mark and links, and green `#008000` for prices.
- Let album art be the only colour; frame thumbnails at 16px radius, controls at 3–4px.
- Make the live sales feed the hero: real thumbnails, price + flag + relative time, items scaling in at `salesfeed-scale 0.33s ease-out`.
- Box hero stat numbers in a pale-cyan `#ecf3f4` highlight with `#222222` text.
- Use light hairlines on the dark ground for structure, not shadows.

### Don't
- Don't render Bandcamp as aqua-on-white — that is the album page, not the homepage.
- Don't add a display or mono face, or push any heading to weight 700.
- Don't add a second decorative accent, gradient chrome, glass or drop-shadow depth.
- Don't letter-space headings or set them in uppercase.
- Don't run the live feed without a reduced-motion fallback.

## 10. Responsive Behavior

- Breakpoints: **not captured** — no `@media` width rules in the readable stylesheets; the 2 cross-origin sheets (`sheetsBlocked: 2`) hold Bandcamp's responsive rules. `darkSchemeBlocks: 0`, `containerQueries: 0`, `reducedMotionBlocks: 0` in readable sheets.
- No dark-mode toggle — the site IS dark by construction.
- Captured at desktop 1512px only; mobile layout not verified.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#222222` · Text `#ecf3f4` · Muted `#8f8f8f` · Border `rgba(255,255,255,.08)` · Accent `#0cacd7`
- Font: `"Helvetica Neue", Helvetica, Arial, sans-serif` · Body: 14px · Radius: 3–4px control / 16px card · Control height: 36px
- Focus: not captured (recommend `2px #0cacd7` outline) · Hover: link text underlines
- Prices: green `#008000`

<bandcamp-marketing_design_language>
Use the Bandcamp homepage design language: a dark, utilitarian music marketplace on a charcoal #222222 canvas (footer #333333) with pale cyan-white #ecf3f4 as the primary ink and plain #ffffff for nav/category links. ONE type family only — Helvetica Neue — weights 400/500, no display or mono face, tracking normal even at the 32px hero; hierarchy comes from size and the cyan/white ink split. Ration colour hard: aqua #0cacd7 for the logo mark and links, green #008000 for prices, and let album art supply everything else. Search field is a borderless rgba(255,255,255,.08) fill at 3px radius, 36px tall; thumbnails frame at 16px radius; structure is light hairlines on dark, not shadows. The signature is a live "Selling right now" feed of album thumbnails (price + country flag + "N seconds ago") whose new items scale in with salesfeed-scale 0.33s ease-out, plus hero stat-counters with numbers boxed in a pale-cyan #ecf3f4 highlight over #222222 text, and hand-drawn outlined burst-star motifs as the only ornament. Feels: utilitarian, artist-first, live, unpretentious. Avoid: rendering it aqua-on-white (that is the album page), adding a second decorative accent or gradient chrome, using a display/mono face or 700 weight, letter-spacing headings, or drop-shadow depth.
</bandcamp-marketing_design_language>