Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup
 

Apply brand assets and visuals to your forms with brand kits

With brand kits, seamlessly apply your organization’s visual assets to your forms. Upload logos, set color palettes, add fonts, and create themes that everyone on your team can use.

Brand kits are available to accounts on Plus plans or higher. Accounts on Core Plus, Core Business, Growth Essentials, and Growth Pro plans can create one brand kit per account.

Accounts on Core Enterprise and Growth Custom plans can create multiple brand kits per account. 

Set up brand kits right from the Typeform Workspace or form builder. Your kits will automatically be available to your teammates as soon as they’re created. Read on to learn more, or click a section name to jump there:

- Add and view a brand kit 

- Automatically populate a brand kit with your brand logo/colors by entering your website URL

- Manually add assets to a brand kit (logos, fonts, color palettes, and media)

- Add themes to a brand kit

- Use a brand kit in a form

Want some help getting started with branding? Check out the Typeform blog's guide to brand awareness!

Add and view a brand kit 

There are two ways to access brand kits. 

1. Open a form, navigate to Design in the right sidebar, and then select Brand kit.

2024-08-22_14-43-13 (1).gif

Alternatively, you can select Brand kit directly from your workspace.

2024-08-22_14-45-28.png

2. Click + Create brand kit to add a new kit. Accounts on Core Plus, Core Business, Growth Essentials, and Growth Pro plans can create one brand kit per account.

Accounts on Core Enterprise and Growth Custom plans can create multiple brand kits per account.

Any organization owner or admin can create brand kits. 

brandkit2.png

3. When creating your brand kit you have two options: Start from scratch or Match my brand.

Start from scratch allows you to upload assets from scratch, while Match my brand speeds up the process by pulling your logo and colors from your website.

Here, we'll choose to start from scratch. If you're interested in populating your brand kit automatically with the Match my brand option, check out the section below.

2024-08-22_14-56-27.png

4. Give the kit a memorable name, then click Continue.

brandkit3.png

Brand kits have assets and themes. Read on, or click the name of each feature, to learn more about adding assets and themes.

5. Click Brand kits in the top left corner of the page to view all of your organization's brand kits.

brandkit4.png

6. Organization owners and admins can edit and delete brand kits, as well as create them. To edit an individual brand kit, click its card from the brand kit list. To delete a brand kit, click the three-dot menu on a brand kit card, then click Delete brand kit. This will remove the kit for all users in the organization. Any forms using a theme from a deleted brand kit will revert to the Typeform default theme.

brandkit5.png

Automatically populate a brand kit with your brand logo/colors by entering your website URL

Kick-start the creation of your brand kit by simply entering your website URL. This will allow us to automatically fetch your brand's logo and colors directly from your website, streamlining the process of adding your brand assets.

Follow these steps to get started:

There are two ways to access brand kits. 

1. Open a form, navigate to Design in the right sidebar, and then select Brand kit.

2024-08-22_14-06-11 (1).gif

Alternatively, you can select Brand kit directly from your workspace.

2024-08-22_14-09-40.png

2. Click on Create brand kit.

brandkit2.png

3. You'll see two options. You can either create your brand kit by starting from scratch, or click Match my brand to automatically match your website's brand. Here, we'll click Match my brand to speed up the process.

2024-08-22_14-18-07.png

4. Enter your website URL. This will fetch your logo and brand colors from your website and automatically generate a custom theme to match your branding.

2024-08-22_14-19-24.png

5. Your logo and brand colors (up to four colors but you can add more manually) will appear in your brand kit assets.

2024-08-23_09-36-48.png

6. You can any additional assets to your brand kit as needed. (Scroll down or click here for full instructions on how to add brand assets to your brand kit.)

2024-08-22_14-25-25.png

7. Click on the Themes tab to view the custom theme that has been created to match your brand.

2024-08-22_14-29-27.png

When you create new forms in your organization, your brand kit theme will automatically be applied to them by default.

If you have multiple brand kit themes, you cannot currently choose which one to set as the default. However, you can change the theme for individual forms as needed.

Manually add assets to a brand kit (logos, color palettes, fonts, and media)

Within a brand kit, you can add logos, fonts, color palettes, and other media under the Assets tab. Later, you can add these assets to themes, which can then be applied to forms.

2024-07-12_15-07-37.png

Logos

Click the + button next to Logos to add a new logo collection.

brandkit7.png

Give the collection a new name by clicking the New logo collection text box and typing in the name you’d like to use.

brandkit8.png

Click the + sign next to your collection name to upload media to the collection. You can upload files in JPG, PNG, or GIF format up to 4 MB in size.

brandkit9.png

Add as many files to the collection as you like.

To delete the collection, click the three-dot menu next to the collection name and click Delete group. This will remove all of the files in the collection from your organization, unless you’ve uploaded them to other collections already. Forms that are already using the files, however, won’t be affected.

2024-08-23_12-18-36.png

Fonts

To choose a font, click the + button next to Fonts. If you're on an Enterprise plan or Growth Custom plan, you also have the option to upload a custom font. Only .woff files are accepted. 

2024-07-12_15-10-52.png

