Component library

Every FDT product shares one system: the name is the identity, set as an UPPERCASE wordmark with no product color of its own.

Consumer provides: the product name, its capability as an eyebrow, one descriptor sentence and its platform.

<article class="fdt-card"><div class="fdt-card-body">
  <div class="fdt-kicker">Counter-UAS</div>
  <h3 class="fdt-card-title">GHOST GRID</h3>
  <p class="fdt-card-text">Counter-unmanned aircraft systems.</p>
</div><footer class="fdt-card-foot">Desktop</footer></article>

• Names: one real word or a two-word compound, all caps, no mythology. QRF is grandfathered.
• No second brand color per product. Products differ by name, never by hue.
• READBOARD and Defense Fit are FDT apps built on this system.

The eyebrow is the micro uppercase line, in electric-400, that sits above every Display or section heading.

Consumer provides: A short category or context phrase (2–5 words). Write it in sentence form; the class sets the capitals and 0.18em tracking.

<div class="fdt-kicker">Defining the future battlespace</div>
<h1 class="display-l">Decision Superiority at the Speed of Relevance</h1>

• Use the eyebrow type style (11px Inter 500, 0.18em, UPPERCASE) via .fdt-kicker; 6–10px above the heading.
• One eyebrow per heading; never stack two.
• Color is electric-400 (5.8:1 on navy-900).
• Use · to join two facts: PROGRAM · LIVE.

The command control: every button is a verb, set UPPERCASE in Barlow Condensed 700.

Consumer provides: A label that is an imperative verb (Acquire, Create mission, never Submit or “please”), a variant class and optionally a size class.

<button class="fdt-btn fdt-btn--brand">Acquire</button>
<button class="fdt-btn fdt-btn--neutral">Cancel</button>
<button class="fdt-btn fdt-btn--danger">Disengage</button>

• Variants: --brand (one primary per view, fdt-glow-md), --neutral, --outlined, --plain, --danger, --danger-plain, --success, --warning.
• Locked labels: white on electric-500/hostile; navy-900 on neutral/caution (white fails there).
• Sizes: --sm 32px, default 36px, --lg 44px for mobile primaries. --icon for square icon buttons; give it an aria-label.
• Focus is the two-layer ring (2px electric-500 + fdt-glow-sm). No gradients, no shrink on press.
• Neutral border is steel-400 so the control edge reads at 3:1.

An on/off choice that is submitted with a form.

Consumer provides: A label for each box; related boxes go in a fieldset with a legend.

<label class="fdt-check"><input type="checkbox"><span></span>Confirm before engage</label>

• 18px box, steel-400 border at rest, electric-500 fill with white check when on.
• For instant settings use Switch instead.

A drop zone for uploading files.

Consumer provides: Accepted types and size limit in the help line.

<div class="fdt-drop">Drop OPORD here or <strong>browse</strong></div>

• Dashed steel-400 at rest; electric-500 with fdt-glow-sm while dragging.

A top-aligned label, an input, and help or error text below.

Consumer provides: A <label for>, the input, and help text; on failure an error that states what is wrong, then how to fix it.

<div class="fdt-field">
  <label class="fdt-label" for="cs">Callsign<span class="req">*</span></label>
  <input id="cs" class="fdt-input" aria-required="true">
  <span class="fdt-help">3 to 12 uppercase characters</span>
</div>

• Label Inter 500 13px fog-100; required asterisk steel-300 (not red). Help 12px steel-300.
• Input navy-700 with a steel-400 border (3:1), electric-500 + fdt-glow-xs on focus.
• Invalid: 2px hostile border, message in hostile-300 with a warning glyph; set aria-invalid and aria-describedby.
• Validate on blur. Width matches the data; single column, 40ch cap. Never “please.”

How fields assemble into a form: step indicator, section headings and the action row.

Consumer provides: Sections of related fields; for 5+ sections, a step list.

<ol class="fdt-steps"><li class="done"><b>01</b>Mission</li><li class="current"><b>02</b>Assets</li>…</ol>
<div class="fdt-form-section">Assets</div>
<div class="fdt-actions"><button class="fdt-btn fdt-btn--plain">Back</button><button class="fdt-btn fdt-btn--brand">Next</button></div>

