--- title: How to Set Up and Use Brand Kit description: First-class brand management — create brands, import from URL, and enable editors to use brand assets automatically across microapps --- [Skip to content](https://support.tiled.co/brand-kit#main-content) English Show submenu for translations [Submit a request](https://support.tiled.co/kb-tickets/new) ![logo-horizontal\_w.png\]](https://support.tiled.co/hs-fs/hubfs/logo-horizontal_w.png?height=30&name=logo-horizontal_w.png) Open main navigation Close main navigation - English Show submenu for translations - [Submit a request](https://support.tiled.co/kb-tickets/new) Hi, how can we help you? - There are no suggestions because the search field is empty. 1. [Support](https://support.tiled.co/) 2. [New Releases](https://support.tiled.co/new-releases) 3. [v61.0.1](https://support.tiled.co/new-releases#v61-0-1) # How to Set Up and Use Brand Kit ## This guide explains how to create and configure a brand in Brand Kit, and how editors use brand assets — logos, colors, fonts, and typography presets — when building microapps. ### **Overview** Brand Kit gives account administrators a central place to define brand standards, logos, colors, fonts, and typography, and make those assets automatically available to editors in the Builder. An account can hold multiple Brand Kits, useful for agencies managing several client brands, or organizations with multiple product lines or sub-brands. When a brand is active for a microapp, editors see brand colors in the color picker, brand fonts in the font selector, brand logos in the asset picker, and typography presets ready to apply in one click. ### **What Changed** If you’ve set up a brand before, here’s what’s different: | **Area** | **Before** | **Now** | | --- | --- | --- | | **Layout** | A gallery of Brand Kits | A brand list on the left, sorted A–Z with each brand’s logo and color swatches, and the editor on the right. The first brand opens automatically. | | **Creating a brand** | Enter a name, optionally a website | Quick-create: enter a website, Tiled fetches the name, colors, logos, and description, then you create the brand. | | **Sections** | Logos, Brand Colors, Typography, Default Styling, Microapp Libraries | Identity, Colors, Typography, Logos, and Voice & tone. | | **Saving** | Saved as you typed | Held as a draft until you select Save brand, or reverted with Discard. | | **Re-fetching** | Not available | Re-fetch from the brand’s website and compare current and incoming values before replacing anything. | | **Voice & tone** | Not available | New section for tone and wording, used as context when content is generated. | | **Progress** | Not shown | A Brand completeness meter, plus a status marker on each section. | [![Brand Kit Callouts-1-what changed in brand kit](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-1-what%20changed%20in%20brand%20kit.png?width=670&height=431&name=Brand%20Kit%20Callouts-1-what%20changed%20in%20brand%20kit.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-1-what%20changed%20in%20brand%20kit.png) | **Note:** Brand Kit is a Builder 2.0 feature. Builder 1.0 microapps do not inherit brand colors or styles from Brand Kit configuration. | | --- | ### **What Brand Kit Includes** | **Brand colors** | Named color palettes appear as the primary palette in the Builder color picker. | | --- | --- | | **Brand fonts** | Uploaded brand fonts appear as a distinct group at the top of the font dropdown. | | **Typography presets** | Heading, Body, Caption, and custom presets apply the correct font, weight, and size in one click. | | **Brand logos** | Multiple logo variants (primary, secondary, icon, dark-mode) are available directly in the asset picker. | | **Default styling** | New screens and tiles pick up the brand's default background and text color when the brand is active. | | **Brand import from URL** | Enter a company URL at creation to automatically retrieve publicly available logos, colors, and fonts. | | **Library default brand** | Administrators set a default brand per library. All new microapps in that library use it automatically. | | **Brand selector at creation** | Creators can choose a different brand, or start without one, when creating a new microapp. | | **Multiple Brand Kits per account** | An account can hold as many Brand Kits as needed, each assignable to different libraries. | ### **Where to Find It** Brand Kit is configured at the account level, and only account administrators can create and manage brands. Go to Account Settings → Brand settings. The page opens as Brand kit. Your brands are listed on the left in alphabetical order, each with its logo and color swatches, and the editor is on the right. The first brand in the list is selected for you automatically. Brand Kit is configured at the account level. Only account administrators can create and manage Brand Kits.[![Brand Kit Callouts-2-where-to-find-brand-kit](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-2-where-to-find-brand-kit.png?width=670&height=431&name=Brand%20Kit%20Callouts-2-where-to-find-brand-kit.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-2-where-to-find-brand-kit.png) | **Pro Tip:** Fonts are managed on their own page. Use the Font management link at the bottom of the brand list to upload or manage font files. | | --- | ### **Creating a Brand** Creating a brand starts from its website, so Tiled can do the first round of setup for you. 1\. **Start a new brand** — select + at the top of the brand list. If your account has no brands yet, the same form appears in place of the list. 2\. **Enter the brand’s website** — Tiled fetches the brand’s name, colors, logos, and description from it. 3\. **Review what was fetched** — check the results before you create the brand. 4\. **Create the brand** — then fill in the rest of each section in the editor. [![Brand Kit Callouts-3-create-a-brand-from-its-website](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-3-create-a-brand-from-its-website.png?width=670&height=431&name=Brand%20Kit%20Callouts-3-create-a-brand-from-its-website.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-3-create-a-brand-from-its-website.png) | **Heads Up:** A website fetch only retrieves publicly available information, and how much it finds varies by company. Treat it as a starting point — review every imported color, font, and logo against your official brand files before editors start using the brand. | | --- | ### **Working in the Editor** The brand’s name sits at the top of the editor. Below it, Brand completeness shows how many fields are filled in and the percentage complete. The section navigation stays in place as you work, with a status marker beside each section so you can see at a glance where the gaps are. | **Section** | **What You Set There** | | --- | --- | | **Identity** | Short and long descriptions, the source website, and the libraries the brand applies to. | | **Colors** | The brand palette, with live contrast checks. | | **Typography** | Brand fonts and text presets. | | **Logos** | Logo files, each named and tagged for light or dark backgrounds. | | **Voice & tone** | Tone, preferred and avoided words, reading level, and sample copy. | | **Pro Tip:** Use Brand completeness as a checklist rather than a score. A brand that’s complete in Colors and Logos but empty in Voice & tone works fine for editors building by hand — it just gives generated content nothing to go on. | | --- | ### **Identity** Identity describes what the brand is called, how it describes itself, and which libraries it applies to. | **Field** | **What It’s For** | | --- | --- | | **Short description** | One line. Shows in brand pickers, so editors can tell brands apart. | | **Long description** | The fuller story — what the brand does, who it speaks to, and what it cares about. Used as context when content is generated. | | **Source URL** | The website the brand was imported from, with a Re-fetch button. | | **Microapp Libraries** | The libraries the brand applies to. Select Add to assign another. | ### **[![Brand Kit Callouts-5-identity](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-5-identity.png?width=670&height=431&name=Brand%20Kit%20Callouts-5-identity.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-5-identity.png)Re-fetching a brand from its website** After a rebrand, or to pick up anything an earlier import missed, re-fetch the brand from its source website: 1\. **Select Re-fetch** — next to the Source URL in Identity. 2\. **Compare the changes** — a Re-import window lists each field that would change, with its Current and Incoming values. Shown values are replaced, and any new logos are added. 3\. **Select Replace or Cancel** — Replace brings the incoming values into your draft. Cancel closes the window and changes nothing. 4\. **Select Save brand or Discard** — replacing doesn’t save anything on its own. Save brand keeps the changes; Discard reverts them.[![Brand Kit Callouts-6-re-fetch-website](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-6-re-fetch-website.png?width=670&height=431&name=Brand%20Kit%20Callouts-6-re-fetch-website.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-6-re-fetch-website.png) | **Pro Tip:** Because nothing is saved until you select Save brand, it’s safe to re-fetch just to see whether a website has changed. Read the Incoming column carefully — a website’s palette may include colors your brand guidelines don’t. | | --- | ### **Logos** Each logo can be given a name and tagged for use on light or dark backgrounds, and shows its file type — SVG, PNG, or JPG. You can upload several logos at once.   [![Brand Kit Callouts-9-logos](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-9-logos.png?width=670&height=431&name=Brand%20Kit%20Callouts-9-logos.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-9-logos.png)   | **Pro Tip:** Tag every logo for light or dark backgrounds. It’s the quickest way to stop an editor placing a dark logo on a dark page — and SVG files stay crisp at any size. | | --- | ### **Colors** Your palette is shown as a table, with a live contrast check for each color against the brand’s default screen background. Each color is measured against two accessibility levels: | **Level** | **Contrast Ratio** | **What It Means** | | --- | --- | --- | | **AA** | 4.5:1 | The widely used minimum for comfortably readable body text. | | **AAA** | 7:1 | An enhanced level for maximum readability. | Colors that fail are flagged, never blocked — you can still save and use them.![Brand Kit Callouts-7-colors](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-7-colors.png?width=670&height=431&name=Brand%20Kit%20Callouts-7-colors.png) | **Pro Tip:** A flagged color isn’t necessarily wrong for your brand. It may be fine for large headlines, accents, or decoration, where contrast requirements are lower. Avoid using it for body text against the default background. | | --- | | **Tip:** Clear palette names matter most on brands with several colors. A name like Primary Blue or CTA Orange is far easier for an editor to select correctly in the color picker than a generic number. | | --- | ### **Configure Typography** Each brand font is listed with its source, its format, and a status: Uploaded, Linked, Partial, or Unresolved. Text presets — such as Heading, Body, and Caption — show a live preview, so you can see exactly how each one renders before editors use it. | **Primary and Secondary font** | Set the brand's main font and a complementary font for secondary text such as captions or labels. | | --- | --- | | **Add font** | Upload additional custom fonts beyond the primary and secondary selections. | | **Typography Styles** | Create named presets, such as Heading, Body, or Caption, each combining a font, weight, and size. Select Add style to create one. | [![Brand Kit Callouts-8-typography](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-8-typography.png?width=670&height=431&name=Brand%20Kit%20Callouts-8-typography.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-8-typography.png) For each typography preset, configure the font family, weight, and size your team needs. | **Heads Up:** Treat a Partial or Unresolved status as a prompt to check that font before you rely on the brand. Upload the official font files in Font management where you can. | | --- | ### **Voice & tone (new)** Voice & tone describes how your brand sounds. It has five parts: | **Field** | **What to Include** | | --- | --- | | **Tone** | How the brand should come across — for example, warm and direct, or formal and precise. | | **Preferred words** | Terms your brand uses, such as product names or house phrases. | | **Avoided words** | Terms your brand never uses, such as competitor language or jargon. | | **Reading level** | How simple or technical the writing should be. | | **Sample copy** | A short passage that sounds the way your brand should. | Tiled AI uses Voice & tone, along with the long description in Identity, as context whenever it generates content for your brand. Neither changes text that already exists in your microapps. ![Brand Kit Callouts-10-voice-tone](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-10-voice-tone.png?width=670&height=431&name=Brand%20Kit%20Callouts-10-voice-tone.png) | **Pro Tip:** Sample copy usually does more than any other field. A real paragraph in your brand’s voice gives Tiled AI a concrete example to match, where a word like “friendly” leaves a lot of room for interpretation. | | --- | ### **Saving Your Changes** Changes in Brand Kit are no longer saved as you type. Everything you change — across every section — is held as a draft, and Unsaved changes appears at the top of the editor until you decide what to do with it: • **Save brand** — commits all of your changes at once. • **Discard** — reverts everything back to the last saved version. If you try to leave the page with unsaved changes, Tiled asks whether to save or discard them first.![Brand Kit Callouts-11-saving-your-changes](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-11-saving-your-changes.png?width=670&height=431&name=Brand%20Kit%20Callouts-11-saving-your-changes.png) | **Heads Up:** Moving between sections doesn’t save anything. You can edit Identity, Colors, and Voice & tone in one sitting and save once at the end — but nothing is kept until you select Save brand. | | --- | ### **Using Brand Assets in the Builder** Once a brand is assigned to a library, editors get its assets throughout the Builder with no extra setup: 1\. **Create a new microapp** — choose an assigned brand in the creation dialog. 2\. **Add a text tile** — brand text presets appear at the top of the font selector. 3\. **Open the color picker** — brand colors appear as the main palette. 4\. **Open the asset picker** — brand logos are listed and ready to insert. To assign or change a brand on an existing microapp, open the microapp’s Settings, select the brand, and save. The new brand applies to tiles you add from then on — existing tiles aren’t restyled. | **Using Builder 1.0?** Brand Kit is a Builder 2.0 feature. Builder 1.0 microapps don’t pick up brand colors, fonts, or styles from Brand Kit. | | --- | | **Note:** Changing a microapp's brand applies going forward. New tiles added after the change use the assigned brand's colors and fonts. Tiles that already existed before the brand was assigned are not retroactively restyled. | | --- | ### **Who Can Do What** | **Role** | **What They Can Do** | | --- | --- | | **Account Admin** | Create, edit, and re-fetch brands. Assign brands to libraries. | | **Editor** | Choose a brand when creating a microapp, change it later in microapp Settings, and use brand colors, fonts, and logos in the Builder. Cannot create or edit brands. | | **Base User** | Sees brand-styled microapps in the Viewer. No brand management access. | **[![Brand Kit Callouts-13-who-can-do-what](https://support.tiled.co/hs-fs/hubfs/Brand%20Kit%20Callouts-13-who-can-do-what.png?width=670&height=431&name=Brand%20Kit%20Callouts-13-who-can-do-what.png)](https://support.tiled.co/hubfs/Brand%20Kit%20Callouts-13-who-can-do-what.png)** ### **Common Questions** | **Question** | **Answer** | | --- | --- | | **Does Brand Kit work with Builder 1.0 microapps?** | No. Brand Kit is scoped to Builder 2.0. Builder 1.0 microapps do not inherit brand colors or styles from Brand Kit configuration. | | **Can an account have more than one Brand Kit?** | Yes. An account can hold multiple Brand Kits, each assignable to different libraries. This is common for agencies managing several client brands, or organizations with multiple product lines. | | **Can a library have more than one brand available?** | Yes. Multiple Brand Kits can be assigned to the same library. The library default determines which brand applies automatically to new microapps, but editors can select a different assigned brand at creation time. | | **What happens if I create a microapp without selecting a brand?** | If the library has a default brand, it applies automatically. If no default is set, the microapp starts without a brand, and editors can apply brand assets manually from the color picker, font selector, and asset picker. A brand can also be assigned at any time afterward from the microapp's Settings; once assigned, new tiles added from that point on use the brand's colors and fonts. | | **Can editors modify Brand Kit records?** | No. Brand Kit records can only be created and modified by account administrators. Editors use brand assets but cannot change brand configuration. | | **The brand import didn't retrieve all our assets. What should I do?** | Brand import retrieves publicly available data and may not capture every asset for every brand. Review the imported results and manually upload any logos, fonts, or colors that weren't retrieved. Always verify imported assets against your official brand guidelines before use. | | **Can I rename a color palette after it's been created?** | Yes. Select the palette's name next to its swatch in Brand Colors and edit it at any time. Renaming a palette does not change the color value, only its label in the color picker. | | **Can I change the library default brand after microapps have been created?** | Yes. Changing the library default affects new microapps going forward. Existing microapps retain the brand that was applied when they were created. | **Related Articles** • [**Microapp Settings**](https://support.tiled.co/microapp-settings-2.0) — Assigning or changing the brand on an individual microapp. • [**Font Management**](https://support.tiled.co/how-to-upload-custom-fonts) — Uploading and managing the font files your brands use. • [**Color Theme Popover**](https://support.tiled.co/color-dropper-eyedropper-tool) — Applying colors in the Builder, including brand palettes. • [**Personalization Mode**](https://support.tiled.co/personalization-mode) — How brand assets appear when personalizing a microapp. • [**Bug Fix Bulletin — v66.0.0**](https://support.tiled.co/bug-fix-bulletin---v66.0.0) — The brand import fix, and other issues resolved in this release.   - [Getting Started](https://support.tiled.co/getting-started#main-content) - [Intro to Tiled](https://support.tiled.co/getting-started#intro-to-tiled) - [Tiled Library](https://support.tiled.co/getting-started#tiled-library) - [Tiled Builder](https://support.tiled.co/tiled-builder#main-content) - [Tiled Builder](https://support.tiled.co/tiled-builder#tiled-builder) - [Microapp Tiles](https://support.tiled.co/tiled-builder#microapp-tiles) - [Personalization](https://support.tiled.co/tiled-builder#personalization) - [Asset Library](https://support.tiled.co/tiled-builder#asset-library) - [Best Practices](https://support.tiled.co/tiled-builder#best-practices) - [Tiled Tiles](https://support.tiled.co/tiled-tiles) - [Settings](https://support.tiled.co/settings#main-content) - [Account Settings](https://support.tiled.co/settings#account-settings) - [Library Settings](https://support.tiled.co/settings#library-settings) - [Microapp Settings](https://support.tiled.co/settings#microapp-settings) - [Sharing & Analytics](https://support.tiled.co/sharing-analytics#main-content) - [Microapp Analytics](https://support.tiled.co/sharing-analytics#microapp-analytics) - [Personalization](https://support.tiled.co/sharing-analytics#personalization) - [Sharing Microapps](https://support.tiled.co/sharing-analytics#sharing-microapps) - [Useful Resources](https://support.tiled.co/useful-resources#main-content) - [Additional Guides](https://support.tiled.co/useful-resources#additional-guides) - [Developer Tools](https://support.tiled.co/useful-resources#developer-tools) - [Accessibility](https://support.tiled.co/useful-resources#accessibility) - [Tiled Mobile App](https://support.tiled.co/useful-resources#tiled-mobile-app) - [Seismic](https://support.tiled.co/useful-resources#seismic) - [Authentication & Security](https://support.tiled.co/useful-resources#authentication-security) - [Builder 2.0](https://support.tiled.co/builder-2-0#main-content) - [Tiled Builder 2.0](https://support.tiled.co/builder-2-0#tiled-builder-2-0) - [Microapp Tiles 2.0](https://support.tiled.co/builder-2-0#microapp-tiles-2-0) - [Personalization 2.0](https://support.tiled.co/builder-2-0#personalization-2-0) - [Asset Panel 2.0](https://support.tiled.co/builder-2-0#asset-panel-2-0) - [Layers & Settings 2.0](https://support.tiled.co/builder-2-0#layers-settings-2-0) - [FAQ](https://support.tiled.co/builder-2-0#faq) - [Tiled Plugins](https://support.tiled.co/tiled-plugins#main-content) - [Figma Plugin](https://support.tiled.co/tiled-plugins#figma-plugin) - [Adobe XD Plugin](https://support.tiled.co/tiled-plugins#adobe-xd-plugin) - [Sketch Plugin](https://support.tiled.co/tiled-plugins#sketch-plugin) - [Integrations](https://support.tiled.co/integrations#main-content) - [CRM & Marketing Automation](https://support.tiled.co/integrations#crm-marketing-automation) - [Content & Asset Management](https://support.tiled.co/integrations#content-asset-management) - [Collaboration & Communication](https://support.tiled.co/integrations#collaboration-communication) - [New Releases](https://support.tiled.co/new-releases#main-content) - [v66.0.0](https://support.tiled.co/new-releases#v66-0-0) - [v65.0.0](https://support.tiled.co/new-releases#v65-0-0) - [v64.0.0](https://support.tiled.co/new-releases#v64-0-0) - [v63.0.0](https://support.tiled.co/new-releases#v63-0-0) - [v62.0.0](https://support.tiled.co/new-releases#v62-0-0) - [v61.0.1](https://support.tiled.co/new-releases#v61-0-1) - [v60.0.0](https://support.tiled.co/new-releases#v60-0-0) - [v59.0.0](https://support.tiled.co/new-releases#v59-0-0) - [v58.0.0](https://support.tiled.co/new-releases#v58-0-0) - [v57.0.0](https://support.tiled.co/new-releases#v57-0-0) - [v56.0.0](https://support.tiled.co/new-releases#v56-0-0) - [v55.0.1](https://support.tiled.co/new-releases#v55-0-1) - [v54.0.0](https://support.tiled.co/new-releases#v54-0-0) - [v53.0.0](https://support.tiled.co/new-releases#v53-0-0) - [v52.0.0](https://support.tiled.co/new-releases#v52-0-0) - [v51.0.0](https://support.tiled.co/new-releases#v51-0-0) - [v50.0.0](https://support.tiled.co/new-releases#v50-0-0) - [Uncategorized](https://support.tiled.co/uncategorized) [![logo-horizontal\_k-3](https://support.tiled.co/hs-fs/hubfs/logo-horizontal_k-3.png?width=100&height=21&name=logo-horizontal_k-3.png "logo-horizontal_k-3")](https://tiled.co) Copyright © 2026, Tiled ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://4720090.fs1.hubspotusercontent-na1.net/hubfs/4720090/video_assets/223394361700/inherited/web_optimized.mp4", "dateModified" : "2026-10-01T20:43:04.868Z", "duration" : "PT33.3S", "height" : 1080, "name" : "Brand Kit Animation", "thumbnailUrl" : "https://4720090.fs1.hubspotusercontent-na1.net/hubfs/4720090/Brand%20Kit%20Animation.mp4/medium.jpg", "uploadDate" : "2026-10-01T20:43:04.865Z", "width" : 1920 } ```