精選 · 開放 · 免費

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 是一家高端的金融科技支付基礎設施供應商。其設計基因由高對比的深色模式畫布（#000000 背景、#FFFFFF 文字）與一個高飽和度的功能性強調色（#186AFF）用於主要號召行動所定義。字體排印方面，展示字體採用粗體幾何無襯線體，內文則採用易讀的人文主義無襯線體，並維持嚴格的字體比例。關鍵限制：切勿使用裝飾性襯線字體；避免使用微妙的色彩過渡，改用銳利、高對比的邊界；主要按鈕務必採用完全圓角的「膠囊」圓角，而非方形或半圓角。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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