Frontier Defense Technology

Design System

Tokens, components, and patterns for the FDT corporate and product surfaces. Dark-native, information-dense, electric-blue accented - built on WebAwesome primitives with FDT-specific extensions for tactical symbology, glow, and map-first composition.

Scope Corporate · Product · Physical
Primitives WebAwesome 3.5.0
Locales NATO-compatible

Core

32 sections · the design system itself

  1. 01 Brand essenceField-ready instrument, not costume.
  2. 02 Brand familyTwo surface registers, one system.
  3. 03 Visual philosophyThe principles behind every design decision.
  4. 04 AccessibilityWCAG 2.2 AA baseline — AAA where the palette allows.
  5. 05 ColorNavy anchors, electric accents, semantic reds and greens.
  6. 06 TypographyThree typefaces, three locked roles.
  7. 07 Logo & marksThe hex mark and wordmark that sign every surface.
  8. 08 IconsThe brand at 16×16 and 180×180.
  9. 09 Product namingOne word, all caps, operationally grounded.
  10. 10 Spatial systemA 4px base unit and nothing softer than 4px corners.
  11. 11 Responsive behaviorOne system adapts, components don’t redesign.
  12. 12 Surface treatmentTranslucent panels, flat elevation, glow for live states.
  13. 13 Textures & backgroundsGrid, radar, ghost tracks.
  14. 14 MotionMotion that means something, with no bounce and no spring.
  15. 15 ComponentsThe WebAwesome library, re-voiced in FDT.
  16. 16 PrimitivesProgram cards, radar scopes, tactical callouts.
  17. 17 FormsWhere operators configure behavior.
  18. 18 NavigationWayfinding across every FDT surface.
  19. 19 In-product helpHelp that sounds like the rest of the system.
  20. 20 Data visualizationCharts as instruments, not decoration.
  21. 21 Keyboard shortcutsKeyboard first.
  22. 22 Loading & progress statesTemporal conditions that deserve a signal.
  23. 23 System statesOne pattern for every non-content state.
  24. 24 NotificationsHow the system announces change.
  25. 25 Status indicatorsTags, pills, and badges with locked vocabularies.
  26. 26 IconographyTwo icon systems that never mix.
  27. 27 Voice & microcopyFour rules for writing in the FDT register.
  28. 28 Anti-patternsFailure modes, rejected on sight.
  29. 29 ImplementationTokens, themes, locales, versioning.
  30. 30 Agent spec (DESIGN.md)Machine-readable design contract for AI coding agents building the GRIDWATCH apps.
  31. 31 Agentic DesignThe eight artifacts this system ships.
  32. 32 AboutBuild provenance for this design system site.

Extensions

10 sections · how the system travels off-screen

  1. 33 Imagery & photographyDesaturated tones, operational context.
  2. 34 Hardware photographyMatte, neutral, operational.
  3. 35 Video designDocumentary register, never commercial.
  4. 36 Sound & audio designSilence as a default.
  5. 37 Marketing site patternsDark-native, map-first.
  6. 38 Map tile stylingTile palettes for day and night operations.
  7. 39 EmailMarkdown in, client-safe HTML out.
  8. 40 Presentation decksDecks that look like screenshots, not slideware.
  9. 41 Physical designDigital rules, physical goods.
  10. 42 SECTOR (handheld)The brand at 8-bit.