---
title: "Winamp design system"
variant: extended
source: https://winamp.com/
captured_at: 2026-10-12
theme: dark
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/winamp-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Winamp · Design System

> Two music worlds, one unmistakable orange mark

**Theme:** dark · **Industry:** entertainment · **Source:** https://winamp.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Winamp’s homepage opens with two side-by-side entry points: an artist platform and a music player. A near-black violet canvas, white type, and vivid orange branding make the sparse layout feel unmistakably musical.

## North star

Keep the canvas quiet and dark so a centered, balanced choice and the orange Winamp mark carry the entire first impression.

## Overview

The page is built on a nearly uniform midnight-violet canvas (#0b0a1a), leaving generous negative space around a single centered choice between two Winamp experiences. White (#ffffff) carries the key headlines and filled CTA surfaces, while the orange brand mark is the most vivid visual signal, contained in the logo artwork rather than part of the measured interface palette. The two offers mirror one another: artist tools on the left, the player on the right, with the large central mark acting as their divider. Bricolage Grotesque gives headlines a compact, distinctive shape; Poppins supports the accompanying product identity and body copy. Small, restrained controls sit directly beneath each headline. Outlined secondary actions and the bottom-edge utility links remain quiet against the dark field. The page avoids decorative panels, shadows, and busy section bands; its visual impact comes from symmetry, contrast, and the scale of the central logo.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Violet | `#0b0a1a` | `--color-midnight-violet` | brand | Full-page canvas behind both product choices and the bottom utility links. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary headlines, filled CTA surfaces, and high-contrast foreground text. |
| Charcoal Ink | `#09090b` | `--color-charcoal-ink` | neutral | Muted text measurement; not a defining visible page color in the screenshot. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Muted text measurement; treat as incidental rather than a page surface or brand accent. |

### Semantic aliases

`--color-canvas` → `#0b0a1a` (Midnight Violet) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#09090b` (Charcoal Ink) · `--color-text-subtle` → `#000000` (Deep Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0b0a1a` | 19.58:1 | AAA |
| `#09090b` | `#0b0a1a` | 1.02:1 | fail |
| `#000000` | `#0b0a1a` | 1.07:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins | `--font-body` | webfont | 500, 400 | Body copy and supporting text accompanying the product identities. | Nunito Sans |
| Bricolage Grotesque | `--font-display` | webfont | 500 | Primary product headlines, including the two mirrored hero statements. | Space Grotesk |
| sans-serif | `--font-sans-serif` | system | 400 | Small utility labels and measured CTA text. | Inter |

- **Poppins:** Measured weights 400 and 500; use a clean sans-serif treatment with restrained emphasis.
- **Bricolage Grotesque:** Measured weight 500; headlines are compact, medium-weight, and slightly tight in tracking.
- **sans-serif:** System fallback, measured at 400; keep labels small, straightforward, and unembellished.

### Type scale — Custom (ratio ≈ 2.462, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.06 | -0.02em | — | Bricolage Grotesque | The prominent statement for each of the two hero destinations. |
| body | 13px | 500 | 1.62 | 0 | — | Poppins | Supporting product labels and explanatory copy. |
| caption | 12px | 400 | normal | 0 | — | sans-serif | Compact CTA labels and bottom-edge utility navigation. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 10, 12, 16, 24, 32, 40 px.
- Section rhythm — · element gap 8px · card padding — · max content width —.

A single viewport-scale canvas holds a horizontally balanced, two-column hero, with a large orange Winamp symbol centered between the offers. Each column aligns its logo, headline, and paired actions as a compact stack. The page leaves broad areas of uninterrupted background above and below the central content. A member sign-in control anchors the lower left, while blog, press, and language links sit along the lower right. No card grid, visible section bands, or measured maximum width is present.

## Shape & elevation

- Radius: button `8px` · nav `8px` · xs `8px`
- No box shadows measured: the page is flat.

The design is essentially flat: the dark canvas runs continuously behind all content, with no measured shadows or layered cards. A thin light outline distinguishes secondary actions from filled white CTAs. Preserve clear contrast through color and borders rather than simulated depth.

## Imagery

The first viewport contains brand artwork rather than photography or product screenshots: two small white-and-orange Winamp wordmarks and a much larger orange symbol between the hero columns. The marks sit directly on the dark canvas, with no visible frame or image container. Keep the artwork crisp, simple, and prominent; do not introduce photographic textures or extra illustration colors.

## Components

### Artist-platform hero

Left-side offer with the artist Winamp wordmark, a concise headline, a filled sign-up CTA, and an outlined Learn more action.

### Player hero

Mirrors the left offer on the right, using the player wordmark, generation-focused headline, filled Download the app CTA, and outlined Learn more action.

### Central brand mark

Large orange Winamp symbol centered between the two product destinations; it is the page’s strongest visual accent.

### Member sign-in

Small outlined sign-in control positioned near the lower-left edge of the canvas.

### Utility navigation

Quiet bottom-right links for Blog, Press, and language selection, kept visually subordinate to the hero.

### Measured component styles

- **Primary button** (“Download the app”): background #ffffff · text #0000ee · radius 8px · padding 6px 16px · 400 12px sans-serif
- **Navigation item** (“Learn more”): transparent background · text #0000ee · radius 8px · padding 6px 16px · 400 12px sans-serif

## Do

- Use #0b0a1a as the continuous page canvas.
- Keep the two primary destinations visually balanced.
- Reserve orange emphasis for Winamp brand artwork.
- Use white for clear headlines and filled CTA surfaces.
- Keep secondary actions outlined and understated.
- Leave generous negative space around the hero.

## Don't

- Do not add bright section backgrounds or gradients.
- Do not place the hero content inside raised cards.
- Do not let utility links compete with the two main offers.
- Do not introduce decorative photography or textures.
- Do not use the measured muted text colors as brand accents.
- Do not break the centered, mirrored composition.

## Agent prompt

Build a new Winamp-style page around a continuous Midnight Violet (#0b0a1a) canvas. Establish one clear focal area with balanced, side-by-side content groups and generous negative space. Use Studio White (#ffffff) for prominent text and filled primary actions; keep secondary actions as fine outlined controls. Treat the orange Winamp artwork as a brand asset, not a reason to add extra interface accent colors. Use Bricolage Grotesque or a close geometric substitute for headlines, Poppins-like sans-serif for supporting copy, and small neutral sans-serif utility labels. Keep surfaces flat, avoid shadows and card-heavy layouts, and place low-priority navigation near the bottom edge. Make the composition feel calm, symmetrical, and unmistakably music-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-height dark canvas with mirrored two-column product offers and a large centered brand mark. | Separate artist and player journeys, Primary and secondary actions, Persistent utility links | Mirrored hero columns, Central orange logo, Filled and outlined CTAs, Bottom-edge navigation |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/winamp-com