Design System

Primitives

Program cards, radar scopes, tactical callouts.

Identity & classification

  • Classification badge - wa-tag variant, pinned top-left of program cards. Two tokens:
    • PROGRAM SENSITIVE - --fdt-classification-sensitive (amber)
    • FDT CONTROLLED - --fdt-classification-controlled (electric blue) Uppercase Micro, 0.08em tracking, 15% fill + 100% stroke.
  • Program status badge - pill pinned bottom-left of program cards, using the program-lifecycle vocabulary from Status indicators: CONCEPT, EMD PHASE, IN TEST / IOT&E, LRIP, FIELDED, SUSTAINMENT, ARCHIVED, TERMINATED. One pill per program - never two simultaneous lifecycle statuses.

Marketing primitives

  • Event banner - pinned above top nav. Navy-800 fill, 1px bottom border in steel-500, amber EVENT tag at left, event details with the name highlighted in caution-amber. Dismissible. Responsive: truncates title below 640px.
  • Stats row - horizontal callout group. Each cell: large numeric in Display L, Micro label in steel-400. 2×2 stack on mobile.
  • Program card - composes wa-card. Anatomy top-to-bottom: classification badge → product wordmark (Wordmark L) → descriptor (Wordmark S, steel-300) → body (Body L, fog-200) → program status badge. --glow-sm on focus. Interactive - wraps in <a> or <button> for full keyboard operability.
  • Feature grid tile - composes wa-card at 50% surface opacity. Icon (24px, electric-500 stroke) + H3 title + body paragraph.
  • Training-construct disclaimer - wa-callout with variant="neutral", italic Body text in steel-400. Required on every surface that presents synthetic scenarios, rehearsal data, or adversary orders of battle so operators can distinguish training content from live operational data.

Product / tactical primitives

  • Map overlay HUD - corner-anchored wa-cards, translucent (navy-800 @ 85%, backdrop-blur 12px). Collapses to wa-drawer (bottom) on mobile.
  • Radar scope - custom SVG/Canvas component (not a WebAwesome primitive - the tactical visualization is geometric, not chart-like). Concentric range rings steel-500 @ 40%, sweep electric-500 @ 30% with --glow-md trail. Tracks are semantic-colored pulsing dots with wa-format-number-formatted mono labels.
  • Tactical callout - leader-line annotation. Custom SVG. 1px electric-500 stroke, bracket terminal [ ] with --glow-sm on acquire.
  • Resource meter (QRF) - horizontal row of 4 cells. Each cell: Micro uppercase label in the resource’s semantic color, large Wordmark L numeric value, thin 3px fill bar matching label color. Built with wa-progress-bar variants for the fill.
  • Sector / AO card (QRF) - wa-card variant. Sector name (Wordmark S) + tactical-state pill top-right using the vocabulary from Status indicators - SECURED (neutral), CONTESTED (hostile), DENIED (caution), UNKNOWN (steel). Terrain descriptor (Micro, steel-400). Sub-unit wa-tag row in semantic colors.
  • Decision prompt (QRF) - composes wa-card. Anatomy: SITUATION eyebrow → problem title (H2) → context (Body) → question (Body) → 50/50 two-wa-button row with uppercase Wordmark S labels. Full-width, bottom-anchored on mobile (thumb zone). Protect this shape - it’s the signature QRF interaction.
  • Threat/track readout - mono track ID (UNK-003) + APP-6D fdt-symbol glyph. Used in GHOST GRID radar and as ambient texture on GRIDWATCH marketing.