ネオン・ブルータル Neon Brutal

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/neon-brutal/DESIGN.md

# DESIGN.md — ネオン・ブルータル / neon-brutal

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

「整える」ことを疑う。太い罫、等幅、剥き出しの構造、蛍光1色。装飾で滑らかにせず、
情報そのものを塊として積む。ただし乱雑ではなく、**意図して崩したグリッド**と
高コントラストで、生（raw）の緊張と勢いを設計する。AIが必ず避ける荒さを、正面から使う。

**キーワード**: 生 / 等幅 / 高コントラスト / 蛍光 / 剥き出し
**この見た目が向く場面**: 音楽・イベント・フェス・カルチャー・クリエイティブスタジオ・実験的プロダクト

## 2. タイポグラフィ

- 欧文・数字・ラベル: Space Mono（等幅。ラベルは大文字＋角括弧 例 [LINE-UP]。
  数字・日付・時刻を主役級に大きく組む。**Inter に置換しない**）
- 和文（見出し・本文とも）: BIZ UDGothic（全角の等幅感がグリッドに乗る。硬く無骨）
- 本文: 14px / 行間 1.7 / 字間 0（詰める。ゆったりさせない）
- 見出しスケール: 特大 96〜160px（画面をはみ出す勢いで）/ h2 28px / ラベル 12px
  （モバイルは特大 56px / h2 22px）
- 特記: 見出しは太さ 700 で詰めて組む（字間 -0.02em）。強弱は「大きさ」と「反転」で作る。
  英字ラベルは 12px・大文字・字間 +0.1em・角括弧つき。キャッチは命令形・体言止めで短く

## 3. カラー

黒 × コンクリート白の高コントラスト＋**蛍光ライム1色**（high-contrast）。
中間色に逃げない。グラデーションを使わない（フラットの塗り分けのみ）。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（コンクリート白） | #e7e4d8 | 55% |
| 地/反転ブロック（温かい黒） | #14130d | 30% |
| テキスト・太罫（黒） | #14130d | — |
| テキスト（弱・グレー） | #6a685c | — |
| アクセント（蛍光ライム） | #ccff00 | 10%前後 |

- 配色ルール: 蛍光ライムは「面のブロック塗り」「ハイライト（黒地に蛍光文字）」
  「太い下線/マーカー」に使う。**グラデにしない・複数の蛍光色を足さない**
  （多色ネオンはAIの手癖。蛍光は1色だけ）。信号色（赤緑黄の併用）を作らない
- 反転は積極的に使う（黒地＋コンクリート白 or 蛍光文字）。純白 #ffffff・純黒 #000000 は
  使わない（黒は #14130d、白は #e7e4d8）。青・紫を一切足さない

## 4. レイアウト・余白

- コンテンツ最大幅: 1280px / **broken-grid**（整然としたグリッドを意図的に崩す。
  要素を数 px 重ねる・ずらす・少しだけ回転させる〈±1.5deg 程度〉）
- 情報密度: dense（余白で逃げない。罫線で仕切って詰める。1画面に要素を多く積む）
- グリッドの性格: **太い罫線（2px 黒）で領域を仕切り、罫を見せる。** セルの境界は
  border で明示。表・タイムテーブルはブルータリズムの得意技として罫で組む
- 各節の頭に「角括弧ラベル＋節番号（Space Mono、例 [01 / ABOUT]）」を太罫の上に置く
- ヒーローの構成: 中央寄せの整った定型にしない。**特大の見出しを画面端まで（時にはみ出して）
  置き**、日付・会場・インデックスを別ブロックで非対称に積む。要素を少し重ねる。
  「中央寄せ見出し＋サブコピー＋ボタン2つ＋背景グラデ」を作らない

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 太罫で囲った地色バー。ナビは大文字ラベル。
  ホバーで**色が反転**（黒地に蛍光 or 黒地にコンクリート白）。下線は使わずブロック反転で示す
- 角丸: 0px（全要素直角）/ 影: 使わない（box-shadow なし。立体を作らない。平面と罫で構成）/
  境界線: **2px solid #14130d（太い黒罫を主役の一つとして使う）**
