Discogs Design System Deep-Dive

1. Brand Overview

Discogs is the ultimate nerd’s catalog. It’s a community-driven database and marketplace for physical music — vinyl, CDs, cassettes — run by people who care deeply about the details. The vibe is archivist-meets-collector: functional, no-frills, but with enough polish to feel like a product, not just a wiki.

The design philosophy here leans hard on clarity over decoration. The typography is straight out of a modernist playbook — Helvetica Neue with classic Helvetica fallbacks — no fancy serifs, no experimental display faces. This choice says: “We’re here to organize information, not distract you.” It works because Discogs is about metadata, not marketing gloss.

Color-wise, they’ve kept it muted and utilitarian. Black, white, and shades of gray dominate, with blues and cyans used sparingly for links and interactive states. The palette is functional — you never wonder if something is clickable — but it’s not trying to be “fun.” The occasional bright link color (#4dd2ff) feels almost retro, like an old-school hyperlink. This is consistent with the brand’s ethos: archival, trustworthy, slightly nostalgic.

Their UI components are built on small, repeatable units — clear spacing, predictable border radii, consistent shadows where depth is needed. The 8px grid is clearly in play, but they’re willing to break it with odd values (3.5px border radius, 13.008px font size) when it suits the design. That’s a collector’s mindset: precision down to the decimal.

Overall, Discogs’ design system is built for dense data tables, album listings, and marketplace grids. It’s about scan-ability, consistency, and making sure the interface stays out of the way of the content — which is the music itself. If you’re designing for Discogs, you’re designing for people who notice when the kerning’s off in a heading. This isn’t a lifestyle brand; it’s a tool for obsessive music lovers.

2. Color System

2.1 Primary Colors

Discogs doesn’t have a single “brand primary” in the way a tech startup might. Instead, it uses black as the default text and border color, white as the base background, and a deep blue (#2653d9) for certain interactive states (album covers, links). The blue is saturated enough to stand out against monochrome elements without feeling jarring. Psychologically, deep blue carries trust and stability — perfect for a community maintaining a massive database.

They also use a bright cyan (#4dd2ff) for links in certain contexts, which is eye-catching but not overwhelming. This split between deep blue and bright cyan keeps the interface from feeling too heavy. Compared to competitors like MusicBrainz (purple) or Spotify (green), Discogs’ palette is far more restrained.

2.2 Complete Palette

2.3 Color Relationships

The deep blue (#2653d9) pairs cleanly with white (#ffffff) for high-contrast CTAs. Bright cyan (#4dd2ff) on white is readable but borderline for WCAG AA if used for small text — better for larger link text or icons. The grays (#6c6b68, #d3d3d3, #444444, #878787) create a soft hierarchy without overpowering the primary colors.

Black-on-white is the default for text, ensuring maximum legibility. When interactive elements use blue or cyan, they’re almost always paired with white text for contrast. Dark mode isn’t explicitly supported in the extracted data — no inverted palette — so accessibility relies on color contrast and weight rather than alternate themes.

2.4 Usage Guide

• Good combos: Deep blue (#2653d9) on white for buttons; bright cyan (#4dd2ff) for inline links on dark backgrounds; black (#000000) text on white for body copy.
• Avoid: Bright cyan text on light gray (#d3d3d3) — too low contrast. Dark gray (#444444) on deep blue — muddled.
• Functional: Use iOS blue (#007aff) only for swiper navigation, not general CTAs — keeps visual language consistent.
• Hover states: Shift from deep blue to darker blue (#005fcc) or swap text color to white — clear affordance.

3. Typography

3.1 Font Families

Everything is Helvetica Neue, falling back to Helvetica, Nimbus Sans, Arial. This is a system-safe stack — no Google Fonts, no Adobe licensing. It’s a deliberate choice: Helvetica is neutral, legible, and timeless. No variable fonts here; weights are explicitly defined.

3.2 Type Scale

3.3 Hierarchy

Hierarchy comes from weight and size, but Discogs uses some surprisingly small heading sizes (20px, 18px) in the same “heading-1” context — probably for table headers or section labels. The line heights are generous (up to 1.94), which helps with dense data readability. Decimal font sizes (13.008px, 15.4px) suggest precise scaling from design tools — they didn’t round for CSS convenience.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but lots of fractional values:

4.2 Layout

Breakpoints are defined at 400px, 425px, 426px, 530px, 550px, 600px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px — this is a pragmatic set, likely tied to device widths. No fixed max-width revealed, but grid adapts across these points.

5. Visual Elements

• Border Radius: Ranges from 2px (small buttons) to 100px (pill buttons), plus 50% for perfect circles. 3.5px shows up a lot — unusual, but consistent.
• Shadows: Two main styles — subtle multi-layer rgba(0,0,0,0.1) for soft depth, and darker rgba(0,0,0,0.35) for stronger lift. Depth is used sparingly.
• Borders: 1px solid black is everywhere — buttons, links, inputs. White borders on dark backgrounds for contrast.

6. Components

6.1 Buttons

Wantlist Button

• Default: Transparent bg, black text, 3.5px x 7px padding, 4px radius, 1px solid black border.
• Hover: White bg, white text (odd — probably inverted context), translate transform.
• Active: Greenish (#2c6415) bg, white text, semi-transparent border.
• Focus: Blue (#1eaedb) bg, white text, black border.

Swiper Pagination Bullet

• Black bg, 50% radius, no border, 14px font size (though likely icon-only).

Settings Button

• Dark gray (#333333) bg, white text, 9.632px x 24.08px padding, 0px radius, white border.
• Hover: Deep blue (#0033cc) bg, white text, blue border.
• Active: Greenish active state.
• Focus: Blue (#1eaedb) bg, white text, black outline.

Generic Button

• White bg, black text, 12px x 10px padding, 2px radius, 2px solid black border.
• Hover: Blue (#1eaedb) bg, white text.
• Focus: Same as hover with black outline.

6.2 Links

Multiple styles — cyan (#4dd2ff), deep blue (#2653d9), black (#000000), light gray (#cecdc6), white (#ffffff), dark blue (#0033bb). Hover always shifts to mid gray (#565656) and underlines.

6.3 Forms

Email input: White bg, 3px white border, 6px radius, 10px padding. Focus swaps to blue (#1eaedb) bg, white text, 1px black border.

Select: White bg, black text, 1px solid mid gray (#767676) border, no radius.

6.4 Cards

No explicit “card” extracted, but shadows suggest usage: rgba(0,0,0,0.1) multi-layer for soft elevation.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-neutral: #6c6b68;
  --color-white: #ffffff;
  --color-blue-deep: #2653d9;
  --color-cyan-bright: #4dd2ff;
  --color-blue-ios: #007aff;
  --color-gray-light: #d3d3d3;
  --color-blue-dark: #005fcc;
  --color-gray-dark: #444444;
  --color-gray-mid: #878787;
  --color-gray-semi: #e0e0e0;
  --color-gray-very-light: #efefef;

  /* Typography */
  --font-family-primary: "Helvetica Neue", Helvetica, Nimbus Sans, Arial;
  --font-size-h1-lg: 36px;
  --font-size-h1-md: 24px;
  --font-size-h1-sm: 21px;
  --font-size-base: 14px;
  --font-size-caption-sm: 12px;
  --font-size-caption-xs: 11.9px;

  /* Spacing */
  --space-1: 1px;
  --space-1_65: 1.65px;
  --space-3: 3px;
  --space-3_5: 3.5px;
  --space-5_25: 5.25px;
  --space-6: 6px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13_008: 13.008px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-28: 28px;
  --space-35: 35px;
  --space-42: 42px;
  --space-48: 48px;
  --space-60: 60px;
  --space-70: 70px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-strong: rgba(0, 0, 0, 0.35) 0px 1px 3px 0px;
}

8. AI Coding Assistant Prompt

# Discogs Design System Specification

You are a Discogs design expert. Build UIs matching their visual language exactly.

## Brand Context
Discogs is a music database and marketplace. The design is functional, monochrome-heavy, with selective use of deep blue and bright cyan for interactions. Typography is Helvetica Neue. The layout is dense but readable, built on an 8px grid with occasional precise fractional spacings.

## Color Palette
- Neutral Gray: #6c6b68 — muted text, neutral surfaces
- White: #ffffff — primary background, text on dark
- Deep Blue: #2653d9 — interactive elements, album cover accents
- Bright Cyan: #4dd2ff — inline links, hover accents
- iOS Blue: #007aff — swiper navigation arrows
- Light Gray: #d3d3d3 — dividers, muted surfaces
- Dark Blue: #005fcc — hover/focus states for interactive
- Dark Gray: #444444 — hover/focus text
- Mid Gray: #878787 — muted text hover
- Semi-transparent Gray: #e0e0e0 — overlays
- Very Light Gray: #efefef — surface hover

## Typography
Font family: "Helvetica Neue", Helvetica, Nimbus Sans, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-lg | 36px | 700 | 1.17 | Page titles |
| H1-md | 24px | 400 | 1.25 | Section headings |
| H1-sm | 21px | 700 | 1.67 | Data headers |
| Body-lg | 18px | 400 | 1.94 | Main content |
| Body-sm | 14px | 400 | 1.43 | UI text, captions |
| Caption-sm | 12px | 400 | 1.66 | Metadata |

## Spacing & Grid
Base: 8px grid with fractional values.
Values: 1px, 1.65px, 3px, 3.5px, 5.25px, 6px, 9px, 10px, 12px, 13.008px, 14px, 16px, 20px, 25px, 28px, 35px, 42px, 48px, 60px, 70px.

## Border Radius
- sm: 2px — small buttons
- md: 4px — common buttons
- lg: 6px — inputs
- xl: 20px — pills
- pill: 100px — extra-large pill buttons
- full: 50% — circular buttons/icons

## Shadows & Depth
- Soft: rgba(0,0,0,0.1) multi-layer for cards
- Strong: rgba(0,0,0,0.35) for elevated elements

## Component Specifications

### Primary Button
Default: transparent bg, #000 text, padding 3.5px 7px, 4px radius, 1px solid #000.
Hover: bg #ffffff, text #ffffff, translate transform.
Active: bg #2c6415, text #fff, border rgba(162,192,169,0.5).
Focus: bg #1eaedb, text #fff, border 1px solid #000.

### Secondary Button
Default: #333 bg, #fff text, padding 9.632px 24.08px, radius 0px, border 1px solid #fff.
Hover: bg #0033cc, text #fff, border #0033cc.
Active: bg #2c6415, text #fff, border rgba(162,192,169,0.5).
Focus: bg #1eaedb, text #fff, outline #000 2px solid.

### Input Field
Default: bg #fff, text #000, border 3px solid #fff, radius 6px, padding 10px 10px 12px.
Focus: bg #1eaedb, text #fff, border 1px solid #000.

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px.
Page padding: multiples of 8px.

## Interaction Rules
- Transition: 150ms ease on hover/focus state changes
- Focus indicators: 2px solid outline
- Hover: color or bg change with underline for links

## DO
- Use ONLY defined palette colors
- Maintain 8px grid with fractional spacing
- Keep typography in Helvetica Neue stack
- Use high-contrast color combos for text
- Apply defined border radius per component type

## DON'T
- Invent new colors
- Mix rounded and square corners inconsistently
- Use shadows outside defined rgba styles
- Change font family
- Apply bright cyan on light gray backgrounds

## Code Examples

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #000;
  padding: 3.5px 7px;
  border-radius: 4px;
  border: 1px solid #000;
  font-weight: 700;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #ffffff;
}
.btn-primary:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000;
}
```

### Input
```css
.input {
  background: #ffffff;
  color: #000000;
  border: 3px solid #ffffff;
  border-radius: 6px;
  padding: 10px 10px 12px;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 6px -1px,
              rgba(0,0,0,0.1) 0px 2px 4px -2px;
  padding: 14px;
}
```

9. Summary

TL;DR — Discogs’ design system is a functional, monochrome-first toolkit with selective blue accents, Helvetica Neue typography, and an 8px grid with occasional precision tweaks. It’s built for dense data and high legibility, not visual flamboyance.

Brand Keywords:

• archival-functional
• monochrome-precise
• collector-minimalist
• trust-heavy
• data-driven