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

35 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 chamfered F mark and wordmark that sign every surface.
  8. 08 Square format1080 × 1080 brand directions for avatars, signatures, and social crops.
  9. 09 FaviconsThe mark at 16×16 and 180×180.
  10. 10 Product namingOne word, all caps, operationally grounded.
  11. 11 UI kitsLive HTML examples — token previews, single-concept components, and full-page mocks for the corporate and product surfaces.
  12. 12 Spatial systemA 4px base unit and nothing softer than 4px corners.
  13. 13 Responsive behaviorOne system adapts, components don’t redesign.
  14. 14 Surface treatmentTranslucent panels, flat elevation, glow for live states.
  15. 15 Textures & backgroundsGrid and ghost tracks.
  16. 16 MotionMotion that means something, with no bounce and no spring.
  17. 17 ComponentsThe WebAwesome library, re-voiced in FDT.
  18. 18 Component libraryEvery FDT component as a ready-to-copy card: a live preview, the markup, and the rules it carries.
  19. 19 PrimitivesProgram cards, sector cards, tactical callouts.
  20. 20 FormsWhere operators configure behavior.
  21. 21 NavigationWayfinding across every FDT surface.
  22. 22 In-product helpHelp that sounds like the rest of the system.
  23. 23 Data visualizationCharts as instruments, not decoration.
  24. 24 Keyboard shortcutsKeyboard first.
  25. 25 Loading & progress statesTemporal conditions that deserve a signal.
  26. 26 System statesOne pattern for every non-content state.
  27. 27 NotificationsHow the system announces change.
  28. 28 Status indicatorsTags, pills, and badges with locked vocabularies.
  29. 29 IconographyTwo icon systems that never mix.
  30. 30 Voice & microcopyFour rules for writing in the FDT register.
  31. 31 Anti-patternsFailure modes, rejected on sight.
  32. 32 ImplementationTokens, themes, locales, versioning.
  33. 33 Agent spec (DESIGN.md)Machine-readable design contract for AI coding agents building the FD1x apps.
  34. 34 Agentic DesignThe eight artifacts this system ships.
  35. 35 AboutBuild provenance for this design system site.

Extensions

11 sections · how the system travels off-screen

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