Layout
Layout systems govern how content and interface elements are arranged within available space. They provide clear rules for visual structure, alignment, proportions, and cross-device adaptability.
By establishing shared spatial primitives, the layout system helps teams compose cohesive screens efficiently—eliminating the need to reinvent structural rules for every new interface.
Layout Principles
Our layout rules prioritize scanning speed, clear visual relationships, and cognitive ease over decorative complexity.
Position defines priority
Visual hierarchy is established through strategic placement, spacing, and contrast rather than scale alone. Placing primary elements along the natural start of a scan path communicates importance instantly, allowing supporting information to settle into secondary spatial tiers without visual competition.
Proximity before borders
Rely on spacing tokens to group related elements before reaching for cards, dividers, or background fills. Distance is the strongest visual signal: use tight gaps to bind related controls together, and reserve explicit boundaries only for isolating fundamentally distinct contexts.
Unbroken alignment axes
Snap components to shared vertical and horizontal edges to create frictionless reading paths. Consistent alignment anchors elements across the viewport, eliminates ragged visual noise, and guides the eye through content in a predictable rhythm.
Whitespace defines density
Negative space is a functional layout tool, not leftover canvas. Calibrate spacing tokens deliberately to control reading pace and information density—giving high-priority elements room to breathe while keeping operational data-heavy views compact and focused.
Predictability over novelty
Apply identical structural patterns to equivalent interface problems so users never have to re-learn how to navigate. Consistent page widths, margins, and section rhythms build intuition and trust, ensuring that any deviation in layout is deliberate and meaningful.
Modular Grid
A powerful coordinate system that underpins any well-thought-out design. It serves as a framework ensuring order, consistency, and visual harmony in content arrangement.
Originally developed for print layout (where both columns and rigid horizontal rows for text were essential, forming modules—hence the name), the modular grid has adapted to the dynamic and infinite height of the web. Here, it evolved into a more flexible columnar grid.
The 12-column grid: This is the golden standard in web design, especially for desktop layouts. It is extremely flexible, as 12 can be divided by 2, 3, 4, and 6, allowing the creation of complex and adaptive layouts using the exact same modular grid.
Layout Patterns
Layout patterns are foundational macro-templates that orchestrate multiple elements across the viewport.
Unlike isolated UI components, patterns dictate high-level page shell behaviors and content boundaries. Common patterns include:
Single-column
Focused, linear reading experiences (documentation, articles, forms).
Sidebar & Content
Persistent navigation alongside dynamic content (dashboards, settings).
Sidebar & Content
Persistent navigation alongside dynamic content (dashboards, settings).
Sticky Aside
Long-form content paired with contextual metadata or table of contents.
Multi-column Dashboards
Dense modular layouts composed of variable-width cards.
Responsive Layout
Responsive behavior is built into the design tokens and layout primitives, rather than patched on as disjointed device-specific overrides.
As the viewport scales across predefined breakpoints, the layout system coordinates:
Column count
Transitioning gracefully (e.g., 12 columns desktop → 8 tablet → 4 mobile).
Gutter & Margin scaling
Adapting edge padding to conserve precious touch target areas.
Stacking order
Collapsing horizontal side-by-side elements into vertical flows.
Adaptive visibility
Repositioning secondary sidebars into drawers or contextual sheets.