精选 · 开放 · 免费

Checkout.com

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

fintechpayments

Checkout.com 网站截图

↓ 下载设计系统包 (16 MB)在 OpenDesign 中打开

原站: https://www.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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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