Composition

Macrostructure

Select a structure that matches the user outcome:

• Task workspace: persistent navigation, utility bar, primary canvas, contextual secondary panel.
• Data overview: summary strip, comparison controls, prioritized data regions, drill-down path.
• Editorial: strong reading column, supporting index or metadata rail, deliberate media rhythm.
• Product detail: inspectable product media, essential facts, configuration, trust details, clear action.
• Campaign: full-bleed subject or product signal, concise offer, visible next section, progressive evidence.
• Branded front door: unmistakable name or offer, authored visual field, concise orientation, direct entry, and real output or interaction proof.
• Reference corpus: compact global wayfinding, clear index or reading route, strong search, restrained article measure, and stable next/previous movement.
• Form flow: progress context, focused step, inline validation, recovery, completion state.

Do not default to a centered headline, feature-card grid, repeated split bands, or dashboard cards when the content suggests another structure.

Route-specific shells

Treat the shell as part of the route's job:

• A public skill, product, venue, portfolio, or brand front door should establish identity and evidence before exposing dense navigation. Prefer a compact floating or inline navigation when the destination set is small.
• A repeated operational workspace can justify persistent navigation because switching and scan speed are primary tasks.
• A long reference route should optimize reading measure, table-of-contents access, search, and continuation rather than inherit the visual weight of either the hero or a dashboard.
• Keep shared tokens, link behavior, focus treatment, and naming across shells so route-specific composition does not become a disconnected microsite.

Do not treat shell consistency as identical chrome. Consistency is a coherent system serving different route jobs.

Reference transformation

For inspiration-led work, study references as separable traits: information hierarchy, rhythm, type contrast, edge treatment, navigation behavior, and proof strategy. Adapt them to the target instead of reproducing a recognizable shell. For explicit faithful implementation, preserve the supplied design; do not force diversification.

For inspiration-led work, name the useful retained traits and make structural choices from the target product. Compare the rendered result with the references at thumbnail scale; if it reads as the same product with changed copy, reconsider the structure.

Bleed and container contract

For every major section, define two independent extents:

• Background extent: viewport edge, page container, or component boundary.
• Content extent: shared page container, reading measure, panel grid, or control width.

Use a full-width wrapper with a constrained inner layout when a color, image, or material should bleed while content remains aligned. Do not calculate large child padding from 100vw when that child is already inside a centered or max-width container; this double-applies the gutter and creates empty space on wide screens.

Adjacent constrained sections should share measurable left and right edges unless the offset is intentional. Verify the computed x position and width at wide desktop, compact desktop, tablet, and mobile sizes.

Inset and sibling-gap contract

Declare five spacing roles independently:

• page or container gutter;
• gap between major sections;
• inset inside bordered or tinted surfaces;
• vertical stack gap between headings, copy, controls, and metadata;
• row and column gap between peer controls or items.

A visible border, background surface, or rounded boundary normally requires content inset on every occupied edge. A divider line is the exception because it separates content rather than containing it. Text, icons, media, and controls must not touch a container border unless an explicit full-bleed crop or edge-aligned interaction is the central idea.

Use gap, grid tracks, or an equivalent explicit layout rule for sibling relationships. Do not depend on collapsed margins, whitespace characters, justify-content: space-between, or incidental intrinsic width to create breathing room. On smaller screens, step down to a smaller spacing token rather than removing the gap. A zero gap is valid only for a deliberate seam such as segmented controls, table cells, tiled media, or a continuous rule.

Inspect the tightest real state: longest label, selected outline, validation message, wrapped body copy, and mobile stack. Focus rings and shadows also need clearance from neighboring content and clipping boundaries.

System constants and flexible signature

Define two stable system-level traits and one flexible signature. Prefer traits that create coherence without decorating every section:

• container alignment and reading measure;
• type roles and emphasis logic;
• primary and secondary action treatment;
• media crop or edge behavior;
• one transition or reveal behavior;
• density and whitespace relationships.

Repeat the constants with controlled variation. Do not apply every decorative motif to every region. A motif repeated in more than two adjacent regions needs a functional or brand reason.

Before implementation, map each long-page region as job | layout family | type role | evidence/media | density. Rewrite adjacent duplicate rows. Vary scale, alignment, surface, and media cadence while preserving the same system.

Hierarchy

Make the primary outcome obvious through position, scale, contrast, and surrounding space. Keep no more than one dominant action per local decision region. Secondary actions should remain discoverable without visually competing.

