Spotify

This design system conjures a dark, immersive command center for digital media consumption. A deep ebony canvas creates a sense of gravitas, while subtle tonal variations in surfaces define hierarchical layers without relying on heavy shadows. Carefully chosen muted and vivid chromatic accents punctuate content, drawing attention to media rather than interface chrome. Rounded corners for interactive elements provide a soft contrast to the otherwise sharp, precise lines of the content blocks. Typography prioritizing readability and clear information hierarchy completes a focused and understated aesthetic. Prioritize Ebony Canvas (#000000) for large background areas and Iron Accent (#121212) for content surfaces to establish depth. Use Pure White Text (#ffffff) for all main headings and prominent interactive text to ensure optimal contrast. Apply Iron Accent (#121212) for elevated card backgrounds and Charcoal Surface (#1f1f1f) for interactive fills like button backgrounds or active states. Accurately use Spotify Green (#1ed760) only for active indicators and brand highlights, like the Spotify logo or play controls. Employ 9999px radius for all interactive buttons and pill-shaped elements to maintain a consistent interactive affordance. Adhere to the 6px border radius for content cards and containers to create a soft, contained visual. Apply 12px vertical and horizontal padding consistently to interactive buttons and card content areas. Do not use saturated colors from media content cards (e.g., #c80808, #508162) for UI elements; they are reserved for mood setting within content. Avoid using excessive box-shadows; rely on surface color changes from Ebony Canvas to Iron Accent to Charcoal Surface for visual hierarchy. Do not break the 9999px radius for buttons, as it is a core identifier of interactive elements. Restrict Pure White Text (#ffffff) usage to prominent text where high contrast is essential, otherwise use Graphite Text (#b3b3b3) for secondary content. Do not introduce new color gradients; adhere only to the Signal Purple gradient for specific promotional banners. Avoid using a page-level padding; content should align to the defined max-width of 1085px centrally. Do not introduce custom font styles or weights outside of SpotifyMixUI and SpotifyMixUITitle. Maintain 'normal' letter spacing for all text.