Badges
Badges are compact labels used for status indicators, progress markers, and category tags. They are small and non-intrusive — consistent with the 65% Minimal personality position. Badges communicate state without demanding attention.
Token source: tokens/component/badge.json
Base Specifications
Section titled “Base Specifications”All badge variants share these properties:
| Property | Token | Resolved value |
|---|---|---|
| Font size | primitive.font-size.11 | 11px |
| Font weight | primitive.font-weight.semibold | 600 |
| Letter spacing | primitive.letter-spacing.wide-2 | 0.02em |
| Border radius | primitive.radius.sm | 4px |
| Padding Y | primitive.spacing.4 | 4px |
| Padding X | primitive.spacing.10 | 10px |
Variants
Section titled “Variants”Success
Section titled “Success”For positive indicators — completed sessions, progress milestones, habituation markers.
| Property | Token | Resolved value |
|---|---|---|
| Background | semantic.color.feedback.success | #98D398 |
| Text | primitive.color.white | #FFFFFF |
COMPLETE
Warning
Section titled “Warning”For attention-needed states — pending actions, upcoming session reminders.
| Property | Token | Resolved value |
|---|---|---|
| Background | semantic.color.feedback.warning | #D97706 |
| Text | primitive.color.white | #FFFFFF |
PENDING
For error or critical states. Used sparingly — the brand avoids creating alarm.
| Property | Token | Resolved value |
|---|---|---|
| Background | semantic.color.feedback.error | #DC2626 |
| Text | primitive.color.white | #FFFFFF |
MISSED
Neutral
Section titled “Neutral”For informational labels — content categories, session types, duration tags.
| Property | Token | Resolved value |
|---|---|---|
| Background | primitive.color.dim-brown | #B09A90 |
| Text | primitive.color.white | #FFFFFF |
CBT SESSION
Showcase
Section titled “Showcase”Light mode
SUCCESS WARNING ERROR NEUTRAL
Dark mode
Success Warning Error Neutral
In context
Sleep session
Completed23 minutes · Ocean waves · Low enrichment
Usage Guidelines
Section titled “Usage Guidelines”- Badges are read-only. They communicate state; they are not interactive elements. If you need a tappable label, use a small button or chip pattern instead.
- Use neutral as the default. The warm dim-brown is the least visually demanding variant. Reserve success, warning, and error for states that genuinely require differentiated communication.
- Avoid stacking many badges. A row of three or more badges creates visual clutter. If content needs multiple labels, consider whether all of them are necessary.
- Badge text should be short. One or two words maximum. The 11px font size and 0.02em letter spacing are designed for terse labels, not sentences.