Design System

Components

The WebAwesome library, re-voiced in FDT.

The list below is grouped by WebAwesome category, then FDT extensions. Components marked Pro require WebAwesome Pro; all others are in the free tier.

BUTTONS BRAND DANGER SUCCESS WARNING NEUTRAL OUTLINED INPUTS · AT-REST · FOCUSED · INVALID callsign BLU-2 required - provide a callsign TAGS · PILLS · BADGES PROGRAM SENSITIVE FDT CONTROLLED FIELDED IN TEST TERMINATED 3 NEW EOL CARD PROGRAM SENSITIVE FIELDED GRIDWATCH C2 · JOINT FORCE · IOT&E 2026 Theater-level command & control over real terrain. PROGRESS · SWITCH · CHECKBOX SYNCING TRACKS · 65% Auto-engage Legacy Confirm before engage Legacy comms

A sampler of the component shapes FDT applies to the WebAwesome primitive set. Button label colors and focus rings are the contrast rules made visible.

Foundation

  • wa-button - variants with locked label colors (WCAG-driven, not stylistic):
    • brand - electric-500 fill, white label, weight ≥600, size ≥14px. 4.6:1 ratio, passes AA large. --fdt-glow-sm on hover, --fdt-glow-md on active.
    • danger - hostile fill, white label, weight ≥600, size ≥14px. 4.5:1, passes AA large.
    • success - neutral (green) fill, navy-900 label. 6.3:1. White labels on neutral fail at 3.0:1 - do not ship with the WebAwesome default.
    • warning - caution (amber) fill, navy-900 label. 10.4:1. White labels on caution fail catastrophically at 1.8:1 - do not ship with the WebAwesome default.
    • neutral (secondary) - navy-700 fill, fog-100 label, 1px steel-500 border. 11.2:1.
    • Appearances: filled, outlined, filled-outlined, plain. Sizes: small (32px), medium (36px, default), large (44px for mobile primary actions). Ghost buttons use appearance="plain". No gradients, no shine. FDT override: ::part(base) carries the glow treatment, ::part(label) sets the locked color.
  • wa-icon - renders Font Awesome icons. The system uses FA Sharp Regular as the default pack - configured globally via wa-icon { --family: 'sharp'; --variant: 'regular'; }. Self-hosted through an FA Pro Kit (no CDN). Sharp corners, ~1.5px stroke at 24px, square terminals - matches the system’s icon grid exactly. FDT-custom Sharp Regular icons (bearing indicator, PACE plan, COA matrix, etc.) register alongside the FA set and resolve through the same wa-icon API. Never Duotone, never Solid (except for state-difference affordances), never Brands in running UI. Tactical symbology (APP-6D) is a separate component - see fdt-symbol.
  • wa-divider - 1px navy-600. Horizontal rule, never double, never decorative.
  • wa-tag - the badge primitive. Variants bound to FDT semantic colors via --wa-color-*. 15% fill + 100% stroke pattern applied globally via component-scoped CSS parts.
  • wa-badge - small status indicator (numeric dot or pill). Maps to semantic colors. Used on tab bars, notification counts.

Forms (WebAwesome covers all core form primitives)

  • wa-input - text inputs. Types: text, email, url, search, tel, password. Appearance: outlined (default in FDT), filled, filled-outlined. with-clear and password-toggle attributes supported. Hint + label slots. FDT styling: navy-700 fill, navy-600 border → electric-500 on focus with --glow-xs.
  • wa-number-input - numeric input with stepper. Mono font applied to the value (::part(input) override) since this is data.
  • wa-textarea - multi-line input. Resize behavior default vertical. Same styling pattern as wa-input.
  • wa-select + wa-option - single-select and multi-select (multiple attr). Supports tag customization via getTag() for multi-select chips. FDT styling: dropdown uses --wa-color-surface-raised (navy-700), options hover to electric-500 at 15% fill.
  • wa-combobox (Pro) - autocomplete combobox. Same styling as wa-select.
  • wa-checkbox - supports checked, indeterminate, disabled. Check icon in fog-100 on electric-500 fill. 18px default.
  • wa-radio-group + wa-radio - standard radio. Also supports appearance="button" for segmented-control style (used in QRF’s VISUAL / THERMAL / SIGNALS bottom tabs - that is actually a radio group with button appearance, not a tab bar).
  • wa-switch - toggle. Off = navy-700 with steel-500 border; on = electric-500 fill with --glow-xs.
  • wa-slider - range input. Track in steel-500, thumb in electric-500 with --glow-sm on drag. Supports min/max, step, dual-handle range.
  • wa-rating - 1–N star rating. Used in retrospectives and mission debriefs. FDT styling: electric-500 filled stars on steel-500 empty.
  • wa-color-picker - unlikely in product UI but available for internal tooling.
  • wa-file-input (Pro) - drag-and-drop file upload. Dropzone uses dashed navy-600 border → electric-500 with --glow-sm on drag.

