Components

Puffy clay controls with a thick structural border. They lift on hover and compress on press — touch made physical.

A frosted glass surface with a thick outline and large padding. On focus, a clay cyan ring lifts the field.

Form-field composition: label, control, helper text, and error message.

A clay check box supporting checked and indeterminate states.

Single-select group; arrow keys move the selection.

A tactile clay toggle. The thumb slides with a snap; the track puffs up in lime when active.

Drag the clay thumb or use arrow keys. Inset track, tone-colored fill.

A searchable select. Type to filter; Enter picks the first match.

A glass trigger that opens the Polyform calendar in a popover.

Rounded clay pills for status and metadata. Soft gradient, gentle shadow, bold type.

Puffy clay avatars with a deterministic gradient per name and a thick structural border.

Three layers per spec: a structural frame, a frosted glass surface, then content. Cards should never appear flat.

Dashboard metric tiles: a clay colored icon, bold figure, trend pill and a sparkline on glass.

An inset soft-surface track holding a clay gradient fill.

Dependency-free SVG charts with clay gradients and structural strokes.

Sortable columns, hover rows, and custom cell renderers.

Month-view date picker with a clay-highlighted selection.

Inline banners with a colored icon tile and a bold title. Tone signals severity.

A modal confirmation. Closes on Escape, overlay click, cancel, or confirm.

Transient notifications that stack bottom-right and auto-dismiss.

A delayed hover/focus hint that positions on any side.

Spinners, skeletons and bouncing dots for pending states.

Physical map pins with a clay teardrop body. Add a pulse to draw attention.

Navigation trail; the current page renders as a clay lime pill.

Switch panels with arrow-key navigation. The active tab is a lime clay pill.

A menu bar with glass dropdowns that reveal on hover or focus.

A collapsible icon-rail navigation. Toggle it to collapse to icons.

A bold divider — horizontal or vertical, with an optional centered label.

Collapsible sections; single-open by default. Content animates via CSS grid rows.

A sliding gallery with wrap-around controls and dot indicators.

An edge panel that slides in from any side. Closes on Escape or overlay click.

A bottom sheet with a grab handle — great on mobile.

Incoming messages are frosted glass; outgoing are clay in the sender's tone.

File chips with a clay icon tile, name, size, and an optional remove action.