design-guidelines

Even Hub G2 のデザインガイドライン

表示上の制約

• 解像度：片目あたり 576 x 288 ピクセル
• 色深度：4 ビットグレースケール — 16 段階の緑色
• 白いピクセルは明るい緑色で表示され、黒いピクセルはオフ（透明）です
• 背景色や塗りつぶし色のプロパティはありません
• CSS、フレックスボックス、DOM は使用できません — UI は絶対位置で配置したピクセルコンテナで構築します
• ページあたり最大 4 個の画像コンテナと8 個のその他のコンテナ

コンテナの制限

• コンテナは合計 12 個まで（テキスト／リスト 8 個 + 画像 4 個）
• isEventCapture: 1 を持つコンテナが必ず 1 個必要です
• containerID はページごとに一意である必要があります（整数）
• containerName はページごとに一意である必要があります（文字列、最大 16 文字）
• zOrderIndex による重なり順（SDK 0.0.12 以降）— ページ内のすべてのコンテナに設定するか、すべて省略する必要があります。値は一意で、大きいほど前面になります。すべて省略した場合は、宣言順によって重なり順が決まります

フォントとテキスト

• ファームウェアに組み込まれた単一の LVGL フォント
• 等幅フォントではありません
• フォント選択、フォントサイズの調整、太字／斜体には対応していません
• フォントにない文字は警告なしでスキップされます
• テキストはコンテナの幅に合わせて折り返されます
• 改行には \n を使用します
• 全画面のテキストコンテナを埋めるには、約 400～500 文字が目安です
• ファームウェアのフォントセットに含まれる Unicode 文字をサポートします

一般的な UI パターン

パターン	方法
ボタン風の表示	カーソルを示す > をテキストの先頭に付けます
選択状態の強調表示	個別のテキストコンテナの borderWidth を切り替えます
複数行レイアウト	複数のテキストコンテナを縦に積み重ねます（例：高さ 96px のコンテナを 3 個）
プログレスバー	Unicode のブロック文字：━（塗りつぶし）と ─（空）、または █▇▆▅▄▃▂▁
ページ切り替え	テキストを約 400～500 文字ごとに事前にページ分割し、スクロールイベントで再構築します
テキストの「中央揃え」	スペースで手動調整します（テキストの配置機能はありません）

アイコンのデザイン原則

• ネイティブ解像度でデザインする — 実際のピクセルサイズ（例：24x24）で作業します。大きく作ってから縮小するのは避けてください。
• シンプルにする — 内部の細部を最小限に抑え、ひと目で認識できるシルエットを目指します。
• 実機でテストする — 緑がかったグレースケール表示はモニター上の表示とは異なります。実際のディスプレイ、またはグローを有効にしたシミュレーターで、必ず視認性を確認してください。

便利な Unicode 文字

用途	文字
プログレスバー	━ ─ █▇▆▅▄▃▂▁
ナビゲーション	▲△▶▷▼▽◀◁
選択	●○ ■□ ★☆
枠線	╭╮╯╰ │─（罫線素片）
カードのスート	♠♣♥♦

サポートされているグリフの完全な一覧：https://github.com/nickustinov/even-g2-notes

画像コンテナ

• 幅：20～288 px、高さ：20～144 px
• 4 ビットグレースケール
• 作成時はプレースホルダーが表示されます — コンテンツを表示するには updateImageRawData を呼び出す必要があります
• 画像を同時に送信することはできません — 送信が完了するたびに待機してください
• シンプルでフラットな色を使用してください。グラスのメモリには限りがあります

スマートフォン側のアプリ UI（Flutter WebView ホスト）

グラスは黒地にモノクロの緑色で表示しますが、スマートフォン上でプラグインをホストする Flutter WebView には独自のビジュアルアイデンティティがあります。スマートフォン側の設定／ライブラリ画面を作成する際は Even アプリのデザインシステムに合わせ、プラグインが Even Hub に自然に溶け込むようにしてください。

カラートークン

トークン	ライト	ダーク	用途
--color-text	#232323 (TC-1st)	#FFFFFF	メインテキスト
--color-text-dim	#7B7B7B (TC-2nd)	#8A8A8A	補助テキスト、タイムスタンプ、キャプション
--color-bg	#FFFFFF (BC-1st)	#111111	ページの背景
--color-surface	#EEEEEE (BC-3rd)	#1A1A1A	カード／行の背景
--color-input-bg	rgba(35,35,35,0.08)	rgba(255,255,255,0.08)	検索バー、入力欄
--color-accent	#FEF991	#FEF991	ブランドアクセント（ボタンや強調表示に控えめに使用）
--color-text-on-accent	#FFFFFF	#FFFFFF	アクセント背景上のテキスト

ブランドルール：

• #FEF991 は Even のブランドカラーである黄色です。アクセント（ボタン、強調表示）にのみ使用し、ページの背景には使用しないでください
• #3CFA44 はグラスのディスプレイ用の緑色です。G2 ディスプレイにのみ使用し、スマートフォン側の UI では絶対に使用しないでください

タイポグラフィ

基本フォント：FK Grotesk Neue（引き締まったエディトリアルな印象にするため、文字間隔を負の値にします）。フォールバック：CJK には Source Han Sans、それ以外にはシステムサンセリフを使用します。

スタイル	サイズ	ウェイト	文字間隔
ディスプレイ	34 px	700	-0.02em
タイトル	24 px	600	-0.02em
サブタイトル	18 px	500	-0.01em
本文	16 px	400	-0.01em
キャプション	13 px	400	0
ラベル	11 px	500	0.04em（大文字）

余白

4/8 px のグリッドを使用します：4 8 12 16 24 32 48 64。カードのパディング：16。セクション間の余白：24～32。画面端のパディング：20。

Figma デザインガイドライン

レイアウトの原則、コンポーネントのパターン、インタラクションモデル、ビジュアル基準を網羅した公式デザインガイドライン： https://www.figma.com/design/X82y5uJvqMH95jgOfmV34j/Even-Realities---Software-Design-Guidelines--Public-?node-id=2922-80782

コミュニティリソース

• even-g2-notes（GitHub: https://github.com/nickustinov/even-g2-notes）— アーキテクチャの詳細解説、Unicode グリフの完全な一覧、SDK の注意点、エラーコード、リファレンス実装：チェス、reddit リーダー、天気、Tesla の車両ステータス、pong、snake
• even-toolkit（GitHub: https://github.com/fabioglimb/even-toolkit、npm: even-toolkit）— 55 以上の React コンポーネント、191 個のピクセルアートアイコン、デザイントークン、メガネ SDK のブリッジユーティリティ（useGlasses フック、buildActionBar、mapGlassEvent、キャンバスレンダラー、PNG ユーティリティ、ページネーションヘルパー）
• Discord：https://discord.gg/Y4jHMCU4sv — サポート、バグ報告、ディスカッションのための開発者コミュニティ

タスク

$ARGUMENTS