App Listing Guidelines

Overview

Learn about what makes a meaningful app listing.

When a public app is released to the world, it gets its own listing in Canva and the Apps Marketplace. This listing can drive attention and engagement to the app. We have created guidelines to help you craft compelling written content and visual assets, so that you can clearly communicate what your app can do for people, and what problem it will solve.

You can customize the content that appears on the app listing via the App listing details pages in the Developer Portal. This must be done before submitting your app for review. Once your app has been approved for release, you can make further changes by creating a new version of it.

Where will the app listing be shown?

The app listing is seen in various places in Canva and the Apps Marketplace.

Apps Marketplace homepage

<ol style={{ listStyleType: "none", paddingLeft: 0 }}>

 App
icon: The visual representation
of your app in the Apps Marketplace.

• App name: The app name sets up your brand.

• Short description: Explains what the app does at a glance.

App listing modal

<ol style={{ listStyleType: "none", paddingLeft: 0 }}>

{" "}
Tagline:
Highlight the key use case for your app.

• {" "} Description: An opportunity to describe your app in more detail.

• Featured image: The visual representation of the functionality that your app provides.

App panel

<ol style={{ listStyleType: "none", paddingLeft: 0 }}>

 Featured
image: The visual
representation of your app's functionality.

• {" "} Tagline: Highlight the key use case for your app.

• {" "} Description: An opportunity to describe your app in more detail.

App listing in panel

<ol style={{ listStyleType: "none", paddingLeft: 0 }}>

 App
icon: The visual representation
of your app in the Apps Marketplace.

• App name: The app name sets up your brand.

App policy and support links

Your app listing requires several URLs to provide users with support and policy information. For more information, see App policy and support links.

App Icon

Learn how to design the perfect icon for your app.

The app icon is the visual representation of your app in the Apps Marketplace. Designing an app icon is all about balance. You want it to be both unique and recognizable, while also adapting to different shapes and levels of detail. Maintaining visual consistency is key to a strong user experience.

• Keep it simple: When creating icons for your app, simplicity is key. Use a unique concept or element to represent your app and avoid adding too many details. Keep the background simple to put emphasis on the primary image, and avoid overfilling the icon with content.
• Use graphic images instead of photos for icons: Create graphics to highlight key features. Avoid using photos that may lose detail when viewed at a small size.
• Design it in a full-bleed square image: Use the 1:1 ratio, with a specific size of 512px x 512px. Using this format will ensure that your app icon will be consistently sized, if used in different parts of the platform.
• Avoid adding text to your icon: Minimize the use of text unless essential for your brand or user experience.

NOTE: Only use content that you have the rights to use. For example, don't use celebrity images or names.

App icon keyline template

Template link and use case	Example
Template: Shows a guide where you can populate the entire asset space, or you can design and position artwork elements such as logos onto the keyline grid.	<div style={{maxWidth: 150, marginBlock: -20}} />

Do

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> <Strong>DO</Strong> incorporate recognizable brand elements, like logos or specific colors, to leverage strong brand associations. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> use graphics reflective of the app’s output. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> opt for a split-screen layout if showcasing before/after states helps convey the app's function. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> exaggerate output details to aid recognition of the app's function at a glance. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> consider the legibility of line-based graphics at a smaller scale. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> prioritize clean lines and forms. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> choose a background color that complements the foreground elements. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> pair highly visual or intricate backgrounds with simple foregrounds or logos. </> } /> </Grid>

Don't

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> <Strong>DON'T</Strong> overcrowd the app icon with unnecessary details, complicating the design. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> use low-contrast colors or thin lines, risking legibility at a small scale. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> add a border radius to the background, as it may result in a double-border effect when a border gets applied in Canva. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> use cultural references that may not be universally understood. This helps ensure inclusivity and helps prevent misinterpretations. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> use transparent backgrounds. This will avoid contrast issues when viewed in light and dark mode. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> make icon elements larger than the keyline guide suggests ( <Link href="https://www.canva.com/design/DAF5cbL3GRY/RoK7LhDuUIqsIDgw7XxqNg/view?utm_content=DAF5cbL3GRY&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink&mode=preview" ignoreRegion={true}> view the app icon keyline template </Link> ). </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> use photos that don’t convey much about the app and lose detail when scaled down. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> use text unless it’s part of the logo. </> } /> </Grid>

