DESIGN MD カタログ

01 PRIMARY #ff385c #ffffff / #e00b41 Brand inspired Airbnb Airbnbに着想を得たライト・写真主役なEC・小売向けUI。#ff385cを軸に、Airbnb Cereal VFと部品規則をAIへ渡せます。 EC・小売 ライト / 写真主役 / ミニマル / 親しみ Airbnb Cereal VF 開く閉じる

できること

AIエージェントにAirbnb風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

良いところ

Airbnbらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

02 PRIMARY #181d26 #ffffff / #0d1218 Brand inspired Airtable Airtableに着想を得たダーク・ライトなデザイン・創作向けUI。#181d26を軸に、Haas Groot Dispと部品規則をAIへ渡せます。 デザイン・創作 ダーク / ライト / エディトリアル / 写真主役 Haas Groot Disp 開く閉じる

できること

AIエージェントにAirtable風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

良いところ

Airtableらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

03 PRIMARY #0066cc #ffffff / #0071e3 Brand inspired Apple Appleに着想を得たダーク・写真主役なメディア・消費者テック向けUI。#0066ccを軸に、SF Pro Displayと部品規則をAIへ渡せます。 メディア・消費者テック ダーク / 写真主役 / カラフル SF Pro Display 開く閉じる

できること

AIエージェントにApple風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Appleらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

04 PRIMARY #ffffff #31394d / #060e20 Google official Atmospheric Glass 暗い気象アプリ向け。半透明の結晶パネルと鮮やかな背景で、複雑な気象データを上質に見せます。 Google公式サンプル ダーク / グラス / カラフル / データUI Inter 開く閉じる

できること

DESIGN.mdをAIに読ませ、同じ見た目の画面を生成し、トークンをTailwindやDTCG JSONへ展開できます。

何のため

天気、分析、モニタリングなどデータ量が多い画面に奥行きと視認性を与えるために使います。

良いところ

DESIGN.mdからTailwind設定とDTCG tokens JSONへ落とし込んだ完全な変換例です。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

天気、分析、モニタリングなどデータ量が多い画面に奥行きと視認性を与えるために使います。

導入難度

低編集部の目安

今回借りた原則

色と部品の役割固定

公式トークンからカタログ側で安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

05 PRIMARY #fcd535 #ffffff / #f0b90b Brand inspired Binance Binanceに着想を得たダークな金融・暗号資産向けUI。#fcd535を軸に、BinanceNovaと部品規則をAIへ渡せます。 金融・暗号資産 ダーク BinanceNova 開く閉じる

できること

AIエージェントにBinance風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Binanceらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

06 PRIMARY #1c69d4 #ffffff / #0653b6 Brand inspired BMW BMWに着想を得たダーク・ライトな自動車向けUI。#1c69d4を軸に、BMW Type Next Latinと部品規則をAIへ渡せます。 自動車 ダーク / ライト / 写真主役 BMW Type Next Latin 開く閉じる

できること

AIエージェントにBMW風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

BMWらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

07 PRIMARY #ffffff #000000 / #bbbbbb Brand inspired BMW-M BMW-Mに着想を得たダーク・写真主役な自動車向けUI。#ffffffを軸に、BMWTypeNextLatinと部品規則をAIへ渡せます。 自動車 ダーク / 写真主役 BMWTypeNextLatin 開く閉じる

できること

AIエージェントにBMW-M風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

BMW-Mらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

08 PRIMARY #ffffff #000000 / #cccccc Brand inspired Bugatti Bugattiに着想を得たダーク・写真主役な自動車向けUI。#ffffffを軸に、Bugatti Displayと部品規則をAIへ渡せます。 自動車 ダーク / 写真主役 / ミニマル / プレミアム Bugatti Display 開く閉じる

できること

AIエージェントにBugatti風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

Bugattiらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

09 PRIMARY #111111 #ffffff / #242424 Brand inspired Cal.com Cal.comに着想を得たダーク・ライトな業務・SaaS向けUI。#111111を軸に、Cal Sansと部品規則をAIへ渡せます。 業務・SaaS ダーク / ライト / ミニマル / 親しみ Cal Sans 開く閉じる

できること

AIエージェントにCal.com風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Cal.comらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

10 PRIMARY #cc785c #faf9f5 / #a9583e Brand inspired Claude Claudeに着想を得たダーク・ライトなAI・LLM向けUI。#cc785cを軸に、Copernicusと部品規則をAIへ渡せます。 AI・LLM ダーク / ライト / エディトリアル / テクニカル Copernicus 開く閉じる

