brutalist-industrial

brutalist-industrial

ひとつのアイデンティティ：閲覧許可が下りていない機械の、機密解除された設計図。

1. パレット（固定）

• ベース：#F2F1EC（古びた紙）。ダークベースのバリエーション：#1B1B18。
• インク：#141414（ニュートラルなほぼ黒）。
• シグナルカラー — 必ずひとつだけ：安全オレンジ #E8540B、工業用イエロー #E3B23C、またはテクニカルブルー #2B5FA8。ブリーフに合わせて選び、その後は変更しません。
• メタデータ用のセカンダリーインク：#6E6C64。
• 罫線／境界線：不透明度100％の #141414 — 全箇所に視認できる1pxの線を引きます。
• グラデーション、影、グローは使いません。奥行きは、ずらしたベタ塗りのブロックと罫線で表現します。

2. タイポグラフィ（固定）

• ディスプレイ： ウェイト700〜900のヘビーなグロテスク書体（Archivo、Archivo Black、または代替フォントとしてArial Black）、大文字、詰めた字間（−0.01em）、大きなサイズ clamp(2.6rem, 7vw, 6rem)。
• 本文： 同じファミリーのウェイト400、15〜17px、行高1.5〜1.6。
• ラベル／メタデータ： 等幅フォント（IBM Plex Mono、ui-monospace）、大文字、letter-spacing: 0.08–0.12em、10〜12px。セクション座標（"01 / 04"）、仕様番号（"GS-114"）、ステータスタグにはすべて等幅フォントを使います。
• 斜体、セリフ体、ブランド表現としての小文字は使いません（意図的なデザイン上の例外を除く）。

3. 構成（固定）

• 明確に見えるグリッドの規律： セクションの区切り、列の仕切り、テーブルの行など、全箇所に細い罫線（インク色の1px実線）を引きます。グリッドこそがデザインです。
• ヘッダーブロック： 左揃えのワードマークと、右側の等幅座標（"N-01 / REV 3"）。上下の1px罫線でマストヘッドを囲みます。
• ヒーロー： 全幅に広がる巨大なコンデンス体の大文字見出し。シグナルカラーのマーカー（▪ または ▸）付きの等幅キッカーライン、5/12カラムで右寄せした本文ブロック、最下部に等幅の小さな注記とシグナルカラーのCTAボックスを配置します。
• 構造としてのデータ： 機能／価格は、角丸カードではなく、インデックス付きのテーブルや罫線入りの台帳行で表示します。カードを使う場合は、角を直角にし、インク色の1px境界線を付け、影は使いません。選択中／注目の行にはシグナルカラーの塗り（インク色の文字を使用）を適用します。
• ボタン：長方形にし、インク色の1〜2pxの境界線と、ずらした硬い影 4px 4px 0 ink（またはシグナルカラー）を付けます。押下時はずらしをなくします。

4. コンテンツの扱い

• 絵文字は使いません。アイコンはタイポグラフィ上のマーカー（▪、▸、■、→）と、描画した四角形／十字形のグリフに限ります。
• 数字を装飾として使います。各セクションに等幅のインデックス番号を付け、メトリクスは計器パネルのような等幅の列に組みます。
• 写真：標準では使いません。内容上必要な場合に限り、全幅のハーフトーン／グレースケール画像を1pxのインク色の枠で囲みます。
• CTA：ベタ塗りのCTAをひとつ（シグナルカラーまたはインク色）と、装飾のない等幅のテキストリンクをひとつ使います。同じ重みのボタンをふたつ並べてはいけません。

5. モーション（美しさではなく機械的な動き）

• 即時、または80〜150msのスナップ — 演出ではなく機械の応答です。
• ホバー：反転（インク→ベース）し、境界線をシグナルカラーに1pxで切り替えます。浮き上がり、揺れ、視差は使いません。
• 許可される登場アニメーションはひとつだけ：セクションをクリップ／上方向に8px移動させて150msで表示します。

6. チェックリスト（次に該当する場合はページを不合格にする）

• 主要な面に2pxを超える角丸がある。
• グラデーション、グロー、ドロップシャドウ、ぼかしがある。
• シグナルカラーを複数使っている。
• 絵文字や遊び心のあるアイコン表現がある。
• ディスプレイ書体が大文字でない、またはヘビーでない。
• ラベルの位置に斜体またはセリフ体がある。
• グリッドが見えない（罫線や整列を示す要素がない）。
• 標準的な角丸カードが3つ並んでいる。