デザインガイド

セクション 1 — 方向性

静かなエンジニアリング

Gn8 は、課題整理、ソフトウェア設計、OSS 開発、運用という実務を、正確な UI 断片で伝えます。抑制した紫のアクセントは、線、ドット、マーカー、フォーカスリングに限ります。

セクション 2 — 階層と構図

読む順番を最優先にする

アイブロウ → ページタイトル → リード → コンテンツの順番を保ちます。 スペーシングスケール を使い、境界線とモノスペースラベルで構造を明確にします。

1. 01アイブロウ — 文脈
2. 02ページタイトル — 主題
3. 03リード — 簡潔な文脈
4. 04コンテンツ — 根拠と行動

セクション 3 — 色の使い方

装飾ではなく役割で使う

背景 / 本文

背景と本文には意味に応じた色の役割を使い、本文の可読性を優先します。

補助 / 控えめ

muted と faint は補助情報とシステムラベルにだけ使い、本文には使いません。

主要 / 強調

primary と accent はホバー、フォーカス、リンク、細い線、ドット、マーカーに限ります。面塗りは避けます。すべての組み合わせは トークン .

セクション 4 — 書体

役割ごとに書体を割り当てる

サンセリフ

本文と見出しに使います。

モノスペース

システムラベルとメタデータでは、すべて大文字で使います。

スケール

サイズ、字間、行送りは トークン の定義に収めます。

セクション 5 — 余白とグリッド

構造を測る

リズム

すべての余白は スペーシングスケール に沿わせます。

レイアウト

コンテナとレスポンシブレイアウトは CSS Grid で組み、320px 幅でも横にあふれないようにします。

形状

radius は 0。シャープな形状でエンジニアリングの精度を示します。

セクション 6 — モーション

モーションはシステムに従う

プロパティ

変化させるのは transform、opacity、filter だけにし、動線を明確にする場合だけモーションを使います。

タイミング

color、entry、theme のタイミングは トークン .

動きの軽減

prefers-reduced-motion: reduce が有効なときは即座に切り替えます。

セクション 7 — アクセシビリティとキーボード

すべてのルートを操作可能にする

• 正しい lang 属性、意味を持つランドマーク、aria-labelledby を使う。
• すべてのインタラクティブ要素に見えるフォーカス状態を与える。
• すべてのリンクに意味のあるテキストを使う。
• 動きの軽減を尊重する。
• 本文のコントラストを保つ。
• 320px 幅でもすべてのルートをキーボード操作可能にする。

セクション 8 — 会社情報

作り話ではなく事実を示す

会社情報は一覧と信頼性を示す帯で事実だけを提示します。指標、顧客数、スター数を捏造しません。

1. 01計画
2. 02構築
3. 03レビュー
4. 04公開

セクション 9 — リソース参照

正準ソースを使う

ロゴ

ロゴ仕様を開く

トークン

トークン仕様を開く