neo-brutalism-ui

Neo-Brutalism UI

インターフェースは、その構造を率直に示し、それを大きく主張することで信頼を得る。すべての境界線と影は、表明された事実だからだ。

フラットで派手な色のフィールドに、太い黒い境界線と、ぼかしのないハードなオフセットシャドウ。これは、GumroadのようなプロダクトサイトやFigmaコミュニティキットから、企業的なソフトネスへの意図的な反応として生まれた。

時代: 2020年～現在 · 区分: コンテンポラリー＆空間 · ドメイン: グラフィック＆UIデザイン · 別名: ニューブルータリズム、ネオブルータリズム、ブルータリストWeb UI

このスキルをロードするタイミング

ユーザーが次のように要求した場合にロードする: 「ネオブルータリズム」「neubrutalism」「ネオブルータリスト」「brutalist ui」「厚い黒枠」「ハードシャドウ」「オフセットシャドウ」「gumroadスタイル」「派手なフラットカラー」「ステッカースタイル」。

適している分野: クリエイターエコノミー製品、個人開発SaaSのランディングページ、開発者ツールサイト、ポートフォリオ、イベント・フェスティバルサイト。

次の場合は使用しない:

• ブランドが静かなラグジュアリー、医療ケア、銀行のセキュリティを伝えなければならない場合。
• インターフェースが高密度なエンタープライズツールであり、3pxの境界線や4pxのシャドウがあらゆる行でスペースを消費する場合。
• ユーザーがOSの設定画面のようなネイティブプラットフォームの外観を期待している場合。

システムディレクティブ

Neo-Brutalism UIでUIやグラフィックレイアウトを生成するときは、以下を必ず守ること:

1. すべてのカード、ボタン、入力フィールド、画像の周囲に、2pxから4pxの実線の#000000境界線を描くこと。
2. 持ち上がったすべての要素に、ぼかしゼロ、オフセット4px 4pxのハードシャドウ（例: 4px 4px 0 0 #000000）を1つだけ付与すること。
3. 表面は、不透明度100%のフラットな飽和色で塗りつぶし、1ページに2～4色の派手な色相を使用すること。
4. ホバー時は、要素をシャドウのオフセット分だけ移動させ、シャドウを0にして、ページに押し込まれるように見せること。
5. 角丸は0pxから8pxのみとし、1ページ内のすべての要素で同じ値を使用すること。
6. 見出しは、極太のグロテスク体またはモノスペース体で、ウェイト700以上、サイズ48pxから96pxで設定すること。
7. テキストは色フィールド上で黒とし、すべての塗りで少なくとも7:1のコントラストを達成すること。

ガードレール

以下の各行はスタイルを破るものです。出力を返す前に、リストと照らし合わせてチェックすること。

• 絶対にしない: ぼかし半径が0pxを超えるぼかしドロップシャドウ。
• 絶対にしない: 微妙なグレーのグラデーションや表面の光沢感。
• 絶対にしない: パステルカラーや低彩度の塗りつぶしにグレーのテキスト。
• 絶対にしない: 1pxの極細境界線や、黒以外の色の境界線。
• 絶対にしない: 1ページ内での混在した角丸（例: カードが4px、ボタンが24px）。
• 絶対にしない: 半透明または backdrop-blur が適用されたパネル。
• 絶対にしない: 見出しに500未満の細いフォントウェイト。

ベクタープロファイル

軸	スコア	1の意味	5の意味
装飾性	■■■□□ 3/5	純粋なミニマル	最大主義
奥行き感	■■□□□ 2/5	厳密に2D	フル3D / 空間的
グリッドの堅牢性	■■■□□ 3/5	混沌/有機的	厳密な数学的グリッド
スキューモーフィックリアリズム	■□□□□ 1/5	抽象的なデジタル	フォトリアリスティックな素材
タイポグラフィの表現力	■■■■□ 4/5	ニュートラル/目立たない	実験的/説明的

これらのスコアを維持すること。リクエストによってある軸が2ポイント以上変化した場合、そのスタイルから外れていることになる。「系統フォールバック」を参照すること。

空間＆グリッドロジック

• グリッドメカニクス: 24pxから32pxのガターを持つ12カラムグリッド。カードは2、3、4カラムのブロックに配置され、オフセットシャドウは視覚的な幅を4pxから8px追加する。
• 余白比率: 表面の25～40%はオープン。間隔スケールは8、16、24、32、48、64px。カードのパディングは24px。
• 配置ルール: テキストは左揃え。ブロックはグリッドの端に配置され、ステッカーとバッジに限り1～2度の傾きを許容。セクションは全幅の3px黒線で区切られる。
• コンテナ形状: 角丸0px～8pxの長方形。3pxの黒い境界線と4px 4px 0 0 #000000のシャドウ。ピル型はタグに限り999pxの角丸を使用。

タイポグラフィ

