Design System · v1.7.1 · 2026.06

# Kami紙

Good content deserves good paper. Kami is a layout design system for the AI era, making documents clear, readable, and memorable.

Canvas#f5f4ed Accent#1B365D SerifCharter / TsangerJinKai Sans= Serif (single font per page)

00 · See it

## 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

Portfolio

Kaku terminal portfolio, Japanese, 7 pages

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

01 · Usage

## 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
    npx skills add tw93/kami -a claude-code -g -y

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

Claude Code plugin marketplace also works on v2.1.142+: `/plugin marketplace add tw93/kami` then `/plugin install kami@kami`. Codex installs use `codex plugin marketplace add tw93/kami` then `codex plugin add kami@kami`.

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

02 · Manifesto

## 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.

1. 1

   Page background is parchment `#f5f4ed`, never pure white

2. 2

   Accent color is ink blue `#1B365D` only; no second chromatic hue

3. 3

   All grays are warm, yellow-brown undertone; no cool blue-grays

4. 4

   English uses serif for headlines and body; Chinese uses serif headlines and sans body

5. 5

   Serif body at 400, headings at 500. Avoid synthetic bold

6. 6

   Three line-height bands: tight titles 1.1-1.3 / dense 1.4-1.45 / reading 1.5-1.55

7. 7

   Tag backgrounds must be solid hex; no rgba, WeasyPrint double-rectangle bug

8. 8

   Shadows: ring or whisper only, no hard drop shadows

03 · Color

## 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

### Tag Tints: rgba to solid hex

Solid hex equivalents of ink blue `#1B365D` on parchment. Tags use solid hex instead of `rgba()` to avoid a WeasyPrint double-rectangle rendering bug.

Tag sample

0.08

#EEF2F7
Tag sample

0.14

#E4ECF5
Default Tag sample

0.18

#E4ECF5
Tag sample

0.22

#D0DCE9
Tag sample

0.30

#D6E1EE

04 · Typography

## Type System

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

Aa

Serif · Headlines + Body

Charter / TsangerJinKai02

Used for headlines, body text, pull quotes, and numeric emphasis. English uses Charter, Chinese uses TsangerJinKai02.

</>

Mono · Code

JetBrains Mono

Code blocks, version numbers, hex values, tabular figures.

### Scale (print pt; screen px = pt x 1.33)

Display
Good docs read
clear, stable, poised
36-48 pt
weight 500
line 1.10
H1 Section
Color System · Palette
18-22 pt
weight 500
line 1.20
H2 Subsection
Canvas · Warm Neutrals
14-16 pt
weight 500
line 1.25
H3 Item
Tag Tints · Solid Hex
12-13 pt
weight 500
line 1.30
Body
Ink blue covers no more than 5% of any page. Beyond that is clutter, not restraint. All grays have a yellow-brown undertone: R ≈ G > B is the rule of thumb.
9.5-10 pt
weight 400
line 1.55
Caption
Figure notes, footnotes, annotation text. Color drops to olive or stone.
8.5-9 pt
weight 400
line 1.45
Label
Design System · v1.7.1
7.5-8 pt
weight 600
line 1.35

05 · Spacing & Shape

## Rhythm & Form

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

Scale | Value | Use |
--- | --- | --- | ---
xs | 2-3 pt | Inline elements |
sm | 4-5 pt | Tag padding · tight layout |
md | 8-10 pt | Component internals |
lg | 16-20 pt | Between components · card padding |
xl | 24-32 pt | Section title margins |
2xl | 40-60 pt | Between major sections |
3xl | 80-120 pt | Between long-doc chapters |

### Radii

4 pt
Tight
6 pt
Code block
8 pt
Default card
12 pt
Container
16 pt
Feature card
24 pt
Large container
32 pt
Hero

### Depth: Three Shadow Methods

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

Ring Shadow

0 0 0 1pt var(--ring-warm)
Buttons · card hover

Whisper Shadow

0 4pt 24pt rgba(0,0,0,0.05)
Gentle elevation · feature cards

Light ⇌ Dark

parchment ⇌ deep-dark
Section-level · strongest contrast

06 · Components

## Atomic Modules

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

#### Buttons

ring shadow instead of hard drop · 8pt radius

Primary CTA Secondary Ghost

#### Tags, three levels

solid hex · pick from weak to strong

Light 0.08 Standard 0.18 Brush gradient

#### Quote

left 2pt brand solid + olive text

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

#### Metric

serif number + sans label · tabular-nums

6 Doc types
1 Accent
8 Rules

#### Section Title

serif 500 · 15pt · size-led hierarchy, no decoration

Selected Works · Projects

#### Dash List

dash instead of bullet · editorial tone

