Client design system POC · Component documentation
Badge
Badges communicate status, category, or metadata at a glance.
This proof of concept introduces a shared token system. Color values are defined once and referenced by name in both Figma Variables and CSS custom properties, so Figma and code always describe colors the same way.
What was built
- Audited all 12 Badge variants from the client's Figma file and extracted every token value manually (view access only, no Dev Mode)
- Built a shared token system: 26 color variables defined once in CSS, referenced by both code and Figma Variables. Changing a value in one place updates everywhere
- Implemented all 12 variants in code using shadcn/ui + Tailwind CSS, with a documented AI context file so Claude can generate consistent Badge output without guessing
- shadcn ships 4 default variants (default, secondary, destructive, outline). These are now remapped to the client's tokens: default → Gray, secondary → Blue, destructive → Error, outline → Badge modern
Shared across all variants
Font
Inter 500
Size
14px / 20px
Radius
16px
Padding
4px · 12px
Pill color · 11 variants
Variant
Background
Border
Text
gray
Gray/50
Gray/200
Gray/700
blue
Primary/50
Primary/200
Primary/700
indigo
Indigo/50
Indigo/200
Indigo/700
purple
Purple/50
Purple/200
Purple/700
pink
Pink/50
Pink/200
Pink/700
error
Error/50
Error/200
Error/700
warning
Warning/50
Warning/200
Warning/700
orange
Warning/50
Warning/200
Warning/700
Duplicate of Warning
success
Success/50
Success/200
Success/700
gray-blue
Base/White
Gray/200
Indigo/700
Mixed color scales
blue-light
Primary/50
Primary/200
Primary/700
Duplicate of Blue
Badge modern · 1 variant
badge-modern
Base/White
Gray/300
Gray/700
+ shadow-xs
Token structure
Every Pill color variant follows the same 3-token pattern. The scale numbers (50, 200, 700) come directly from the client's current Figma color styles.
Background
Color/50
Lightest tint, fills the badge
Border
Color/200
Mid tone, 1px solid stroke
Text
Color/700
Dark shade, high contrast label
Open for review
Orange = Warning
Both share identical token values. Is Orange intentional or should it be removed?
Blue Light = Blue
Both share identical token values. Same question, intentional naming or cleanup needed?
Figma Styles to Variables
The current file uses Figma Styles, not Variables. Migrating to Variables is recommended to complete the AI-ready handoff. This is a one-time migration worth scoping for the next phase.
No dark mode tokens
The current system has no dark mode. This is noted and out of scope for now, flagging in case it becomes a requirement.