Design System

Map tile styling

Tile palettes for day and night operations.

Data source - Overture Maps

Overture Maps is the primary provider. OSM is the fallback for regions where Overture coverage is thin.

Rationale for Overture over OSM-direct:

  • Linux Foundation-backed (Meta, Microsoft, Amazon, TomTom founding members). Stable governance, predictable release schedule, long-term data lineage.
  • Built on OSM, so it inherits community coverage, plus curated contributor data for administrative boundaries, buildings, and places.
  • GERS (Global Entity Reference System) gives stable entity IDs across releases - critical for the AI training pipeline where consistent feature identification matters more than absolute precision.
  • GeoParquet and PMTiles native - integrates directly with a Go-based defense-tech shop already running DuckDB and Parquet workflows. PMTiles self-hosts as a single file, no tile server at runtime.

Not used: TomTom direct (paid, closed schema), Mapbox (vendor lock-in), Google Maps (license incompatible with defense).

Two modes - day and night

GRIDWATCH ships two complete tile styles. Mode switching is instant - a CSS class flip on the map container, not a re-render. The red night mode is built on the Apple Watch Ultra principle: red wavelengths don’t bleach rod cells the way blue/white do, so the display doesn’t destroy dark-adapted vision.

Mode Use case Family
Day Standard operational display, planning, briefing, training Navy / steel / electric (derived from FDT’s digital palette)
Night Dark-adapted viewing, vehicle operations, night-ops field use Red-only, Apple Ultra principle

Day mode palette

Terrain-forward. Contours dominate, roads recede, labels stay sparse until zoom demands them. The map reads navy-first with electric-blue accents reserved for MGRS grid and tactical overlays.

Feature Color Treatment
Canvas / void (beyond coverage) navy-900 #0A1220
Land / low terrain navy-800 #0F1A2E Base land fill
Mid elevation navy-700 #16243D Above mean elevation
High elevation / ridges navy-600 #1E3050 Crests, plateaus
Ocean navy-900 + 40% #1D6EF5 overlay Darker than land
Inland water navy-800 + 25% #1D6EF5 overlay Lakes, rivers
Contour lines - major (100m) steel-400 #5A6D8A @ 60%, 0.75px Primary terrain signal
Contour lines - minor (20m) steel-500 #3A4A66 @ 40%, 0.5px
Contour labels steel-300 #8A9BB4, JetBrains Mono 10px Elevation numerics
Roads - motorway steel-300 #8A9BB4, 1.5px Top tier only
Roads - primary steel-400 #5A6D8A, 1px
Roads - secondary steel-500 #3A4A66, 0.5px
Roads - tertiary / residential navy-600 #1E3050, 0.5px Nearly disappears - deliberate
Buildings navy-700 fill, navy-600 0.5px stroke Quiet block density
Settlement (major) fog-200 #C5D1E2, Barlow Cond 700 14px UC tracked 0.08em
Settlement (minor) steel-300 #8A9BB4, Barlow Cond 700 11px UC tracked 0.08em
MGRS grid overlay electric-500 #1D6EF5 @ 20%, 1px When grid toggle active
MGRS grid labels electric-400 #4A8DFF, JetBrains Mono 10px AA-safe text variant

Night mode palette - red-only

Everything navy becomes deep red; everything fog/steel becomes bright red. The hue family is locked - no blues, no greens, no whites on the base map. The only exception is tactical overlays (see below).

Feature Color Treatment
Canvas / void #140404 Near-black, red-tinged
Land / low terrain #1A0606 Barely distinguishable from canvas
Mid elevation #2A0B0B
High elevation / ridges #3A1010
Ocean #0A0303 + #60181C 30% overlay Darker than land - water as void
Inland water #1A0606 + #60181C 20% overlay
Contour - major #6B1A1A @ 70%, 0.75px
Contour - minor #3A1010 @ 60%, 0.5px
Contour labels #B03030, JetBrains Mono 10px
Roads - motorway #C03838, 1.5px
Roads - primary #9A2020, 1px
Roads - secondary #701818, 0.5px
Roads - tertiary #3A1010, 0.5px Near-invisible
Buildings #2A0B0B fill, #3A1010 0.5px stroke
Settlement (major) #E04040, Barlow Cond 700 14px UC tracked
Settlement (minor) #9A2020, Barlow Cond 700 11px UC tracked
MGRS grid overlay #F05050 @ 25%, 1px
MGRS grid labels #F05050, JetBrains Mono 10px

