Kamos Design System & Token Kit
The unified design system powering Project Kamos (the app.kamos.io web application suite and the public kamos.io site).
Anchored in the philosophies of Intentional Smallness and Margin Engineering, it defines rigorous specifications for the harmony of emerald green and lavender, R8 rounded shells, glassmorphism, and geometric typography.
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-['Josefin_Sans:Regular'] text-[14px] leading-relaxed
Allowing thought to unfold unhurriedly, letting nuances mature within negative space. A craft-level paradigm where manual mastery and AI generation resonate together rather than submitting to automation. Uncluttered by excessive density, it maintains expansive, breathing margins and quiet stillness.
font-['Josefin_Sans:Medium'] text-[11px] tracking-wider
KAMOS-FS-2026 | CONFIDENTIAL & PROPRIETARY | SSOT SPECIFICATION
R8 Shell & Glassmorphism
R8 Shell Corner Hierarchy
Standard cards, modal frames, top-level containers. rounded-lg / rounded-[8px]
Nested sub-panels, inner containers. rounded-md / rounded-[6px]
Buttons, input forms, segmented switches. rounded / rounded-[4px]
Glassmorphism Core Shell (Multi-layered Translucent Glass)
Kamos Frosted Glass Surface
Spatial design crafted with multi-layered translucent glass. A signature material model of Kamos OS, imparting an inviting depth of field between the ambient mist (Lavender Veil) and foreground UI elements.
app.kamos.io Production Components
Global App Header (/js/header-loader.js — loadHeader)
Framework Analysis
Instruments of Thought
Kosuke Kato
kosuk@kosukekato.co
App menu sliding in from the right upon clicking more_vert (3-dot icon) in the header
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/)
Causal Loop Diagram (CLD)
A systems thinking tool to visualize variable feedback loops and delays, uncovering strategic leverage points.
Headless Analysis Core Uptime
AI Chat Notes, Tone Selectors & Input Surfaces
7. Dynamic AI Chat Note (/app/css/chat-note.css)
Analyzed through the lens of Intentional Smallness. Rather than cluttering with features, leaving space for human agency fosters autonomous ideation.
Let's proceed in that direction. Define the synced tokens for Figma and Web so they remain reusable at any time.