DESIGN.mdのサンプル
公開Webサイトから抽出した実際のDESIGN.mdファイルです。それぞれのファイルに、サイトのカラー、タイポグラフィ、スペーシング、コンポーネントが、AIコーディングエージェントが読み込める形式でまとめられています。カードを開いてプレビューし、リポジトリにコピーしてください。
各サイトの公開ページから抽出したもので、公式のブランドガイドラインではありません。初めての方はDESIGN.mdとは何かをご覧ください。
Airbnb
Airbnbのデザインシステムは、独自のバリアブルフォント「Airbnb Cereal VF」を中心に構成されています。ほぼモノクロームのニュートラルなパレットで、濃いチャコール（#222222）とライトグレーを基調としています。ブランドのシグネチャーカラーである「Rausch」のコーラルピンク（#ff385c）は、プライマリーCTAとロゴにのみ限定して使われています。レイアウトはレスポンシブな写真カードグリッドで、画像とテキストの比率にゆとりがあります。カードには20pxのやわらかな角丸が付けられ、複数レイヤーのアンビエントシャドウによって、強いコントラストを避けながら控えめな奥行きを生み出しています。検索バーは目立つピル型のコンテナで、主要なユーザーアクションをまとめる役割を果たしています。
Anthropic
Anthropicのデザインシステムは、抑制の効いたタイポグラフィ主導のアイデンティティで、Anthropic SerifとAnthropic Sansという2つのカスタムタイプフェイスを軸にしています。背景は温かみのあるアイボリー（#faf9f5）が基調です。配色は意図的にミニマルで、温かみのあるオフホワイトの上にほぼ黒の#141413を配し、二次的なテキストや罫線にはくすんだストーン系の色調を使っています。大きなセリフの見出しがエディトリアルな語り口の核となり、ダークパネルのセクション（ほぼ黒の背景にアイボリーの文字）が劇的なコントラストを生み出しています。全体として、余白を豊かにとり、タイポグラフィのコントラストを高く保ち、装飾をいっさい排したスタイルによって、知的な真剣さと安全性を第一とするミッションを伝えています。
Apple
CSSOM の頻度分析により、LLM による解釈を介さずに抽出したデザイントークンです。
Dribbble
Dribbbleのデザインシステムは、深く沈んだ黒に近いネイビー（#0d0c22）と、clean な白のサーフェスを基調としています。シグネチャーカラーのホットピンク（#ea4c89）は、編集的な強調やインタラクティブな要素のハイライトに控えめに用いられています。タイポグラフィはすべてのウェイトでMona Sansのみを使用し、階層はウェイトとサイズだけで表現されています。形状言語は、ピル型のボタン（border-radius: 1e+07px）と角丸のカード（12pxの半径）によって定義されています。レイアウトは8pxのベースグリッドに沿って余白を広くとり、エレベーションは重なりを強くするのではなく、控えめなドロップシャドウで示されています。
Duolingo - The world’s most popular way to learn
CSSOM の頻度分析により、LLM による解釈を経ずに抽出したデザイントークンです。
Figma
Figmaのマーケティングサイトは、純粋な白黒のモノクロームな配色を基調としており、独自のバリアブルフォント「figmaSans」を中心に構成されています。デザインはタイポグラフィが主役で、88px・56pxの大きな見出しをマイナスのレタースペーシングで引き締め、ウェイト330の軽やかな本文と対比させています。CTAはborder-radius: 9999pxの完全な角丸のピル型で、黒いソリッドの背景に白い文字を配置しています。レイアウトは最大幅1440pxのグリッドベースで、セクションの上下パディングは80pxと余裕を持たせ、白いキャンバスをすっきりと見せています。奥行き表現は控えめで、oklchベースのやわらかなシャドウオーバーレイを使用しています。フッターのバナーには、ラベンダー・パープルのアクセントカラー（#cb9fd2）が差し込まれています。全体として、自信に満ちた、タイポグラフィにこだわった洗練された印象で、ブランドを前面に押し出したスタイルです。
Harvey
Harveyのデザインシステムは、独自のデュアルタイプフェイス体系を軸としています。編集上の権威性を示すHarveySerifFontと、機能的な明快さを担うHarveySansFontです。ナビゲーションバーには温かみのあるほぼ黒の#0f0e0dを、コンテンツ面にはオフホワイトのアイボリー#fafaf9を用いています。パレットはあえて単色調で構成され、gray-50からgray-950までの段階的な暖色系グレーのスケールを使い、アクセント色は使用していません。高い専門性が求められるリーガルワークにふさわしい、信頼感と抑制の効いた印象を狙っています。奥行きや高さはシャドウではなく、面どうしのコントラストによって表現されています。ヒーローの見出しは72pxの大きなセリフ体で、タイポグラフィによる権威性を一目で伝えます。本文やUI要素にはカスタムのサンセリフ体を使用しています。余白は8pxの基本グリッドに従い、xs、sm、md、xl、2xlという名前付きのスケールトークンで管理されています。
IKEA
IKEAのグローバルホームページは、大胆でフラットなデザインシステムを採用しています。象徴的なIKEAイエロー（#ffdb00）を主要なアクション面として用い、IKEAブルー（#0058a3）をブランドロゴのアクセントカラーとして使用しています。タイポグラフィ全体は、Noto IKEAというカスタムタイプフェイス一種類で構成されており、ウェイトは400と700を使い分けています。本文の14pxからディスプレイ見出しの51pxまで、サイズ展開は細かく定義されています。立体感はシャドウではなく、色のコントラストとレイアウト構造によって表現されています。レイアウトは最大幅90remのコンテナと、デスクトップでは1.5remのグリッドギャップを使用し、インタラクティブな要素には8pxの角丸トークンを一貫して適用しています。オフホワイトの背景（#fffefb）は、濃い#111111のテキストに温かみを添え、コントラストが高く読みやすい体験を実現しています。
Klarna
Klarnaのデザインシステムは、洗練されたダークネイビーのプライマリーカラー（#0b051d）を基調とし、シグネチャーであるピンク（#ffa8cd）などの鮮やかなアクセントカラーを組み合わせています。カスタムのKlarnaフォントとシステムフォントを併用し、角丸（最も多いのは32px）を強調しています。また、アクセシビリティに配慮して高いコントラストを維持しています。ゆとりのある余白と明確なタイポグラフィの階層によって、プロフェッショナルさと親しみやすさのバランスを取っている点が特徴です。
Linear
Linearのデザインシステムは、エンジニアリングチーム向けに作られた、ダークを基調とした高密度なプロダクトUIです。サーフェスのパレットは#08090aや#0f1011といったほぼ黒の色を基準にし、サイドバー、カード、パネルを区別するために暗いグレーを何段階も重ねています。タイポグラフィはInter Variableのみを使用し、ディスプレイサイズでは字間を詰めて精密に整えています。インラインのコードにはBerkeley Monoを使用しています。角丸は意図的に小さく抑えられており、2〜6pxが主流です。ピル形状はバッジやステータスチップに限って使われています。エレベーションは大きな重なりではなく、1pxの控えめなインセットボーダーと低い不透明度のドロップシャドウで表現されています。プライマリCTAの色は、Linear特有のインディゴ#5e6ad2で、Sign Upボタンや主要なリンクに使われています。
Magentix Studio
Magentix Studioは、AIを中核に据えたプロダクトスタジオを、エディトリアルでアートギャラリーのような佇まいで演出しています。
Neon
Neonのデザインシステムは、ほぼ黒のキャンバス(#000000、#18191b)を基調とした、ダークモードを前提にした開発者向けブランドです。主要色には鮮やかなネオングリーン(#00e599)を使い、補助色として中間のグリーン(#34d59a)を組み合わせています。タイポグラフィはUI・本文にInter、コードとデータにGeistMonoを採用し、どちらも字間をやや詰めた設定です。余白は4pxを基本単位とするグリッドに沿っています。角丸は4pxに統一された最小限のものです。奥行きは影ではなく境界線のコントラストで表現し、環境光のドロップシャドウは控えめに一つだけ使っています。ヒーローセクションでは画面全体に広がるアニメーションのデータ可視化背景を配置しており、データベースやインフラというブランドの個性を強めています。
Notion
Notionのマーケティング向けホームページは、深いネイビー（#02093a）のヒーローセクションと明るい（#f6f5f4）ボディを組み合わせています。全テキストに独自書体のNotionInterを用い、12カラムグリッドと28pxのガターで構成されています。角丸は2種類を使い分け、カードには8px、ピル型の要素には9999pxを適用しています。フローティングUIには複数レイヤーのシャドウを段階的に重ねた影の仕組みを採用しています。ブランドブルー（#2537b1）はCTAやアクセントのハイライトに使われ、gray-200からgray-900までの段階的なグレースケールが、テキストと面の階層を整えています。
Paperclip
Paperclipは、ほぼ黒の背景（#0a0a0a）と白（#ffffof）の前景テキスト（#ffffff）を基調とした、大胆なダークキャンバスのデザインのAIエージェント管理プラットフォームです。ヒーローセクションには、マゼンタ、バイオレット、ティール、オレンジ、イエローによるカプセル状の図形を積み重ねた鮮やかなマルチカラーのグラデーションイラストが配置され、ダークな背景に対して色彩豊かでエネルギッシュなビジュアルアイデンティティを生み出しています。タイポグラフィは、Inter Tight（詰まった書体幅で、負のレタースペーシングを施した太字の見出し）、Inter（本文とUI）、JetBrains Mono（コードとステータス表示）を組み合わせています。主要なCTAには、ダーク背景上の白いピル型ボタンを採用しています。製品UI全体では、セマンティックなグリーン（#22c55e）のステータス表示体系を用い、エージェントやタスクの状態を示しています。ナビゲーションはミニマルでフラットな構成で、下部に控えめなボーダーを備えています。
PayPal
PayPalのオランダ語版ホームページは、鮮やかなスカイブルー（#60cdff）のヒーローセクションを核にした、大胆で消費者向けのデザインです。見出しには超極太のPayPal Pro w900を使い、黒の大きな文字で力強さを出しています。ナビゲーションは白地に黒文字で、アウトラインの「Inloggen」と塗りつぶしの黒い「Rekening openen」という2種類のCTAボタンを備えています。上部には濃紺のお知らせバナーが配置されています。全体として高コントラストで、ピル型の丸みを帯びた角とブランドタイポグラフィを軸にしており、幅広い消費者向け金融サービスの対象者に向けて、信頼感と分かりやすさを伝えています。
Railway
Railwayのデザインシステムは、ダークを基調とした開発者向けプラットフォームのUIです。深い黒に近いネイビーの面(#13111c、#0b0b0f)を土台にし、高コントラストのオフホワイトのテキスト(#f7f7f8)と、特徴的な紫のブランドアクセント(#853bce / #553f83)を組み合わせています。ヒーローセクションはIBM Plex Serifで編集的な重みを出し、UIの文言はすべてInterで組み、コード表示にはJetBrains MonoとSF Monoを使っています。 立体感は影ではなく、rgba(255,255,255,0.2) 1.5px insetの白い光彩のような内側ボーダーで表現しており、ガラスパネルのような印象を与えます。スペーシングは4pxを基準とし、8／12／16／24／32の明確なリズムで構成されています。角丸は4pxが中心で、カードやヒーローのコンテナには8pxと16pxを限定的に使っています。
Shopify
Shopifyのマーケティング用トップページは、全面に広がるドラマチックな動画ヒーローを採用しています。ほぼ黒に近い背景色 #02090a が、上部の白いナビゲーションバーと鮮やかなコントラストを生み出しています。ブランドのアクセントカラーは鮮やかなミントグリーンの #36f4a4 で、ハイライトやインタラクティブな状態の表示にアクセントとして控えめに使われています。タイポグラフィは、ディスプレイ用や編集的な見出しに NeueHaasGrotesk、UIの本文に Inter-Variable を組み合わせています。CTAには完全な角丸のピル型(border-radius: 9999px)が用いられています。全体の設計システムは、自信に満ち、コントラストが高く、理想を感じさせる印象で、訪問者を加盟店へと転換させることを目指して作られています。
Snapchat
Snapchatのウェブサイトは、象徴的なブランドカラーの#FFFC00を軸にしたハイコントラストのライトテーマを採用しています。主要な面には#121314のほぼ黒に近い色を使い、ページの背景は clean な白で構成されています。タイポグラフィは、メインのAvenir NextとセカンダリーのGraphikを組み合わせ、親しみやすさと整理された階層を両立させています。ボタン、ピル型要素、タグには100pxの完全な角丸を用い、入力欄には5pxの控えめな角丸を適用しています。ナビゲーションは柔らかなドロップシャドウを持つフローティングのピル型です。コンテンツは白い文字を重ねた大きなメディアカードで表示され、アプリのプレビューを前面に出した没入感のあるレイアウトになっています。全体の情報密度は適度で、余白を十分に取り、マーケティングとプロダクトUIの両方の慣習をつなぐ明確な視覚的階層を備えています。
Stripe
Stripeのマーケティングホームページは、可変フォント「sohne-var」を軽めのウェイト（300〜400）で用いた、厳密に管理されたデザインシステム（HDS — Stripe Design System）で構成されています。ブランドカラーは濃いネイビーからインディゴにかけてのパレットで、中核には#533afd（Stripe Indigo）を据えています。特徴的なのは、全面に広がるスペクトラム調のグラデーションを用いたヒーローセクションです。コンポーネントは角丸が小さく（4〜6px）、影はフラットからごく控えめな程度に抑えられ、8pxを基準とするスペーシンググリッドに沿って構成されています。全体のトーンは、権威がありながらも親しみやすく、確かなタイポグラフィと控えめな色使いによって、金融インフラストラクチャーを伝えています。
Supabase
Supabaseは、ダークモードを基本とするデザインシステムで、深いほぼ黒の背景（oklch ~0.19）と鮮やかなグリーンのブランドアクセント（#3ecf8e / #3fcf8e）を軸にしています。レイアウトはレスポンシブな機能カードのグリッドを中心に構成され、見出しにはManrope、本文およびUIテキストにはInterを使用しています。等幅フォントやコード表示にはSource Code Proを使用しています。カラーシステムはoklchのカスタムプロパティをもとに、意味に基づいた命名で構築されています。カードの角丸は12px、境界線は控えめな処理で、ボタンの角丸は6〜8pxです。全体の情報密度は中程度で、8pxを基本単位とするスペーシンググリッドに沿っています。
The Onion
The Onion のデザインシステムは、新聞を電子化した風刺メディアらしい構成です。黒の太いコンデンスド・ゴシック体の見出しを中心に、セクションラベル、トレンドバッジ、CTAには特徴的なフォレストグリーン（#006b3a）のブランドアクセントを使用し、背景は白とライトグレーで統一されています。タイポグラフィがデザインの主役で、見出しにはAdobe Fontsのtablet-gothicやrocky-condensedなどのコンデンスド／セミコンデンスド・グロテスクを、本文にはutopia-std-captionを採用しています。情報密度の高いレイアウトで、カードグリッドは詰まった配置となり、記事の区切りには下線のボーダーを用いています。構造要素の角丸はほぼなく、影は一部のオーバーレイにのみ控えめに施されています。
Uber
Uberのデザイン言語は、クリーンなミニマリズムと鮮やかなイラストレーションを組み合わせ、親しみやすさとプロフェッショナルな印象を両立させた交通プラットフォームを実現しています。くっきりとした白黒の基調が明快さと可読性を生み出し、カラフルなヒーローイラストレーションが温かみと人とのつながりを加えています。タイポグラフィはブランドの一貫性のためにカスタムフォントファミリーのUberMoveを用いており、全体に余白を広くとることで、インターフェース全体に心地よい広がりを生んでいます。
WIRED
WIRED のデザインシステムは、ハイコントラストで編集主導のモノクロ基調のフレームワークです。独自のタイプシステム（Breve Text、WIRED Mono、WiredDisplay、Apercu）を中心に構成され、彩度の極めて低いカラーパレットを採用しています。黒（#000000）が2961件と圧倒的に多く、テキスト、罫線、アイコン、インタラクティブな状態を支えています。白（#ffffff）が主要なサーフェスを担っています。アクセントカラーは控えめに使われ、購読用CTAのブランドブルーとして #057dbc のみが登場します。レイアウトは複数カラムで構成されたストーリーグリッドを基本とし、8pxを基準とした詰まったスペーシングを用います。サーフェスはフラットで box-shadow はなく、角丸は標準で4pxと最小限に抑えられています。タイポグラフィが最大の特徴で、編集的な本文には19pxのBreve Textを、セクションラベルには大文字で字間を広げたWIRED Monoを、ディスプレイ見出しにはWiredDisplayを使用します。全体の印象は、権威があり情報密度が高く、読みの流れを最優先にした美学です。
xAI
xAIのマーケティングサイトは、温かみのあるオフホワイトの面色を基調としています。--color-ivory（#f9f8f6）と--color-white（#ffffff）を基準とし、ほぼ黒の#0a0a0aを主要な文字色および前景色として使っています。タイポグラフィは三系統に分かれており、60〜72pxの大きな見出しにはuniversalSansDisplayを、文字間隔を強めに詰めて使用します。本文とUI文言にはuniversalSans、コードやターミナル表示にはGeistMonoを用いています。角丸は、CTAやタグに使われる9999pxのピル形状が中心で、カードには12px、入力欄には6pxを適用しています。エレベーションは控えめで、カードには複数層の柔らかいドロップシャドウを使う一方、多くの面はフラットに保たれています。全体のトーンは技術的でプレミアムな印象です。色数を抑え、余白を十分に取り、モノスペースのコード表現を強く打ち出すことで、開発者にとっての信頼性を示しています。
お探しのサイトが見つかりませんか？
URLを貼り付けるだけで、あらゆるWebサイトからDESIGN.mdを取得できます。カラー、タイポグラフィ、スペーシング、トークンを、AIワークフローですぐに使える形で。