Hire Us

Customized Styling for Your Magento 2.0 Admin Backend



When designing and developing a website using Magento 2, you would like to make some changes that enhances the outlook, presentation and functioning of it. Magento 2 offers a wide variety of choices and solutions to do so. With customization possibilities in color, typography, icons and page grid, you can now develop an ecommerce website that you think suits your business the most.  As the admin you can make several changes from the backend quickly and effortlessly.  However, a style guide is essential to make these changes lasting, easy and effective.

What is a Style Guide?

A style guide is a set of high standards governing Magento’s Admin software. In this guide the color, iconography, typography and page grid standards are used across Magento to ensure a stable, efficient, consistent, and elegant user experience.

Why Do You Need A Style Guide?

You need a style guide in order to establish consistency and boost communication throughout the application. If you are looking for a seamless look and feel, the style guide makes the process usable and engaging. The style guide as explained earlier has four categories- color, typography, iconography and page grid. Learning about them will allow you to customize the styling of your ecommerce store in Magento 2.


Color plays a vital role for a company that several people tend to ignore. Colors are responsible for creating the brand identity and its personality. The color palette offered in the style guide reflects the same. It meets the standards, offering hierarchy, legitibility, messaging and navigation.



Typography improves the page hierarchy. It develops the page and gives it a clear and accessible understanding for viewers. Heading, body text, legal text and link text are also variations of the typography offered. The typography includes the following:

  • H1-Page title is Open Sans font, regular, 28px, line height 34px
  • H2-Section heading is Open Sans font, Regular, 20px, line height 25px
  • H3-Subsection heading is Open Sans font, Semibold, 17px, line height 22px
  • Body text is Open Sans, Regular, 14px, line height 20px. Spacing (margin) between paragraphs is 15px.
  • Legal text is Open Sans, Regular, 12px, line height 15px. Spacing (margin) between paragraphs is 12px.
  • Link text is the same as body text, adding a #0066cc color and an underline hover state.

Page Grid

The element page grid determines the length and breadth of your web page and how things are going to be placed for better visibility and accessibility.  The style guide offers a 12 column fluid-width grid that is placed next to the page’s 1 column fixed-width left navigation. This 12 column grid’s width spans a minimum 984px. The grid expands and shrinks to fit both bigger and smaller screens.

Slide-out grids are also available. Here slide-out panels are like the modal window, it breaks apart and simplifies the complex subtask that is included within a primary task.  The slide out grid runs from right to left atop, especially when a panel spawns. This grid is completely over the parent page. A narrow space remains on the left showing the navigation and a little part of the parent page. The grid is in a 12-column page, with additional 15px padding on the left edge. The gutter spacing at the left is fluid, designed on the basis of the browser width. Additional gutter space is used at the left for multiple panels to reveal a little of a slide-out below another slide-out.


Icons can be found throughout the Magento Admin Interface. It is presented as controls to initiate a function or to take the user to a different section. The function of an icon is to offer a visual representation of the content or functionality and therefore should have a resemblance to the concept. An icon should be capable of communicating their function to the user without the help of any text. They should minimize ambiguity. Icons can be designed in any style and they are available in various sizes. The Magento icon library uses simple, flat, single color, 2D style icons. This style prevents any loss of detail at small sized screens. It also makes the shapes easier to comprehend. To know more about iconography, click here.

Source: http://devdocs.magento.com/guides/v2.0/design-styleguide

Source: http://devdocs.magento.com/guides/v2.0/design-styleguide


Magento’s style guide can help in better understanding the tool and using it to make better websites that work wonders for ecommerce site. We offer very brief insight about it in this blog but for more details refer to Magento development documents.

Tagged: , ,

Customized Styling for Your Magento 2.0 Admin Backend