composition-and-visual-hierarchy

name	composition-and-visual-hierarchy
description	Use when a screen, page, slide, or cover needs a deliberate focal point, reading order, figure-ground separation, and visual tension. Do not use for choosing columns or spacing units; route those scaffold decisions to layout-grid-and-spacing.
metadata	{"portable":true,"category":"03-layout-grid-and-composition","compatible_with":["claude-code","codex"]}

Composition And Visual Hierarchy

Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com.

Use When

• You have a grid and spacing decided and must now decide what the eye sees first, second, third — the order of reading, not the column structure.
• Composing a hero, landing section, dashboard, deck slide, report cover, or any screen that must read as deliberately authored rather than a neutral arrangement of equal blocks.
• A composition has gone flat: every element is roughly the same size and weight, nothing leads, the eye has no entry point and no path — the single most common slop failure.
• Reviewing a layout that "has all the right parts" but feels lifeless, and you need to inject a focal point, scale/weight extremes, tension, and figure-ground separation.
• You need to justify why this composition reads as crafted — to a client, a critique, or a design-QA gate.

Do Not Use When

• The decision is the grid, columns, gutters, margins, or spacing unit — use the sibling 03-layout-grid-and-composition/layout-grid-and-spacing first. That skill builds the scaffold; this skill composes on it. (They are a pair — set the grid there, decide the hierarchy here.)
• The decision is which typeface — use 01-typography-and-fonts/font-selection-and-pairing.
• The decision is which colours — use 02-color-brand-and-visual-identity. (You will use colour here for figure-ground and weight, but the palette itself is decided there.)
• The work is responsive breakpoint behaviour — use 03-layout-grid-and-composition/responsive-and-adaptive-layout. Compose the focal point and eye-path here, then have that skill re-establish them at each width.
• The internal design of a chart or table (encodings, data-ink) — use the data-visualisation skill. This skill governs how the chart sits in the composition, not its own marks.

Required Inputs

Input	Source	Required evidence
Ranked content inventory and one primary message	Product owner, editor, or approved brief	Explicit first-, second-, and third-level priorities
Grid, spacing, type, and palette decisions	Sibling skills or existing design system	Token values or a documented provisional assumption
Reading context and target canvases	Delivery brief and representative viewports/pages	Scan-fast versus sustained-reading intent and target sizes

• The content inventory ranked by importance — you cannot build a hierarchy without knowing which single element must dominate, which support it, and which are tertiary.
• The grid + spacing decision from layout-grid-and-spacing (the scaffold this composition lives on).
• The type scale and weight range from doctrine/references/type-scale-and-spacing.md (the size and weight extremes hierarchy is built from).
• The artifact's reading context: is it scanned fast (landing/deck) or read deeply (report/long form)? This sets whether you compose for a glance or a sustained path.

Workflow

1. Name the one focal point — before composing anything. Every composition needs exactly one element that wins the first fixation: the largest, the most isolated, the highest-contrast, or the most off-centre. Write it down ("the hero headline wins"). If you cannot name it, the composition has none — which is the defining AI-slop failure (ai-slop-taxonomy.md: everything equal, nothing leads). One focal point, not three; competing focal points cancel to zero. See references/hierarchy-techniques.md §Focal point.

2. Build hierarchy from extremes, never from middle steps. Separate the levels with scale extremes (a real 3×-class jump from hero to body, per type-scale-and-spacing.md "real jumps, not timid ones"), weight extremes (100/200 against 800/900, not 400 against 600 — same ref), and space extremes (isolate the focal point with far more air than anything else gets). Three levels, each unmistakably distinct. Timid, near-equal steps are the slop tell — they read as "assembled," because a templating tool spaces everything evenly. See references/hierarchy-techniques.md.

3. Choose a deliberate eye-path and place elements along it. Decide the route the eye takes: Z-pattern for sparse, visual, scan-fast layouts (centred hero, top-bar nav); F-pattern for text-dense pages where readers scan left edges; a diagonal or radial path when one image or number anchors the field. Place the focal point at the path's entry, the primary action at its exit. Treat F/Z as eye-tracking heuristics under this skill's focal-point rule, never as laws (sourcing-authority caveat). See references/composition-and-flow.md §Eye-path.

