open.spotify.com website design: fonts, colors and UI patterns

Overview

Spotify's web player presents a dark, immersive music streaming environment built around a near-black canvas that lets album artwork and promotional imagery dominate visual attention. The interface organizes content through a collapsible left sidebar for navigation and library access, a central stage for playlist and album views, and a persistent playback bar anchored to the bottom of the viewport. The design language prioritizes content density without clutter: bold typographic hierarchy establishes context, while rounded containers and generous internal padding keep elements scannable. A single vivid green accent color identifies interactive and playback states across the entire system. The overall mood is cinematic and focused, with the dark foundation creating theatrical contrast against colorful cover art and gradient promotional imagery.

Colors

The color system operates on a dark-first philosophy where the canvas absorbs light and content elements float upward through subtle surface elevation. Every token below is drawn from visible interface surfaces in the supplied images.

The dark palette creates a theatrical stage for music content. The near-black canvas allows album artwork and promotional imagery to read with maximum saturation and impact. White ink maintains crisp readability at all sizes, while muted gray ink recedes to indicate secondary information without competing for attention. The green action color is used sparingly but consistently: it appears on the play/pause control, progress indicators, and primary call-to-action moments. This restraint makes the green instantly recognizable as "playback" or "do this now" across the interface. No light mode is visible in the supplied images; the system appears to commit fully to dark presentation.

Typography

Spotify Mix Ui, designed by Dinamo Typefaces GmbH, serves as the sole type family across the interface. The family is available in Regular and Bold weights, with Bold carrying display and navigation emphasis while Regular handles body and metadata. The typeface features a compact, modern sans-serif construction with slightly squared terminals that feel technical and contemporary without becoming cold.

The hero display size establishes dramatic scale for playlist identities, with tight negative tracking creating a cohesive word-image even at large sizes. Section display provides clear hierarchy for content groupings without approaching the theatrical weight of hero treatments. Body sizes maintain comfortable reading for descriptions and metadata, while the small label size with positive tracking handles functional annotations. Navigation weight at 700 ensures scanability in the collapsed sidebar where horizontal space is constrained. Verify licensing for these families before production use.

Layout

The interface follows a three-zone spatial model: a fixed left sidebar for global navigation, a scrollable central stage for content, and a fixed bottom playback bar. The sidebar occupies approximately 15rem of horizontal space when expanded, collapsing to an icon-only strip of roughly 4.5rem. This collapse preserves essential navigation—Home, Search, Library—while maximizing content viewport. The central stage scrolls independently, with content padded inward from viewport edges by consistent margins.

The hero region at the top of playlist and album views uses a full-bleed treatment where promotional artwork extends to the content area boundaries. A gradient overlay, typically darkening from transparent to the canvas color, ensures white typography remains legible against potentially busy imagery. Below the hero, content transitions into structured grids: track lists with row-based layouts, or card grids for related recommendations.

The persistent playback bar spans the full viewport width, anchored to the bottom edge with a fixed height of approximately 5.5rem. It contains playback controls left-aligned, track information center-weighted, and volume and device controls right-aligned. This bar maintains presence across all navigation states, ensuring playback context never disappears.

Spacing follows a 0.25rem base unit. Major section breaks use 2rem, while content gaps within grids and lists settle at 1.5rem. Internal padding for cards and tiles uses 1rem to create breathable containers without excessive separation.

Visual language

The visual character of the Spotify web player emerges from the tension between disciplined darkness and explosive color. The interface restrains itself to blacks, near-blacks, and a single green accent, creating a neutral stage where every album cover, promotional gradient, and artist image becomes the focal point. This editorial discipline means the interface never competes with the content it presents.

Geometric abstraction appears in promotional artwork—tilted rectangles, gradient meshes, and hard-edged color blocks that suggest rhythm and movement without literal musical iconography. These art treatments use saturated coral, violet, and magenta gradients that pop against the dark canvas.

Rounded corners appear throughout at moderate radii: 0.5rem for panels and tiles, 0.25rem for thumbnails, and full pill shapes for primary action buttons. This creates a friendly, approachable tone that offsets the technical precision of the typeface. Shadows are minimal or absent; depth is communicated through surface color elevation rather than drop shadows, keeping the aesthetic flat and contemporary.

The sidebar's thumbnail stack—small square album covers representing saved playlists and albums—creates a personal, browsable texture. These images break the monochrome rhythm with their varied palettes, turning navigation into a visual browsing experience.

Components

Playlist hero

The playlist hero anchors the top of playlist and album views with a full-bleed promotional image or generated artwork. The background image fills the hero region, with a bottom-weighted dark gradient overlay ensuring text legibility. A small label above the title indicates context—"Public Playlist"—in muted ink at label size. The title itself uses hero-display typography in white, positioned in the lower-left quadrant with comfortable margin from edges. Below the title, a body-size description in muted ink provides context, followed by metadata in smaller text: creator avatar, name, track count, and duration. The composition keeps all text left-aligned with consistent left margin, creating a clean vertical axis against the potentially chaotic artwork.

