Home

Corners and shadows

The corners and shadows: 10px menu rows, 11px keys and small chips (rounded-md), 14px fields and menus, 20px cards, 28px stages and dialogs, pills for what is pressed, and three shadows (rest, lift, float).

ui.surfacesconsistency/tokens.css

Use case

For the AI

Use it whenever a layout draws a shape of its own: a panel of order details is a 20px block resting on --shadow-rest, a tile that rises under the pointer takes --shadow-lift, and anything floating over the page takes --shadow-float. Most of the time a piece (card, dialog, popover) already wears the right shape, and the layout should use the piece rather than redraw it.

Use it when

  • A layout block that needs a corner or a shadow of its own
  • Checking which radius belongs to which kind of thing
  • A tile that lifts when the pointer is over it

Use something else when

  • A block of content with a title and a body: Card
  • Several panels on one warm ground: Frame
  • Something that floats over the page from a trigger: Popover

Examples

11pxKeys, small chips
10pxMenu rows
14pxFields, menus
20pxCards
28pxStages, dialogs
PillButtons, badges, search
RestA card on the page
LiftA card that rises on hover
FloatMenus, popovers, toasts

Code

Import

/* the radius and the shadows are tokens in consistency/tokens.css */

Usage

<div className="rounded-[20px] bg-background p-5 shadow-(--shadow-rest)">
  <h3 className="text-[17px] font-medium">Order 1048</h3>
  <p className="text-[13px] text-ink-4">Ready for pickup</p>
</div>

<a
  href="/clients/atelier-nord"
  className="block rounded-[20px] bg-background p-5 shadow-(--shadow-rest) outline-none transition-[box-shadow] duration-[240ms] ease-glide hover:shadow-(--shadow-lift) focus-visible:shadow-(--focus-ring)"
>
  Atelier Nord
</a>

<div className="rounded-[28px] bg-surface p-8">A stage around the content</div>

Rules

  • Corners come from the ladder: rounded-[10px] for menu rows, rounded-[14px] for fields and menus (rounded-lg is 14px), rounded-[20px] for cards, rounded-[28px] for stages and dialogs, rounded-full for what is pressed.
  • Shadows come from the three tokens only: shadow-(--shadow-rest) on the page, shadow-(--shadow-lift) as it rises, shadow-(--shadow-float) for what floats over it.
  • A focusable element of a layout's own shows focus with focus-visible:shadow-(--focus-ring), as the button does.
  • A field being typed into shows --field-focus-border and --field-focus-halo, never a black outline.