- Warm parchment, never pure white
- Ink blue accent, no second color
- Serif carries authority

#### Code Block

ivory bg + 0.5pt border + 6pt radius

    // warmth from restraint, not from color
    canvas   = parchment; accent = ink_blue
    palette  = warm_neutrals − cool_grays
    document = serif × hierarchy + generous_space
    beauty   = constraints × intention ÷ noise

#### Featured Card

whisper shadow + 16pt radius

Tesla Company Profile · One-Pager

Single A4 page · 4 metric cards + 3 body sections + timeline

English A4 x 1 Ink Blue

07 · Diagrams

## Inline Charts

Fourteen 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.

Architecture

System components and connections, one focal node

Flowchart

Decision branches, yes/no paths, focal on success

Bar Chart

Quarterly revenue comparison, gradient or single color

Donut Chart

Revenue structure breakdown, supports 3–6 segments

08 · Decision Lookup

## Quick Reference

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

Task | How
--- | ---
Large headline | serif `500`, size by hierarchy, line-height `1.10-1.30`
Reading body | serif `400`, `9.5-10 pt`, line-height `1.55`
Emphasize a number | `color: var(--brand)`, not bold
Separate two sections | `2.5pt` brand left bar, or `0.5pt` warm-gray dashed
Quote someone | Left `2pt` brand solid + olive text
Show code | Ivory bg + `0.5pt` border + `6pt` radius + mono font
Primary vs secondary | Primary: brand fill + ivory text; Secondary: warm-sand + charcoal
Mark a special card | `border: 0.5pt solid var(--brand)` or `border-left: 3pt`
Begin a section | Serif `500` · `15pt` · size-led hierarchy, no decoration needed
Document cover | Single page, Display size + right-aligned author/date + generous whitespace
Data card | Ivory bg + `8pt` radius + serif large number, ink blue + sans small label

09 · Anti-Patterns

## What to Avoid

Exceptions are allowed, but the reason should be explicit.

##### Don't

Use `#ffffff` pure white or `#f3f4f6` cool gray as page background. It makes the page feel brittle and weakens the warm parchment character.

##### Do

Always use `#f5f4ed` parchment. Set `@page background` to the same color to avoid white edges when printing.

##### Don't

Use `rgba(27,54,93,0.18)` for tags. WeasyPrint renders padding and glyph areas at different opacity, creating double rectangles.

##### Do

Use the tint lookup table for equivalent solid hex `#E4ECF5`. The rendering stays clean and the color remains stable.

##### Don't

Set headlines to `font-weight: 600` or heavier synthetic bold. Synthetic bold blurs strokes and degrades typographic quality.

##### Do

Body 400, headings 500 (real W05). For more presence, use size or a brand left bar, never synthetic bold.

##### Don't

Use hard drop shadow `0 2px 8px rgba(0,0,0,0.3)`. Visually heavy and likely to print as dark blobs.

##### Do

Ring shadow `0 0 0 1pt` or whisper `rgba 0.05`, or simply alternate light and dark sections.

10 · Background

## 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.

Later I needed to present "The Agent You Don't Know: Principles, Architecture and Engineering Practice." I already had the document and didn't want to build slides from scratch, so I used Claude Design to lay it out in my own style, tweaked it round after round, and eventually got it to a place I was happy with. That process added inline SVG charts, a unified warm palette, and a tighter editorial rhythm. It kept growing until it covered every document I regularly ship, so I kept abstracting the process, and it became kami: one quiet design system I can hand to any agent and trust the output.

11 · Questions

## 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. It also doubles as a visual brief you can hand to image renderers like Claude Design or GPT Canvas.
What can it produce?
  Nine template types: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, changelogs, and landing pages (EN + CN + KO). Plus 14 inline SVG diagram types for visual explanations. Outputs are HTML that can be exported to PDF, PNG, or editable PPTX slide decks.
How do I set it up?
  Claude Code: `npx skills add tw93/kami -a claude-code -g -y`. Plugin marketplace on Claude Code v2.1.142+: `/plugin marketplace add tw93/kami` then `/plugin install kami@kami`. Codex: `codex plugin marketplace add tw93/kami` then `codex plugin add kami@kami`. Generic agents like OpenCode: `npx skills add tw93/kami -a '*' -g -y`. Claude Desktop: download kami.zip from GitHub Releases and upload it in Customize > Skills. No slash command needed, the skill auto-triggers from natural requests.
What languages does it support?
  English, Chinese, Japanese, and Korean. Each language uses a dedicated serif font: Charter for English, TsangerJinKai02 for Chinese, YuMincho for Japanese, Source Han Serif K for Korean. Letter-spacing, line-height, and font sizes are tuned per language for print quality. Japanese and Korean are best-effort CJK paths with visual QA before delivery.