Spacing, radii & surfaces

Both apps use Tailwind's 4px step. Controls are 32px (space-8, small), 36px (space-9, default) or 40px (space-10, large) tall; fields pad 12px (space-3) inline; buttons 16px (space-4); cards pad and gap 24px (space-6). Settings sections use crew-settings-gap (24px; 16px at compact density). Compact density — a personal Appearance setting — only tightens table cell padding (6px block) and settings spacing; never shrink controls for it.

Max is a sidebar app (see Sidebar): a 16rem sidebar from md (768px) up that collapses to 3rem icons or hides (⌘/Ctrl+B), beside an inset content panel with 8px margins and radius-xl corners. The header is 56px (64px from sm) with the search trigger and ⌘K hint; main pads 16px × 24px and centres at 80rem (max-w-7xl) on wide screens. Page headers are an h1 in max-title (24px bold, tight) over a 14px muted-foreground line, in a row that wraps its actions: flex flex-wrap items-center justify-between gap-3. Many sections sit in the glass shell glass-panel border border-glass rounded-3xl px-6 py-6. On phones a 56px bottom tab bar holds four destinations plus More; it is 3.5rem plus the safe-area inset, and anything anchored to the bottom adds --app-bottom-inset so nothing hides behind it. Below lg, views show one column at a time, filters move into a bottom sheet and the main create action floats as a + button. Crew OS's public hero centres in a max-w-3xl column; the sections below it run full-bleed.

Radii#

--radius is 10px in both apps. Buttons, inputs and textareas use radius-md (8px); cards radius-xl (14px); settings sections and toggles r-lg (12px); popovers and menus radius-lg (10px); small chips radius-sm (6px). Pills (r-full) are for switches, hero CTAs, the hero badge and avatars. The logo itself is square-cornered — don't round it.

Borders, shadows and glass#

Elevation is carried by surface steps and hairlines first, shadow second. shadow-xs sits under outline buttons and fields; shadow-sm under cards. Both apps have a glass layer for surfaces floating over imagery, video or gradient grounds: translucent white fill, backdrop-glass* blur-and-saturate, a translucent white hairline, and shadow-glass-panel or shadow-glass-card. Use glass only over something worth seeing through; on a plain ground use card. Respect prefers-reduced-transparency by dropping the backdrop filter.

The Glass button finish (Appearance setting) adds a frosted inset highlight to default buttons without changing their colour or size.

Focus and states#

Every interactive element shows a focus ring built from ring: primitives draw a 3px ring halo plus a ring border (focus-visible only); the switch and native selects draw a 2px ring outline offset by 2px. In Crew OS ring is a mid grey (4.5:1 light, 7.8:1 dark) so it shows next to a black button; in Max it follows primary. Hover drops a fill to 90% opacity (primary, destructive) or 80% (secondary), or lays accent under ghost and outline controls. Disabled is 50% opacity with no pointer events. Invalid is aria-invalid → destructive border and a faint destructive halo, with the message below the field.

Spacing scale#

Both apps use Tailwind v4's 4px step (--spacing: 0.25rem); these are the steps the shared components use.

Radius scale#

Both apps set --radius: 0.625rem and derive sm/md/xl from it; values below are those calc() results.

Shadows#

Glass (backdrop)#

backdrop-filter values of the glass utilities in both apps' globals.css.

Token	Value	Usage
backdrop-glass	blur(16px) saturate(180%)	.glass and .glass-card.
backdrop-glass-subtle	blur(12px) saturate(160%)	.glass-subtle: light frosting behind small chips and bars.
backdrop-glass-panel	blur(20px) saturate(180%)	.glass-panel.
backdrop-glass-strong	blur(24px) saturate(200%)	.glass-strong: dialogs and menus over busy grounds.
backdrop-glass-button	blur(12px) saturate(140%)	.glass-button and the Glass button finish: surface-only, keeps the CTA's own colour.
backdrop-glass-input	blur(8px)	.glass-input.