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

Category: AIおよびLLM 深いティールブラックを基調とした、ゆったりとした余白とエディトリアルなタイポグラフィが特徴の、落ち着いたほぼモノクロームのシステム。

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

OpenAIのプロダクト表面は、一般向けに整えられた研究施設のように映る——臨床的で、抑制されており、意図的に静謐だ。ページ背景は純粋な白（#ffffff）で、わずかにティールのアンダートーンを帯びたニアブラックのインク（#0d0d0d）と重なり合う。そのためテキストでさえ、攻撃的な暗さではなく、わずかに冷たいトーンを帯びる。結果として生まれる色彩的中立性は、まわりのクロームではなく、モデルの出力・コード・文章そのものを前景に押し出す。

このシステムの象徴的な特徴は、抑えたウェイトのSöhne（またはシステム代替のinter）の使用だ——本文は400、ナビゲーションとラベルは500、強調は600——これに、エディトリアル表示用のコンテンポラリーセリフ書体であるSignifierが組み合わされる。多くのAIブランドが未来志向に傾くなか、OpenAIのセリフ見出しはプロダクトに静かに文学的なトーンをもたらし、まるであらゆるアナウンスがエッセイであるかのような印象を与える。

シェイプシステムは一貫してソフトだ。8px〜12pxの角丸、タグやチップには9999pxのピル形状、どこにも鋭い角は存在しない。セクションの切れ目は仕切り線ではなく余白で示される。ボーダーが現れる際は#e5e5e5のヘアライン——色の存在ではなく、色の不在として読み取れるほど細い。

主な特徴：

• 深いティールブラックのインク（#0d0d0d）を持つ純白のキャンバス（#ffffff）
• 控えめなウェイト（400、500、600）のSöhne / Inter——主張より抑制
• エディトリアル表示の見出しにSignifierセリフ
• すべての箇所に8〜12pxのソフトな角丸、チップには9999pxのピル
• ヘアラインボーダー（#e5e5e5）を控えめに使用、余白が主たる区切り
• 深いティールによる単色イラスト——マーク内にグラデーションなし
• 十分なラインハイト（1.55〜1.65）とゼロに近いトラッキング

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

プライマリ

• ピュアホワイト（#ffffff）：プライマリ背景、カード面、ボタン背景。
• インクブラック（#0d0d0d）：プライマリテキスト、ブランドマーク、プライマリCTA。
• ソフトブラック（#1a1a1a）：セカンダリ見出し、非重要テキストの代替インク。

サーフェスと背景

• ミスト（#fafafa）：セクション区切り背景、フッターサーフェス。
• パール（#f5f5f5）：カード面、高さのあるパネル。
• クラウド（#ececec）：無効化された背景、仕切りのティント。

ブランドアクセント

• OpenAIティール（#10a37f）：ブランドプライマリ、リンク、ハイライトバッジ——それ以外はニュートラルなシステムにおける唯一の色。
• ティールディープ（#0a7a5e）：ブランドカラーのホバーおよび押下状態。
• ティールソフト（#e8f5f0）：成功バッジやハイライトコールアウトのサーフェスティント。

ニュートラルとテキスト

• グラファイト（#3c3c3c）：本文テキスト、デフォルトの閲覧カラー。
• スレート（#6e6e6e）：セカンダリテキスト、キャプション、メタデータ。
• アッシュ（#9b9b9b）：第三テキスト、プレースホルダー、無効ラベル。
• ストーン（#c4c4c4）：装飾的な仕切り線、薄いアイコン。

セマンティックとボーダー

• ボーダーヘアライン（#e5e5e5）：標準のヘアライン区切り線。
• ボーダーソフト（#ededed）：白いサーフェス上のカードアウトライン。
• エラー（#ef4146）：バリデーション、破壊的なアクション。
• ワーニング（#f5a623）：注意喚起の状態に使うソフトなアンバー。
• インフォ（#2563eb）：情報リンクのトーン（控えめに使用、ティールが優先）。

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

フォントファミリ

• ディスプレイ / エディトリアル：Signifier、フォールバック：'Source Serif Pro', Georgia, serif
• 本文 / UI：Söhne、フォールバック：Inter, system-ui, -apple-system, 'Segoe UI', sans-serif
• コード / モノ：Söhne Mono、フォールバック：ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace

階層

原則

• アイデンティティとしての抑制：ウェイトは600を上限とする。700以上はブランドのトーンから外れる。階層はウェイトではなく、サイズと色によって生み出す。
• 魂のためのセリフ、システムのためのサンセリフ：SignifierはエディトリアルなDisplayの場面にのみ使用する。プロダクトUIはサンセリフのみ。
• Displayにはネガティブトラッキング：Displayサイズには-0.02em、16pxに向かうにつれてゼロに戻す。

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

ボタン

プライマリ

• Background: #0d0d0d
• Text: #ffffff
• Padding: 10px 18px
• Radius: 9999px（チップはフルピル形状）、矩形CTAには12px
• Hover: #1a1a1a background
• 用途：プライマリCTA、「ChatGPTを試す」、「サインイン」

セカンダリ

• Background: #ffffff
• Text: #0d0d0d
• Border: 1px solid #e5e5e5
• Padding: 10px 18px
• Radius: 12px
• Hover: background #fafafa、border #d4d4d4

ブランドアクセント

• Background: #10a37f
• Text: #ffffff
• Padding: 10px 18px
• Radius: 12px
• Hover: #0a7a5e
• 用途：アップグレードのハイライトCTA、成功パス

カード

• Background: #ffffff
• Border: 1px solid #ededed
• Radius: 16px
• Padding: 24px〜32px
• Shadow: デフォルトはなし、ホバー時 0 4px 16px rgba(13,13,13,0.06)

インプット

• Background: #ffffff
• Border: 1px solid #e5e5e5
• Radius: 12px
• Padding: 12px 14px
• Focus: border #10a37f、ring 0 0 0 3px rgba(16,163,127,0.12)

ピルとタグ

• Background: #f5f5f5
• Text: #3c3c3c
• Padding: 4px 10px
• Radius: 9999px
• Font: 12px / 500

5. スペーシングとレイアウト

• 基本単位：4px。スケール：4、8、12、16、24、32、48、64、96、128。
• コンテナ：max-width 1200px、モバイルは24pxガター、デスクトップは48px。
• セクションリズム：主要セクション間の縦方向は96〜128px、モバイルは64px。
• グリッド：デスクトップは12カラム、モバイルは4カラム、ギャップは24px。

6. モーション

• デュレーション：ホバーは150〜220ms、レイアウトトランジションは280〜360ms。
• イージング：入場には cubic-bezier(0.16, 1, 0.3, 1)（スムーズアウト）。
• 抑制：パララックスなし、スクロールジャッキングなし。控えめなフェードとトランスレートのみ。

7. 使用上のガイドライン

• ニュートラルなエディトリアルの抑制、ソフトな角丸、控えめなアクセントの使用は、セットで維持すること。グリーンのアクセントを使うだけでは、OpenAIらしいサーフェスは生まれない。
• Signifierスタイルのディスプレイ表現は、エディトリアルまたは告知の階層にのみ使用し、プロダクトのコントロールはサンセリフシステムで保つこと。
• 装飾的なモーション、重いシャドウ、過大な装飾的カードは避けること。このシステムは落ち着いていて、読みやすく、意図的な印象を与えるものでなければならない。