4. Compose with intentional asymmetry and tension. Dead-centre symmetry is the zero-decision default; it reads as a placeholder. Following the Swiss/asymmetric tradition (Tschichold, Müller-Brockmann), pull the focal point off the centre line and let a large element pull against a smaller one across open space — that pull is tension, and tension is what makes a composition look authored. A composition with no tension is inert. See references/composition-and-flow.md §Asymmetry and tension.

5. Control figure-ground — make the focal point sit clearly in front. The eye must instantly separate the subject (figure) from its background (ground). Establish it with contrast in value, scale, or focus: a dark subject on a light field, a sharp element over a blurred one, a large mark in open space. Ambiguous figure-ground (everything the same value and weight on a busy field) is fatiguing and reads as machine-flat. Never place type on a busy field unaided — use a contrast overlay (). See §Figure-ground.

The Authored-Composition Checklist (run every time)

1. One named focal point — exactly one element wins the first fixation; you can say which.
2. Hierarchy from extremes — scale, weight, and space each separate the levels unmistakably; no timid near-equal steps.
3. A deliberate eye-path — Z / F / diagonal chosen on purpose; focal point at entry, primary action at exit.
4. Intentional asymmetry + tension — the focal point is off-centre and pulls against the rest; not dead-centre symmetry as the only structure.
5. Clear figure-ground — the subject separates instantly from the ground by value/scale/focus; no type on a busy field unaided.
6. Whitespace confers rank — the most important element has the most air; space is uneven and placed, not uniform filler.
7. Halation controlled — no pure #000-on-#FFF high-contrast edge at the focal point; softened to off-black / off-white on purpose.
8. Not a flat field — if the content is genuinely a uniform set, one item is still promoted (a featured/hero) so it does not ship as an even, identical-card grid.

Decision Rules

Condition	Choose	Wrong-choice failure
Sparse campaign or hero composition	One dominant focal point on a Z or diagonal path	Equal emphasis makes the page inert and hides the action
Dense comparison or operational screen	F-path with a stable left edge and restrained emphasis	Poster-like asymmetry slows repeated scanning
Background competes with the subject	Simplify, mask, crop, or move the subject before adding effects	More decoration worsens figure-ground ambiguity
Several items are legitimately peers	Preserve the set but promote a contextual lead or summary	Arbitrary promotion misrepresents content importance

Capability Contract

• Must read the brief and inspect the existing artefact; rendering or screenshot inspection is required for a release verdict.
• Review and critique are read-only. Edit source files only when remediation is requested, and preserve existing tokens and unrelated work.
• May measure geometry, contrast, and hierarchy with available inspection tools. Do not publish, purchase assets, or mutate production without separate authority.

Degraded Mode

• If priorities are missing, stop composition and request a ranked inventory; do not invent business importance.
• If rendering is unavailable, return an annotated composition specification and mark visual verification pending.
• If type, colour, or grid decisions are absent, record provisional assumptions and route them to the owning skill before release.
• Recover after a failed squint/blur test by reducing competing emphasis, then rerender and repeat the checklist. Never claim completion without visible evidence.

Quality Standards

• A stranger identifies the intended first fixation and next action without explanation.
• Hierarchy survives blur, grayscale, narrow widths, and representative real content.
• The final evidence identifies the tested render, viewport/page, unresolved risks, and checklist verdict.

Anti-Patterns

