02
ブランドの個性
技術的な正確さ、落ち着いた表面、一つの暖かなアクセント。以下は観察できるスタイルの原則で、シンボルの解釈ではありません。
形状角を丸めた四角い輪郭は、空間とアクセス境界を表します。
資料マットなグラファイトと、一つの琥珀色の面。
タイポグラフィ大きく明確な言葉と控えめな説明。
動き理由 → 変化 → 結果。
03
ロゴ
サイトで現在使用している構成はシンボルと NODQ の文字です。承認済みのベクター原本はまだ公開されていないため、ロゴはダウンロードできません。
NODQ
クリアスペース提案であり、現行の基準ではありません。x = シンボルの高さの ¼、四方の余白 ≥ 1x。
最小サイズ検証候補：組み合わせは幅 120 px 以上、シンボルは 24 px 以上。16/32/48 px の Favicon は別の素材で、検証が必要です。提案 · 承認が必要
禁止する使い方
✕ 引き伸ばさない ✕ 回転させない ✕ 色を変えない ✕ 別の影を付けない
04
色
値はサイトのトークンおよび nodq-tokens.css / .json ファイルと一致します。
CTA のホバー状態#FFAA33
CTA の押下状態#E3810C
ハイライト（グラフィック）#FFBD59
影の面（グラフィック）#D96800
補助テキスト · ダーク#B6BCB7
補助テキスト · ライト#59625B
リンク · ライト#9A4A00
成功#8DD6AB / #166B40
警告#FFD08A / #875000
エラー#FF9B92 / #B7342A
アクセント／選択済み✓ 成功! 警告✕ エラー
本文 · 補助 · リンク
キーボードフォーカス
配色のコントラスト：#F7931A 上の #121613 ≈ 7.95:1 · #0A0C0B 上の #F5F4F0 ≈ 17.8:1 · #F5F4F0 上の #9A4A00 ≈ 5.7:1。オレンジ上の小さな白文字は使用しません。CMYK/Pantone は未公開です。
05
タイポグラフィ
Onest 400/500/600/700 と、アドレスやラベル用の JetBrains Mono。値は実際のサイトのスタイルです。
あア 漢字 Bb 0123Onest · 400 / 500 / 600 / 700 · キリル文字とラテン文字レギュラーミディアムセミボールドボールド
H1clamp(34px, 4.4vw, 58px) · 700 · 1.05 · -0.035em
Люди. Агенты. Одна сеть.
H2clamp(26px, 2.8vw, 38px) · 600 · 1.12 · -0.025em
Правила для расходов агента
Lead17–20px · 500 · 1.4 · -0.01em
Сеть для приложений, AI-сервисов и расчётов.
Body16–17px · 400 · 1.6 · 0
Агент работает в пределах бюджета, получателей и срока.
Caption13–14px · 400 · 1.45 · 0
Демонстрация · данные-образцы
ラベル（等幅）11px · 400 · 1.3 · 0.08em
Заказ #A-1042
コード / アドレス13–14px · 400 · 1.5 · 0
0x3f2c…a91e · 40,8021 NODQ
06
グリッドとサイズ
コンテナーmax-width 1360px
左右の余白clamp(20px, 4.5vw, 72px)
セクション間隔clamp(48px, 6vw, 104px)
グリッドの間隔8 · 12 · 16 · 20 · 24 · 32 px
角丸の半径入力欄 8 · ボタン 10 · カード 12–16 · ラベル 999
線区切り線 1 px · 図 1.5 px
フォーカス2 px の輪郭 + 光彩
影メニューと製品画面のみ
07
コンポーネント
静的な状態サンプルと、ローカルのフォーム例です。リクエストはどこにも送信されません。
ボタン
メイン
ホバー
押下状態
補助
利用できません
タブとラベル
選択済み通常
デモ設計中文書を準備中利用可能
入力欄とエラー
08
アイコンとグラフィック
16 / 20 / 24 px のグリッドに 1.5–2 px の Lucide 線形アイコンを使い、製品共通の視覚表現を用います。
file-textreceiptmessages-squareusersfoldersearchplugflag
線形、塗りつぶし、立体のアイコンセットを混在させないでください。スペース
エージェント
権限
決済
09
動き
例は一度に一つ表示します。曲線は cubic-bezier(0.2, 0.8, 0.2, 1)。システムで「動きを減らす」が有効な場合は最終フレームを表示します。
ボタン／タブ
180 ミリ秒 · ホバー、選択
状態の変化
350 ミリ秒 · 新しい状態
ブランドの経路
1000 ミリ秒 · 一つの操作
10
活用例
実際のサイトページでも同じルールを使います。
サイトのファーストビュー →暗いシーン、ブランドオブジェクト、オレンジの CTAAgent Wallet パネル →ルールの確認、意味に応じた状態IZIGRAM ワークスペース →明るい文書と、選択したアクセス領域
プレゼンテーション表紙、告知カード、パートナーとの共同掲載は表示していません。承認済み素材がないためです。11
資料をダウンロード
存在するファイルのみを公開しています。まとめた ZIP パッケージはまだありません。
12
バージョンとフィードバック
v0.12026 年十月 9 日 · ガイド初版：配色、タイポグラフィ、コンポーネント、トークン。草案。