# Design System Inspired by kami (紙 / 纸)
> Category: Editorial & Print
> Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks — anything that should feel like high-quality print rather than UI. Multilingual by design (EN · zh-CN · ja).
## 1. Visual Theme & Atmosphere
kami compresses into one sentence: **warm parchment canvas, ink-blue accent, serif carries hierarchy, no cool grays, no hard shadows.** It is not a UI framework — it is a constraint system for the page, designed to keep deliverables stable, clear, and unmistakably *printed*. The name reads as **kami / 紙 / 纸** — the same word for "paper" across Japanese and Chinese — and the system is co-designed across English, Simplified Chinese, and Japanese typesetting from the ground up, not retrofitted.
The page background is parchment (`#f5f4ed`), never pure white. Text sits on cream. The single chromatic move is ink-blue (`#1B365D`) — used on section numbers, primary CTAs, the left rule of a quote, the W500 weight in a metric. Everything else is a warm neutral with a yellow-brown undertone; cool blue-grays are absent on purpose.
Hierarchy is carried almost entirely by **serif type at a single weight (500)**. There is no bold, no italic, no second accent color. Density is achieved through tight line-heights (1.10–1.55), four-level gray ramps, and ring/whisper shadows that act as halos rather than drops. The aesthetic borrows from editorial print, technical white papers, and old typewritten correspondence — the goal is "good content on good paper," not "modern app UI."
**Key Characteristics:**
- Warm parchment canvas (`#f5f4ed`) — never `#ffffff`
- Single accent: ink-blue (`#1B365D`), covers ≤ 5% of any surface
- All grays warm (R ≈ G > B), no cool blue-grays anywhere
- Serif everywhere for hierarchy: Charter (EN), TsangerJinKai02 / Source Han Serif (CN), YuMincho (JA)
- Locked at weight 500 — no synthetic bold (700/900) and **no italic**
- Tight print rhythm (line-heights 1.10–1.55), much denser than typical web body
- Depth via 1px rings and whisper shadows (`0 4px 24px rgba(0,0,0,0.05)`), never hard drop shadows
- Tag fills are solid hex (e.g. `#E4ECF5`), never `rgba()` — print renderers double-paint alpha tags
- Numbers sit in `font-variant-numeric: tabular-nums` so columns of metrics don't shimmy
## 2. Color Palette & Roles
### Brand
- **Ink Blue** (`#1B365D`): The only chromatic color. CTAs, section numbers, link text on light surfaces, the left rule on a section title or quote, the active state of a switcher, the W500 metric value.
- **Ink Light** (`#2D5A8A`): Brighter variant, only for links sitting on dark surfaces.
> Rule: ink-blue covers ≤ **5% of document surface area**. More than that turns into ornament and the restraint collapses.
### Surface
- **Parchment** (`#f5f4ed`): The page background — warm cream, the emotional foundation. Never replace with white.
- **Ivory** (`#faf9f5`): Cards and lifted containers. Sits one half-shade brighter than parchment.
- **Warm Sand** (`#e8e6dc`): Default button background, secondary interactive surfaces.
- **Dark Surface** (`#30302e`): Dark-theme containers — warm charcoal, not slate.
- **Deep Dark** (`#141413`): Dark-theme page background. Olive-tinted near-black, never `#000000`.
### Text (four levels — no fifth)
- **Near Black** (`#141413`): Primary text. Slight olive warmth, gentler than pure black.
- **Dark Warm** (`#3d3d3a`): Secondary text, table headers, link defaults.
- **Olive** (`#504e49`): Subtext, captions, descriptions. (JA override: `#4d4c48` because YuMincho strokes are thinner.)
- **Stone** (`#6b6a64`): Tertiary — dates, metadata, meta labels.
### Border
- **Border** (`#e8e6dc`): Primary border — section dividers, card edges, table headers.
- **Border Soft** (`#e5e3d8`): Row separators, inner dividers, subtle internal lines.
### Tag tints (solid, NOT rgba)
Print renderers (WeasyPrint and friends) double-paint alpha fills, leaving a visible "double rectangle" on zoom. Tag and chip backgrounds must be solid hex, pre-blended over parchment:
| Effective alpha of `#1B365D` over parchment | Solid hex |
|---|---|
| 0.08 | `#EEF2F7` |
| 0.14 | `#E4ECF5` |
| **0.18 (default tag)** | **`#E4ECF5`** |
| 0.22 | `#D0DCE9` |
| 0.30 | `#D6E1EE` |
### Gradient System
kami is **gradient-free** by default. The only sanctioned gradient is the soft tag brush running `#D6E1EE → #E4ECF5 → #EEF2F7` left-to-right at very low contrast — used at most once per page on a single decorative tag. Do not introduce hero gradients, brand-color washes, or backdrop-filter blurs.
### Forbidden colors
- `#ffffff` as a page background
- `#000000` anywhere
- Any cool-gray surface (`#f8f9fa`, `#f3f4f6`, `slate-*`)
- Any second saturated color (no second accent — pick ink-blue or pick nothing)
## 3. Typography Rules
### Font Stacks
```css
/* English (default) */
--serif: Charter, Georgia, Palatino, "Times New Roman", serif;
/* Chinese */
--serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
"Songti SC", "STSong", Georgia, serif;
/* Japanese */
--serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
"Noto Serif CJK JP", "Source Han Serif JP",
"TsangerJinKai02", Georgia, serif;
/* Mono — must include CJK fallback so labels/comments don't render as boxes */
--mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
"TsangerJinKai02", "Source Han Serif SC", monospace;
/* Sans always equals serif. There is no separate sans-serif family. */
--sans: var(--serif);
```
### When to swap the stack
The three stacks above are **alternative values for `--serif`**, not three families layered together. When generating an artifact, set the primary stack on `:root` based on the dominant language of the content; let the browser's per-glyph fallback resolve mixed-script text inline. Concretely:
- `` (or English-dominant content) → leave `--serif` on the EN stack. CJK glyphs that appear inline will fall through to the system Han fallback.
- `` → override `--serif` to the CN stack on `:root` or on `html[lang="zh-CN"]`. Latin glyphs render via the Georgia tail of the stack.
- `` → override `--serif` to the JA stack and apply the `--olive: #4d4c48` text-color override (YuMincho strokes are thinner; the standard olive looks anemic against parchment).
- Multi-language artifacts (e.g. a deck with one Japanese chapter): set the dominant-language stack on `:root`, then scope the override on a wrapper element (`section[lang="ja"] { --serif: …; }`). Do **not** chain all three families inside a single `font-family` — that dilutes the visual character of every page.
### Hierarchy (screen, px)
The hierarchy table below is sized for **screen-rendered web pages** (resume, one-pager, portfolio shown at desktop width). For other surfaces, scale from the print pt baseline using these ratios — the same rules the kami `slides.py` template applies:
| Surface | Macro tokens (font, padding) | Micro tokens (border, radius, tracking) |
|---|---|---|
| Page / web artifact (one-pager, resume, white paper) | print pt × ~1.33 | print pt × 1 |
| Slide / 1920×1080 deck | print pt × ~1.6 | print pt × ~0.6 |
Concretely: a 22pt H1 in print becomes ~29px on a web page and ~36px on a slide; an 8pt letter-spacing value that reads as confident in print drops to ~5px on a slide. Letter-spacing always uses the slide micro ratio — print tracking applied at slide scale falls apart.
| Role | Family | Size | Weight | Line-height | Letter-spacing | Notes |
|------|--------|------|--------|-------------|----------------|-------|
| Hero / Display | serif | 96–106px | 500 | 1.05–1.10 | -1.2px | One per page max — cover or one-pager hero |
| Display CN/JA | serif | 48–64px | 500 | 1.10–1.12 | 0–0.3px | CJK glyphs need looser tracking and smaller absolute size |
| Section title | serif | 28–32px | 500 | 1.20 | 0.4px | Anchors a chapter; preceded by section number |
| H2 | serif | 22px | 500 | 1.25 | 0 | Subsection |
| H3 | serif | 17–18px | 500 | 1.30 | 0 | Item title, card heading |
| Manifesto / pull quote | serif | 20px | 400 | 1.65 | 0.05em | The one place letter-spacing earns its keep |
| Lede | serif | 15–16px | 500 | 1.55 | 0 | Intro paragraph under a section title |
| Body | serif | 14px | 400 | 1.55 | 0 (EN) · 0.35px (CN) · 0.02em (JA) | Reading body |
| Body dense | serif | 13–14px | 400 | 1.40–1.45 | 0 | Resume, one-pager, dense lists |
| Caption | serif | 12px | 500 | 1.45 | 0 | Notes, figure captions |
| Eyebrow / overline | sans | 12px | 500 | 1 | 1.2px, **uppercase** | Section eyebrow, switcher, meta header |
| Label | sans | 12px | 500 | 1.35 | 0.4px, uppercase | Small inline label, ink-blue if active |
| Mono / spec | mono | 12–13px | 400 | 1.55 | 0.4px | Hex codes, type specs, code |
### Weight rules
- Serif uses **only weights 400 and 500**. No 600, no 700, no 900.
- `strong { font-weight: 500 }` is explicitly set so browsers don't synthesize bold.
- Sans labels may use 500 or 600 at small sizes for legibility.
- **No italic anywhere.** No `font-style: italic`. If emphasis is needed, switch the color to ink-blue or wrap in a tag.
### Line-height
- Tight headline: 1.10–1.30 (display, H1, H2)
- Dense body: 1.40–1.45 (resume, one-pager, dense lists)
- Reading body: 1.50–1.55 (long-form chapters, letters)
- Label / caption: 1.30–1.40
Forbidden: 1.6+ (web rhythm, floats off the page) and 1.0–1.05 (lines collide except at giant display sizes).
### Letter-spacing
- EN body: `0`
- CN body (TsangerJinKai02): `0.35px` to compensate for the font's natural density
- JA body: `0.02em`
- All-caps overlines and small labels (< 10pt): +0.5 to +1.2px is mandatory
- Display CJK at 24px+: `0.2–1px` of optical breathing room
- On slides, tracking is roughly **half** of print values — 8px tracking that reads as confident in a printed deck disintegrates at slide scale.
### Tabular-nums contexts
`font-variant-numeric: tabular-nums` is mandatory anywhere kami numbers stack vertically or sit alongside other numbers — uneven proportional digits read as a layout bug at print resolution. Apply it to:
- Metric values (the big ink-blue number in `.metric-value`) and any side-by-side metric row
- Slide footers and slide counters (`02 / 05`), page numbers, deck pagination
- Section numbers in chapter heads (`01`, `02`, …) when they appear in a stacked TOC
- Resume dates, employment ranges, and education years
- Financial figures: revenue, ARR/MRR, valuations, tables of P&L line items
- White-paper and equity-report data tables (every numeric column)
- Stat-dashboard hero numbers and KPI grids
- Changelog version numbers (`1.4.2 → 1.4.3`) and any inline release dates
- Any inline numeric span inside a paragraph that compares values (`from 142 to 168`)
Do **not** apply tabular-nums to running prose where a single number appears mid-sentence — proportional digits read better there. The rule is "stacks and tables, yes; sentences, no."
## 4. Component Stylings
### Cards / Containers
```css
background: var(--ivory); /* never parchment — cards lift one shade */
border: 1px solid var(--border);
border-radius: 8px; /* default; featured cards 12px; hero 16–24px */
padding: 28px 28px 24px; /* component interior */
transition: box-shadow 0.2s;
/* Hover lifts via whisper shadow only — no transform, no brightness shift */
&:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
```
### Buttons
```css
.btn-primary {
background: var(--brand); /* #1B365D */
color: var(--ivory);
box-shadow: 0 0 0 1px var(--brand); /* ring shadow as edge */
padding: 8px 14px;
border-radius: 8px;
font: 500 12px/1 var(--sans);
letter-spacing: 0.4px;
}
.btn-secondary {
background: var(--warm-sand);
color: var(--dark-warm);
box-shadow: 0 0 0 1px var(--border);
}
.btn-ghost {
background: transparent;
color: var(--brand);
box-shadow: 0 0 0 1px var(--brand);
}
```
### Tags / Chips
```css
.tag {
font: 500 12px/1 var(--sans);
padding: 2px 7px;
border-radius: 2px;
color: var(--brand);
background: #EEF2F7; /* solid hex, NOT rgba */
letter-spacing: 0.4px;
}
.tag.standard { background: #E4ECF5; padding: 2px 8px; border-radius: 4px; }
/* The single sanctioned gradient — see §2 "Gradient System".
* Use at most once per page on a "featured" or "new" tag. The gradient
* runs darkest-to-lightest left-to-right so the eye reads it as a
* watercolor wash, not a button highlight. */
.tag.brush {
background: linear-gradient(to right, #D6E1EE, #E4ECF5 70%, #EEF2F7);
}
```
```html
New · Edition 02
```
### Quote
```css
.quote {
border-left: 2px solid var(--brand);
padding: 4px 0 4px 14px;
font: 500 15px/1.55 var(--serif);
color: var(--olive);
}
```
### Section title pattern
```html
01
Color
Optional one-line description in olive.
```
The number is set in the same serif as the title, in ink-blue, the same size as caption text. There is no underline, no left bar, no eyebrow — the number *is* the marker.
### Metrics
```html