design-systems

Structure design tokens by defining primitive tokens first, then creating semantic aliases, and optionally adding component-scoped tokens. This semantic-token-first approach ensures components theme safely and consistently across products as your design system evolves.

Implement dark mode by applying semantic token overrides using CSS variables and a reliable `data-theme` attribute strategy. This allows you to switch themes globally without rewriting individual component styles.

A semantic token-first approach separates raw values from their contextual meaning. You map primitive tokens to semantic aliases, which components consume, ensuring consistent theming and enabling multi-brand infrastructure without altering component logic.

Yes, you can set up Storybook stories with controls and autodocs for variant-driven components. This provides living documentation and consistent usage examples, ensuring components ship with validated visual references.

Build compound component APIs by namespacing subcomponents together, allowing them to share state implicitly. This pairs well with variant-driven patterns like CVA and polymorphic components such as Radix AsChild for flexible rendering.