できること

AIエージェントにClaude風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Claudeらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

11 PRIMARY #0a0a0a #fffaf0 / #1f1f1f Brand inspired Clay Clayに着想を得たダーク・ライトなデザイン・創作向けUI。#0a0a0aを軸に、Plain Blackと部品規則をAIへ渡せます。 デザイン・創作 ダーク / ライト / 写真主役 / カラフル Plain Black 開く閉じる

できること

AIエージェントにClay風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

良いところ

Clayらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

12 PRIMARY #faff69 #0a0a0a / #e6eb52 Brand inspired ClickHouse ClickHouseに着想を得たダーク・テクニカルなDB・DevOps向けUI。#faff69を軸に、Interと部品規則をAIへ渡せます。 DB・DevOps ダーク / テクニカル Inter 開く閉じる

できること

AIエージェントにClickHouse風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

ClickHouseらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

13 PRIMARY #17171c #ffffff / #000000 Brand inspired Cohere Cohereに着想を得たエディトリアル・ダークなAI・LLM向けUI。#17171cを軸に、CohereTextと部品規則をAIへ渡せます。 AI・LLM エディトリアル / ダーク CohereText 開く閉じる

できること

AIエージェントにCohere風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Cohereらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

14 PRIMARY #0052ff #ffffff / #0a0b0d Brand inspired Coinbase Coinbaseに着想を得たダーク・エディトリアルな金融・暗号資産向けUI。#0052ffを軸に、Coinbase Displayと部品規則をAIへ渡せます。 金融・暗号資産 ダーク / エディトリアル / 写真主役 / ミニマル Coinbase Display 開く閉じる

できること

AIエージェントにCoinbase風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Coinbaseらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

15 PRIMARY #0007cd #0f0f0f / #0005a3 Brand inspired Composio Composioに着想を得たダーク・テクニカルなDB・DevOps向けUI。#0007cdを軸に、abcDiatypeと部品規則をAIへ渡せます。 DB・DevOps ダーク / テクニカル abcDiatype 開く閉じる

できること

AIエージェントにComposio風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

Composioらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

16 PRIMARY #f54e00 #f7f7f4 / #26251e Brand inspired Cursor Cursorに着想を得たダーク・ライトな開発ツール・IDE向けUI。#f54e00を軸に、CursorGothicと部品規則をAIへ渡せます。 開発ツール・IDE ダーク / ライト / エディトリアル / ミニマル CursorGothic 開く閉じる

できること

AIエージェントにCursor風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Cursorらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

17 PRIMARY #e91d2a #ffffff / #000000 Brand inspired Dell 1996 Dell 1996に着想を得たレトロ・ライトなレトロWeb向けUI。#e91d2aを軸に、Arial Blackと部品規則をAIへ渡せます。 レトロWeb レトロ / ライト Arial Black 開く閉じる

できること

AIエージェントにDell 1996風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

1990〜2000年代のWeb、ゲーム機UI、Y2K表現を意図的に再現するために向きます。

良いところ

Dell 1996らしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

1990〜2000年代のWeb、ゲーム機UI、Y2K表現を意図的に再現するために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

18 PRIMARY #292524 #f5f5f5 / #0c0a09 Brand inspired ElevenLabs ElevenLabsに着想を得たダーク・ライトなAI・LLM向けUI。#292524を軸に、Waldenburgと部品規則をAIへ渡せます。 AI・LLM ダーク / ライト / エディトリアル / 写真主役 Waldenburg 開く閉じる

できること

AIエージェントにElevenLabs風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

ElevenLabsらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

19 PRIMARY #000000 #ffffff / #171717 Brand inspired Expo Expoに着想を得たダーク・エディトリアルな開発ツール・IDE向けUI。#000000を軸に、Interと部品規則をAIへ渡せます。 開発ツール・IDE ダーク / エディトリアル / ミニマル / カラフル Inter 開く閉じる

できること

AIエージェントにExpo風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Expoらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

20 PRIMARY #da291c #181818 / #b01e0a Brand inspired Ferrari Ferrariに着想を得たダーク・エディトリアルな自動車向けUI。#da291cを軸に、用途に合う書体階層と部品規則をAIへ渡せます。 自動車 ダーク / エディトリアル / 写真主役 / プレミアム開く閉じる

できること

AIエージェントにFerrari風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

Ferrariらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

21 PRIMARY #000000 #ffffff / #e6e6e6 Brand inspired Figma Figmaに着想を得たライト・エディトリアルなデザイン・創作向けUI。#000000を軸に、figmaSansと部品規則をAIへ渡せます。 デザイン・創作 ライト / エディトリアル / ミニマル / カラフル figmaSans 開く閉じる

