TARGETED.ARMYFor Targeted Individuals
TARGETED.ARMY / FRONT-END SYSTEMCanonical

Messages Style Guide

Semantic messages, focused overlays, and empty states. Panel surfaces and the required joined War Room page frame live in the dedicated Panels reference.

Open Panel ReferenceAll Style Sections

3 Component References

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 / Reference
ta-alert with --info, --success, --warning, or --danger
Canonical CSS
.ta-alert { display:grid; grid-template-columns:auto minmax(0,1fr); border-left-width:4px; }
Legacy Equivalents to Consolidate

.account-error, .outreach-error, .foia-suggestion, .quick-error, .evidence-error

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

Component Reference

Overlay 01 — Modal

A focused decision surface. Use a deep soft shadow because the modal must visually detach from the page.

Confirmation

Delete This Record?

This cannot be undone. The original files will also be removed.

Friendly Name
Overlay 01 — Modal
GUID
8a17b3e1-0707-4d24-9a71-000000000707
Use in
Confirmation, Focused Create/Edit Flows
Show Class & CSS
Class / Reference
ta-modal-demo
Canonical CSS
.ta-modal-demo { max-width:560px; padding:24px; border:1px solid #55585e; background:#17181b; box-shadow:0 24px 75px rgba(0,0,0,.58); }

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

Component Reference

State 05 — Empty Container

Explain what is absent and give one clear next action when appropriate.

0

No Records Yet

Create the first record or adjust the current filters.

Friendly Name
State 05 — Empty Container
GUID
8a17b3e1-0708-4d24-9a71-000000000708
Use in
No Results, No Records, No Attachments
Show Class & CSS
Class / Reference
ta-empty-state
Canonical CSS
.ta-empty-state { min-height:190px; display:grid; place-content:center; border:1px dashed #484b51; background:#131416; }
Legacy Equivalents to Consolidate

.no-results, .community-empty, .evidence-empty, .outreach-empty-list

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