Layout, Spacing & Grids Skill
How this skill behaves (read first)
This is a generative foundation skill. Layout is where an AI assistant's output is quietly amateurish: Claude reaches for arbitrary spacing (13px here, 27px there), pads things by eyeball, mixes alignments, drops content onto the canvas with no grid, and gives every element the same visual weight so nothing reads as more important. The fixes are systematic, not cosmetic — a base unit, a scale, a grid, consistent alignment, and space used deliberately to group and to rank.
So this skill gates:
- Establish context — platform/density, content type, and whether the layout must be responsive (these set the base unit, the grid type, and the column model).
- Apply the always-true core — one base unit and a spacing/sizing scale, align to a grid, let proximity and whitespace group, and use space to build hierarchy.
- Surface the context-dependent decisions (base unit, grid type, column model, sizing approach, golden-ratio/rule-of-thirds, token layer, grid-breaking) with trade-offs; let the user choose.
Then it hands off to ux-aesthetics-audit (the composition/spacing/hierarchy review) and ux-accessibility-audit (touch targets, text scaling, reflow), plus ux-mobile-responsiveness-audit when the layout is responsive/mobile.
This skill also owns the spatial visual-hierarchy, alignment, and composition fundamentals (it absorbed the retired visual-hierarchy generative content): hierarchy created through size, position, and space; alignment and proximity; whitespace; rule-of-thirds/golden-ratio placement. It defers type scale/readability to ux-typography, color/contrast for emphasis to ux-color, and the evaluative composition review to ux-aesthetics-audit.
Step 0 — Establish context before laying out
Ask if not known; state the assumption if proceeding without an answer:
- Platform & density — mobile vs. desktop, and how dense the UI is. Dense/compact tools may want a 4px base; most product UIs use 8px. Mobile tightens margins and must preserve touch-target spacing.
- Content type — uniform items (gallery, dashboard cards), long-form text, mixed media, or tabular data. This drives the grid choice (column vs. modular vs. manuscript vs. hierarchical).
- Responsive or fixed context — will it adapt across breakpoints, or run in a controlled environment (kiosk, signage)? Responsive needs a column model and breakpoints; fixed is the exception, not the default.
The always-apply core (true for almost every layout)
Build on one base unit and a scale
- Pick a single base unit and make every spacing/sizing value a multiple of it. 8px is the default (divides cleanly into halves/quarters; Material aligns to 8dp; Apple uses 8/16/32-pt increments); 4px for dense interfaces. No arbitrary values — 13px or 27px gaps are the tell of an unsystematic layout.
- Express the scale as tokens, not one-offs. Numeric scale (
spacing-01…, e.g. 4, 8, 16, 24, 32, 48, 64) optionally with a semantic layer (xs/sm/md/lg). Consistency lets one change flow through; it also kills guesswork.
- Unify spacing and sizing on the same base unit so gutters, columns, and component sizes snap together and the page reads as one system.
- Handle off-scale values as flagged exceptions. If something genuinely needs a between-steps value, give it a functional name (
card-media-height) or an irregular number so it's obviously not part of the scale — frequent exceptions are how a system rots.
Use space to group and to rank (hierarchy)
- Proximity groups. Smaller gaps tie related elements together; larger gaps separate groups. Users read nearby items as one unit (Gestalt proximity).
- ❌ Equal spacing between a label, its field, and the next field — the form reads as one undifferentiated stack. ✅ Tight label↔field, larger gap between fields.
- External spacing ≥ internal spacing. If the space around a component is smaller than the space inside it, unrelated elements visually merge. Keep outer ≥ inner.
- Space creates hierarchy. More space and prominent position (top/leading, following reading order) make an element feel important; primary content gets room to breathe, secondary content is set apart. Combine with size — but space alone already ranks.
- Whitespace is active, not wasted. Macro whitespace separates sections; micro whitespace aids readability and enlarges touch targets. Don't fill every gap.
Align everything to a grid
- Put content on a grid and keep it there. Columns hold content; gutters are the gaps between; margins are the outer edges — content never sits in the gutter or the margin. Keep equal gutters.
- Distinguish the three spacings: margin (external/between), padding (internal), gutter (between columns). Mixing them up is a common source of inconsistency.
- Align similar elements consistently on both axes — images with images, text baselines with text baselines — so the eye scans a predictable edge. Maintain vertical rhythm.
- Adapt the container to the grid, not the grid to the content. A stable grid plus flexible container sizes keeps layouts predictable and easy to extend. Break the grid only deliberately (see levers).
Make it adapt
- Plan responsiveness around the grid. Resize containers and reflow columns at breakpoints rather than rebuilding the structure; standard column counts are 12 desktop / 8 tablet / 4 mobile.
- Scale spacing with text (dynamic type). When users enlarge text, margins/padding/gaps and row heights should scale too, so hierarchy and touch targets survive. Respect safe areas and platform margins.
The context-dependent decisions (surface, don't auto-apply)
Present each with its trade-off and a recommendation tied to Step 0; let the user choose. Applying every grid type and proportion system at once is the failure mode.
| Decision |
Apply when |
Avoid / adapt when |
Default recommendation |
| Base unit (8px vs 4px) |
8px for most product UIs; 4px for dense/data-heavy interfaces needing finer control |
Mixing both, or going off-grid for convenience |
8px base; drop to 4px only where density truly demands it |
| Grid type |
Column for general layouts; modular (columns × rows) for galleries/tables/e-commerce; manuscript for long text; hierarchical for content-led/editorial; integrated (two grids) for media + type |
Forcing a modular grid on simple content (false rigor) or a manuscript grid on a dashboard |
Column grid by default; modular for uniform card/data layouts |
| Symmetric vs asymmetric |
Symmetric for uniform, equal-priority content (calm, classic); asymmetric to emphasize and add movement |
Asymmetry that breaks the reading pattern into chaos |
Symmetric unless you need emphasis/contrast; keep consistent proportions |
| Column model (fixed/fluid/responsive) |
Responsive (resize + breakpoints) for cross-device; fluid (%) for smooth scaling; fixed only in controlled environments |
Fixed-pixel layouts on the open web (horizontal scroll on small, dead space on large) |
Responsive by default; plan breakpoints up front |
| Sizing approach |
Element-first (fixed dimensions) for buttons/inputs/icons that need uniformity; content-first (fixed padding, size grows) for text blocks, table rows, unpredictable content |
Fixing heights on content that varies (clipping/overflow) |
Element-first for interactive primitives; content-first for content containers |
| Golden ratio / rule of thirds |
Placing focal elements (hero, CTA) at active-zone intersections; deriving harmonious proportions |
Treating it as a mandate that overrides content needs or the base-unit scale |
Use to place focal points; keep spacing on the unit scale |
| Semantic token layer |
Larger teams/design systems that benefit from xs/sm/md aliases over raw numbers |
Tiny projects where the alias layer is overhead |
Numeric scale always; add semantic aliases for systems |
| Breaking the grid |
A deliberate hero/element breaking out to grab attention |
Breaking it by accident or so often the grid stops meaning anything |
Break intentionally and rarely; everything else stays aligned |
Validate the result (orchestration)
Hand-offs name each lens by its installable skill name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After laying out or revising, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, none are Tier A; aesthetics and accessibility are Tier B (offered), and mobile-responsiveness is Tier B (offered, mobile only) — under an existing design system aesthetics is suppressed and accessibility narrows to usage; mobile-responsiveness applies only on mobile. If the user invoked this skill for one specific thing, respect that scope.
ux-aesthetics-audit (Tier B — offer; suppress under a design system) — the composition review this skill generates toward: is spacing consistent and on-scale, is there a clear hierarchy, is alignment clean, is whitespace balanced (not cramped, not cavernous)? Aesthetics owns the evaluative side of composition/hierarchy.ux-accessibility-audit (Tier B — offer; narrow under a design system) — do spacing and sizing preserve adequate touch targets, does the layout reflow without loss at higher zoom/text sizes, does spatial grouping still make sense to assistive tech?ux-mobile-responsiveness-audit (Tier B — offer; applies only on mobile) (when responsive/mobile) — do margins, gutters, and column counts adapt cleanly across breakpoints, and does spacing scale with dynamic type?
Scope & composition (per docs/orchestration-policy.md §9): inherit under a design system (only build from scratch) — ux-typography owns type scale and readability and ux-color owns color-based emphasis/contrast; take both from the system's tokens when one exists. Hierarchy is built from space and type and color together. If the audits surface a conflict, resolve toward the purpose: layout exists to make content scannable and ranked — if spacing is arbitrary, nothing's on a grid, or everything has equal weight, the structure isn't done.
Common do/don't patterns
| ❌ Don't |
✅ Do |
| Use arbitrary values (13px, 27px) |
Put every value on one base unit (8px/4px) and a token scale |
| Pad and space by eyeball |
Define spacing/sizing tokens and reuse them |
| Space related and unrelated items equally |
Proximity: tight within a group, larger between groups |
| Let outer space be smaller than inner space |
Keep external spacing ≥ internal spacing so groups don't merge |
| Drop content on the canvas with no grid |
Align content to columns; keep it out of gutters and margins |
| Mix alignments / ragged edges |
Align similar elements consistently on both axes |
| Give every element equal weight |
Use space + position (and size) to rank importance |
| Fill every gap |
Treat whitespace as active — grouping, breathing room, touch targets |
| Rebuild the grid per breakpoint |
Adapt container sizes to a stable grid; reflow columns at breakpoints |
| Force one grid/proportion system everywhere |
Pick the grid type that fits the content; reach for golden-ratio only to place focal points |
| Ship the layout unchecked |
Hand off to aesthetics + accessibility (+ mobile-responsiveness) |
Source lessons (Uxcel)
1---2name: ux-layout-spacing-grids3description: Lay out a screen with disciplined spacing, sizing, and grids — every value on one base unit (8px/4px scale), content aligned to a grid, proximity and whitespace doing the grouping, and space establishing visual hierarchy. Replaces arbitrary pixel values and ad-hoc alignment with a system. Also carries the spatial visual-hierarchy/alignment/composition fundamentals. Trigger when asked to design or critique a layout, set spacing/padding/margins, build a spacing scale or design tokens, choose or apply a grid/columns, fix inconsistent spacing or alignment, or establish visual hierarchy through space and position.4license: MIT5---67# Layout, Spacing & Grids Skill89## How this skill behaves (read first)1011This is a **generative** foundation skill. Layout is where an AI assistant's output is quietly amateurish: Claude reaches for **arbitrary spacing** (13px here, 27px there), pads things by eyeball, mixes alignments, drops content onto the canvas with **no grid**, and gives every element the same visual weight so nothing reads as more important. The fixes are systematic, not cosmetic — a base unit, a scale, a grid, consistent alignment, and space used deliberately to group and to rank.1213So this skill gates:14151. **Establish context** — platform/density, content type, and whether the layout must be responsive (these set the base unit, the grid type, and the column model).162. **Apply the always-true core** — one base unit and a spacing/sizing scale, align to a grid, let proximity and whitespace group, and use space to build hierarchy.173. **Surface the context-dependent decisions** (base unit, grid type, column model, sizing approach, golden-ratio/rule-of-thirds, token layer, grid-breaking) with trade-offs; let the user choose.1819Then it **hands off to `ux-aesthetics-audit`** (the composition/spacing/hierarchy review) and **`ux-accessibility-audit`** (touch targets, text scaling, reflow), plus **`ux-mobile-responsiveness-audit`** when the layout is responsive/mobile.2021This skill also **owns the spatial visual-hierarchy, alignment, and composition fundamentals** (it absorbed the retired `visual-hierarchy` generative content): hierarchy created through size, position, and space; alignment and proximity; whitespace; rule-of-thirds/golden-ratio placement. It defers **type scale/readability** to `ux-typography`, **color/contrast for emphasis** to `ux-color`, and the **evaluative** composition review to `ux-aesthetics-audit`.2223---2425## Step 0 — Establish context before laying out2627Ask if not known; state the assumption if proceeding without an answer:2829- **Platform & density** — mobile vs. desktop, and how dense the UI is. Dense/compact tools may want a 4px base; most product UIs use 8px. Mobile tightens margins and must preserve touch-target spacing.30- **Content type** — uniform items (gallery, dashboard cards), long-form text, mixed media, or tabular data. This drives the grid choice (column vs. modular vs. manuscript vs. hierarchical).31- **Responsive or fixed context** — will it adapt across breakpoints, or run in a controlled environment (kiosk, signage)? Responsive needs a column model and breakpoints; fixed is the exception, not the default.3233---3435## The always-apply core (true for almost every layout)3637### Build on one base unit and a scale3839- **Pick a single base unit and make every spacing/sizing value a multiple of it.** 8px is the default (divides cleanly into halves/quarters; Material aligns to 8dp; Apple uses 8/16/32-pt increments); 4px for dense interfaces. **No arbitrary values** — 13px or 27px gaps are the tell of an unsystematic layout.40- **Express the scale as tokens, not one-offs.** Numeric scale (`spacing-01…`, e.g. 4, 8, 16, 24, 32, 48, 64) optionally with a semantic layer (`xs/sm/md/lg`). Consistency lets one change flow through; it also kills guesswork.41- **Unify spacing *and* sizing on the same base unit** so gutters, columns, and component sizes snap together and the page reads as one system.42- **Handle off-scale values as flagged exceptions.** If something genuinely needs a between-steps value, give it a functional name (`card-media-height`) or an irregular number so it's obviously not part of the scale — frequent exceptions are how a system rots.4344### Use space to group and to rank (hierarchy)4546- **Proximity groups.** Smaller gaps tie related elements together; larger gaps separate groups. Users read nearby items as one unit (Gestalt proximity).47 - ❌ Equal spacing between a label, its field, and the *next* field — the form reads as one undifferentiated stack. ✅ Tight label↔field, larger gap between fields.48- **External spacing ≥ internal spacing.** If the space *around* a component is smaller than the space *inside* it, unrelated elements visually merge. Keep outer ≥ inner.49- **Space creates hierarchy.** More space and prominent position (top/leading, following reading order) make an element feel important; primary content gets room to breathe, secondary content is set apart. Combine with size — but space alone already ranks.50- **Whitespace is active, not wasted.** Macro whitespace separates sections; micro whitespace aids readability and enlarges touch targets. Don't fill every gap.5152### Align everything to a grid5354- **Put content on a grid and keep it there.** Columns hold content; **gutters** are the gaps between; **margins** are the outer edges — content never sits in the gutter or the margin. Keep equal gutters.55- **Distinguish the three spacings:** margin (external/between), padding (internal), gutter (between columns). Mixing them up is a common source of inconsistency.56- **Align similar elements consistently on both axes** — images with images, text baselines with text baselines — so the eye scans a predictable edge. Maintain vertical rhythm.57- **Adapt the container to the grid, not the grid to the content.** A stable grid plus flexible container sizes keeps layouts predictable and easy to extend. Break the grid only deliberately (see levers).5859### Make it adapt6061- **Plan responsiveness around the grid.** Resize containers and reflow columns at breakpoints rather than rebuilding the structure; standard column counts are 12 desktop / 8 tablet / 4 mobile.62- **Scale spacing with text (dynamic type).** When users enlarge text, margins/padding/gaps and row heights should scale too, so hierarchy and touch targets survive. Respect safe areas and platform margins.6364---6566## The context-dependent decisions (surface, don't auto-apply)6768Present each with its trade-off and a recommendation tied to Step 0; let the user choose. **Applying every grid type and proportion system at once is the failure mode.**6970| Decision | Apply when | Avoid / adapt when | Default recommendation |71|---|---|---|---|72| **Base unit (8px vs 4px)** | 8px for most product UIs; 4px for dense/data-heavy interfaces needing finer control | Mixing both, or going off-grid for convenience | 8px base; drop to 4px only where density truly demands it |73| **Grid type** | *Column* for general layouts; *modular* (columns × rows) for galleries/tables/e-commerce; *manuscript* for long text; *hierarchical* for content-led/editorial; *integrated* (two grids) for media + type | Forcing a modular grid on simple content (false rigor) or a manuscript grid on a dashboard | Column grid by default; modular for uniform card/data layouts |74| **Symmetric vs asymmetric** | Symmetric for uniform, equal-priority content (calm, classic); asymmetric to emphasize and add movement | Asymmetry that breaks the reading pattern into chaos | Symmetric unless you need emphasis/contrast; keep consistent proportions |75| **Column model (fixed/fluid/responsive)** | Responsive (resize + breakpoints) for cross-device; fluid (%) for smooth scaling; fixed only in controlled environments | Fixed-pixel layouts on the open web (horizontal scroll on small, dead space on large) | Responsive by default; plan breakpoints up front |76| **Sizing approach** | *Element-first* (fixed dimensions) for buttons/inputs/icons that need uniformity; *content-first* (fixed padding, size grows) for text blocks, table rows, unpredictable content | Fixing heights on content that varies (clipping/overflow) | Element-first for interactive primitives; content-first for content containers |77| **Golden ratio / rule of thirds** | Placing focal elements (hero, CTA) at active-zone intersections; deriving harmonious proportions | Treating it as a mandate that overrides content needs or the base-unit scale | Use to *place* focal points; keep spacing on the unit scale |78| **Semantic token layer** | Larger teams/design systems that benefit from `xs/sm/md` aliases over raw numbers | Tiny projects where the alias layer is overhead | Numeric scale always; add semantic aliases for systems |79| **Breaking the grid** | A deliberate hero/element breaking out to grab attention | Breaking it by accident or so often the grid stops meaning anything | Break intentionally and rarely; everything else stays aligned |8081---8283## Validate the result (orchestration)8485> Hand-offs name each lens by its installable skill `name`. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.8687After laying out or revising, hand the result to the audit lenses rather than declaring it done. These are **candidate** lenses — posture is set by `docs/orchestration-policy.md`, or route the whole thing through `ux-design-review`. Here, **none are Tier A; `aesthetics` and `accessibility` are Tier B (offered), and `mobile-responsiveness` is Tier B (offered, mobile only)** — under an existing design system `aesthetics` is suppressed and `accessibility` narrows to usage; `mobile-responsiveness` applies only on mobile. If the user invoked this skill for one specific thing, respect that scope.8889- **`ux-aesthetics-audit`** *(Tier B — offer; suppress under a design system)* — the composition review this skill generates *toward*: is spacing consistent and on-scale, is there a clear hierarchy, is alignment clean, is whitespace balanced (not cramped, not cavernous)? Aesthetics owns the *evaluative* side of composition/hierarchy.90- **`ux-accessibility-audit`** *(Tier B — offer; narrow under a design system)* — do spacing and sizing preserve adequate touch targets, does the layout reflow without loss at higher zoom/text sizes, does spatial grouping still make sense to assistive tech?91- **`ux-mobile-responsiveness-audit`** *(Tier B — offer; applies only on mobile)* (when responsive/mobile) — do margins, gutters, and column counts adapt cleanly across breakpoints, and does spacing scale with dynamic type?9293Scope & composition (per `docs/orchestration-policy.md` §9): **inherit under a design system (only build from scratch)** — `ux-typography` owns **type scale and readability** and `ux-color` owns **color-based emphasis/contrast**; take both from the system's tokens when one exists. Hierarchy is built from space *and* type *and* color together. If the audits surface a conflict, resolve toward the purpose: **layout exists to make content scannable and ranked — if spacing is arbitrary, nothing's on a grid, or everything has equal weight, the structure isn't done.**9495---9697## Common do/don't patterns9899| ❌ Don't | ✅ Do |100|---|---|101| Use arbitrary values (13px, 27px) | Put every value on one base unit (8px/4px) and a token scale |102| Pad and space by eyeball | Define spacing/sizing tokens and reuse them |103| Space related and unrelated items equally | Proximity: tight within a group, larger between groups |104| Let outer space be smaller than inner space | Keep external spacing ≥ internal spacing so groups don't merge |105| Drop content on the canvas with no grid | Align content to columns; keep it out of gutters and margins |106| Mix alignments / ragged edges | Align similar elements consistently on both axes |107| Give every element equal weight | Use space + position (and size) to rank importance |108| Fill every gap | Treat whitespace as active — grouping, breathing room, touch targets |109| Rebuild the grid per breakpoint | Adapt container sizes to a stable grid; reflow columns at breakpoints |110| Force one grid/proportion system everywhere | Pick the grid type that fits the content; reach for golden-ratio only to place focal points |111| Ship the layout unchecked | Hand off to aesthetics + accessibility (+ mobile-responsiveness) |112113---114115## Source lessons (Uxcel)116117- [Layout Fundamentals & Spacing](https://uxcel.com/lessons/layout-fundamentals-spacing-482)118- [Spacing & Sizing in Design Systems](https://uxcel.com/lessons/spacing-sizing-803)119- [Intro to Design Grids](https://uxcel.com/lessons/grid-i-044)120- [Best Practices for Designing Grids](https://uxcel.com/lessons/grid-best-practices-485)121- [Composition Grids in Design](https://uxcel.com/lessons/dc--lesson-050)122- [Applying Composition Grids in Design](https://uxcel.com/lessons/dc--lesson-679)123- [Typographic Grid](https://uxcel.com/lessons/typographic-grid-077)124- [Basics of Design Composition](https://uxcel.com/lessons/design-composition-182)125- [Intro to Design Layouts](https://uxcel.com/lessons/basics-139)126- [Design Format Properties](https://uxcel.com/lessons/dc--lesson-177)
Uxcel-Lab