The surface component sets background, border, texture, and scoped text tokens via data-surface. All content should sit on a surface. Surface type determines texture — cream gets dots, navy gets hatch, red gets cross-hatch.
The surface component sets background, border, texture, and scoped text tokens via data-surface. All content should sit on a surface. Surface type determines texture — cream gets dots, navy gets hatch, red gets cross-hatch.
Consistent title block for non-hero pages
Additional context below the title
Default variant — dot pattern, light background
Body text resolves to navy-800
Muted text resolves to cream-600
Subtle text resolves to cream-500
Faint text resolves to cream-400 (decorative only)
Heroes, featured cards, departure board
Body text resolves to navy-200
Muted text resolves to navy-300
Subtle text resolves to navy-400
Faint text resolves to navy-500 (decorative only)
Section headers, detail bar, accent cards
Body text resolves to red-100
Muted text resolves to red-200
Subtle text resolves to red-300
Faint text resolves to red-300 (decorative only)
Surface wrapping a divided list — dividers are the caller's responsibility
Surface with centered message and optional action button
Explicit opt-out for dense data or form-heavy surfaces
Clean surface for dense content where dots would be distracting.
Flight category colors as surfaces — same text tokens, auto-resolved per surface
Same content block, three surfaces — text tokens auto-resolve