陰影Schatten · Brand Concept

Four colors, named in Japanese

Schatten’s primitives carry Japanese names. The values below are the real v1.0.0 tokens (src/core/tokens/primitives.css).

Ink runs cool, paper runs warm — at identical chroma

sumi and alabaster share the same lightness and the same chroma; only the hue differs, 250 against 70. Both read as near-neutral, yet ink tilts blue and paper tilts yellow.

All eleven steps are mirrored

This is not a fact about the -500 rung alone. Every one of the eleven steps matches in lightness and chroma; only the hue parts. Ink and paper share one ladder.

The chromatic pair rides the same ladder

Everything is defined in OKLCH. The space is perceptually uniform, so “the same lightness” holds to the eye, not merely in the arithmetic.

Eight seasons, one lightness

A season (a Special theme) swaps only the --color-theme-* ramp. Every 500 rung sits at L 64%, every 700 rung at L 46% — hue and chroma move, nothing else. The dates match the classical eight markers: the four beginnings and the two solstices and equinoxes.

Speaking two languages at once

The structure is Western engineering vocabulary — shadcn, Radix, OKLCH, BEM, CVA. The surface is Japanese aesthetic vocabulary — vermillion, ink, washi, indigo, the eight markers. Neither decorates the other.

That duality is not confined to names and colors; it is implemented in the typesetting. Both the sans and the serif role pair a Latin face with a Japanese face into a single stack. Being bilingual is the default state.

Eight sizes, six leadings

Sizes come from --text-*, leading from --leading-* — public tokens, all in rem.

Note that body / label / heading are not CSS variables. Size, leading, and weight are three properties, and a single var() cannot carry three — so the roles bind to the .st-text--* class rules instead.