Foundations

Surfaces

Corner radius, depth, glass and the widths that set out a page.

Radius

Rounder for larger surfaces. Nested corners should step down so the gap stays even: inner radius = outer radius − padding.

rounded-md

6px · Small badges and inset tiles.

rounded-lg

8px · Square buttons, menu rows.

rounded-xl

12px · Inputs, small cards and icon tiles.

rounded-2xl

16px · Mid-size cards.

rounded-panel

20px · Dropdown panels and content cards (our token).

rounded-3xl

24px · Large feature cards and product shots.

rounded-full

pill · Buttons, chips, badges and avatars.

Don't:Avoid one-off radii like rounded-[10px]. Some are still in the code from early pages; pick the nearest step above when you touch them.

Shadows

Each describes where it belongs. Shadows sit on white or canvas, never on photos without a panel.

shadow-popover

shadow-xs

Button group track

shadow-raised

Raised Level 1

shadow-tile

Cards on tinted sections

shadow-panel

Panels floating over photos

shadow-overlay

Figma "Overlay heavy"

shadow-card

Glass

Frosted surfaces for things floating over photos or scrolling content: glass-surface on dark, glass-surface-light on light.

glass-surface

Over photos, with white text.

glass-surface-light

The header over light pages.

Layout

Content widths and fixed sizes.

max-w-page

75rem · 1200px content width

max-w-funnel

72.5rem · 1160px demo funnel card

max-w-funnel-booking

68rem · 1088px: Cal.com's 1040px booker + the card's 24px padding each side

max-w-wide

90rem · 1440px — full-bleed banners stop growing here

spacing-header

4.25rem · 68px site header height

max-w-page · 1200px of content, centred

<div className="mx-auto w-full max-w-page px-4 md:px-6 xl:px-0">…</div>