Design System Philosophy Colors Typography Spacing Shadows Components Animation DESIGN.md

Kenos Method
Design Philosophy

The methodology behind stitchwand's own design system — and the methodology stitchwand helps teams implement for theirs. AI-first, audit-first, three-tier, documented, scored.

AI-First Transformation

The Kenos Method treats AI as a primary collaborator, not a bolt-on. An audit that would take a single designer weeks — cataloguing every hardcoded hex, every ad-hoc spacing value, every one-off component — becomes a conversation with an AI agent that can read the entire codebase in minutes.

AI is used to audit at scale, generate tickets from the violation catalog, identify patterns a human eye would miss, suggest semantic mappings (e.g. "this #6366F1 appears 47 times — is it --color-accent?"), and write the first draft of every remediation PR. The human stays in the loop for intent, naming, and final approval — but the mechanical work of compliance is delegated.

Audit-First Baseline

Before a single token is renamed or a single component refactored, the Kenos Method starts with an audit. The audit produces four artifacts:

  1. Component inventory — every component in the system, Figma and code, tagged by status.
  2. Violation catalog — every hardcoded value, every off-token color, every ad-hoc spacing step.
  3. Baseline compliance score — a single percentage, calculated the same way every time, so progress is measurable.
  4. Priority ranking — violations sorted by frequency × impact, so the highest-leverage fixes land first.

Everything downstream (tickets, PRs, wiki pages, scorecard updates) traces back to this baseline. No audit, no method.

Three-Tier Token Architecture

The Kenos Method enforces a strict three-tier separation. Primitive tokens never appear in components directly — they pass through semantic tokens, which pass through component tokens. This is how a system survives a rebrand without touching a single component file.

Primitive
raw values
indigo-500: #6366F1
space-4: 16px
Semantic
purpose-named
color-accent
space-md
Component
per-component
button-bg
card-padding

Rebrand in one place (primitive layer), ripple everywhere. Never let a primitive leak into a component file — that's the invariant the compliance score tracks.

Documentation as Source of Truth

Every token, component, and decision gets documented at decision time, not retroactively. Retro-documentation is how design systems drift — by the time someone writes it down, the reasoning is gone. The Kenos Method closes that gap by tying documentation to the same PR that ships the change.

In stitchwand's case, this means every DESIGN.md file generated by the tool is both the design system and its own documentation. There is no separate "docs" step that can drift — the output is the source of truth.

Compliance Scoring Thresholds

A single percentage score, recalculated every time the audit runs, against a fixed rubric. Four bands:

Score Status Meaning
< 50% Critical Major investment needed. Re-found the token layer, not just patch it.
50–70% Moderate Systematic remediation in progress. Ticketed, staffed, on a schedule.
70–90% Healthy Maintenance mode. New violations caught in PR review, not post-hoc.
> 90% Excellent Compliance is a non-issue. Design-system time shifts to new capabilities.

Current stitchwand token compliance score: 100%Excellent tier. Measured 2026-04-13 by running auditPages() (lint + analyze) against all 115 pages and components in apps/web.

Audit Summary (2026-04-13)

Pages audited 115 (31 routes + 84 components)
Pages with issues 1
Total errors 1
Total warnings 0
Compliance score 100% (Excellent)

Violation Catalog

Severity Rule WCAG Count Location
Error focus-visible 2.4.7 1 inquiries-panel

Fix: Add a focus:ring-* or focus:outline-* class to the filter button in inquiries-panel.tsx:183 to ensure focus remains visible when outline-none is applied.

Remediation Workflow

Five steps, always in this order. Skipping a step breaks the method.

  1. Audit — run the scan, produce the violation catalog, establish the baseline score.
  2. Document — write the decision, the naming, the rationale. Wiki or Confluence page per violation category.
  3. Implement — ship the remediation PR. Figma and code together, never one without the other.
  4. Verify — re-run the audit on the touched surface. Confirm the violation is gone.
  5. Update score — publish the new percentage. Celebrate the delta. Loop.

Generalizability

The Kenos Method was developed against enterprise-scale Figma + React systems, but the methodology is stack-agnostic. It applies whether you are running Tailwind + Next.js, a Figma library with 400 components, a native iOS app with SwiftUI, or a DESIGN.md file consumed by Cursor. The specifics of the audit tooling change — the five-step loop and the three-tier invariant do not.

Stitchwand and the Kenos Method

Stitchwand generates DESIGN.md files that encode the same three-tier token architecture for AI consumption. The Kenos Method is both the methodology behind stitchwand and the methodology it helps others implement. Stitchwand's own token compliance score is a live proof point — we dogfood every claim we ship.

For the full go-to-market framing of the Kenos Method, see AI Strategy and Strategy. This page states the philosophy in the design-system voice; those pages tell the revenue story.

Credit

