Monzo

Monzo

Preview image. Unlock full-res

Hot Coral Digital Craftsmanship — a meticulously crafted digital experience with vibrant accents.

Industryfintech
Palette
#091723
#ffffff
#f2f8f3
#112231
#e3ebe4
#6b747b
#b5b9bd
#ff4f40
#3b4c54
#75817

Monzo's visual style evokes 'Digital Craftsmanship,' where vibrant and professional is achieved through a carefully balanced suite of design choices. The core is a confident yet approachable dark charcoal text against a pristine paper-white background, creating high contrast. This is punctuated by a singular, vivid hot coral for primary calls-to-action and brand accents, preventing the design from feeling sterile. Signature choices like generously rounded 'pill' buttons and soft shadows on cards hint at a user-friendly, empathetic digital experience, while strict adherence to a clean, spacious layout grounds the design in reliability. Prioritize 'Midnight Charcoal' (#091723) for all primary text and calls-to-action against light backgrounds to ensure AAA contrast. Utilize 'Hot Coral' (#ff4f40) exclusively for primary interactive states or brand-specific elements, reserving its impact. Implement 500px radius for all primary buttons and interactive pill-shaped elements. Apply 'Mist Gray' (#f2f8f3) as the default page background and use 'Snow White' (#ffffff) for distinct content blocks or cards. Maintain a clear visual hierarchy by employing MonzoSansDisplay for headlines and MonzoSansText for all body copy and UI elements. Ensure all card elements use a 32px border-radius, accompanied by rgba(0, 0, 0, 0.1) 0px 0px 10px 0px shadow for subtle depth. Use 24px for all standard element and grid gaps to maintain consistent breathing room between components. Avoid using multiple chromatic colors; 'Hot Coral' (#ff4f40) is the dominant accent hue. Do not deviate from the specified typography sizes, line heights, or letter spacings to preserve brand readability and scale. Refrain from using hard-edged borders or square elements where a rounded alternative exists, especially for interactive components. Do not introduce complex gradient backgrounds; the system relies on solid color blocks and subtle surface variations. Avoid excessive shadow layers or high-contrast shadows; only use the specified light shadow for cards. Do not use dark backgrounds without contrasting light text; maintain high readability scores for all content. Resist using grayscale or desaturated versions of 'Hot Coral' for functional interactions; use it vividly or not at all.

More like this