• Field gap space-4 (compact space-2); section gap space-6 above.
• Primary right; Cancel left of it; destructive far left.
• Never auto-advance; never full-width submit outside mobile.

Numeric entry with a stepper; the value is data, so it sets in mono, right-aligned.

Consumer provides: Min, max, step and a unit in the label.

<div class="fdt-number"><input class="fdt-input" value="1500"><div class="fdt-number-step"><button aria-label="Increase">▲</button><button aria-label="Decrease">▼</button></div></div>

• Size to the data: about 6–12 characters wide.
• Range errors: Value exceeds maximum of 5,000.

One choice from a short visible set.

Consumer provides: A fieldset + legend and two to six options.

<label class="fdt-check"><input type="radio" name="mode"><span></span>Passive</label>

• More than six options: use Select.

A 1–N score for retrospectives and debriefs.

Consumer provides: The value and maximum, plus a text equivalent.

<div class="fdt-rating" aria-label="3 of 5">…</div>

• Filled electric-500, empty navy-700 with a steel-400 outline.

A radio group drawn as buttons, for switching a view mode in place (QRF VISUAL / THERMAL / SIGNALS).

Consumer provides: Two to four short UPPERCASE options.

<div class="fdt-segmented" role="radiogroup"><label><input type="radio" name="f" checked><span>VISUAL</span></label>…</div>

• It is a radio group, not tabs: it changes a mode, not a page.
• Selected: electric-500 fill, white label.

Single choice from a list; the open list uses the Dropdown surface.

Consumer provides: A label and options; a placeholder option only when no default makes sense.

<select class="fdt-select"><option>Fortress</option></select>

• Multi-select shows chosen values as Tags.
• Options hover to electric-500 at 15%.

A value chosen along a range, with its value shown in mono.

Consumer provides: Min, max, step and a live readout.

<input type="range" class="fdt-slider" style="--fill:64%">

• Always show the number; the track alone is not precise.
• Set --fill to the value as a percentage.

An instant on/off setting that applies without a submit.

Consumer provides: A label stating the setting, not the action.

<label class="fdt-switch"><input type="checkbox" role="switch"><span></span>Auto-engage</label>

• Off: navy-700, steel-400 border. On: electric-500 with fdt-glow-xs.

Multi-line free text, styled like the input and set in body type.

Consumer provides: Label, textarea and optional help; same validation states as FormField.

<textarea class="fdt-textarea"></textarea>

• Resizes vertically only; minimum 88px.
• Full column width for comments and descriptions.

A count or short capsule anchored to an icon, avatar or menu label.

Consumer provides: The count or label and an aria-label that names what is counted.

<span class="fdt-anchor"><svg class="fdt-icon">…</svg><span class="fdt-badge b-hostile" aria-label="7 unread notifications">7</span></span>

• white on electric-500/hostile; navy-900 on neutral/caution.
• Anchored badges carry a 2px navy-900 ring.

An inline contextual panel that stays in the page flow.

Consumer provides: A bold lead sentence and one line of detail; the variant.

<div class="fdt-callout fdt-callout--warning"><span class="mk"></span><div><b>Link degraded.</b> Telemetry at 0.5 Hz.</div></div>

• Use --danger as the form error summary when 3+ fields fail.
• The training disclaimer is required on any surface with synthetic scenarios.

A full-width banner stating the security or program context of a surface; always visible.

Consumer provides: The marking text; segments joined by // or —.

<div class="fdt-strip fdt-strip--sensitive">CUI // Program sensitive</div>

• Fills: hostile and fdt-classification-controlled with white; fdt-classification-sensitive and neutral with navy-900.
• Never dismiss, animate or glow it.

A non-modal panel with richer content anchored to a trigger.

Consumer provides: A title, a few readouts and at most one action.

<div class="fdt-popover"><h4>UNK-003</h4>…</div>

Determinate progress for mission timers and loads.

Consumer provides: The value (--v) and a mono readout beside it.

<div class="fdt-progress" role="progressbar" aria-valuenow="65" style="--v:65%"><i></i></div>

• Track steel-500, fill electric-500 with fdt-glow-xs; semantic variants for resources.

Circular progress for compact readouts.

