Admin Style Guide

The Magento Admin guide sets our foundational design, writing, and content standards for the Magento Admin software. For more specific user-interface standards, see the Admin Design Pattern Library.

Why follow the style guide? A style guide is the best tool for designers and writers to establish and maintain consistency, which improves communication throughout the application. A seamless look-and-feel and a steady, encouraging writing style make the application usable and engaging.

To get started or refresh your knowledge, read the following documents:

Design

  • Color — Reflects our brand personality, meeting accessibility standards.

  • Iconography — Provides a visual representation of functionality or content, usually paired and displayed with a label.

  • Page Grid — Establishes global layouts for page templates and how content and design patterns can be placed in the grids’ columns.

  • Typography — Sets page hierarchy and content type specifications.

Writing and Content

  • Voice and Tone — Outlines a set of ground rules to engage and empower users as they navigate the Magento Admin and perform tasks with confidence and ease.

  • Errors and Messages Writing — Establishes how to communicate with users when errors occur or important information needs to be communicated.

  • Buttons and Links Usage — Defines the differences between buttons and links and when they can be used as calls to action.

  • Capitalization — Provides guidance for how we use sentence case, title case, and all caps.

  • Headings and Organization — Prioritizes content and creates a hierarchy for users to easily navigate Magento Admin.

  • Content Formats — Standardizes abbreviations, acronyms, file-type formats, addresses, and lists.

  • Number Formats — Lists basic numeric and heading standards and covers percentages, money, and dates and times.

Admin Design Pattern Library

Updated