# layout



The selected site direction governs identity choices. Typography gives distinct jobs to orientation labels, propositions, explanation, precise data, captions, and actions. Use actual edited copy at real length; do not shrink or drop qualifications to preserve a sketch's silhouette. Test long names, wrapping, zoom, and fallback fonts.

Compose responsive layouts from meaning and reading order. Keep captions with their subjects, qualification with the claim it limits, and action beside the decision it serves. At narrow widths, an honest stack can be the best arrangement. Verify focus order, reflow, and any sticky or overlaid content. Reuse tested primitives and use optional modern CSS only with appropriate fallback.

When `composition-v1` is selected, the creative packet supplies stage-selected advisory lessons from the pinned release, including expandable bodies. Apply or decline them based on current evidence and inspect the result. Preserve factual accuracy, usable interactions, and accessible markup. No section, image, font, or motif quota applies.


## Hierarchy and spacing in the rendered page

Make the visitor's immediate task clear through the relationship among proposition, explanation, evidence and action. Check the page at a glance and while reading: headings should describe the content that follows, supporting labels should remain supporting, and comparable items may share emphasis. Do not make every card, section heading and button equally prominent or enlarge type without checking the actual wording and available width.

Choose spacing from shared site tokens for component padding, related-element gaps, text measure, grids and section transitions. Keep labels with fields, captions with images, qualifications with claims, and actions with the decision they serve. Repeated components should share these relationships across routes. Reuse a named treatment when an exception recurs; avoid isolated pixel overrides that accumulate during expansion.

Vary section spacing and density according to content and narrative purpose. Neither identical padding on every section nor a fixed spacing ratio establishes quality. Inspect the opening, transitions and closing as one page, including long headings, short sections, missing media, validation messages and expanded disclosures. At narrow widths, reflow should preserve those associations and usable actions without compressing text, creating empty bands or hiding the next step.