開発者ツールのデザインシステム
開発者ツールやインフラ系のWebサイトから抽出したデザインシステムです。ホスティング、データベース、API、IDE、DevOps製品が中心です。ダークな背景、等幅フォントのアクセント、主要コンポーネントとしてスタイリングされたコードブロックを多用し、引き締まった技術的なタイポグラフィが特徴です。
このカテゴリーには3件のDESIGN.mdサンプルがあります（抽出元：Neon、RailwayとSupabase）。各サイトの公開ページから抽出したもので、公式のブランドガイドラインではありません。初めての方はDESIGN.mdとは何かをご覧ください。
Neon
Neonのデザインシステムは、ほぼ黒のキャンバス(#000000、#18191b)を基調とした、ダークモードを前提にした開発者向けブランドです。主要色には鮮やかなネオングリーン(#00e599)を使い、補助色として中間のグリーン(#34d59a)を組み合わせています。タイポグラフィはUI・本文にInter、コードとデータにGeistMonoを採用し、どちらも字間をやや詰めた設定です。余白は4pxを基本単位とするグリッドに沿っています。角丸は4pxに統一された最小限のものです。奥行きは影ではなく境界線のコントラストで表現し、環境光のドロップシャドウは控えめに一つだけ使っています。ヒーローセクションでは画面全体に広がるアニメーションのデータ可視化背景を配置しており、データベースやインフラというブランドの個性を強めています。
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を限定的に使っています。
Supabase
Supabaseは、ダークモードを基本とするデザインシステムで、深いほぼ黒の背景（oklch ~0.19）と鮮やかなグリーンのブランドアクセント（#3ecf8e / #3fcf8e）を軸にしています。レイアウトはレスポンシブな機能カードのグリッドを中心に構成され、見出しにはManrope、本文およびUIテキストにはInterを使用しています。等幅フォントやコード表示にはSource Code Proを使用しています。カラーシステムはoklchのカスタムプロパティをもとに、意味に基づいた命名で構築されています。カードの角丸は12px、境界線は控えめな処理で、ボタンの角丸は6〜8pxです。全体の情報密度は中程度で、8pxを基本単位とするスペーシンググリッドに沿っています。
お探しのサイトが見つかりませんか？
URLを貼り付けるだけで、あらゆるWebサイトからDESIGN.mdを取得できます。カラー、タイポグラフィ、スペーシング、トークンを、AIワークフローですぐに使える形で。