---
name: Winamp
description: "Worth including for its successful modernization of a classic brand, blending expressive, tilted photography with extreme typographic restraint."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#09090B"
  secondary: "#71717A"
  tertiary: "#FF5C00"
  neutral: "#A1A1AA"
  bg-soft: "#F7F7F7"
  bg-quiet: "#EFEFEF"
  muted-soft: "#F7F7F7"
  line: "rgba(0,0,0,0.08)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 69px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 34px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 6px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 24px

---

## Overview

A modernized music platform empowering artists and listeners through clean design and expressive photography.

*A modern revitalization of the classic music player brand, blending nostalgic warmth with contemporary clean aesthetics.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#09090B`)** — uses `ink` token
- **Secondary text (`#71717A`)** — uses `ink-soft` token
- **Accent (`#FF5C00`)** — uses `accent` token
- **Muted (`#A1A1AA`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.08)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Consistent 4px base grid with generous whitespace in the hero section using 40px and 56px spacing.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Outlined primary buttons with rounded corners and a dark border on a white background.
- **card:** Image-focused cards with overlapping borders and subtle rounded corners, used for artistic expression.
- **chip:** Simple rounded tags with light backgrounds for categorization.
- **input:** Standard form fields with subtle borders, integrated into modal dialogs.
- **hero:** Large-scale split layout featuring massive typography and a dynamic collage of tilted, overlapping images.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```