Playback bar

The playback bar is a fixed full-width strip at the viewport bottom. Its surface color sits slightly above the canvas, with a subtle top border separating it from content. Left section contains playback controls: a prominent circular play/pause button in action green, surrounded by skip, shuffle, and repeat icons in muted ink. Center section displays current track: thumbnail, title in body-small weight 700, artist in body-small weight 400, both in white and muted ink respectively. A progress bar spans below, with elapsed time left and total duration right, both in label size. The progress fill uses action green against a muted track. Right section holds volume, device selection, and queue controls. The bar maintains consistent internal padding and never scrolls.

Sidebar navigation

The sidebar presents global navigation as a vertical stack. At top, the Spotify logo mark in white. Below, primary navigation items—Home, Search, Your Library—use navigation typography with an icon and label pair. Active states use white ink; inactive use muted ink. A divider separates primary navigation from personal library content. Library items appear as thumbnail-plus-label rows, with square album or playlist artwork at thumbnail radius, title in body-small, and optional metadata in label size. The collapsed state preserves icon visibility while hiding labels, maintaining touch targets. Hover states elevate surface color slightly.

Content tile

Content tiles appear in grid layouts for albums, playlists, and podcasts. Each tile is a rounded rectangle with elevated surface background and 1rem internal padding. A square thumbnail image sits at the top, followed by a title in body-small weight 700 in white, and a subtitle or creator name in body-small weight 400 in muted ink. The tile has no visible border; separation comes from background contrast and grid gap spacing. Hover states may reveal a play button overlay in the bottom-right of the thumbnail, using the action green circular treatment.

Action button

Primary action buttons use full pill shape with action green background and label-size white text. The extreme radius creates an unmistakable call-to-action presence. These appear for "Play" on playlist pages, "Follow" actions, and primary confirmations. Secondary actions use transparent backgrounds with border or muted ink text, maintaining the pill shape for consistency.

Responsive behavior

The interface should adapt gracefully as viewport width decreases. The sidebar collapses to icon-only mode at a moderate breakpoint, preserving navigation access while reclaiming horizontal space for content. The playback bar maintains its three-section layout but may compress spacing and hide secondary controls—volume, device picker—behind overflow menus on narrow viewports.

The playlist hero should scale typography downward: hero-display can reduce to section-display size on smaller screens, maintaining hierarchy while preventing excessive line breaks. The full-bleed artwork treatment remains, but gradient overlay strength may increase to preserve legibility at smaller sizes.

Content grids should reflow from multiple columns to fewer, eventually stacking to single-column track lists on mobile widths. Tile internal padding and grid gaps should remain proportional, not absolute, to maintain density relationships.

Touch targets throughout should meet minimum 44px dimensions, with the circular playback controls already exceeding this. The collapsed sidebar icons should expand their hit areas to full row height for reliable touch access.

Practical implementation guidance

### Preserve - The near-black canvas as default background; never introduce light surfaces that compete with content imagery. - The single green accent for all playback and primary action states; do not introduce additional accent colors. - The full-bleed hero treatment with gradient overlay for playlist and album identities. - The persistent playback bar across all views; playback context must remain visible during navigation. - The pill-shaped primary buttons with extreme radius.

### Avoid - Drop shadows for depth; use surface color elevation instead. - Borders on content tiles; rely on background contrast and grid spacing. - Multiple type families; the single-family hierarchy is integral to the brand voice. - Light mode as a default; the dark canvas is foundational to the content-forward strategy. - Decorative elements that do not serve navigation or content discovery.

### Recommended build order 1. Establish the dark canvas and surface color stack with proper contrast ratios. 2. Implement the type scale with Spotify Mix Ui at all specified sizes and weights. 3. Build the three-zone layout structure: sidebar, scrollable stage, fixed playback bar. 4. Create the playlist hero component with gradient overlay and responsive typography scaling. 5. Develop the playback bar with functional sections and progress indicator. 6. Add content tiles and grid layouts with hover states. 7. Implement sidebar collapse behavior and touch target sizing.

### Accessibility - Ensure all text over imagery meets WCAG AA contrast through gradient overlays; test with lightest possible artwork. - Provide visible focus indicators on all interactive elements; the green accent can serve as focus ring color on dark surfaces. - Maintain keyboard navigation order: sidebar first, then main content, then playback controls. - Use aria-labels on icon-only sidebar navigation items when collapsed. - Respect reduced-motion preferences for any hover or state transitions.

Scope note

This guide covers the playlist view and global navigation shell visible in the supplied images. Album detail views, search results, artist pages, settings panels, and mobile-native layouts are not represented. The dark mode presented appears to be the sole visible mode; no light variant is documented. Measurements are practical adaptation targets derived from the visible interface proportions.

More website design guides

Browse website design guides by pattern and website.