OpenDesign·你的设计资产库

网页参考

Relief

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

FintechApp UIMobile UICleanCalm
Relief 网站截图

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。