App URLs

Learn about the required URLs for your app listing.

Your app listing requires several URLs to provide users with support and policy information.

Required URLs

• Terms and conditions URL: Link to your app's terms of service.
• Privacy policy URL: Link to your app's privacy policy.
• Support URL: Link to where users should go if they need help with your app.
• Company or developer's website URL: Link to your company's main website.

URL restrictions

• All URLs must be accessible without requiring users to create accounts or log in.
• Social media platforms aren't acceptable because:
  • They often require an account to view content.
  • They're not designed for hosting long-form legal documents.

If you don't already have a website, we recommend using Canva's website builder to create professional, mobile-responsive pages for your legal documents and support content.

Featured Image

Learn how to visually represent the functionality of your app.

A featured image is the visual representation of your app's functionality. The user sees this image in various places in Canva and the Apps Marketplace.

• Maximum of 2 images: A featured image is a maximum of 2 separate images in a carousel, depending on the app's complexity.
• 2400 x 1800 pixels: A featured image should be 2400 x 1800 pixels with a 4:3 aspect ratio.

NOTE: Only use content that you have the rights to use. For example, don't use celebrity images or names.

Style selection

When deciding on how to showcase your app, choose from one of the three options:

• 1x featured image (Editorial)
• 1x featured image (Contextual)
• 2x featured image viewed in a carousel (Editorial + Contextual)

Editorial: We call this approach editorial, because the aesthetic feels like something you'd see in editorial design. It's bold, graphic, and meant to grab your attention. The editorial approach focuses on the app functionality by showcasing the final product.

Contextual: We call this approach contextual, because it's all about showcasing the app in action within Canva. Like the editorial approach, it is bold and graphic, but has more detail by using the UI to create context for the user.

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card title="Editorial" />

<Card title="Contextual" />

<Card title="Editorial" />

<Card title="Contextual" />

<Card title="Editorial" />

<Card title="Contextual" />

<Card title="Editorial" />

<Card title="Contextual" /> </Grid>

Featured image templates

To help you get started, we've designed a library of Canva templates. You can use these to create your featured image or as inspiration to create your own.

Editorial

Template link and use case	Example
Template 1: Use for before & after cases.	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 2: Consider using this for applications that generate multiple images or videos.	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 3: Use to show different effects, showcase generated images, etc.	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 4: Best to use for cloud-based apps that show file systems.	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 5: Best to use for apps that need text prompts to generate something.	<div style={{maxWidth: 150, marginBlock: -20}} />

Contextual

Template link and use case	Example
Template 6: Best to use for video based apps, and to show more details on the object panel	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 7: Best to use for audio based apps	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 8: Best to use for audio based apps	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 9: Best to use for image based apps that show vertical images	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 10: Best to use for image based apps that show horizontal images	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 11: Best to use for integrated apps	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 12: Best to use for photo editing apps that show the controls	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 13: Best to use for photo editing filters that show multiple choices	<div style={{maxWidth: 150, marginBlock: -20}} />
Template 14: Blank editor template you can use to suit your own app	<div style={{maxWidth: 150, marginBlock: -20}} />

Do

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> <Strong>DO</Strong> add only a few elements to the thumbnail to make it bigger and clearer. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> ensure the object panel (left) is the right color, select a harmonious palette, and use a lighter background. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> keep text to a minimum for text heavy apps. Look for a focal point. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> opt for a simple and bold approach to scaling and cropping images, to highlight app functionality. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> use Canva’s colors in harmonious sets, making the visuals feel cohesive. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> use the featured image as an opportunity to highlight your app’s hero feature. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> display content that captivates and engages potential users, motivating them to use your app. </> } />

