There are two common kinds of classes. Component classes, like .card, which holds all the core styles that make a card look like a card. And utility classes, like .margin-top-lg, which just does one small job, like adding a large top margin.
Using both together can keep your design system clean and prevent unnecessary bloat. The component class keeps every card consistent, and a utility handles occasional adjustments, like extra space above one card, without creating a whole new class. I find that it’s worth keeping utilities small and tied to your tokens, though. If one element needs five utilities to look right, that’s usually a sign it deserves its own component class.
