Ragged Edge

Ragged Edge employs a sophisticated, high-contrast, black-on-white aesthetic that emphasizes bold typography and a striking, motion-blurred hero gradient. The design balances raw, impactful text with clean, often spacious layouts. Surfaces are predominantly white, punctuated by dark text and accents. Interactive elements maintain a tactile, rounded feel while staying visually understated, allowing the powerful headlines and dynamic hero to dominate. Use Midnight Ink (#181f1f) for all primary text and dominant UI elements to maintain high contrast. Apply 64px border radius to all interactive buttons and navigation items for a consistent modern softness. Utilize ABCDiatypeExpanded-Bold for all major headlines to create an impactful and authoritative presence. Employ the Motion Blur Gradient as a background for hero sections or key visual statements to convey energy. Maintain a clear visual hierarchy by using Canvas White (#ffffff) as the dominant background color for content areas. Ensure generous spacing; use 180px between major sections and 16px for element gaps to create a comfortable density. Reserve Lagoon Violet (#516fea) exclusively for outlining secondary buttons or for subtle interactive accents. Do not introduce new primary colors; the palette is intentionally limited to high-contrast neutrals with a singular accent. Avoid generic border radii; adhere strictly to 64px for buttons, 54px for inputs, and 40px for cards. Do not use highly saturated colors for large UI areas; color is used sparingly for impact and functionality. Do not center text bodies or long paragraphs; align left to maintain readability and structure. Avoid heavy shadows or complex elevation; the design relies on flat surfaces and high contrast. Do not use standard sans-serif fonts for headlines; always use ABCDiatypeExpanded-Bold for its distinctive character. Do not use pixel-perfect spacing for every element; rely on the base unit of 4px and established spacing tokens.