Define the structure and spacing in a fast and composable way.


Our principles in practice

Our identity principles guide how we define our foundations to create a better experience for everyone. Here’s how they apply to layout:

  1. Coherent: Our standardized layout components provide a consistent, responsive, easy-to-use experience.
  2. Empowering: Using layout building blocks will improve your workflow, reduce errors, and make updates easier, saving time and hassle.
  3. Clear: Organized and consistent information is critical for easy navigation. Clear presentation and labeling help people understand where they are and what to expect.
  4. Inclusive: We improve our app accessibility for screen reader users by implementing ARIA landmark roles to simplify website styling and improve HTML semantics.
Landmarks are a type of region on a page to which the user may want quick access. Content in such a region is different from that of other regions on the page and relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.
— W3C, Accessible Rich Internet Applications specification

Further reading