UI kits

Reference HTML drawn directly from the design assets. Each example is a self-contained static page that links a single CSS source of truth (/colors_and_type.css) and renders against the FDT token surface. (/colors_and_type.css exposes tokens under unprefixed names like --navy-900 and --electric-500 for downstream-mock convenience; the in-site theme in assets/style.css keeps the --fdt-* namespace as documented in color.md.) Use them to verify visual fidelity, copy-paste structural snippets into downstream consumers, or sanity-check a token or component in isolation.

The shared CSS is also available as a downloadable artifact: /colors_and_type.css. The bundled examples link it via a root-relative path (<link rel="stylesheet" href="/colors_and_type.css">), which assumes the file is served at the site root — that’s how design.frontierdefensetech.com hosts it. If you’re hosting elsewhere, change the link to whichever relative path resolves the file in your environment (e.g. ./colors_and_type.css if you keep the CSS sibling to the HTML).

Full-page mocks

Two end-to-end pages that combine the system into the two surface registers — corporate marketing and the GRIDWATCH tactical product UI.

Single-concept previews

Small isolated pages — one idea each. Each preview is the canonical reference for the concept it covers.

Brand

Color

Components

Spacing

Type

Notes

• Examples render best on a dark surface. They are dark-native and do not have a light-mode variant.
• Until self-hosted WOFF2 payloads land, fonts fall back to system stacks. Inter renders correctly almost everywhere; Barlow Condensed and Inter Display fall back to the next available family in the stack.
• Lucide is loaded from CDN as a stroke-matched proxy for Font Awesome Sharp Regular until the FA Pro license is wired. The geometry is close, not exact — line caps are rounded in Lucide, square in Sharp.