TARGETED.ARMY / FRONT-END SYSTEMCanonical

Consolidation Style Guide

The canonicalization rules and the clear duplicate families found during the front-end inventory.

Open Panel Reference All Style Sections

4 Component References

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.

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 / Reference

No new class

Canonical 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.

.button-primary.account-button.primary.foia-button-primary.outreach-launch

→Accent 01

Friendly Name: Map 01 — Button Families
GUID: 8a17b3e1-1202-4d24-9a71-000000001202
Use in: Sitewide Migration After Guide Approval

Show Class & CSS

Class / Reference

ta-button variants

Canonical CSS

Accent 01 ← .button-primary, .account-button.primary, .foia-button-primary, .outreach-launch; Dark 01 ← .foia-button-dark, .outreach-dark-button; Outline 01 ← .button-outline, .evidence-light-button;

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

Component Reference

Map 02 — Field Families

Account, FOIA, outreach, community, and evidence fields share one geometry and focus behavior in the canonical guide.

.account-field.foia-field.outreach-field.record-form-grid label

→Field 01

Friendly Name: Map 02 — Field Families
GUID: 8a17b3e1-1203-4d24-9a71-000000001203
Use in: Sitewide Migration After Guide Approval

Show Class & CSS

Class / Reference

ta-field

Canonical CSS

Field 01 ← .account-field, .foia-field, .outreach-field, .record-form-grid label, .quick-more-grid label;

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

Component Reference

Map 03 — Message Families

Errors, warnings, success notices, and information strips use one layout with semantic modifiers.

.account-error.outreach-error.quick-error.evidence-error

→Message 01

Friendly Name: Map 03 — Message Families
GUID: 8a17b3e1-1204-4d24-9a71-000000001204
Use in: Sitewide Migration After Guide Approval

Show Class & CSS

Class / Reference

ta-alert variants

Canonical CSS

Message 01 ← .account-error, .outreach-error, .foia-suggestion, .quick-error, .evidence-error, .community-form-warning;

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