できること

AIエージェントにFigma風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

良いところ

Figmaらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

22 PRIMARY #ffffff #090909 / #0099ff Brand inspired Framer Framerに着想を得たダーク・カラフルなデザイン・創作向けUI。#ffffffを軸に、GT Walsheim Framer Mediumと部品規則をAIへ渡せます。 デザイン・創作 ダーク / カラフル GT Walsheim Framer Medium 開く閉じる

できること

AIエージェントにFramer風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

良いところ

Framerらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

23 PRIMARY #000000 #ffffff / #2b89ff Brand inspired HashiCorp HashiCorpに着想を得たダーク・ミニマルなDB・DevOps向けUI。#000000を軸に、hashicorpSansと部品規則をAIへ渡せます。 DB・DevOps ダーク / ミニマル / カラフル / テクニカル hashicorpSans 開く閉じる

できること

AIエージェントにHashiCorp風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

HashiCorpらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

24 PRIMARY #024ad8 #ffffff / #1a1a1a Brand inspired HP HPに着想を得たダークなメディア・消費者テック向けUI。#024ad8を軸に、Forma DJR Microと部品規則をAIへ渡せます。 メディア・消費者テック ダーク Forma DJR Micro 開く閉じる

できること

AIエージェントにHP風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

HPらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

25 PRIMARY #0f62fe #ffffff / #161616 Brand inspired IBM IBMに着想を得たライトなメディア・消費者テック向けUI。#0f62feを軸に、IBM Plex Sansと部品規則をAIへ渡せます。 メディア・消費者テック ライト IBM Plex Sans 開く閉じる

できること

AIエージェントにIBM風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

IBMらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

26 PRIMARY #111111 #f5f1ec / #ff5600 Brand inspired Intercom Intercomに着想を得たライト・エディトリアルな業務・SaaS向けUI。#111111を軸に、Saansと部品規則をAIへ渡せます。 業務・SaaS ライト / エディトリアル / ミニマル Saans 開く閉じる

できること

AIエージェントにIntercom風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Intercomらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

27 PRIMARY #7132f5 #ffffff / #5741d8 Brand inspired Kraken Krakenに着想を得たミニマル・ライトな金融・暗号資産向けUI。#7132f5を軸に、Kraken Brandと部品規則をAIへ渡せます。 金融・暗号資産 ミニマル / ライト Kraken Brand 開く閉じる

できること

AIエージェントにKraken風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Krakenらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

28 PRIMARY #ffc000 #000000 / #ffffff Brand inspired Lamborghini Lamborghiniに着想を得たダークな自動車向けUI。#ffc000を軸に、Lamborghini custom sansと部品規則をAIへ渡せます。 自動車 ダーク Lamborghini custom sans 開く閉じる

できること

AIエージェントにLamborghini風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

Lamborghiniらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

29 PRIMARY #5e6ad2 #010102 / #f7f8f8 Brand inspired Linear Linearに着想を得たダーク・ミニマルな業務・SaaS向けUI。#5e6ad2を軸に、Linear Displayと部品規則をAIへ渡せます。 業務・SaaS ダーク / ミニマル / テクニカル Linear Display 開く閉じる

できること

AIエージェントにLinear風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Linearらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

30 PRIMARY #1c1c1c #f7f4ed / #eceae4 Brand inspired Lovable Lovableに着想を得たダーク・ライトな開発ツール・IDE向けUI。#1c1c1cを軸に、Camera Plain Variableと部品規則をAIへ渡せます。 開発ツール・IDE ダーク / ライト / ミニマル / テクニカル Camera Plain Variable 開く閉じる

できること

AIエージェントにLovable風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Lovableらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

31 PRIMARY #cf4500 #f3f0ee / #141413 Brand inspired Mastercard Mastercardに着想を得たライト・エディトリアルな金融・暗号資産向けUI。#cf4500を軸に、MarkForMCと部品規則をAIへ渡せます。 金融・暗号資産 ライト / エディトリアル / 親しみ / プレミアム MarkForMC 開く閉じる

できること

AIエージェントにMastercard風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Mastercardらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

32 PRIMARY #0064e0 #ffffff / #0457cb Brand inspired Meta Metaに着想を得たライト・写真主役なEC・小売向けUI。#0064e0を軸に、Optimistic VFと部品規則をAIへ渡せます。 EC・小売 ライト / 写真主役 / カラフル Optimistic VF 開く閉じる

