Stripeにインスパイアされたデザインシステム

Category: フィンテック＆クリプト 決済インフラ。シグネチャーパープルのグラデーション、ウェイト300のエレガンス。

1. ビジュアルテーマと雰囲気

Stripeのウェブサイトはフィンテックデザインの黄金標準です――テクニカルでありながら高級感があり、精密でありながら温かみも感じられるシステム。ページはクリーンな白いキャンバス（#ffffff）に深いネイビーの見出し（#061b31）、ブランドのアンカーであり同時にインタラクティブなアクセントとして機能するシグネチャーパープル（#533afd）で幕を開けます。これはエンタープライズソフトウェアにありがちな冷たく無機質なパープルではなく、自信と高級感を漂わせる濃厚で彩度の高いバイオレットです。全体的な印象は、世界トップクラスの活字鋳造所によって再設計された金融機関です。

カスタム可変フォント sohne-var は、Stripeのビジュアルアイデンティティを規定する要素です。すべてのテキスト要素でOpenTypeの "ss01" スタイルセットが有効化されており、これによりグリフ形状が変更され、独特の幾何学的でモダンな印象が生まれます。ディスプレイサイズ（48px〜56px）では、sohne-varはウェイト300で使用されます――見出しにウェイト300という超軽量な選択肢は、神秘的でまるで囁くような権威を生み出します。これは「太字のヒーロー見出し」という慣習とは正反対のアプローチで、Stripeの見出しは声高に主張する必要がありません。ネガティブなレタースペーシング（56pxで-1.4px、48pxで-0.96px）がテキストを密度の高い、エンジニアリングされたブロックに締め付けます。小さなサイズでも、システムはウェイト300を使用し、比例的に縮小されたトラッキングを適用します。また、財務データ表示には "tnum" によるタブラー数字を採用しています。

Stripeを真に際立たせるのは、そのシャドウシステムです。多くのサイトのフラットまたは単層アプローチとは異なり、Stripeは多層ブルーティントシャドウを使用しています。シグネチャーの rgba(50,50,93,0.25) と rgba(0,0,0,0.1) を組み合わせることで、薄明かりの空に浮かぶ要素のような、冷たくほぼ大気的な奥行きを持つシャドウが生まれます。主要なシャドウ色（50,50,93）のブルーグレーの下地は、ネイビーパープルのブランドパレットと直接連動しており、エレベーションでさえブランドらしさを感じさせます。

主な特徴：

• すべてのテキストにOpenTypeの "ss01" を適用したsohne-var――ブランドのレターフォームを定義するカスタムスタイルセット
• シグネチャーの見出しウェイトとしてのウェイト300――軽やかで自信に満ちた、慣習に反するスタイル
• ディスプレイサイズでのネガティブレタースペーシング（56pxで-1.4px、以降段階的に緩和）
• rgba(50,50,93,0.25) を使用したブルーティントの多層シャドウ――ブランドカラーを感じさせるエレベーション
• 黒ではなく深いネイビー（#061b31）の見出し――温かみと高級感のある金融グレードの品質
• 控えめなボーダーラジウス（4px〜8px）――ピル形状なし、過度なシャープネスなし
• グラデーションと装飾的要素のためのルビー（#ea2261）とマゼンタ（#f96bee）のアクセント
• コードとテクニカルラベルのためのモノスペースコンパニオン SourceCodePro

2. カラーパレットと役割

プライマリ

