dfmsolutions/AOS
1
0 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)

Browse Source 
Real IMAP connection via imapflow library:
- Connects to IMAP server (IMAPFlow, TLS on port 993)
- Fetches recent messages (configurable limit, default 20)
- Extracts: from, fromEmail, subject, date, snippet (200 chars)
- Thread-to-contact matching (PRD §6.1):
  1. Match sender email against persons table
  2. If no person match, extract domain and match against company.website
  3. Returns matchedCompany + matchedPerson for each email
- Audit-logged (action: crm.mailsync:imap)
- Zod validated (host, port, user, password, folder, limit)
- 502 on IMAP connection failure with detail
- 400 on validation failure

Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
This commit is contained in:
Z User committed 2026-10-27 22:50:50 +00:00
1 parent 7acc0c5451
commit e45b68bb8b
1089 files changed
+260614
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

skills/design/design-systems/brand-inspiration/kami/DESIGN.md
Executable
+421
View File
@@ -0,0 +1,421 @@
---
version: alpha
name: Kami
description: "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)."
category: "Editorial & Print"
colors:
palette: ["#f5f4ed", "#1b365d", "#ffffff", "#e4ecf5", "#2d5a8a", "#faf9f5"]
typography:
fonts: "JetBrains Mono"
note: "Frontmatter is auto-extracted; the prose body below is the authoritative source for full tokens, components, and rules."
---
# 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:
- `<html lang="en">` (or English-dominant content) → leave `--serif` on the EN stack. CJK glyphs that appear inline will fall through to the system Han fallback.
- `<html lang="zh-CN">` → override `--serif` to the CN stack on `:root` or on `html[lang="zh-CN"]`. Latin glyphs render via the Georgia tail of the stack.
- `<html lang="ja">` → 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
<!-- Example: a single brush tag flagging the new chapter in a long doc -->
<span class="tag brush">New · Edition 02</span>
```
### 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
<div class="section-head">
<p class="section-num">01</p> <!-- ink-blue, 14px serif, tracking 0.4px -->
<h2 class="section-title">Color</h2> <!-- 32px serif 500 -->
<p class="section-lede">Optional one-line description in olive.</p>
</div>
```
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
<div class="metric">
<div class="metric-value">8.4×</div> <!-- serif 500 24px ink-blue, tabular-nums -->
<div class="metric-label">faster ship</div> <!-- serif 12px olive -->
</div>
```
Numbers always sit in `font-variant-numeric: tabular-nums` so adjacent metrics align.
### Lists
```css
ul.dash {
list-style: none; padding: 0;
}
ul.dash li {
position: relative; padding-left: 14px;
}
ul.dash li::before {
content: "\2013"; /* en-dash, ink-blue */
position: absolute; left: 0;
color: var(--brand);
}
```
Bullets are en-dashes in ink-blue, never filled discs.
### Code block
```css
.code {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 14px;
font: 12px/1.55 var(--mono);
color: var(--near-black);
white-space: pre;
}
.code .k { color: var(--brand); } /* keyword */
.code .c { color: var(--stone); } /* comment */
```
## 5. Layout Principles
### Page geometry (print A4)
| Document | Top | Right | Bottom | Left |
|---|---|---|---|---|
| Resume (dense) | 11mm | 13mm | 11mm | 13mm |
| One-Pager | 15mm | 18mm | 15mm | 18mm |
| Long Doc | 20mm | 22mm | 22mm | 22mm |
| Letter | 25mm | 25mm | 25mm | 25mm |
| Portfolio | 12mm | 15mm | 12mm | 15mm |
Rule: **denser = smaller margins, more formal = larger margins.**
### Web / screen pages
- Max content width: `1120px`, centered, with `padding: 88px 64px 120px` on desktop.
- Section gap: `72px` between top-level sections.
- Card-grid columns: 2 by default at desktop; collapse to 1 below 768px.
- Table columns sized in absolute px (not %), so kami tables don't reflow into spaghetti.
### Slides (1920×1080)
- Four-side padding baseline: `--slide-pad: 80px`.
- Padding-top of a content slide: 72–80px (print is 96–120px; slides are more compact).
- Sizing follows the surface ratios from §3 ("Hierarchy"): macro tokens × 1.6, micro tokens × 0.6 against the print pt baseline.
- Cover and chapter slides may flip background to ink-blue (`#1B365D`) with ivory text; everything else stays on parchment.
## 6. Depth & Elevation
Three sanctioned levels — that is the entire system:
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (0) | No shadow, no border | Body text, manifesto, paragraphs on parchment |
| Ring (1) | `1px solid var(--border)` or `0 0 0 1px var(--brand)` | Cards, primary buttons, table edges |
| Whisper (2) | `0 4px 24px rgba(0,0,0,0.05)` | Hovered cards, lifted hero containers, screenshots |
Forbidden:
- Hard drop shadows (`0 12px 40px rgba(0,0,0,0.25)` and the like) — the page is paper, not a UI panel
- Neumorphism, glassmorphism, backdrop-filter blurs
- Multi-layer composite shadows
### Border radius scale
`2px → 4px → 6px → 8px (default) → 12px → 16px`. Tags hover at 2–4px, buttons and cards at 8px, featured / hero containers at 12–16px. Anything above 16px is reserved for cover-slide visuals.
## 7. Do's and Don'ts
### Do
- Use parchment (`#f5f4ed`) as the page background — the warm cream tone *is* the kami personality.
- Use a single serif weight (500) for every heading; let size carry hierarchy.
- Use ink-blue (`#1B365D`) only for primary CTAs, section numbers, links, the left rule of a quote, and the W500 in metrics.
- Keep every gray warm (yellow-brown undertone). When in doubt, sample with `R ≈ G > B`.
- Use ring shadows or whisper shadows for elevation; never hard drops.
- Set tag backgrounds as solid hex pre-blended over parchment, never `rgba()`.
- Set numbers in `font-variant-numeric: tabular-nums`.
- Pair the section number with the section title in the same serif — no eyebrow needed.
- Default bullets to ink-blue en-dashes (`–`).
### Don't
- Don't use `#ffffff` as page background, anywhere.
- Don't introduce a second accent color or a chromatic gradient.
- Don't use cool blue-grays (`slate-*`, `#f3f4f6`, `#6b7280`). Every neutral is warm.
- Don't use bold (700+) on serif — weight 500 is the ceiling.
- **Don't use italic anywhere.** No `font-style: italic`. Swap to ink-blue or a tag instead.
- Don't use sans-serif for headlines or body — sans is reserved for eyebrows, switchers, and small labels (and the sans stack literally equals the serif stack).
- Don't drop body line-height below 1.4 or push it above 1.55 — that range *is* kami's reading rhythm.
- Don't use round-disc bullets, drop shadows, or pill-shaped chips with heavy borders.
- Don't apply `backdrop-filter`, `mix-blend-mode`, or any modern compositing trick — the system targets print fidelity.
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Phone | < 768px | Single column. Hero 46px, section title 24px, manifesto 17px. Card padding drops to 20px 16px. Hide `.hero-tokens` row. |
| Tablet | 768–979px | Most 2-col grids hold; switch tag tints from 5 to 3 columns. |
| Desktop | ≥ 980px | Full 2-col / 4-col grids, JA gets `white-space: nowrap` rescue rules on long ledes. |
### Touch targets
- Buttons keep `8 14px` padding minimum.
- Tap targets stay above 44×44 by giving cards generous internal padding rather than oversizing chrome.
### Print
- `@page { size: A4; margin: 14mm 16mm; background: #f5f4ed; }`.
- Section, hero, family, comp, swatch, tint, quote, blockquote, pre, tr, anti-pattern blocks all use `break-inside: avoid` so kami pages don't snap mid-card.
- `-webkit-print-color-adjust: exact` is required so the parchment background actually reaches paper.
## 9. Agent Prompt Guide
### Quick Color Reference
- Page Background: "Parchment (#f5f4ed)"
- Card Surface: "Ivory (#faf9f5)"
- Brand / CTA: "Ink Blue (#1B365D)"
- Primary Text: "Near Black (#141413)"
- Secondary Text: "Dark Warm (#3d3d3a)"
- Subtext / Caption: "Olive (#504e49)"
- Tertiary / Meta: "Stone (#6b6a64)"
- Border: "Border (#e8e6dc)"
- Tag fill (default): "#E4ECF5 solid (NOT rgba)"
### Example Component Prompts
- "Build a kami one-pager hero on Parchment (#f5f4ed). Eyebrow row in 12px sans uppercase Stone (#6b6a64), letter-spacing 1.2px. Headline in serif 500 at 96px Near Black (#141413), line-height 1.05, letter-spacing -1.2px. Tagline below in serif 500 at 21px Olive (#504e49)."
- "Design a kami section header. A two-line stack: section number `01` in serif 500 at 14px Ink Blue (#1B365D) tracking 0.4px, then the title in serif 500 at 32px Near Black. Optional lede in serif 500 at 16px Olive."
- "Render a kami metric row of three metrics. Each metric is a vertical pair: value in serif 500 at 24px Ink Blue with `font-variant-numeric: tabular-nums`, label in 12px Olive. Gap between metrics: 28px."
- "Build a kami card on Ivory (#faf9f5) with 1px Border (#e8e6dc), 8px radius, 28px padding. Title in serif 500 at 16px Near Black. Hint underneath in 12px mono Stone. On hover, add a whisper shadow `0 4px 24px rgba(0,0,0,0.05)`. No transform, no color shift."
- "Build a kami slide cover at 1920×1080. Background ink-blue (#1B365D). Centered title in serif 500 at 96px Ivory (#faf9f5). Below, a 1px ivory rule, 96px wide. Author and date below in serif 500 at 18px Ivory at 70% opacity."
### Iteration Guide
1. **Start by checking the gray temperature.** If a gray reads cool, the design is no longer kami. Replace with the warm ramp.
2. **Audit the accent.** If ink-blue covers more than ~5% of the visible surface, reduce — push elements back to Olive or Dark Warm.
3. **Audit weight.** Any weight above 500 on serif is wrong. Replace with weight 500 and let size carry the contrast.
4. **Audit italic.** No italic, ever. Swap to ink-blue color or a small tag.
5. **Audit shadows.** If a shadow is visible at a glance, it's too strong. The only shadows are 1px rings and the `0 4px 24px rgba(0,0,0,0.05)` whisper.
6. **Tag fills must be solid hex.** If you wrote `rgba(27, 54, 93, 0.18)`, replace with `#E4ECF5`.
7. **Numbers tabular-nums.** Any column of numbers without `font-variant-numeric: tabular-nums` will look wrong on a print render.
8. **For slide work, halve tracking and scale macro tokens by 1.6.** Print rhythm is too loose at 1920×1080 without the adjustment.
## Attribution
Aesthetic inspiration drawn from [tw93/kami](https://github.com/tw93/kami) (MIT, © Tw93 and contributors). kami is a Claude skill for typesetting professional documents and slide decks; the tokens, type rules, and "ten invariants" above adapt its print-first design language for use as an Open Design system.
skills/design/design-systems/brand-inspiration/kami/components.html
Executable
+601
View File
@@ -0,0 +1,601 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>kami — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/kami. Every visible
token comes from tokens.css; the page itself follows kami's
print-first rules — parchment background, ink-blue accent
capped at ≤5%, serif at one weight, no italic, no rgba tints,
no hard drop shadows, no cool grays."
/>
<style>
/* :root paste — sourced verbatim from
design-systems/kami/tokens.css. Keep this block in sync
when tokens.css changes. CJK overrides (`:root[lang="zh-CN"]`,
`:root[lang="ja"]`) live in tokens.css and should be pasted
only when the artifact's <html lang="..."> matches. */
:root {
--bg: #f5f4ed;
--surface: #faf9f5;
--surface-warm: #e8e6dc;
--fg: #141413;
--fg-2: #3d3d3a;
--muted: #504e49;
--meta: #6b6a64;
--border: #e8e6dc;
--border-soft: #e5e3d8;
--accent: #1b365d;
--accent-on: #faf9f5;
--accent-light: #2d5a8a;
--accent-hover: var(--accent);
--accent-active: #142a48;
--success: #4a6b3a;
--warn: #8a6b1f;
--danger: #8a3a30;
--font-display:
Charter, Georgia, Palatino, "Times New Roman", serif;
--font-body:
Charter, Georgia, Palatino, "Times New Roman", serif;
--font-mono:
"JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
"TsangerJinKai02", "Source Han Serif SC", monospace;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 22px;
--text-2xl: 32px;
--text-3xl: 48px;
--text-4xl: 96px;
--leading-display: 1.1;
--leading-tight: 1.25;
--leading-body: 1.55;
--leading-dense: 1.4;
--tracking-display: -1.2px;
--tracking-eyebrow: 1.2px;
--tracking-label: 0.4px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-12: 48px;
--space-18: 72px;
--space-22: 88px;
--section-y-desktop: 72px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-ring-accent: 0 0 0 1px var(--accent);
--elev-raised: 0 4px 24px rgba(0, 0, 0, 0.05);
--focus-ring: 0 0 0 2px var(--accent-active);
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--container-max: 1120px;
--container-gutter-desktop: 64px;
--container-gutter-tablet: 32px;
--container-gutter-phone: 16px;
--tag-bg-faint: #eef2f7;
--tag-bg-soft: #e4ecf5;
--tag-bg-base: #d6e1ee;
--tag-bg-strong: #d0dce9;
}
/* ─── Reset (minimal) ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
/* Print fidelity — kami is page-first. The on-screen render
still benefits from the same color-adjust hint so background
parchment doesn't get optimized away in print preview. */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
strong { font-weight: 500; } /* kami forbids synthetic bold (>500) */
em, i { font-style: normal; } /* kami forbids italic — keep upright */
/* ─── Layout primitives ─────────────────────────────────────── */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-gutter-desktop);
}
section {
padding-block: var(--section-y-desktop);
}
section + section {
border-top: 1px solid var(--border);
}
@media (max-width: 1023px) {
.container { padding-inline: var(--container-gutter-tablet); }
section { padding-block: var(--section-y-tablet); }
}
@media (max-width: 639px) {
.container { padding-inline: var(--container-gutter-phone); }
section { padding-block: var(--section-y-phone); }
}
/* ─── Typography ────────────────────────────────────────────── */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
margin: 0;
}
h1 {
font-size: var(--text-4xl);
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
}
h2 {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
letter-spacing: 0.4px;
}
h3 {
font-size: var(--text-lg);
line-height: 1.3;
}
p { margin: 0; }
.lede {
font-size: var(--text-md);
line-height: var(--leading-body);
color: var(--muted);
}
.body-muted { color: var(--muted); }
.body-meta { color: var(--meta); font-size: var(--text-sm); }
.body-sm { font-size: var(--text-sm); }
/* `.eyebrow` is the only place sans is used (and "sans" literally
equals serif here per DESIGN.md §3 — kami has no separate
sans family). Uppercase + tracking 1.2px — well above the
craft 0.06em floor. */
.eyebrow {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1;
color: var(--meta);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
/* Section number pattern — DESIGN.md §4: the number IS the
marker. No underline, no left bar, no eyebrow. Same serif
as the title, ink-blue, 14px. */
.section-num {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-base);
color: var(--accent);
letter-spacing: var(--tracking-label);
font-variant-numeric: tabular-nums;
margin-block-end: var(--space-3);
}
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
/* ─── Buttons ───────────────────────────────────────────────
* kami buttons use `box-shadow: 0 0 0 1px ...` as the edge
* instead of border, so the rectangle aligns perfectly with
* the fill. Hover lifts via whisper shadow only — no color
* shift, no transform. This is kami's elevation-led
* interaction, encoded in tokens. */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 8px 14px;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
line-height: 1;
letter-spacing: var(--tracking-label);
cursor: pointer;
text-decoration: none;
transition:
box-shadow var(--motion-base) var(--ease-standard);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn-primary {
background: var(--accent);
color: var(--accent-on);
box-shadow: var(--elev-ring-accent);
}
.btn-primary:hover {
/* Layered: ring stays as edge; whisper adds lift. */
box-shadow: var(--elev-ring-accent), var(--elev-raised);
}
.btn-secondary {
background: var(--surface-warm);
color: var(--fg-2);
box-shadow: var(--elev-ring);
}
.btn-secondary:hover {
box-shadow: var(--elev-ring), var(--elev-raised);
}
.btn-ghost {
background: transparent;
color: var(--accent);
box-shadow: var(--elev-ring-accent);
}
.btn-ghost:hover {
box-shadow: var(--elev-ring-accent), var(--elev-raised);
}
/* ─── Cards ─────────────────────────────────────────────────
* Cards lift one shade above bg (ivory on parchment). 1px
* hairline border + whisper shadow on hover — no transform,
* no brightness shift. */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-7) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: box-shadow var(--motion-base) var(--ease-standard);
}
.card:hover {
box-shadow: var(--elev-raised);
}
/* ─── Tags / chips ──────────────────────────────────────────
* Solid hex backgrounds, NEVER rgba — print renderers double-
* paint alpha. The pre-blends live as --tag-bg-* tokens.
* radius is 2px, 4px max — kami forbids pill chips with heavy
* borders. */
.tag {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-sm);
line-height: 1;
color: var(--accent);
letter-spacing: var(--tracking-label);
padding: 4px 8px;
border-radius: var(--radius-xs);
background: var(--tag-bg-soft);
}
.tag-faint { background: var(--tag-bg-faint); }
.tag-strong {
background: var(--tag-bg-strong);
padding: 4px 10px;
border-radius: var(--radius-sm);
}
/* ─── Quote ─────────────────────────────────────────────────
* Left rule in ink-blue, olive body, 1.55 line-height. The
* single place letter-spacing 0.05em earns its keep. */
.quote {
border-left: 2px solid var(--accent);
padding: var(--space-1) 0 var(--space-1) var(--space-3);
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-md);
line-height: var(--leading-body);
color: var(--muted);
letter-spacing: 0.05em;
}
/* ─── Metric (DESIGN.md §4) ─────────────────────────────────
* Big ink-blue value with tabular-nums so columns of metrics
* align across the row; olive label below. */
.metric {
display: flex;
flex-direction: column;
gap: 2px;
}
.metric-value {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-xl);
line-height: 1.1;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.metric-label {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--text-sm);
color: var(--muted);
}
/* ─── Dash list (DESIGN.md §4) ──────────────────────────────
* Bullets are en-dashes in ink-blue. Never filled discs. */
ul.dash {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
ul.dash li {
position: relative;
padding-left: var(--space-4);
line-height: var(--leading-body);
}
ul.dash li::before {
content: "\2013"; /* en-dash */
position: absolute;
left: 0;
color: var(--accent);
}
/* ─── Code block ────────────────────────────────────────────
* Ivory bg + hairline border + warm fg. Mono font has CJK
* fallback so labels in CJK code don't render as boxes. */
.code {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--leading-body);
color: var(--fg);
white-space: pre;
overflow-x: auto;
}
.code .k { color: var(--accent); } /* keyword */
.code .c { color: var(--meta); } /* comment */
/* ─── Links ─────────────────────────────────────────────────
* Default link color is ink-blue. Underline on hover at
* generous offset so the rule reads as a deliberate gesture,
* not a default. */
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ─── Section-specific layout ───────────────────────────── */
.hero {
padding-block: var(--space-22) var(--space-18);
}
.hero h1 { margin-block-end: var(--space-6); max-width: 14ch; }
.hero .lede { max-width: 56ch; }
.hero-actions {
display: flex;
gap: var(--space-3);
margin-block-start: var(--space-8);
}
.metric-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-12);
}
@media (max-width: 639px) {
.metric-row { grid-template-columns: 1fr 1fr; }
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-block-start: var(--space-8);
}
@media (max-width: 767px) {
.features-grid { grid-template-columns: 1fr; }
}
.quote-block {
max-width: 56ch;
margin-block-start: var(--space-6);
}
</style>
</head>
<body>
<main class="container">
<!-- ════════════════════════════════════════════════════════════
HERO — exercises: section-num pattern, h1 (96px serif at
tracking -1.2px), .lede, .btn-primary (ring-shadow edge),
.btn-secondary (warm-sand bg), .tag (solid hex). The grid
is single-column intentionally — kami heroes don't use
asymmetric two-column layouts; the page IS the column.
═══════════════════════════════════════════════════════════════ -->
<section class="hero" data-od-id="hero">
<p class="section-num">00 · Reference</p>
<h1>One paper, set carefully, can hold every brand decision.</h1>
<p class="lede">
A token system distilled from the kami print rules: warm
parchment canvas, single ink-blue accent capped under five
percent of the page, serif at one weight. The fixture you
are reading uses the same token block agents paste into
every artifact.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">View tokens</a>
<a href="./DESIGN.md" class="btn btn-secondary">
Read the spec
</a>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
METRICS — exercises: .metric pattern with tabular-nums
values, ink-blue at the W500 weight, olive label. Numbers
describe the fixture itself, not invented claims.
═══════════════════════════════════════════════════════════════ -->
<section data-od-id="metrics">
<p class="section-num">01</p>
<h2>Schema in numbers</h2>
<div class="metric-row" style="margin-block-start: var(--space-8)">
<div class="metric">
<div class="metric-value">42</div>
<div class="metric-label">tokens in :root</div>
</div>
<div class="metric">
<div class="metric-value">3</div>
<div class="metric-label">font stacks (EN · zh · ja)</div>
</div>
<div class="metric">
<div class="metric-value">≤5%</div>
<div class="metric-label">accent surface cap</div>
</div>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
FEATURE CARDS — exercises: .card (ivory bg, hairline
border, whisper shadow on hover), h3, body text, dash list,
tag (solid hex bg).
═══════════════════════════════════════════════════════════════ -->
<section data-od-id="components">
<p class="section-num">02</p>
<h2>What this fixture exercises</h2>
<div class="features-grid">
<article class="card">
<span class="tag tag-faint">Surface</span>
<h3>Three-tier surface ramp</h3>
<p class="body-muted body-sm">
Parchment for the page, ivory for cards, warm sand for
secondary buttons. Cards lift one half-shade above the
page; the contrast is what gives them edge without a
shadow.
</p>
<ul class="dash body-sm">
<li>--bg covers the page</li>
<li>--surface lifts containers</li>
<li>--surface-warm fills secondary controls</li>
</ul>
</article>
<article class="card">
<span class="tag">Accent</span>
<h3>One color, two states</h3>
<p class="body-muted body-sm">
Ink blue is the only chromatic move. Hover holds the
same color — kami expresses lift through elevation, not
brightness. Active darkens by a hand-picked value, not a
formula.
</p>
<ul class="dash body-sm">
<li>--accent appears at most twice on this page</li>
<li>--accent-hover identical to --accent</li>
<li>Active state is a hand-picked deeper ink</li>
</ul>
</article>
<article class="card">
<span class="tag tag-strong">Type</span>
<h3>One weight does the work</h3>
<p class="body-muted body-sm">
Serif at weight 500 carries every heading. There is no
bold, no italic, no second face. Hierarchy comes from
size, tracking, and color — never from another type
family.
</p>
<ul class="dash body-sm">
<li>--font-display equals --font-body equals serif</li>
<li>Display tracking compresses (-1.2px at 96px)</li>
<li>Eyebrow tracking opens (1.2px on uppercase)</li>
</ul>
</article>
<article class="card">
<span class="tag">Elevation</span>
<h3>Ring before whisper before drop</h3>
<p class="body-muted body-sm">
Three sanctioned levels. A 1px hairline ring is the
default edge; a 4-24-rgba whisper appears only on hover.
The schema reserves --elev-ring as a first-class level so
brands like this one don't have to misuse --elev-raised
for hairlines.
</p>
</article>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
QUOTE + CODE — exercises: .quote (left rule in ink-blue),
.code with .k / .c spans, link.
═══════════════════════════════════════════════════════════════ -->
<section data-od-id="quote">
<p class="section-num">03</p>
<h2>The token block, in full</h2>
<div class="quote-block">
<blockquote class="quote">
kami is not a UI framework. It is a constraint system for
the page, designed to keep deliverables stable, clear, and
unmistakably printed.
</blockquote>
</div>
<pre class="code" style="margin-block-start: var(--space-8)"><span class="c">/* Paste this block into the first &lt;style&gt; of every kami artifact. */</span>
<span class="k">:root</span> {
<span class="c">/* Surface */</span>
<span class="k">--bg</span>: <span>#f5f4ed</span>;
<span class="k">--surface</span>: <span>#faf9f5</span>;
<span class="k">--accent</span>: <span>#1b365d</span>;
<span class="c">/* … 38 more, see tokens.css */</span>
}</pre>
<p class="body-meta" style="margin-block-start: var(--space-4)">
Full reference at
<a href="./tokens.css">tokens.css</a> ·
spec at
<a href="./DESIGN.md">DESIGN.md</a>
</p>
</section>
</main>
</body>
</html>
skills/design/design-systems/brand-inspiration/kami/tokens.css
Executable
+272
View File
@@ -0,0 +1,272 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/kami/tokens.css
*
* Structured token bindings for "kami / 紙 / 纸" — a print-first
* editorial system: warm parchment canvas, single ink-blue accent,
* serif at one weight (500), no italic, no cool grays.
*
* This file pre-compiles the values described in `DESIGN.md` into
* the schema shared with all OD design systems. Two paste paths:
*
* 1. Agents generating an artifact for kami should paste the
* :root block verbatim into the first <style> of the artifact,
* then reference everything via var(--*).
* 2. The optional `:root[lang="zh-CN"]` and `:root[lang="ja"]`
* blocks below override --font-display / --font-body for
* Chinese and Japanese typesetting. Include them only when
* the artifact's <html lang="..."> matches; otherwise drop
* to keep the paste minimal.
*
* Schema notes (kami pushed the schema in five places — see comments
* inline tagged "#Gap N" for the matching item in the design log):
* #Gap 1 — 4-level foreground ramp (--fg / --fg-2 / --muted / --meta)
* #Gap 2 — 3-level surface (--bg / --surface / --surface-warm)
* #Gap 3 — 2-level border (--border / --border-soft)
* #Gap 4 — accent-hover binds to value, not formula
* #Gap 5 — ring elevation as a first-class level (--elev-ring)
*
* Brand-specific extensions (NOT part of the shared schema, only in
* kami because of print-fidelity needs — see DESIGN.md §2 "Tag tints"):
* --tag-bg-soft / --tag-bg-base / --tag-bg-strong — solid-hex
* pre-blends of ink-blue over parchment, replacing rgba/color-mix
* tints because print renderers double-paint alpha fills.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels — #Gap 2) ────────────────────────────────
* Warm parchment canvas; cards lift one half-shade brighter to
* ivory; secondary interactive surfaces drop to warm-sand. Never
* #ffffff anywhere — the cream tone *is* kami's identity.
* `--surface-warm` is new in the shared schema; brands without a
* tertiary surface tier should alias it to var(--surface). */
--bg: #f5f4ed; /* parchment — page background */
--surface: #faf9f5; /* ivory — cards, lifted containers */
--surface-warm: #e8e6dc; /* warm sand — default button bg, secondary surfaces */
/* ─── Foreground ramp (4 levels — #Gap 1) ───────────────────────
* kami's text uses four named levels — primary / secondary /
* subtext / metadata. Cool blue-grays are forbidden everywhere;
* each token below has the warm yellow-brown undertone (R ≈ G > B)
* the brand requires.
*
* `--fg-2` and `--meta` are new in the shared schema; brands that
* only differentiate two levels should alias these to var(--fg)
* and var(--muted). */
--fg: #141413; /* near-black — primary text, slight olive warmth */
--fg-2: #3d3d3a; /* dark warm — secondary text, table headers */
--muted: #504e49; /* olive — subtext, captions */
--meta: #6b6a64; /* stone — tertiary, dates, metadata */
/* ─── Border (2 levels — #Gap 3) ────────────────────────────────
* Primary border for card edges and section dividers; soft border
* for inner row separators that should not visually compete.
* `--border-soft` is new in the shared schema; brands with one
* border tier should alias it to var(--border). */
--border: #e8e6dc;
--border-soft: #e5e3d8;
/* ─── Accent ─────────────────────────────────────────────────────
* The single chromatic move. CTAs, section numbers, link text,
* the left rule of a quote, the W500 weight in a metric. Hard
* cap of ≤5% of any surface area (DESIGN.md §2). */
--accent: #1b365d; /* ink blue */
--accent-on: #faf9f5; /* ivory — fg when accent is the bg (NOT pure white) */
--accent-light: #2d5a8a; /* brighter variant — links on dark surfaces only */
/* ─── Accent states (#Gap 4) ────────────────────────────────────
* kami treats --accent-hover and --accent-active as VALUE
* bindings, not formula derivations. Ink blue is already deep;
* mixing further black makes hover invisible. The brand instead
* expresses hover through elevation (whisper shadow) and keeps
* the color identical. Active darkens slightly via a hand-picked
* value, not a formula.
*
* Schema rule: every brand provides --accent-hover and
* --accent-active. Default's brand uses a black-mix formula;
* kami uses identity / hand-picked. Both satisfy the contract. */
--accent-hover: var(--accent); /* color-stable; hover via elevation */
--accent-active: #142a48; /* hand-picked, ~12% darker ink */
/* ─── Semantic ───────────────────────────────────────────────────
* kami's DESIGN.md doesn't specify success/warn/danger because the
* system is print-first and rarely renders status. We bind them to
* desaturated warm hues that survive parchment without breaking
* the "single chromatic move" rule. Use sparingly; kami artifacts
* almost never need these. */
--success: #4a6b3a; /* warm forest — toned down for parchment */
--warn: #8a6b1f; /* burnt sienna */
--danger: #8a3a30; /* warm terracotta — never tailwind red */
/* ─── Typography ─────────────────────────────────────────────────
* Default to English Charter stack on :root. The `:root[lang]`
* blocks below override for CN and JA. `--font-body` and
* `--font-display` are equal — kami uses a single serif weight
* (500) and lets size carry hierarchy.
*
* Sans is reserved for eyebrows, switchers, small labels — it
* literally equals the serif stack, so there is no separate
* sans token. */
--font-display:
Charter, Georgia, Palatino, "Times New Roman", serif;
--font-body:
Charter, Georgia, Palatino, "Times New Roman", serif;
--font-mono:
"JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
"TsangerJinKai02", "Source Han Serif SC", monospace;
/* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
* kami runs lighter on the small end and heavier on the display
* end than default's 12–64 — print rhythm needs both 11px captions
* and 96px hero display.
*
* `--text-md` (15px) is a brand-specific extension — kami needs an
* in-between size for ledes that the schema's --text-base (body)
* and --text-lg (H3) ramp doesn't supply. Generic cross-brand
* components must NOT reference --text-md; only kami's own
* components.html consumes it. Promote to schema if a second
* brand reports the same need. */
--text-xs: 11px;
--text-sm: 12px;
--text-base: 14px; /* body — print-dense */
--text-md: 15px; /* brand-specific — lede / large body */
--text-lg: 17px; /* H3 */
--text-xl: 22px; /* H2 */
--text-2xl: 32px; /* section title */
--text-3xl: 48px; /* CJK display ceiling */
--text-4xl: 96px; /* EN hero / cover slide title */
/* kami's line-height envelope is 1.10–1.55, narrower than default's */
--leading-display: 1.1; /* hero, H1, H2 */
--leading-tight: 1.25; /* section title */
--leading-body: 1.55; /* reading body */
--leading-dense: 1.4; /* resume / one-pager */
/* Letter-spacing rules from DESIGN.md §3. EN body is 0; CN/JA
* override below. Display tracking is negative (compresses
* 96px hero); eyebrow tracking is positive (uppercase labels). */
--tracking-display: -1.2px; /* applied to 96px hero only */
--tracking-eyebrow: 1.2px; /* uppercase eyebrow / overline */
--tracking-label: 0.4px; /* small uppercase labels */
/* ─── Spacing ────────────────────────────────────────────────────
* kami is print-rooted; section gaps and card paddings come from
* the layout grid in DESIGN.md §5, not the 4px web-grid that
* default uses. We keep the same token names but rebind values
* to kami's actual rhythm. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px; /* card interior */
--space-8: 32px;
--space-12: 48px;
--space-18: 72px; /* section gap (web) */
--space-22: 88px; /* page top padding (web) */
/* Web page geometry (DESIGN.md §5) */
--section-y-desktop: 72px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
/* ─── Radius ─────────────────────────────────────────────────────
* `2px → 4px → 6px → 8px → 12px → 16px` per DESIGN.md §6. Tags
* sit at 2–4px; buttons and cards at 8px; featured at 12–16px. */
--radius-xs: 2px; /* tags */
--radius-sm: 4px; /* small chips */
--radius-md: 8px; /* default — buttons, cards */
--radius-lg: 12px; /* featured cards */
--radius-xl: 16px; /* hero containers */
--radius-pill: 9999px; /* avatars (rare) */
/* ─── Elevation (3 levels — #Gap 5) ─────────────────────────────
* kami forbids hard drop shadows. Three sanctioned levels:
* flat / ring (1px hairline OR 1px brand ring) / whisper. The
* shared schema gains `--elev-ring` so brands using ring shadows
* as primary elevation (kami, paper, editorial) don't have to
* rebind --elev-raised away from blur shadow.
*
* `--elev-ring-accent` is brand-specific — kami uses it as the
* edge for primary buttons (`box-shadow: var(--elev-ring-accent)`
* instead of border, to keep the rectangle perfectly aligned
* with the fill). */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-ring-accent: 0 0 0 1px var(--accent); /* brand-specific */
--elev-raised: 0 4px 24px rgba(0, 0, 0, 0.05); /* whisper */
/* ─── Focus ring ─────────────────────────────────────────────────
* kami's focus is more restrained than default's — the brand
* forbids cool-blue glows. We use a smaller ring with the active
* variant of accent. */
--focus-ring: 0 0 0 2px var(--accent-active);
/* ─── Motion ─────────────────────────────────────────────────────
* kami's hover is a 200ms whisper-shadow lift only — no transform,
* no brightness shift. Two durations, one easing. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ─────────────────────────────────────────────────────
* Web container: 1120px max, 64px gutter desktop. Print pages
* have margin tokens specific to document type (resume / one-pager
* / long-doc / letter / portfolio) — those live in the print
* skill, not in this shared token block. */
--container-max: 1120px;
--container-gutter-desktop: 64px;
--container-gutter-tablet: 32px;
--container-gutter-phone: 16px;
/* ─── Brand-specific: tag tint scale (#Gap 6) ────────────────────
* Print renderers double-paint alpha fills. kami pre-blends ink
* blue over parchment as solid hex at 5 effective alphas. These
* tokens are NOT part of the shared schema; they live here only
* because kami's rendering target needs them. Other brands tint
* with `color-mix(... transparent N%)` inline. */
--tag-bg-faint: #eef2f7; /* ≈ ink at 0.08 */
--tag-bg-soft: #e4ecf5; /* ≈ ink at 0.18 — DEFAULT tag */
--tag-bg-base: #d6e1ee; /* ≈ ink at 0.30 */
--tag-bg-strong: #d0dce9; /* ≈ ink at 0.22, denser */
}
/* ─── i18n font overrides (#Gap 7) ──────────────────────────────────
* Switch the dominant font stack based on the artifact's lang.
* Apply ONLY ONE of these blocks — the one matching <html lang="...">
* — and keep --font-mono on the EN stack since code labels stay Latin
* regardless of the document language.
*
* For multi-language artifacts (e.g. a deck with one Japanese chapter),
* keep the dominant stack on :root and scope the override on a
* wrapper element instead:
*
* section[lang="ja"] { --font-display: <JA stack>; ... }
*
* Do NOT chain all three font families inside a single font-family
* declaration — that dilutes the visual character of every page.
* ─────────────────────────────────────────────────────────────────── */
:root[lang="zh-CN"],
:root[lang="zh"] {
--font-display:
"TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
"Songti SC", "STSong", Georgia, serif;
--font-body:
"TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
"Songti SC", "STSong", Georgia, serif;
}
:root[lang="ja"] {
--font-display:
"YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
"Noto Serif CJK JP", "Source Han Serif JP",
"TsangerJinKai02", Georgia, serif;
--font-body:
"YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
"Noto Serif CJK JP", "Source Han Serif JP",
"TsangerJinKai02", Georgia, serif;
/* JA needs the lighter olive override — YuMincho strokes are thinner
* and the standard olive looks anemic against parchment. */
--muted: #4d4c48;
}