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.