Usage notes
- Primary label with neutral styling.
- Strong contrast without brand color.
- Keep text to 1-2 words.
Usage notes
- Secondary labels that should stay neutral.
- Lower visual weight while keeping structure.
- Pair with default or primary to establish hierarchy.
Usage notes
- Subtle metadata or low-priority tags.
- Minimal chrome keeps focus on content.
- Use on calm backgrounds with short labels.
Usage notes
- Errors or destructive states.
- Signals high risk and demands attention.
- Reserve for exceptional cases and add context.
Usage notes
- Navigational badges.
- Matches link affordance and reduces confusion.
- Wrap the label in a Link and keep it short.
Usage notes
- Space is tight and a symbol is enough.
- Icon-only badges save space.
- Pair with nearby text or a tooltip.
Usage notes
- An icon clarifies the label meaning.
- Speeds recognition at a glance.
- Keep the icon leading and the label short.
Usage notes
- Brand-primary emphasis.
- Anchors attention with brand color.
- Use solid for key tags and soft for supporting ones.
Usage notes
- Supporting categories.
- Moderate emphasis.
- Mix solid and soft to show hierarchy.
Usage notes
- Neutral or alternate groupings.
- Adds variety without heavy emphasis.
- Use sparingly alongside primary labels.
Usage notes
- Accent labels that need extra contrast.
- Adds visual contrast.
- Use sparingly to avoid noise.
Usage notes
- Labels that signal caution.
- Draws attention quickly.
- Keep wording explicit; use soft for low urgency.
Usage notes
- Errors or destructive states.
- Signals urgency.
- Pair with clear context and use sparingly.
Usage notes
- Completed or positive states.
- Confirms outcomes.
- Keep labels short.