Kamos Design System & Token Kit
Project Kamos（app.kamos.io Webアプリ群および kamos.io 公開サイト）を支える統一デザインシステム。
Intentional Smallness（意図的な小ささ） と Margin Engineering（余白の設計） の哲学に基づき、エメラルドグリーンとラベンダーの調和、R8角丸シェル、グラスモーフィズム、幾何学タイポグラフィの厳格な規格を定義します。
Brand Identity Marks
/img/kamos-logo-h.png
/img/kamos-logo-v.png
Cohesive Token Swatches
Primary & Secondary Brand Tokens
Primary / Emerald Green
Brand Identity, Primary CTA, Active States
Primary / Forest Ink
Deep Accent, High-Contrast Headers
Secondary / Lavender Veil
Ambient Background, Mist Glow
Secondary / Lavender Soft
Subtle Card & Panel Background
Neutrals & Interaction Tokens
Neutral / Charcoal Text
Primary Body & Heading Text
Neutral / Muted Gray
Secondary Text, Captions, Subtitles
Neutral / Surface Line
Dividers, Glass Border Strokes
Accent / Electric Blue
Tech Links, Data Streams, Sync
Vitamins & Cognitive Accents
Vitamin / Sunny Yellow
Insight Spark, Energy Highlight
Vitamin / Accent Pink
Vitality, Critical Spark
Vitamin / Tangerine Orange
Warm Interaction, Notifications
Accent / Deep Purple
Cognitive Resonance, AI Agents
Font Pairings & Hierarchy
font-['Josefin_Sans:Bold'] font-bold text-[40px] tracking-tight
Intentional Smallness
font-['Josefin_Sans:Bold'] font-bold text-[28px] tracking-wide
Margin Engineering System
font-['Josefin_Sans:SemiBold'] font-semibold text-[20px]
Human-AI Co-Creation Workflow
font-['Josefin_Sans:SemiBold'] font-semibold text-[16px]
Multi-Context Data Synthesis & Analysis
font-['Noto_Sans_JP:Regular'] text-[14px] leading-relaxed
思考を急がず、余白の中でゆらぎを熟成させる。AIに使役されるのではなく、手技と生成が共鳴するプロの制作様式。情報を過密に詰め込まず、呼吸するような大きなマージンと静寂を保つ。
font-['Josefin_Sans:Medium'] text-[11px] tracking-wider
KAMOS-FS-2026 | CONFIDENTIAL & PROPRIETARY | SSOT SPECIFICATION
R8 Shell & Glassmorphism
R8 Shell Corner Hierarchy (角丸体系)
標準カード、モーダル外枠、最上位コンテナ。rounded-lg / rounded-[8px]
カード内部のサブパネル、インナーコンテナ。rounded-md / rounded-[6px]
ボタン、入力フォーム、セグメントスイッチ。rounded / rounded-[4px]
Glassmorphism Core Shell (多層半透明ガラス)
Kamos Frosted Glass Surface
多層半透明ガラスによる空間設計。Kamos OS の特徴的なマテリアルモデルであり、背景の霧（Lavender Veil）と前面のUI要素に心地よい被写界深度を与えます。
app.kamos.io Production Components
Global App Header (/js/header-loader.js — loadHeader)
Framework Analysis
思考の道具
ヘッダー右端の more_vert (3点リーダー) をクリックすると右からスライドインする全アプリ一覧
Action Buttons, Circular FABs & Segmented Switches
1. Standard Action Buttons (/css/buttons.css)
2. Vitamin Pop Buttons (Spark & Vitality)
3. Status Indicator Badges
4. Matrix / Card Action FABs (.action-button)
5. Floating Download Toolbar (.download-button)
6. Segmented Tabs
Framework Selection Card & Matrix Cell Grid (/app/analysis/)
因果ループ分析 (CLD)
変数のフィードバック構造と遅延を可視化し、レバレッジポイントを発見するシステム論的思考ツール。
Headless Analysis Core 稼働率
AI Chat Notes, Tone Selectors & Input Surfaces
7. Dynamic AI Chat Note (/app/css/chat-note.css)
Intentional Smallnessの視点から分析しました。機能を詰め込むのではなく、手技の余白を残すことで、ユーザーの自律的な発想を促す構造が形成されています。
その方向で進めよう。FigmaとWebの連携トークンを定義して、いつでも再利用できるようにして。