group | subgroup | title | landing-page | menu_title | menu_order | menu_node |
---|---|---|---|---|---|---|
admin-style-guide |
Admin Style Guide |
Admin Style Guide |
Admin Style Guide |
Introduction |
1 |
The Magento Admin guide sets our foundational design, writing, and content standards for the {% glossarytooltip 18b930cf-09cc-47c9-a5e5-905f86c43f81 %}Magento Admin{% endglossarytooltip %} software. For more specific user-interface standards, see the [Admin Design Pattern Library]({{ page.baseurl }}/pattern-library/bk-pattern.html).
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:
-
[Color]({{ page.baseurl }}/design-styleguide/color/color.html) — Reflects our brand personality, meeting accessibility standards.
-
[Iconography]({{ page.baseurl }}/design-styleguide/iconography/iconography.html) — Provides a visual representation of functionality or content, usually paired and displayed with a label.
-
[Page Grid]({{ page.baseurl }}/design-styleguide/pagegrid/pagegrid.html) — Establishes global layouts for page templates and how content and design patterns can be placed in the grids' columns.
-
[Typography]({{ page.baseurl }}/design-styleguide/typography/typography.html) — Sets page hierarchy and content type specifications.
-
[Voice and Tone]({{ page.baseurl }}/design-styleguide/content-voice-tone/content-voice-tone.html) — 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]({{ page.baseurl }}/design-styleguide/errors-and-messages/errors-and-messages.html) — Establishes how to communicate with users when errors occur or important information needs to be communicated.
-
[Buttons and Links Usage]({{ page.baseurl }}/design-styleguide/buttons-and-links-usage/buttons-and-links-usage.html) — Defines the differences between buttons and links and when they can be used as calls to action.
-
[Capitalization]({{ page.baseurl }}/design-styleguide/capitalization/capitalization.html) — Provides guidance for how we use sentence case, title case, and all caps.
-
[Headings and Organization]({{ page.baseurl }}/design-styleguide/headings-and-organization/headings-and-organization.html) — Prioritizes content and creates a hierarchy for users to easily navigate Magento Admin.
-
[Punctuation]({{ page.baseurl }}/design-styleguide/punctuation/punctuation.html) — Surfaces exceptions to the Associated Press (AP) Stylebook’s punctuation standards and summarizes key stylebook advice.
-
[Content Formats]({{ page.baseurl }}/design-styleguide/content-formats/content-formats.html) — Standardizes abbreviations, acronyms, file-type formats, addresses, and lists.
-
[Number Formats]({{ page.baseurl }}/design-styleguide/number-formats/number-formats.html) — Lists basic numeric and heading standards and covers percentages, money, and dates and times.
[Admin Design Pattern Library]({{ page.baseurl }}/pattern-library/bk-pattern.html)