Pro design language

Efficiency, intuition, and style combined to empower merchants with data-rich views, action-driven interfaces, and dynamic interactions.

What is pro?

"Pro", in Shopify's context, refers to a design language that prioritizes efficiency and intuitive interactions, catering to the daily tasks merchants perform everyday.

It involves using space efficiently to allow merchants to view more data at once. It's about avoiding being verbose and making the interface action-driven with intuitive icons for swift navigation.

It also means combining motion, color, and depth to create a responsive and dynamic interface, with clear affordances, that enable intuitive interaction without confusion about interactivity.

Common actions like edit/delete/manage are shown

Assign meaning

Visual language is clear for merchants.

Strong meaning is associated when using color. Red means danger, green means go. Color roles are heightened in the interface and add a layer of detail that merchants can quickly understand and master.

Badges of different color roles, like caution, critical and info in the
order index

Leveraging established symbols to identify key functionality helps merchants understand the admin at first glance. Using clear icons that are widely recognized creates a clear and predictable experience.

Import, Export, Edit, Print, and other icons that are

Every visual in the admin plays a role in helping merchants scan information and perform tasks without unnecessary distractions.

Badges in an index page, card with primary button

Increase density

Space is optimized while maintaining high usability.

Density in the interface adapts to the task: high density is used in data-rich environments, while low density is employed in focused, detailed areas.

Product index page table showing a high density

Information is structured in a clear visual hierarchy, emphasizing important details through variants like size, weight, and color.

Order detail page example, with a page title, a card with title and

Space is used to create groups of related information. Color adds or removes emphasis to make the interface easier to scan and enables efficient decision making.

Installed apps card with sub-surfaces for each installed app

Craft juicy interactions

Interfaces incorporate a sense of realness.

Primary interaction points provide a dramatic visual response to interaction. Variables like position and lighting change to mimic how physical buttons react when pressed. A hover transition is smooth and unobtrusive, whilst feedback from a click feels more dramatic and visceral.

Interactions are quick and user-actions provide instant feedback that feels almost life-like. Transitions are seamless and help create an intuitive navigation experience.

Detailed interactions, such as animating a checkbox when it is ticked, create a sense of familiarity and reference how merchants interact with real-world objects. These animations contribute to making the admin interface feel dynamic and alive, whilst making merchants feel more comfortable and confident in their interactions.

Make it predictable

Objects with similar appearance share a common behavior.

Elements that are visually similar behave consistently throughout the interface. Consistency in behavior reduces confusion and cognitive load for merchants.

Contextual menu indicators that all open the same way and look the

By using consistent signifiers throughout the user experience, merchants can effectively apply the concepts they learn as they navigate the admin. This enables a smoother learning curve and makes the interface progressively easier to use.

Different components using the order icon consistently

    On this page