Select a font from the list or click + Upload font to upload your own.

2024-07-12_15-17-36.png

If you upload a custom font, you'll be required to accept the terms before continuing.

2024-07-12_15-25-43.png

Currently, you can only upload Regular, Bold, Italic, and Bold Italic font styles.

To delete a font from your brand kit, click the three-dot menu next to the font name and click Delete font.

2024-07-12_15-54-18.png

Color palettes

Click the + button next to Colors to add a new palette.

brandkit11.png

After you’ve added the palette, give it a new name by clicking the New colors asset text box and typing in the name you’d like to use.

brandkit12.png

Click the + button under the palette name to begin adding colors. Each time you click the + button, a white square will appear, corresponding to the color with hex code #FFFFFF.

brandkit13.png

Click each square to open a color picker. You can click the color you’d like to add from the picker, or enter the six-character hex code.

brandkit14.png

To delete the palette, click the three-dot menu next to the palette name and click Delete color group. This won’t affect forms using colors in the palette.

brandkit15.png

Media

Under Media, you can add more groups of brand assets to use in your form, like icons or non-logo images. Click the + button next to Media to add a new media collection.

brandkit16.png

After you’ve added the collection, give it a new name by clicking the New media collection text box and typing in the name you’d like to use.

 

2024-08-23_12-21-10.png

Click the + sign next to your collection name to upload media to the collection. You can upload files in JPG, PNG, or GIF format up to 4 MB in size.

2024-08-23_12-22-18.png

Add as many files to the collection as you like.

To delete the collection, click the three-dot menu next to the collection name and click Delete group. This will remove all of the files in the collection from your organization, unless you’ve uploaded them to other collections already. Forms that are using one or more of the files, however, won’t be affected.

2024-08-23_12-20-24.png

Add themes to a brand kit

Under the Themes tab, you can add new themes for your teammates to apply to forms, using the assets you've added to the Assets tab. Themes set specific fonts, colors, and other details for use throughout an entire form. You'll be able to add one theme to your brand kit if you're on a Core Plus, Core Business, Growth Essentials, or Growth Pro plan, and you can add unlimited themes to a brand kit if you're on a Core Enterprise or Growth Custom plan. 

Now, when you create new forms in your organization, your brand kit theme will automatically be applied by default to your new forms. If you have multiple brand kit themes, you cannot currently choose which one to set as the default, but you have the option to change the theme for individual forms as required.

For guidelines on creating accessible themes, click here.

1. Click + Create theme to start building a new theme.

brandkit20.png

2. First, give your theme a name. Click Continue.

brandkit21.png

3. In the center of the theme builder, you’ll see a preview of how forms with the theme will look. Click Desktop or Mobile to toggle between previews for each device type.

brandkit22.png

4. Then, use the design options in the right-hand sidebar to set the font and color options for your form. (New to creating themes? This guide shares helpful tips!)

brandkit23.png

Each time you select a font or color (for example, when selecting the color for question or answer text), the brand kit’s fonts and color palettes will appear at the top. This makes it easy to find and choose the exact font or colors you need.

brandkit24.png

5. Click Add next to Background image and Logo to set the theme’s background and logo images. You’ll be able to choose from the logo and media collections your organization has already added to the brand kit.

brandkit25.png

For more pointers, check out this guide to learn about adding images to your themes, and this guide for how to use brand logos in forms.

6. Finally, set text size and alignment for your forms under Welcome Screen & Endings and Questions.

brandkit26.png

7. As you create your theme, you can undo your last change by clicking Revert in the top right corner of the screen. Reset the theme entirely by clicking Restart.

brandkit27.png

8. Once you’re happy with your theme, click Save changes in the top right corner of the screen to save it. This will make the theme available to all users in the organization.

2024-08-22_15-07-11.png

You can view all your themes for the brand kit by clicking the brand kit name in the top left of the screen.

brandkit28.png

9. To delete a theme, click the three-dot menu on a theme card and click Delete theme. This will remove the theme for all users in the organization. Any forms using the theme will be reverted to Typeform’s default theme.

brandkit29.png

Use a brand kit in a form

If you've added a theme to your brand kit, it will be applied by default to all new forms created in your organization.

If you have multiple brand kit themes, you can choose which one to apply to a form's design by opening the form from your Workspace and following these steps:

1. Click Design in the right-hand sidebar of the Create panel.

2024-08-23_12-37-22.png

Your organization’s brand kit themes will be available under the Themes tab. Themes appear under the name of their brand kit. Each theme has a Brand Kit label.

2024-08-23_12-35-37.png

2. Simply click the theme to apply it to your form. To access and edit the contents of your organization’s brand kits, click Brand kit at the top of the right-hand sidebar.

3. You can also apply media from your brand kits to individual form questions. When you add an image to a question, the Media Gallery will show your brand kit media in the Brand Kit tab:.

2024-08-23_12-39-01.png

If you've enabled Brand kit enforcement in your organization settings, your organization members won't be able to upload or use any media not in your Brand kits. However, if you have multiple Brand kits in your account, they will be able to choose between different themes of different Brand kits.

Tap into our community knowledge