Layout

Dense, compact layout with RevUp spacing, radii, and hard shadows. Cap content width; nest one container so insets do not double.

Spacing scale

--base-size-* from design-system.css. 100 units ≈ 8px at the default root size. Spacing scales with user font preferences.

--base-size-25 0.125rem · 2px
--base-size-50 0.25rem · 4px
--base-size-75 0.375rem · 6px
--base-size-100 0.5rem · 8px
--base-size-125 0.625rem · 10px
--base-size-150 0.75rem · 12px
--base-size-175 0.875rem · 14px
--base-size-200 1rem · 16px
--base-size-250 1.25rem · 20px
--base-size-300 1.5rem · 24px
--base-size-400 2rem · 32px
--base-size-500 2.5rem · 40px
--base-size-600 3rem · 48px
--base-size-800 4rem · 64px

Max width & chrome

Marketing content sits in a readable measure. Design docs use a ~1100px content column; site layout max width token is available for app shells.

--layout-max-width: 72rem;        /* HANDOFF / CRM shell */
--layout-content-inset: var(--base-size-200);
--header-height: 4rem;            /* sticky chrome */

Radius

Sharp / controlled — not glass-pill. Pills are for chips and avatars only.

--radius-xs 2px
--radius-sm 4px
--radius-md 8px
--radius-lg 12px
--radius-xl 16px
--radius-2xl 24px
--radius-control 12px (buttons, inputs)
--radius-card 16px (cards, panels)
--radius-pill 9999px (chips only)

Shadows

Hard offset shadows are the signature — not soft glow. Focus uses the teal halo ring.

--shadow-hard

--shadow-hard-lg

--shadow-raised

--shadow-focus-ring

Token reference

Token	Value
`--base-size-100`	`0.5rem`
`--base-size-200`	`1rem`
`--base-size-400`	`2rem`
`--radius-control`	`var(--radius-lg) → 12px`
`--radius-card`	`var(--radius-xl) → 16px`
`--shadow-hard`	`3px 3px 0 0 rgba(15, 38, 58, 0.12)`
`--shadow-hard-lg`	`4px 4px 0 0 rgba(15, 38, 58, 0.16)`
`--shadow-raised`	`0 10px 40px rgba(15, 38, 58, 0.08)`