Core design tokens that define the visual foundation of the design system.
| Token Name | Value | Usage | Light Mode | Dark Mode |
|---|---|---|---|---|
| primary-500 | #0066FF | Primary actions, links | ✅ | ✅ |
| neutral-900 | #1A1A1A | Body text | ✅ | #F5F5F5 |
| neutral-100 | #F5F5F5 | Background | ✅ | #1A1A1A |
| success-500 | #10B981 | Success states | ✅ | ✅ |
| error-500 | #EF4444 | Error states | ✅ | ✅ |
| warning-500 | #F59E0B | Warning states | ✅ | ✅ |
| Token Name | Font Family | Size | Weight | Line Height | Usage |
|---|---|---|---|---|---|
| heading-xl | Inter | 48px | 700 | 56px | Page titles |
| heading-lg | Inter | 36px | 700 | 44px | Section headers |
| heading-md | Inter | 24px | 600 | 32px | Subsections |
| body-lg | Inter | 18px | 400 | 28px | Large body text |
| body-md | Inter | 16px | 400 | 24px | Default body text |
| body-sm | Inter | 14px | 400 | 20px | Small text, captions |
| Token Name | Value | Usage |
|---|---|---|
| space-xs | 4px | Tight spacing |
| space-sm | 8px | Small spacing |
| space-md | 16px | Default spacing |
| space-lg | 24px | Large spacing |
| space-xl | 32px | Extra large spacing |
| space-2xl | 48px | Section spacing |
| Token Name | Value | Usage |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle elevation |
| shadow-md | 0 4px 6px rgba(0,0,0,0.1) | Cards, dropdowns |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.1) | Modals, popovers |
| shadow-xl | 0 20px 25px rgba(0,0,0,0.15) | Dialogs |
Comprehensive catalog of all design system components with their current status and platform support.
| Component | Figma Link | iOS | Android | Web | Status | Last Updated | Notes |
|---|---|---|---|---|---|---|---|
| Button | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-03-01 | Primary, secondary, tertiary variants |
| Input Field | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-28 | Includes error states |
| Card | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-25 | Multiple layouts available |
| Modal | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-03-05 | — |
| Dropdown | 🔗 Link | ✅ | ✅ | ✅ | Beta | 2026-03-08 | Testing keyboard navigation |
| Tooltip | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-20 | — |
| Tabs | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-03-03 | Horizontal and vertical variants |
| Navigation Bar | 🔗 Link | ✅ | ✅ | ✅ | Beta | 2026-03-07 | Responsive breakpoints in review |
| Checkbox | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-15 | — |
| Radio Button | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-15 | — |
| Toggle Switch | 🔗 Link | ✅ | ⚠️ | ✅ | Beta | 2026-03-06 | Android animation in progress |
| Badge | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-18 | — |
| Progress Bar | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-22 | — |
| Skeleton Loader | 🔗 Link | ✅ | ✅ | ✅ | Beta | 2026-03-09 | New component |
| Avatar | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-10 | — |
| Alert/Toast | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-03-02 | — |
| Breadcrumb | 🔗 Link | — | — | ✅ | Stable | 2026-02-12 | Web only |
| Pagination | 🔗 Link | — | — | ✅ | Stable | 2026-02-28 | Web only |
| Accordion | 🔗 Link | ✅ | ✅ | ✅ | Stable | 2026-02-26 | — |
| Date Picker | 🔗 Link | ⚠️ | ⚠️ | ✅ | Deprecated | 2025-12-15 | Use native pickers on mobile |
Central hub for brand identity elements and usage guidelines.
| Color | Hex | Usage | Do's | Don'ts |
|---|---|---|---|---|
| Brand Primary | #0066FF | Logo, CTAs, key elements | Use on white backgrounds | Don't use on photos without overlay |
| Brand Secondary | #FF6B35 | Accents, highlights | Use sparingly for emphasis | Don't use as primary action color |
| Brand Neutral | #2D3748 | Text, backgrounds | Use for body text | Don't use for interactive elements |