Layout and Composition

Status: normative design reference

Version: 0.1

This document defines how HIF organises interface content in space. It applies to application windows, websites, operating-system surfaces, embedded interfaces, documents with interactive regions and spatial interfaces. Layout is treated as a model of meaning and action, not as decoration.

1. Outcomes

A conforming composition enables a person to:

• identify the page, region, object and current state;
• distinguish related from unrelated content;
• find the next relevant action without scanning every element;
• read and operate content in a meaningful order;
• predict what remains fixed and what can move, scroll or overlay;
• enlarge, reflow, translate and personalise the interface without losing information or function;
• compare data and complete forms without accidental association;
• recover orientation after navigation, interruption or a layout change.

Visual order MUST support the task model and MUST NOT invent a different object or command hierarchy from the semantic interface.

2. Perceptual organisation

2.1. Grouping mechanisms

Composition MAY use recurrent perceptual tendencies as hypotheses:

These are descriptive tendencies, not universal laws, conversion recipes or proof that a design works. Their effect depends on task, culture, expertise, visual ability, display, competing cues and the whole configuration. Gestalt terminology MUST NOT replace observation with representative users. When cues conflict, the interface MUST resolve the intended relationship through semantics, labels, structure or interaction rather than assuming perception will repair it.

2.2. Grouping contract

For every material group, record:

group identity
member rule
semantic relationship
visual cue
programmatic structure
entry and exit
collapsed and expanded states
small-space transformation

The visual and programmatic groups MUST agree. Space alone MUST NOT be the only evidence for a consequential relationship.

3. Hierarchy and emphasis

Hierarchy answers, in order:

1. Where am I?
2. What object or task is this?
3. What changed or requires attention?
4. What can I do?
5. What is supporting detail?

Hierarchy MAY use order, position, scale, weight, space, contrast, enclosure, colour, depth and motion. Emphasis is a limited budget. If many elements claim the highest level, none establishes a reliable priority.

The strongest emphasis SHOULD be reserved for the most important current information or action, not automatically for the most commercially valuable action. Destructive, irreversible or privacy-sensitive actions MUST be distinguishable without being made easier to trigger accidentally.

Each page or bounded workspace SHOULD have:

• one perceivable primary identity;
• a small, justified set of hierarchy levels;
• a defined primary task or explicit multi-task model;
• stable landmarks and navigation;
• locally visible state and ownership;
• secondary material that remains discoverable without competing continuously.

Size alone MUST NOT encode heading level. Visual headings MUST have matching semantic headings or equivalent platform structure.

4. Grids, axes and alignment

4.1. Grid selection

A grid is a coordination system. It is not a mandatory aesthetic and MUST NOT override meaningful order. Depending on the content, HIF recognises:

• flow grid for reading and document order;
• column grid for coordinated regions and measures;
• modular grid for repeated cells or dashboard units;
• baseline grid for typographic rhythm;
• data grid for comparison across aligned values;
• spatial grid for maps, canvases and direct manipulation;
• platform-managed layout where the environment owns placement.

Choose the least complex grid that preserves relationships at all supported sizes. A grid MAY change across layout modes. Content MUST NOT be stretched merely to occupy every track.

4.2. Alignment rules

Alignment establishes invisible connections. Related labels, values and controls SHOULD share a meaningful edge, baseline or centre. Misalignment MAY be used to mark a genuine change of level or role, but random near-alignment creates visual friction.

Use logical axes (inline and block) in the specification. Physical left/right assumptions MUST NOT be embedded where writing direction can change.

Text SHOULD normally align to a stable reading edge. Centred body copy and fully justified interface text require evidence that readability, variable content and localisation remain acceptable.

5. Rhythm and spacing

Space communicates relationship at three levels:

1. space inside a component establishes its internal construction;
2. space between components establishes grouping and sequence;
3. space between regions establishes hierarchy and context.

A spacing system SHOULD use a restrained scale but MUST permit optically or linguistically necessary exceptions. The base increment is an implementation aid, not a rule that every distance must be its integer multiple.

The following relation SHOULD normally hold:

space within a group < space between peer groups < space between regions

Exceptions MUST remain unambiguous. A divider does not compensate reliably for incorrect spacing. Negative space is functional capacity for separation, focus, scanning, future localisation and zoom; it is not automatically wasted space.

Vertical rhythm SHOULD survive:

• multi-line labels and validation messages;
• larger text and custom text spacing;
• translated strings and alternative numerals;
• asynchronous content and status insertion;
• compact and comfortable density modes.

Margin collapse, sub-pixel rounding and platform text metrics MUST be tested in rendered implementations rather than inferred only from design-tool frames.

