OpenDesign·你的设计资产库

网页参考

Walletconnect

一个高端金融科技平台,通过简洁、自信的设计结合温暖、人性化的触感,可视化加密货币支付解决方案。

FintechPremiumProductCleanRefined

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

01

设计气质 DNA

加密货币支付钱包网络合规

传统金融与数字资产之间的精妙桥梁,以平易近人的清晰度呈现复杂技术。

02

色彩

#1A1A1AInk
#FFFFFFBG
#6B7280Muted
rgba(0,0,0,0.1)Line

纯净白色画布搭配高对比度黑色文字,使用单一亮蓝色(#2D5BE3)作为主视觉区和关键交互元素的主品牌色。

03

字体

transitional-serif · humanist-sans

  • display64px · 400

标题使用优雅的过渡衬线字体,传达金融科技领域的权威与信任。 · 正文采用简洁的人文主义无衬线字体,确保可读性与亲和力。 · 展示性文本保持充裕的行高(1.1-1.2),避免拥挤。

04

间距

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

采用充裕间距,主视觉区 96px 内边距,营造呼吸感,强调高端定位。

05

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

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

卡片和交互元素使用 1px solid rgba(0,0,0,0.1) 边框

0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉区采用分栏布局:左侧对齐文本,右侧对齐产品模拟图(iPhone),视觉层次均衡。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素具备细微的 hover 状态过渡 · 页面各区域间平滑过渡

按钮在 hover 时背景色过渡并伴随轻微缩放效果 · 点击时通过颜色变化提供即时视觉反馈

08

组件

  • button 药丸形主按钮(白色背景,黑色文字)和次按钮(透明背景,白色文字),内边距充裕
  • card 简洁白色卡片搭配细微阴影,用于产品功能展示
  • chip 小圆角标签,用于分类标记
  • input 简洁文本输入框,带细微边框和占位文本
  • hero 全宽蓝色渐变背景,内容区域居中

09

文案语气与禁用清单

  • 语气 自信、专业、前瞻
  • 标题风格 粗体、宣言式陈述,兼具技术精确性
  • 按钮文案 清晰、行动导向的语言(“联系销售”、“探索文档”)
  • 不要使用多种竞争性强调色——截图显示单色蓝色调色板,搭配黑/白对比
  • 不要使用过度装饰的字体——截图显示标题使用简洁的过渡衬线字体
  • 不要在界面上堆砌不必要的视觉元素——截图保持了充裕的留白
  • 不要使用小而拥挤的文字尺寸——截图展示的是 64px 以上的大号可读字体
  • 不要使用刺眼、明亮的背景——截图使用纯净白色背景,主视觉区采用蓝色渐变
  • 不要添加过多的阴影或边框——截图谨慎使用细微阴影以营造层次感
  • 避免: 避免过于随意的语言,以免削弱金融科技可信度
  • 避免: 避免未经解释的复杂术语
  • 避免: 避免咄咄逼人的销售语言

11

System Prompt

这是一个用于加密货币支付的高端金融科技平台,定位为最大的数字钱包网络。设计采用纯净白色背景,搭配高对比度黑色文字(#1A1A1A)和单一亮蓝色(#2D5BE3),用于主视觉区和关键行动号召。字体将优雅的过渡衬线用于展示标题,简洁的人文主义无衬线用于正文,营造权威与亲和力的平衡。布局具备充裕间距(主视觉区 96px 内边距),并采用分栏主视觉设计,左侧对齐文本,右侧对齐产品模拟图。关键禁忌:避免使用多种强调色,不使用过度装饰的字体,保持充裕留白,确保文字尺寸大且易读,使用干净背景避免视觉杂乱,避免使用过多阴影或边框破坏高端金融科技定位。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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