# Bandcamp

> `bandcamp@1.0.0`

Bandcamp is an artist-first online music store and audio streaming service where fans buy music and merchandise directly from independent and label-affiliated artists. The brand voice is deliberately understated, catalog-forward, and artist-centric: the platform exists to surface the work, not to decorate it. Visually the identity is the signature Bandcamp Aqua — a muted cadet-blue / ocean-blue accent — applied sparingly against a near-white canvas and deep-ink text. Bandcamp's chrome is famously spare; the aqua reads as the one chromatic note in an otherwise neutral, library-like layout.


**Tags:** `bandcamp`, `music`, `indie`, `marketplace`, `streaming`, `light-first`, `minimal`

## Atoms

### Palette

**Bandcamp** · `bandcamp@1.0.0` · Proprietary — All Rights Reserved

> Bandcamp's brand palette built around the signature Bandcamp Aqua — the muted cadet-blue / ocean-blue color that fills the wordmark, the "Buy Now" button, and the player accent. The brand is light-first and minimalist: a near-white canvas, the aqua accent, deep ink for text, and a small neutral scale. Bandcamp's identity is deliberately understated — the platform is built around discovery of artist-uploaded music and direct artist support, and the visual restraint reflects an artist-first, catalog-forward voice. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `bandcamp-aqua` | Bandcamp Aqua | `#629AA9` |
| `bandcamp-aqua-deep` | Bandcamp Aqua Deep | `#4A7E8C` |
| `bandcamp-aqua-light` | Bandcamp Aqua Light | `#A4C5CE` |
| `bandcamp-ink` | Bandcamp Ink | `#202020` |
| `bandcamp-charcoal` | Bandcamp Charcoal | `#444444` |
| `bandcamp-gray` | Bandcamp Gray | `#888888` |
| `bandcamp-gray-light` | Bandcamp Gray Light | `#CCCCCC` |
| `bandcamp-surface` | Bandcamp Surface | `#F5F5F5` |
| `bandcamp-white` | Bandcamp White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `bandcamp-white` | `#FFFFFF` |
| `surface` | `bandcamp-surface` | `#F5F5F5` |
| `surface-elevated` | `bandcamp-white` | `#FFFFFF` |
| `text-primary` | `bandcamp-ink` | `#202020` |
| `text-secondary` | `bandcamp-charcoal` | `#444444` |
| `text-tertiary` | `bandcamp-gray` | `#888888` |
| `primary` | `bandcamp-aqua` | `#629AA9` |
| `primary-hover` | `bandcamp-aqua-deep` | `#4A7E8C` |
| `accent` | `bandcamp-aqua` | `#629AA9` |
| `accent-hover` | `bandcamp-aqua-deep` | `#4A7E8C` |
| `warning` | `bandcamp-aqua` | `#629AA9` |
| `warning-hover` | `bandcamp-aqua-deep` | `#4A7E8C` |
| `error` | `bandcamp-ink` | `#202020` |
| `success` | `bandcamp-aqua` | `#629AA9` |
| `border` | `bandcamp-gray-light` | `#CCCCCC` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `bandcamp-ink` | `#202020` |
| `surface` | `bandcamp-charcoal` | `#444444` |
| `surface-elevated` | `bandcamp-gray` | `#888888` |
| `text-primary` | `bandcamp-white` | `#FFFFFF` |
| `text-secondary` | `bandcamp-gray-light` | `#CCCCCC` |
| `text-tertiary` | `bandcamp-gray` | `#888888` |
| `primary` | `bandcamp-aqua-light` | `#A4C5CE` |
| `primary-hover` | `bandcamp-aqua` | `#629AA9` |
| `accent` | `bandcamp-aqua-light` | `#A4C5CE` |
| `accent-hover` | `bandcamp-aqua` | `#629AA9` |
| `warning` | `bandcamp-aqua-light` | `#A4C5CE` |
| `warning-hover` | `bandcamp-aqua` | `#629AA9` |
| `error` | `bandcamp-aqua-light` | `#A4C5CE` |
| `success` | `bandcamp-aqua-light` | `#A4C5CE` |
| `border` | `bandcamp-charcoal` | `#444444` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `bandcamp-white` | `#FFFFFF` |
| `on-identity` | `bandcamp-aqua` | `#629AA9` |
| `background` | `bandcamp-white` | `#FFFFFF` |
| `surface` | `bandcamp-surface` | `#F5F5F5` |
| `surface-elevated` | `bandcamp-white` | `#FFFFFF` |
| `text-primary` | `bandcamp-ink` | `#202020` |
| `text-secondary` | `bandcamp-charcoal` | `#444444` |
| `text-tertiary` | `bandcamp-gray` | `#888888` |
| `primary` | `bandcamp-aqua` | `#629AA9` |
| `primary-hover` | `bandcamp-aqua-deep` | `#4A7E8C` |
| `accent` | `bandcamp-aqua` | `#629AA9` |
| `accent-hover` | `bandcamp-aqua-deep` | `#4A7E8C` |
| `mark` | `bandcamp-aqua` | `#629AA9` |
| `border` | `bandcamp-gray-light` | `#CCCCCC` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `wordmark` | `heading` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.wordmark.fill`

- **allowed:** bandcamp-aqua, bandcamp-ink, bandcamp-white
- **forbidden:** bandcamp-aqua-deep, bandcamp-aqua-light, bandcamp-gray, bandcamp-gray-light, bandcamp-charcoal

> Bandcamp publishes three wordmark variants — aqua, black (ink), and white — on its public buttons / logos page. The aqua-deep and aqua-light variants exist as interactive-state colors on the primary action, not as wordmark fills, and the neutral grays are reserved for body text and dividers. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Bandcamp's wordmark is flat-color by design — applying gradients, shadows, or arbitrary recoloring conflicts with the brand's deliberately understated, catalog-forward voice. The aqua / ink / white variants documented on bandcamp.com/buttons are the only approved fills. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Bandcamp Ink (#202020) on Bandcamp White (#FFFFFF) gives ~17:1 — well clear of WCAG 2.1 Level AA. This rule encodes the floor any new foreground / background role pairing must clear on the light canvas. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Bandcamp Aqua (#629AA9) on white gives ~3.3:1 — just clear of WCAG 2.1 AA-large. The aqua is functional as a primary CTA fill and an accent on white but is too muted for small body text on the same canvas; treat it as an interactive / accent color, not as a text color. 

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text, validation-failure

> Bandcamp Aqua is reserved for the wordmark, the "Buy Now" CTA, and the player's accent. Using it for body text collapses its readability margin to below AA, and using it for validation-failure / error states collides with its established positive-action meaning. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The aqua-on-white pairing sits near the AA-large floor; every new role pairing involving the aqua needs an explicit contrast check. 

### 💡 recommendation (3)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 600, 700

> Bandcamp's marketing and player chrome use the system sans-serif stack at Regular (400) and Bold (700) for most chrome, with Medium (500) and Semibold (600) used sparingly. The brand's understated voice argues against the heaviest display weights — let the catalog work carry the visual weight, not the type. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.3`

