TARGETED.ARMY / FRONT-END SYSTEMCanonical

Typography Style Guide

The approved public type families, sizes, weights, line heights, casing, and text colors. Author every title and short standalone interface phrase of one to four words in Title Case. Paragraphs and longer sentences remain sentence case; titles use light gray—not white—as their normal color.

Open Panel Reference All Style Sections

14 Component References

Style Guide Section

Typography 01 — Type System

8a17b3e1-1300-4d24-9a71-000000000013

Component Reference

System 01 — Approved Type Scale

Use these roles instead of inventing one-off sizes. Normal titles and prose use the gray hierarchy; reserve white for selected controls, inverse button text, and exceptional contrast.

Role	Family	Size	Line	Weight	Case	Color
Display Title	Geist Sans	40–72px	.98	800	Title Case	`#d7d9dd`
Page Heading	Geist Sans	30–46px	1.05	700	Title Case	`#d7d9dd`
Section Heading	Geist Sans	20px	1.2	600	Title Case	`#d7d9dd`
Control Title	Geist Sans	14px	1.35	400	Title Case	`#d7d9dd`
Lead Copy	Geist Sans	17px	1.7	400	Sentence	`#c6c8cd`
Body Copy	Geist Sans	14px	1.7	400	Sentence	`#b5b7bc`
Supporting Text	Geist Sans	12px	1.55	400	Sentence	`#92949a`
Control Value	Geist Sans	12px	1.45	400	Title Case ≤4	`#c6c8cd`
Helper Text	Geist Sans	11px	1.45	400	Sentence	`#92949a`
Metadata	Geist Mono	10px	1.45	400	Title Case → Uppercase	`#92949a`
Button Label	Geist Mono	10px	1.2	400	Title Case → Uppercase	`#d7d9dd`
Eyebrow / Technical	Geist Mono	10px	1.35	400	Title Case → Uppercase	`var(--theme-accent)`
Metric Value	Geist Sans	30px	1	700	Numeric	`#d7d9dd`

Friendly Name: System 01 — Approved Type Scale
GUID: 8a17b3e1-1301-4d24-9a71-000000001301
Use in: Every Public Route and Component

Show Class & CSS

Class / Reference

ta-display; ta-heading; ta-subheading; ta-control-title; ta-lead; ta-body; ta-supporting; ta-helper; ta-meta

Canonical CSS

--ta-title:#d7d9dd; --ta-copy-primary:#c6c8cd; --ta-copy-secondary:#b5b7bc; --ta-copy-muted:#92949a; /* Core text sizes: 10, 11, 12, 14, 17, 20, 30, plus responsive headings. Icon glyph dimensions are component-specific. */

Legacy Equivalents to Consolidate

Existing public route CSS still contains one-off sizes and direct white text. Future migration work should map those rules to this scale and gray hierarchy rather than add new values.

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Font 01 — Geist Sans

The primary reading and interface family. Use it for titles, body copy, form values, navigation, and normal public UI text. Compact button labels remain Geist Mono and are authored in Title Case even when their established treatment renders uppercase.

Geist Sans

Clear Public Information and Dependable Interface Text

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789

Friendly Name: Font 01 — Geist Sans
GUID: 8a17b3e1-1302-4d24-9a71-000000001302
Use in: Titles, Reading Copy, Controls, Navigation, Cards

Show Class & CSS

Class / Reference

ta-font-sans; var(--font-geist-sans)

Canonical CSS