Consumer provides: The value; stroke-dasharray = value × 150.8.

<svg class="fdt-ring" viewBox="0 0 56 56"><circle class="t" cx="28" cy="28" r="24"/><circle class="v" cx="28" cy="28" r="24" stroke-dasharray="108.6 150.8"/></svg>

Content-shaped placeholders while data loads.

Consumer provides: Blocks sized like the content they replace.

<div class="fdt-skel" style="height:12px"></div>

• Slow steel-500 shimmer on navy-700; static under reduced motion.

An indeterminate loading indicator.

Consumer provides: An accessible label naming what is loading.

<span class="fdt-spinner" role="status" aria-label="Loading tracks"></span>

• Linear rotation, never spring. Stops under reduced motion.

Persistent state of one entity: tags for plural metadata, pills for one declarative status.

Consumer provides: A label from a locked vocabulary and its variant class: is-neutral, is-electric, is-caution, is-hostile, is-steel.

<span class="fdt-pill is-neutral">FIELDED</span>
<span class="fdt-tag is-caution">Program sensitive</span>

• Vocabularies: program lifecycle, release tier (ALPHA BETA RC GA LEGACY EOL), availability (ONLINE DEGRADED OFFLINE MAINTENANCE UNKNOWN), account state, tactical state.
• Text on tints: neutral, caution, electric-400, hostile-300, steel-300; all 4.4:1 or better on navy-800/900. Keep tinted pills off navy-700.
• Max 4 tags per entity, then +N. Never animate, glow, or make a status clickable (filter-chip dismiss is the one exception).

A transient notification, top-right on desktop and full-width top on mobile.

Consumer provides: A system-narrated title, one detail line, and the variant.

<div class="fdt-toast fdt-toast--success" role="status"><div><b>Sync complete</b>All assets reporting.</div><button class="x" aria-label="Dismiss">×</button></div>

• 4px left rule in the semantic color, as the spec defines; navy-700 surface.
• Auto-dismiss after 6s; errors stay until dismissed and use role="alert".

A terse label on hover or focus.

Consumer provides: One short phrase; never essential information.

<span class="fdt-tooltip" role="tooltip">Bearing to target · 045°</span>

• 500ms show delay, 100ms hide.
• fog-100 on navy-700.

The base panel; the Program Card composes it.

Consumer provides: Optional strip, classification tag, wordmark title, descriptor, body and a mono footer; one lifecycle pill.

<article class="fdt-card is-live">
  <div class="fdt-card-body">
    <div class="fdt-card-head"><span class="fdt-tag is-electric">FDT controlled</span><span class="fdt-pill is-neutral">FIELDED</span></div>
    <h3 class="fdt-card-title">GRIDWATCH</h3>
    <p class="fdt-card-text">…</p>
  </div>
  <footer class="fdt-card-foot">SECTOR 04 · 18:47Z</footer>
</article>

• navy-800, 1px navy-600, radius-md, no shadow.
• is-live earns fdt-glow-sm; hover shifts the border to electric-500.
• Wrap interactive cards in <a> for keyboard use. No colored left border, nothing above 8px.

The QRF decision card: situation, context, question and a 50/50 choice.

Consumer provides: Eyebrow, H2 problem, context, the question and two UPPERCASE actions.

<div class="fdt-decision"><div class="fdt-kicker">Situation</div><h2>…</h2><p>…</p><p class="q">…</p><div class="fdt-actions">…</div></div>

• Protect this shape. Full-width and bottom-anchored on mobile.

A collapsible section for secondary detail.

Consumer provides: A summary line and the hidden content.

<details class="fdt-details"><summary>Rules of engagement</summary><div>…</div></details>

• Chevron rotates 90° over 200ms.

A modal that blocks the surface until answered.

Consumer provides: A question title, one sentence of context and two actions.

<div class="fdt-dialog" role="dialog" aria-modal="true" aria-labelledby="t">…</div>

• Scrim navy-900 at 70% with 8px blur; panel navy-700, radius-md, no shadow.
• Escape dismisses; focus returns to the trigger.

A 1px navy-600 horizontal rule.

Consumer provides: Nothing; place between sections.

<hr class="fdt-divider">

