太い黒の輪郭、原色のベタ塗り、ずらしたハードシャドウ、生のHTML感。個性と主張を最優先するポートフォリオ・クリエイティブ系・スタートアップに。
向いているプロダクト: クリエイターのポートフォリオ、スタートアップのLP、アート・カルチャー系、ニュースレター
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
「隠さない、飾らない」。構造をむき出しにし、デフォルトのような見た目を意図的に選ぶ。洗練の反対を洗練として提示する。
飾らないことを、飾りにする。
#FFFDF5少し黄みの白。またはそのまま純白
#000000純黒。2〜3pxの輪郭線、影
#FFE600黄。ボタン・ハイライト
#FF4D4D赤。警告・強調
#4D7CFF青。リンク
#7CFF7C緑。成功
上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。
/* ブルータリズム（Brutalism / Neo-Brutalism）のデザイントークン — CSS辞書 /design/brutalism/ */
:root {
/* カラー */
--color-bg: #FFFDF5; /* 背景: 少し黄みの白。またはそのまま純白 */
--color-ink: #000000; /* 本文・線: 純黒。2〜3pxの輪郭線、影 */
--color-primary: #FFE600; /* メイン: 黄。ボタン・ハイライト */
--color-secondary: #FF4D4D; /* サブ1: 赤。警告・強調 */
--color-tertiary: #4D7CFF; /* サブ2: 青。リンク */
--color-quaternary: #7CFF7C; /* サブ3: 緑。成功 */
/* フォント */
--font-heading: "Archivo Black", "Dela Gothic One", Arial, sans-serif;
--font-body: Arial, Helvetica, "Noto Sans JP", sans-serif;
--font-mono: "Courier New", monospace;
/* 角丸 */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-full: 0;
/* 影 */
--shadow-sm: 4px 4px 0 #000000;
--shadow-md: 6px 6px 0 #000000;
--shadow-lg: 8px 8px 0 #000000;
/* 余白の基準・線幅 */
--space-unit: 8px;
--border-width: 3px;
/* アニメーション */
--duration-fast: 50ms;
--duration-base: 100ms;
--duration-slow: 150ms;
--easing: linear;
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
}
}このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。 プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。
3pxの純黒ボーダー・原色のベタ塗り・ぼかしゼロのハードシャドウ・極太の大文字見出しで構成すること。角丸・グラデーション・ぼかし影は禁止。非対称や回転を許可し、操作性（クリック領域とコントラスト）だけは守る。