6. Balance, measure and density

6.1. Balance

Balance is the distribution of perceptual weight, not compulsory symmetry. Weight is influenced by size, contrast, colour, detail, isolation, motion and semantic importance. Asymmetry MAY produce a stable composition when it supports task direction and does not make secondary material dominate.

Decorative balance MUST NOT reorder controls, separate a label from its value or place critical status in a weak peripheral region.

6.2. Reading measure

Prose measure MUST be constrained by readability rather than by the maximum available width. The Product Profile defines tested ranges for each type role, script, size and context. A single universal character count MUST NOT be claimed for every typeface, language or reading condition.

Long-form reading SHOULD have:

• a stable start edge and predictable line progression;
• sufficient line height for the selected face and measure;
• visible paragraph and section structure;
• headings that remain associated with following content;
• no competing fixed layer covering the reading column.

6.3. Density

Density is a coordinated profile of visible information, spacing, target size and navigation—not a global scale transform. HIF distinguishes:

• comfortable for general work;
• compact for expert, high-frequency data work with precise input;
• touch for coarse pointers and hand-held operation;
• large/accessible for increased targets, type and separation;
• distance/kiosk for remote viewing or constrained public interaction.

Changing density MUST preserve semantic order, accessible targets, focus visibility, labels, error presentation and access to commands. Content density MAY increase on a larger surface only when comprehension and interaction remain acceptable; empty space does not itself justify adding panels.

7. Reading, focus and visual order

Source, accessibility, reading, focus and visual orders MAY differ only when the difference preserves meaning and operability for every supported mode. CSS or visual placement MUST NOT create a meaningful sequence that the programmatic structure cannot express.

The default order SHOULD follow task causality:

context → instruction or state → input/content → action → result or recovery

For bidirectional or vertical writing, order follows the language and platform conventions recorded in the Product Profile.

Test each composition with:

• styling disabled or simplified;
• keyboard-only progression;
• screen-reader structural navigation;
• 200% and 400% browser zoom where applicable;
• translation to the longest supported representative content;
• content inserted, removed, loading, failed and partially available.

8. Whitespace, containers and boundaries

Use open space when proximity and alignment establish a group sufficiently. Add a boundary when it communicates a real property such as:

• containment or ownership;
• selection;
• interactivity;
• separate scrolling;
• security or permission boundary;
• transient or modal layer;
• independent state or lifecycle.

Nested cards and borders SHOULD be avoided unless each layer has a distinct semantic contract. Surface colour, shadow and blur MUST NOT be the only means of distinguishing a necessary boundary.

Whitespace MUST NOT hide unavailable information, simulate premium quality at the cost of task efficiency or force excessive scrolling for frequent work.

9. Forms

9.1. Form composition

A form is a dialogue about data and consequence. Its layout MUST establish:

• purpose and scope;
• logical sections;
• an explicit label for every control;
• relationship between help, input, unit and validation;
• required/optional policy;
• action hierarchy;
• progress, saving and submission state;
• error summary and local recovery;
• preservation of entered values.

Single-column flow SHOULD be the default for forms with dependent questions, variable messages or linear completion. Multiple columns MAY be used for short, strongly related fields when reading order, zoom, localisation and error insertion remain unambiguous.

Placeholder text MUST NOT be the only label. Labels SHOULD remain visible after entry. Help text belongs near the relevant field but MUST NOT interrupt routine scanning when it is not needed.

9.2. Actions

The primary action SHOULD follow the fields in meaningful order. Sticky action areas MAY be used for long or high-frequency forms, provided they do not cover content, errors or focused controls. Cancel, back, save draft and destructive actions MUST express distinct consequences.

On validation failure, focus and view position MUST move predictably without discarding input or concealing the error summary.

10. Tables and dense data

Use a table when comparison across rows and columns is part of the task. Do not replace a genuine table with unrelated positioned containers, and do not use a table solely to force visual layout.

A data table specification defines:

• row and column semantics and headers;
• units, precision, alignment and missing-value representation;
• sorting, filtering, pagination or virtualisation;
• selection and bulk-action ownership;
• row expansion and hierarchy;
• sticky regions and their occlusion behaviour;
• small-space strategy;
• keyboard and assistive-technology navigation;
• loading, empty, partial and error states.

Numbers intended for comparison SHOULD align by a meaningful place, such as decimal or final digit, and use consistent units. Text normally aligns to its reading start. Icons and colour MUST NOT be the only status representation.

At small widths, choose deliberately among:

• horizontal scrolling within one labelled region;
• prioritised columns with user-controlled disclosure;
• record cards preserving header–value relationships;
• a focused detail view;
• a domain-specific visualisation.

Reflow MUST NOT silently remove data, actions or row identity. Sticky headers and columns MUST be tested at zoom and with enlarged text for occlusion.

11. Spatial layers, scrolling and elevation

Every layer has a role, owner, input policy and lifetime:

Elevation MUST correspond to interaction and occlusion, not merely to brand style. The stacking model MUST be tokenised or centrally governed. Arbitrary large z-index values are a defect.

Avoid nested scrolling in the same axis unless each scroll region is necessary, labelled and independently operable. Fixed and sticky regions MUST:

• have a documented threshold and collision rule;
• preserve access at zoom;
• avoid covering focused content;
• adapt to safe areas and on-screen keyboards;
• not consume most of a small viewport.

12. Layout tokens

Recommended semantic token families:

layout.measure.reading
layout.measure.form
layout.region.min/max
layout.columns.count
layout.gutter
layout.margin.inline
space.related
space.group
space.region
space.inset.control
size.target.minimum
size.control.block
layer.embedded/raised/floating/overlay/modal/system
border.boundary/subtle/strong
density.comfortable/compact/touch/large/distance

Tokens MUST state unit, allowable range, mode, direction behaviour and consumers. Primitive pixel values MUST NOT become a component contract when a semantic relationship can be named. Spacing tokens MAY resolve differently by platform or density while preserving the intended grouping.

13. Composition algorithm

Use this sequence for each page, window or workspace:

1. Model objects, tasks, commands, states and consequences.
2. Inventory content, variable-length cases, permissions and exceptional states.
3. Order content semantically before assigning coordinates.
4. Group by relationship, giving each material group a programmatic structure.
5. Prioritise current task, critical state and recovery.
6. Choose flow, grid, measure and density from content requirements.
7. Allocate layers, scroll ownership and safe areas.
8. Define transformations for constrained and expanded spaces.
9. Tokenise stable relationships, not incidental frame measurements.
10. Prototype with real, long, short, empty, failed and adversarial data.
11. Verify reading, focus, pointer, touch, assistive technology, zoom, localisation and performance.
12. Record exceptions, evidence and residual risk.

Starting from a polished frame before steps 1–5 is not an accepted substitute.

14. Acceptance tests

14.1. Structural tests

• Every visible region and group maps to a semantic or platform structure.
• Heading, label, value, help and error relationships are programmatically determinable.
• Source and focus order preserve meaning without layout styling.
• Repeated layouts use the same relationship tokens unless an exception is recorded.
• No arbitrary stacking value bypasses the layer contract.

14.2. Visual tests

• Primary identity, current state and next relevant action can be located without reading every element.
• Related items remain visibly closer or more strongly connected than unrelated peers.
• Alignment is deliberate at all supported content lengths.
• Emphasis levels are distinguishable in colour, monochrome and forced-colour modes.
• Boundaries and overlays remain perceivable without shadow or blur.

14.3. Stress tests

• Verify minimum and maximum supported window sizes and every transformation threshold.
• Verify 200% text enlargement and 400% browser zoom where applicable.
• Replace content with representative longest translations, unbroken identifiers, large numerals and mixed writing directions.
• Insert validation, banners, virtual keyboards, browser chrome and safe-area insets.
• Exercise loading, empty, partial, error, offline, permission-denied and stale states.
• Operate all content using keyboard, coarse pointer, precise pointer and supported assistive technologies.

14.4. Task evidence

Representative evaluation MUST establish that people can:

• identify grouping and hierarchy correctly;
• locate and complete primary tasks;
• compare tabular values without row or unit errors;
• associate form errors with the correct field;
• retain orientation after an overlay, resize or navigation;
• work at the declared density without unacceptable error or fatigue.

Aesthetic preference alone is insufficient evidence of composition quality.

Sources

• W3C — Web Content Accessibility Guidelines (WCAG) 2.2
• W3C — CSS Grid Layout Module Level 2
• W3C — CSS Flexible Box Layout Module Level 1
• W3C — CSS Box Alignment Module Level 3
• W3C — CSS Writing Modes Level 3
• WAI-ARIA Authoring Practices Guide — Landmarks
• WAI-ARIA Authoring Practices Guide — Grid Pattern
• HTML Living Standard — Tables
• HTML Living Standard — Forms
• Palmer (1992), Common region: a new principle of perceptual grouping
• Wagemans et al. (2012), A century of Gestalt psychology in visual perception: I
• Treisman and Gelade (1980), A feature-integration theory of attention