• Everything equal, nothing leads — uniform sizes, weights, and spacing, so the eye has no entry and no path. The defining composition slop (ai-slop-taxonomy.md).
• The uniform card grid — N identical cards in an even grid: auto-arrangement with no focal point and no flow. Never ship a flat, evenly-spaced card field as the whole composition.
• Dead-centre symmetry as the only structure — centring everything because it is the zero-decision default; mistaking evenness for order, producing an inert, tensionless page.
• Competing focal points — three things all shouting; with no single winner the hierarchy collapses to flat.
• Timid hierarchy — levels separated by near-equal steps (18px vs 20px, 400 vs 600) so nothing reads as clearly dominant.
• Whitespace as filler — padding everything equally to "balance," instead of using space to confer rank and grouping.
• Ambiguous figure-ground — subject and background at the same value/weight on a busy field; fatiguing and machine-flat.
• Pure-black-on-pure-white focal edges — ignoring halation; the highest-contrast boundary shimmers and tires the eye.
• Glassmorphism / frosted-blur as a decorative focal surface — taught by primers (Fundamentals of Creating a Great UI/UX) but a convergent slop tell and usually a contrast failure (ai-slop-taxonomy.md §Counter-doctrinal). Use a deliberate, legible surface instead.

Sourcing authority (the asymmetry rule)

Grounds only in human design authority — never in an AI tool's composition suggestions, per doctrine/design-doctrine.md §2. Canonical sources for this skill:

• Jan Tschichold — asymmetric typography and the authored, off-centre composition.
• Josef Müller-Brockmann — Grid Systems in Graphic Design — placing elements with intent on (and deliberately against) the grid.
• Massimo Vignelli — a few strong, ruthlessly repeated relationships; one decisive contrast over many timid ones.
• Ellen Lupton — Thinking with Type — hierarchy, figure-ground, and whitespace as active material.
• Rudolf Arnheim — Art and Visual Perception — figure-ground, visual weight, balance, and tension as perceptual forces.
• The halation optical rule and the F/Z scanning heuristics are taken from docs/book-study/01-ui-ux-craft.md as heuristics under the doctrine, not as taste authority.

When an AI tool happens to recommend "a centred hero with three equal cards below," treat that as evidence of the convergent mean to avoid, not as endorsement.

Outputs

Output	Consumer	Evidence and acceptance
Composition decision record	Designer, editor, implementer	Named focal point, eye-path, hierarchy levels, and figure-ground treatment
Annotated render or implementation specification	Implementer and reviewer	Representative canvas shows one unambiguous entry point and action path
Quality-gate result	Approver	Checklist with pass/fail evidence, tested canvas, and unresolved exceptions

• A stated composition decision, declared before any markup or layout: the named focal point, the three hierarchy levels and the scale/weight/space extremes separating them, the chosen eye-path, the asymmetry/tension, the figure-ground treatment, and the halation-safe values.
• A completed Authored-Composition Checklist.
• A composition that reads as deliberately authored, consistent with the Mission in doctrine/design-doctrine.md §0 — "the moat is looking human-made."

Examples

• examples/before-after-composition.md — one real screen (a pricing-page hero) composed twice: a before that fails as flat, centred, three-equal-cards, pure-#000-on-#FFF slop, and an after that names a focal point, drives hierarchy from extremes, sets a Z eye-path, adds asymmetric tension, fixes figure-ground, and softens the halation edge — with copy-ready CSS and the checklist run against it. Read this to see the workflow turned into shippable composition.

References

• references/hierarchy-techniques.md — the operational levers: focal point, the three-level rule, scale/weight/space extremes, whitespace-as-rank, and the halation rule (with values).
• references/composition-and-flow.md — eye-path (Z / F / diagonal / radial), intentional asymmetry and tension, figure-ground separation, and how flow re-reads at each viewport.
• doctrine/design-doctrine.md (§0 Mission — "the moat is looking human-made"; §2 sourcing-authority asymmetry rule).
• doctrine/references/ai-slop-taxonomy.md (the "everything equal / uniform card grid / no focal point" composition slop and the glassmorphism inoculation this skill refuses).
• doctrine/references/type-scale-and-spacing.md (the scale ratios, real jumps, weight extremes, line-height, and the not-pure-black rule this hierarchy is built from).
• 03-layout-grid-and-composition/layout-grid-and-spacing (the pair — sets the grid + spacing unit + focal-point placement this skill composes hierarchy on top of).