MetaMusic

MetaMusic's design system uses a bright, open canvas with confident, spacious typography and an energetic blue as its primary accent. It balances structured information with distinctive organic curves and illustrative flourishes. Surfaces are mostly crisp white or subtle off-whites, providing a clean backdrop for bold headlines and call-to-action elements. The overall feel is one of clarity and approachable modernity, leveraging a limited color palette to emphasize important interactive elements and brand messaging. Always use Maison Neue for body text and headlines, varying weights for hierarchy. Use Action Blue (#0066cc) for all primary interactive elements, ensuring its vibrant color signifies action. Apply a 24px border-radius to all cards and major content blocks to maintain a consistent soft corner aesthetic. Employ the 9999px border-radius for all buttons and badges for a distinct pill-shaped appearance. Maintain generous vertical spacing between sections, primarily 96px, to create comfortable information blocks. Utilize Off-White Canvas (#f4f1ea) as the default background for light sections, creating an open and airy base. Ensure input fields use Lavender Mist (#e6e0f8) for their border, signaling a subtle interactive element. Avoid using multiple chromatic colors for primary calls to action; Action Blue (#0066cc) is the sole accent for this role. Do not introduce sharp corners on cards or buttons; aim for the established 24px or 9999px radius. Refrain from heavy drop shadows; elevation is primarily achieved through background color shifts and subtle borders, not complex shadow layers. Do not deviate from the Maison Neue and Spoof typefaces; avoid using system fonts or other custom fonts. Avoid dense, packed layouts; embrace comfortable spacing of 8px for elements and 96px for sections. Do not use dark backgrounds for general body text areas; Snowdrift (#ffffff) and Off-White Canvas (#f4f1ea) are for readability. Avoid making text links indistinguishable from body text; ensure they use Action Blue (#0066cc) for clarity.