SaaSやWebアプリの標準形。白基調に1つのブランドカラー、8pxグリッド、控えめな影で整った信頼感を出します。迷ったらこれ。
向いているプロダクト: SaaS、管理画面、B2Bサービス、Webアプリ全般
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「整っていて、速そうで、信頼できる」。ブランドカラー1色を機能的に使い、明快な階層と一貫したコンポーネントで、初見でも操作が分かるUIを作る。
信頼できる道具の顔。
#F8FAFCページ背景。わずかに青みのグレー
#FFFFFFカード・モーダル
#0F172A見出し・本文
#64748Bキャプション・ラベル
#E2E8F0罫線・入力欄の枠
#2563EBボタン・リンク・選択状態（ブランドカラーに置換）
#16A34A完了・有効
#DC2626バリデーション・破壊的操作
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* モダン・クリーン（Modern / Clean）のデザイントークン — CSS辞書 /design/modern-clean/ */
:root {
/* カラー */
--color-bg: #F8FAFC; /* 背景: ページ背景。わずかに青みのグレー */
--color-surface: #FFFFFF; /* サーフェス: カード・モーダル */
--color-text: #0F172A; /* 本文: 見出し・本文 */
--color-muted: #64748B; /* 補足: キャプション・ラベル */
--color-border: #E2E8F0; /* ボーダー: 罫線・入力欄の枠 */
--color-primary: #2563EB; /* プライマリ: ボタン・リンク・選択状態（ブランドカラーに置換） */
--color-success: #16A34A; /* 成功: 完了・有効 */
--color-danger: #DC2626; /* エラー: バリデーション・破壊的操作 */
/* フォント */
--font-heading: "Inter", "Noto Sans JP", sans-serif;
--font-body: "Inter", "Noto Sans JP", sans-serif;
/* 角丸 */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* 影 */
--shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08);
--shadow-lg: 0 20px 25px -5px rgb(15 23 42 / 0.1);
/* 余白の基準・線幅 */
--space-unit: 4px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--easing: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
ブランドカラー1色を機能的に（アクション・選択・リンク）だけ使い、色・余白・角丸・影をトークン化して全コンポーネントで統一すること。