tag system overhaul.

# SUB-009 , Tag system overhaul

Story

Cosmo's tag/chip/badge primitives have grown in parallel without a unifying convention. Multiple shapes carry overlapping semantics. Color coding competes across systems (status vs priority vs type vs counter). Tags are visually heavy , they crowd cards, fight for attention with the title, and steal density from the actual content. Some tags are pure labels where an icon would compress the same signal in 1/3 the footprint.

Goal: collapse the tag inventory, lock a single color-coding system per *axis* (status, type, priority), shrink defaults, and replace text with icon where the label has no information beyond the category itself.

Current inventory (rough scan)

| Primitive | Where | Examples | Carries | |---|---|---|---| | .type-chip | weekly card row1, detail panel | V, R1, R2 | task type + revision round | | .status-tag. | weekly card, detail panel header | Pending TL, Waiting on PG, Approved, Sent, Done, Stuck, Returned | apollo/cosmo stage_status | | .tag (with tag--sm, tag--cased, tag--outline, tag--green, tag--amber, etc.) | weekly group headers, kanban age, high-priority flag, TL marker | V 3/5, R 2, Done, 5d, High priority, TL | counters, age, flags, role | | .badge.bd | detail panel concept | Carbonator | concept name | | .qs-state | quota slot card | Ideas pending | slot readiness | | .tier-chip *(if still exists)* | ? | ? | priority tier |

Color tokens used across these: --orange-*, --green-*, --amber-*, --red-*, --accent-soft, --accent-dark, --build-600, plus the apollo HSL set when status-tag bridges in.

Problems

1. Color collision. Same hue (amber) used for Waiting on PG (status) AND R 2 (counter) AND tag--amber (generic warn). User sees amber, has to figure out which axis it's on. 2. Size. Default .tag + .status-tag are 11-13px text with 2-4px vertical padding. Multiplied across a card stack + group header + detail panel header, they outweigh the title. 3. Label-only tags. TL, Done, Sent, High priority , the *meaning* is the *category*. Icon would compress to 14px without losing signal. 4. Inconsistent shape. .type-chip is a square, .tag is a pill, .status-tag is a wider pill, .badge.bd is a stroke-only chip. No primitive is canonical.

Direction (working hypothesis)

| Axis | Primitive | Color rule | Size | |---|---|---|---| | Task type (R/V/NC) | .type-chip (keep) | Type-specific (R orange, V green, NC purple) , reserve these hues | sm only | | Apollo/Cosmo status | icon + tooltip (no text label) | One muted hue per "phase family" (waiting / blocked / progress / done) , 4 hues max | 14px icon | | Counters (age, R/V counts) | .tag.tag--sm.tag--mono | Neutral by default, hue only on overflow/alert | sm | | Flags (high priority, TL) | icon (no text) | Single hot color reserved | 14px icon | | Concept | .badge.bd (keep) | Stroke-only neutral | sm |

Rule: one axis per color family. Status owns amber/red/green for waiting/blocked/done. Priority owns the hot color. Counters stay neutral until overflow. Type owns its three reserved hues.

Rule: icons replace label-only text. Anything that doesn't read different from its hue (TL, Done, High priority, Sent, Pending TL) goes to icon + tooltip.

Rule: shrink defaults. All status/counter chips default to xs (10px text, 1-2px padding) instead of sm.

Open threads

• Full audit: enumerate every chip/tag/badge in DS + every consumer in screens/. Inventory file + dead-class list.
• Lock color rule per axis. Pick which hue family each axis owns. Document in cosmo-design/design-system/index.html Foundations.
• Pick icons for label-only categories. Lucide set. Confirm tooltip pattern (native title vs custom DS tooltip).
• Decide canonical primitive shape. Pill vs square vs stroke. Probably one shape per axis (square for type, pill for status, stroke for concept).
• Sizing pass: introduce tag--xs if not already. Or replace tag--sm default with smaller dimensions.
• Migration plan: deprecate redundant classes (mark in components.css, keep one release, remove after consumers migrate).
• Apply across: weekly card, kanban lane chip, detail panel header, group headers, backlog, prototype hubs.

Raw refs

• DS chips/tags/badges: cosmo-design/design-system/index.html (Components > Tags, Status tags, Badges).
• Tag CSS: cosmo-design/design-system/components.css.
• Heavy consumers: cosmo-design/screens/prototypes/weekly.html, V2 PlyCard.tsx, V2 weekly-page.css, ply-detail.js + wf.css.

Activity

• 2026-05-07 , Subject opened. Ishai flagged: color coding mixing, tags too big, icons for some. AB-056 added [m2] should, due 2026-05-25.