Design System

Agentic Design

The eight artifacts this system ships.
  1. Token package - fdt-tokens.json (source of truth, shipping alongside this site) and the transformed outputs: fdt-theme.css (web with --wa-* + --fdt-*), FDTTokens.swift (iOS), fdt-tokens.go (Go). Covers color, typography, spacing, radius, motion, breakpoints, and the full --fdt-glow-* scale.
  2. WebAwesome theme - a complete fdt-theme.css that drops into a WebAwesome project and restyles all components to FDT aesthetic. Including: all form primitives (wa-input, wa-select, wa-checkbox, wa-radio-group, wa-switch, wa-slider, wa-textarea, wa-number-input, wa-rating, wa-color-picker, wa-combobox Pro, wa-file-input Pro), all panels, feedback, navigation, and data-display components.
  3. FDT-specific components - fdt-symbol (APP-6D web component), fdt-radar-scope (SVG radar), fdt-program-card (composed). Each ships with a React adapter.
  4. Icon package - canonical fdt-icons-inventory.md listing every Font Awesome Sharp Regular icon used across FDT surfaces, plus the FDT-custom Sharp Regular icon set (operator glyphs - bearing indicator, PACE plan, COA matrix, etc.) drawn to match the FA Sharp Regular grid. Self-hosted subset delivered as part of the design system package.
  5. Four reference layouts - (a) FDT corporate hero + stats + programs grid, (b) grdwt.ch product hero + feature grid, (c) in-product map-first HUD, (d) QRF mobile mission screen with resource meters, sector cards, and decision prompt.
  6. Logo lockup variants - FDT primary, FDT compact (FDT only), product wordmark, co-brand.
  7. Documentation site - articulating the principles above with do/don’t examples. Including: the glow usage guide (functional signals vs. decorative, soft vs. neon), the accessibility contract (WCAG AA pairings, focus treatment, reduced motion, forced-colors support, color-blind differentiation), the responsive breakpoint behavior, and the token naming convention.
  8. Accessibility audit package - automated (axe-core) results across all reference layouts, manual color-blind simulator captures (deuteranopia, protanopia, tritanopia) for hostile/neutral pairings, forced-colors screenshot gallery across the four Windows HC themes (Black, White, Aquatic, Dusk), and keyboard-only operation recordings of each reference layout. This is a shipped artifact, not a one-time check - the system ships with the audit, or it doesn’t ship.

The system should be tight enough that a new engineer can ship a screen that looks like FDT without design review, and flexible enough to serve both the marketing site and the in-product tactical UI without either feeling out of place. Every shipped surface passes WCAG 2.2 AA; the parts that can reach AAA cheaply (text on navy-900) do.