One searchable reference for the public site. Panel CSS, panel examples, recovery rules, and the live joined War Room page-frame standard are at /styles/panels; use this page for every other component.
Complete themes, exact palettes, spacing, icons, borders, and shadow recipes that everything else inherits. A theme controls the entire interface—not only its accent color.
8a17b3e1-0100-4d24-9a71-000000000001
Component Reference
Theme 01 — Operations Room
A disciplined, high-contrast operations-room theme: near-black canvas, graphite working surfaces, thin metallic rules, the selected theme color for action and emphasis, and signal colors used only when they carry meaning. Geometry stays mostly square with restrained corner rounding.
Near-Black Canvas
Graphite Surface
Theme Color Marks ActionGreen Carries Status
Friendly Name
Theme 01 — Operations Room
GUID
8a17b3e1-0101-4d24-9a71-000000000101
Use in
Every Public Route
Show Class & CSS
Class / ReferenceTheme tokens on :rootCanonical CSS
--ta-canvas: #0d0e10; --ta-panel: #151618; --ta-panel-raised: #1b1c1f; --theme-accent: current theme color;
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Color 01 — Core Palette
These are the approved foundation colors. The selected theme color marks action and emphasis; green means online or successful only. Normal titles and prose use the documented light-gray hierarchy, with white reserved for inverse or selected states.
Theme Colorvar(--theme-accent)
Theme Hovervar(--theme-accent)
Signal Green#61bf7d
Canvas#0d0e10
Panel#151618
Raised#1b1c1f
Rule#45474d
Title Gray#d7d9dd
Primary Copy#c6c8cd
Secondary Copy#b5b7bc
Muted Copy#92949a
Friendly Name
Color 01 — Core Palette
GUID
8a17b3e1-0102-4d24-9a71-000000000102
Use in
Every Public Route
Show Class & CSS
Class / ReferenceCSS custom properties beginning --ta-Canonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Theme 02 — Black & Purple
The default palette uses a nearly black canvas, purple-black panels, violet rules, soft lavender copy, and electric purple actions. It is intentionally a complete environment—not one accent pasted onto another theme.
Near-Black Canvas
Purple-Black Surface
Electric Purple Marks ActionLavender Carries Copy
Friendly Name
Theme 02 — Black & Purple
GUID
8a17b3e1-0110-4d24-9a71-000000000110
Use in
Every Public, War Room, and Administration Route
Show Class & CSS
Class / Referencehtml[data-theme="purple"]Canonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Control 01 — Theme Switcher
The shared toolbar picker changes the complete interface immediately, stores the choice for future visits, and applies it before the page is shown so the previous theme does not flash.
Friendly Name
Control 01 — Theme Switcher
GUID
8a17b3e1-0111-4d24-9a71-000000000111
Use in
Public Header, Mobile Menu, Administration Toolbar
Show Class & CSS
Class / ReferenceThemeControl; theme-controlCanonical CSS
<ThemeControl /> /* data-theme is set on the html element and persisted as targetedarmy_theme. */
Source: app/ui/theme-control.tsx; app/globals.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Space 01 — Eight-Point Rhythm
Spacing follows a four-pixel base with an eight-point working rhythm. Prefer the named tokens instead of new one-off values.
4px
8px
12px
16px
24px
32px
48px
64px
Friendly Name
Space 01 — Eight-Point Rhythm
GUID
8a17b3e1-0107-4d24-9a71-000000000107
Use in
Every Layout and Component
Show Class & CSS
Class / Reference--ta-space-1 through --ta-space-16Canonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Shadow 01 — Hard Offset
Primary containers use a crisp down-right offset shadow, not a soft floating card shadow. Theme-accent echo shadows are subtle and optional. Overlays use a soft deep shadow because they must separate from the page.
Hard Offset8px 9px 0
Theme Echo-3px -3px 0
Overlay0 24px 75px
Friendly Name
Shadow 01 — Hard Offset
GUID
8a17b3e1-0108-4d24-9a71-000000000108
Use in
Panels, Cards, Menus, Modals
Show Class & CSS
Class / Reference--ta-shadow-offset; ta-box--raisedCanonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Icon 01 — Standard Line
Use the shared 24×24 line icon family. Standard stroke is 1.55–1.8, with round joins. Icons support labels; they do not replace clear text for unfamiliar actions.
ToolsEvidenceFOIAEmailCommunitySettings
Friendly Name
Icon 01 — Standard Line
GUID
8a17b3e1-0109-4d24-9a71-000000000109
Use in
Headers, Tool Cards, Navigation, Action Rows
Show Class & CSS
Class / ReferencePageIcon from app/ui/icons.tsxCanonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Style Guide Section
Typography 01 — Type System
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.
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.
--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
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.
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 / Referenceta-helper; ta-field smallCanonical 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
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.
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.
All Headers, Standalone Links, Buttons, Labels, Menus, Options, Badges, and Short UI Phrases
Show Class & CSS
Class / ReferenceEditorial rule; no transformation classCanonical 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.
Style Guide Section
Actions 01 — Buttons
One button system with semantic variants. Author every button label in Title Case. All labels are non-bold, controls share the same height within a row, and new page-level copies are not permitted.
8a17b3e1-0200-4d24-9a71-000000000002
Component Reference
Accent 01 — Primary Action
The single highest-priority action in a region. Avoid placing two Accent 01 buttons beside each other.
Friendly Name
Accent 01 — Primary Action
GUID
8a17b3e1-0201-4d24-9a71-000000000201
Use in
Submit, Save, Create, Publish, Continue
Show Class & CSS
Class / Referenceta-button ta-button--primaryCanonical CSS
.ta-button--primary { border-color: var(--theme-accent); background: var(--theme-accent); color: #fff; box-shadow: 4px 4px 0 rgb(from var(--theme-accent) r g b / .36); }
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Style Guide Section
Selection 01 — Tabs & Filters
Controls for changing panels, categories, views, or query scope. The default selected state is a solid theme-color surface with white text and the toolbox offset shadow.
8a17b3e1-0300-4d24-9a71-000000000003
Component Reference
Tabs 01 — Toolbox Tabs
The default selector style for tabs, route navigation, and single- or multi-select filters. Buttons, links, and checkbox-backed labels share one rounded shape and solid theme-color selected state.
Friendly Name
Tabs 01 — Toolbox Tabs
GUID
8a17b3e1-0301-4d24-9a71-000000000301
Use in
Home Toolbox, Tools Library, Evidence Tracker, File Explorer, Community, Member Access, Compact Category Selection
Show Class & CSS
Class / Referenceta-tabs; ta-tabs--two/three/four/five/stacked; ta-tab; ta-tab-choiceCanonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Tabs 02 — Segmented Panel
Use the toolbox tabs inside an enclosed card when switching between two to four mutually exclusive panels. Selection remains the solid theme color; the surrounding rail only groups the choices.
Friendly Name
Tabs 02 — Segmented Panel
GUID
8a17b3e1-0302-4d24-9a71-000000000302
Use in
Member Access Methods, Editor Modes, View Modes
Show Class & CSS
Class / Referenceta-tabs ta-tabs--two ta-segmented-tabsCanonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Search 01 — Search Control
A continuous 52px surface with icon, input, and optional clear action. Focus selects the complete outer control; the inner text input never draws its own border, ring, or glow.
Friendly Name
Search 01 — Search Control
GUID
8a17b3e1-0402-4d24-9a71-000000000402
Use in
Tools, Content, File Explorer, Community, Evidence Center
Show Class & CSS
Class / Referenceta-search-controlCanonical CSS
.ta-search-control { min-height:52px; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; padding:0 14px; border:1px solid #4a4d53; } .ta-search-control:focus-within { border-color:var(--ta-focus-ring); box-shadow:0 0 0 3px rgb(from var(--theme-accent) r g b / .16), 0 0 18px rgb(from var(--theme-accent) r g b / .16); } .ta-search-control > input:focus, .ta-search-control > input:focus-visible { border:0; outline:0; box-shadow:none; }
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Field 03 — Native Select Fallback
Use only when a browser-owned native menu is specifically required. It keeps the canonical trigger colors and 15px chevron inset, but its opened option panel cannot match the boxed site dropdown across browsers.
Friendly Name
Field 03 — Native Select Fallback
GUID
8a17b3e1-0404-4d24-9a71-000000000404
Use in
Native Fallback Only; Use Dropdown 02 for Normal Public Single-Choice Menus
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Dropdown 01 — Boxed Multi-Select
The canonical dropdown for choosing any number of values. It is the live Evidence Tracker pattern: a dark floating panel, individually boxed rows, visible theme-color checkboxes, and a fixed SVG chevron exactly 15px from the right edge and vertically centered.
Filter the LibraryChoose Categories
Friendly Name
Dropdown 01 — Boxed Multi-Select
GUID
8a17b3e1-0412-4d24-9a71-000000000412
Use in
Evidence Category Filters and Every Public Multi-Select Dropdown
Show Class & CSS
Class / ReferenceBoxedMultiSelect from app/ui/boxed-dropdown.tsx; ta-dropdown ta-dropdown--multiCanonical JSX
<BoxedMultiSelect
value={selected}
onChange={setSelected}
options={options}
summary={selected.length ? `${selected.length} Selected` : "All Categories"}
eyebrow="Filter the Timeline"
title="Choose Categories"
/>
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Dropdown 02 — Boxed Single-Select
The default public dropdown when only one value may be selected. It uses the same trigger, floating panel, boxed rows, and 15px centered chevron as Dropdown 01, but deliberately omits checkboxes and closes after selection. Every long list, including State and Committee, keeps the panel at a usable height and scrolls only the options region.
Choose OneCategory
Friendly Name
Dropdown 02 — Boxed Single-Select
GUID
8a17b3e1-0413-4d24-9a71-000000000413
Use in
Congress State, Committee and Page Size Filters; Categories, Sorting, Country, Time Zone, Severity, Units, Formats
Show Class & CSS
Class / ReferenceBoxedSingleSelect from app/ui/boxed-dropdown.tsx; ta-dropdown ta-dropdown--singleCanonical JSX
.themed-date-popover is the current Evidence Center implementation
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Date Time 01 — Calendar & Time Picker
The canonical date-time control. Hour, Minute, and AM/PM share the same 44px outer height; the compact Local Time title follows the light-gray Title Case rule.
Select Date & TimeJuly 2026
SMTWTFS
TimeLocal Time
Local
:
Friendly Name
Date Time 01 — Calendar & Time Picker
GUID
8a17b3e1-0504-4d24-9a71-000000000504
Use in
Evidence Records, Scheduled Actions, Event Forms, and Any Precise Local Timestamp
Show Class & CSS
Class / Referenceta-calendar ta-datetime-picker; ta-datetime-picker__time; ta-datetime-picker__actionsCanonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Style Guide Section
Feedback 01 — Messages & Overlays
Semantic messages, focused overlays, and empty states. Panel surfaces and the required joined War Room page frame live in the dedicated Panels reference.
8a17b3e1-0700-4d24-9a71-000000000007
Component Reference
Message 01 — Semantic Alert
One structure covers informational, success, warning, and error messages. Change the semantic modifier, not the layout.
i
Information
This explains an important detail.
✓
Saved
Your changes are available.
!
Review Needed
One item needs your attention.
×
Could Not Save
Correct the highlighted field and try again.
Friendly Name
Message 01 — Semantic Alert
GUID
8a17b3e1-0706-4d24-9a71-000000000706
Use in
Forms, Tools, Imports, Account and Community Feedback
Show Class & CSS
Class / Referenceta-alert with --info, --success, --warning, or --dangerCanonical CSS
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Menu 01 — Boxed Left Rail
The canonical persistent section menu for the Member Center and other multi-part workspaces. It borrows the improved dropdown and header-flyout language without behaving like a form control: rounded icon-led rows, neutral borders, short Title Case descriptions, a dark lift on hover, and a solid theme-color current row. Use buttons for same-page sections and links for routes; never add checkboxes or an active underline.
Friendly Name
Menu 01 — Boxed Left Rail
GUID
8a17b3e1-0802-4d24-9a71-000000000802
Use in
Member Center, Style Guide, Evidence, and Future Admin Guide
Show Class & CSS
Class / Referenceta-menu-list ta-side-nav; ta-menu-item ta-menu-item--section; ta-menu-item__icon--boxed; ta-menu-item__copy; ta-menu-item__arrowCanonical JSX
Source: app/settings/settings-panel.tsx; app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Menu 02 — Boxed Header Flyout
The shared header navigation for Content, Tools, Community, War Room, and About. Desktop uses boxed flyouts; mobile uses a full-height, two-level menu with section layers, Back and Close controls, route highlighting, focus containment, scroll locking, and the same icon-led destination rows. Both render from site-navigation.json through buildSiteNavigation, so destinations, labels, descriptions, active-route rules, and War Room tool order cannot drift between screen sizes. Use these navigation components for destinations; do not substitute a form-control dropdown.
Friendly Name
Menu 02 — Boxed Header Flyout
GUID
8a17b3e1-0804-4d24-9a71-000000000804
Use in
Desktop and Mobile Header: Content, Tools, Community, War Room, and About
Show Class & CSS
Class / ReferenceDesktopNavigation; MobileNavigation; NavigationFlyout; desktop-nav-menu; mobile-navigation-panel; navigation-flyoutCanonical JSX
.desktop-nav-menu > button { height:44px; border:1px solid #55575c; border-radius:4px; } .desktop-nav-menu > button[aria-expanded=true] { border-color:var(--theme-accent); background:var(--theme-accent); color:#fff; box-shadow:3px 4px 0 rgb(from var(--theme-accent) r g b / .42); } .navigation-flyout { width:390px; padding:18px; border:1px solid #4d4d51; border-radius:7px; background:linear-gradient(145deg,#1b1b1e,#111113); box-shadow:18px 20px 0 rgba(0,0,0,.3),-4px -4px 0 rgb(from var(--theme-accent) r g b / .1); }
Source: app/ui/site-navigation.json; app/ui/site-navigation.ts; app/ui/desktop-navigation.tsx; app/ui/mobile-navigation.tsx; app/ui/navigation-flyout.tsx; app/styles/canonical.css; app/globals.css. Existing shared components are identified when they remain the live implementation.
Style Guide Section
Editorial 01 — Content
Links, article text, and directory cards for content-heavy pages. Metadata and inline-code typography now live in the dedicated Typography section.
8a17b3e1-0900-4d24-9a71-000000000009
Component Reference
Link 01 — Inline Link
Inline links are theme-tinted and underlined. Author short standalone and action links in Title Case; sentence fragments inside prose follow the surrounding sentence casing. Do not rely on color alone.
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Link 02 — View All Link
The compact theme-color action used at the top right of a panel or section. It carries the V2 homepage View All treatment into the shared public style system.
Class / ReferencePanelPageHeader + ta-box or panel-articleCanonical CSS
.ta-reading-column { width:min(100%,780px); }
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Style Guide Section
Maintenance 01 — Consolidation
The canonicalization rules and the clear duplicate families found during the front-end inventory.
8a17b3e1-1200-4d24-9a71-000000000012
Component Reference
Rule 01 — Reuse Before Adding
Before adding CSS, search this page by friendly name, GUID, class, and purpose. Use the canonical class unchanged when it already fits.
1
Search → Reference → Reuse
Friendly names support conversation. GUIDs support exact links. Classes support implementation.
Friendly Name
Rule 01 — Reuse Before Adding
GUID
8a17b3e1-1201-4d24-9a71-000000001201
Use in
Every Future Front-End Task
Show Class & CSS
Class / ReferenceNo new classCanonical CSS
/* Search /styles first. Add a variant only when behavior or meaning is materially different. */
Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Component Reference
Map 01 — Button Families
Several route-level button names currently describe the same visual jobs. The guide intentionally exposes one button per job; these legacy selectors are migration aliases, not separate components.