Bandcamp Design System

Overview

Bandcamp's chrome is so utilitarian it borders on a position — a white canvas, an ink hairline border on every container, and a body face that has not changed since 2008. The default page background is {colors.page-white} (#f8f8f8 — the merged near-white cluster that also covers literal #ffffff), and the page text is {colors.ink} (#222222). The same #222222 hex carries 1312 occurrences across the page, broken down as 632 borders, 592 text glyphs, and 87 background fills — text duty and structural duty performed by a single tone. Hairline marketplace: where Spotify uses near-black surfaces to push album art forward, Bandcamp uses a bright canvas and a 1px ink rule. The catalog tile is not a card lifted by shadow; it is a rectangle outlined in ink.

Type runs Helvetica Neue exclusively, with Arial fallback. There is no custom display face, no italic, no second family. The size scale is compact at 10–32px across five tiers, and the weight range is just three values — 400 regular, 500 medium for headings and the support-the-artist mark, and 700 for body emphasis. One uppercase eyebrow variant runs 14px / 400 with 0.56px letter-spacing, a small typographic flourish that distinguishes section labels from running text. Where most marketplace systems would license a wordmark face and a display typeface (Etsy uses Graphik, Discogs uses Inter), Bandcamp commits to the system sans the page would have rendered in 2003.

The shape language is a three-tier set with no middle ground: 16px for catalog cards and tiles (68 occurrences), 50% for avatar and play-button circles (21 occurrences), and 3–4px for form inputs (19 combined). There is essentially no 6–12px rounding in the system. A 3px shape is a control, a 16px shape is content, a 50% shape is a person or play affordance. Unlike the convention of softening every corner to 8px for a friendly feel, Bandcamp uses the radius gap itself as a hierarchy signal — adding 8px rounding to a primary button would collapse the distinction.

Key Characteristics:

