Design system

Materials

Borders, surfaces, radius, and elevation in the paper-and-ink system.

Resting content is flat. Hairlines and negative space establish structure; elevation identifies a surface that floats above the document.

Ruled section

Flat content separated by a hairline.

Card

A bounded resting surface.

Menu

A temporary surface above content.

Modal

The strongest focused elevation.

Radius

One token, --radius (8px), sets the whole scale with shadcn's multipliers, so changing it reshapes every component.

  • rounded-sm (4.8px) marks small inner details.
  • rounded-md (6.4px) shapes textareas, menu items, tooltips, and grouped buttons.
  • rounded-lg (8px, --radius) frames navigation triggers and website panels.
  • rounded-xl (11.2px) shapes cards, dialogs, menus, and popovers.
  • rounded-2xl (14.4px) belongs to floating sheets.
  • rounded-4xl (20.8px) draws the pill on buttons, inputs, select triggers, badges, and status chips. Avatars stay circles.

Use one shadow per surface. shadow-border frames a card without moving layout. shadow-menu, shadow-modal, shadow-tooltip, and shadow-fullscreen correspond to their named floating layer. Do not put a card inside another card.