CURATED · OPEN · FREE

Winamp

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

01

Identity DNA

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

02

Color

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

03

Typography

geometric-sans · humanist-sans · geometric-mono

• display69px · 700
• h234px · 600
• body-lg24px · 400
• body15px · 400
• caption12px · 400

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

04

Spacing

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

05

Surfaces

1px solid rgba(0,0,0,0.08)

0 2px 8px rgba(0,0,0,0.04) · 0 8px 24px rgba(0,0,0,0.08)

06

Layout

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

07

Motion & Interaction

Subtle hover states on navigation links and buttons · Smooth transitions on interactive elements via 'all' property

Color shift or subtle opacity change on interactive elements. · Immediate feedback via standard button states.

08

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.

09

Voice & Don'ts

• Tone Professional, empowering, and slightly nostalgic while remaining modern and approachable.
• Headlines Massive, bold, and minimal, letting the typography and imagery carry the weight.
• CTAs Direct and clear with standard button affordances, avoiding aggressive visual styling.

• 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.
• Avoid: Overly complex technical jargon
• Avoid: Aggressive or loud marketing language
• Avoid: Cluttered layouts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko