A self-contained specimen of the Aurelian design system: tokens, type, a fill-up button, a card, and the scroll motion — every choice annotated with why it exists. Copy what you need.
representation → function → surface → craft
How to use: this is one HTML file. Copy the :root token block, the button, and the card into your project. The reasoning next to each piece is the point — the taste is in the why, not the hex codes.
Why: Aurelian's section palette runs warm-grey → light greys → near-black, with one sage accent. Sage is the only color that carries state or emphasis; everything else is a neutral plane. Planes are separated by tone and hairlines — never gradients, never glass. Because there is one accent, a warm page and a dark page still read as one system.
Why: four voices, each with a job. A high-contrast display serif (Parabole / Gloock) carries the headline; Shippori Mincho carries reading prose with editorial gravity; Zen Kaku Gothic New keeps body text legible and modern; a mono face (Decima / IBM Plex) carries every label and version. The contrast between an oversized serif and tiny uppercase mono metadata is the hierarchy — no generic sans, no extra color. Letterform and voice belong to the surface layer (japanese-design); this file sets scale and rhythm.
Why: on hover a sage panel fills up from below translateY(101%→0), the label flips to ink, and the arrow reveals. Honest, structural feedback — the button visibly becomes the accent when you reach for it. No glow, no shadow, no sheen. The arrow reserves its space, so the reveal never shifts the layout. The secondary action drops to a plain underlined text link — no border box — so there is never a second thing competing to be pressed.
Why: a 7/5 split, image before copy, number in mono, description under a border-top hairline — no card chrome, no shadow, no meta padding. On entry the image clip-path wipes open (no blur-in) and counter-scales. The plate itself uses center-band scrub: clear when held, sink + soft blur when left. Structure stays a proof plate, not a floating portfolio card.
| --dur-micro · 160ms | hover, press, small state changes |
| --dur-ui · 240ms | border/tone shifts, nav theme |
| fill · 500ms · ease-fill | the button fill-up rise |
| --ease-out · cubic-bezier(.22,1,.36,1) | the working easing; ease-in for exits only |
| stagger · 40–90ms | grouped items; smaller on mobile |
| scrub · center band · reversible | clarifies near center; sinks as it leaves |
| sink + soft blur · 3–5px | recede only — never blur-in |
| line mask · --ln-y | display lines rise, then yield to the next field |
| clip-path wipe · media only | proof plates unmask once hierarchy needs it |
| parallax · yPercent -6, scrub | speed difference on media, not drama |
| Lenis · lerp 0.12 | opt-in; earned on long editorial pages |
Why: motion exists to explain hierarchy, confirm action, and guide attention — if a movement does none of those, it is deleted. Animate only transform, opacity, and short-lived clip-path. Scroll scrub is distance-from-center and reversible: the next solid section covers a field that is already receding. No elastic, no bounce, no blur-in. Depth appears only on genuinely floating objects via one shadow token. Guarded by prefers-reduced-motion: the page reads perfectly with all motion removed.