WhoAmILenZ Clay System

Clay designprinciples

Soft extrusion, dual-light shadows, embossed maps, and quiet fields. How every surface in WhoAmILenZ should feel tactile — without becoming a neumorphism museum.

See on feed Motion guide

Surface ladder

Climb one step at a time. Nested content should almost always sit one level below its parent.

canvas

Page background

field · #eef1f6

neo-sm

Chips, icon wells, filter idle

4/4 dual shadow

neo / clay

Header, dock, guarantee strip

8/8 dual + hairline

clay-deep

Heroes, map cards, empty states

10/12 dual + gradient fill

inset

Inputs, zone wells, pressed

inset dual

Eight principles

Light from above-left

Dual shadows always: soft dark SE + soft light NW. This is what makes surfaces feel like clay, not flat cards with a drop-shadow.

Raised vs pressed

Raised = outer dual shadow. Pressed/input = inset dual shadow. Never mix both on the same element at rest.

Soft radius, soft edges

Radii live in the 1.1–2.25rem band. Hard 4px corners break the clay read. Prefer continuous curves over sharp rects.

Low chroma field

The canvas is cool grey-blue (#eef1f6). Color is for chips, CTAs, pins — not full-bleed surfaces. Clay needs quiet ground.

Emboss, don't illustrate

Map blocks, roads, and pins are extruded shapes with light/shadow — not flat SVG strokes or photo basemaps.

Tactile press

Interactive clay sinks on press (inset shadow + scale ~0.97). Hover may lift slightly; never both at once dramatically.

Elevation ladder

bg → neo-sm → neo / clay → clay-deep. Jump at most one step between nested surfaces. No infinite stacking.

What clay is not

Not glassmorphism (blur + border). Not material hard shadows. Not pure white cards on white. Not neon chrome on every surface.

Shadow anatomy

Raised

8px 8px 18px dark
−8px −8px 18px light

Inset / pressed

inset 4px 4px 10px dark
inset −4px −4px 10px light

Tokens: --shadow-neo, --shadow-neo-sm, --shadow-clay, --shadow-neo-inset. Never invent a one-off box-shadow in a component.

Live specimens

Embossed zone map

○ Zone edge→◉ Public venue

Time

4 min

Dist

0.8 mi

Arrive

soon

Soft control grid

Press demo

CSS recipes

.claySoft card · hairline + clay-sm shadow

.clay-deepHero / map shell · clay shadow + cool gradient

.neo / .neo-smChrome · pure dual-tone soft white

.neo-inset / .clay-insetInputs, wells, pressed state

.map-blockExtruded city block for zone maps

.neo-pressActive → inset + scale 0.97

.motion-liftHover → −3px Y + clay shadow

Do / Don't

DoKeep fills near the field color so dual shadows read as volume, not stickers.
DoUse color sparingly on icons, pins, CTAs — clay is the material, not the paint.
Don'tStack clay-deep inside clay-deep. Flatten or use inset for nested content.
Don'tPair heavy blur glass or pure black drop-shadows with neo surfaces.
Don'tAnimate shadow color wildly — only lift distance / blur within the token set.

Where it ships

App header / mobile dockneo

Feed hero + empty stateclay-deep

Intent cardssurface + neo-sm + lift

Zone / expiry wellsclay-inset / neo-inset

Zone map widgetclay-deep + map-block

Filters (idle)neo-sm pills

Primary CTAcolor + colored soft shadow (not clay)