Layout & Grid
These principles support the underlying spatial structure of the interface—organizing content, aligning elements predictably and enabling responsive behavior across screen sizes.
Layout and grid establish the foundation for visual organization in Bolt. A consistent grid system helps users scan content, locate actions and maintain context as they move through the product. Thoughtful use of negative space improves readability, focus and visual hierarchy, ensuring layouts remain clear, calm and usable at every breakpoint.
Layout should always serve a function. Visual structure is never decorative; it exists to support comprehension, navigation and task completion. Avoid adding complexity, inconsistency or misalignment—they reduce clarity.
For implementation details, see the Grid component.
Layout makes interfaces understandable
Permalink to "Layout makes interfaces understandable"A predictable grid guides attention, communicates priority and reinforces consistency across screens and devices. By establishing relationships through alignment and spacing, layout helps users understand what they're seeing and what to do next—without requiring conscious effort.
Bolt uses a multi-column responsive grid with consistent breakpoints to support continuity across devices. All elements align to the grid; spacing increments and proportions repeat to convey craft and precision.
Grids and alignment create predictable structure
Permalink to "Grids and alignment create predictable structure"- All layout structures adhere to Bolt's responsive grid system
- Elements must align to grid columns and rows—arbitrary off-grid placement is not allowed
- Alignment relationships are consistent within and across screens
- Layouts adapt smoothly across screen sizes, preserving hierarchy and reading order
- Navigation and body content reflow predictably at smaller widths; primary actions remain visible and discoverable at all breakpoints
Spacing and white space create clarity
Permalink to "Spacing and white space create clarity"- Spacing is intentional and repeatable, using Bolt's defined spacing scale
- White space is used to separate content, clarify relationships and reduce cognitive load
- Negative space is intentionally applied to keep layouts light, readable and scannable
See also: Space principles for guidance on spacing tokens.
Responsive layouts preserve hierarchy and context
Permalink to "Responsive layouts preserve hierarchy and context"- Layouts must respond fluidly to viewport changes without breaking hierarchy or clarity
- Content prioritization is preserved as screens narrow; secondary content may shift, but content should not disappear unexpectedly
- Every screen has a clear primary message or goal
- Visual hierarchy is established through placement, spacing and proportion—not decorative styling
- Preserve context across devices; when layouts change, users should still recognize where they are and what they're doing
Layout patterns create scanning rhythm
Permalink to "Layout patterns create scanning rhythm"- Use density thoughtfully to balance information richness and readability
- Repeat sizes, proportions and spacing patterns to create rhythm and cohesion across screens
- Keep layouts simple by default; introduce additional structure only when the content genuinely requires it
- Ensure layouts support readable line lengths, clear grouping and logical content order
- Avoid crowding interactive elements, especially at smaller sizes
Why It Matters
Permalink to "Why It Matters"Consistent layout and grid systems reduce cognitive effort, helping users quickly understand what they're seeing and what to do next.
Predictable structure lowers frustration, prevents disorientation and builds trust in the product's quality and reliability. By combining responsive grids with intentional spacing, experiences feel polished, readable and calm—rather than cluttered or overwhelming.
Simple rule of thumb: If the layout draws attention to itself instead of the content, it's doing too much.