Premium apps

This guide helps you design apps that are part of the Premium Apps Program. It covers specific design guidelines for gated and non-gated premium apps. Following these guidelines will help you create a seamless and intuitive experience for users, while effectively showcasing the value of your app's premium features.

Canva’s internal teams manage adding the premium crown to your app icon and gating the app for eligible paid users. For completely gated Premium Apps, remove any paywalls that currently exist in the apps, as well as any off-platform login requirements or credit systems. All features in the app should be accessible to Canva users on paid plans.

Non-gated Premium apps should follow Canva's native design pattern to distinguish premium features. We use the premium crown icon and pro badge components, sometimes supplemented with a tooltip, as the indication for what the user gets as part of their current Canva plan. Users should be able to take action to upgrade their Canva plan within the immediate proximity of a premium crown icon. To learn more, see UI requirements.

Free users are prompted with the account upgrade dialog immediately after clicking on a premium feature. This dialog provides the user with information about upgrading and a call-to-action to complete the upgrade. Therefore, the app's design should focus on the user's task, and let the upgrade dialog handle the upgrade and conversion experience.

The premium crown icon is placed at the end of component labels to highlight premium capabilities.

The above example shows free and premium features as configurations blended together in a component. This aligns with how Canva natively displays free and premium features together.

1. A Free features available for use

2. B Premium features and capabilities are visible to everyone, but only users on paid Canva plans can use them

Pro badges are placed on the bottom right corner of the components to indicate they're premium content.

The above example shows free and premium content as cards blended together in a list. This aligns with how Canva natively displays free and premium content together.

1. A Free content

2. B Premium content, which is visible to everyone, but only users on paid Canva plans can use them

To align with Canva's direction towards an uncapped fair usage experience, users should not see credit counts.

We let Canva Free users know how many times they can try the feature. This allows users to experience the value of the app and motivate them to upgrade to Pro when their free usage run out.

1. A Users see the number of uses they have left in an informational alert, instead of a credit count. It is calculated based on credits remaining and cost per generation.

2. B Primary button label must include the term "generate", which aligns with Canva's AI feature's microcopy

3. C Free users see the upgrade button

4. D Free users see the critical alert when their free uses run out

5. E The primary button is disabled, because the free usage has run out

6. F Keep the upgrade button enabled, even when users have reached their usage limit, so they can upgrade their plan at any time

Users on paid Canva plans shouldn't see any messaging about usage limits. In rare cases when a user hits a monthly limit, stop them from using the feature and progressively disclose the usage limit information.

1. A Don't show any information about the usage limit

2. B Users who hit the monthly limit should see the critical alert message, informing them to wait until the plan cycle to refresh their usage.

3. C Primary button is disabled

Non-gated premium apps should offer a valuable freemium experience. This gives users the chance to explore your app, understand its value, and see what’s possible before upgrading.

Create a thoughtful balance between free and premium features: enough free content to keep users engaged, while clearly showcasing the added value of upgrading to unlock more.

Free features available to users should remain free and not be retracted, and premium features should be an add-on. This ensures users are still able to produce great output and design from the start.

At the same time, UI should remain the same for Free and Pro users. Users should only experience differences when they see locked features, such as premium assets or advanced settings, rather than a sweeping change across the entire app. This creates a seamless and predictable experience when the user upgrades their Canva plan.

For Canva Free users:

1. A Allow users to select free features

2. B Visually distinguish premium features. They should be immediately visible and trigger the upgrade dialog on user click.

3. C Provide an upgrade button for users to open the upgrade dialog

For users on paid Canva plans:

1. D Maintain a consistent experience between free and paid users, and apply subtle visual changes to indicate premiums features that are now available

2. E Remove the upgrade button for subscribed users

1. A Don't create a drastically different UI between free and subscribed users

2. B Don't hide premium features for free users

3. C Don't stop free users from using free features

4. D Don't leave out highlighting premium features that subscribed users have access to

The App UI Kit includes the following types of icons for freemium or credit-based apps:

• PremiumCrownIcon
• ProBadge

