Page layout
What is Page layout for?
Long-form pages often contain dense information. A well-structured layout helps users:
- Understand the content at a glance
- Navigate between section efficiently
- Scan for what matters without cognitive overload
These guidelines outline how to structure pages using consistent typography, spacing, and layout components.
Contents
Typography and font styles
Typography provides the foundation for hierarchy. Use each text style with intention every level should signal meaning and structure.
Use typography to:
- Create a predictable reading hierarchy
- Communicate relationships between sections
- Break long content into scannable segments
Example
Below is an example demonstrating how typography can be used to organize and structure long-form content.
Page and content structure
The layout hierarchy helps users understand how information is grouped and how to move through complex pages.
Use this model when structuring content:
1. Section card
When to use
- To divide the page into major content sections
- To give users clear landmarks for navigation
- To create visual "chapters" on long pages
2. Line separator
When to use:
- To divide related but distinct subsections
- To separate grouped contents within a section card
- To provide lightweight structure
Line separator used to distinguish between main section and sub section
Line separator used to distinguish between sub sections
3. Container
A container (often represented as a gray box) is a layout element used to group related content and interface components. Containers help users quickly understand how information is organized by establishing clear visual relationships and reducing cognitive load.
When to use
- To group related elements by organizing related elements into clearly defined sections
- To establish hierarchy by highlighting important or actionable information
- To improve page structure and scanability by breaking complex layouts into digestible container
Use containers sparingly. Overusing them can make the UI feel cluttered and overly segmented. In many cases, well-applied spacing provides a cleaner and more natural separation than an additional visible container.
Container used to create logical group between filters for table below it
Container used to emphasize important content
Container used to break complex pages into digestible segments
Updated about 19 hours ago