できること

AIエージェントにMeta風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

良いところ

Metaらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

33 PRIMARY #0a0a0a #ffffff / #181e25 Brand inspired MiniMax MiniMaxに着想を得たダーク・ライトなAI・LLM向けUI。#0a0a0aを軸に、DM Sansと部品規則をAIへ渡せます。 AI・LLM ダーク / ライト / カラフル / テクニカル DM Sans 開く閉じる

できること

AIエージェントにMiniMax風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

MiniMaxらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

34 PRIMARY #0a0a0a #ffffff / #00d4a4 Brand inspired Mintlify Mintlifyに着想を得たダーク・ライトな業務・SaaS向けUI。#0a0a0aを軸に、Interと部品規則をAIへ渡せます。 業務・SaaS ダーク / ライト / カラフル / テクニカル Inter 開く閉じる

できること

AIエージェントにMintlify風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Mintlifyらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

35 PRIMARY #1c1c1e #ffffff / #ffd02f Brand inspired Miro Miroに着想を得たライト・カラフルなデザイン・創作向けUI。#1c1c1eを軸に、Roobert PROと部品規則をAIへ渡せます。 デザイン・創作 ライト / カラフル / 親しみ Roobert PRO 開く閉じる

できること

AIエージェントにMiro風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

良いところ

Miroらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

難しい内容を、話しかけやすい入口へ変えたいとき。

向いている用途

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

36 PRIMARY #fa520f #ffffff / #cc3a05 Brand inspired Mistral-AI Mistral-AIに着想を得たライト・写真主役なAI・LLM向けUI。#fa520fを軸に、PP Editorial Oldと部品規則をAIへ渡せます。 AI・LLM ライト / 写真主役 / カラフル / 親しみ PP Editorial Old 開く閉じる

できること

AIエージェントにMistral-AI風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Mistral-AIらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

37 PRIMARY #00ed64 #ffffff / #00b545 Brand inspired MongoDB MongoDBに着想を得たダークなDB・DevOps向けUI。#00ed64を軸に、Euclid Circular Aと部品規則をAIへ渡せます。 DB・DevOps ダーク Euclid Circular A 開く閉じる

できること

AIエージェントにMongoDB風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

MongoDBらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

38 PRIMARY #111111 #ffffff / #f5f5f5 Brand inspired Nike Nikeに着想を得たエディトリアル・写真主役なEC・小売向けUI。#111111を軸に、Nike Futura NDと部品規則をAIへ渡せます。 EC・小売 エディトリアル / 写真主役 / ミニマル / ダーク Nike Futura ND 開く閉じる

できること

AIエージェントにNike風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

良いところ

Nikeらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

39 PRIMARY #e60012 #7a8aba / #f68d1f Brand inspired Nintendo.com (2001) Nintendo.com (2001)に着想を得たレトロ・ダークなレトロWeb向けUI。#e60012を軸に、Arialと部品規則をAIへ渡せます。 レトロWeb レトロ / ダーク Arial 開く閉じる

できること

AIエージェントにNintendo.com (2001)風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

1990〜2000年代のWeb、ゲーム機UI、Y2K表現を意図的に再現するために向きます。

良いところ

Nintendo.com (2001)らしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

1990〜2000年代のWeb、ゲーム機UI、Y2K表現を意図的に再現するために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

40 PRIMARY #5645d4 #ffffff / #4534b3 Brand inspired Notion Notionに着想を得たカラフル・テクニカルな業務・SaaS向けUI。#5645d4を軸に、Notion Sansと部品規則をAIへ渡せます。 業務・SaaS カラフル / テクニカル / ライト Notion Sans 開く閉じる

できること

AIエージェントにNotion風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Notionらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

41 PRIMARY #76b900 #ffffff / #000000 Brand inspired NVIDIA NVIDIAに着想を得たダーク・ライトなメディア・消費者テック向けUI。#76b900を軸に、NVIDIA-EMEAと部品規則をAIへ渡せます。 メディア・消費者テック ダーク / ライト / エディトリアル / カラフル NVIDIA-EMEA 開く閉じる

できること

AIエージェントにNVIDIA風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

NVIDIAらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

42 PRIMARY #000000 #ffffff / #090909 Brand inspired Ollama Ollamaに着想を得たライト・写真主役なAI・LLM向けUI。#000000を軸に、SF Pro Roundedと部品規則をAIへ渡せます。 AI・LLM ライト / 写真主役 / ミニマル / カラフル SF Pro Rounded 開く閉じる

できること

AIエージェントにOllama風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Ollamaらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

