Design System

Responsive behavior

One system adapts, components don’t redesign.
Class Breakpoint Products Density Base font
Mobile < 640px QRF (iPhone) Compressed 15px
Tablet 640–1024px GRIDWATCH (iPad), responsive marketing Standard 16px
Desktop 1024–1440px frontierdefensetech.com, grdwt.ch Standard 16px
Wide ≥ 1440px Corporate marketing hero, dashboards Generous 16px

Breakpoint tokens (aligned with WebAwesome’s --wa-breakpoint-* where applicable):

--fdt-breakpoint-sm    640px     Mobile → Tablet
--fdt-breakpoint-md   1024px     Tablet → Desktop
--fdt-breakpoint-lg   1440px     Desktop → Wide
--fdt-breakpoint-xl   1920px     Wide → Ultrawide (operator consoles)

Grid behavior

  • Mobile: 4 columns, 16px gutter, 16px outer margin
  • Tablet: 8 columns, 20px gutter, 32px outer margin
  • Desktop: 12 columns, 24px gutter, 48px outer margin
  • Wide: 12 columns, 24px gutter, 80px outer margin

Type scale

The Display XL/L/M rungs collapse on mobile. Display XL (72px) becomes Display M (40px). Wordmark XL (72px) becomes Wordmark L (28px). Body sizes hold - operators read the same size regardless of device.

Component adaptation

  • Program card - 4-up on wide, 3-up on desktop, 2-up on tablet, 1-up (stacked) on mobile.
  • Stats row - horizontal row on tablet+, stacked 2×2 on mobile.
  • Event banner - dismissible full-width on all sizes; title truncates with ellipsis below 640px.
  • Map overlay HUD - the four corner panels collapse to a bottom sheet on mobile; the top-right status panel becomes a compact chip row at the top.
  • Decision prompt (QRF) - native mobile shape; on tablet/desktop it stays center-anchored at ~560px max-width.
  • Resource meter row - four across on tablet+, two-over-two on mobile.
  • Tab bar - mobile pattern only; tablet+ uses horizontal top-nav tabs instead.

Platform-specific notes

  • iPad (GRIDWATCH C2) - landscape-only, map-first. UI panels are always at least partially translucent. Touch targets 44px with pen/stylus accommodation.
  • iPhone (QRF) - portrait-primary, compressed density, thumb-reachable action zone at the bottom 40% of the screen (decision prompt always lives here).
  • Desktop (marketing) - generous whitespace, Wide grid settings preferred. Corporate register.
  • SECTOR (handheld) - 160×144 native resolution, out of scope for this system’s responsive rules. The color system is adapted to the handheld’s palette constraints in the SECTOR section.