Output Samples

Give Claude the brief: one-pagers, long docs, letters, portfolios, resumes, slides all become polished layouts from one small, reliable rule set. The same brief also travels to image renderers, with the copy-paste prompt and sample outputs in the README.

Equity Report: Tesla Q1 2026 earnings analysis

Resume: Founder CV, 2 pages

One-Pager: Kami intro, white-paper print, 1 page

Slides: Agent keynote, 6 slides

Landing Pages

Built with Kami

The same landing-page template applied to three different products. One constraint set, three distinct purposes.

Kami: Design system homepage

Luo: CJK reading font, Chinese

Mole: macOS system utility

Install & Invoke

Tell Claude what you need, for example "build me a resume", "make a one-pager for my startup", or "design a slide deck for my talk". The skill auto-triggers, no slash command needed.

# Claude Code (v2.1.142+)
/plugin marketplace add tw93/kami
/plugin install kami@kami

# Codex plugin marketplace
codex plugin marketplace add tw93/kami
codex plugin add kami@kami

Generic agents (OpenCode, Pi, and others reading from ~/.agents/): npx skills add tw93/kami/plugins/kami/skills/kami -a '*' -g -y. The subpath points at the self-contained skill package; a bare tw93/kami installs only SKILL.md.

Claude Desktop: download kami.zip, then upload it in Customize > Skills > "+" > Create skill.

Design Principles

Warm parchment canvas, ink blue as the sole accent, serif carries hierarchy, while hard shadows and flashy palettes recede. This system is built for printed matter: stable, clear, and composed. Parchment is the default; an opt-in white-paper variant prints any document on a white background while keeping the warmth in cards and tables.

1. Page background is parchment #f5f4ed, never pure white
2. Accent color is ink blue #1B365D only; no second chromatic hue
3. All grays are warm, yellow-brown undertone; no cool blue-grays
4. English uses serif for headlines and body; Chinese uses serif headlines and sans body
5. Serif body at 400, headings at 500. Avoid synthetic bold
6. Three line-height bands: tight titles 1.1-1.3 / dense 1.4-1.45 / reading 1.5-1.55
7. Tag backgrounds must be solid hex; no rgba, WeasyPrint double-rectangle bug
8. Shadows: ring or whisper only, no hard drop shadows

Warm Restraint

One accent + warm neutrals + zero cool colors. Ink blue covers no more than 5% of any page. Beyond that is clutter, not restraint.

Canvas

Parchment: Page background, the emotional foundation #F5F4ED

Ivory: Cards / elevated surfaces #FAF9F5

Warm Sand: Button default / interactive surfaces #E8E6DC

Deep Dark: Dark theme page base, not pure black #141413

Brand

Ink Blue: Primary color · CTA · quote bar · section overline #1B365D

Ink Light: Links on dark surfaces · lighter variant #2D5A8A

Dark Surface: Dark theme container · warm charcoal #30302E

Error: Error state, deep warm red #B53333

Warm Neutrals

Near Black #141413

Dark Warm #3D3D3A

Olive #504e49

Stone #6b6a64

Type System

Serif carries hierarchy, sans carries function. Serif body at 400, headings at 500.

Serif · Headlines + Body: Charter / TsangerJinKai02. Used for headlines, body text, pull quotes, and numeric emphasis.

Mono · Code: JetBrains Mono. Code blocks, version numbers, hex values, tabular figures.

Rhythm & Form

Base unit: 4pt. Denser layouts get smaller margins; more formal documents get larger ones.

Depth: Three Shadow Methods

Kami avoids traditional hard shadows. Depth comes from ring shadows, whisper shadows, and light-dark alternation.

Atomic Modules

A small fixed set, kept only where it solves a concrete document problem.

A thousand no's for every yes, prefer clarity over decoration.

Inline Charts

Seventeen inline SVG diagram types covering architecture, process, and data chart scenarios. Tell Claude which type you need and it embeds directly into the document, colors and fonts following the Kami design language.

Quick Reference

When in doubt about what to use, consult this table. If it's not here, go back to first principles.

What to Avoid

Exceptions are allowed, but the reason should be explicit.

Design Origins

I like investing in US equities and ask Claude to write research reports all the time. Every output landed in the same default-doc look: gray, flat, a different layout each session. The structure was hard to scan, the formatting felt dated, and nothing about the page made me want to keep reading. So I started fixing the typography, the palette, the spacing, one rule at a time, until the report became a page I actually enjoyed.

FAQ

What is Kami?

A constraint-based design system for AI-generated documents. One accent color, serif-led hierarchy, warm parchment canvas. Give any LLM agent a brief, get a composed layout back.

What can it produce?

Eight document templates: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, and changelogs, plus a landing-page system.