---
gid: temp
title: Visual design
description: Visual design focuses on app aesthetics through the strategic use of images, colors, fonts, and other elements.
template: landing_page
---

<HeroSection
  title="Visual design"
  lightImage="/assets/apps/design-guidelines/visual-design/visual-design-intro-2.png"
  darkImage="/assets/apps/design-guidelines/visual-design/visual-design-intro-2.png"
>
  Visual design focuses on app aesthetics through the strategic use of images, colors, fonts, and other elements.

  Colors, fonts, icons, illustrations, and many other visual elements have a big influence on your app's usability. Great apps use strong visual design to heighten the merchant experience.
</HeroSection>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ## Fitting into the admin

      Because merchant workflows cross between apps and the Shopify admin, merchants can have an easier time accomplishing their tasks when apps use the same visual design cues as the admin. The easiest way to create a harmonious experience with the Shopify admin is by following our design system, [Polaris](https://polaris.shopify.com).

      <HorizontalLine color="base" margin="base" />

      <Notice label="Tip" type="info">
        [Admin UI extensions](/docs/apps/admin/admin-actions-and-blocks) blend in seamlessly with the Shopify admin UI. For optimal integration, we recommend that embedded app workflows follow Polaris. Otherwise, the merchant experience across embedded apps and admin UI extensions might break or feel jarring.
      </Notice>
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/fitting-into-admin.png"
            alt="Polaris style tokens being applied to a layout to make it align with the Shopify admin."
            imageLocation="top"
            padding="small"
          >
            Refer to the [Polaris style tokens](https://polaris.shopify.com/tokens/color) for styles that we use across the Shopify admin, such as colors, typography, spacing, shadows, borders, and more.
          </ImageCard>
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ## Color

      Your app exists within the Shopify admin, so you should consider colors that adhere to the Polaris [Color Roles](https://polaris.shopify.com/design/colors#token-names). Your colors should also respect minimum contrast ratios when used with text or interactive elements.

      While colors are useful in design, avoid relying on color only to provide context. For [alerts](/docs/apps/design/user-experience/alerts) like error states, success states, or system warnings, include messaging or iconography that explains what's happening.
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/color-palettes-roles-default.png"
            alt="A table and several cards illustrating examples of predominantly black and dark grey text."
            imageLocation="top"
            padding="small"
          >
            Present the majority of app text in a legible and neutral color, such as black or dark gray.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/color-palettes-roles-success.png"
            alt="A green banner with the title &quot;Your shipping label is ready to print&quot;."
            imageLocation="top"
            padding="small"
          >
            Green (`--p-color-text-success` or `rgba(1, 75, 64, 1)`) should be used to indicate that a status is positive or that an action has been completed successfully. Avoid using green to entice merchants or to draw unnecessary attention.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/color-palettes-roles-caution.png"
            alt="A table with example orders. One of the table columns is titled &quot;fulfillment status&quot;, the corresponding rows contain yellow badges labelled unfulfilled."
            imageLocation="top"
            padding="small"
          >
            Yellow (`--p-color-bg-fill-caution` or `rgba(255, 230, 0, 1)`) should be used to indicate that a status is on pause or incomplete, or to highlight information that requires merchant attention but isn't urgent. Avoid using yellow for announcements.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/color-palettes-roles-warning.png"
            alt="An example of a orange banner with the content &quot;Changing the phone number for this customer will unsubscribe them from SMS marketing text messages until they provide consent&quot;."
            imageLocation="top"
            padding="small"
          >
            Orange (`--p-color-bg-fill-warning` or `rgba(255, 184, 0, 1)`) should be used to indicate that a status is in-progress, pending, or to tell merchants that something needs their attention. Orange is the strongest, non-blocking color role in the Shopify admin. Avoid using orange for “under construction” or “coming soon” messaging.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/color-palettes-roles-critical.png"
            alt="A sample table of products. One of the rows contains a red badge with the label &quot;0 available in 3 locations&quot;."
            imageLocation="top"
            padding="small"
          >
            Red (`--p-color-text-critical` or `rgba(142, 11, 33, 1)`) should only be used to convey messaging that implies an action is impossible, blocked, or has resulted in an error. Avoid using red to entice merchants or to draw unnecessary attention.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/color-contrast.png"
            alt="Proper color contrast ratios between a card and its label, explanatory text, and buttons."
            imageLocation="top"
            padding="small"
          >
            Background-to-text contrast ratio should be at least 4.5:1 to be [WCAG AA compliant](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). Test your ratios using a tool such as [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
          </ImageCard>
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ## App icon

      Your app icon acts as the main visual identifier for merchants.

      The app icon displays in many touch points, like in the Shopify App Store, on the Apps page in the Shopify admin. Shopify renders your app icon as an SVG into the admin left hand navigation.

      <HorizontalLine color="base" margin="base" />

      <Notice label="Info" type="info">
        For guidance on changing your app icon, go to the App Setup page in the [Partner Dashboard](https://partners.shopify.com/current/apps).
      </Notice>
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/app-icon-white-gray.png"
            alt="A gray icon on a similarly gray background."
            imageLocation="top"
            padding="small"
          >
            App icons will be used on white and light gray backgrounds, so avoid using similar colors that might make your icon illegible. Refer to [Polaris style tokens](https://polaris.shopify.com/tokens/color) for Shopify admin color values.
          </ImageCard>
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ### Specifications

      Adhere to the following app icon specifications:

      - PNG or JPG
      - Square `1200px x 1200px`
      - No rounded corners
      - [Additional Shopify App Store icon guidelines](/docs/apps/store/requirements#2-app-icon)

    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <Image
            src="/assets/apps/design-guidelines/visual-design/app-icon-specs.png"
            alt="An icon set in a grid that respects all specifications."
            radius="base"
          />
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ### Preparing your app icon

      Design your app icon at `1200px x 1200px`. This ensures that your icon meets the size requirements.

      <HorizontalLine color="base" margin="base" />

      <Notice label="Tip" type="info">
        We recommend using the [app icon templates](/docs/apps/store/requirements#2-app-icon) to easily adhere to app icon guidelines.
      </Notice>
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/app-icon-10-16ths.png"
          alt="The minimum size of an icon within the icon grid."
          imageLocation="top"
          padding="small"
        >
          Design your icon to fill 10/16ths (750px for a 1200px icon) of a vertical or horizontal space.
        </ImageCard>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/app-icon-12-16ths.png"
          alt="The maximum size of an icon within the icon grid."
          imageLocation="top"
          padding="small"
        >
          Design your icon to at most fill 12/16ths (900px for a 1200px icon) of a vertical or horizontal space.
        </ImageCard>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/app-icon-margin.png"
            alt="1/16th margin around an icon."
            imageLocation="top"
            padding="small"
          >
            Leave a 1/16th (75px for a 1200px icon) margin around your icon that's free of any visual elements.
          </ImageCard>
        </SectionLayout.Column>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/app-icon-text.png"
          alt="An icon that contains a lot of text, some of which is repetitive."
          imageLocation="top"
          padding="small"
        >
          Avoid using excessive amounts of text in your icon. This makes it hard to identify and read at smaller sizes.
        </ImageCard>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/app-icon-misleading.png"
          alt="An icon that uses the Shopify logo for the app's branding."
          imageLocation="top"
          padding="small"
        >
          Don't mislead merchants by using an app icon that you don't own. This includes any part of the Shopify logo.
        </ImageCard>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ## Typography

      Typography is the arrangement of letters in a way that makes reading text easy and comfortable for merchants.

      Polaris [typography tokens](https://polaris.shopify.com/tokens/typography) provide a great way to streamline typography.
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <Image
            src="/assets/apps/design-guidelines/visual-design/typography.png"
            alt="Different typography styles in an app, such as for a page heading, card, and smaller displays."
            radius="base"
          />
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ### Type hierarchy

      Proper use of typography can improve the app experience. By creating a healthy visual hierarchy between headlines and copy, you'll improve legibility and consistency with the Shopify admin.
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/type-hierarchy.png"
            alt="An app that communicates hierarchy consistently through text size. The top heading is largest, to indicate the primary topic. Subheadings are smaller. Regular text is the smallest size."
            imageLocation="top"
            padding="small"
          >
            Typography should create a clear hierarchy between headings and text that's easily legible by merchants. Whenever possible, the title of the current page should be the largest heading size.
          </ImageCard>
        </SectionLayout.Column>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/type-hierarchy-headings.png"
          alt="A page heading that uses size and bold character formatting to indicate that it introduces a new section."
          imageLocation="top"
          padding="small"
        >
          Make headings visually distinct from the rest of the text, by being bolder, larger in size, or both. Avoid using underlines that might be mistaken for links.
        </ImageCard>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/type-hierarchy-color.png"
          alt="A page heading that lacks distinguishing characteristics like bold formatting and size."
          imageLocation="top"
          padding="small"
        >
          Avoid using only color to distinguish a heading to convey hierarchy, as some merchants may not be able to perceive color.
        </ImageCard>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ### Font sizes

      Our font size specifications apply to the minimum sizes required for legibility in the Shopify admin.
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/font-size-heading-body.png"
          alt="Headings, body text, and interactive elements with text at the minimum required size of 13 pixels."
          imageLocation="top"
          padding="small"
        >
          Use 13px as the minimum size for headings, body text, and text in interactive elements.
        </ImageCard>
        <ImageCard
          image="/assets/apps/design-guidelines/visual-design/font-size-smaller.png"
          alt="Captions and subheadings at the minimum required size."
          imageLocation="top"
          padding="small"
        >
          12px is the minimum size for smaller copy, like captions and subheadings.
        </ImageCard>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ## Icons

      Icons act as visual aids to help merchants complete tasks. They're often paired with text to make your app easier to use and to disambiguate certain interactions.

      You can save time by using Polaris [icons](https://polaris.shopify.com/design/icons), or create your own by following the Polaris icon guidelines.
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/icons.png"
            alt="An interface that uses icons for primary app actions and to help identify items that users can select in a &quot;More actions&quot; dropdown menu. The icons help users understand the outcome of each action."
            imageLocation="top"
            padding="small"
          >
            Icons can help merchants better understand the outcome of an action, or help them understand more technical terms that they might not be familiar with.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/icons-inconsistent.png"
            alt="A list of components where only a few elements have an icon, which puts the list text out of alignment."
            imageLocation="top"
            padding="small"
          >
            Avoid using icons inconsistently in lists and other repeating elements. This makes your app look broken.
          </ImageCard>
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

<Section>
  <SectionLayout columns={3}>
    <SectionLayout.Column>
      ## Illustrations

      Illustrations give your app personality and help merchants understand complex concepts through meaningful visual metaphors.

      Following the Polaris [illustrations guidelines](https://polaris.shopify.com/design/illustrations) is a great way to make your app's illustrations fit nicely with the Shopify admin.
    </SectionLayout.Column>
    <SectionLayout.Column span={2}>
      <SectionLayout columns={2}>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/illustrations.png"
            alt="Illustrations that are on different app elements but share the same blocky, grid-like styling that's reminiscent of 8-bit computer games."
            imageLocation="top"
            padding="small"
          >
            Keeping a consistent illustration style in your app can strengthen your brand presence and make your app easily recognizable.
          </ImageCard>
        </SectionLayout.Column>
        <SectionLayout.Column span={2}>
          <ImageCard
            image="/assets/apps/design-guidelines/visual-design/low-quality.png"
            alt="Low resolution illustrations that are very pixelated and blurry."
            imageLocation="top"
            padding="small"
          >
            Avoid using low resolution photos or images, as they can convey a lack of care and poor quality experience.
          </ImageCard>
        </SectionLayout.Column>
      </SectionLayout>
    </SectionLayout.Column>
  </SectionLayout>
</Section>

{/* Footer next/previous */}
<Section>
  <Grid>
    <HorizontalLine color="base" />
    <SectionLayout columns={2}>
      <SectionLayout.Column justify="start">
        <IconCard
          title="Layout"
          image="/assets/apps/design-guidelines/spot-icons/adg-layout.png"
          href="/apps/design-guidelines/layout"
          subtitle="Previous"
          iconSize="small"
          iconLocation="left"
          variant="elevated"
          padding="small"
          maxWidth
        />
      </SectionLayout.Column>
      <SectionLayout.Column justify="end">
        <IconCard
          title="Content"
          image="/assets/apps/design-guidelines/spot-icons/adg-content.png"
          href="/apps/design-guidelines/content"
          subtitle="Next"
          iconSize="small"
          iconLocation="left"
          variant="elevated"
          padding="small"
          maxWidth
        />
      </SectionLayout.Column>
    </SectionLayout>
    <HorizontalLine color="base" />
  </Grid>
</Section>