OpenDesign·你的设计资产库

网页参考

GoCardless

一个旨在简化B2B收款流程的专业金融科技平台。

FintechPayments

封面待补录,可通过原站查看设计。

01

设计气质 DNA

金融科技支付ACH自动化账单定期付款

一个专业、以建立信任为核心的金融科技平台,旨在简化B2B收款流程。

02

色彩

#F1F252Accent
#1C1B18Ink
#545048Ink soft
#EFECE7BG
#FAF9F7BG soft
#D4D1CDMuted
rgba(212, 209, 205, 1)Line

克制的调色板,采用温暖的米白色与深炭灰色,以单一的高饱和度电光黄作为点睛之笔。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 700
  • h236px · 600
  • body18px · 400
  • small14px · 400

标题使用粗体、几何感无衬线字体,营造强烈、现代的视觉存在感。 · 正文使用高可读性的人文主义无衬线字体,确保阅读舒适。 · 等宽字体仅用于特定的技术或数据相关场景。

04

间距

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

基于4px的统一网格系统,主要页面板块间采用充裕的垂直韵律(48px/64px)。

05

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

sm · 4px
md · 12px
lg · 24px
pill · 32px

1px solid #D4D1CD

0px 0px 0px 1px inset(按钮边框) · 0px 0px 1px 0px rgba(0, 0, 0, 0.1)(卡片微妙深度感)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

桌面端采用双列网格,交替排列内容块(左文右媒/左媒右文),以创造视觉趣味。

07

动效与交互

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

交互元素的背景、颜色和投影快速过渡动画,时长0.1秒/0.2秒。 · 文本链接的下划线颜色平滑过渡动画,时长0.2秒。

按钮背景色填充或边框颜色变化。 · 通过背景或边框更新实现即时状态切换。

08

组件

  • button 药丸形按钮,配有粗实的深色边框;主要操作使用黄色填充,次要操作使用透明背景。
  • card 简洁的卡片,配有柔和的投影和大圆角(24px/32px),用于客户证言和合作伙伴标识。
  • chip 未显著呈现。
  • input 未显著呈现,但预期为简洁圆角边框设计。
  • hero 大尺寸、粗体排版,搭配高质量的情境摄影图片和突出的视频播放覆盖层。

09

文案语气与禁用清单

  • 语气 专业、直接、以利益为导向。
  • 标题风格 粗体、大写、有冲击力,以立即吸引注意力。
  • 按钮文案 清晰且聚焦于行动,例如“注册”和“联系销售”。
  • 不要使用深色主题——截图显示为浅色、温暖的米白色主背景(#EFECE7)。
  • 不要使用纤细、精致的字体——截图显示展示性文本使用粗重、几何感强的无衬线字体。
  • 不要使用微妙、低饱和度的强调色——截图显示单一、高饱和度的电光黄强调色(#F1F252)。
  • 不要使用尖锐的直角——截图显示按钮和卡片采用大尺寸的药丸形圆角(24px/32px)。
  • 不要使用复杂的渐变——截图显示为纯色填充和简单的摄影背景。
  • 不要使用纤细、精巧的边框——截图显示交互元素使用显著的1px实线深色边框。
  • 避免: 过于复杂的术语
  • 避免: 标题中使用被动语态
  • 避免: 不明确的价值主张

10

包内真实截图

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

11

System Prompt

GoCardless是一个高端的B2B金融科技自动化支付平台。其设计DNA以温暖的米白色背景(#EFECE7)搭配深炭灰色墨色(#1C1B18)为特征,辅以高饱和度的电光黄强调色(#F1F252)。排版大量依赖粗体、几何感强的无衬线字体(Haffer)作为展示字体,并搭配高可读性的人文主义无衬线字体用于正文。关键约束条件:1) 切勿使用深色模式或纯黑色背景用于内容区域。2) 所有主要标题必须使用粗字体(700)以保持品牌的大胆形象。3) 严格避免使用超过一种高饱和度颜色;电光黄仅应用于主要行动号召按钮,且需谨慎使用。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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