Effect styles

Seven elevation steps, each a box-shadow token of one to three translucent black layers: xs–sm for inputs and cards at rest, md–lg for dropdowns and popovers, xl–3xl for modals and marketing imagery. Translucent black is tuned for light surfaces: in dark mode the shadows recede and elevation is carried by surface color and borders, exactly as the kit's own components behave. The kit also ships shadow-xs-skeuomorphic, a code-side token with no Figma sheet; SquareKit zeroes it in theme.css, by the owner's 2026-09-20 ruling that every button is flat at rest.

Choose elevation by behavior, not by visual weight. Current components establish the practical mapping below: inline surfaces stay flat, small responsive lifts use shadow-xs, transient overlays use shadow-lg, and blocking dialogs use shadow-xl. Dark mode keeps the same role and shadow token; semantic surface contrast and borders carry more of the depth when shadows recede.

Single-layer focus rings for elements such as toggles and checkboxes that don't need a shadow. In code the ring is an outline: outline-focus-ring (brand-500) or outline-focus-ring-error (rose-500, the sheet's red-500) with outline-2 outline-offset-2. Always on in these cards, while components apply it through focus-visible so only keyboard users see it.

Elements such as buttons need a focus ring and a shadow. Figma can't stack effect styles, so the sheet ships combined focus-ring-and-shadow styles; in code the outline and shadow are independent utilities that compose freely, exactly as these cards do.

Frosted-glass panels for navigation bars, overlays, and image cards, shown over a fixed photo in the sheet's light and dark glass styles. The sheet's four steps (sm, md, lg, xl) are the --blur-* tokens in theme.css, named exactly as the sheet names them: 2, 4, 6, and 10px, tuned to draw what the sheet draws. Figma blur renders at half the strength of the CSS blur() sigma: divide a Figma blur value by two when translating a design.