Documentation
Component → Variant → Size → States. All values use tokens; no inline styles.
Foundations
Tokens
Primitive vs semantic, mapping, rules
Figma MCP Mapping
Variables, modes, component sets, aliases, pre-import checklist
Colors
Primary, Secondary, Accent, semantic palette
Typography
Families, sizes, line-height and readable defaults
Spacing
Scale, touch target, layout rhythm and density
Radius & Borders
Corner scale, border tokens and focus/error thickness
Components
Button
Primary, Secondary, Outline, Ghost × sm, md, lg × default, hover, focus, disabled
Input
Text, Hint, Select (open/closed), Textarea, Group, Validation, Focus
Badge
Primary, Secondary, Outline, Subtle, Selected × sm, md, lg
Avatar
sm, md, lg, xl + status (online, away, offline)
Card
Default, Elevated, Compact, Composed
Form controls
Checkbox, Radio, Switch, Slider, Progress
Navigation
Breadcrumb, Stepper, Pagination, Tabs, Bottom navigation
Calendar
Month grid with selected, today, disabled and keyboard focus states
Modal / Dialog
Overlay, focus-trap guidance, primary + secondary CTA footer
Drawer / Sheet
Bottom sheet and side drawer with overlay and actions
Skeleton Loader
Animated placeholders for loading states
Layout
Grid, Section, Stack, Inline primitives
Alert
Error, Success, Warning, Info with semantic state colors
Toast
Success, Error, Warning transient feedback pattern