Layout

---
name: layout
description: "Invent spatial compositions through attention, rhythm, and alternative information metaphors. Use for layout exploration, not a fixed grid-and-spacing inspection routine."
argument-hint: "[the UI / page / component layout to compose and harden]"
metadata:
  kind: heuristic
---

<!--
Copyright 2026 IamK77 — Licensed under the Apache License, Version 2.0.
See ./LICENSE and ./NOTICE · https://www.apache.org/licenses/LICENSE-2.0
-->

# layout

Invent spatial compositions through attention, rhythm, and alternative information metaphors. Use for layout exploration, not a fixed grid-and-spacing inspection routine.

## Starting point

A layout proposes a path of attention. Rather than arranging every item neatly, imagine what the reader encounters, overlooks, returns to, or discovers.

Bring a question, fragment, reference, or tension. Follow whichever association becomes useful; these invitations are not a sequence to complete. Speculation should remain distinguishable from an observed fact.

## Thought experiments

### Change the map

Arrange the same content as a timeline, a constellation, a shelf, or a conversation. Which relationships appear that a card grid hid?

### Compose with absence

Remove a region, create a pause, or let one element stand alone. What does the empty space allow the remaining content to say?

### Let an awkward case lead

Begin with the long title, the empty dataset, or the narrow viewport. Treat it as a compositional seed rather than a defect patched after the hero screen.

## A possible turn

A project overview as equal cards emphasises inventory. As a time horizon it emphasises sequence; as a cluster around unresolved questions it emphasises uncertainty. The useful invention may be a new information relationship rather than new CSS.

## Leave the space open

Offer a few genuinely different possibilities, a sketch, an analogy, or a sharper question when useful. Do not turn every prompt into a scored diagnostic, a completion gate, or a demand for an action plan. The human may choose a direction, combine them, or leave the question open.

Keel can implement a chosen journey; seaworthy handles its operational states. Ordinary CSS questions do not require either workflow.

## Optional references

Read selectively when a thread needs another perspective or a concrete technique. The notes supply possibilities, examples, and limits; none is a prerequisite or a requirement to close the exploration.

- [Compose around incomplete and changing work](references/application-states-and-form-visuals.md)
- [Let difficult content shape the composition](references/designing-for-the-long-tail.md)
- [Structure attention, not only alignment](references/grid-and-hierarchy.md)
- [Cadence through space and density](references/measure-and-rhythm.md)