Design Systems

Guides for the design-to-code pipeline: analyze a design system, map it to Bootstrap or Tailwind, implement in Radix/SDC.

I need to...	Guide
Identify design tokens, components, patterns from any source	Recognition
Map design system patterns to Bootstrap 5.3	Bootstrap Mapping
Implement in Drupal with Radix theme and SDC components	Radix SDC Mapping
Look up Radix 6.x SDC component props, slots, and usage	Radix Components
Use DaisyUI v5 components, theming, and React integration	DaisyUI
Implement a design system with Tailwind CSS v4/v3	Tailwind CSS
Extract and map design tokens across Tailwind, DaisyUI, Figma, and W3C DTCG	Tailwind Tokens
Convert React/JSX components to Drupal Twig templates and SDC	JSX to Twig

Workflow

1. Recognition → Analyze design (Figma, HTML, screenshots)
2. Bootstrap → Map tokens to variables, components to Bootstrap
   OR Tailwind → Configure @theme, map tokens, use CVA for variants
3. Radix SDC → Build Drupal sub-theme with SDC components
4. Radix Components → Reference for all 57 Radix 6.x SDCs