Skip to content
Sheet 23

Nav & modals

Navigation stays quiet; a modal must earn its interruption. One marketing bar, one platform shell, one panel at a time — and because the palette owns no red, destructive actions speak in black and plain language, never in alarm colours.

The rule

Navigation stays quiet — one bar, one panel, one decision at a time.

Fig. 23.A — Bars, shell, panels
MARKETING BAR — 72 PX · SHOWN 1.2× How it works For tenants For landlords Pricing Log in Book a scan CTA law — black on green · 5.92:1 active — Text Green + underline PLATFORM SHELL — SIDE NAV 264 · ITEMS 44 Records AH Overview Book a scan Records Payments Account 264 px 44 MODAL — ANATOMY & THE DESTRUCTIVE CONVENTION Cancel this scan? The record stays in draft. Your payment is refunded in full within 5 days. Keep booking Cancel scan ✕ overlay — ink 55% · click closes destructive = black + plain words MOBILE — TAB BAR 64 PX HOME BOOK RECORDS ACCOUNT THE SEALED MOMENT Record sealed. RV-2026-00417 ✓ check draws once · 600 ms BEHAVIOUR · Focus trapped inside · ring 2px Shade 1 · ESC and overlay click dismiss — always · One modal · background scroll locked · Enter 300 ms fade + 0.98→1 · reduced-motion = fade · Mobile: bottom sheet, top radius 16, drag handle rule quiet bars · one panel at a time · black for the hard decisions closes SoW Phase 0 · digital identity list
Shift-click anywhere on the figure to pin a comment to that spot.

Navigation

Marketing bar
72 px · sticky · hairline on scroll
Links
Quicksand 500 · active Text Green
Bar CTA
pill · black on green
Platform side nav
264 px · items 44 px
Active item
UI Subtle · 3px Shade 1 bar
Mobile
tab bar 64 px · 4–5 tabs

Modals

Panel
white · r 16 · shadow lg
Widths
480 confirm · 560 form
Overlay
ink at 55%
Title · body
H3 20 · Inter 16
Motion
300 ms · reduced = fade
Mobile
bottom sheet · top r 16

Behaviour

Focus
trapped · ring Shade 1
Dismiss
ESC · overlay click · ✕ 44 px
Stacking
one modal · scroll locked
Destructive
black + plain words — no red

Never

  • × Green bars or green nav surfaces
  • × Stacked modals — finish one decision first
  • × Overlays under 40% — the page must recede
  • × Red danger buttons — the palette has none