Design System

Surface treatment

Translucent panels, flat elevation, glow for live states.
  • Map-first layouts: The map/scope extends edge-to-edge of its container. UI panels float over it as translucent surfaces (navy-800 @ 85% opacity, backdrop blur 12px, 1px navy-600 border). This is the house style for any tactical view.
  • Panel elevation: Flat. No drop shadows anywhere in the system. Hierarchy comes from opacity, border contrast, and position. Live/active panels earn a --fdt-glow-sm halo; static panels do not. Hero elements on corporate surfaces may carry --fdt-glow-lg ambient; product hero surfaces may layer --fdt-glow-lg behind content with --fdt-glow-md on active elements.
  • Data readouts: Mono-spaced, tabular alignment, uppercase label above value. Labels in steel-400, values in fog-100. Separators are steel-500 hairlines, not boxes.
  • Dividers: 1px navy-600 horizontal rules. Never double lines. Never decorative.

Three panel states

✓ STATIC PANEL SECTOR 04 CENTER 33TWN 24680 67890 RADIUS 1500 m STATUS awaiting orders Translucent, no glow, flat. Reference context. ✓ LIVE PANEL SECTOR 04 LIVE CENTER 33TWN 24680 67890 CONTACTS 12 fr · 3 hst · 2 unk TELEMETRY updating · 2 Hz Same shape, earns glow while live. ✗ DROP SHADOW SECTOR 04 CENTER 33TWN 24680 67890 RADIUS 1500 m STATUS awaiting orders Shadow-based elevation. Forbidden.

Left and center are both correct: same panel anatomy, translucent over the map. The only difference is the live panel carries --fdt-glow-sm because it is actively receiving data; the static panel does not. The right panel fakes elevation with a drop shadow - forbidden. Depth in this system is read through opacity, border contrast, and glow, never through a shadow layer.