• Never double, never decorative.

A side panel over the surface, opaque navy-800.

Consumer provides: A title, close control and content.

<aside class="fdt-drawer"><header>Track detail<button class="fdt-close">×</button></header><div class="body">…</div></aside>

• On mobile the map HUD collapses into a bottom drawer.

A dismissible announcement pinned above the top nav.

Consumer provides: An event tag, one line with the event name highlighted, and a dismiss control.

<div class="fdt-banner"><span class="fdt-tag is-caution">Event</span><span>… <span class="hl">AUSA 2026</span></span><button class="fdt-close">×</button></div>

• Truncates the title below 640px.

A feature cell for corporate pages: icon, H3 and one short paragraph.

Consumer provides: An icon, a title-case heading and up to two sentences.

<div class="fdt-card fdt-card--tile"><div class="fdt-card-body">…</div></div>

• Card at 50% surface opacity; icon stroke in the accent.
• Three or four per row; no filler stats.

Corner-anchored readout panels floating over the map.

Consumer provides: A wordmark title and label/value readouts.

<div class="fdt-hud is-live"><div class="fdt-hud-title">SECTOR 04</div><dl class="fdt-readout"><dt>Center</dt><dd>33TWN 24680 67890</dd></dl></div>

• navy-800 at 85% with 12px blur; live panels earn fdt-glow-sm.
• Readout labels steel-300, values fog-100 mono.

A territory card: sector name, tactical-state pill, terrain and sub-unit tags.

Consumer provides: Sector name, one tactical state, terrain descriptor and unit tags.

<article class="fdt-card"><div class="fdt-card-body">…<span class="fdt-pill is-hostile">CONTESTED</span>…</div></article>

• Tactical states: SECURED neutral, CONTESTED hostile, DENIED caution, UNKNOWN steel.
• Terrain line uses steel-300.

A row of large numerals with micro labels.

Consumer provides: Real, sourced numbers only, with a label each.

<div class="fdt-stats"><div class="fdt-stat"><b>12</b><span>Programs fielded</span></div>…</div>

• Numerals in display-l; labels in micro steel-300.
• 2×2 under 640px.

Primary navigation on mobile, in the thumb zone.

Consumer provides: 3–5 destinations with icon and label.

<nav class="fdt-tabbar"><a aria-current="page"><svg class="fdt-icon">…</svg>Map</a>…</nav>

• Active in electric-300.
• Pair with a persistent back button; no sidebars on mobile.

Hierarchical position, directly above the page title.

Consumer provides: Up to 5 levels below root; the last is the current page.

<nav class="fdt-crumbs" aria-label="Breadcrumb"><ol><li><a href="#">Missions</a></li><li aria-current="page">Timeline</li></ol></nav>

• Links steel-300, current fog-200. Separator / in steel-400.
• Never crumb the root.

A menu opened from a button.

Consumer provides: Items as verbs, optional shortcuts; destructive last.

<ul class="fdt-menu" role="menu"><li role="menuitem">Brief mission</li>…</ul>

• navy-700, radius-md, 1px navy-600. Hover electric-500 at 15%.
• Destructive items in hostile-300.

Paging for long operator lists, with a position count.

Consumer provides: Total, current range and pages.

<nav class="fdt-pages"><button class="fdt-page" aria-current="page">2</button>…</nav>

• Current page electric-500 with white.
• Prefer pagination to infinite scroll.

The primary nav inside dense products: 240px, collapsing to 48px icons.

Consumer provides: Section headers, items with icon + label, at most two levels.

<nav class="fdt-sidebar" aria-label="Primary"><div class="fdt-side-head">Operations</div><a class="fdt-side-item" aria-current="page"><svg class="fdt-icon">…</svg>Tracks</a></nav>

• Active: navy-700, 2px electric-500 left rule with glow, fog-100.
• Nested items indent with a navy-600 guide line.

Switch between 2–5 views at the same level.

Consumer provides: Short labels; the panel content.

<div role="tablist" class="fdt-tabs"><button class="fdt-tab" role="tab" aria-selected="true">Tracks</button>…</div>

• Inter 500 13px UPPERCASE. Active fog-100 with 2px electric-500 and glow.
• Never more than 5, never two rows, never for forms.

