Dopper

Dopper's design evokes a sense of playful environmentalism, blending a cheerful primary color palette with crisp typography. The abundant use of Pale Sand (#f6ecc8) as a primary background creates a warm, inviting canvas, contrasting sharply with the deep, saturated blues and vivid yellow. Rounded corners at 20px are applied universally to interactive elements and cards, giving components a friendly, approachable character that softens the otherwise direct, functional aesthetic. Prioritize Pale Sand (#f6ecc8) as the dominant page background to establish a consistent brand canvas. Apply 20px border radius consistently to all interactive buttons, cards, and image containers for a friendly, approachable feel. Use Ocean Deep (#000f2e) for primary headings and prominent text to create a strong visual presence. Reserve Sky Blue (#0067e5) and its gradient for primary calls-to-action to highlight key interactions. Maintain a clear visual hierarchy by using Gilroy weights 700 and 600 for headlines and 400 for body text with -apple-system for accessibility details. Utilize a 4px grid for all spacing; common values include 8px for element gaps and 20px for internal component padding. Ensure contrast: True Black (#000000) text on Pale Sand (#f6ecc8) backgrounds is the default for readability. Avoid arbitrary border radii; stick strictly to 20px for rounded elements and 0px for sharp edges. Do not introduce new saturated colors outside the defined accent and brand palettes to maintain visual consistency. Never use Ocean Deep (#000f2e) as a background for primary buttons; it is reserved for text dominance. Avoid applying drop shadows; the design relies on bold color blocks and internal content for visual depth, not traditional elevation. Do not use system fonts for prominent headlines or branding elements; Gilroy and Dopper carry the brand's typographic identity. Refrain from using monochrome photography; imagery should be vibrant and full-color to match the playful aesthetic of the brand colors. Do not create complex layouts that deviate from clear, sectioned content blocks; simplicity and directness are key.