• Single-color structural duty: {colors.ink} (#222222) carries 632 borders + 592 text occurrences. The hex doing typography and hairline geometry simultaneously is the system's tell.
• Link-as-accent: {colors.bandcamp-blue} (#0cacd7) appears only as a hyperlink tone in the --bandcamp-blue CSS variable. It never fills a button, never washes a banner.
• Single-yellow scarcity: {colors.yellow-support} (#ffba00) appears exactly once on the homepage — on the support-the-artist mark. Reserved as a brand voltage, used like a paper highlighter.
• Three-radius shape language: 16px tiles, 50% circles, 3–4px inputs. The absence of an 8px middle radius is the move.
• Six-step transparency-dark scale: --transparency-dark-8 through --transparency-dark-72 (rgb(34 34 34 / 8%–72%)) layered over white in place of drop shadows.
• Helvetica Neue across the entire system: five sizes, three weights, one uppercase variant. No display face, no italic.
• Asymmetric 1px × 16px tile padding (68 occurrences): a 1px vertical inset combined with 16px horizontal gutters — the hairline-and-gutter rhythm of the homepage grid.
• Hairline divider stack: {colors.hairline} (#e6e6e6 — the merged gray100/parchment100 cluster) at 1px between rows. List separation comes from rules, not gaps.

Colors

Ink & Structural

• Ink ({colors.ink} — #222222) — frequency 1312. Used as text (592), border (632), background (87), shadow (1). The system's load-bearing tone — page text color, primary border tone on every catalog tile, default foreground in --page-text-color and --default-foreground-color. The same hex doing typographic and structural work simultaneously is the move.
• Ink Soft ({colors.ink-soft} — #333333) — frequency 101. Used as background (53), border (48). The --gray600 step; appears on the footer strip and on secondary container fills where ink would be too heavy.
• Ink Muted ({colors.ink-muted} — #5d5d5d) — frequency 32. Used as gradient (12), text (10), border (10). The --gray500 step; metadata, timestamps, and the subtle gradient tones inside album-art lazy-load placeholders.
• Ink Quiet ({colors.ink-quiet} — #767676) — frequency 6. Used as text (3), border (3). The --gray400 and --disabled-text-color-light step; placeholder text and disabled-state foregrounds.
• Ink Disabled ({colors.ink-disabled} — #949494) — frequency 0 on the homepage but declared in --disabled-graphical-color-light and --disabled-text-color-dark. Disabled-state ink for icons and form labels.
• Near White ({colors.near-white} — #aaaaaa) — frequency 2. Used as text (1), border (1). The --gray300 step; the lightest visible gray before reaching hairline tones.

Surface

• Page White ({colors.page-white} — #f8f8f8) — frequency 371. Used as text (226), border (135), background (10). The merged near-white cluster covering literal #ffffff and #f8f8f8 — declared as --white, --gray100, --default-background-color, --menubar-background-color, and --page-background-color. The page canvas everywhere.
• Hairline ({colors.hairline} — #e6e6e6) — frequency 0 on the homepage but declared in --gray200 and --parchment100. The default 1px divider tone between list rows where ink would be too heavy.

Link

• Bandcamp Blue ({colors.bandcamp-blue} — #0cacd7) — frequency 0 occurrences on the rendered homepage but declared as --bandcamp-blue and --blue400. The signature link tone — visible on artist names, album titles, and inline hyperlinks. Reserved for text-link duty only; never fills a CTA.
• Artist Blue ({colors.artist-blue} — #0687f5) — frequency 0. The --artist-blue variable; reserved for artist-dashboard and editorial highlight contexts.
• Link Deep ({colors.link-deep} — #056277) — frequency 0. The --blue600 step; visited link tone and deep-link emphasis.
• Link Teal Dark ({colors.link-tealdark} — #007c9e) — frequency 0. The --blue500 step; mid-darkness link state.

Brand Accent

• Yellow Support ({colors.yellow-support} — #ffba00) — frequency 1. Used as background (1). The --yellow500 variable; appears exactly once on the homepage on the support-the-artist mark and on the persistent 42px header banner. The single saturated brand color in the system.
• Yellow Mark BG ({colors.yellow-mark-bg} — #fce097) — frequency 0 on the rendered page but declared as --mark-background-color and --yellow200. The pale-yellow fill behind highlighted text in editorial copy ("Fans have paid artists $1.72 billion using Bandcamp").

Parchment

• Parchment Cream ({colors.parchment-cream} — #ede3c2) — frequency 0. The --parchment200 step; reserved for special editorial surfaces.
• Parchment Amber ({colors.parchment-amber} — #ddae4d) — frequency 0. The --parchment500 mid-tone amber.
• Parchment Bronze ({colors.parchment-bronze} — #bc8a24) — frequency 0. The --parchment600 deepest amber, for editorial accents.

Semantic

• Green Tag ({colors.green-tag} — #2a8737) — frequency 0. The --green500 step; success and price-paid tagging.
• Red Error ({colors.red-error} — #e50a0a) — frequency 0. The --red500 and --text-color-error tone; form validation errors only.
• Red Soft ({colors.red-soft} — #fc675e) — frequency 0. The --red300 step; softer error tone for inline warnings.
• Orange Warning ({colors.orange-warning} — #e65225) — frequency 0. The --orange500 step; payment-issue and trial-warning text.

Shadow

• Shadow Ink ({colors.shadow-ink} — #000000) — frequency 13. Used as shadow (10), text (1), background (1), border (1). The rare drop-shadow color, applied at low opacity on the few elevated overlays where a hairline border alone would not separate the surface.

Typography

Font Family

The system runs Helvetica Neue with a quoted family declaration: "Helvetica Neue", Arial, sans-serif. Every single typography signature extracted from the homepage uses the same family — there is no custom display face, no italic variant, no secondary family for headlines. Where Spotify licenses SpotifyMixUI and The Verge licenses Manuka 900, Bandcamp commits to system sans.

Hierarchy

Principles

The weight range is just 400 / 500 / 700, with 500 carrying display and headings and 500 also carrying button labels — heading weight and button weight are the same value. Hierarchy comes from size and spacing rather than weight contrast. Where most editorial systems run a 300–900 weight ladder, Bandcamp's hierarchy lives in the size jump from 14px body to 24px heading to 32px display, with line-height tightening as size grows (1.5714 → 1.5 → 1.4).

The single uppercase eyebrow variant at 14px / 400 with 0.56px letter-spacing is the only typographic flourish. Bandcamp avoids the weight-as-accent move common to fintech and developer-tool systems — it reads more like a 1990s newsweekly page than a 2020s SaaS app.

Layout

Spacing System

• Base unit: 4px with 6px and 8px sub-steps. The dominant gap is {spacing.xs-plus} 6px (121 occurrences) and the dominant catalog tile padding is {spacing.asym-row} 1px 16px (68 occurrences — a 1px vertical inset combined with 16px horizontal gutters).
• Tokens: {spacing.hairline} 1px · {spacing.xs} 4px · {spacing.xs-plus} 6px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.asym-row} 1px 16px · {spacing.card-pad} 12px 0px.
• Card internal padding: {spacing.asym-row} (1px × 16px) on catalog tiles and list rows — the asymmetry is deliberate; vertical gutters collapse to a hairline while horizontal padding stays generous.
• Section gutters: {spacing.lg} (24px) between major homepage sections; {spacing.base} (16px) between cards in catalog grids.

Grid & Container

• Full-width canvas: the page has no fixed max-width container at desktop breakpoints. Catalog grids fill the viewport width, capped only by the body-text width variable --body-text-width: 700px used for editorial prose.
• Catalog grid: 4 columns on large desktop dropping to 2 on tablet and 1 on mobile, with 16px gutters and 16px-rounded tiles.
• Header: persistent 53px top nav (--header-height: 53px, --bc-menubar-height: 53px) with the Bandcamp wordmark left, primary nav center-left, and search + account controls right.
• Yellow banner: persistent 42px-tall (--page-banner-height: 42px) header strip in {colors.yellow-support} (#ffba00) above the menubar — the single high-saturation surface in the chrome.
• Footer cap: --bc-maximal-footer-height: 400px upper bound for the dark footer band, kept proportional to viewport.

Whitespace Philosophy

The system favors horizontal generosity and vertical compression. The 1px-by-16px asymmetric padding on catalog tiles is the clearest signal: vertical rhythm collapses to hairline rules while horizontal gutters stay generous. The result is a dense vertical scroll where catalog tiles stack tightly but never feel cramped because horizontal space breathes. Editorial body copy uses a 700px column cap (--body-text-width) — readable line length is the only thing that gets generous vertical spacing.

Elevation

Shadow Philosophy: Bandcamp uses hairline-as-elevation. The whole page renders 11 total shadow occurrences in the extracted data, and none of them carry the layered drop-shadow geometry you would see on a Material-flavored marketplace. Instead, the system relies on 1px #222222 borders and the six-step --transparency-dark scale (8% through 72%) layered over white. Catalog tiles, dropdowns, dialogs, and form inputs all sit on the same flat plane — depth comes from border presence and the transparency scale, not drop shadows. Color-and-hairline-as-elevation: when something needs to stand out, it gets a 1px ink border or a yellow fill, not a softened shadow.

Shapes

The corner-radius system has three tiers with deliberate gaps:

• 16px ({rounded.card}) — 68 occurrences. Catalog tiles, album-art frames, content cards, and the editorial article tiles. The dominant rounding in the system.
• 50% ({rounded.circle}) — 21 occurrences. Avatar circles for artists and fans, play-button circles, and small icon-button backgrounds.
• 3–4px ({rounded.input} / {rounded.sm}) — 19 combined occurrences. Form inputs (3px specifically on <input> elements), small buttons, and inline badges.

There is essentially no 6–12px middle ground. The radius gap itself is the hierarchy signal: a 3px corner is a control, a 16px corner is content, a 50% corner is a person or a play affordance. Where most marketplaces soften everything to 8px, Bandcamp preserves the rhythm by refusing the middle.

Components

Navigation

top-nav — {colors.page-white} (#f8f8f8) fill, 53px tall (--bc-menubar-height: 53px), ink text. No bottom border by default — separation from the page comes from the persistent yellow banner above it, not a divider rule.

nav-link — Transparent fill, {colors.ink} text in {typography.body-md} (14px / 400), 0×14px padding. Hover state: text underlines.

yellow-banner — {colors.yellow-support} (#ffba00) fill, ink text in body type, 42px tall (--page-banner-height: 42px). The persistent header strip above the menubar — the only saturated chrome surface on the page. Carries the support-the-artist message and promotional callouts.

Inputs

search-input — White #ffffff fill, ink text, {rounded.input} (3px) radius, 5×10px padding, 36px tall, 1px {colors.ink} border. The global catalog search.

search-input-quiet — rgb(34 34 34 / 8%) fill (from the --transparency-dark-8 scale, also declared as --menubar-search-input-background-color), ink text, 3px radius, no border. The menubar-inline search variant where the page would crowd a visible 1px outline.

Buttons

button-primary — {colors.ink} fill, {colors.page-white} text, {typography.button-md} (14px / 500), {rounded.input} (3px) radius, 8×16px padding. The primary action button — used for "Buy Now" and "Continue" rather than a Bandcamp Blue fill. Inverts the convention of brand-colored primaries.

button-link — Transparent fill, {colors.bandcamp-blue} (#0cacd7) text in body type, no padding, no border. The dominant call-to-action style on the homepage — primary actions are styled as text links, not as filled buttons.

Cards

catalog-card — {colors.page-white} fill, ink text, {rounded.card} (16px) radius, 1px {colors.ink} border, asymmetric 1×16px padding ({spacing.asym-row}). The catalog tile — used for albums, fan collections, and editorial features. No drop shadow at rest; hover state adds a --transparency-dark-8 overlay.

card-cover — {colors.hairline} fill, 16px radius, no border, used as the lazy-load placeholder behind album-art images inside catalog tiles. The 16px radius matches the parent tile, producing a flush inner clip.

Marks & Accents

support-mark — {colors.yellow-mark-bg} (#fce097) fill, ink text in {typography.body-emphasis} (16px / 700), {rounded.sm} (4px) radius, 1×4px padding. The yellow-highlighted text mark applied to in-copy statistics ("paid artists $1.72 billion"). Maps to the <mark> HTML element.

eyebrow-label — Transparent fill, ink text in {typography.eyebrow-uppercase} (14px / 400, 0.56px tracking, uppercase). The single uppercase voice in the system — section eyebrows above heading rows.

tag-pill — Transparent fill, ink text in {typography.caption-sm} (12px / 400), 16px radius, 1×16px padding, 1px ink border. Genre tags and editorial labels — pill-shaped at the same 16px radius as the catalog tile they sit inside.

Lists

list-row — Transparent fill, ink body text, 12×0px padding ({spacing.card-pad}). Stacked list rows in the discover and fan-collection sections.

list-row-divider — {colors.hairline} (#e6e6e6) at 1px height, full row width. The default rule between list rows where ink would be too heavy.

Avatars & Controls

avatar-circle — {colors.hairline} placeholder fill, {rounded.circle} (50%) radius. The artist and fan avatar — appears in profile rows, fan-purchase strips, and the menubar account control.

play-button-circle — {colors.ink} fill, {colors.page-white} arrow icon, 50% radius, 6px padding. The track-row play affordance — a small ink circle, not a green or yellow fill.

Overlays

dropdown-menu — {colors.page-white} fill, ink text in body type, {rounded.sm} (4px) radius, 1px ink border, 8px padding. Account menus, sort dropdowns, and genre filters. No drop shadow — the 1px hairline separates the menu from the page.

Footer

footer-strip — {colors.ink} (#222222) fill (the rare ink background usage), {colors.page-white} text in {typography.caption-sm} (12px / 400), 24×16px padding. The dark footer band — the single moment in the system where the canvas inverts to ink. Caps at --bc-maximal-footer-height: 400px.

Links

link-text — Transparent fill, {colors.bandcamp-blue} (#0cacd7) text in body type. The signature link tone — applied to artist names, album titles, and inline hyperlinks. No underline at rest; underlines on hover.

link-text-deep — Transparent fill, {colors.link-deep} (#056277) text — visited-state and deeper-emphasis links.

Semantic

error-text — Transparent fill, {colors.red-error} (#e50a0a) text in caption type. The --text-color-error value; form validation errors only.

Do's and Don'ts

Do

• Use {colors.ink} (#222222) for both text and 1px borders — the same hex doing typographic and structural work is the system's tell.
• Apply {colors.bandcamp-blue} (#0cacd7) only on text links and inline hyperlinks. Pair it with {typography.body-md} (14px / 400).
• Render primary CTAs as text links (button-link) rather than filled buttons. The homepage's dominant call-to-action style is {colors.bandcamp-blue} underlined text, not a filled pill.
• Use 1px {colors.hairline} (#e6e6e6) rules between list rows where a full ink border would feel heavy.
• Keep catalog tiles at exactly {rounded.card} (16px) and form inputs at {rounded.input} (3px). The radius gap is the hierarchy signal.
• Apply {colors.yellow-support} (#ffba00) only on the persistent 42px banner and the support-the-artist mark — at most twice per page.

Don't

• Don't fill a primary button with {colors.bandcamp-blue} (#0cacd7). The hex lives in --bandcamp-blue but the variable is declared for text-link duty — there is zero bg usage on the homepage. Use {colors.ink} for filled primaries instead.
• Don't use 8px or 12px rounding anywhere. The system jumps directly from 4px controls to 16px cards. An 8px corner collapses the three-tier shape language and reads as Material default rather than Bandcamp.
• Don't reach for drop shadows for elevation. The page renders 11 total shadow occurrences; the convention is 1px {colors.ink} hairlines on a white canvas, supplemented by the --transparency-dark-8 through --transparency-dark-72 scale for overlay scrims.
• Don't use {colors.yellow-support} (#ffba00) on text. It is a background-only token (frequency 1, all bg). For yellow-highlighted text marks, use {colors.yellow-mark-bg} (#fce097) as the fill behind ink glyphs.
• Don't introduce italic, semibold (600), or any weight outside 400 / 500 / 700. The weight ladder is deliberately three values, with 500 carrying both display headings and button labels.
• Don't use {colors.parchment-cream} (#ede3c2) or any parchment tone on the marketplace homepage. Those tones live in --parchment100 through --parchment600 and are reserved for editorial sub-sections — applying them to a catalog tile would break the white-canvas voice.

Known Gaps

• Album-detail and artist-page layouts: the long-form record page where most listening happens is not captured here; the spec covers homepage and discover chrome only.
• Music player: the floating track-player widget that appears after a "play" click has playback controls, scrubber, and volume that are not extracted in this DESIGN.md.
• Cart and checkout flow: the purchase and pay-what-you-want widget uses additional form patterns and currency-selector styling not represented here.
• Bandcamp Daily editorial sub-brand: the parchment palette ({colors.parchment-cream} through {colors.parchment-bronze}) is declared in CSS variables but only fully expressed on the editorial sub-site — not in the marketplace homepage.
• Motion and hover transitions: card hover lightening uses the --transparency-dark-8 overlay, but the exact transition duration and easing curve are not captured.
• Dark mode / accessibility states: there is no dark canvas in the public surface; high-contrast and reduced-motion accommodations are not extracted in this spec.