Skip to main content

🧩 Components & Patterns

Core components​

  • Buttons, Inputs, Selects, Modals, Toasts, Tabs, Tables, etc.
  • Link to the Figma library (Stable vs Beta components).

Usage​

  • Prefer DS components/variants; avoid detaching.
  • Bind properties to tokens (color, radius, spacing, typography).

Patterns​

  • Authentication
  • Search & Filter
  • Forms & Validation
  • Navigation
  • (Add your product-specific patterns)

Accessibility​

  • Focus states on all interactive elements.
  • Keyboard navigation and readable labels.
  • Error and success messaging patterns.

Do’s / Don’ts​

  • âś… Use semantic tokens in component parts
  • âś… Validate in multiple brands/modes
  • ❌ Ad-hoc components with hardcoded styles
  • ❌ Detached components that drift from DS