43 PRIMARY #201d1d #fdfcfc / #0f0000 Brand inspired OpenCode OpenCodeに着想を得たダーク・ライトなAI・LLM向けUI。#201d1dを軸に、Berkeley Monoと部品規則をAIへ渡せます。 AI・LLM ダーク / ライト / エディトリアル / 写真主役 Berkeley Mono 開く閉じる

できること

AIエージェントにOpenCode風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

OpenCodeらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

44 PRIMARY #855300 #d3daea / #ffffff Google official Paws & Paths 犬の散歩・ペットケア向け。Golden RetrieverオレンジとSky Walkブルーで親しみと信頼を両立します。 Google公式サンプル ライト / 親しみ / カラフル / サービス Plus Jakarta Sans 開く閉じる

できること

DESIGN.mdをAIに読ませ、同じ見た目の画面を生成し、トークンをTailwindやDTCG JSONへ展開できます。

何のため

予約、地域サービス、ペット・家族向けプロダクトを温かく見せるために使います。

良いところ

色・書体・部品の意味が明快で、親しみやすいサービスUIの実装に直結します。

kuzu3の一言

難しい内容を、話しかけやすい入口へ変えたいとき。

向いている用途

予約、地域サービス、ペット・家族向けプロダクトを温かく見せるために使います。

導入難度

低編集部の目安

今回借りた原則

色と部品の役割固定

公式トークンからカタログ側で安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

45 PRIMARY #e60023 #ffffff / #cc001f Brand inspired Pinterest Pinterestに着想を得たライト・エディトリアルなメディア・消費者テック向けUI。#e60023を軸に、Pin Sansと部品規則をAIへ渡せます。 メディア・消費者テック ライト / エディトリアル / 写真主役 / ミニマル Pin Sans 開く閉じる

できること

AIエージェントにPinterest風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Pinterestらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

46 PRIMARY #0070d1 #ffffff / #0064b7 Brand inspired PlayStation PlayStationに着想を得たエディトリアル・写真主役なメディア・消費者テック向けUI。#0070d1を軸に、PlayStation SSTと部品規則をAIへ渡せます。 メディア・消費者テック エディトリアル / 写真主役 / ミニマル / カラフル PlayStation SST 開く閉じる

できること

AIエージェントにPlayStation風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

PlayStationらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

47 PRIMARY #f7a501 #eeefe9 / #4d4f46 Brand inspired PostHog PostHogに着想を得たダーク・ライトなDB・DevOps向けUI。#f7a501を軸に、IBM Plex Sans Variableと部品規則をAIへ渡せます。 DB・DevOps ダーク / ライト / 写真主役 / カラフル IBM Plex Sans Variable 開く閉じる

できること

AIエージェントにPostHog風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

PostHogらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

48 PRIMARY #ffffff #07080a / #0d0d0d Brand inspired Raycast Raycastに着想を得たダーク・カラフルな開発ツール・IDE向けUI。#ffffffを軸に、Interと部品規則をAIへ渡せます。 開発ツール・IDE ダーク / カラフル Inter 開く閉じる

できること

AIエージェントにRaycast風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Raycastらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

49 PRIMARY #ffed00 #ffffff / #e6d200 Brand inspired Renault Renaultに着想を得たライト・写真主役な自動車向けUI。#ffed00を軸に、NouvelRと部品規則をAIへ渡せます。 自動車 ライト / 写真主役 / プレミアム NouvelR 開く閉じる

できること

AIエージェントにRenault風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

Renaultらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

50 PRIMARY #ea2804 #f9f7f3 / #c01f00 Brand inspired Replicate Replicateに着想を得たダーク・ライトなAI・LLM向けUI。#ea2804を軸に、rb-freigeist-neueと部品規則をAIへ渡せます。 AI・LLM ダーク / ライト / エディトリアル / 写真主役 rb-freigeist-neue 開く閉じる

できること

AIエージェントにReplicate風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Replicateらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

51 PRIMARY #fcfdff #000000 / #a1a4a5 Brand inspired Resend Resendに着想を得たダーク・ライトな業務・SaaS向けUI。#fcfdffを軸に、Domaine Displayと部品規則をAIへ渡せます。 業務・SaaS ダーク / ライト / エディトリアル / カラフル Domaine Display 開く閉じる

できること

AIエージェントにResend風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Resendらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

52 PRIMARY #494fdf #ffffff / #4f55f1 Brand inspired Revolut Revolutに着想を得たダーク・ライトな金融・暗号資産向けUI。#494fdfを軸に、Aeonik Proと部品規則をAIへ渡せます。 金融・暗号資産 ダーク / ライト / 写真主役 / カラフル Aeonik Pro 開く閉じる

