# Winamp · Design system migration spec

> Source: https://www.winamp.com  ·  Curated by OpenDesign  ·  en

> Worth including for its successful modernization of a classic brand, blending expressive, tilted photography with extreme typographic restraint.

## 1. Identity DNA

The identity of Winamp is a case study in modernizing a classic brand. It acts as a revitalization, a bridge that carries the nostalgic warmth of the original player into a contemporary, clean design language for artists and listeners.

**One-liner:** A modernized music platform empowering artists and listeners through clean design and expressive photography.
**Keywords:** music · player · artists · revenue · empower
**Analogy:** A modern revitalization of the classic music player brand, blending nostalgic warmth with contemporary clean aesthetics.

## 2. Color

The color system is defined by a clean white canvas and deep charcoal for text, creating a high-contrast foundation for readability. A single, vibrant orange accent provides the sole punctuation of brand energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--bg-quiet` | `#EFEFEF` | quiet area |
| `--ink` | `#09090B` | body text |
| `--ink-soft` | `#71717A` | secondary text |
| `--muted` | `#A1A1AA` | placeholder |
| `--muted-soft` | `#F7F7F7` | weak hint |
| `--accent` | `#FF5C00` | single accent |
| `--line` | `rgba(0,0,0,0.08)` | divider |

**Color principle:** Clean white canvas with high-contrast dark typography and a single warm orange accent for brand energy.

This strict, singular accent ensures all brand warmth is focused and intentional, never competing with the content.

## 3. Typography

Typography is bifurcated to serve distinct roles: a heavy geometric sans-serif commands headlines with authority, while a humanist sans-serif ensures legibility for body copy and navigation. This pairing establishes a clear visual hierarchy from the outset.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 69px | 1.0 | 700 | -1.5px | Main hero headline |
| h2 | 34px | 1.2 | 600 | -0.5px | Section headings |
| body-lg | 24px | 1.3 | 400 | 0px | Hero subheadline / introductory text |
| body | 15px | 1.6 | 400 | 0px | General body copy |
| caption | 12px | 1.6 | 400 | 0.5px | Navigation links, captions, and small labels |

**Type rules:**
- Headlines use a heavy geometric sans with tight negative tracking
- Body copy uses a highly legible humanist sans for extended reading
- Navigation and UI elements use a small, regular weight humanist sans

## 4. Spacing

Spacing is governed by a consistent 4px grid, creating an underlying mathematical rhythm that structures the generous whitespace of the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 40 / 56 px
- **Rhythm:** Consistent 4px base grid with generous whitespace in the hero section using 40px and 56px spacing.

## 5. Surfaces

Surfaces are flat and clean, defined by subtle, minimal borders and two levels of soft shadow for gentle elevation. The system avoids heavy depth, relying instead on clean separation.

- **Radius:** sm 6px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 2px 8px rgba(0,0,0,0.04)
  - 0 8px 24px rgba(0,0,0,0.08)
- **Borders:** 1px solid rgba(0,0,0,0.08)

## 6. Layout

The primary layout skeleton is a split hero section, balancing massive left-aligned typography against a dynamic, overlapping collage of tilted imagery on the right. Navigation follows a standard, full-width horizontal alignment, providing a stable frame for the expressive content.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Hero section uses a split layout (text left, overlapping imagery right). Navigation is full-width with standard horizontal alignment.

## 7. Motion & Interaction

Motion philosophy is minimal and functional, prioritizing smooth state changes over decorative animation. Subtle hover feedback and global transitions apply universally, creating a polished, responsive feel without distraction.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle hover states on navigation links and buttons
  - Smooth transitions on interactive elements via 'all' property

- **Hover:** Color shift or subtle opacity change on interactive elements.
- **Click:** Immediate feedback via standard button states.
- **Transition:** Global transitions applied to all elements for smooth state changes.
- **Keyboard:** Standard focus outlines for accessibility on interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional, empowering, and approachable, with a hint of nostalgia. It avoids cluttered layouts and aggressive language, letting the bold typography and photography carry the message.

- **Tone:** Professional, empowering, and slightly nostalgic while remaining modern and approachable.
- **Headline style:** Massive, bold, and minimal, letting the typography and imagery carry the weight.
- **CTA style:** Direct and clear with standard button affordances, avoiding aggressive visual styling.
- **Avoid:** Overly complex technical jargon / Aggressive or loud marketing language / Cluttered layouts

### Don'ts
- ❌ Don't use neon or highly saturated background colors — screenshot shows a clean white background (#FFFFFF) instead.
- ❌ Don't use decorative serif typography for body copy — screenshot shows a clean humanist sans-serif instead.
- ❌ Don't create cluttered, tightly packed layouts — screenshot shows generous whitespace and padding (e.g., 40px, 56px) instead.
- ❌ Don't use sharp, square corners for interactive components — screenshot shows rounded corners (8px, 12px) instead.
- ❌ Don't use dark mode as the default theme — screenshot shows a light mode theme with black text instead.
- ❌ Don't use heavy drop shadows or 3D effects on elements — screenshot shows flat, clean surfaces with minimal borders instead.

This system deliberately forgoes neon colors, decorative serifs, dark mode, and heavy shadows to maintain its clean, modern foundation.

## System Prompt (paste into AI tool)

```
Winamp is a modern music platform empowering artists and listeners. It uses a clean white background with a single warm orange accent (#FF5C00) for energy. Typography combines a bold geometric sans for display and a humanist sans for body text. The layout is spacious with generous whitespace and overlapping imagery. Critical donts: don't use dark mode, don't use serif fonts, don't clutter the layout, don't use neon colors, don't use sharp corners, don't use heavy shadows.
```