01
设计气质 DNA
优雅极简金融移动优先
掌中宁静、极简的金融仪表盘
02
色彩
#7C3AEDAccent#1A1A2EInk#6B7280Ink soft#F8F9FABG#FFFFFFBG soft#F0F2F5BG quiet#9CA3AFMutedrgba(0,0,0,0.08)Line采用浅色背景上的高对比度深色文字,并选用紫色作为行动号召的强调色,用绿色表示金融收益
03
字体
- display
48px · 600 - h2
24px · 600 - body
16px · 400
为标题使用紧凑的字间距,以营造高端感 · 在展示型文字和正文之间保持清晰的层级 · 使用中等字重表示强调,避免正文中使用粗体
04
间距
4px8px12px16px24px32px48px64px采用一致的 4px 网格系统,章节之间保持宽裕的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 12px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.08)
0 4px 6px -1px rgba(0,0,0,0.05) · 0 10px 15px -3px rgba(0,0,0,0.08)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
双栏布局,左侧为文字内容,右侧为手机模型
07
动效与交互
200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态下的平滑过渡 · 交互元素上的细微缩放动画
交互元素的背景色发生微妙变化 · 按下时轻微缩小
08
组件
- button 胶囊形按钮,主按钮为实色背景,次按钮为微妙背景色
- card 白色卡片,带有细微阴影和圆角,与背景清晰分离
- chip 带有浅色背景的小型圆角标签
- input 简洁、极简,带有微妙边框
- hero 大型标题搭配渐变文字效果,手机模型展示应用界面
09
文案语气与禁用清单
- 语气 自信、有帮助且令人安心
- 标题风格 直接且以利益为导向,措辞优雅
- 按钮文案 行动导向,明确下一步
- 避免使用深色背景 — 截图显示的是明亮、通透的白色和浅灰色美感
- 避免使用多种强调色 — 截图显示仅少量使用单一紫色强调色
- 避免使用衬线字体 — 截图显示始终使用简洁的几何无衬线字体
- 避免使用厚重的阴影 — 截图显示的是非常微妙、几乎不可见的阴影
- 避免界面杂乱 — 截图保持了宽裕的留白和呼吸空间
- 避免对负值使用刺眼的红色 — 截图使用柔和的红色 (#EF4444) 表示亏损
- 避免: 复杂的金融术语
- 避免: 过于技术性的语言
- 避免: 激进的销售策略
11
System Prompt
一个拥有沉静、极简美感的金融科技移动应用着陆页。设计使用浅色背景 (#F8F9FA),深墨色 (#1A1A2E) 文字,以及紫色 (#7C3AED) 作为行动号召强调色。字体为几何无衬线字体,使用紧凑字间距以营造高端感。布局具有宽裕的留白、细微的阴影和胶囊形按钮。关键特性包括:表示收益的柔和绿色、表示亏损的柔和红色、展示应用界面的手机模型,以及带有极简图标的功能描述。关键约束:避免深色模式、避免复杂渐变、避免布局杂乱、保持呼吸空间、使用一致的 4px 间距网格,并保持界面沉静且值得信赖。