Relief

Relief

Preview image. Unlock full-res

Oceanic clarity on a paper white canvas. Illustrations and confident blues guide the user through a clear, calm financial journey.

Industryfintech
Palette
#f9f7f0
#ffffff
#13426f
#2e96ff
#616c8a
#333333
#202634
#bde1f9
#0254a5
#cde7fb
#73b9ff
#50a7ff

Relief's visual system evokes a refreshing, confident simplicity, utilizing a primarily cool blue and white palette. Illustrations are front-and-center, creating a friendly and approachable feel rather than an austere financial one. Typography is robust and direct, anchored by strong, rounded buttons that feel tangible and reassuring. The design favors soft elevation and ample whitespace, framing content with a playful organic rather than rigid geometric structure. Prioritize 'Hope Blue' (#2e96ff) for all primary interactive elements like call-to-action buttons, maintaining a '70px' border-radius for their rounded pill shape. Use 'Gilroy' font throughout, applying the detected negative letter-spacing for each specific typeScale role to maintain a compact and confident appearance. Employ 'Deep Ocean' (#13426f) for primary headings and dark content sections, contrasted with 'Sky Canvas' (#f9f7f0) or 'Arctic Mist' (#ffffff) for backgrounds. Apply '18px' border-radius to general information cards and 26px for testimonial cards, providing a consistent soft-edged aesthetic. Maintain a clear visual hierarchy by limiting prominent shadows to interactive elements and specific cards (e.g., rgba(0, 0, 0, 0.05) 0px 3px 0px 0px for review cards). Use 'Sky Canvas' (#f9f7f0) as the underlying page background, with 'Arctic Mist' (#ffffff) for most interactive card surfaces, ensuring a bright and open feel. Avoid harsh, dark shadows; instead, use the subtle 'Shadow Tint' (#cde7fb) for button elevation to keep the visual tone light and approachable. Do not introduce new saturated accent colors outside of the blues and grays; the color palette is intentionally focused for brand consistency. Refrain from using sharp corners; all UI elements from buttons to cards should have a generous border-radius, typically 18px, 26px, 70px, or 100px. Do not deviate from the 'Gilroy' typeface or adjust its letter-spacing outside the defined typeScale roles, as its specific tracking is a key brand identifier. Avoid dense, information-heavy blocks; ensure generous 28px card padding and 14px element gaps to maintain a spacious and airy layout. Do not use dark backgrounds for general body text or utility elements; save 'Deep Ocean' for prominent headings or distinct sections.

More like this