SaaSのデザインシステム
ソフトウェアやSaaSのWebサイトから抽出したデザインシステムです。生産性アプリ、プロジェクト管理ツール、CRMなど、サービスとして提供される製品が中心です。多くは抑えたパレットに1色のアクセントカラーと明快なタイプスケールを組み合わせており、ダッシュボードやプロダクトのマーケティングページの出発点に向いています。
このカテゴリーには3件のDESIGN.mdサンプルがあります（抽出元：Figma、LinearとNotion）。各サイトの公開ページから抽出したもので、公式のブランドガイドラインではありません。初めての方はDESIGN.mdとは何かをご覧ください。
Figma
Figmaのマーケティングサイトは、純粋な白黒のモノクロームな配色を基調としており、独自のバリアブルフォント「figmaSans」を中心に構成されています。デザインはタイポグラフィが主役で、88px・56pxの大きな見出しをマイナスのレタースペーシングで引き締め、ウェイト330の軽やかな本文と対比させています。CTAはborder-radius: 9999pxの完全な角丸のピル型で、黒いソリッドの背景に白い文字を配置しています。レイアウトは最大幅1440pxのグリッドベースで、セクションの上下パディングは80pxと余裕を持たせ、白いキャンバスをすっきりと見せています。奥行き表現は控えめで、oklchベースのやわらかなシャドウオーバーレイを使用しています。フッターのバナーには、ラベンダー・パープルのアクセントカラー（#cb9fd2）が差し込まれています。全体として、自信に満ちた、タイポグラフィにこだわった洗練された印象で、ブランドを前面に押し出したスタイルです。
Linear
Linearのデザインシステムは、エンジニアリングチーム向けに作られた、ダークを基調とした高密度なプロダクトUIです。サーフェスのパレットは#08090aや#0f1011といったほぼ黒の色を基準にし、サイドバー、カード、パネルを区別するために暗いグレーを何段階も重ねています。タイポグラフィはInter Variableのみを使用し、ディスプレイサイズでは字間を詰めて精密に整えています。インラインのコードにはBerkeley Monoを使用しています。角丸は意図的に小さく抑えられており、2〜6pxが主流です。ピル形状はバッジやステータスチップに限って使われています。エレベーションは大きな重なりではなく、1pxの控えめなインセットボーダーと低い不透明度のドロップシャドウで表現されています。プライマリCTAの色は、Linear特有のインディゴ#5e6ad2で、Sign Upボタンや主要なリンクに使われています。
Notion
Notionのマーケティング向けホームページは、深いネイビー（#02093a）のヒーローセクションと明るい（#f6f5f4）ボディを組み合わせています。全テキストに独自書体のNotionInterを用い、12カラムグリッドと28pxのガターで構成されています。角丸は2種類を使い分け、カードには8px、ピル型の要素には9999pxを適用しています。フローティングUIには複数レイヤーのシャドウを段階的に重ねた影の仕組みを採用しています。ブランドブルー（#2537b1）はCTAやアクセントのハイライトに使われ、gray-200からgray-900までの段階的なグレースケールが、テキストと面の階層を整えています。
お探しのサイトが見つかりませんか？
URLを貼り付けるだけで、あらゆるWebサイトからDESIGN.mdを取得できます。カラー、タイポグラフィ、スペーシング、トークンを、AIワークフローですぐに使える形で。