Harmonize palette and air,
keep the vision whole.

Designography Designography: Aesthetic Design System

While generative AI easily renders compelling images, outputs often suffer from shifting colors and inconsistent styles, making brand coherence hard to sustain. Kamos Designography is a design system that structures color palettes, typography, spacing, and watercolor tactile textures into clean JSON definitions. With roughly 200 rich tone presets ready to use and the browser-based "Tone Builder" allowing you to freely add custom tones, you can effortlessly maintain a consistent aesthetic. Connected through Kamos Bridge, the exact same tone definitions are available across Suite (Web), Edge (PC), and Phone (Mobile).

Three Key Features of Designography

A flexible architecture that ensures consistent brand atmospheres while inviting custom creative expansion.

200+ PRESETS PILLAR 01

Over 200 Aesthetic Tones

From Bauhaus and Art Deco to organic watercolors, 90s nostalgia, and minimalist modernism. Pick any tone preset to establish an instant, cohesive aesthetic.

TONE BUILDER PILLAR 02

Custom Tones via Tone Builder

Beyond built-in presets, create your own custom tones using the visual "Tone Builder" tool. Pick primary and accent hues and register reference images to expand your aesthetic studio.

BRIDGE ECOSYSTEM PILLAR 03

Unified via Kamos Bridge

Powered by "Kamos Bridge", Suite (Web), Edge (PC), and Phone (Mobile) share the identical tone catalog. Create and iterate across devices with total visual coherence.

Schema Anatomy & Data Structure

Six Dimensions of the Designography Schema

Designography is far more than a simple color palette. It structures colors, typography, spacing, corner radiuses, depth, and AI directives into a unified JSON architecture.

JSON SCHEMA kamos-designography.json

Designography Core Definition

version: "1.0.0" • baseline: "Material Expressive"
01 / palette OBJECT
Color Palette Hierarchy

Defines Primary hue and roles, Secondary background veils, Neutrals (default/subtle text), Accents/Vitamin highlights, Surfaces, and Border colors.

primary: #10B981
secondary: #F0E6FA
accents:
02 / typography OBJECT
Typography Standards

Sets English & Japanese font pairings, modular scale from h1 to caption (rem), line-height ratios, and architectural typographic character.

families.en: Josefin Sans
families.ja: Noto Sans JP
scale: h1: 2.5rem / body: 1rem
03 / shape_and_elevation OBJECT
Geometry & Elevation

Formulates corner curvature (R0 sharp to R8 soft) and layered shadows (low, medium, high, focus) for floating UI depth.

corner_radius: R4 (sm) / R6 (md) / R8 (lg)
shadows: low, medium, high
style: Soft Translucent Veil
04 / motion OBJECT
Motion & Tactile Timing

Encodes micro-interaction durations (short: 0.2s / medium: 0.3s) and natural physics easing curves (organic spring bounce).

durations: 0.2s / 0.3s / 0.4s
easing: cubic-bezier(0.4, 0, 0.2, 1.2)
touch: Organic Spring Bounce
05 / reference_images ARRAY
Visual Grounding (Visual RAG)

Binds up to 5 reference images (watercolor washes, pen line textures, brushwork) directly injected into the AI vision pipeline.

max_images: 5 Reference Images
injection: Direct Vision Grounding
storage: Firebase Storage Cloud
06 / prompt_addendum STRING
AI Pipeline Directives

Directives automatically appended to Gemini image and UI generation calls, regulating composition, white space, and chromatic drift.

target: Gemini Image & UI Pipeline
composition: Layered Translucent Panes
consistency: Chromatic Drift Prevention
SCHEMA STRUCTURE PREVIEW JSON (Standard Designography Specification) 
{
  "id": "kamos_designography",
  "version": "1.0.0",
  "palette": {
    "primary": { "hex": "#10B981", "hover": "#059669" },
    "secondary": { "hex": "#F0E6FA", "usage": "background veil" },
    "neutrals": { "text_default": "#333333", "text_subtle": "#6B7280" },
    "accents": { "blue": "#3B82F6", "purple": "#8B5CF6", "amber": "#F59E0B" }
  },
  "typography": {
    "families": { "english": "Josefin Sans", "japanese": "Noto Sans JP" },
    "sizes_rem": { "h1": 2.5, "body": 1.0 }
  },
  "shape_and_elevation": {
    "corner_radius_px": { "small": 4, "medium": 6, "large": 8 },
    "shadows": { "low": "0 1px 3px rgba(0,0,0,0.08)" }
  },
  "reference_images": [ "watercolor_sample_01.png", "handcraft_sample_02.png" ],
  "gemini_prompt_addendum": "Render with translucent panes, generous white space, and softly rounded R8 shells..."
}
Custom Tone Studio

Add Custom Tones with Tone Builder

Expand beyond existing presets by visually crafting and storing your brand's unique palettes in the browser.

01

Visual Palette Tuning

Pick Primary, Secondary, and up to 3 Accent colors with real-time contrast checking and live swatches.

02

Reference Image Grounding

Attach up to 5 reference images showing desired brushwork, lighting, or atmosphere. The AI reads them as visual grounding (Visual RAG).

Up to 5 Reference Images (Visual RAG)
03

Cloud Sync Everywhere

Saved to Firestore and instantly accessible across Suite, Edge, and Phone with star (★) markers for personal presets.

★ My Custom Tone (Ready)