精选 · 开放 · 免费

GoCardless

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

01

设计气质 DNA

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

02

色彩

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

03

字体

geometric-sans · humanist-sans · monospace

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

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

04

间距

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

05

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

1px solid #D4D1CD

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 专业、直接、以利益为导向。
• 标题风格 粗体、大写、有冲击力，以立即吸引注意力。
• 按钮文案 清晰且聚焦于行动，例如“注册”和“联系销售”。

• 不要使用深色主题——截图显示为浅色、温暖的米白色主背景（#EFECE7）。
• 不要使用纤细、精致的字体——截图显示展示性文本使用粗重、几何感强的无衬线字体。
• 不要使用微妙、低饱和度的强调色——截图显示单一、高饱和度的电光黄强调色（#F1F252）。
• 不要使用尖锐的直角——截图显示按钮和卡片采用大尺寸的药丸形圆角（24px/32px）。
• 不要使用复杂的渐变——截图显示为纯色填充和简单的摄影背景。
• 不要使用纤细、精巧的边框——截图显示交互元素使用显著的1px实线深色边框。
• 避免: 过于复杂的术语
• 避免: 标题中使用被动语态
• 避免: 不明确的价值主张

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko