
Preview image. Unlock full-res
Grape Soda & Lemon Zest. A bold purple lake with bright yellow accents floating atop.
This system feels like a playful, high-energy tech brand that dares to be vibrant without sacrificing clarity. The deep, rich 'Grape Soda' purple is the signature and dominant hue, creating a striking backdrop for crisp white text and clean, information-dense UIs. Bright 'Lemon Zest' yellow appears strategically as an accent, especially in the announcement bar, introducing a pop of warmth. Type is clean and authoritative with a touch of character, using generous letter spacing within headlines to balance the bold color choices. Use Grape Soda (#5423e7) for strong background statements or primary branding blocks. Apply Lemon Zest (#ffc233) for high-impact alerts or secondary interactive elements. Employ Circularpro Book 400 with negative letter spacing for all headings and display text to achieve a distinctive visual voice. Maintain high contrast text with Midnight Ink (#121217) on light backgrounds and Ghost White (#ffffff) on dark backgrounds. Use Inter font for all body copy and UI elements to ensure readability across sizes, varying weights for hierarchy. Apply 8px border-radius consistently for all interactive buttons and smaller UI elements. Utilize 48px border-radius for larger, distinct elements such as feature cards or graphical containers to soften their appearance. Avoid using primary brand colors (Grape Soda, Lemon Zest) for extensive body copy; refer to Midnight Ink or Driftwood for readability. Do not use box shadows for elevation; rely on color changes and Ghost White (#ffffff) backgrounds to differentiate content blocks. Do not introduce additional font families; adhere strictly to Inter and Circularpro Book. Avoid arbitrary color choices; all chromatic colors should derive from the established brand, accent, or semantic palettes. Do not use generic button styles; always apply 8px radius and text/background/border combinations from the defined button variants. Do not add additional visual ornamentation or gradients; the design relies on bold color blocks and typographic expressiveness. Avoid deviating from the established spacing scale (multiples of 8px) for consistent visual rhythm.









