Kamos
Design Harness & Themes
Project Kamos を支える公式デザインシステムおよび品質保証ハーネス仕様書。
意図的な小ささ（Intentional Smallness） と 余白の設計（Margin Engineering） に基づき、属性駆動トークン（data-accent / data-tone）、164種類のデザイン言語マトリクス、グラスモーフィズム、UIコンポーネント、減速モーション、および自己修復ランタイムの厳格な規格を定義します。
品質保証と自己修復のエコシステム
Brand Kit (ブランド資産の統合管理)
ロゴ、カラーパレット、フォントファミリ、角丸シェルの統一規格。Kamos公式ブランドと加藤康祐ブランドの単一情報源（SSOT）を維持し、散乱や表記ブレを防ぎます。
- Kamos Green (
#10B981) & Lavender (#F0E6FA) 靄レイヤー - 加藤康祐 (Kosuke Kato) の正確な漢字・アイデンティティ保持
- Material Expressive 3 準拠の R8 / R16 角丸シェル
Build App (標準骨格ボイラープレート)
Webアプリ（app/）や公開Web（www/）の骨格を標準化。認証ガード、共通ナビゲーション、サイトマップフッターの完全同期を徹底します。
- 共通ヘッダー（
kamos-nav.js）とフッター（kamos-footer.js）の同期 - ライトモード基準の透明感あるグラスモーフィズム設計
- Firebase Auth による安全な状態管理
Design Harness (属性駆動と手綱)
AIに複雑なスタイルを書かせず、data-accent や data-tone を出力させるだけで世界観と減速モーションが自動連動するガードレール。
- 7 Accent Personalities ＋ 164 Designographies Matrix
- ゼロ依存モーションキット（
kamos-motion.js/ 減速イージング） - DTP・キービジュアル生成における手技との往還ゲート
Lint & Self-Healing (静的監査と自律修復)
静的検証エンジン（kamos-design-linter.js）が16ルールを網羅的に監査し自動修復。ブラウザ実行時には Runtime Normalizer がリンク切れや被りを修復します。
- Brand, A11y, Security, DOM, Token の16大ルール自動検証
- Runtime Normalizer による画像404の自動静音プレースホルダー化
- 固定ヘッダー被り（96px clearance）の自動担保
Kamos
Material Expressive 3 に準拠した Kamos 独自のデザイン語彙。Kamos Green と淡いラベンダーを基調に、ビタミンカラーと丸みのある R をそろえたブランド統一トーン。
Brand Identity Marks
/img/kamos-logo-h.png
/img/kamos-logo-v.png
Cohesive Token Swatches
Current Active Tone Palette
Kamos Green
Core Theme Primary Tone
Vitamin Yellow
Vitamin / Secondary Accent
Kamos Lavender 200
Atmospheric Mist, Soft Gradients
Neutral / Ink 900
Primary Body Text, Dark Shell
7 Accent Personalities (data-accent)
Typeface & Scale Architecture
Josefin Sans
Rounded geometric grotesk with watercolor softness; friendly, youthful, and focused.
Noto Sans JP
トーンの世界観と高可読性を両立する日本語タイポグラフィ規約。
LH 1.6 / R8 Shell
H1: 2.5rem · H2: 2.0rem · Body: 1.0rem · Caption: 0.75rem
トーン連動 統合UI & コンポーネント・スイート
ハードコード色ゼロ。全てのUI要素がルートCSS変数（--accent, --radius）に完全同期。
リアルタイム独自トーン作成
お好みのカラーとフォント・角丸を入力すると、瞬時にこのページ全体のCSS変数が上書きされ、世界観が変貌します。