Suno

Suno's design evokes a dark, pulsating club atmosphere, where digital magic happens. The expansive, low-contrast color palette, punctuated by fleeting, vivid neon accents, creates a sense of cutting-edge technology merging with artistic expression. Subtle dark gradients on backgrounds and elevated elements add depth without sharp divisions. White, bold typography against these dark canvases commands attention, establishing a stage for creative output. Prioritize text legibility on dark backgrounds by using Ghost White (#F7F4EF) or Pure White (#FFFFFF) for body and headline text. Use Pitch Black (#101012) as the primary page background to maintain the dark, atmospheric tone across all sections. Employ the 6px border radius for all interactive elements like buttons and input containers to ensure a consistent, slightly softened aesthetic. Apply the gradient from Vivid Pink (#FD429C) to Sunset Yellow (#F5D907) exclusively for key 'Create' actions to highlight primary functionality. Maintain generous vertical spacing between sections (100-150px) to provide breathing room and prevent visual clutter on the dark canvas. Use Neue Montreal at a weight of 300 or 400 for most text, reserving 500 for emphasized elements, without overusing bolding. Ensure interactive elements like buttons have a minimum padding of 4px vertical and 8px horizontal, or 8px vertical and 16px horizontal for primary CTAs. Avoid using bright, saturated colors for large background areas or extensive text blocks, as this will disrupt the intended dark and low-key aesthetic. Do not introduce hard shadows or strong elevation effects that could break the subtle, layered depth created by varying dark tones. Refrain from deviating from the established border radii; maintain 6px for buttons and 12px for cards/inputs. Do not use more than one distinct primary brand color in any single section to avoid visual competition and maintain focus on the content. Do not use generic system fonts; Neue Montreal is critical to the brand's typographic identity. Avoid excessive use of the Editorial New typeface; it is a decorative accent for specific headings, not a general body or UI font. Do not introduce stark white backgrounds for entire sections, as the design system is fundamentally dark-themed with occasional light elements for high contrast.