Radius and shadows — Luxury Resale Marketplace

Radius

The radii on controls, cards and pills.

Search watches

--radius-control 10px

Fields, small controls, menu items, a thumbnail.

--radius-image 12px

A photo inside a card: a listing’s photo, a gallery.

--radius-card 16px

Cards, tables, swatches, the listing card.

--radius-overlay 24px

Dialogs, popovers, menus, toasts, the sign-in card.

PassedSM

--radius-full 9999px

Buttons, chips, status badges, tags, avatars, the seal.

Soft (Atelier): 10 for a control, 12 for a photo, 16 for a card, 24 for an overlay; a 6 px box for a checkbox. A radius never grows with the size of the thing.
A corner inside another takes the smaller radius: a photo in a card is 12 inside the card’s 16.
Chips are pills, as are badges, tags and avatars. A form button takes the control radius of a field on the web and in the back office (LRM-351, LRM-357); on the phone it stays a pill.

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.