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.