Stripe
すりガラスに藍色のインクで書かれた帳簿
Stripe金融商品にほぼモノクロームの言語を採用しています。柔らかなクールホワイトのキャンバスにダークブルーの見出し、装飾的なクロム要素はほとんどなく、ボタン、リンク、アイコンのアウトラインとして使える鮮やかなインディゴ（#533afd）が1色だけ使われています。タイポグラフィは非常に細く、56pxでも300ポイントの太さで、企業らしさを強調するのではなく、控えめながらも自信に満ちた印象を与えます。文字間隔はサイズが大きくなるにつれて急激に狭まります。ボタンは小さく正方形（4px）で、紫色の塗りつぶし、または極めて細い紫色のアウトラインが使われています。システムは影を一切使用せず、奥行きは高さではなく背景色の変化（白→#f8fafd→#e5edf5→紫色）によって表現されています。インターフェース全体は会計帳簿や端末のように振る舞います。情報が密集し、線が明確で、セクション間に十分なスペースがあり、色は操作が必要な場合にのみ表示されます。
白いキャンバス上の中央揃えのコンテンツカラムの最大幅は約1320pxです。ヒーローは左揃えのフルサイズ（56px）のテキストブロックで、その下に2つのコールトゥアクションがあり、ヒーロー画像はありません。つまり、タイポグラフィがヒーローです。セクションは縦方向に配置され、96pxのガターと1pxの#e5edf5の区切り線があります。濃淡のストライプは交互にありません。各セクションは繰り返しパターンに従います。すべて大文字の小さなセクションタイトル（スモーキーカラー、12px）、次に32～48pxの見出し、次に22pxの段落、次に製品カードのグリッド（デスクトップでは3列）またはビジュアルアートを含む2列のテキストブロックです。クライアントのロゴは、左揃えの細い縦の帯に表示されます。フッターは、複数の列のリンクリストを含む幅の広い#f8fafdの帯です。全体的なリズムはゆっくりとしていて、落ち着いており、主にテキスト中心です。スクロールの長さが長いにもかかわらず、情報密度は低くなっています。
画像は控えめでドキュメンタリー風です。全面写真は、事例紹介セクション（例：ハーツの航空交通写真）にのみ掲載され、上空から、またはドラマチックなアングルで撮影され、自然な色合いが使用されています（デュオトーンやカラー処理は使用されていません）。製品のユーザーインターフェースのスクリーンショットは、機能カード内で使用され、デバイスフレームなしで、シャープな角度と明確な境界線でレンダリングされています。パートナーのロゴは、コンテナなしで、それぞれの色で表示されます。イラスト、3Dレンダリング、装飾的な抽象的なグラフィック要素はありません。アイコンは統一されており、白の背景に線幅1または線幅2で、幾何学的な線画（シェブロン、矢印、チェックマーク、文書記号）が使用されています。ページは主にテキストと余白で構成され、画像は全体の表示領域の3%未満を占めています。
パレット
ブランド
- Indigo Ink
#533afd— 紫色は、塗りつぶされたボタン、選択されたナビゲーション状態、およびフォーカスによってコンバージョンが促進される場面で使用されます。 - Indigo Hover
#7389ff— 紫色は、リンク、タグ、短いフレーズを強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Midnight Ink
#061b31— メインの見出しと本文は、濃い黒に近い色で、クールな青みがかった色合いとなっており、これがフォントシステム全体の基本色となっている。 - Slate
#64748d— 灰色のテキストは、リンク、タグ、短いフレーズを強調表示します。 - Steel
#50617a— 追加のテキストや補足資料は、サブライセンスで使用されているスレート色と落ち着いた紫色の間に配置されています。 - Smoke
#839bc8— 大きな装飾的な見出しとそれに付随するテキストには、落ち着いた紫色が使われますが、本文には決して使われません。 - Pure White
#ffffff— カードのページキャンバスと隆起した表面。他のすべてのものを測る基準となるデフォルトの背景。 - Mist
#f8fafd— フッターの背景とセクション区切り線は、目に見える境界線なしに領域を区切る、控えめなクールトーンの色調です。
タイポグラフィ
12～56ピクセル・9段階
- sohne-var — 交換： Inter Tight (variable · 概要 300, 400 · インターフェース全体で使用されているフォントは、見出し、本文、ナビゲーション、ボタン、ラベルのみです。56ピクセルの画面サイズでも300ウェイトが主流となっているのが特徴で、見出しは声高に主張するのではなく、控えめな表現で権威を示しています。400ウェイトは、ナビゲーションとボタンのテキストで、14～16ピクセルの場合にのみ使用されます。これは、より小さなサイズでも読みやすくするために、余分なストロークが必要となるためです。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 8px |
| ボタンの半径 | 4px |
| カード半径 | 4px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96px |
| ページ幅 | 1320px |
AI がStripeスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Ui — マット紙に印刷された臨床計画
- monopo saigon — 編集部の沈黙の背後にある、液体のような虹色の輝き――溶けた光の上に浮かぶモノクロの編集ギャラリー
- Ventriloc — 温かみのある紙にデータを蓄積した編集上の観測所――単色の精緻さを際立たせるオレンジ色の燃えさし一つ
- Hyer Aviation — 夕暮れ時のコックピット、羊皮紙の上。淡い夜明けの空が機体サイズのセリフ体ロゴと出会い、温かみのある粘土色のアクセントが単色の抑制を打ち破る。
- Family — クリーム色の羊皮紙に描かれたおとぎ話の一場面
- OFF+BRAND. — 温かい羊皮紙の上に虹色に輝く球体
- Geniestudio — 柔らかな日光の下で使うノート――広い余白と太いペンの一筆書きが特徴的なノート。
- xAI — 温かいクリームラボと黒い錠剤
- Seed — 実験用ガラスケース内の生物
- Cosmos — リネンで覆われ、ポラロイド写真が掛けられたギャラリーの壁
- Cal — モノクロームの実用性と、人間味あふれるアプローチ。厳格な白黒の配色を通して明瞭さと機能性を最優先しながらも、親しみやすいタイポグラフィと丸みを帯びた形状で柔らかな印象を与えるシステム。
- T1 Energy — 温かみのある羊皮紙に描かれた生産施設の絵は、静かでモノクロームな情景であり、工業的なスケール感と繊細なタイポグラフィがブランド全体を体現している。