Kenos Method — Brian Dils, Fieldhaus / Dilshaus Ventures.

Last updated: 2026-04-11

stitchwand
Design System

Complete token reference, color palette, typography, spacing, shadows, and component patterns for the stitchwand application.

Design System in Action

Color Palette — Dark Mode

Primary application palette. Click any swatch to copy the hex value.

Background
Surface
Border
Text
Brand / Accent
Semantic
Extended

Color Palette — Light Mode

Google AI-inspired palette, Material Design 3-influenced. Used when light theme is active.

Background
Surface
Border
Text
Accent
Semantic

Typography

Two font families cover all use cases. Body letter-spacing: -0.011em. Font smoothing: antialiased on all platforms.

Inter — Primary
Display Heading
800 / 44px-0.04em
Section Heading
700 / 28px-0.03em
Card Title
700 / 20px-0.02em
Body text renders at 15 pixels with medium weight and comfortable line height for sustained reading.
500 / 15px-0.011em
Secondary body text and descriptions use regular weight at 13px with muted color.
400 / 13pxdefault
Caption / Label
600 / 11px0.05em upper
JetBrains Mono — Monospace
const token = convert(input, 'w3c');
500 / 14pxmono
--color-accent: #6366F1
400 / 12pxmono
SECTION LABEL
600 / 10pxmono upper

Spacing & Border Radius

Consistent spacing and radius scales create visual rhythm across every component.

Border Radius
8px
--radius-sm
12px
--radius-md
16px
--radius-lg
9999px
--radius-full
Spacing Scale

Shadows

Three elevation levels for dark mode, with lighter variants for light theme.

Dark Mode
Small
0 1px 2px rgba(0,0,0,.4)
Medium
0 4px 12px rgba(0,0,0,.5)
Large
0 8px 32px rgba(0,0,0,.6)
Light Mode
Small
0 1px 2px rgba(0,0,0,.06)
Medium
0 4px 12px rgba(0,0,0,.08)
Large
0 8px 32px rgba(0,0,0,.12)

Component Patterns

Reusable component recipes used throughout the stitchwand interface.

Component Library

Cards

Surface containers with subtle borders and optional gradient top border on hover.

bg-surface/40 border border-border rounded-xl

Card Title
Card body content here.

Buttons

Three button variants: Primary (filled), Ghost (transparent), and Outline (bordered).

Inputs

Dark-field inputs with subtle borders. Focus state highlights with accent color.

bg-bg-2 border-border rounded-lg focus:border-accent

Badges & Pills

Rounded-full pills for status, tags, and categories. Four semantic variants.

Accent Success Warning Error

Glass Morphism

Frosted-glass overlays for modals, popovers, and floating panels.

backdrop-blur-xl bg-surface/60

Frosted glass panel with backdrop blur

Transitions

Standard easing for all interactive state changes. Consistent timing creates a cohesive feel.

0.2s cubic-bezier(0.4, 0, 0.2, 1)

Hover any element on this page to see the standard transition curve in action.

Animation

Motion design principles for micro-interactions and page transitions.

Page Transitions

Framer Motion fade + translateY entrance. Pages slide up 8px while fading in over 300ms.

initial={{ opacity: 0, y: 8 }}

Staggered Lists

Child items enter sequentially with 40-60ms stagger delay. Creates a cascade effect for grids and lists.

staggerChildren: 0.04

Hover States

150-200ms transition with standard ease. Scale, color, and elevation changes feel immediate but smooth.

transition: all 0.15s ease

Pulse Glow

Notification indicators use a pulsing glow animation. Accent-colored ring scales between 1x and 1.5x.

animation: pulse 2s infinite

Aurora Gradients

Hero backgrounds use slowly moving liquid aurora gradients. Radial gradients shift position over 15-20s loops.

animation: aurora 20s ease infinite

Skeleton Loading

Content placeholders shimmer with a traveling gradient highlight from left to right over 1.5s.

animation: shimmer 1.5s infinite

DESIGN.md Integration

How the stitchwand design system maps to the DESIGN.md format consumed by Google Stitch and AI design agents.

Design Systems Manager

Token Mapping

Each design system section maps directly to a DESIGN.md token category. stitchwand reads and writes these tokens through @stitchwand/core using convert(), validate(), and diff().

Color Palette colors
Typography typography
Spacing Scale spacing
Border Radius radii
Shadows shadows
Components components

Theme Modes

The design system supports dual themes declared as modes: [dark, light] in DESIGN.md. Token values resolve differently per mode, enabling automatic theme switching through Stitch's mode resolution engine.

Google Stitch Usage

When connected to Google Stitch, these tokens are ingested as a DesignSystem object. Stitch uses the token collection to enforce consistency across generated UI, validate designs against the system, and produce accurate diffs when tokens change. The MCP server at @stitchwand/mcp-server exposes these operations to AI agents.