できること

AIエージェントにRevolut風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Revolutらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

53 PRIMARY #ffffff #000000 / #767d88 Brand inspired Runway Runwayに着想を得たダーク・エディトリアルなAI・LLM向けUI。#ffffffを軸に、abcNormalと部品規則をAIへ渡せます。 AI・LLM ダーク / エディトリアル / 写真主役 abcNormal 開く閉じる

できること

AIエージェントにRunway風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Runwayらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

54 PRIMARY #f36458 #0b0b0b / #212121 Brand inspired Sanity Sanityに着想を得たダーク・カラフルなDB・DevOps向けUI。#f36458を軸に、waldenburgNormalと部品規則をAIへ渡せます。 DB・DevOps ダーク / カラフル / テクニカル / 親しみ waldenburgNormal 開く閉じる

できること

AIエージェントにSanity風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

Sanityらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

55 PRIMARY #150f23 #1f1633 / #ffffff Brand inspired Sentry Sentryに着想を得たダーク・テクニカルなDB・DevOps向けUI。#150f23を軸に、Sentri Displayと部品規則をAIへ渡せます。 DB・DevOps ダーク / テクニカル / 親しみ Sentri Display 開く閉じる

できること

AIエージェントにSentry風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

Sentryらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。元DESIGN.mdでの名称表記は「Sentri」です。

56 PRIMARY #000000 #ffffff / #0a0a0a Brand inspired Shopify Shopifyに着想を得たダーク・ライトなEC・小売向けUI。#000000を軸に、NeueHaasGrotesk Displayと部品規則をAIへ渡せます。 EC・小売 ダーク / ライト / 写真主役 / カラフル NeueHaasGrotesk Display 開く閉じる

できること

AIエージェントにShopify風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

良いところ

Shopifyらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

写真を証拠にし、説明を短くしたい案件に。

向いている用途

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。元DESIGN.mdでの名称表記は「Shopifi」です。

57 PRIMARY #4a154b #ffffff / #481a54 Brand inspired Slack Slackに着想を得たライト・カラフルな業務・SaaS向けUI。#4a154bを軸に、Salesforce-Avant-Gardeと部品規則をAIへ渡せます。 業務・SaaS ライト / カラフル / 親しみ Salesforce-Avant-Garde 開く閉じる

できること

AIエージェントにSlack風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Slackらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

難しい内容を、話しかけやすい入口へ変えたいとき。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。元DESIGN.mdでの名称表記は「Slacc」です。

58 PRIMARY #000000 #ffffff / #f0f0fa Brand inspired Spacex Spacexに着想を得たダーク・写真主役なメディア・消費者テック向けUI。#000000を軸に、D-DIN-Boldと部品規則をAIへ渡せます。 メディア・消費者テック ダーク / 写真主役 / ミニマル D-DIN-Bold 開く閉じる

できること

AIエージェントにSpacex風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Spacexらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

59 PRIMARY #1ed760 #121212 / #181818 Brand inspired Spotify Spotifyに着想を得たダークなメディア・消費者テック向けUI。#1ed760を軸に、SpotifyMixUIと部品規則をAIへ渡せます。 メディア・消費者テック ダーク SpotifyMixUI 開く閉じる

できること

AIエージェントにSpotify風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Spotifyらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

60 PRIMARY #00754a #f2f0eb / #edebe9 Brand inspired Starbucks Starbucksに着想を得たライト・親しみなEC・小売向けUI。#00754aを軸に、SoDo Sansと部品規則をAIへ渡せます。 EC・小売 ライト / 親しみ SoDo Sans 開く閉じる

できること

AIエージェントにStarbucks風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

良いところ

Starbucksらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

難しい内容を、話しかけやすい入口へ変えたいとき。

向いている用途

商品、予約、マーケットプレイス、消費者向けブランド体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

61 PRIMARY #533afd #ffffff / #4434d4 Brand inspired Stripe Stripeに着想を得たダーク・エディトリアルな金融・暗号資産向けUI。#533afdを軸に、sohne-varと部品規則をAIへ渡せます。 金融・暗号資産 ダーク / エディトリアル / カラフル / テクニカル sohne-var 開く閉じる

できること

AIエージェントにStripe風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Stripeらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。元DESIGN.mdでの名称表記は「Stripi」です。

