Design fixture
Status badge set
Provide compact status labels for done, next, later, planned, implemented, pass, warning, and fail.
Good Example
Badges use short text labels, sufficient contrast, consistent dimensions, and no color-only meaning.
donenextlaterplannedimplementedpasswarningfail
Bad Example
Small colored dots require a legend, clip text on mobile, or use red/green alone.
Ambiguous decorative status without enough context, source, or command evidence.
States
- done
- next
- later
- planned
- implemented
- pass
- warning
- fail
Responsive Constraint
Badges wrap as a group without changing their internal dimensions or clipping labels.
Accessibility Constraint
Each badge contains readable text and enough contrast in light and dark modes.
Agent Check
Can an agent scan task state without reading surrounding paragraphs?
QA Gates
npm run qa:browsernpm run qa:aeo