A music-marketplace homepage that inverts the platform’s own heritage: instead of the classic aqua-on-white album page, the logged-out surface is a flat DARK charcoal #222222 stage (footer #333333) whose primary ink is a pale cyan-white #ecf3f4, with plain white reserved for nav and category links. The Bandcamp aqua #0cacd7 survives only in the tape-reel logo mark and links, and a transactional green #008000 is held strictly for prices — every other scrap of colour is supplied by album art, so the chrome is a cyan-cast greyscale and the covers do the shouting. Type is a single family, Helvetica Neue, weights 400 and 500 only, with NO display or mono face and tracking left normal even at the 32px hero, so hierarchy is built from size and the cyan/white ink split rather than weight or letter-spacing. The signature moment is a live “Selling right now” feed of album thumbnails ticking past with a price, a country flag and a relative timestamp (“Sold for €2 · 31 seconds ago”), each new item scaling in with a salesfeed-scale 0.33s ease-out animation, sat beneath giant hero stat-counters whose numbers are boxed in a pale-cyan #ecf3f4 highlight over dark text, flanked by hand-drawn outlined burst-stars as the only ornament. The search field is a borderless rgba(255,255,255,.08) fill at 3px radius and 36px tall; thumbnails frame at a 16px radius and controls at 3–4px; depth is refused in favour of light hairlines on the dark ground, with just a rgba(0,0,0,.1) 0 1px 1px hairline and a deep modal shadow doing all the elevation. Hover and focus rules and the responsive breakpoints live in two cross-origin stylesheets and were not captured; links underline on hover. Feels: utilitarian, artist-first, live, unpretentious.
⚠ needs-dashboard
Browse Bandcamp in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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 +@mediarules; 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#222222surface; the Bandcamp aqua#0cacd7survives 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.
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.
| 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 |
| 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 |
| 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.
"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.)#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.