> Bandcamp uses a single-family system stack for both headings and body, distinguished by size and weight rather than family change. A 1.3× ratio between heading and body preserves hierarchy without forcing a louder typographic register than the brand voice supports. 

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** bandcamp-white, bandcamp-ink, bandcamp-surface
- **doesNotPairWith:** bandcamp-aqua-light, bandcamp-gray

> The aqua reads cleanest against the white canvas, against the deep ink, or on the pale surface gray. Pairing it against the lighter aqua tint or the mid-gray collapses the contrast and softens the brand's only chromatic note. 

## Provenance

- **Source:** <https://bandcamp.com/buttons>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Bandcamp, the Bandcamp wordmark, and the aqua "BC" mark are trademarks of Bandcamp (a subsidiary of Songtradr). This atom captures brand-atoms' read of Bandcamp's publicly observable identity (the marketing site, the public buttons / logos asset page at bandcamp.com/buttons, and the cross-cited brand-color values from third-party aggregators). It is not an official Bandcamp brand-guidelines document. 
- **Imported:** `2026-05-19`
- **Notes:** Bandcamp publishes button and logo variants at bandcamp.com/buttons but does not publish hex values in the page text. The canonical aqua (#629AA9) is cross-cited by htmlcolors.com and designpieces.com and matches Bandcamp's own filename convention for the aqua wordmark asset. Bandcamp's marketing site uses a system-font stack; this atom substitutes `inter@1` as the open-source rendering fallback for both heading and body roles. 

---

*Generated by the brand-atoms converter. Source: `bandcamp@1.0.0` from the encyclopedia.*