厳選・オープン・無料

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

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

コンポーネント

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インク）と、プライマリCTA用の単一の高鮮度機能アクセント（#186AFF）で定義されます。タイポグラフィは、ディスプレイ用に大胆なジオメトリックサンセリフ、本文コピー用に判読性の高いヒューマニストサンセリフを使用し、厳密なタイポグラフィスケールを維持しています。重要な制約：装飾的なセリフは絶対に使用せず、鋭く高コントラクトな境界を優先して微妙な色のグラデーションは避けること。プライマリボタンは常に、角丸またはセミラウンドではなく、完全に丸みを帯びた「ピル」形状の角Radiusを使用すること。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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