SoundCloud

This design system creates an immersive, contemporary feel with a dark foundation that amplifies content. A rich interplay of stark black and soft gray neutrals forms a sophisticated backdrop, punctuated by a signature vibrant blue for interactive elements. The controlled color palette, combined with a crisp, minimal typographic hierarchy, allows content, especially diverse album art, to become the primary visual driver. Rounded corners on buttons and inputs offer a touch of user-friendliness against the otherwise strong, dark aesthetic. Use Pitch Black (#121212) as the default background for all primary content sections. Apply a 4px radius.default to all interactive elements except ghost buttons and input fields to maintain a consistent subtle softening. Employ Söhne 60px / 1.0 line height / 700 weight for all main page headlines against dark backgrounds. Highlight interactive links and active states with Skybound Blue (#699fff) to maintain a clear visual hierarchy. Utilize 8px for elementGap to ensure consistent spacing between distinct inline elements and input fields. Ensure all text against Pitch Black backgrounds uses Ghost White (#ffffff) for optimal contrast and readability. Contain all main content within a pageMaxWidth of 1240px, centered on the screen. Avoid using highly saturated background colors that compete with primary content or album art. Do not deviate from Söhne as the sole typeface; stick to its specified weights and sizes. Never use hard-edged elements where a 3px input radius or 4px button radius is expected. Refrain from using shadows for elevation; rely on background color variations (e.g., Ash Gray on Pitch Black) to indicate depth. Do not add additional padding to Album Art Cards; they should appear flush with their grid container. Avoid generic black (#000000) for text on light button backgrounds; use Pitch Black (#121212) for brand consistency.