Design System Boilerplate
Your design system boilerplate is ready with Figma semantic tokens and typography extracted and integrated.
Icon Component
Icon component matching Figma design system spec with all size variants.
Size xs (12px):
Size sm (16px):
Size md (20px):
Size lg (24px):
Size xl (32px):
Size 2xl (48px):
Usage Examples:
<Icon name="close" size="lg" />
<Icon name="add" size="md" />
<Icon iconType={<CustomIcon />} size="sm" />Typography Examples
Heading 2XL
Heading XL
Heading LG
Heading MD
Heading SM
Heading XS
Title MD
Title SM
Title XS
Body XXL Semibold
Body XXL Normal
Body XL Semibold
Body XL Normal
Body LG Semibold
Body LG Normal
Body MD Semibold
Body MD Normal
Body SM Semibold
Body SM Normal
Example Component
Semantic Color Tokens
Token Structure
✅ Base colors (Zinc, Orange, Blue, Green, Yellow, Red, Violet, Teal)
✅ Semantic colors (Primary, Neutral, Surface, Info, Success, Warning, Danger, Stroke)
✅ Spacing scale (0-96 with fractional values)
✅ Border radius (none, sm, base, md, lg, xl, 2xl, 3xl, full)
✅ Typography (Inter font family with size scale)