A utility-first CSS system exposes only a fixed scale of spacing, size and colour classes. What does that closed vocabulary actually buy compared with writing free-form declarations in a component stylesheet, and what does it cost?

## The mechanism: constraint, not convention Design consistency in CSS usually fails the same way. A stylesheet accepts any value the grammar allows, so `margin-bottom: 18px` and `margin-bottom: 20px` are equally easy to type, and over a couple of years a codebase accumulates dozens of nearly-identical spacings and half a dozen greys nobody chose deliberately. The values were never *decided*; they were typed under deadline and never revisited. A utility vocabulary attacks this by removing the choice. The stylesheet defines a finite scale: ```css .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } ``` There is no `mt-3.5`. A developer who wants 13 pixels has to stop and do something unusual, and "unusual" is exactly the signal a review process can act on. This is the difference between a **convention** ("please use the spacing scale") and a **constraint** ("the scale is what exists"). Conventions decay under deadline pressure; constraints do not. The same argument applies to colour, type size, border radius, shadow, and z-index steps. A closed set of colour utilities means the product has, say, five greys — not because everyone remembered, but because five is all there is. ## What the constraint does *not* do Be precise about the limits, because interviewers push here: - **It does not make the scale good.** A badly chosen scale is enforced just as reliably as a good one. The vocabulary is a distribution mechanism for a design decision made elsewhere; it does not make the decision. - **It does not prevent bad composition.** Every value can be on-scale and the layout can still be wrong. Consistency of values is not consistency of design. - **It does not remove the need for real CSS.** Things with no natural scale — a specific `grid-template-areas`, a keyframe sequence, a clip path — are not utility-shaped, and pretending otherwise produces grotesque class strings. ## The escape hatch problem Every closed vocabulary needs a documented way out, because real designs contain genuine one-offs: an optical alignment nudge, a value dictated by a fixed-size third-party embed, a hero image ratio. Systems provide one of two exits — hand-writing a normal CSS rule for that component, or an arbitrary-value syntax the tool supports. The interesting question is not whether the exit exists but **how visible it is**. A good escape hatch is slightly awkward and easy to grep for, so its use is a deliberate act that shows up in review. A frictionless one dissolves the whole benefit: if writing an arbitrary value is exactly as easy as picking a scale step, the vocabulary is decorative and you get drift *plus* long class strings — the worst of both models. A useful team rule: an escape hatch used once is a one-off; used three times it is a missing scale step, and the scale should be extended rather than bypassed. That keeps the vocabulary a living artifact instead of a wall people climb over. ## Comparison with the alternative A component stylesheet can achieve the same consistency by discipline — everyone references the same set of agreed values instead of typing raw numbers. That works, and plenty of mature design systems run this way. The difference is enforcement: nothing in the language stops a hurried developer from writing the raw value anyway, so the guarantee is only as strong as review. The utility vocabulary moves the guarantee from people to the shape of the tool. The trade is expressiveness. Free-form CSS can say anything; a bounded vocabulary can say only what was anticipated. If your product is highly editorial or heavily art-directed, where nearly every screen is bespoke, the constraint fights you constantly and buys little. If your product is an application made of repeating UI patterns, the constraint costs almost nothing and pays every day. ## What to say in an interview Name the mechanism — consistency by inexpressibility rather than by memory — then immediately name the cost and the escape-hatch failure mode. Candidates who only recite the benefit sound like they are quoting marketing; candidates who describe the escape-hatch discipline sound like they have run one of these systems.