A layout system for responsive digital products.
This study maps how a 12-column grid, a spacing scale and a component library combine into a layout system that works from 375px to 1440px without special-casing every breakpoint.
Concept study — self-initiated, not a client commission.
THE PROBLEM THIS EXPLORES.
Most responsive layouts are built breakpoint by breakpoint, which means every new component needs its own responsive logic. A layout system inverts this: define the grid and spacing rules once, and every component inherits them.
THE APPROACH.
Define the grid
12 columns. 24px gutters at desktop, 16px at mobile. A max-width of 1440px with 80px horizontal padding. The grid is the only layout primitive — no magic numbers.
Build the spacing scale
An 8px base unit generates every spacing value: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Named tokens (xs, sm, base, lg, xl, xxl, xxxl) replace raw pixel values in every component.
Define component slots
Every component maps to a column span: full-width (12), wide (10), content (8), narrow (6), aside (4), inline (2). Components never define their own width — they inherit from the grid.
Test at the extremes
375px iPhone SE and 1440px desktop. If the layout holds at both extremes without a single media query override, the system works.
Document the tokens
A token reference maps every spacing value, column span and breakpoint to a named constant. The system is portable to any codebase.
THE GRID SPECIFICATION.
THE SPACING SCALE.
WHAT THIS STUDY FOUND.
A layout system with a 12-column grid and a named spacing scale eliminates the majority of responsive edge cases. When every component inherits from the same grid, breakpoint logic becomes a single set of column-span overrides rather than per-component media queries.
Field Notes
ONE USEFUL EMAIL A MONTH.
Practical notes on brand, websites, growth and AI from Numou AI.