62 PRIMARY #3ecf8e #ffffff / #24b47e Brand inspired Supabase Supabaseに着想を得たダーク・ミニマルなDB・DevOps向けUI。#3ecf8eを軸に、Circularと部品規則をAIへ渡せます。 DB・DevOps ダーク / ミニマル / テクニカル / 親しみ Circular 開く閉じる

できること

AIエージェントにSupabase風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

良いところ

Supabaseらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

データ基盤、バックエンド、監視、クラウド製品の複雑な情報整理に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。元DESIGN.mdでの名称表記は「Supabaze」です。

63 PRIMARY #1b1938 #ffffff / #0e0c1f Brand inspired Superhuman Superhumanに着想を得たダーク・エディトリアルな開発ツール・IDE向けUI。#1b1938を軸に、Super Sans VFと部品規則をAIへ渡せます。 開発ツール・IDE ダーク / エディトリアル / ミニマル / 親しみ Super Sans VF 開く閉じる

できること

AIエージェントにSuperhuman風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Superhumanらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。元DESIGN.mdでの名称表記は「Superhumon」です。

64 PRIMARY #3e6ae1 #ffffff / #f4f4f4 Brand inspired Tesla Teslaに着想を得た写真主役・ミニマルな自動車向けUI。#3e6ae1を軸に、Universal Sans Displayと部品規則をAIへ渡せます。 自動車 写真主役 / ミニマル / カラフル / ライト Universal Sans Display 開く閉じる

できること

AIエージェントにTesla風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

良いところ

Teslaらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

車両写真を主役にした自動車、モビリティ、高級製品のブランドサイトに向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

65 PRIMARY #3cffd0 #131313 / #5200ff Brand inspired The Verge The Vergeに着想を得たエディトリアル・写真主役なメディア・消費者テック向けUI。#3cffd0を軸に、Verge custom displayと部品規則をAIへ渡せます。 メディア・消費者テック エディトリアル / 写真主役 / ミニマル / カラフル Verge custom display 開く閉じる

できること

AIエージェントにThe Verge風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

The Vergeらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

66 PRIMARY #000000 #ffffff / #959494 Brand inspired Together-AI Together-AIに着想を得たダーク・カラフルなAI・LLM向けUI。#000000を軸に、The Futureと部品規則をAIへ渡せます。 AI・LLM ダーク / カラフル / テクニカル The Future 開く閉じる

できること

AIエージェントにTogether-AI風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Together-AIらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

67 PRIMARY #fff6df #38393f / #0d0e13 Google official Totality Festival Design System 皆既日食音楽フェス向け。宇宙の黒、コロナの金、シアンの光で劇的なイベント体験を作ります。 Google公式サンプル ダーク / 没入感 / カラフル / イベント Space Grotesk 開く閉じる

できること

DESIGN.mdをAIに読ませ、同じ見た目の画面を生成し、トークンをTailwindやDTCG JSONへ展開できます。

何のため

フェス、ライブ、ゲームなど雰囲気と世界観を強く伝えるプロモーションに使います。

良いところ

グローとグラス表現をトークン化し、派手な表現でもルールを保てる公式例です。

kuzu3の一言

配色と部品のルールを先に決め、画面のぶれを減らしたいとき。

向いている用途

フェス、ライブ、ゲームなど雰囲気と世界観を強く伝えるプロモーションに使います。

導入難度

低編集部の目安

今回借りた原則

色と部品の役割固定

公式トークンからカタログ側で安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

68 PRIMARY #000000 #ffffff / #5e5e5e Brand inspired Uber Uberに着想を得たエディトリアル・ダークなメディア・消費者テック向けUI。#000000を軸に、UberMoveと部品規則をAIへ渡せます。 メディア・消費者テック エディトリアル / ダーク UberMove 開く閉じる

できること

AIエージェントにUber風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Uberらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

69 PRIMARY #171717 #ffffff / #4d4d4d Brand inspired Vercel Vercelに着想を得たライト・カラフルな開発ツール・IDE向けUI。#171717を軸に、Geistと部品規則をAIへ渡せます。 開発ツール・IDE ライト / カラフル / テクニカル Geist 開く閉じる

できること

AIエージェントにVercel風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Vercelらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

70 PRIMARY #e60000 #ffffff / #25282b Brand inspired Vodafone Vodafoneに着想を得たエディトリアル・写真主役なメディア・消費者テック向けUI。#e60000を軸に、Vodafoneと部品規則をAIへ渡せます。 メディア・消費者テック エディトリアル / 写真主役 / ミニマル / ダーク Vodafone 開く閉じる

できること

AIエージェントにVodafone風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Vodafoneらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

