W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Bandcamp
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/bandcamp/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/bandcamp/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Bandcamp
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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@1as the open-source rendering fallback for both heading and body roles.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Bandcamp
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Bandcamp
A clear hierarchy in Bandcamp's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ bandcamp-aqua #629AA9 accent-hover
→ bandcamp-aqua-deep #4A7E8C background
→ bandcamp-white #FFFFFF border
→ bandcamp-gray-light #CCCCCC identity
→ bandcamp-white #FFFFFF mark
→ bandcamp-aqua #629AA9 on-identity
→ bandcamp-aqua #629AA9 primary
→ bandcamp-aqua #629AA9 primary-hover
→ bandcamp-aqua-deep #4A7E8C surface
→ bandcamp-surface #F5F5F5 surface-elevated
→ bandcamp-white #FFFFFF text-primary
→ bandcamp-ink #202020 text-secondary
→ bandcamp-charcoal #444444 text-tertiary
→ bandcamp-gray #888888 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from bandcamp)
Light mode (15 roles)
accent
→ bandcamp-aqua accent-hover
→ bandcamp-aqua-deep background
→ bandcamp-white border
→ bandcamp-gray-light error
→ bandcamp-ink primary
→ bandcamp-aqua primary-hover
→ bandcamp-aqua-deep success
→ bandcamp-aqua surface
→ bandcamp-surface surface-elevated
→ bandcamp-white text-primary
→ bandcamp-ink text-secondary
→ bandcamp-charcoal text-tertiary
→ bandcamp-gray warning
→ bandcamp-aqua warning-hover
→ bandcamp-aqua-deep Dark mode (15 roles)
accent
→ bandcamp-aqua-light accent-hover
→ bandcamp-aqua background
→ bandcamp-ink border
→ bandcamp-charcoal error
→ bandcamp-aqua-light primary
→ bandcamp-aqua-light primary-hover
→ bandcamp-aqua success
→ bandcamp-aqua-light surface
→ bandcamp-charcoal surface-elevated
→ bandcamp-gray text-primary
→ bandcamp-white text-secondary
→ bandcamp-gray-light text-tertiary
→ bandcamp-gray warning
→ bandcamp-aqua-light warning-hover
→ bandcamp-aqua Rules (9 typed constraints)
error · 6 rules
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 rules
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.