layout-paradigms-and-consistency
Layout Paradigms and Consistency
A layout is not a neutral container you pour content into. The layout paradigm you choose is part of the argument about how the content should be read, compared, and acted on. Two products showing the same data can communicate completely different things depending on whether that data is a feed, a table, or a board.
This skill operates at the macro scale of consistency. It sits above [[component-family-consistency]] (the meso scale — buttons and inputs sharing one DNA) and above token-level consistency like [[button-states]], [[status-colors-and-errors]], and [[modular-scale-typography]] (the micro scale). Consistency is not one rule — it is the same discipline applied at three altitudes.
Consistency operates at three scales
| Scale | What stays consistent | Where it lives |
|---|---|---|
| Estate | Brand chassis and shared shell across separate applications | this skill, Part 3 + [[app-shell]] |
| Macro | Layout paradigm and page skeleton across screens | this skill |
| Meso | Component family — shared radius, height, colour logic | [[component-family-consistency]], [[brand-visual-language]] |
| Micro | States, tokens, type scale, semantic colours | [[button-states]], [[status-colors-and-errors]], [[modular-scale-typography]], [[algorithmic-color-palette]] |
A product can have perfect tokens and a coherent component family and still feel broken — because every screen is laid out differently and the user re-orients on every navigation. Macro consistency is what makes a product feel like one application.