Color Palette
Primary
--color-primary
Secondary
--color-secondary
Accent
--color-accent
Success
--color-success
Error
--color-error
Warning
--color-warning
Typography
Heading 1 (32px Bold)
Heading 2 (24px Semibold)
Heading 3 (20px Semibold)
Heading 4 (18px Medium)
Body Text (16px Regular) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary Text (14px) - Supporting information and captions.
Small Text (12px) - Labels and hints.
Buttons
Primary Button
Secondary Button
Ghost Button
Disabled Button
Small Button
Form Elements
This field has an error
Cards
Card Title
Card subtitle text
Bordered Card
With border instead of shadow
Avatars
SM
Small
MD
Medium
LG
Large
XL
XLarge
Badges
Default
Primary
Success
Error
Warning
Spacing Scale
xs (4px)
sm (8px)
md (12px)
lg (16px)
xl (20px)
2xl (24px)
3xl (32px)