厳選・オープン・無料
Checkout.com
ハイパフォーマンスなビジネスのためのグローバル決済インフラ。
fintechpayments
01
デザイン DNA
決済グローバルパフォーマンスフィンテックチェックアウト
全ての取引に外科的な精度をもって臨む、プレミアムな金融インフラプロバイダー。
02
カラー
#186AFFAccent
#FFFFFFInk
#000000BG
#D9D9D9Muted
rgba(255,255,255,0.1)Line
単一の機能的ブルーアクセントによる、プライマリアクション用の高コントラクトダークモード。
03
タイポグラフィ
geometric-sans · humanist-sans · semi-monospaced
- display
101px · 500 - h1
56px · 500 - body
18px · 400 - caption
14px · 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 ピル形状の角丸を持つ、ソリッドブルーのプライマリCTA。セカンダリボタンは、細いボーダーを持つ透明背景。
- card 16px〜20pxの角丸を持つ、画像多用のモジュール。浮遊するビネットのように表示。
- chip 下線または控えめな背景色を持つ、シンプルなテキストリンク。
- input 控えめなボーダーと明るいブルーのフォーカス状態を持つ、ミニマリストなダークフィールド。
- hero ダーク背景に巨大なタイポグラフィを中央に配置し、動的な写真アセットのコラージュで囲む。
09
文体と禁止事項
- トーン 自信に満ち、精密で、威厳がある。
- 見出し 注目を集める、大型のすべて大文字の力強いステートメント。
- CTA 直接的でアクション志向(例:「お問い合わせ」)。
- 装飾的なセリフフォントを使用しない — スクリーンショットではすべての見出しにクリーンでモダンなジオメトリックサンセリフが使用されています。
- 雑踏した背景を使用しない — スクリーンショットではコンテンツを優先する、深い黒の高コントラクト背景が使用されています。
- 角丸四角ボタンを使用しない — スクリーンショットではプライマリアクションに完全な丸みの「ピル」形状ボタンが使用されています。
- 控えめなカラーパレットを使用しない — スクリーンショットでは、単一の高鮮度ブルーアクセントを持つ、厳格な白黒配色が使用されています。
- 小さく詰まったタイポグラフィを使用しない — スクリーンショットでは、強調用に巨大でトラッキングの tight なディスプレイ文字が使用されています。
- 細く壊れやすい線を使用しない — スクリーンショットでは、微妙なストロークではなく、高コントラクトのカラーブロックで明確な境界が定義されています。
- 避ける: 専門用語
- 避ける: 曖昧な表現
- 避ける: 遊び心
- 避ける: 過度な形容詞
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Checkout.comはプレミアムなフィンテック決済インフラプロバイダーです。デザインのDNAは、高コントラクトダークモードキャンバス(#000000背景、#FFFFFFインク)と、プライマリCTA用の単一の高鮮度機能アクセント(#186AFF)で定義されます。タイポグラフィは、ディスプレイ用に大胆なジオメトリックサンセリフ、本文コピー用に判読性の高いヒューマニストサンセリフを使用し、厳密なタイポグラフィスケールを維持しています。重要な制約:装飾的なセリフは絶対に使用せず、鋭く高コントラクトな境界を優先して微妙な色のグラデーションは避けること。プライマリボタンは常に、角丸またはセミラウンドではなく、完全に丸みを帯びた「ピル」形状の角Radiusを使用すること。
en · zh-CN · zh-TW · ja · ko