✓ HEX code copied

Kamos
Design Harness

Official design system and quality assurance harness specification powering Project Kamos (app.kamos.io and kamos.io). Rooted in the philosophy of Intentional Smallness and Margin Engineering, we define standards for attribute-driven tokens (data-accent), glassmorphic shells, UI components, deceleration motion, and self-healing runtime behaviors.

00 / THE HARNESS PIPELINE

Quality Assurance & Self-Healing Ecosystem

Brandkit × Buildapp × Harness × Linter
STAGE 01 / SSOT FOUNDATION

Brand Kit (Unified Identity Management)

Defines logos, HSL color palettes, typography hierarchies, and Kosuke Kato's user identity as an unyielding Single Source of Truth (SSOT). Prevents generative AI from inventing aberrant palettes or inaccurate Kanji, preserving 100% brand integrity.

  • Strict vector asset management (horizontal, vertical, emblems)
  • Josefin Sans / Noto Sans JP geometric typography scale
  • Identity lock restricting canonical Japanese Kanji variations
STAGE 02 / STRUCTURE BOILERPLATE

Build App (Standard Scaffolding Boilerplate)

Supplies mandatory architecture when creating or refactoring web apps (app/) or public pages (www/). Mandates global header, sitemap footer, Auth Guard, and safe clearances to eliminate rogue navigation sprawl.

  • Standard injection of global header (kamos-nav.js)
  • 100% mutual synchronization between header and footer (kamos-footer.js)
  • Safe area margin clearance (95px) under fixed navigation
STAGE 03 / ATTRIBUTE & TACTILITY

Design Harness (Attribute-Driven Tactility)

Adopts a semantic attribute receptor approach (data-accent, data-theme) rather than handwriting brittle CSS. Infuses physical deceleration physics (cubic-bezier(0.16, 1, 0.3, 1)) and standardizes reciprocal human-AI craftsmanship.

  • Instant DOM-wide tuning across 7 accent palettes
  • Zero-dependency motion kit (kamos-motion.js) for smooth settling
  • Reciprocal pipeline between AI generation and human typesetting
STAGE 04 / GOVERNANCE & HEALING

Lint & Self-Healing (Static Audit & Runtime Repair)

The static audit engine (kamos-lint.js) rigorously verifies 7 quality categories and executes automated fixes via --fix. At runtime, Runtime Normalizer quietly embraces broken images and normalizes link security, creating dual-layer defense.

  • 7-category audit (BRAND, A11Y, HARNESS, SECURITY, SEO, DOM, TOKEN)
  • Runtime Normalizer replacing 404 broken images with serene placeholders
  • Automatic injection of rel="noopener noreferrer" for outbound URLs

Why are Mashups and Self-Healing Necessary?

AI generation cannot permanently maintain flawless UI through single prompts alone. In Kamos, we mash up ① Brand Kit's canonical SSOT definitions, ② Build App's resilient structure, and ③ Design Harness's attribute-driven receptors, while ④ Kamos Lint and Runtime Normalizer perform continuous verification and automated self-healing.

Accent Attribute Switching (data-accent)
01 / LOGO

Brand Identity Marks

SVG & PNG Vector
Kamos Horizontal Logo
HORIZONTAL Header and wide layout navigation
/img/kamos-logo-h.png
Kamos Vertical Logo
VERTICAL Square avatar and emblems
/img/kamos-logo-v.png
02 / COLOR PALETTE

Cohesive Token Swatches

※Click card to copy HEX code

Primary & Secondary Brand Tokens

#10B981

Primary / Emerald Green

Brand Identity, Primary CTA, Active States

#047857

Primary / Forest Ink

Deep Accent, High-Contrast Headers

#F0E6FA

Secondary / Lavender Veil

Ambient Background, Mist Glow

#FAF5FF

Secondary / Soft Lilac

Card Background, Subtle Highlights

7 Accent Personalities (data-accent)

kamos (Emerald) Living growth, resilience, baseline
brass Digital vault, academic broadsheet
amber Industrial gauges, developer heat
cyan Space weather, atmospheric clarity
violet Dialogue, philosophical insight
rose Passion, critical crisis signals
indigo Cognitive logic, causal scaffolds

Neutral & Surface Tokens

#0F172A

Neutral / Ink 900

Primary Body Text, Dark Shell

#475569

Neutral / Slate 600

Secondary Text, Captions, Icons

#E2E8F0

Neutral / Border 200

Card Borders, Dividers

#FAF8FC

Surface / Canvas Base

Root Background, Global Canvas

03 / TYPOGRAPHY

Typeface & Scale

Inter + Josefin Sans
DISPLAY & BRAND

Josefin Sans

Geometric, elegant display font. Used for logos, hero headlines, and telemetry labels.

BODY & UI TEXT

Inter

Crisp readability and clean metrics for English body text, UI controls, and descriptions.

MONOSPACE & CODE

Space Mono

Fixed-width font for codeblocks, telemetry logs, JSON, and system timestamps.

04 / GLASSMORPHISM

Elevation & Glass Tokens

Backdrop Blur 16px
ELEVATION 01

Standard Glass Card

bg-white/85 blur(16px)
border-slate-200/80
ELEVATION 02

Lavender Accent Shell

bg-[#F0E6FA]/55 blur(16px)
border-white/80
ELEVATION 03

Floating Modal & Dropdown

shadow-2xl blur(24px)
border-slate-200
05 / MOTION & HARNESS

Deceleration & Resilience

kamos-motion.js
Hover Lift & Press .hover-lift .btn-press
Ambient Glow
Hover Glow
.hover-glow
Telemetry Pulse
Live Telemetry
.badge-pulse
Number Ticker 0% .num-ticker

Runtime Normalizer

  • Automatic silencing of 404 images into quiet placeholders
  • Automated injection of rel="noopener noreferrer" for outbound links
  • Safe area margin clearance (95px) under fixed navigation

Kamos Lint Governance

  • BRAND: Canonical user Kanji audit for Kosuke Kato (加藤康祐)
  • A11Y: Missing alt tags, ARIA attributes, and WCAG contrast
  • SYNC: 100% mutual synchronization of Header and Footer
06 / UI COMPONENTS

Interactive Component Palette

Live Components

Button Styles

Badges & Tags

Active Telemetry Systemic Loop Rate Limit 85% v3.0.0

Form Inputs