Spotify

The Spotify UI is a 'midnight command center' aesthetic, built on a dark gray canvas with deeply saturated accents. It creates a focused, immersive experience where content takes center stage, reminiscent of a stage bathed in theatrical lighting. The primary visual tension arises from the interplay of near-black backgrounds, high-contrast white typography, and vibrant, often gradient, splashes of color that highlight interactive elements and content categories. The extensive use of 9999px rounded corners for primary interactive elements contrasts with the sharper 6px radii for content cards, adding a subtle touch of approachability to a largely utilitarian dark theme. Maintain high contrast text #ffffff on dark backgrounds, using #121212 as the primary canvas. Apply 9999px border-radius to all interactive buttons and tags, such as 'Log in' and 'Create playlist' buttons. Use 6px border-radius for all content cards, images, and nav elements to visually separate content blocks. Utilize 'SpotifyMixUI' at 14px 400 weight for general body text and navigation items for consistency. Employ 'SpotifyMixUITitle' at 24px 700 weight for all main section headings like 'Trending songs'. Separate main content sections with a 32px vertical gap. Incorporate subtle depth through background color layering: #121212 for canvas, #292929 for panels, and #1f1f1f for content cards. Do not use subtle drop shadows for elevation; instead, rely on distinct background color shifts between surfaces. Avoid using highly saturated colors for large text blocks; reserve them for interactive elements, highlights, or distinct content backgrounds. Do not break the 1085px max-width content constraint for main sections of the page. Do not use generic square or slightly rounded button shapes; all buttons should either be pill-shaped (9999px radius) or completely unrounded text links. Avoid mixing font families; exclusively use 'SpotifyMixUI' and 'SpotifyMixUITitle' to maintain typographic consistency. Do not use bright white as a background for primary content areas; backgrounds should be from the dark neutral palette. Do not apply padding to images directly within content cards; padding should be reserved for the card container.