Spacing · Radii · Shadows · Motion

The rhythm rules. A 4/8 base unit, two radii tiers (crisp for product, generous for editorial), soft warm shadows, and two timing curves.

Scale

Spacing

--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
--space-996px — section pad
Yuqin card · 40px padding
Storied Capsule

Cards breathe. Generous padding is the single biggest visual signature of the portfolio.

CommenHers card · 24px padding
Continuum Daypack

Tighter padding. Product density wins — every card fits three lines of spec below the image.

Corners

Radii

sm
--radius-sm
8px
md
--radius-md
16px
lg
--radius-lg
24px
xl
--radius-xl
32px
2xl
--radius-2xl
40px
pill
--radius-pill
999px

Use 32–40px for Yuqin cards/panels (editorial feel), 12–24px for CommenHers cards, pill for buttons and tag chips on both.

Depth

Shadows

Resting
--shadow-sm

Cards at rest, lifted slightly from the cream page. Warm brown cast, never neutral gray.

Hover
--shadow-md

One tier up on hover or when active. Paired with a 1px translate-Y lift.

Hero / panel
--shadow-lg

The hero stage and focused section only. Deep soft cast, no hard edges.

CommenHers glow
0 10px 32px rgba(0,0,0,.08), 0 8px 22px rgba(22,163,74,.14)

Reserved for the hero snapshot card and featured pricing tier. Double-layered: a flat black drop, plus a green-tinted diffusion that reads as "alive" rather than floating.

Motion

Easing & Duration

Out-Expo (snap)
cubic-bezier(0.22, 1, 0.36, 1)
620ms section-in
Out-Soft (settle)
cubic-bezier(0.25, 0.46, 0.45, 0.94)
400ms reveal

Two curves do the whole job. Expo for decisive arrivals (section transitions, the Persona-5 slash sweep, active-state toggles); Soft for ambient reveals and hover tweens. Durations: 180ms micro, 320ms mid, 620ms hero/section.