Form validation

Use WebAwesome’s custom states (:state(user-valid), :state(user-invalid)) combined with native pseudo-classes (:invalid, :valid). Error treatment: 2px hostile-red outline with offset: 0.5rem, error message below field in hostile color, micro-size. Required fields get a hostile-red asterisk after the label.

Panels

  • wa-card - the base panel. Slots for header, default content, footer, and media. FDT override: navy-800 fill, navy-600 border, no drop shadow, optional --glow-sm when marked active/live. The Program Card and Sector Card below compose wa-card.
  • wa-callout - inline contextual panel (info/success/warning/danger). Uses semantic colors + icon. Good for the training-construct disclaimer pattern.
  • wa-details - collapsible disclosure. Chevron rotates 90° on expand, 200ms.
  • wa-dialog - modal overlay. Backdrop: --navy-900 @ 70% + 8px blur. Panel: surface-raised (navy-700), 4px radius, no shadow, 1px navy-600 border. Escape dismisses.
  • wa-drawer - side panel (left/right/top/bottom). Same surface treatment as dialog. Mobile map-HUD collapses to a bottom drawer.

Feedback

  • wa-toast + wa-toast-item - transient notifications. Anchored top-right on desktop, top-full-width on mobile. 4px left border in semantic color, surface-raised fill, auto-dismiss after 6s default.
  • wa-spinner - loading indicator. Electric-500 stroke, linear rotation (not spring).
  • wa-progress-bar - determinate progress. Track steel-500, fill electric-500 with --glow-xs. Used for mission timers, loading states.
  • wa-progress-ring - circular variant. Same tokens.
  • wa-skeleton - content-shape loaders. Navy-700 base with a slow steel-500 shimmer (respects reduced-motion).
  • wa-tooltip - terse contextual label. surface-raised fill, 2px radius, micro text. 500ms show delay, 100ms hide.
  • wa-popover - richer contextual panel (non-modal). Same surface as tooltip but can contain content.
  • wa-tab-group + wa-tab + wa-tab-panel - horizontal or vertical tabs. Active tab indicator: 2px electric-500 rule + --glow-xs. Use for desktop/tablet section switching.
  • wa-breadcrumb + wa-breadcrumb-item - breadcrumb nav. Separator: / in steel-400. Last item in fog-100.
  • wa-tree + wa-tree-item - hierarchical tree (file browser, unit org chart). 20px indent per level.
  • wa-dropdown + wa-dropdown-item - menu triggered from a button. Surface-raised, 4px radius, 1px navy-600 border.

Data display

  • wa-chart and specialized chart components: wa-bar-chart, wa-line-chart, wa-doughnut-chart, wa-pie-chart, wa-polar-area-chart, wa-scatter-chart, wa-bubble-chart, wa-radar-chart, wa-sparkline.
    • Chart styling: axes in steel-500, labels in steel-300 (Micro), data series in the semantic palette (brand-30 for primary series, neutral-60 for comparison series, success/warning/danger for categorical).
    • Radar chart is particularly on-brand - use it for doctrinal profile comparisons (Fortress vs Specter vs Anvil AI commander attributes), mission risk matrices, and after-action summaries.
    • All charts respect reduced-motion - animated reveals become instant.
  • wa-avatar - user/unit portrait. Square, 2px radius, not round (round reads too social-network).
  • wa-format-date / wa-format-number / wa-format-bytes - locale-aware formatters. Wrap in mono font (Data style) for tactical readouts.
  • wa-qr-code - QR rendering. Used for device pairing flows, offline data transfer.
  • wa-relative-time - “3 minutes ago” auto-updating timestamps.

Media & layout

  • wa-avatar, wa-animated-image, wa-carousel + wa-carousel-item, wa-comparison (before/after slider), wa-zoomable-frame, wa-scroller, wa-split-panel, wa-page, wa-include - available; document per-use as they appear. Default stylings inherit from the global token set.