OpenDesign·你的设计资产库

网页参考

Withcompound

高对比度、宽敞的金融科技仪表板,在极简优雅与深度数据之间取得平衡。

FintechPremiumCleanSaaSProduct

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

财富管理技术专业人士现代精致清晰

应用于复杂金融数据的极简瑞士腕表。

02

色彩

#000000Accent
#111111Ink
#555555Ink soft
#FFFFFFBG
#F9F9F9BG soft
#F3F3F3BG quiet
#999999Muted
rgba(0,0,0,0.06)Line

严格的单色系配色,使用高对比度构建层次,细微的灰色用于数据密度表现。

03

字体

Transitional Serif · Geometric Sans-Serif · Monospace

  • display56px · 400
  • h232px · 600
  • body16px · 400

衬线字体严格用于主要的情感连接点 · 无衬线字体处理所有 UI 元素和密集数据的可读性 · 大型衬线文字使用紧缩字距,无衬线字体使用中性字距

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

充足的留白以平衡密集的金融图表

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(0,0,0,0.06)

0 1px 3px rgba(0,0,0,0.04) · 0 8px 24px rgba(0,0,0,0.06)

06

布局

1200container
12columns
24pxgutter
768 / 1024breakpoints

居中的主视觉区域,带有充足的垂直内边距,随后是包含嵌套卡片的仪表板预览区域。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

UI 元素的微妙淡入 · 抽象 3D 背景形状上的轻柔浮动或旋转

细微的背景色偏移或不透明度变化 · 带有轻微缩放或颜色偏移的即时视觉反馈

08

组件

  • button 胶囊形实心填充,搭配高对比度文字
  • card 带有细微边框或阴影,内部留有较大内边距
  • chip 用于数据标签和状态的小型胶囊形状
  • input 简洁的矩形输入框,带有细微的底部边框
  • hero 大型衬线字体居中放置于微妙的抽象 3D 图形之上

09

文案语气与禁用清单

  • 语气 自信、精致、略带专属感
  • 标题风格 简短、直接的陈述,强调价值和受众
  • 按钮文案 清晰、以行动为导向且高对比度
  • 不要使用深色模式——截图展示的是严格的浅色、白底美学。
  • 不要使用明亮的主色调——设计依赖于纯黑白对比。
  • 不要对所有元素都使用圆角——按钮是完全的胶囊形,但卡片使用标准的中等圆角。
  • 不要对主视觉标题使用无衬线字体——主标题使用独特的过渡衬线字体。
  • 不要使用繁复的背景图案——背景是纯白色,只有一个抽象的 3D 元素。
  • 不要使用小而密集的排版——设计优先考虑大而清晰的字体与充足的留白。
  • 避免: 金融科技术语或过于复杂的措辞
  • 避免: 响亮、霓虹灯般的颜色
  • 避免: 感叹号或带有攻击性的紧迫感

11

System Prompt

一个面向技术专业人士的精致金融科技平台,其特点是鲜明的黑白配色、充足的留白,以及用于情感连接的过渡衬线字体与用于数据清晰度的几何无衬线字体的结合。它在复杂的金融数据可视化与极致简约的 UI 之间取得平衡。关键十六进制颜色值为 #FFFFFF、#111111 和 #F9F9F9。关键禁忌:绝不要使用深色模式(严格为浅色),绝不要引入明亮的主强调色(依赖黑白对比),并且绝不要对主视觉标题使用无衬线字体(特定使用过渡衬线字体)。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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