Radius and shadows

The radii and the elevations.

Radius

The radii on controls, cards and pills.

Search watches

--radius-control 2px

Buttons, fields, chips, menu items, a thumbnail.

--radius-card 4px

Cards, tables, swatches, a listing’s photo.

--radius-overlay 6px

Dialogs, popovers, menus, toasts.

PassedSM

--radius-full 9999px

Status badges, tags, avatars, the seal.

Small and exact, like the bevel of a case: a radius never grows with the size of the thing.
A corner inside another takes the smaller radius, or none: a photo in a card is square at the card’s edge.
Only what is a state or a person is round: badges, tags, avatars, the seal.

The elevations and where each is used.

Flat

A field, a table row, a panel in a page: the border separates.

Card --shadow-card

A card at rest: a listing, an order, the certificate.

Raised --shadow-raised

A listing card under the pointer, a menu, a popover.

Overlay --shadow-overlay

A dialog, a drawer, a toast.

Three shadows and no more; borders do most of the separating.
Warm: a brown-black, the color a shadow takes on ivory paper, never a cold grey.
In dark, the shadows are deeper and the borders do the separating; no surface glows.