nothing-design

Nothing-Inspired UI/UX Design System

スイス・タイポグラフィ、工業デザイン（Braun、Teenage Engineering）、現代的なインターフェース制作の訓練を受けた、シニアプロダクトデザイナー向けのツールキットです。モノクロームで、タイポグラフィを重視し、煩雑さなく情報を高密度に配置します。ダークモードとライトモードのどちらにも等しく配慮します。

デザイン作業を始める前に、必要な Google Fonts と読み込み方法を宣言してください（references/tokens.md Section 1 を参照）。フォントがすでに利用可能だと決めつけないでください。

---

1. DESIGN PHILOSOPHY

• 足すのではなく、削る。 すべての要素は、使うピクセルに見合う価値を示す必要があります。まず削除を検討してください。
• 構造そのものが装飾です。 グリッド、データ、階層そのものを見せてください。
• モノクロームはキャンバスです。 色はデータの状態を示す場合（Section 3 を参照）を除き、常用せず、特別な要素として扱います。
• タイポグラフィが主役です。 階層は、色やアイコンや罫線ではなく、サイズ、ウェイト、間隔で作ります。
• どちらのモードも第一級です。 ダークモードは OLED ブラック、ライトモードは温かみのあるオフホワイトです。どちらかを「派生」とせず、双方に十分なデザイン上の配慮をします。どちらのモードから始めるか、ユーザーに尋ねてください。
• 工業的な温かみ。 技術的で精密でありながら、決して冷たくしません。人の手触りを感じられるようにします。

---

2. CRAFT RULES — HOW TO COMPOSE

2.1 Visual Hierarchy: The Three-Layer Rule

すべての画面には、重要度が正確に3つのレイヤーあります。2つでも5つでもなく、3つです。

Layer	What	How
Primary	ユーザーが最初に目にする唯一のもの。数値、見出し、状態など。	表示サイズの Doto または Space Grotesk。--text-display。上下左右に 48–96px の余白を取ります。
Secondary	補足情報。ラベル、説明、関連データなど。	本文または小見出しサイズの Space Grotesk。--text-primary。Primary の近くにまとめます（8–16px）。
Tertiary	メタデータ、ナビゲーション、システム情報。目には入りますが、主役にはしません。	キャプションまたはラベルサイズの Space Mono。--text-secondary または --text-disabled。すべて大文字にします。画面の端または下部に配置します。

確認方法： 画面を細めて見ます。何が最も重要か、まだ判別できますか？ 2つの要素が競合しているなら、どちらかを小さくする、薄くする、または移動してください。

よくある間違い： すべてを「Secondary」にしてしまうことです。すべて同じサイズで、間隔も均等だと、視覚的に平坦になります。Primary は思い切って大きく、Tertiary は思い切って小さくしてください。そのコントラストが階層を生みます。

2.2 Font Discipline

画面ごとに、使用するフォントは最大で次のとおりです。

• フォントファミリーは2種類（Space Grotesk + Space Mono。Doto はヒーロー要素に限って使用します。）
• フォントサイズは3種類（大、中、小を1つずつ）
• フォントウェイトは2種類（Regular + もう1つ。通常は Light または Medium、Bold はまれに使用）

予算のように考えてください。サイズやウェイトを追加するたびに、視覚的な一貫性が損なわれます。新しいサイズを加える前に、間隔や色で違いを作れないか考えてください。

Decision	Size	Weight	Color
見出しと本文	Yes	No	No
ラベルと値	No	No	Yes
アクティブと非アクティブのナビゲーション	No	No	Yes
ヒーローの数値と単位	Yes	No	No
セクションタイトルとコンテンツ	Yes	Optional	No

目安： 新しいフォントサイズを使いたくなったら、たいていは間隔の問題です。代わりに距離を広げてください。

2.3 Spacing as Meaning

間隔は、要素間の関係を伝えるための主要な手段です。

Tight (4–8px)   = "These belong together" (icon + label, number + unit)
Medium (16px)    = "Same group, different items" (list items, form fields)
Wide (32–48px)   = "New group starts here" (section breaks)
Vast (64–96px)   = "This is a new context" (hero to content, major divisions)

区切り線が必要なら、間隔の設定が間違っている可能性があります。 区切り線は、間隔のコントラストが不十分であることの表れです。要素が構造上同一である、データ密度の高いリストでのみ使用してください。

2.4 Container Strategy (prefer top)

1. 間隔のみ（近接によって要素をグループ化）
2. 区切り線を1本
3. 控えめな枠線
4. 背景色を変えたサーフェスカード

下に進むほど、視覚的な重みが増します。機能する最も軽い手段を使ってください。最も重要な要素を枠で囲まず、背景の上に浮かぶように配置してください。

2.5 色による階層

モノクロのシステムでは、グレースケールがそのまま階層になります。画面あたり最大4段階です。

--text-display (100%) → Hero numbers. One per screen.
--text-primary (90%)  → Body text, primary content.
--text-secondary (60%) → Labels, captions, metadata.
--text-disabled (40%) → Disabled, timestamps, hints.

**赤（#D71921）は階層の一部ではありません。**割り込みを表し、「今すぐ、ここを見て」という意味です。緊急性のある情報がなければ、画面に赤は使いません。