Token naming

Day-mode values live under the standard --wa-color-* / --fdt-* tokens. Night-mode values get their own scoped overrides applied via a .fdt-night class on the map container:

.fdt-night {
  --fdt-map-canvas:        #140404;
  --fdt-map-land:          #1A0606;
  --fdt-map-elevation-mid: #2A0B0B;
  --fdt-map-elevation-hi:  #3A1010;
  --fdt-map-contour-major: #6B1A1A;
  --fdt-map-road-motorway: #C03838;
  --fdt-map-settlement-major: #E04040;
  /* etc */
}

Tactical overlays in night mode

APP-6D symbology and status indicators break the red-only rule - operator readability on mission-critical information overrides dark-adaptation preservation. The system offers three night-mode intensities:

  • Standard night (default): base map fully red; tactical overlays render in their normal affiliation colors (friendly blue, hostile red, neutral green, caution amber) but dimmed ~40% luminance to reduce bleed-through. Balance between readability and dark-adaptation.
  • Strict red: base map fully red; tactical overlays render shape-only with red outlines. Affiliation distinguished by APP-6D geometry (rounded rect / diamond / square / quatrefoil), not color. Maximum dark-adaptation preservation, reduced information bandwidth. Operator opt-in.
  • Daylight bleed-through: emergency only. Night mode base retained but overlays render at full luminance. Used when immediate situation awareness trumps dark-adaptation - a hot contact, an incoming track. Auto-reverts to standard night after 60 seconds.

Mode switching is a single keypress (N for cycle) or settings toggle. The transition is instant - no fade, no animation.

Hierarchy - terrain-forward

The rule: contours and elevation are the loudest features on the map. Roads, settlements, and buildings recede until zoom demands them.

Conventional consumer maps (Google, Apple) are road-forward - the road network is the star. FDT maps are terrain-forward - the land is the star. An operator reading a GRIDWATCH map sees the shape of the ground first, not the street grid.

Implementation:

  • Contours always visible at zoom ≥ 8. Majors every 100m; minors every 20m at zoom ≥ 10.
  • Roads classed and quieted by tier, fading to near-invisible at the tertiary level.
  • Buildings appear at zoom 14+, drawn as quiet fills - never as detail heroes.
  • Labels always uppercase Barlow Condensed tracked.

Zoom tiers (GRIDWATCH)

Tier Zoom Use
Global 0–4 Strategic awareness, theater selection
Theater 5–8 Regional C2, AO assignment
Operational 9–12 Battalion-to-brigade planning, fire support coordination
Tactical 13–15 Company-level maneuver, urban approach
Close 16–17 Squad maneuver, building-by-building
Micro 18–19 Room-by-room (3D building data where available)

Each tier has its own label density, feature visibility, and overlay rules. Zoom transitions are instant - no progressive pan/zoom animation that would obscure operator awareness mid-planning.

Rendering

Client-side via MapLibre GL JS consuming PMTiles archives. Self-hosted - no tile server call at runtime, no external dependency. Tiles regenerated quarterly from the Overture Maps monthly release, or on-demand for a specific AO.

Style JSON lives in the design system repo alongside token definitions at fdt-design/maps/. Day and night styles version together - changes to the day schema propagate to night via shared feature-layer definitions; only color values differ.

QRF and other products

QRF uses map imagery as scenario backdrop only - a single static extent per scenario, rendered at a fixed zoom appropriate to the AO (Korengal Valley, Kherson bridgehead, Taiwan Strait, etc.). Same style tokens apply, so a QRF scenario map reads as visually consistent with GRIDWATCH even though it’s not a live tile pyramid.

GHOST GRID renders its own radar scope - no map tiles involved.