Design System
Design tokens and component systems
Design tokens, components, and systems
Design-system tools work at the layer where designers and frontend engineers swap files: Figma-tokens-to-CSS-custom-properties converters, Tailwind-theme generators from a token JSON, color-palette generators that produce a 50-950 shade ramp from a single seed, font-pairing reference cards, spacing-scale builders. The output is meant to be dropped directly into a project's tokens file or a Tailwind config — not just visualized. Useful when you're bootstrapping a new design system, when you're reconciling a tokens file with a CSS custom-property file that's drifted, or when you're trying to get a brand designer's output into a working code dependency without a manual translation layer.
11 tools