<Card border={false} description={ <> <Strong>DO</Strong> showcase accurate UI (as seen within the product). </> } /> </Grid>

Don't

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={<><Strong>DON'T</Strong> put too many elements within the thumbnail so that they become hard to see at small sizes.</>} />

<Card border={false} description={<><Strong>DON'T</Strong> make the object panel (left) a color other than dark grey. <Strong>DON'T</Strong> combine non-harmonious Canva colors, such as blue, green, and yellow.</>} />

<Card border={false} description={ <> <Strong>DON'T</Strong> choose a focal point that is too small. Instead, opt for something bigger to create impact and clarity.{" "} <Strong>DON'T</Strong> crop the focal point (woman's head) in the split screen. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> abstract the UI by layering floating elements. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> oversimplify the UI and <Strong>DON'T</Strong> use grey bars to represent text. </> } />

<Card border={false} description={ <> <Strong>DON'T</Strong> add written content to the featured image unless it’s crucial for showing the feature of the app. </> } />

<Card border={false} description={<><Strong>DON'T</Strong> alter the UI or deconstruct the UI.</>} />

<Card border={false} description={<><Strong>DON'T</Strong> show the whole browser or Canva UI - find a focal point.</>} /> </Grid>

Color

Canva has an established color palette, which developers are welcome to use. From the example below we use the Mid and Light colors for background colours. Avoid using the darker colors for the background, as they are too heavy in the digital space.

NOTE: If you have your own brand colors you are welcome to use these, especially if your brand is well established.

Dark	Mid	Light

Text in images

As Canva has a global audience, we need to consider every locale. Avoid using text within your image unless it is necessary to show the function of the app. An example of this is Canva's Text to Image app (below).

Without the text, it would be unclear what the relevance of these images are to the app. When using text is necessary, try to keep it to a minimum by using just enough to convey the function of your app.

Showing UI

The way we show UI plays an important role in illustrating the functionality of an app.

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> <Strong>Find a focal point:</Strong> With limited space and short attention spans, we should always have a focal point when showing UI. Less is more, so focus on the functionality and what you're trying to communicate. </> } />

<Card border={false} description={ <> <Strong>Play with scale:</Strong> We don't need to see the full Canva editor to understand the app or product functionality. Cropping in on the feature is a good way to create impact, especially within smaller formats. </> } />

<Card border={false} description={ <> <Strong>Be selective:</Strong> When selecting photography or other graphic elements, a considered approach is important in creating an elevated look and feel. A good starting point is to select images that have uncluttered backgrounds and a focal point. </> } />

<Card border={false} description={ <> <Strong>Add some color:</Strong> Don't be afraid to use color to add some vibrance. Feel free to use Canva's playground brand palette or your own colors. Where appropriate, you can use the Canva doc type colors to create product affinity. </> } />

<Card border={false} description={ <> <Strong>In motion:</Strong> Designing layouts that look like they are in motion can feel more dynamic and less static. It can also act as a demonstration on how to use the product feature. </> } /> </Grid>

Photography

It's important to select the right image that most effectively shows the app's functionality.

<Grid columns={2} spacingX="6u" spacingY="3u"> <Card border={false} description={ <> <Strong>Find a focal point:</Strong> There should be a focal point when selecting an image. Remember that less is more. </> } />

<Card border={false} description={ <> <Strong>Clean and uncluttered:</Strong> Selecting photography that has uncluttered backgrounds allows the focus to be on the subject matter. </> } />

<Card border={false} description={ <> <Strong>Light and bright:</Strong> Selecting photography that feels light and breezy (vs dark and dim) creates clarity, especially at smaller sizes. </> } />

<Card border={false} description={ <> <Strong>Diversity:</Strong> To ensure we are being inclusive and representing the spectrum of Canva users, include people of different backgrounds, age, and genders. </> } />

<Card border={false} description={ <> <Strong>Canva imagery:</Strong> Make sure you are using licensed imagery, whether from your own sources or within Canva. </> } /> </Grid>

Written Content

Learn how to craft effective written content for your app listing.

One of the most important ways a user first experiences your app is through the written content when they find the app on the Apps Marketplace.

• Highlight the use case: When users read your app's content, they want to understand the problem your app addresses, whether it aligns with their needs, and what sets it apart from others.
• Ensure readability: Make the written content easy to read by using plain language and concise sentences.

App name

NOTE: To avoid confusion with Canva products or other apps in the Marketplace, make sure to follow these rules when naming your app.

• Don’t begin your app's name with "Magic".
• Don’t include the words "Canva" or "Pro" anywhere in the name.
• Keep the name under 10 characters, including spaces. Longer names may not display properly.
• Make sure the name is unique and doesn’t conflict with existing apps in the Apps Marketplace.
• If your app references an external platform, match the platform's registered brand name, including spelling and capitalization.
• Use the app's name consistently in all your messaging.
• Don’t use emojis.

Short description

The short description should explain what the app does at a glance because it appears before a user selects the app to learn more about it. It appears below the app’s name in the Apps Marketplace.

• Avoid acronyms, initialisms, abbreviations, slang, and jokes because they’re confusing and don't translate well.
• Write the description in plain text without line breaks because formatting is not supported.
• If your app short description is one sentence, don't end the short description with punctuation, such as a period, exclamation mark, or question mark. For app short descriptions with two or more sentences, add punctuation to each.
• Use sentence case: Capitalize only the first word of each sentence, plus any proper nouns and acronyms.
• Don't use emojis.

Short description examples

Do	Don't
<DoText>Instantly generate images and videos with AI</DoText>	<DontText>The best AI app for image and video generation</DontText>
<DoText>Add slow motion effects to your video</DoText>	<DontText>Add slo-mo effects to your vid 🐌</DontText>
<DoText>Add animated GIFs from Giphy to your designs</DoText>	<DontText>Add Animated GIFs From Giphy To Your Designs</DontText>

Tagline

A tagline is similar to a short description and helps users quickly understand what your app does. It appears on the modal when users select your app from the Apps Marketplace.

• Describe what the app does, not what’s great about the app.
• Don't include marketing claims of any kind. For example, don't describe the app as the "world's most popular" app in its category.
• Use sentence case: Capitalize only the first word of each sentence, plus any proper nouns and acronyms.
• Don't use emojis.

Tagline examples

Do	Don't
<DoText>Turn your creative ideas into images and videos</DoText>	<DontText>Revolutionary designs, quality images and videos, endless possibilities!</DontText>
<DoText>Translate text to voiceovers in multiple languages</DoText>	<DontText>Discover new ways to communicate 🗣️</DontText>
<DoText>Enhance designs with Giphy GIFs</DoText>	<DontText>Enhance Designs With Giphy GIFs</DontText>

Description

Users can see the app description below the tagline, once they’ve selected your app to view or learn more. It’s an opportunity to describe your app's functionality in more detail. This is also the best place to describe what your organization does in general, or highlight features that exist outside of the app.

• This description will be translated, so the shorter it is, the easier it will be to translate into languages that require more characters to convey the same meaning.
• Be consistent with the purpose described in the app tagline and short description.
• Use "design" to describe what a user is creating in Canva.
• End the sentences with punctuation (a period, exclamation mark, or question mark).
• Write the description in plain text without line breaks because formatting is not supported.
• Don't include marketing claims of any kind. For example, don't describe the app as the "world's most popular" app in its category.
• Use sentence case: Capitalize only the first word of each sentence, plus any proper nouns and acronyms.
• Don't use emojis.

<ol style={{ listStyleType: "none", paddingLeft: 0 }}>

 Tagline: Highlight the key use
case for your app.

• Description: An opportunity to describe your app in more detail.