These icons visually indicate the user's access with color variants. Free users will see yellow to draw their attention, and users on paid Canva plans will see grey to let them know they have access to this premium feature.

Use these icons to highlight premium features of your app. It helps free users diagnose what is available to them on a free account, and draw in users on paid plans towards the additional features they have access to, and affirm the value of their Canva plan.

This section describes the guidelines that apps must follow when using these icons.

The premium crown icon is used in a few different UI patterns. Its position, either before or at the end of the text, differs depending on where it's used:

• In a label: include the icon immediately after the label text
• In a button: include the icon immediately before the text

When all input components under a label provide premium features, the premium crown icon are added after the label text. This aligns with Canva's native design pattern and provides better readability when the user scans the labels.

Free users are prompted with an upgrade dialog when they interact with the related input components under them.

Premium features utilizing color selectors rely on their labels to describe the feature and visualize the differentiation.

Form fields rely on the label to signify that it's a premium feature. Interacting with the related form input or control will trigger the upgrade dialog.

1. A Include the premium crown icon inlined at the end of the label text

2. B Do trigger the upgrade dialog when a free user interacts with the related input component

1. A Don't include the icon in the label when the related inputs have both free and premium options

2. B Don't trigger the upgrade dialog when the user clicks on the icon

3. C Don't disable the control or input component unless necessary based on the current context (an action is needed to re-enable it)

Premium crown icons are used to signify one or more premium options for checkboxes, segmented controls, and select.

Checkbox groups are stacked lists, so the premium crown icon is positioned to the far end of the premium option.

The same icon position treatment is applied for stacked radio groups.

Premium crown icons may also feature as the beginning decoration in upgrade buttons. When clicked, the upgrade dialog should appear. Use Upgrade to Canva Pro as button text.

Premium crown icons may also be featured in a list style within a drop down menu. The Pro crown should be positioned at the right end of the premium menu item. For free users, interacting with the premium item should trigger the upgrade dialog.

Canva's built-in font picker features the premium crown icon to signify premium fonts. This is a dialog that offers the most consistent and familiar user experience, with the upgrade flow already configured when a free user interacts with a premium font.

There may be cases where a custom font picker interface is necessary. When displaying premium fonts, it should follow the same pattern as shown in the built-in font picker.

• Do append the icon to the premium font's name
• Do trigger the upgrade flow when the user selects a premium icon

• Don't allow free users to select premium fonts

Place the premium crown icon as an end decorator to highlight premium selections.

• Do append the icon as a decorator at the end

• Don't position the icon before the text
• Don't change the icon's dimensions and colors

Pro badges are often overlaid on cards, and reveal pro text when hovered. Free users should be prompted with the upgrade dialog when they interact with the feature.

Pro badges are used in cards to signify a feature or content is premium to both free users and users on paid Canva plans. Always position the pro badge in the lower right corner of cards by using the bottomEnd and bottomEndVisibility props within the ImageCard, EmbedCard, VideoCard, and AudioCard.

Free users see the pro badge with yellow icon. Subscribed users see the pro badge with grey icon.

Tooltips and Pro text appear when badges are hovered in Canva desktop. This should communicate the user's current Canva plan and whether the feature is available to use.

For free users, the tooltip informs them they're interacting with a premium feature, which they can access after upgrading. For paid users, the tooltip informs them it's a premium feature included in their plan and they can use it.

We should provide free users with an upgrade button. When users want subscribe to access premium features they should be able to easily perform the upgrade action. Although premium features are visually highlighted with the Premium Crown Icon, the upgrade button provides a clear action specific to performing an upgrade.

1. A Ensure there's only one primary action

2. B Free users see upgrade button, in the secondary variant, immediately beneath the primary action

If your app has more than one action you can opt-out of adding the upgrade button. We want the user to be focused on using the app's capabilities, so when there are multiple buttons we should ensure the app is easy to use, and avoid overloading the user with too many buttons.

1. A Upgrade should not appear as a primary action and distract the user from using the app's main feature

2. B Don't change the icon size

3. C Don't show this to subscribed users

4. D Don't change the button text