Every screen ends up with its own row height, because nobody wrote down when to use which one.
Dashboards, settings pages, and email templates all render the same kind of row, but each one usually gets a hand-picked pixel value: 36px here, 51px there, whatever looked right in the moment. Density tokens fix this by naming three roles instead of inventing a fourth number: compact, comfortable, and spacious, each one a fixed padding value layered onto the same row component. The mechanism is simple: you don't touch line-height or font-size, you only change the padding around the content, so the row's internal rhythm stays identical across all three. In practice, this means a data-dense admin table can ship at compact while an onboarding checklist ships at spacious, without either screen forking the component. What changes once this exists: nobody eyeballs a new row height for a new screen again, because the decision was already made and named.
Leave a Reply
You must be logged in to post a comment.