• 分類: グロテスクサンセリフ · モノスペース · スラブセリフ
• トラッキング: ディスプレイサイズは-0.03em。本文は0。大文字ラベルは+0.05em。
• 行送り: ディスプレイは1.0～1.1。本文は1.5。ラベルは1.2。
• 階層ルール:
  • 見出しにはウェイト700または800を使用し、本文は400または500を使用。細いウェイトはスキップする。
  • 見出しは48px～96px、本文は16px～18pxで設定し、比率は約3:1以上とする。
  • ボタンとラベルは14pxの太字大文字で、トラッキング+0.05emに設定する。
  • 見出しのキーワードを、3pxの黒い境界線を持つカラーハイライトブロックに配置する。

フォントペアリング

ディスプレイ	本文	備考
Space Grotesk	DM Sans	プレーンなテキストフェース上の奇妙なグロテスク体見出し。
Archivo Black	Work Sans	大きな見出しのためのヘビーなポスターウェイトディスプレイ。
Bricolage Grotesque	Inter	凝縮された高コントラストのディスプレイとニュートラルな本文。
Space Mono	Space Grotesk	生の技術的な印象を与えるモノスペースラベル。

カラー＆ライティング

• パレット構造: 黒い輪郭線、暖かみのあるオフホワイトまたはイエローのページ、そしてピンク、ブルー、グリーンなどの2～4色の派手なフラットな色相。それぞれ不透明度100%で、大きなブロックで使用する。
• コントラストルール: すべての派手な塗りつぶし上の黒いテキストは少なくとも7:1を達成する（例: レモン上で15:1、エレクトリックブルー上で7:1）。白いテキストは黒い塗りつぶし上でのみ許可。3pxの黒い境界線により、各コントロールは21:1のエッジを得る。
• 表面処理: 不透明度100%のフラットな不透明フィールド。グラデーション、テクスチャ、透明度はなし。ページ背景に8%黒のドットまたはグリッドパターンをオプションで使用可能。
• 光と影: 光源はシミュレートしない。4px 4px 0 0 #000000のハードオフセットシャドウが右下に落ち、ぼかしはゼロ。輪郭線の延長として機能する。

パレット

名前	Hex	役割
Ink	#000000	境界線、シャドウ、テキスト
Cream	#FFF8E7	ページ背景
Lemon	#FFE14D	ハイライトおよびプライマリ塗りつぶし
Hot Pink	#FF5DA2	アクセント塗りつぶし
Electric Blue	#4D7CFF	セカンダリアクセント
Mint	#6EE7B7	成功およびタグの塗りつぶし
White	#FFFFFF	カード表面

マテリアリティ＆テクスチャ

• 表面シミュレーション: なし。表面は黒い輪郭線とハードなドロップを持つフラットなカットペーパーまたはステッカーストックであり、実際の素材を模倣しない。
• 境界線ルール: 小さいコントロールには2px、カードには3px、ヒーローブロックには4pxの実線の#000000境界線。境界線の色は状態間で変更しない。
• ぼかしと高低差: ぼかしはすべての場所で0px。高低差はシャドウオフセットで表現: タグは2px 2px、カードとボタンは4px 4px、モーダルは8px 8px。すべて#000000。

装飾＆アイコン

• アイコン: 2.5pxから3pxのストロークとスクエアまたはラウンドキャップを持つ24pxの太字アイコン。黒色で、多くの場合2pxの境界線を持つ色付きの円の中に配置される。
• イラスト: 太い黒い輪郭線を持つ派手なパレットのフラットイラスト。ステッカー、星、矢印も歓迎。手描きのマークも可。
• 装飾要素: ステッカーとバッジ · マーキーテキストバンド · スターバースト · ドットグリッド背景 · 矢印と下線の落書き

モーション＆インタラクティビティ

• 画面上で生まれたもの: はい
• 遷移動画: 要素はホバー時および押下時に、シャドウオフセットと正確に同じ量だけ平行移動し、シャドウが崩れるように見える。動きは短く、直線的で、オーバーシュートはない。
• イージング: cubic-bezier(0.2, 0, 0, 1)
• 持続時間 (ms): 120
• ホバーとアクティブ: ホバーでは要素を4px右、4px下に移動させ、シャドウを0 0 0 0に設定。アクティブではその位置を維持。フォーカス時は2pxオフセットした3pxの実線#4D7CFFのアウトラインを追加。

コード＆トークンプライマー

ルート要素にdata-style="neo-brutalism-ui"を設定し、トークンを貼り付けてください。ファイルtokens.cssには同じトークンと一連のリファレンスルールが含まれています。

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Tailwindパターン:

要素	クラス
ページ	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
カード	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
ボタン	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
入力	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
見出し	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
タグ	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

ビジュアルパック

このスタイルの画像とアイコンはファイルです。そのまま使用するか、仕様として読み取り、同じ言語で独自のものを作成してください。

