Layout
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](/images/design/layout/layout-overview-01-space@2x.png)
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](/_next/image?url=%2Fimages%2Fdesign%2Flayout%2Flayout-overview-02-space-do%402x.png&w=1920&q=75)
Group similar data points or tasks in the same card.
![Elemes within a card that have reduced border radius, creating a nesting effect](/_next/image?url=%2Fimages%2Fdesign%2Flayout%2Flayout-overview-03-space-nesting-do%402x.png&w=1920&q=75)
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](/images/design/layout/layout-overview-04-emphasis@2x.png)
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](/_next/image?url=%2Fimages%2Fdesign%2Flayout%2Flayout-overview-05-emphasis-do%402x.png&w=1920&q=75)
Use weight and contrast to introduce sections of the UI.
![A customer card using horizontal lines to deliane information](/_next/image?url=%2Fimages%2Fdesign%2Flayout%2Flayout-overview-06-emphasis-dont%402x.png&w=1920&q=75)
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](/images/design/layout/layout-overview-07-adapt@2x.png)
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](/_next/image?url=%2Fimages%2Fdesign%2Flayout%2Flayout-overview-08-adapt-do%402x.png&w=1920&q=75)
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](/_next/image?url=%2Fimages%2Fdesign%2Flayout%2Flayout-overview-09-adapt-dont%402x.png&w=1920&q=75)
Contradict the importance of a task with its size in the admin.