← OpenDesign CURATED · OPEN · FREE
Relief
A financial app that helps you reduce debt and become debt-free faster.
Fintech App UI Mobile UI Clean Calm
01
Identity DNA
relief debt savings financial freedom protection
A calm, safe harbor for people navigating debt.
02
Color
#328DD1Accent
#333333Ink
#F9F7F0BG
#EAF4FFBG soft
#FFFFFFBG quiet
#D0D5DDMuted
rgba(51,51,51,0.1)Line
A calm, trustworthy palette combining warm off-whites with varied blues to convey relief and safety.
03
Typography
humanist-sans · monospace
display 49px · 800display 31px · 700display 20px · 700body 18px · 400body 16px · 400body 14px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent spacing based on a 4px grid, utilizing values like 14px, 21px, 28px, and 56px.
05
Surfaces
sm · 4px
md · 8px
lg · 18px
pill · 999px
Mostly borderless, relying on background color contrast.
0px 7px 0px 0px rgba(154, 207, 246, 0.5) · 0px 3px 0px 0px rgba(0, 0, 0, 0.05) · 6px 6px 44px 0px rgba(22, 31, 53, 0.1)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered hero layout transitioning into a two-column feature section.
07
Motion & Interaction
150ms micro
200ms small
400ms medium
cubic-bezier(0.25, 0.46, 0.45, 0.94) easing
Hover transitions on interactive elements
Subtle transition effects on hover · No visible click state changes in screenshots
08
Components
button Pill-shaped primary buttons with a solid blue fill and a distinct 3D offset shadow. card Testimonial cards with dark blue backgrounds and 5-star ratings. chip Rounded tag with avatars showing user trust. input Clean, rounded input fields. hero Illustrated hero section with a mobile app mockup and floating 3D elements. 09
Voice & Don'ts
Tone Supportive, encouraging, and straightforward. Headlines Direct, action-oriented phrases like 'Let's get you out of debt'. CTAs Clear and simple, such as 'Get Relief' or 'See my savings'. Don't use a dark background for the hero — the screenshot shows a light blue background with clouds. Don't use sharp, rectangular corners for buttons — the screenshot shows fully rounded, pill-shaped buttons. Don't use a flat design for primary buttons — the screenshot shows buttons with a distinct 3D shadow offset. Don't use a complex navigation menu — the screenshot shows a minimal top bar with just a logo and one CTA. Don't use multiple high-contrast colors — the screenshot shows a palette restricted mostly to blues and off-whites. Don't use a dense, multi-column layout for the hero — the screenshot shows a centered, single-column focus. Avoid: Overly technical financial jargon Avoid: Aggressive or urgent tones Avoid: Complex sentence structures 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Relief is a fintech mobile app focused on debt relief and financial safety. The design uses a calm, trustworthy palette dominated by soft blues (#BADEFF, #2E96FF) and warm off-whites (#F9F7F0). Typography is a humanist-sans-serif (Gilroy) featuring bold, friendly headlines and clean body copy. Critical design elements include pill-shaped buttons with 3D offset shadows, playful 3D illustrations of shields and clouds, and a spacious, centered layout. Avoid sharp corners, dark hero backgrounds, or overly complex interfaces; the design relies on restraint and clear, encouraging messaging.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A strong example of a modern fintech UI that balances playful 3D illustrations with a calm, professional, and trustworthy aesthetic.
