OpenDesign·你的设计资产库

网页参考

Checkout.com

面向高性能企业的全球支付基础设施。

FintechPayments
Checkout.com 网站截图

01

设计气质 DNA

支付全球高性能金融科技结账

一家以手术般的精确度对待每一笔交易的高端金融基础设施提供商。

02

色彩

#186AFFAccent
#FFFFFFInk
#000000BG
#D9D9D9Muted
rgba(255,255,255,0.1)Line

高对比度暗色模式，搭配单一的功能蓝色作为主要操作的强调色。

03

字体

geometric-sans · humanist-sans · semi-monospaced

  • display101px · 500
  • h156px · 500
  • body18px · 400
  • caption14px · 400

04

间距

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

标准文本块采用8px的垂直节奏，主要版块之间留有充裕的留白。

05

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

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

极简，依赖背景对比来实现分隔。仅在特定的卡片定义中使用1px边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血深色画布，内容居中，图片模块浮动。

07

动效与交互

200msmicro
250mssmall
800msmedium
cubic-bezier(0.755, 0.05, 0.855, 0.06)easing

悬停状态颜色变化（0.2秒） · 交互元素的缓动过渡

链接和按钮上的颜色过渡（0.2秒）。 · 通过状态变化提供即时视觉反馈。

08

组件

  • button 实心蓝色主要行动按钮，带药丸形圆角；次要按钮为透明背景加细边框。
  • card 以图片为主的圆角模块，圆角半径16px-20px，呈现为浮动的小场景。
  • chip 简单的文本链接，带下划线或细微的背景填充。
  • input 极简的深色输入框，带细微边框和亮蓝色的聚焦状态。
  • hero 深色背景上的巨大居中文字，周围环绕着动态摄影素材的拼贴画。

09

文案语气与禁用清单

  • 语气 自信、精确且具有权威性。
  • 标题风格 大字号、全大写、有力的陈述句，吸引注意力。
  • 按钮文案 直接且以行动为导向（例如，“联系我们”）。
  • 不要使用装饰性衬线字体——截图显示所有标题均使用简洁、现代的几何无衬线字体。
  • 不要使用杂乱的背景——截图显示为深黑色、高对比度的背景，以内容为先。
  • 不要使用圆角矩形按钮——截图显示主要操作使用完全圆润的“药丸”形按钮。
  • 不要使用柔和的调色板——截图显示为极致的黑白方案，搭配一个高饱和度的蓝色强调色。
  • 不要使用小而拥挤的排版——截图显示为用于强调的巨大、紧凑的显示字体。
  • 不要使用纤细、脆弱的线条——截图显示清晰的边界由高对比度的色块定义，而非细微的笔画。
  • 避免: 术语
  • 避免: 模棱两可
  • 避免: 戏谑
  • 避免: 过多的形容词

10

包内真实截图

Checkout.com — 桌面首屏（hero）
桌面首屏（hero）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Checkout.com — 移动首屏
移动首屏

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

11

System Prompt

Checkout.com 是一家高端的金融科技支付基础设施提供商。其设计DNA由高对比度的暗色模式画布（#000000背景，#FFFFFF墨色）和单一的高饱和度功能强调色（#186AFF）定义主要行动号召。排版在标题上使用粗体几何无衬线字体，在正文上使用易读的人文主义无衬线字体，并保持严格的字号层级。关键约束：绝不使用装饰性衬线字体；避免微妙的颜色过渡，优先选择锐利、高对比度的边界；确保主要按钮始终使用完全圆润的“药丸”圆角，而非方形或半圆角。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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