Establish one display apex for a normal long page. Use hero-scale type once, usually at the entry or one intentional editorial climax. Section headings must step down materially or derive emphasis from media, composition, density, or interaction. Compact panels, tables, sidebars, and tools need tighter type and stable row dimensions.

Avoid hard line breaks in responsive headings and prose unless the phrase must remain editorially fixed at every supported width. Prefer a measured container, responsive type step, and an inline or block phrase span so the browser can reflow naturally.

Split-region height balance

For side-by-side hero, product, comparison, or editorial regions, compare the natural heights using the longest real content. When one side is materially taller, choose one explicit response:

1. balance the content or give the shorter side a meaningful media, summary, or action region;
2. keep the shorter side sticky only within the start and end bounds of the shared section;
3. recompose long controls or details into a following full-width band;
4. switch to a sequential layout before the mismatch creates a dead column.

Do not use an oversized minimum height to disguise the mismatch. Do not create independent scrolling inside one column unless comparing persistent content is the actual task. Sticky children must release before the next section and must not cover content while the taller sibling continues.

First-viewport height budget

Budget height before selecting the final hero type step. For each representative short desktop and mobile viewport, calculate:

first-screen budget = viewport height
  - safe-area allowance

hero budget = first-screen budget
  - header or chrome rendered above the hero
  - intended next-section reveal

required stack = entry top/bottom spacing
  + eyebrow or metadata
  + title line box
  + supporting copy
  + primary proof or action
  + vertical gaps

Treat an integrated header and hero as one first-screen component. A min-height: 100svh wrapper can establish a minimum coverage floor, but does not bound the entry to one screen. Grid tracks, intrinsic images, text, and padding can still make it taller. If a true one-screen composition is intended at default text size, fit its contents as well as budgeting the wrapper. If the header remains outside, account for its measured rendered height, including responsive changes. Never stack an external header above a child hero that independently uses 100vh or 100svh.

At default text size, the required stack must fit inside the hero budget without clipping, overlap, transform scaling, or an overflow: hidden escape. Use the longest real title and action copy, not placeholder text. A heading that technically remains inside its own box still fails when its scale pushes required orientation, proof, or the primary action below a fixed hero boundary.

Repair an over-budget entry in this order:

1. Remove copy or controls that are not required for the first decision.
2. Reduce excessive top/bottom spacing and decorative gaps.
3. Choose a smaller discrete display type step or a wider safe title measure to reduce accidental lines.
4. Recompose media and secondary proof rather than shrinking body text or controls.
5. Let the entry grow and the document scroll naturally when the brief does not require a one-screen composition.

Do not impose one global hero height or font-size ceiling. Editorial posters may spend more height on type, while commerce and product entries need earlier facts and actions. Fixed 100vh or 100svh heroes are especially fragile when combined with separate headers, mobile browser chrome, long copy, or overflow: hidden; give the whole first screen one viewport budget or use content-driven sizing.

Fit behavior, not a magic height

Separate the paint layer from content sizing. Background photography can fill an entry without contributing its intrinsic height to the text layout. An inspectable product image needs an explicitly sized region and a crop decision; cover is valid only when the must-see subject survives it. Use contain, an alternate crop, or a different composition when it does not.

For an integrated entry, one grid can contain the header, hero, and a meaningful continuation band within its minimum viewport budget. For an external header, measure its occupied space rather than guessing a universal pixel value. Allow either composition to grow naturally when content, text zoom, or a very short window requires it. A content-led fallback is a deliberate outcome, not permission to clip or shrink supporting text.

The runnable visual lab demonstrates both header models, a deliberately broken external-header case, and text-growth probes. It uses a shared minimum budget plus content reflow, not a fixed-height box that masks overflow. Validate actual element bounds and image crop in the rendered page; passing source inspection alone is insufficient.

Responsive recomposition

Define content priority before breakpoint CSS. On narrow screens:

• preserve reading and focus order;
• move contextual panels below the primary task or into a labeled disclosure;
• convert wide tables only when a card or list preserves comparison meaning;
• maintain stable controls and touch targets;
• crop media intentionally instead of hiding the subject;
• keep a hint of following content when the first viewport is promotional.

Do not shrink every dimension proportionally. Change columns, order, grouping, labels, and disclosure based on task priority.

Cards and surfaces

Use cards for repeated entities, selectable options, modals, and genuinely framed tools. Prefer dividers, whitespace, headings, and full-width bands for page sections. Never nest decorative cards. A border or tinted surface must communicate grouping, state, or affordance.