The global anchor: wordmark, 3–6 links, search, notifications and the user menu.

Consumer provides: The product wordmark, links in title case and the right-side controls.

<nav class="fdt-topnav" aria-label="Main"><a class="fdt-brand">FDT</a><div class="fdt-navlinks"><a class="fdt-navlink" aria-current="page">Programs</a>…</div></nav>

• 56px desktop, 48px mobile. Links steel-300, hover fog-100.
• Active link electric-300 with a 2px electric-500 rule and glow.
• More than 6 items means a sidebar surface.

A hierarchical tree: unit org charts, file browsers.

Consumer provides: Nodes with labels and optional mono identifiers.

<ul class="fdt-tree" role="tree"><li><span>1st Brigade</span><ul>…</ul></li></ul>

• 20px indent per level.

A user or unit marker: square, 2px radius, initials.

Consumer provides: Initials or a unit code; optional account-state dot.

<span class="fdt-avatar">FD</span>

• Square, never round.

Categorical comparison on the semantic palette.

Consumer provides: Data series; axis labels in micro mono.

<svg class="fdt-chart">…</svg>

• Axes steel-500, labels steel-300, primary series electric-500, comparison steel-300.
• Reveal animations instant under reduced motion.

Rows of records with micro headers, mono data and a status pill column.

Consumer provides: Column headers, rows, and which columns are numeric.

<table class="fdt-table"><thead><tr><th>Program</th>…</tr></thead><tbody><tr><td>GRIDWATCH</td><td class="num">1,204</td></tr></tbody></table>

• Numbers right-aligned in tabular mono. Rules navy-600, no zebra.
• Selected row navy-700 with a 2px accent edge.
• Paginate long lists (see Pagination). Intentional addition: the spec references table rows but defines no table.

A time series with an optional dashed comparison series.

Consumer provides: Series, time axis in Zulu, direct labels instead of a legend.

<svg class="fdt-chart">…</svg>

• Distinguish series by dash and lightness, not hue alone.

Four resource cells: colored micro label, large value and a thin fill bar.

Consumer provides: Label, value and fill per resource; color states its health.

<div class="fdt-meter"><div style="color:var(--neutral)"><span>Ammo</span><b>88%</b><i style="--v:88%"></i></div>…</div>

• Set the cell color; the label and bar inherit it.

An inline trend line beside a value.

Consumer provides: A short series and the current value.

<svg width="100" height="28"><polyline points="…" stroke="var(--electric-400)" fill="none"/></svg>

APP-6D / MIL-STD-2525D affiliation frames with mono track IDs.

Consumer provides: A 10-character SIDC in production; here an affiliation class and track ID.

<span class="fdt-track"><svg class="fdt-symbol fdt-symbol--hostile">…</svg>HST-014</span>

• Friendly rounded rectangle, hostile diamond, neutral square, unknown quatrefoil (dashed when pending).
• Strokes lightened (electric-400, hostile-300) for 3:1 on dark grounds. Preview frames are geometric stand-ins; production renders through <fdt-symbol>.
• Never fuse a UI icon with a frame.

A leader-line annotation that marks and labels a point on the map.

Consumer provides: The target point, a label line and acquire state.

<polyline class="fdt-callout-line" …/><path class="fdt-bracket" …/>

• 1px electric-500 leader; [ ] bracket terminal glows on acquire.

A full reference layout for frontierdefensetech.com: hero with eyebrow and display heading, programs grid, capability statement, footer.

Consumer provides: real program names, capability copy and stats; keep the hero’s house move (eyebrow, display-l, body, one primary button).

• Corporate register: generous whitespace, grid overlay as the only texture, restrained glow.
• Loads colors_and_type.css; icons are Font Awesome Sharp Regular from the FDT Pro kit.

A full reference layout for the GRIDWATCH simulator: classification strip, top bar, icon sidebar, map canvas with HUD panels, and a track roster.

Consumer provides: live tracks, sector data and the operator’s callsign; keep the classification strip at the top of every view.

• Product register: information-dense, grid overlay and ghost markers, glow on live elements only.
• Loads colors_and_type.css; icons are Font Awesome Sharp Regular from the FDT Pro kit.