A design system is a memory aid. It should prevent accidental decisions while still letting you move quickly.

Name the intent, not the style

Components like Button or Card should encode intent. Variants capture the styling, but the component name captures the purpose.

Use variants that scale

CVA helps keep Tailwind utilities consistent. Group your variants around size, tone, and emphasis.

const button = cva("inline-flex items-center", {
  variants: { tone: { primary: "bg-accent", ghost: "bg-transparent" } },
  defaultVariants: { tone: "primary" },
});