Spotify

Overview

Spotify is a music and podcast streaming platform designed for discovery, personalization, and seamless playback across devices. The design system embodies "Dark-First Energetic Minimalism"—a philosophy that pairs deep, near-black surfaces (rgb(18, 18, 18) and rgb(40, 40, 40)) with a vibrant signature green accent (#1ed760) to create visual energy without cognitive overload. The interface prioritizes accessibility and contrast: white text (rgb(255, 255, 255)) on dark backgrounds ensures legibility at 16px body size, while the green accent draws attention to actionable elements—play buttons, CTAs, and interactive states—creating an intuitive hierarchy that guides users through content discovery. The emotional response is one of focused energy: the darkness recedes, allowing album artwork and content to breathe, while the green spark signals agency and control.

The brand voice is direct, conversational, and culturally attuned. Spotify speaks in the language of music fans: "Create your first playlist," "Let's find some podcasts to follow," "It's easy, we'll help you." The vocabulary avoids corporate jargon, favoring action verbs and inclusive pronouns. Tone is encouraging but never patronizing, energetic but never frantic. Example sentence in Spotify's voice: "Discover what's trending now—your next favorite song is waiting."

Colors

The color system is built on a dark-first foundation with strategic accent deployment. The surface stack ranges from near-black (#0a0a0a for surface-dim) through mid-tone grays (#282828 for surface-container) to lighter grays (#3a3a3a for surface-container-highest), creating a subtle depth hierarchy without relying on shadows alone. On-surface text is set to rgb(179, 179, 179)—a mid-gray that provides 7:1 contrast against the base surface (#121212) and ensures readability across the interface. Primary (#1ed760, a vivid green) is reserved exclusively for interactive elements: call-to-action buttons ("Sign up free"), play controls, active states, and focus indicators. This green appears at full saturation on dark backgrounds and dims to #1aa34a on hover to signal interactivity without jarrin

Typography

The type system uses SpotifyMixUI and SpotifyMixUITitle—Spotify's proprietary typefaces optimized for screen legibility and brand recognition—with Helvetica Neue and system fonts as fallbacks. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (40px, 700 weight) anchors page sections like "Trending songs" and "Popular artists"; headline-md (28px, 700 weight) introduces subsections; title-lg (20px, 700 weight) labels cards and modals. Body text uses two weights: body-lg (18px, 400 weight, 28px line-height) for introductory copy and body-md (16px, 400 weight, 24px line-height) for standard content and descriptions. Labels (14px and 12px, 600–500 weight) are applied to buttons, badges, and form fields. The system prioritizes

Layout

The layout uses a 12-column grid with a maximum container width of 1280px, allowing content to scale fluidly on mobile (320px) through desktop (1920px+). The left sidebar ("Your Library") occupies ~300px on desktop, collapsing to an icon on tablet and mobile; the main content area expands to fill available space. Section spacing follows a semantic scale: lg spacing (40px) separates major sections ("Trending songs" from "Popular artists"), md spacing (24px) separates cards within a section, and sm spacing (12px) separates inline elements. The gutter (24px) is applied consistently to left/right margins on desktop, reducing to 16px on tablet and 12px on mobile to accommodate smaller screens. White-space is generous: cards have 24px padding, buttons have 12px vertical and 32px horizontal paddi

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive drop shadows. Level 1 (Base) is the surface itself: #121212 with no shadow. Level 2 (Standard Cards) applies a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and a slightly lighter background (#282828) to cards, modals, and popovers, creating a gentle lift. Level 3 (Elevated/Modals) uses the Material Design shadow (0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)) paired with surface-container-high (#313131) to create a pronounced sep

Shapes

The shape philosophy is "Functional Geometry"—a blend of sharp technical precision (4px and 8px radii for inputs and cards) and soft, approachable curves (50% border-radius for buttons and avatars). Buttons use full-radius (50% / border-radius: 9999px) to create pill-shaped containers that feel friendly and clickable; this applies to primary CTAs ("Sign up free"), secondary buttons ("Log in"), and chip filters. Cards and modals use 6–8px radii (md and lg) to provide subtle rounding that softens the interface without appearing overly organic. Input fields use 4px radii (DEFAULT) to maintain a t

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background: #1ed760, color: #000000, padding: 12px 32px, border-radius: 50%, font-weight: 600) use the signature green and full-radius to maximize clickability and brand recognition. On hover, the background dims to #1aa34a (primary-fixed-dim) and the shadow lifts slightly (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)), signaling interactivity. On active/press, the background shifts to #1aa34a and remains held for 100ms before releasing, providing tactile feedback. Secondary buttons (background: transparent, color: rgb(179, 179, 179), border: 1px solid #535353, padding: 8px 24px, border-radius: 50%) are used for non-primary actions like "Log in" and maintain the same hover behavior (background: #313131, color:

Do's and Don'ts

**Do**

• Do use the green accent (#1ed760) exclusively for primary CTAs, play controls, and active states—never for backgrounds or secondary elements.
• Do maintain at least 7:1 contrast between text and background (e.g., rgb(179, 179, 179) on #121212) to ensure accessibility for users with low vision.
• Do apply generous padding (24px minimum) and line-height (1.5x font size) to prevent the dark interface from feeling cramped or fatiguing.
• Do use 150ms ease transitions for all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.
• Do reserve 50% border-radius for buttons and avatars to create a friendly, approachable aesthetic that contrasts with the technical dark background.

**Don't**

• Don't use pure white (#ffffff) for body text—use rgb(179, 179, 179) or on-surface tokens to reduce eye strain on dark backgrounds.
• Don't apply shadows heavier than 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12) on standard cards; reserve the full Material shadow for modals and elevated surfaces only.
• Don't use the green accent for informational or warning states—reserve #3860be (secondary) for info and #e61e32 (error) for destructive or error states.
• Don't apply border-radius smaller than 4px on interactive elements; sharp corners reduce perceived clickability and feel cold against the dark palette.
• Don't exceed 1280px container width on desktop; wider layouts dilute the visual hierarchy and make content feel scattered across the screen.