Example
Blog
An editorial site in the paper-and-ink register: a filterable post grid, an article view whose table of contents tracks the window, and a living comment thread.
View sourceLight as shadow: hierarchy without weight
The premise of the system is that depth is not decoration — surfaces rest in ambient shade and hierarchy is carried by light.
- design
- craft
Square-cut controls, round vessels
方寸为章，器物为圆 — controls cut square like a seal, vessels kept round like bowls. The shape grammar carries meaning.
- design
- tokens
Density is information organization
Four density tiers scale whitespace, never type size or contrast — legibility is a floor, not an option.
- a11y
- tokens
Anatomy that agents can read
data-scope, data-part, and machine state attributes make the component tree legible to codegen and coding agents alike.
- ai
- craft
Mineral pigments: accents that hold their hue
Semantic colors are fixed pigments — bamboo, ochre, cinnabar, ultramarine — independent of the swappable accent theme.
- tokens
- design
The CSS-variable pipeline end to end
Tokens compile to custom properties; the lighting engine writes variables; component CSS only consumes. One direction, no cycles.
- tokens
- craft