.ta-font-sans { font-family:var(--font-geist-sans),Arial,sans-serif; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Font 02 — Geist Mono

The technical accent family. Restrict it to eyebrows, metadata, GUIDs, compact statuses, compact button labels, and short technical labels; do not use it for paragraphs.

Geist Mono

TECHNICAL LABEL · STATUS · GUID · 10:30 AM

8a17b3e1…1303 · /styles/typography#GUID

Friendly Name: Font 02 — Geist Mono
GUID: 8a17b3e1-1303-4d24-9a71-000000001303
Use in: Eyebrows, Metadata, Identifiers, Compact Technical Labels

Show Class & CSS

Class / Reference

ta-font-mono; var(--font-geist-mono)

Canonical CSS

.ta-font-mono { font-family:var(--font-geist-mono),monospace; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Title 01 — Display Title

The main message on a landing page or major directory. Keep it short, author it in Title Case, and do not force it to uppercase with CSS.

Take Action.
Create Change.

Friendly Name: Title 01 — Display Title
GUID: 8a17b3e1-0103-4d24-9a71-000000000103
Use in: Home, Content Directory, Major Campaign Pages

Show Class & CSS

Class / Reference

ta-display

Canonical CSS

.ta-display { color:#d7d9dd; font-size:clamp(40px,6vw,72px); font-weight:800; line-height:.98; letter-spacing:-.055em; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Title 02 — Page Heading

The standard large page or major section heading. Author the words in Title Case and use the shared light-gray title token.

Build a Record That Can Endure Scrutiny

Friendly Name: Title 02 — Page Heading
GUID: 8a17b3e1-0104-4d24-9a71-000000000104
Use in: Directories, Tools, Account Pages, Community

Show Class & CSS

Class / Reference

ta-heading

Canonical CSS

.ta-heading { color:#d7d9dd; font-size:clamp(30px,4vw,46px); font-weight:700; line-height:1.05; letter-spacing:-.04em; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Title 03 — Section Heading

The standard heading inside a panel, card group, or page section. Always author visible title text in Title Case.

Organize Supporting Evidence

Friendly Name: Title 03 — Section Heading
GUID: 8a17b3e1-1304-4d24-9a71-000000001304
Use in: Panels, Cards, Tool Sections, Modal Headings

Show Class & CSS

Class / Reference

ta-subheading

Canonical CSS

.ta-subheading { color:#d7d9dd; font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-.025em; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Title 04 — Control Title

A compact title inside a control or component, such as Local Time. It uses authored Title Case, regular weight, and the same light-gray title color.

TimeLocal Time

Friendly Name: Title 04 — Control Title
GUID: 8a17b3e1-1305-4d24-9a71-000000001305
Use in: Date-Time Controls, Compact Panel Headings, Field Groups

Show Class & CSS

Class / Reference

ta-control-title

Canonical CSS

.ta-control-title { color:#d7d9dd; font-size:14px; font-weight:400; line-height:1.35; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Copy 01 — Lead & Body Copy

Lead copy is 17px light gray; normal body copy is 14px secondary light gray. Both use comfortable 1.7 leading and sentence case.

This lead introduces the purpose of a section without overpowering its title.

Reading copy uses a comfortable line height and a restrained width so longer instructions remain clear.

Friendly Name: Copy 01 — Lead & Body Copy
GUID: 8a17b3e1-0105-4d24-9a71-000000000105
Use in: Every Public Route

Show Class & CSS

Class / Reference

ta-lead; ta-body

Canonical CSS

.ta-lead { color:#c6c8cd; font-size:17px; font-weight:400; line-height:1.7; } .ta-body { color:#b5b7bc; font-size:14px; line-height:1.7; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Copy 02 — Supporting Text

Short secondary copy at 12px. Use muted gray and never reduce important instructions to this size.

Supporting text adds useful context without competing with the primary instruction.

Friendly Name: Copy 02 — Supporting Text
GUID: 8a17b3e1-1307-4d24-9a71-000000001307
Use in: Compact Descriptions and Secondary Context

Show Class & CSS

Class / Reference

ta-supporting

Canonical CSS

.ta-supporting { color:#92949a; font-size:12px; font-weight:400; line-height:1.55; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Copy 03 — Helper Text

Field guidance and compact context use one 11px helper role. Keep it short, sentence case, and adjacent to the control it explains.

Use 8–24 characters. Letters, numbers, and hyphens are allowed.

Friendly Name: Copy 03 — Helper Text
GUID: 8a17b3e1-1308-4d24-9a71-000000001308
Use in: Form Guidance, Constraints, Character Counts, Compact Context

Show Class & CSS

Class / Reference

ta-helper; ta-field small

Canonical CSS

.ta-helper, .ta-field small { color:#92949a; font-size:11px; font-weight:400; line-height:1.45; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Label 01 — Theme Accent Eyebrow

The one canonical eyebrow treatment. Author its source text in Title Case; the established technical treatment renders it uppercase, mono, in the selected theme color, and non-bold. It sits above a title and should never compete with it.

Choose Your Next Step

A Quiet Label Above a Strong Title

Friendly Name: Label 01 — Theme Accent Eyebrow
GUID: 8a17b3e1-0106-4d24-9a71-000000000106
Use in: Home, Content, Tools, Panels, Community, Account, Evidence Center

Show Class & CSS

Class / Reference

ta-eyebrow

Canonical CSS

.ta-eyebrow { color:var(--theme-accent); font:400 10px/1.35 var(--font-geist-mono),monospace; letter-spacing:.16em; text-transform:uppercase; }

Legacy Equivalents to Consolidate

.eyebrow, .tiny-label, .tool-category, .content-library-kicker, .community-eyebrow, .evidence-kicker, .foia-kicker

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Meta 01 — Technical Metadata

Compact muted metadata for dates, categories, authors, counts, routes, and identifiers. Author normal words in Title Case; this short technical role may render them uppercase.

Research · Updated July 17, 2026 · 8 Min Read

Friendly Name: Meta 01 — Technical Metadata
GUID: 8a17b3e1-0902-4d24-9a71-000000000902
Use in: Articles, Resources, Records, Cards

Show Class & CSS

Class / Reference

ta-meta

Canonical CSS

.ta-meta { color:#92949a; font:400 10px/1.45 var(--font-geist-mono),monospace; letter-spacing:.07em; text-transform:uppercase; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Code 01 — Inline Reference

Use for class names, routes, GUIDs, and small technical values inside prose. It stays light gray rather than white.

Use ta-button ta-button--primary for Accent 01.

Friendly Name: Code 01 — Inline Reference
GUID: 8a17b3e1-0903-4d24-9a71-000000000903
Use in: Style Guide and Technical Instructions

Show Class & CSS

Class / Reference

ta-inline-code

Canonical CSS

.ta-inline-code { color:#d7d9dd; padding:3px 6px; border:1px solid #3e4147; background:#111214; font:400 12px/1.4 var(--font-geist-mono),monospace; }

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Component Reference

Rule 01 — Title Case for Headers, Links & Buttons

Author headers, standalone links, buttons, and every other short interface phrase in Title Case. This includes headings, field labels, tabs, menu items, badges, dropdown headings, summaries and options, short statuses, and words following numbers such as 2 Selected. Keep paragraphs, instructions, validation messages, helper sentences, and longer descriptions in sentence case. Preserve acronyms, brand casing, and intentionally uppercase technical roles. Write casing in the source; never use CSS text-transform: capitalize.

Header

Download the Evidence Package

Authored Title Case

LinkPackage ManifestAuthored Title Case

ButtonAuthored Title Case

Friendly Name: Rule 01 — Title Case for Headers, Links & Buttons
GUID: 8a17b3e1-1306-4d24-9a71-000000001306
Use in: All Headers, Standalone Links, Buttons, Labels, Menus, Options, Badges, and Short UI Phrases

Show Class & CSS

Class / Reference

Editorial rule; no transformation class

Canonical CSS

/* Header: Download the Evidence Package; Link: Package Manifest; Button: Complete ZIP Package. Author the words correctly; never use text-transform:capitalize to repair copy. */

Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.

Typography Style Guide

Take Action.Create Change.

Build a Record That Can Endure Scrutiny

Organize Supporting Evidence

A Quiet Label Above a Strong Title

Download the Evidence Package

Take Action.
Create Change.