CogniSyncBadges
Badges are compact labels for status, categories, and counts. They use tone and variant to signal meaning at a glance.
Five ways to wear a tone
The variant controls the badge's presence. All variants share the same tones and sizing — pick the one that fits the surrounding density.
Solid tonal background. Highest visual priority — use when the badge needs to command attention, like live counts or destructive counts.
Soft tinted background. The default across product surfaces — clear tonal meaning without overpowering the layout.
White background with a tonal border. Sits calmly next to dense content; works well in tables and compact lists.
Label-only tonal text with no surface. Best for inline metadata and tight layouts where a pill would feel heavy.
A single distinctive treatment used everywhere we surface AI-generated content — AI suggestions in rules, auto-filled fields, classification recommendations. It ignores tone so it always reads as “AI” at a glance.
Seven semantic tones
Each tone maps to a family in the color system. Use tone to communicate meaning (success, warning, error) — never for decoration.
Neutral
Primary
Success
Warning
Error
Info
Accent
Three sizes
Pick the size that matches the density of its container. Never stretch a badge — padding is fixed, label length grows the width.
11px text, 2px vertical padding. Use inside dense data rows and chips.
12px text, 3px vertical padding. Default across product surfaces.
13px text, 4px vertical padding. Page-level statuses, hero badges.
Icons & status dot
A badge can lead or trail with an icon, or show a tonal dot for status-type labels. Keep only one slot visible at a time on either side.
Always reads as AI
The AI variant uses a single purple→blue tint and a sparkle glyph by default. Use it anywhere CogniSync surfaces AI-generated or AI-assisted content — rules, classifications, auto-filled fields, and review prompts.
Anatomy
The Badge is composed of these parts.
Container
Sets the variant surface and border. Radius follows size (4/6/8px) or flips to full for pill shape.
Label
Geist Medium. 11/12/13px across sm, md, lg. Inherits the tonal text color.
Leading icon
Optional 12/14/16px glyph before the label. Inherits label color.
Trailing icon
Optional glyph after the label — often a close, chevron, or arrow.
Status dot
Optional solid circle in the tonal 500 color. Pairs well with secondary or outline variants.
AI treatment
A single purple-to-blue tint and sparkle glyph. Tone has no effect when variant is “ai”.
Do & Don't
Do
- Use tone to communicate meaning — success, warning, error, info.
- Default to the secondary variant; reserve fill for moments that need emphasis.
- Keep labels short (1–2 words, or a count).
- Use the AI variant wherever you surface AI suggestions or auto-filled content.
Don't
- Don't use tone to decorate neutral labels — pick neutral instead.
- Don't stack multiple fill badges in the same row; they compete for attention.
- Don't repurpose the AI variant for non-AI statuses — it loses its meaning.
- Don't mix shapes (rounded and pill) in the same badge list.