What is Bandcamp's primary brand color?

Bandcamp does not run a single brand voltage in the conventional sense. Ink #222222 carries 1312 occurrences across text (592), border (632), and surface fills (87) — the same hex doing typographic and structural work simultaneously. Bandcamp Blue #0cacd7 lives in the --bandcamp-blue CSS variable but appears only as the link tone, never on a button fill. Yellow #ffba00 is the single saturated accent and is used exactly once on the page, on the support-the-artist mark. The brand identity is ink-on-white-on-hairlines, not a colored CTA.

Does Bandcamp have a dark mode?

No. The canvas is Page White #ffffff at every breakpoint, the page text is #222222, and the menubar background is the same #ffffff as the page. The system uses six-step transparency-dark variables (--transparency-dark-8 through --transparency-dark-72) layered over white to fake elevation rather than swapping the canvas. There is no light-on-dark inversion anywhere in the listening or catalog interface — the printable-page aesthetic is core to the identity and breaks if the surface ever turns black.

What typography does Bandcamp use?

Bandcamp runs Helvetica Neue exclusively, with an Arial fallback and the system sans-serif as final fallback. No custom display face, no italic, no second family. The size range is compact at 10–32px across five tiers (--bc-font-size-100 through --bc-font-size-900 in the source CSS), and the weight range is just three values — 400 regular, 500 medium for headings and buttons, and 700 bold for emphasis. There is one uppercase variant at 14px with 0.56px letter-spacing, used on small eyebrow labels. The absence of a display typeface is the typographic equivalent of letting album art carry the page.

Why does Bandcamp use three corner radii with no middle ground?

The radii are 16px (68 occurrences) for catalog tiles and cards, 50% (21 occurrences) for avatar and play-button circles, and 3–4px (19 combined occurrences) for form inputs. There is essentially no 6–12px middle ground — the system jumps directly from typewriter-tight 3px inputs to generous 16px cards. The result is a quiet hierarchy where every element announces its category through corners alone: a 3px shape is a control, a 16px shape is content, a 50% shape is a person or play affordance. Adding 8px rounding to a button would collapse the distinction.

Why does Bandcamp avoid drop shadows?

Shadows are essentially absent from the page chrome. The extracted shadow color count is 11 total occurrences across the whole page, and the system substitutes 1px #222222 hairlines on a white canvas for elevation. Catalog tiles, dialogs, dropdowns, and form inputs all rest on the same flat plane — depth comes from border presence and the six-step transparency-dark scale (rgb(34 34 34 / 8%) up to rgb(34 34 34 / 72%)) layered on top of #ffffff. The visual result reads like a printed page where ink does the structural work; a shadow would pull the system toward Material conventions it deliberately refuses.

Bandcamp Design System

Bandcamp's design system as a DESIGN.md file.

About Bandcamp DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source bandcamp.com

Music, Video & Streaming

Bandcamp's homepage reads like a community bulletin board printed on a laser printer — white canvas, ink-black hairlines, system sans, almost no chrome between the visitor and the music. The default page background is #ffffff, the page text is #222222, and the same #222222 hex is the default border tone for every catalog tile, list rule, and form input. Where Spotify uses near-black surfaces to push album art forward, Bandcamp uses a bright white canvas and a 1px ink hairline. The single saturated brand color on the page is Yellow #ffba00, applied once to the support-the-artist mark — every other accent comes from album artwork inside the 16px-rounded catalog tiles. Bandcamp Blue #0cacd7 exists, but only as a link tone; it never fills a button.

This DESIGN.md file packages the system into a single machine-readable spec following the Google Labs DESIGN.md specification. Inside: 22 color tokens organized into ink, surface, link, parchment, and semantic roles drawn from the 94 :root CSS variables Bandcamp exposes (gray100–gray700, parchment100–600, the bandcamp-blue and artist-blue, plus a six-step transparency-dark scale); 11 typography tokens covering display 32px down to micro 10px in Helvetica Neue at weights 400, 500, and 700; 4 corner radii (16px, 4px, 3px, 50%); a 9-step spacing scale from 1px hairline padding through 24px section gutters; and 22 component specifications covering catalog cards, link-styled buttons, search inputs, avatar circles, navigation, and the yellow support mark.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Bandcamp's hairline-marketplace voice — white canvas, ink-on-ink borders, links as the primary accent, Helvetica Neue at modest weights, and yellow used once. Reference the tokens directly to paste hex values into Tailwind config or CSS variables. The system is worth studying because it inverts the marketplace convention: where Etsy and Discogs reach for warm cards, fills, and shadows, Bandcamp commits to a printable-page aesthetic that has barely shifted in fifteen years — restraint as a deliberate position against streaming-platform polish.

What makes it distinct

Hairline marketplaceink #222222 carries 632 border occurrences and 592 text occurrences, the same hex doing typographic and structural work
Link-as-accentBandcamp Blue #0cacd7 lives only on text links and underlines, never on a button fill
Single-yellow scarcityYellow #ffba00 appears exactly once on the page, reserved for the support-the-artist mark
Three-radius shape language16px cards, 50% avatar circles, 3px input fields, with zero 8–12px middle ground
Helvetica Neue onlyfive sizes, three weights, no italic, no custom display face anywhere in the catalog grid

Live at bandcamp.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

bandcamp.com

Explore Bandcamp

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.