データのステータスカラー（成功を示す緑、警告を示す琥珀色、アクセントの赤）は、データ値を表す場合に限り、「アクセントは1つ」というルールの対象外です。色はラベルや行の背景ではなく、値そのものに適用してください。カラーシステムの詳細は references/tokens.md をご覧ください。

2.6 一貫性と変化

一貫性を保つもの： フォントファミリー、ラベルの扱い（常に Space Mono のALL CAPS）、スペーシングのリズム、色の役割、コンポーネントの形、配置。

画面ごとに、パターンを崩す箇所は必ず1つだけにします。 大きな数字、長方形の中にある円形ウィジェット、グレーの中の赤いアクセント、Doto の見出し、ほかが詰まっている中にある広大な余白などです。

この唯一の変化がデザインです。なければ無機質なグリッドになり、2つ以上あると視覚的な混乱を招きます。

2.7 構成のバランス

対称より非対称。 中央揃えのレイアウトはありきたりに感じられます。意図的にバランスを崩した構成を優先してください。

• 左を大きく、右を小さく： 主役となる指標＋メタデータのスタック。
• 上部に重点： 上部近くに大きな見出しを置き、その下のコンテンツはまばらにします。
• 端に固定： 重要な要素を画面の端に固定し、中央に余白を設けます。

重い要素のバランスは、さらに重い要素を加えるのではなく、余白を増やして取ります。

2.8 Nothing の雰囲気

1. 余白で自信を示します。 広く途切れのない背景領域を設けます。空間を埋めたくなる気持ちを抑えます。
2. 細部に精度を宿します。 文字間隔、正確なグレーの値、4px の間隔。細かな判断の積み重ねが、ものづくりの質につながります。
3. データを美しく見せます。 Space Mono、48px の 36GB/s そのものがビジュアルです。イラストは必要ありません。
4. 機械としての誠実さを保ちます。 コントロールはコントロールらしく見せます。トグルは物理スイッチ、ゲージは計器です。
5. 意外性のある瞬間を1つ作ります。 ドットマトリクスの見出し、円形ウィジェット、赤いドットなど。抑制があるからこそ、その1つの表現が力を持ちます。
6. 流麗さではなく、歯切れよさを重視します。 UI の音を想像してください。シュッではなくクリック、チャイムではなくカチッ。機械的で精密に感じられるトランジションをデザインします。

2.9 データ密度の高い画面での視覚的な変化

1つの画面に3つ以上のデータセクションがある場合は、視覚的な形式に変化をつけます。

形式	最適な用途	強さ
主役となる数値（大きな Doto／Space Mono）	単一の主要指標	強 — 1回のみ使用
セグメント式プログレスバー	目標に対する進捗	中
同心円のリング／円弧	関連する複数の割合	中
インラインのコンパクトバー	行内の副次的な指標	弱
ステータスカラー付きの数値のみ	比率を伴わない値	最も弱
スパークライン	時系列の傾向	中
統計行（ラベル＋値）	シンプルなデータポイント	弱

先頭のセクションには最も強い表現を使います。2番目には異なる形式を使い、3番目には最も控えめな形式を使います。変化させるのは形式であり、雰囲気は一貫させます。

---

3. アンチパターン — 絶対に避けること

• UI の装飾にグラデーションを使わない
• 影やぼかしを使わない。平坦な面とボーダーで区切る。
• スケルトンローディング画面を使わない。[LOADING...] のテキストまたはセグメント式スピナーを使う。
• トーストポップアップを使わない。インラインのステータステキストを使う：[SAVED]、[ERROR: ...]
• 悲しい顔のイラスト、かわいいマスコット、複数段落にわたる空状態の説明を使わない
• テーブルにゼブラストライプを使わない
• 塗りつぶしアイコン、複数色のアイコン、UI としての絵文字を使わない
• パララックス、スクロールジャッキング、不要なアニメーションを使わない
• スプリング／バウンスのイージングを使わない。控えめな ease-out のみ使用する。
• カードの border-radius を16pxより大きくしない。ボタンはピル型（999px）またはテクニカルな形（4～8px）にする。
• データの可視化では、色を導入する前に、不透明度（100%／60%／30%）またはパターン（塗りつぶし／縞模様／点模様）で区別する。

---

4. ワークフロー

1. フォントを指定する — 読み込む Google Fonts をユーザーに伝えます（references/tokens.md を参照）
2. モードを尋ねる — ダークとライトのどちらですか？ デフォルトはありません。
3. 階層をスケッチする — コードを書く前に、3 つのレイヤーを特定します
4. 作成する — ルールを適用します（セクション 2.1～2.9）
5. トークンを確認する — 正確な値は references/tokens.md を参照します
6. コンポーネントを構築する — パターンは references/components.md を参照します
7. プラットフォームに適応する — 出力規約は references/platform-mapping.md を参照します

---

5. 参考ファイル

トークンの詳細な値、コンポーネント仕様、プラットフォーム固有のガイダンスについては、以下を参照してください。

• references/tokens.md — フォント、文字サイズのスケール、カラーシステム（ダーク＋ライト）、間隔のスケール、グリッド、モーション、アイコン、ドットマトリックスのモチーフ
• references/components.md — カード、ボタン、入力、リスト、テーブル、ナビゲーション、タグ、セグメントコントロール、プログレスバー、チャート、ウィジェット、オーバーレイ、状態パターン
• references/platform-mapping.md — HTML/CSS、SwiftUI、React/Tailwind、Paper の出力規約