01 / 10
12-Column Grid
The workhorse of web layout. Twelve divides evenly into 2, 3, 4, and 6 — letting a single grid host nearly any composition without breaking rhythm.
Layout · 12 columns
8 + 4
02 / 10
Modular Grid
Equal cells in both axes form a chessboard of modules. Content sits in one cell or spans many — perfect for card-based UIs, dashboards, and image-heavy layouts.
Modules · 6 × 4
03 / 10
Baseline Grid
Horizontal lines on which every line of text sits — vertical rhythm borrowed from print. When baselines align across columns, the whole page feels calmly composed.
Vertical rhythm
leading · 16
04 / 10
Golden Ratio
A proportion (≈1.618) that recurs in nature and centuries of design. Divide your canvas in this ratio and the parts feel inherently balanced — useful for hero blocks, sidebars, and image crops.
Φ · 1 : 1.618
05 / 10
Rule of Thirds
Divide the canvas into three columns and three rows. Place focal elements at the four intersections — they read as natural anchors for the eye, not as the dead center.
3 × 3 grid · 4 anchors
06 / 10
Hierarchy by Scale
Size signals importance before anything else. A clear 3-step scale — heading, subhead, body — tells readers what to look at first, second, and last, with no other formatting needed.
Type scale
Important.
A supporting subhead.
Body copy lives down here — the last thing the eye reaches and the part most people only skim.
07 / 10
Hierarchy by Weight
Same size, different weight. A bold word inside a paragraph pulls focus instantly — and lets you create hierarchy without resorting to a second font size or color.
Same size · different weight
Thin reads as quiet.
Regular sets the baseline.
Semibold steps forward.
Bold takes the room.
08 / 10
Hierarchy by Color & Contrast
High contrast pulls attention; muted tones recede. Use this sparingly — one accent against many neutrals reads loud and clear. Two competing accents read like noise.
One accent · many neutrals
Last edited 3 days ago
Status: Draft
Owner: Patrick
Reviewers: 2 pending
Publish now
09 / 10
Whitespace
Negative space isn't empty — it's the breathing room that makes content feel premium and helps the eye separate one group from the next. The fastest design upgrade is usually more space.
Density comparison
10 / 10
Alignment
Every element should align with something else — there's no element placed arbitrarily. When edges line up, the eye perceives a hidden vertical (or horizontal) line, and the whole layout feels intentional even before content is read.
Invisible alignment lines
left · 24