- ボタン: 直角・太罫・大文字ラベル。主ボタンは**蛍光ライム地＋黒文字**、
  ホバーで黒地＋蛍光文字に反転（0.1s、動きは瞬時）。副ボタンは太罫・地色
- カード的要素: 影や角丸で作らない。**太罫で囲ったブロック**を敷き詰める。
  「アイコン＋見出し＋説明の3カラム角丸カード」を作らない（罫で囲ったセルにする）
- 表・タイムテーブル: 2px 罫の格子。等幅数字で時刻を揃える。ヘッダ行は黒地反転
- リンク: 黒文字＋ホバーで蛍光マーカー（背景が蛍光に）。角括弧や → を添えてよい
- フォーム要素: 太罫・角丸0・地色背景。フォーカスで罫が蛍光に。ラベルは大文字ラベル
- 画像の扱い: 使う場合は角丸なし・太罫で囲う・グレースケール or 高コントラスト2値化。
  装飾フィルタでなく「粗さ」を活かす
- アクセント（蛍光）の適用範囲: ブロック塗り・反転ハイライト・マーカー・主ボタンに限定

## 6. モーション

- 量: subtle（動きで飾らない。ブルータリズムは静的な強さ。ホバーの反転が主役）
- 使う動き: ホバー時の色反転（0.1s、瞬時に近い）/ 主ボタンの反転。以上
- 使わない動き: **マーキー（電光掲示板風の横流れ）を使わない**（ブルータリズムの誘惑だが、
  AI量産の手癖でもあるので避ける）。スクロール連動フェード・パララックス・数字カウントアップ・
  自動カルーセル・バウンスも使わない。動きは「反転」だけに絞る
- prefers-reduced-motion 時もホバー反転は色変化のみで可（動きを伴わない）

## 7. 写真・イラスト・図版

- 写真がなくても成立させる（等幅・太罫・蛍光ブロック・大きな数字が主役）。
  図が要るなら罫線と等幅文字による ASCII/罫線図（会場マップ等）で描く
- 絵文字・既製アイコンセット・グラデ抽象ブロブを使わない。記号は約物（→ / ■ / ※ / ×）や
  角括弧ラベルで代替する

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / Noto Sans を使わない（Space Mono / BIZ UDGothic で組む）
- グラデーションを一切使わない（背景・文字・ブロックすべてフラット塗り）。box-shadow を使わない
- border-radius を使わない（常に 0）。「3カラムの角丸カード＋影」を作らない
- **蛍光色を複数使わない**（ネオン多色はAIの手癖。蛍光は #ccff00 の1色だけ）。青・紫を足さない。
  信号色（赤緑黄の併用）を作らない
- 純白 #ffffff・純黒 #000000 を使わない（黒は #14130d、白は #e7e4d8）
- マーキー（横スクロールの電光掲示板）・スクロール連動アニメ・数字カウントアップを使わない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋背景グラデ）を作らない
- 絵文字・既製アイコンセットをアイコンに使わない
- 「整えて滑らかにする」方向の装飾（余白での上品化・柔らかい影・淡いパステル）を足さない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #e7e4d8;       /* コンクリート白（純白は使わない） */
  --color-bg-dark: #14130d;  /* 反転ブロック用の温かい黒（純黒は使わない） */
  --color-ink: #14130d;      /* 文字・太罫 */
  --color-text: #14130d;
  --color-muted: #6a685c;    /* 副次テキスト */
  --color-acid: #ccff00;     /* 蛍光ライム。フラット・1色のみ */
  --color-line: #14130d;     /* 罫線は黒。太く使う */
  /* 変数には総称ファミリ(monospace/sans-serif)を含めないこと */
  --font-latin: "Space Mono";
  --font-heading: "BIZ UDGothic";
  --font-body: "BIZ UDGothic";
  --border: 2px;             /* 太罫の基本太さ */
  --radius: 0;
  --max-width: 1280px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), monospace` の順に指定する
  （英数字が自動で Space Mono になる）
- 太罫は `border: var(--border) solid var(--color-line);`。ブロックを罫で敷き詰める
- broken-grid は `transform: rotate(-1.5deg)` や負の margin での数 px の重なりで作る。
  やり過ぎず「わざと少し崩れている」程度に留める