• ストライプパープル (#533afd): プライマリブランドカラー、CTAの背景、リンクテキスト、インタラクティブハイライト。システム全体を固定する彩度の高いブルーバイオレット。
• ディープネイビー (#061b31): --hds-color-heading-solid。プライマリ見出し色。黒でも灰色でもなく――テキストに温かみと深みを加える非常に暗い青。
• ピュアホワイト (#ffffff): ページの背景、カードサーフェス、暗い背景のボタンテキスト。

ブランド＆ダーク

• ブランドダーク (#1c1e54): --hds-color-util-brand-900。ダークセクション、フッターの背景、没入感のあるブランドの瞬間のための深いインディゴ。
• ダークネイビー (#0d253d): --hds-color-core-neutral-975. 最も暗いニュートラル――ブルーの下地を持つほぼ黒で、苛烈さのない最大限の深みを実現。

アクセントカラー

• ルビー (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. アイコン、アラート、アクセント要素のための温かいレッドピンク。
• マゼンタ (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. グラデーションと装飾的ハイライトのための鮮やかなピンクパープル。
• マゼンタライト (#ffd7ef): --hds-color-util-accent-magenta-100. マゼンタテーマのカードとバッジのためのティントサーフェス。

インタラクティブ

• プライマリパープル (#533afd): プライマリリンク色、アクティブ状態、選択された要素。
• パープルホバー (#4434d4): プライマリ要素のホバー状態のための暗めのパープル。
• パープルディープ (#2e2b8c): --hds-color-button-ui-iconHover. アイコンホバー状態のための暗いパープル。
• パープルライト (#b9b9f9): --hds-color-action-bg-subduedHover. 抑えられたホバー背景のためのソフトラベンダー。
• パープルミッド (#665efd): --hds-color-input-selector-text-range. レンジセレクターと入力ハイライト色。

ニュートラルスケール

• 見出し (#061b31): プライマリ見出し、ナビゲーションテキスト、強いラベル。
• ラベル (#273951): --hds-color-input-text-label. フォームラベル、セカンダリ見出し。
• ボディ (#64748d): セカンダリテキスト、説明文、キャプション。
• サクセスグリーン (#15be53): ステータスバッジ、成功インジケーター（背景/ボーダーにはアルファ0.2〜0.4を使用）。
• サクセステキスト (#108c3d): 成功バッジのテキスト色。
• レモン (#9b6829): --hds-color-core-lemon-500. 警告とハイライトのアクセント。

サーフェス＆ボーダー

• ボーダーデフォルト (#e5edf5): カード、ディバイダー、コンテナの標準的なボーダー色。
• ボーダーパープル (#b9b9f9): ボタンと入力のアクティブ/選択状態のボーダー。
• ボーダーソフトパープル (#d6d9fc): セカンダリ要素のための控えめなパープルティントボーダー。
• ボーダーマゼンタ (#ffd7ef): マゼンタテーマ要素のためのピンクティントボーダー。
• ボーダーダッシュ (#362baa): ドロップゾーンとプレースホルダー要素のためのダッシュボーダー。

シャドウカラー

• シャドウブルー (rgba(50,50,93,0.25)): シグネチャー――ブルーティントのプライマリシャドウ色。
• シャドウダークブルー (rgba(3,3,39,0.25)): 高く配置された要素のための深いブルーシャドウ。
• シャドウブラック (rgba(0,0,0,0.1)): 深みを強化するためのセカンダリシャドウレイヤー。
• シャドウアンビエント (rgba(23,23,23,0.08)): 繊細なエレベーションのためのソフトなアンビエントシャドウ。
• シャドウソフト (rgba(23,23,23,0.06)): わずかな浮き上がりのための最小限のアンビエントシャドウ。

3. タイポグラフィルール

フォントファミリー

• プライマリ: sohne-var、フォールバック: SF Pro Display
• モノスペース: SourceCodePro、フォールバック: SFMono-Regular
• OpenType機能: すべてのsohne-varテキストにグローバルで "ss01" を有効化。財務データとキャプションのタブラー数字には "tnum" を使用。

階層

原則

• シグネチャーとしての軽量ウェイト: ディスプレイサイズでウェイト300を使用することは、Stripeの最も際立ったタイポグラフィの選択です。他のブランドが600〜700を使って注目を集める中、Stripeは軽さを贅沢として使います――テキストは重みがなくても権威を発揮できる自信があります。
• ss01を全体に: "ss01" スタイルセットは不可欠です。特定のグリフ（おそらく a、g、l の代替形）を変更し、すべてのsohne-varテキストに幾何学的でコンテンポラリーな印象を与えます。
• 2つのOpenTypeモード: 表示/本文テキストには "ss01"、財務データのタブラー数字には "tnum"。これらは決して重複しません――段落内の数字はss01を使用し、データテーブル内の数字はtnumを使用します。
• 段階的なトラッキング: レタースペーシングはサイズに比例してタイトになります。56pxで-1.4px、48pxで-0.96px、32pxで-0.64px、26pxで-0.26px、16px以下ではnormal。
• 2ウェイトのシンプルさ: 主に300（ボディと見出し）と400（UI/ボタン）。プライマリフォントにボールド（700）はなし――SourceCodeProはコードのコントラストのために500/700を使用。

4. コンポーネントスタイリング

ボタン

プライマリパープル

• 背景: #533afd
• テキスト: #ffffff
• パディング: 8px 16px
• ラジウス: 4px
• フォント: 16px sohne-var ウェイト400、"ss01"
• ホバー: #4434d4 背景
• 使用: プライマリCTA（「今すぐ始める」、「営業に問い合わせる」）

ゴースト/アウトライン

• 背景: transparent
• テキスト: #533afd
• パディング: 8px 16px
• ラジウス: 4px
• ボーダー: 1px solid #b9b9f9
• フォント: 16px sohne-var ウェイト400、"ss01"
• ホバー: 背景が rgba(83,58,253,0.05) に変化
• 使用: セカンダリアクション

トランスペアレントインフォ

• 背景: transparent
• テキスト: #2874ad
• パディング: 8px 16px
• ラジウス: 4px
• ボーダー: 1px solid rgba(43,145,223,0.2)
• 使用: ターシャリ/情報レベルのアクション

ニュートラルゴースト

• 背景: transparent（rgba(255,255,255,0)）
• テキスト: rgba(16,16,16,0.3)
• パディング: 8px 16px
• ラジウス: 4px
• アウトライン: 1px solid rgb(212,222,233)
• 使用: 無効または抑えられたアクション

カード＆コンテナ

• 背景: #ffffff
• ボーダー: 1px solid #e5edf5（標準）または 1px solid #061b31（ダークアクセント）
• ラジウス: 4px（タイト）、5px（標準）、6px（快適）、8px（フィーチャード）
• シャドウ（標準）: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
• シャドウ（アンビエント）: rgba(23,23,23,0.08) 0px 15px 35px 0px
• ホバー: シャドウが強くなり、多くの場合ブルーティントレイヤーが追加される

バッジ/タグ/ピル

ニュートラルピル

• 背景: #ffffff
• テキスト: #000000
• パディング: 0px 6px
• ラジウス: 4px
• ボーダー: 1px solid #f6f9fc
• フォント: 11px ウェイト400

サクセスバッジ

• 背景: rgba(21,190,83,0.2)
• テキスト: #108c3d
• パディング: 1px 6px
• ラジウス: 4px
• ボーダー: 1px solid rgba(21,190,83,0.4)
• フォント: 10px ウェイト300

入力＆フォーム

• ボーダー: 1px solid #e5edf5
• ラジウス: 4px
• フォーカス: 1px solid #533afd またはパープルリング
• ラベル: #273951、14px sohne-var
• テキスト: #061b31
• プレースホルダー: #64748d

ナビゲーション

• ブラーバックドロップを持つ白いスティッキーな水平ナビゲーション
• ブランドロゴタイプを左寄せ
• リンク: sohne-var 14px ウェイト400、#061b31 テキスト、"ss01"
• ラジウス: ナビコンテナに6px
• CTA: 右寄せのパープルボタン（「サインイン」、「今すぐ始める」）
• モバイル: 6pxラジウスのハンバーガートグル

装飾的要素

ダッシュボーダー

• プレースホルダー/ドロップゾーン用: 1px dashed #362baa（パープル）
• マゼンタテーマの装飾的ボーダー用: 1px dashed #ffd7ef（マゼンタ）

グラデーションアクセント

• ヒーロー装飾のためのルビーからマゼンタへのグラデーション（#ea2261 から #f96bee）
• ブランドのダークセクションは白いテキストと共に #1c1e54 背景を使用

5. レイアウト原則

スペーシングシステム

• 基本単位: 8px
• スケール: 1px、2px、4px、6px、8px、10px、11px、12px、14px、16px、18px、20px
• 注目点: スケールは小さい端で密度が高く（4〜12pxから2pxごと）、財務データのためのStripeの精度志向のUIを反映

グリッド＆コンテナ

• 最大コンテンツ幅: 約1080px
• ヒーロー: 寛大なパディングと軽量な見出しを持つ中央配置のシングルカラム
• フィーチャーセクション: フィーチャーカードのための2〜3カラムグリッド
• ブランドの没入感のための #1c1e54 背景を持つフルワイドダークセクション
• ブルーティントシャドウを持つ収まったカードとしてのコード/ダッシュボードプレビュー

ホワイトスペース哲学

• 精度スペーシング: ミニマリストシステムの広大な空白とは異なり、Stripeは計測された意図的なホワイトスペースを使用します。すべてのギャップは意図的なタイポグラフィの選択です。
• 密なデータ、寛大なクローム: 財務データ表示（テーブル、チャート）は密度が高く詰め込まれていますが、その周囲のUIクロームは寛大にスペースが取られています。これにより制御された密度感が生まれ、美しいフレームに収まった整理されたスプレッドシートのような印象を与えます。
• セクションリズム: 白いセクションが #1c1e54 のダークブランドセクションと交互に現れ、任意の色を導入することなく単調さを防ぐ印象的な明暗のカデンスを生み出します。

ボーダーラジウスのスケール

• マイクロ（1px）: 細かい要素、繊細な丸み
• 標準（4px）: ボタン、入力、バッジ、カード――主力
• 快適（5px）: 標準的なカードコンテナ
• リラックス（6px）: ナビゲーション、大きなインタラクティブ要素
• ラージ（8px）: フィーチャードカード、ヒーロー要素
• 複合: 0px 0px 6px 6px 底部丸めのコンテナ（タブパネル、ドロップダウンフッター）

6. 奥行きとエレベーション

シャドウ哲学: Stripeのシャドウシステムはクロマティックデプスという原則に基づいています。ほとんどのデザインシステムがニュートラルグレーや黒のシャドウを使用する中、Stripeのプライマリシャドウ色（rgba(50,50,93,0.25)）はブランドのネイビーパレットを反映した深いブルーグレーです。これにより単に奥行きを加えるだけでなく、ブランドの雰囲気を加えるシャドウが生まれます。多層アプローチでは、このブルーティントシャドウをピュアブラックのセカンダリレイヤー（rgba(0,0,0,0.1)）と異なるオフセットで組み合わせ、ブランドシャドウが要素から遠くに、ニュートラルシャドウが近くに位置するパラックス的な奥行きを生み出します。ネガティブなスプレッド値（-30px、-18px）により、シャドウが水平方向に要素のフットプリントを超えないようにし、エレベーションを垂直方向に制御します。

装飾的な奥行き

• ダークブランドセクション（#1c1e54）が背景色のコントラストによる没入感のある奥行きを生み出す
• ヒーロー装飾のためのルビーからマゼンタへのグラデーションオーバーレイ
• スティッキー要素の上端シャドウのためのシャドウ色 rgba(0,55,112,0.08)（--hds-color-shadow-sm-top）

7. やるべきこととやってはいけないこと

やるべきこと

• すべてのテキスト要素に "ss01" を付けたsohne-varを使用する――スタイリスティックセットこそがブランド
• すべての見出しと本文テキストにウェイト300を使用する――軽さがシグネチャー
• すべての高く配置された要素にブルーティントシャドウ（rgba(50,50,93,0.25)）を適用する
• 見出しには #000000 の代わりに #061b31（ディープネイビー）を使用する――温かみが重要
• ボーダーラジウスを4px〜8pxに保つ――控えめな丸みは意図的
• タブラー/財務数字の表示には "tnum" を使用する
• シャドウを重ねる: 遠くにブルーティント + 近くにニュートラルで奥行きのパラックスを実現
• プライマリなインタラクティブ/CTAカラーとして #533afd パープルを使用する

やってはいけないこと

• sohne-varの見出しにウェイト600〜700を使用しない――ウェイト300がブランドの声
• カードやボタンに大きなボーダーラジウス（12px以上、ピル形状）を使用しない――Stripeは控えめ
• ニュートラルグレーのシャドウを使用しない――常にブルーでティントする（rgba(50,50,93,...)）
• sohne-varテキストで "ss01" をスキップしない――代替グリフがパーソナリティを定義する
• 見出しに純粋な黒（#000000）を使用しない――常に #061b31 ディープネイビー
• インタラクティブ要素に温かいアクセントカラー（オレンジ、黄色）を使用しない――パープルがプライマリ
• ディスプレイサイズでポジティブなレタースペーシングを適用しない――Stripeはタイトにトラックする
• マゼンタ/ルビーアクセントをボタンやリンクに使用しない――装飾/グラデーション専用

8. レスポンシブ動作

ブレークポイント

タッチターゲット

• ボタンは快適なパディング（縦8px〜16px）を使用
• ナビゲーションリンクは14pxで適切なスペーシング
• バッジはタップターゲットのために最低6pxの水平パディング
• モバイルナビトグルは6pxラジウスのボタン

縮小戦略

• ヒーロー: 56pxディスプレイ → モバイルで32px、ウェイト300は維持
• ナビゲーション: 水平リンク+CTA → ハンバーガートグル
• フィーチャーカード: 3カラム → 2カラム → シングルカラムスタック
• ダークブランドセクション: フルワイド処理を維持、内部パディングを縮小
• 財務データテーブル: モバイルでは水平スクロール
• セクションスペーシング: 64px以上 → モバイルで40px
• タイポグラフィスケールが圧縮: ブレークポイントをまたいで56px → 48px → 32pxのヒーローサイズ

画像の動作

• ダッシュボード/製品スクリーンショットはすべてのサイズでブルーティントシャドウを維持
• ヒーローグラデーション装飾はモバイルでシンプルになる
• コードブロックは SourceCodePro 処理を維持し、水平スクロールが発生する場合がある
• カード画像は一貫した4px〜6pxのボーダーラジウスを維持

9. エージェントプロンプトガイド

クイックカラーリファレンス

• プライマリCTA: ストライプパープル（#533afd）
• CTAホバー: パープルダーク（#4434d4）
• 背景: ピュアホワイト（#ffffff）
• 見出しテキスト: ディープネイビー（#061b31）
• ボディテキスト: スレート（#64748d）
• ラベルテキスト: ダークスレート（#273951）
• ボーダー: ソフトブルー（#e5edf5）
• リンク: ストライプパープル（#533afd）
• ダークセクション: ブランドダーク（#1c1e54）
• 成功: グリーン（#15be53）
• アクセント装飾: ルビー（#ea2261）、マゼンタ（#f96bee）

コンポーネントプロンプトの例

• 「白い背景にヒーローセクションを作成する。見出しは48px sohne-var ウェイト300、行間1.15、レタースペーシング-0.96px、カラー#061b31、font-feature-settings ‘ss01’。サブタイトルは18px ウェイト300、行間1.40、カラー#64748d。パープルCTAボタン（#533afd、4pxラジウス、8px 16pxパディング、白いテキスト）とゴーストボタン（transparent、1px solid #b9b9f9、#533afdテキスト、4pxラジウス）。」
• 「カードをデザインする: 白い背景、1px solid #e5edf5ボーダー、6pxラジウス。シャドウ: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px。タイトルは22px sohne-var ウェイト300、レタースペーシング-0.22px、カラー#061b31、‘ss01’。ボディは16px ウェイト300、#64748d。」
• 「サクセスバッジを作成する: rgba(21,190,83,0.2)背景、#108c3dテキスト、4pxラジウス、1px 6pxパディング、10px sohne-var ウェイト300、ボーダー1px solid rgba(21,190,83,0.4)。」
• 「ナビゲーションを作成する: backdrop-filter blur(12px)を持つ白いスティッキーヘッダー。リンクにsohne-var 14px ウェイト400、#061b31テキスト、‘ss01’。右寄せのパープルCTA「今すぐ始める」（#533afd背景、白いテキスト、4pxラジウス）。ナビコンテナに6pxラジウス。」
• 「ダークブランドセクションをデザインする: #1c1e54背景、白いテキスト。見出し32px sohne-var ウェイト300、レタースペーシング-0.64px、‘ss01’。ボディ16px ウェイト300、rgba(255,255,255,0.7)。内部カードは6pxラジウスのrgba(255,255,255,0.1)ボーダーを使用。」

イテレーションガイド

1. sohne-varテキストには常に font-feature-settings: "ss01" を有効にする――これがブランドのタイポグラフィDNA
2. ウェイト300がデフォルト; 400はボタン/リンク/ナビゲーションにのみ使用
3. シャドウの公式: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2（Y1/B1は大きい（遠いシャドウ）、Y2/B2は小さい（近いシャドウ））
4. 見出し色は #061b31（ディープネイビー）、ボディは #64748d（スレート）、ラベルは #273951（ダークスレート）
5. ボーダーラジウスは4px〜8pxの範囲に維持――ピル形状や大きな丸みは使用しない
6. テーブル、チャート、財務表示の数字には "tnum" を使用
7. ダークセクションには #1c1e54 を使用――黒でも灰色でもなく、深いブランドインディゴ
8. コードにはSourceCodeProを12px/500で、行間2.00（可読性のために非常に寛大）で使用