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

Tags & Badges Style Guide

Compact status labels with strict semantic color use. Badges are non-bold and uppercase.

Open Panel ReferenceAll Style Sections

7 Component References

Style Guide Section

Status 01 — Tags & Badges

Compact status labels with strict semantic color use. Badges are non-bold and uppercase.

8a17b3e1-0600-4d24-9a71-000000000006
Component Reference

Green 01 — Online

The only sitewide online indicator. It says Online and never includes a separate green dot.

Online
Friendly Name
Green 01 — Online
GUID
8a17b3e1-0601-4d24-9a71-000000000601
Use in
Page and Tool Availability
Show Class & CSS
Class / Reference
ta-badge ta-badge--online
Canonical CSS
.ta-badge--online { border-color:#2f6647; background:rgba(47,102,71,.22); color:#75d491; }
Legacy Equivalents to Consolidate

.panel-page-status

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

Component Reference

Accent 02 — Live

Use for live content or an actively running feature, not as a duplicate online label.

Live
Friendly Name
Accent 02 — Live
GUID
8a17b3e1-0602-4d24-9a71-000000000602
Use in
Live Tools, Active Sessions, Live Rooms
Show Class & CSS
Class / Reference
ta-badge ta-badge--live
Canonical CSS
.ta-badge--live { border-color:var(--theme-accent-border); background:rgb(from var(--theme-accent) r g b / .15); color:var(--theme-accent-copy); }

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

Component Reference

Amber 01 — Member

Marks member-only access. It describes access, not health or readiness.

Members
Friendly Name
Amber 01 — Member
GUID
8a17b3e1-0603-4d24-9a71-000000000603
Use in
Member Tools and Protected Workspaces
Show Class & CSS
Class / Reference
ta-badge ta-badge--member
Canonical CSS
.ta-badge--member { border-color:#86501f; background:rgba(194,107,37,.15); color:#f0a45d; }
Legacy Equivalents to Consolidate

.tool-access.is-member

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

Component Reference

Blue 01 — Public

Marks public access or neutral information.

Public
Friendly Name
Blue 01 — Public
GUID
8a17b3e1-0604-4d24-9a71-000000000604
Use in
Public Tools, Neutral Information
Show Class & CSS
Class / Reference
ta-badge ta-badge--info
Canonical CSS
.ta-badge--info { border-color:#365d82; background:rgba(46,112,170,.14); color:#91c5ed; }
Legacy Equivalents to Consolidate

.tool-access.is-public

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

Component Reference

Count 01 — Numeric Badge

A compact numeric count. Keep the same semantic tone as the item it counts.

12
Friendly Name
Count 01 — Numeric Badge
GUID
8a17b3e1-0605-4d24-9a71-000000000605
Use in
Notifications, Replies, Results, Selected Items
Show Class & CSS
Class / Reference
ta-badge ta-badge--count
Canonical CSS
.ta-badge--count { min-width:28px; padding-inline:7px; border-radius:999px; }

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

Component Reference

Gold 01 — Warning

Use for a state that needs attention but is not a failure.

Review Needed
Friendly Name
Gold 01 — Warning
GUID
8a17b3e1-0606-4d24-9a71-000000000606
Use in
Incomplete Setup, Review Needed, Planned Availability
Show Class & CSS
Class / Reference
ta-badge ta-badge--warning
Canonical CSS
.ta-badge--warning { border-color:#7b5b24; background:rgba(159,107,27,.16); color:#e0b563; }

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

Component Reference

Rose 01 — Error

Use for failed, blocked, or invalid status. Pair with nearby recovery text.

Failed
Friendly Name
Rose 01 — Error
GUID
8a17b3e1-0607-4d24-9a71-000000000607
Use in
Failure States and Invalid Records
Show Class & CSS
Class / Reference
ta-badge ta-badge--danger
Canonical CSS
.ta-badge--danger { border-color:var(--theme-accent-border); background:var(--theme-accent-surface); color:var(--theme-accent-copy); }

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