00 · Reference

One paper, set carefully, can hold every brand decision.

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.

01

Schema in numbers

42
tokens in :root
3
font stacks (EN · zh · ja)
≤5%
accent surface cap

02

What this fixture exercises

Surface

Three-tier surface ramp

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.

  • --bg covers the page
  • --surface lifts containers
  • --surface-warm fills secondary controls
Accent

One color, two states

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.

  • --accent appears at most twice on this page
  • --accent-hover identical to --accent
  • Active state is a hand-picked deeper ink
Type

One weight does the work

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.

  • --font-display equals --font-body equals serif
  • Display tracking compresses (-1.2px at 96px)
  • Eyebrow tracking opens (1.2px on uppercase)
Elevation

Ring before whisper before drop

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.

03

The token block, in full

kami is not a UI framework. It is a constraint system for the page, designed to keep deliverables stable, clear, and unmistakably printed.
/* Paste this block into the first <style> of every kami artifact. */
:root {
  /* Surface */
  --bg: #f5f4ed;
  --surface: #faf9f5;
  --accent: #1b365d;
  /* … 38 more, see tokens.css */
}

Full reference at tokens.css · spec at DESIGN.md