industrial-brutalist-ui

[[design-foundation]]を基盤とする — hallmark の 6 つの規律と slop-test は共通の土台です（交渉の余地はありません）。このスキルはその上に flavour を加えるものであり、土台を置き換えるものではありません。

スキル：インダストリアル・ブルータリズム＆戦術テレメトリー UI

1. スキルのメタ情報

名前： インダストリアル・ブルータリズム＆戦術テレメトリー・インターフェース・エンジニアリング
説明： ミッドセンチュリーのスイス・タイポグラフィ・デザイン、産業製造マニュアル、レトロフューチャーな航空宇宙・軍事端末インターフェースを融合したウェブインターフェースを設計する高度な能力です。この分野では、厳格なモジュラーグリッド、極端なタイポグラフィのスケール差、完全に実用性に徹したカラーパレット、アナログ劣化（ハーフトーン、CRT の走査線、ビットマップのディザリング）のプログラムによる再現を完全に習得する必要があります。目的は、従来のコンシューマー向け UI パターンを意図的に排除し、むき出しの機能性、機械的な精度、高密度なデータを印象づけるデジタル環境を構築することです。

2. ビジュアルの類型

このデザインシステムは、明確に異なりながらも非常に相性の良い 2 つのビジュアルパラダイムを融合して機能します。プロジェクトごとに 1 つだけ選び、それを貫いてください。同じインターフェース内で 2 つのモードを切り替えたり、混ぜたりしないでください。

2.1 スイス・インダストリアル・プリント

1960 年代のコーポレート・アイデンティティ・システムや大型機械の設計図を起源としています。

• 特徴： 高コントラストのライトモード（新聞用紙のようなオフホワイトの下地）。重厚で単体として際立つサンセリフ書体を多用します。目に見える区切り線で輪郭を示す、妥協のない構造グリッド。巨大な数字や文字を画面の端まで大胆かつ非対称に配置し、ネガティブスペースを活用します。警告やアクセントカラーとしてプライマリーレッドを多用します。

2.2 戦術テレメトリー＆CRT 端末

機密軍事データベース、旧式メインフレーム、航空宇宙のヘッドアップディスプレイ（HUD）を起源としています。

• 特徴： ダークモードのみ。高密度の表形式データ表示。等幅フォントが全面を支配します。技術的なフレーミング要素（ASCII の括弧、照準線）を組み込みます。ハードウェアの制約（蛍光体の発光、走査線、低ビット深度のレンダリング）を再現します。

3. タイポグラフィの設計

タイポグラフィは構造と装飾の主要な基盤です。画像は二次的な要素です。このシステムでは、スケール、ウェイト、字間に極端な差を設けます。

3.1 マクロタイポグラフィ（構造的な見出し）

• 分類： ネオグロテスク／ヘビーサンセリフ。
• 最適なウェブフォント： Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended。
• 実装パラメーター：
  • スケール： 可変タイポグラフィを使用し、非常に大きなサイズで適用します（例：clamp(4rem, 10vw, 15rem)）。
  • トラッキング（字間）： 極端に狭くし、しばしば負の値を使用します（-0.03em から -0.06em）。字形が一体感のある建築的なブロックを形成するようにします。
  • リーディング（行の高さ）： 非常に圧縮します（0.85 から 0.95）。
  • 大文字・小文字： 構造的なインパクトを与えるため、すべて大文字にします。

3.2 マイクロタイポグラフィ（データ＆テレメトリー）

• 分類： 等幅／テクニカルサンセリフ。
• 最適なウェブフォント： JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime。
• 実装パラメーター：
  • スケール： 固定の小さなサイズにします（10px から 14px ／ 0.7rem から 0.875rem）。
  • トラッキング： 機械式タイプライターの字間や端末のマトリクスを再現するため、広めに設定します（0.05em から 0.1em）。
  • リーディング： 標準からやや詰め気味にします（1.2 から 1.4）。
  • 大文字・小文字： すべて大文字にします。すべてのメタデータ、ナビゲーション、ユニット ID、座標に使用します。

3.3 テクスチャのコントラスト（芸術的な崩し）

• 分類： ハイコントラストなセリフ体。
• 最適なウェブフォント： Playfair Display、EB Garamond、Times New Roman。
• 実装パラメーター： 使用は極めて控えめにします。後処理（ハーフトーンフィルター、1 ビットディザリング）を強く適用し、ベクターの完璧さを損なうことで、クリーンなサンセリフとのテクスチャの対比を生み出します。

4. カラーシステム

カラー設計に妥協はありません。グラデーション、柔らかなドロップシャドウ、現代的な半透明表現は厳禁です。色は、物理メディアや原始的な発光ディスプレイを模倣します。

重要：プロジェクトごとに基調パレットを1つ選び、一貫して使用してください。同じインターフェース内で明るい基調と暗い基調を混在させてはいけません。

スイス工業印刷（ライト）を選ぶ場合：