ファイル	内容
pack/hero.svg	ヒーロープレート、800×600。スタイルのビジュアル言語による抽象的な絵。
pack/pattern.svg	パターンタイル、80×80。両方向に繰り返します。
pack/icons.svg	アイコンスプライト: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders

• アイコン: アウトライン、24pxフィールド上のストローク2.5、スクエアキャップ、マイタージョイン、コンテナ: 正方形。使用法: <svg class="icon"><use href="pack/icons.svg#home"/></svg>。アイコンはcurrentColorを継承します。
• アイコンファミリー: スプライトはPhosphor IconsのPhosphor (Bold)から切り取られています。ライセンスはMIT。理由: 太い境界線にマッチする鈍いウェイトを持つヘビーな線です。デモ用のオープンソース代替品です。製品の場合は、ブランドのアイコンライブラリを使用し、以下のルールに従ってファミリーを選択してください。
• ディスプレイタイプ: ウェイト700、トラッキング-0.03em、行送り0.95、ケース: なし。
• ウェイト: ディスプレイ700、サブヘッド700、本文500、テキスト内の太字700、ラベルとボタン700。このスタイルは2つのウェイト（500、700）のみを使用し、他は使用しません。ディスプレイは本文より200ヘビーです。アクセントはウェイト: より重い単語がアクセントとなり、ウェイト間の段差が明確になります。
• 本文タイプ: 17px、行送り1.5。
• ページ: ヒーロー分割、左揃え、コンパクト密度、アクセント傾き-1°。
• テキストカラー: --color-textはメインの読み取りフィールドのみに使用します。各フィールドでは、そのトークン（--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent）を使用します。

アイコンパックの選び方

アイコンパックは画像のための書体です。テキストフェースと同じ注意を払って選択してください。これらのルールはオープンソースセットにもライセンスされたライブラリにも適用されます。

1. ストロークがステムに一致すること。 アイコンをテキストサイズの本文テキストの隣に配置します。アイコンの線と文字のステムが同じウェイトであること。
2. 終端とコーナーが角丸トークンに従うこと。 バットキャップとマイタージョインは半径ゼロに。ラウンドキャップとラウンドジョインはソフトな半径にします。
3. 塗りモードがその時代のテクノロジーに従うこと。 印刷時代はソリッドフォームを切り出します。奥行きを持つスクリーン時代はフォームを塗りつぶし、シェーディングします。現在の製品インターフェースはアウトラインを描きます。
4. メタファーはスタイルよりも新しいものでないこと。 各画像はその時代が知っていたオブジェクトであること。後の時代のメタファーを持つアイコンは時代を壊します。
5. 1ファミリー、1グリッド。 すべてのアイコンは1つのファミリーと1つのバリアントから、1つのフィールドに描かれていること。1つの表面に異なるファミリーを混在させないでください。
6. ファミリーが製品をカバーすること。 コミットする前に、製品に必要な各コンセプトをリストアップしてください。そのうちの1つに対するアイコンがないファミリーは、間違ったファミリーです。
7. 色はトークンであること。 アイコンはcurrentColorを継承します。2番目の色調はファイルではなくトークンから取得します。
8. ライセンスが使用を許可していること。 セットのライセンスをお読みください。ライセンスが要求する場合はクレジットを明記してください。ブランドを持つ製品は、ライセンスされたライブラリを使用し、ファミリーを選択するために同じルールを適用します。

系統フォールバック

ユーザーがバリエーションを要求した場合、即興で作らないでください。ここに記載された隣のスタイルに向かってブレンドし、そのスキルをロードしてください。

• ユーザーが より落ち着いた ものを要求した場合: flat-design（フラットデザイン）へ。境界線を1pxに減らし、オフセットシャドウを削除し、塗りつぶしの彩度を60%に下げる。フラットフィールドとグリッドは維持する。

• ユーザーが より整然とした ものを要求した場合: swiss-international（スイスインターナショナルスタイル）へ。パレットを黒、白、1つの赤に絞り、半径0px、12カラムグリッド上の左揃えテキストを設定する。2pxの罫線は維持する。

• ユーザーが よりアプリらしい ものを要求した場合: bento-grid-ui（ベントーグリッドUI）へ。コンテンツを16pxのギャップを持つ異なるサイズのセルの長方形グリッドに詰め込む。3pxの境界線とハードシャドウは維持する。

• ユーザーが より洗練された ものを要求した場合: material-design（マテリアルデザイン）へ。8pxの角丸、1pxの境界線、0 2px 4px rgba(0, 0, 0, 0.2)のソフトシャドウに移行する。1つの派手なアクセントは維持する。

• 由来元（より正統的なバージョンが必要な場合はこちらへ）: flat-design

• 拒否するスタイル（反対の極。ブレンドしないこと）: corporate-memphis