Defaults

This skill holds the interface defaults that apply on every screen. It covers surfaces, type, motion, sound, focus, forms, loading and overlays.

Tokens first, then these values

Use the project's token wherever one exists for a value below. Where none exists, the values here are exact. A hard scroll cut or a clipped shadow is a finding in any style.

Words and punctuation belong to copy. Building any of these with the project's primitive belongs to reuse. Whether a sound or an animation should exist at all belongs to restraint. Concentric radii, optical nudges and icon alignment belong to alignment. Taking an existing animation apart belongs to deconstruct.

Scroll edges fade

A scroll container fades at its ends with a mask-image gradient. A hard cut at the overflow edge is defaults-fade-not-cut. The recipe is in recipes.md.

Shadows are never cut off

Give a scroller enough padding that its children's shadows fit inside it. A shadow clipped by overflow: hidden is defaults-no-clipped-shadow. See recipes.md.

Code and tables scroll, never wrap