71 PRIMARY #00d992 #101010 / #2fd6a1 Brand inspired Voltagent Voltagentに着想を得たダーク・テクニカルなAI・LLM向けUI。#00d992を軸に、Interと部品規則をAIへ渡せます。 AI・LLM ダーク / テクニカル Inter 開く閉じる

できること

AIエージェントにVoltagent風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

Voltagentらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

状態や根拠を、数字と構造で見せたい画面に。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

状態・日付・出典の近接

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

72 PRIMARY #f7f5f0 #2b2622 / #c9c0ad Brand inspired Warp Warpに着想を得た写真主役・ミニマルな開発ツール・IDE向けUI。#f7f5f0を軸に、Interと部品規則をAIへ渡せます。 開発ツール・IDE 写真主役 / ミニマル / テクニカル / 親しみ Inter 開く閉じる

できること

AIエージェントにWarp風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

良いところ

Warpらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

IDE、ターミナル、開発者向けSaaS、コード中心の製品サイトや管理画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

大判画像のあとに短い証拠

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

73 PRIMARY #080808 #ffffff / #222222 Brand inspired Webflow Webflowに着想を得たダーク・ライトなデザイン・創作向けUI。#080808を軸に、WF Visual Sans Variableと部品規則をAIへ渡せます。 デザイン・創作 ダーク / ライト / ミニマル WF Visual Sans Variable 開く閉じる

できること

AIエージェントにWebflow風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

良いところ

Webflowらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

デザインツール、制作プラットフォーム、ビジュアルワークスペースの表現に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

一画面一主張と余白

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

74 PRIMARY #000000 #ffffff / #1a1a1a Brand inspired Wired Wiredに着想を得たライト・エディトリアルなメディア・消費者テック向けUI。#000000を軸に、WiredDisplayと部品規則をAIへ渡せます。 メディア・消費者テック ライト / エディトリアル / ミニマル / 親しみ WiredDisplay 開く閉じる

できること

AIエージェントにWired風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

良いところ

Wiredらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

主張を一つに絞り、迷わせたくない画面に。

向いている用途

記事、写真、音楽、ゲーム、ハードウェア、通信などコンテンツ主導の体験に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

75 PRIMARY #9fe870 #ffffff / #0e0f0c Brand inspired Wise Wiseに着想を得たダーク・エディトリアルな金融・暗号資産向けUI。#9fe870を軸に、Wise Sansと部品規則をAIへ渡せます。 金融・暗号資産 ダーク / エディトリアル Wise Sans 開く閉じる

できること

AIエージェントにWise風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

良いところ

Wiseらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

長い情報へ、見出しと余白で入口をつくりたいとき。

向いている用途

決済、金融、取引サービスで信頼感と明確なCTAを作るために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

見出し・本文・注釈の強弱

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

76 PRIMARY #ffffff #0a0a0a / #fafaf7 Brand inspired xAI xAIに着想を得たダーク・カラフルなAI・LLM向けUI。#ffffffを軸に、universalSansと部品規則をAIへ渡せます。 AI・LLM ダーク / カラフル / 親しみ universalSans 開く閉じる

できること

AIエージェントにxAI風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

良いところ

xAIらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

難しい内容を、話しかけやすい入口へ変えたいとき。

向いている用途

AIモデル、生成AIサービス、研究プロダクトのランディングページや操作画面に向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

77 PRIMARY #ff4f00 #fffefb / #f8f4f0 Brand inspired Zapier Zapierに着想を得たライト・カラフルな業務・SaaS向けUI。#ff4f00を軸に、Degular Displayと部品規則をAIへ渡せます。 業務・SaaS ライト / カラフル / 親しみ Degular Display 開く閉じる

できること

AIエージェントにZapier風の配色、書体、間隔、部品、レスポンシブ規則を渡し、一貫したUIを生成できます。

何のため

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

良いところ

Zapierらしさを文章だけでなくトークンとDo/Don'tまで固定でき、ページをまたいだ見た目のぶれを減らせます。

kuzu3の一言

難しい内容を、話しかけやすい入口へ変えたいとき。

向いている用途

業務ツール、共同編集、スケジュール、プロジェクト管理の画面を一貫させるために向きます。

導入難度

中〜高 編集部の目安

今回借りた原則

色と部品の役割固定

カタログ側でトークンから安全に再構成。独自フォント・ロゴ・ブランド画像は同梱していません。

DESIGN MD カタログ

全77デザイン

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること

何のため

良いところ

kuzu3の一言

向いている用途

導入難度

今回借りた原則

できること