• 背景： #F4F4F0 または #EAE8E3（マットな未漂白のドキュメント用紙）。
• 前景： #050505 から #111111（カーボンインク）。
• アクセント： #E61919 または #FF2A2A（航空・危険標識の赤）。使用できるアクセントカラーはこれだけです。取り消し線、太い構造的な区切り線、重要なデータの強調に使用します。

戦術テレメトリー（ダーク）を選ぶ場合：

• 背景： #0A0A0A または #121212（電源オフのCRT。純粋な #000000 は避けてください）。
• 前景： #EAEAEA（白色蛍光体）。主要なテキストカラーです。
• アクセント： #E61919 または #FF2A2A（航空・危険標識の赤）。同じ赤を同じルールで使用します。
• ターミナルグリーン（#4AF626）： 任意です。特定のUI要素1つ（例：ステータスインジケーター1つ、データ表示1つ）にのみ使用し、一般的なテキストカラーとしては使用しないでください。明確な目的がなければ、完全に省略してください。

5. レイアウトと空間設計

レイアウトは数学的に設計されたように見える必要があります。従来のウェブ向けパディングを退け、視覚的に区画化します。

• ブループリントグリッド： CSS Gridの構造を厳格に遵守します。要素を浮かせず、グリッドのトラックと交点に正確に配置します。
• 視覚的な区画化： 実線の境界線（1px または 2px solid）を幅広く用いて、情報の領域を明確に区切ります。水平線（<hr>）は、運用単位を分離するためにコンテナーの全幅にわたって引くことがよくあります。
• 二峰性の密度： レイアウトは、データが極めて高密度な状態（等幅フォントのメタデータを密集させる）と、マクロタイポグラフィを囲む、計算された広大な余白との間を行き来します。
• 形状： border-radius は一切使用しません。機械的な剛性を保つため、すべての角を正確に90度にします。

6. UIコンポーネントと記号表現

標準的なウェブUIの慣習に代えて、実用性を重視した工業的なグラフィック要素を使用します。

• 構文の装飾： ASCII文字を使ってデータポイントを囲みます。
  • 囲み： [ DELIVERY SYSTEMS ]、< RE-IND >
  • 方向： >>>、///、\\\\
• 工業用マーカー： 登録商標（®）、著作権（©）、商標（™）の記号を、法的なテキストではなく、構造的な幾何学要素として目立つように取り入れます。
• 技術的な素材： グリッドの交点に照準線（+）、反復する縦線（バーコード）、太い水平警告ストライプ、機械が稼働している様子を模倣するランダムな文字列データ（例：REV 2.6、UNIT / D-01）を取り入れます。

7. テクスチャと後処理エフェクト

デザインが純粋なデジタル表現に見えないよう、CSSとSVGフィルターを使って、アナログの劣化をフロントエンドに再現します。

• ハーフトーンと1ビットディザリング： 階調のある画像や大きなセリフ体の文字をドットマトリクスパターンに変換します。前処理を行うか、CSSの mix-blend-mode: multiply オーバーレイとSVGの放射状ドットパターンを組み合わせて実現します。
• CRT走査線： ターミナルインターフェースでは、背景に repeating-linear-gradient を適用し、電子ビームが水平方向に走査する様子を再現します（例：repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)）。
• 機械ノイズ： DOMルートに不透明度の低いSVG静電ノイズフィルターを全体に適用し、ダークモードとライトモードの両方に統一感のある物理的な粒状感を加えます。

8. Web エンジニアリングの指針

1. グリッドの決定性: display: grid; gap: 1px; を使用し、親要素と子要素の背景色にコントラストをつけます。複雑なボーダー指定を使わずに、数学的に正確で極細の区切り線を生成できます。
2. セマンティクスの厳密性: 正確なセマンティックタグ（<data>、<samp>、<kbd>、<output>、<dl>）を使用して DOM を構築し、テレメトリの技術的な性質を正確に反映します。
3. タイポグラフィのクランプ: CSS の clamp() 関数はマクロタイポグラフィにのみ使用します。これにより、大きなテキストを大胆に拡大しつつ、ビューポート全体で構造を維持できます。

---

出力レポート

すべての主要なスキルタスクが完了したら、Wiki に提案ドラフトを作成します。

手順

1. ファイル名を作成します:

• 形式: DDMMYY-<ten>.md
• DDMMYY = 今日の日付（例: 2026 年 6 月 2 日の場合は 020626）
• <ten> = 実施内容を要約する 2〜4 語のケバブケース表記（例: landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md に書き込みます:

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. Wiki のインデックスとログを更新します:

• llmwiki/wiki/index.md — 次の 1 行を末尾に追加します: | [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 次の行を末尾に追加します: ## YYYY-MM-DD — <skill-name> — <ten>

スキルによってアーティファクトも決定事項も何も生じない場合（例: /caveman-stats のような純粋な表示モード）のみ、スキップします。