Adobe Commerce 2.3 reached end of support in September 2022.

Admin Style Guide

The Admin guide sets our foundational design, writing, and content standards for the 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 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 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