Design Taste Template

Take the taste,
not the trend.

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.

01 — Tokens

Palette is not personality

--grey-hero#6C6B67

--grey-mid#B3B3B3

--paper#EDEDEC

--ink#2C2B2B

--dark#0A0A0A

--sage#AFB9A7

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.

02 — Type scale

Display · serif · body · mono

DisplayContext before canvas

Prose · serifBeauty arrives slowly, and earns its place.

Body · sansFunction owns the structure. Aesthetics serve comprehension, never decorate over it.

Mono labelv0.65.0 · 8 packages · MIT

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.

03 — Button

Feedback, not spectacle

Primary action↓ Secondary→

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.

04 — Card

Scroll down to see it move

House Hein

2023 · Jæren Coast, NO

The number fades down a list, the image unmasks bottom-up on entry, and it drifts a few percent as you scroll. The divider is a hairline the copy sits under — nothing is boxed.

Why: a 12-column grid, image over text, with the number in mono and the description under a border-top hairline — no card chrome, no box, no shadow. On entry the image clip-path wipes open (no blur-in) and counter-scales 1.15→1.05. On scroll it drifts yPercent:-6 and skews up to 2.5° with scroll velocity. That is the "cards subtly move" feel — parallax and inertia, never a trapped scroll.

05 — Motion tokens

transform · opacity · clip-path only

--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
reveal · start "top 82–90%" · play/reverse	replays each time it re-enters from below
parallax · yPercent -6, scrub	speed difference, 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. No elastic, no bounce, no blur-in. Depth appears only on genuinely floating objects (the hero cards), via one shadow token. Everything is guarded by prefers-reduced-motion: the page reads perfectly with all motion removed.