要素を削ぎ落とし、余白とタイポグラフィで語るデザイン。情報の優先順位が明確で、ツールやポートフォリオ、ドキュメント系に向きます。
向いているプロダクト: ポートフォリオ、ドキュメント・ブログ、開発者向けツール、ノートアプリ
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「引き算の美学」。装飾を排し、余白・文字・1色のアクセントだけで階層と操作性を成立させる。ユーザーの注意を内容そのものに向ける。
何も足さない、というデザイン。
#FFFFFFページ背景。純白で紙のように
#F7F7F7カード・入力欄の背景。差は最小限
#171717見出し・本文テキスト
#737373キャプション・プレースホルダー
#E5E5E5罫線。1pxの細線
#171717プライマリボタン。色ではなく黒で強調
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* ミニマル（Minimal）のデザイントークン — CSS辞書 /design/minimal/ */
:root {
/* カラー */
--color-bg: #FFFFFF; /* 背景: ページ背景。純白で紙のように */
--color-surface: #F7F7F7; /* サーフェス: カード・入力欄の背景。差は最小限 */
--color-text: #171717; /* 本文: 見出し・本文テキスト */
--color-muted: #737373; /* 補足: キャプション・プレースホルダー */
--color-border: #E5E5E5; /* ボーダー: 罫線。1pxの細線 */
--color-accent: #171717; /* アクセント: プライマリボタン。色ではなく黒で強調 */
/* フォント */
--font-heading: "Inter", "Noto Sans JP", sans-serif;
--font-body: "Inter", "Noto Sans JP", sans-serif;
/* 角丸 */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-full: 9999px;
/* 影 */
--shadow-sm: none;
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.04);
--shadow-lg: 0 4px 12px rgb(0 0 0 / 0.06);
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 1px;
/* アニメーション */
--duration-fast: 100ms;
--duration-base: 150ms;
--duration-slow: 200ms;
--easing: ease-out;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
装飾を一切足さず、余白・文字サイズ・ウェイト・1pxの罫線だけで階層を作ること。色はモノトーン+黒のプライマリのみ。