Preview image. Unlock full-res
Insurance or financial-services UI mockup using bold color-blocked panels: orange trust badge, blue feature card, beige rating display, and bright pink pricing section.
Summary
A financial-services (insurance) quote interface using distinct color-blocked components to separate claim history, coverage details, customer rating, and pricing into a scannable horizontal flow.
Visual description
Four self-contained, rounded-corner modules arranged horizontally across a light cream background. From left to right: (1) An orange shield badge with centered text stating "18 YEARS NO CLAIMS" in black sans-serif, a geometric trust signal. (2) A light blue card with the headline "Add EU cover for 90 days" and a "Tell me more" button, accompanied by a soft-focus illustration of mountains and a pink accent shape. (3) A beige rectangular panel with a large white "93" and supporting text ("Wow, you're one of our top drivers!") plus a horizontal pink progress bar below and three action buttons ("Update details", "Documents", "Cover") with subtle icons. (4) A bright fuchsia block displaying the price "£294.38" in large black text, labeled "Marshmallow Original" and "Monthly", with a "See quote breakdown" link in lighter text. Each section uses its own color environment, creating visual separation and hierarchy without borders.
Key takeaway
Distinct color blocks (orange, blue, beige, pink) guide the eye through a multi-step quote flow while keeping each action or value proposition separate and scannable. Pairing trust signals (the shield, the 93 rating) with warm colors and reassuring copy (top drivers) builds confidence. The large, bold typography for numbers and prices makes the key information (claim years, rating, price) instantly graspable.
Reuse notes
Excellent for financial services, insurance quotes, subscription dashboards, or any interface where multiple value props must coexist. The warm and cool color mix (orange + blue, pink + beige) feels modern without being jarring. Works on desktop and scales reasonably to mobile if grouped vertically. Best when each block genuinely represents a distinct concept or action; avoid using blocks just for decoration or every similar item gets its own color (causes fatigue).
