Skip to contentShopify logoPolaris

Layout

Layout determines the placement, positioning, and organization of various components within the UI, such as buttons, menus, content sections, and other visual elements.

Space defines proximity

Space plays a vital role in establishing connections between items. The principle of proximity states that the closer objects are, the stronger their perceived relationship.

An order card with an inset table followed by an apps card with a grid pattern made of different surfaces

Grouping similar items together helps merchants understand which elements are related and helps them make faster decisions.

A card with a product title, product description and product status
Do

Group similar data points or tasks in the same card.

Elemes within a card that have reduced border radius, creating a nesting effect
Do

Nest inset shapes and surfaces.

Emphasis creates hierarchy

In the Shopify admin, larger, heavier, and contrasting elements attract attention and create visual rhythm.

Smaller, lighter, and more subtle elements are work-oriented and provide detailed information.

A grid pattern showing different marketing statistics, separated in cards that have a title and a larger stat numbe

Use size, weight, and contrast to establish hierarchy in the admin. Divider lines are used to delimit rows of information in data and index tables, and rarely for dividing information elsewhere.

A customer card using different surface colors and font sizes to delineate information
Do

Use weight and contrast to introduce sections of the UI.

A customer card using horizontal lines to deliane information
Don't

Use divider lines to create visual hierarchy or separation outside of indexes of tables.

Software, not website

Since the admin is more like software, rather than a website, elements need to be sized appropriately based on their job.

Different cards showing button placement, popover contextual menus and high-density cards containing a lot of information

Compact elements add detail, and larger elements command more attention. Surfaces adapt to these components and offer an optimized view of the admin.

A tag component with small tags and a small “add tag” button
Do

Create compact components for specialized, minute tasks.

A tag component with large tags presented as a list, each taking the entire space of a row, with a large “add tag” button in the upper right corner
Don't

Contradict the importance of a task with its size in the admin.

    On this page