精选 · 开放 · 免费

Relief

一款帮助你减少债务、更快实现无债一身轻的金融应用。

FintechApp UIMobile UICleanCalm

Relief 网站截图

↓ 下载设计系统包 (6 MB)在 OpenDesign 中打开

原站: https://www.relief.app

📦 浏览包内文件 →

01

设计气质 DNA

宽慰债务储蓄财务自由保障

为债务中的人们提供一个平静、安全的港湾。

02

色彩

#328DD1Accent

#333333Ink

#F9F7F0BG

#EAF4FFBG soft

#FFFFFFBG quiet

#D0D5DDMuted

rgba(51,51,51,0.1)Line

一种平静、可信的配色方案，结合温暖的米白色与多样化的蓝色，传达宽慰与安全感。

03

字体

humanist-sans · monospace

display49px · 800
display31px · 700
display20px · 700
body18px · 400
body16px · 400
body14px · 400

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

基于 4px 网格的统一间距，使用诸如 14px、21px、28px 和 56px 等数值。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px

md · 8px

lg · 18px

pill · 999px

基本无边框，依靠背景色对比进行区分。

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

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中首屏布局，过渡至双栏功能展示区。

07

动效与交互

150msmicro

200mssmall

400msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

交互元素的 hover 过渡效果

hover 时的细微过渡效果 · 截图中未显示明显的点击状态变化

08

组件

button 药丸形主按钮，填充为纯蓝色，并带有明显的 3D 偏移阴影。
card 用户评价卡片，深蓝色背景，配有 5 星评级。
chip 圆角标签，带有显示用户信任度的头像。
input 简洁的圆角输入框。
hero 带有插图的首屏区域，包含移动应用模型和浮动 3D 元素。

09

文案语气与禁用清单

语气支持性、鼓励性且直接。
标题风格 直接、行动导向的短语，例如‘让我们助你摆脱债务’。
按钮文案 清晰简洁，例如‘获得宽慰’或‘查看我的储蓄’。

首屏不要使用深色背景——截图显示为带有云朵的浅蓝色背景。
按钮不要使用尖锐的直角——截图显示为完全圆润的药丸形按钮。
主按钮不要使用扁平设计——截图显示为带有明显 3D 阴影偏移的按钮。
不要使用复杂的导航菜单——截图显示为仅含一个 logo 和一个 CTA 的简约顶部栏。
不要使用多种高对比度颜色——截图显示的配色方案主要限于蓝色和米白色。
首屏不要使用密集的多栏布局——截图显示为居中的单栏聚焦设计。
避免: 过于技术化的金融术语
避免: 侵略性或紧迫的语气
避免: 复杂的句子结构

10

包内真实截图

Relief — 桌面首屏（hero） — 桌面首屏（hero）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Relief — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Relief 是一款专注于债务减免和金融安全的移动金融应用。设计采用平静、可信的配色方案，以柔和的蓝色（#BADEFF, #2E96FF）和温暖的米白色（#F9F7F0）为主。字体为人文主义无衬线体（Gilroy），具有加粗、友好的标题和简洁的正文。关键设计元素包括带有 3D 偏移阴影的药丸形按钮、盾牌和云朵的趣味性 3D 插图，以及宽敞的居中布局。避免使用尖锐的角落、深色的首屏背景或过于复杂的界面；设计依靠克制和清晰、鼓励性的信息传递。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko