AIのデザインシステム
AIプロダクト、モデル、研究機関のWebサイトから抽出したデザインシステムです。アシスタント、モデル提供企業、AIツールが中心です。落ち着いたエディトリアルなタイポグラフィに温かみのあるニュートラルなパレットを合わせたものもあれば、開発者向け製品のようなダークで技術的な見た目のものもあります。
このカテゴリーには4件のDESIGN.mdサンプルがあります（抽出元：Anthropic、Harvey、PaperclipとxAI）。各サイトの公開ページから抽出したもので、公式のブランドガイドラインではありません。初めての方はDESIGN.mdとは何かをご覧ください。
Anthropic
Anthropicのデザインシステムは、抑制の効いたタイポグラフィ主導のアイデンティティで、Anthropic SerifとAnthropic Sansという2つのカスタムタイプフェイスを軸にしています。背景は温かみのあるアイボリー（#faf9f5）が基調です。配色は意図的にミニマルで、温かみのあるオフホワイトの上にほぼ黒の#141413を配し、二次的なテキストや罫線にはくすんだストーン系の色調を使っています。大きなセリフの見出しがエディトリアルな語り口の核となり、ダークパネルのセクション（ほぼ黒の背景にアイボリーの文字）が劇的なコントラストを生み出しています。全体として、余白を豊かにとり、タイポグラフィのコントラストを高く保ち、装飾をいっさい排したスタイルによって、知的な真剣さと安全性を第一とするミッションを伝えています。
Harvey
Harveyのデザインシステムは、独自のデュアルタイプフェイス体系を軸としています。編集上の権威性を示すHarveySerifFontと、機能的な明快さを担うHarveySansFontです。ナビゲーションバーには温かみのあるほぼ黒の#0f0e0dを、コンテンツ面にはオフホワイトのアイボリー#fafaf9を用いています。パレットはあえて単色調で構成され、gray-50からgray-950までの段階的な暖色系グレーのスケールを使い、アクセント色は使用していません。高い専門性が求められるリーガルワークにふさわしい、信頼感と抑制の効いた印象を狙っています。奥行きや高さはシャドウではなく、面どうしのコントラストによって表現されています。ヒーローの見出しは72pxの大きなセリフ体で、タイポグラフィによる権威性を一目で伝えます。本文やUI要素にはカスタムのサンセリフ体を使用しています。余白は8pxの基本グリッドに従い、xs、sm、md、xl、2xlという名前付きのスケールトークンで管理されています。
Paperclip
Paperclipは、ほぼ黒の背景（#0a0a0a）と白（#ffffof）の前景テキスト（#ffffff）を基調とした、大胆なダークキャンバスのデザインのAIエージェント管理プラットフォームです。ヒーローセクションには、マゼンタ、バイオレット、ティール、オレンジ、イエローによるカプセル状の図形を積み重ねた鮮やかなマルチカラーのグラデーションイラストが配置され、ダークな背景に対して色彩豊かでエネルギッシュなビジュアルアイデンティティを生み出しています。タイポグラフィは、Inter Tight（詰まった書体幅で、負のレタースペーシングを施した太字の見出し）、Inter（本文とUI）、JetBrains Mono（コードとステータス表示）を組み合わせています。主要なCTAには、ダーク背景上の白いピル型ボタンを採用しています。製品UI全体では、セマンティックなグリーン（#22c55e）のステータス表示体系を用い、エージェントやタスクの状態を示しています。ナビゲーションはミニマルでフラットな構成で、下部に控えめなボーダーを備えています。
xAI
xAIのマーケティングサイトは、温かみのあるオフホワイトの面色を基調としています。--color-ivory（#f9f8f6）と--color-white（#ffffff）を基準とし、ほぼ黒の#0a0a0aを主要な文字色および前景色として使っています。タイポグラフィは三系統に分かれており、60〜72pxの大きな見出しにはuniversalSansDisplayを、文字間隔を強めに詰めて使用します。本文とUI文言にはuniversalSans、コードやターミナル表示にはGeistMonoを用いています。角丸は、CTAやタグに使われる9999pxのピル形状が中心で、カードには12px、入力欄には6pxを適用しています。エレベーションは控えめで、カードには複数層の柔らかいドロップシャドウを使う一方、多くの面はフラットに保たれています。全体のトーンは技術的でプレミアムな印象です。色数を抑え、余白を十分に取り、モノスペースのコード表現を強く打ち出すことで、開発者にとっての信頼性を示しています。
お探しのサイトが見つかりませんか？
URLを貼り付けるだけで、あらゆるWebサイトからDESIGN.mdを取得できます。カラー、タイポグラフィ、スペーシング、トークンを、AIワークフローですぐに使える形で。