Components
Badges & status
A three-tier grammar. Metadata chips describe, inline state dots indicate, decision chips decide. Each tier is visually distinct so the eye knows what to read first.
.sc-meta ·Tier 2.sc-state ·Tier 3.sc-decision live inbadges.css.Metadata chip · .sc-meta
Neutral chip with a small colored dot. For type, role, category, source, jurisdiction — anything that describes a record without making an assertion about its state. Color does one job: the dot.
State indicator · .sc-state
No chip — just a 7px colored square + text. Lives inline in table cells, sidebars, anywhere a phase needs to register without weight. The lightest possible touch.
Decision chip · .sc-decision
Confident filled chip with a leading icon. Reserved forterminal outcomes — the thing that wins the row. Right-aligned in tables. At most one per row.
Filled is the default. Outline is for lighter contexts (sidebars, summary cards) where the row already has plenty of weight elsewhere.
In context · claims table
Metadata describes (left), state indicates phase (middle, lightest), decision dominates (right column).
How the grammar works
Three tiers, three jobs. If you find yourself wanting to mix them, you're probably solving the wrong problem.
Tier 1 = nouns
Type, role, source, plan. Things that don't change much. Always neutral chip + dot.
Tier 2 = verbs (in-progress)
Phases, severity, activity. No chip — inline dot + text. Lightest weight.
Tier 3 = verdicts
Final outcomes only. Filled chip with icon. At most one per row.
Decisions go right
The eye scans toward the answer. Honor that. Decisions get their own column, right-aligned.
Title case, not all caps
"Approved", not "APPROVED". The icon does the shouting.
Don't invent new tiers
Three is the system. If something doesn't fit, it's almost certainly metadata or a state — not a new chip.