# Layout Check Verify that a selected page's spacing, grid, sizing, and responsive behavior follow the project's layout system. ## Instructions ### Before checking - Inspect the existing page, its breakpoints, and layer settings without moving, resizing, or restyling anything. - Read the Settings block first. Use it as the single source of truth for expected values. - Check every breakpoint listed in Settings, not only Desktop. - Also check the in-between widths and the minimum supported width, since most layout bugs appear between breakpoints. - Skip layers listed under Allowed exceptions, but list them in the report so the exception stays visible. ### Spacing - Check gap and padding values on stacks and grids against the spacing scale. - Check that all values are multiples of the base unit, or of the half-step when allowed. - Separate near-miss values (e.g. 23px, 30px, 50px) from deliberate off-scale values, and flag near-misses as likely mistakes. - Check that section vertical padding matches the value set for each breakpoint. - Check that repeated elements (cards, list items, logos, feature rows) use the same gap throughout the page. - Check that spacing inside components matches spacing inside the same component elsewhere on the page. - Check that spacing is created with stack gap and padding, not with empty spacer frames, fixed-height blank layers, or absolute offsets. - Check that spacing between related items is smaller than spacing between unrelated groups (proximity reflects grouping). ### Containers and width - Check that content is constrained to the content max width and centered, unless a section is intentionally full-bleed. - Check that full-bleed sections still keep their inner content inside the max width and side margins. - Check page side margins at each breakpoint. - Check sizing modes: Fill where content should stretch, Fit where content should hug, Fixed only where a fixed size is intended. - Flag fixed widths or heights that would clip content or overflow at the minimum supported width. - Check min and max width settings on text blocks, images, and cards where content length can vary. - Check for horizontal overflow or horizontal page scroll at every tested width. ### Grid and alignment - Check that multi-column layouts use the column count and gutter set for each breakpoint. - Check that content edges align across sections (the same left edge for headings, body text, and cards). - Check that items in rows share alignment (top, center, or baseline) consistently. - Check that grid items with variable content keep equal heights where the design implies equal cards. - Check that absolute positioning is used only for decorative or overlapping elements, not for primary layout. ### Responsive behavior - Check breakpoint overrides: stack direction changes, wrapping, reordering, and resized elements. - Check that reordering on smaller breakpoints keeps a logical reading order. - Flag layers duplicated per breakpoint and hidden on others, since this duplicates markup and makes edits drift apart. Prefer one layer with overrides where possible. - Check that text does not collide, overlap, or truncate unexpectedly at in-between widths. - Check that images keep their intended aspect ratio and crop at every width. - Check that sticky and fixed elements (navigation, banners, buttons) do not cover content on mobile. - Check that the mobile navigation and overlays fit within the minimum supported width. ### Components and consistency - Check that component instances keep the primary component's spacing and have not drifted through local overrides. - Check that corner radii use values from the radius scale, and that nested radii look consistent (inner radius smaller than outer). - Flag unnecessary wrapper frames and deep nesting that add no layout function. - Check that layer names are clear enough for the report to locate issues. If they are not, describe the layer's position. ### Scope limits - Do not audit typography, color, motion, CMS content, SEO, or accessibility, except where a layout problem directly causes overflow, overlap, or hidden content. - Do not suggest visual redesigns or new sections. - Do not apply fixes unless explicitly requested. When fixing, change only the values named in the report, preserve breakpoint overrides, and confirm the change at every tested width. ## Report to the User Mark each item as passed, issue found, needs manual review, or not applicable. Group results by breakpoint. For each issue, give the layer name or location, the breakpoint, the current value, the expected value from Settings, the impact, and the recommended next step. End with: - Any settings that were inferred rather than provided. - The top three fixes by impact. - Layers skipped as allowed exceptions.