# BrandKit

> Style your review widgets, review forms, and emails in one place: import your brand from your website, then edit fonts, colors, logos, and components.

Breadcrumb: BrandKit › Overview · Updated: 2026-10-17
Docs index: https://docs.cevoid.com/llms.txt

BrandKit is your brand's look for review widgets, review forms, and emails: your fonts, logos, and color schemes, and how buttons, cards, popups, and form fields look. You change it in a draft, then publish it to all of them at once.

Navigate to [Settings → BrandKit](https://app.cevoid.com/settings/brandkit) to manage your BrandKit.

| Specification | Limit |
| --- | --- |
| _BrandKit_ | One per workspace |
| _Logos_ | One light and one dark logo, PNG, up to 5 MB each |
| _Custom fonts_ | .otf, .ttf, .woff, or .woff2, up to 5 files per upload |
| _Icons_ | SVG with a viewBox, up to 16 KB each |
| _Color scheme names_ | Up to 40 characters |
| _Website imports_ | One at a time, and up to 20 per workspace in 24 hours |

## What BrandKit styles

| Where | What comes from BrandKit | Set on the item itself |
| --- | --- | --- |
| [Review widgets](https://docs.cevoid.com/reviews/showcase/review-widgets.md) | Fonts, stars, cards, buttons, tabs, form fields, icons, and the colors of the widget's color scheme | Layout, copy, and _Color scheme_. See [Review widget settings](https://docs.cevoid.com/reviews/showcase/review-widget-settings.md#color-scheme) |
| Popups that review widgets open, such as _All reviews_ | The same, in the color scheme, position, and width set under **Popups** | Nothing |
| [Review forms](https://docs.cevoid.com/reviews/collect/review-forms.md) | Fonts, form fields, buttons, stars, and where forms open, in the **Popups** color scheme | Copy, steps, and which logo the company review form shows |
| Emails from your [email templates](https://docs.cevoid.com/emails/email-templates.md) | One color scheme, a logo, fonts, buttons, and cards | Copy and layout choices |

These don't use BrandKit:

- **Loyalty program widgets:** They use your [Loyalty theme](https://docs.cevoid.com/brandkit/design-theme.md)
- **UGC galleries, cards, and the UGC popup:** They have their own design settings. See [Gallery design](https://docs.cevoid.com/ugc/showcase/gallery-design.md).
- **Review blocks in Shopify customer accounts:** They use Shopify's own style. See [Shopify customer accounts](https://docs.cevoid.com/reviews/collect/shopify-customer-accounts.md).

## BrandKit and the Loyalty theme

BrandKit and the [Loyalty theme](https://docs.cevoid.com/brandkit/design-theme.md) are separate styles. The Loyalty theme, at [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme), styles your loyalty program widgets.

- **Where BrandKit starts:** Cevoid creates your BrandKit the first time someone opens [Settings → BrandKit](https://app.cevoid.com/settings/brandkit), as a copy of your Loyalty theme, so review widgets and emails look the same as before. Until then, they use your Loyalty theme's styling, or Cevoid's defaults. A new workspace gets its BrandKit [imported from its website](https://docs.cevoid.com/brandkit#automatic-import-for-new-workspaces).
- **Separate from then on:** A change to one doesn't change the other, and each has its own color schemes
- **Shared fonts:** A custom font you upload on either page shows in both. See [Custom fonts](https://docs.cevoid.com/brandkit#custom-fonts).
- **Separate imports:** A website import fills only your BrandKit. To style program widgets from your website, see [Import a theme](https://docs.cevoid.com/brandkit/design-theme.md#import-a-theme).

## Import your BrandKit from your website

A BrandKit import builds a draft from your website. Cevoid's AI explores your site in a browser, product pages and phone-sized pages included, and writes your fonts, a **Primary** color scheme, **Secondary** and **Accent** schemes when your site has them, and the look of your buttons, form fields, and cards. Fonts your site uses that aren't in Cevoid's font list are added to your [custom fonts](https://docs.cevoid.com/brandkit#custom-fonts).

The import replaces your current draft, including changes you haven't published. Your published BrandKit stays the same until you publish.

### Automatic import for new workspaces

When a workspace is created with a store domain, from Shopify or entered at signup, Cevoid imports its BrandKit from that domain. For a workspace created with an email address, the import starts once its owner logs in with the emailed code or with Google.

- **Published for you:** When the import could review your live storefront, Cevoid publishes it, so review widgets and emails match your store from the start
- **Left as a draft:** Otherwise, such as for a password-protected storefront, the draft waits on [Settings → BrandKit](https://app.cevoid.com/settings/brandkit), marked _Draft_
- **Never over your own:** The automatic import doesn't run once you've published a BrandKit or finished an import of your own

### Run an import

1. Navigate to [Settings → BrandKit](https://app.cevoid.com/settings/brandkit)
2. Click **Import website**
3. Enter your store's address in _Website URL_, such as `your-store.com`
4. Click **Import website**. The import shows each step, such as _Exploring website_ and _Matching fonts_, and usually takes 2 to 3 minutes. You can close the dialog while it runs.
5. Click **Customize** when the import says your draft is ready. The draft opens in the editor.
6. Click **Publish** once the draft looks right

**Import website** is also in the editor's header, once your changes are saved. While an import runs, the draft is locked: you can look around the editor, but not change, save, or publish it. If an import can't finish, click **Import website** to try again.

### Import a password-protected storefront

A Shopify store that isn't open to visitors yet, such as a development store, shows a password page, so the import can't see your storefront. Save the password visitors use to open your store: click **Add storefront password** under _Store password protected?_ in the import dialog, or in the alert _Your storefront seems to be password protected_ on [Settings → BrandKit](https://app.cevoid.com/settings/brandkit) after an import stopped there. See [Check a password-protected storefront](https://docs.cevoid.com/reviews/showcase/embed-review-widgets.md#check-a-password-protected-storefront).

If your workspace's automatic import hasn't been published, saving the password restarts it. Otherwise, click **Import website** again.

## Edit your BrandKit

The BrandKit editor shows your draft beside a live preview, in the color scheme you select in the menu at the top.

1. Navigate to [Settings → BrandKit](https://app.cevoid.com/settings/brandkit) and click **Customize**
2. Click **Variables** or **Color schemes**
3. Click a panel, such as **Typography**, or a color scheme. The preview shows what it styles, such as a sample email for **Emails**.
4. Set the panel's settings or the scheme's colors
5. Click **Save draft**
6. Click **Publish** to use your changes on your store and in your emails

**From another editor:** Click **BrandKit** in the rail on the left of the review widget, review form, or email template editor, or **Edit scheme** in a review widget's _Color scheme_. Those editors show your published BrandKit, so your draft shows there once you publish.

## Save, publish, or reset your draft

Your BrandKit has a draft, which you edit, and a published version, which your store and emails use. [Settings → BrandKit](https://app.cevoid.com/settings/brandkit) marks unpublished changes _Draft_.

| Button | What it does |
| --- | --- |
| **Save draft** | Saves your changes to the draft. Your store and emails don't change |
| **Publish** | Makes the saved draft your published BrandKit. Available once your changes are saved |
| **Reset draft** | Discards every change since you last published, after you confirm with **Reset draft**. Your published BrandKit stays the same |

After you publish:

- Review widgets, their popups, and review forms show the new look from the next page load on your store
- Every email Cevoid sends from then on uses it, including emails waiting in [Outbox](https://docs.cevoid.com/flows/outbox.md)
- Widgets and emails that used a renamed scheme follow its new name, and widgets that used a deleted scheme switch to your default scheme. See [Color schemes](https://docs.cevoid.com/brandkit#color-schemes).

## Variables

The **Variables** tab of the BrandKit editor sets your fonts, logos, icons, and the shape of each component. Components take their colors from the [color scheme](https://docs.cevoid.com/brandkit#color-schemes) they show in.

At the top of the tab, _Density_ (**Compact**, **Normal**, or **Spacious**) and _Radius_ (**Sharp**, **Soft**, **Round**, or **Pill**) set the spacing and corner rounding of every component at once. A component's own panel then sets exceptions.

| Panel | What it sets |
| --- | --- |
| **Logo** | Your light and dark logo. See [Logo](https://docs.cevoid.com/brandkit#logo) |
| **Typography** | _Headings_ and _Text_: _Font_, _Weight_, _Letter spacing_, _Line height_, and a size for each step, plus _Text transform_ for headings |
| **Icons** | The icons in widgets and forms. See [Icons](https://docs.cevoid.com/brandkit#icons) |
| **Animation** | _Ease_, how components move: **Smooth** (the default), **Snappy**, **Gentle**, **Springy**, or **Mechanical** |
| **Buttons** | The font and text style, _Border width_, and the _Padding_, _Border radius_, and _Font size_ of _Medium_ and _Small_ buttons |
| **Badges**, **Cards** | _Padding_ and _Border radius_, plus _Font size_ for badges |
| **Tabs** | _Style_, **Pills** or **Line**, with its padding, font size, and corners or indicator |
| **Popups** | The colors, backdrop, and corners of popups, and where they open. See [Popups](https://docs.cevoid.com/brandkit#popups) |
| **Avatars** | _Fallback_ for reviewers without a photo, **Initials** or **Icon**, and _Border radius_ |
| **Carousel navigation** | The _Shape_ of the previous and next arrows, **Round** or **Match buttons**, and their _Icons_ |
| **Stars** | _Shape_, such as **Classic** or **Sparkle**, and _Style_: **Star**, with _Unfilled stars_ (**Solid** or **Outline**), or **Boxed**, with _Box radius_ |
| **Meters** | The bars in a rating breakdown |
| **Inputs** | _Border_, **Full** or **Bottom**, _Padding_, _Border radius_, _Border width_, and _Font size_ |
| **Checkboxes**, **Switches**, **Sliders** | Their sizes and corner radius, and the border of checkboxes and slider handles |
| **Dropdowns** | The _Trigger_, which follows your inputs until you change it, and the _Menu_ |
| **Scale questions**, **Centered range questions** | The track, stops, and handle or marker of these [review question](https://docs.cevoid.com/reviews/collect/review-questions.md) types |
| **Emails** | The color scheme and logo of your emails. See [Emails](https://docs.cevoid.com/brandkit#emails) |

### Logo

Under **Logo**, upload your logo in two versions, so it stays readable on any background: _Light logo_, for dark backgrounds, and _Dark logo_, for light backgrounds. Use a PNG with a transparent background. Your [emails](https://docs.cevoid.com/brandkit#emails) and the company review form can show either one: see [Review forms](https://docs.cevoid.com/reviews/collect/review-forms.md#edit-a-review-form).

### Icons

Under **Icons**, click an icon to see where it shows, then paste its SVG code or click **Upload file** to replace it. Icons take the color of the scheme they show in, so simple solid or outline icons work best. **Reset to default** returns one icon to Cevoid's, and **Reset all icons** returns them all.

### Popups

Under **Popups**, _Color scheme_ colors every popup, whatever scheme the widget behind it uses. _Backdrop_ is the color laid over the page behind a popup, and _Border radius_ rounds its corners.

_Content popups_, such as _All reviews_, and _Forms_, the review forms, each open where you set them:

| Setting | Options | Content popups start on | Forms start on |
| --- | --- | --- | --- |
| _Position_ | **Left**, **Center**, **Right**, or **Bottom** | **Center** | **Right** |
| _Max width_ or _Width_ | 320 to 2,000 px. A centered form keeps its own width | 1,600 px | 480 px |
| _Inset_ | The gap to the screen edge, 0 to 30 px. Not for **Center** | 0 px | 0 px |

Phones show popups differently: see [Customer experience](https://docs.cevoid.com/brandkit#customer-experience).

### Emails

Under **Emails**, choose how every email your workspace sends looks.

| Setting | What it does |
| --- | --- |
| _Color scheme_ | The one scheme every email uses. Emails use **Primary** until you choose another |
| _Logo_ | **Workspace**: your square workspace logo beside your workspace name, or the name alone without a logo. **Light** or **Dark**: the logo you uploaded under [Logo](https://docs.cevoid.com/brandkit#logo) |
| _Logo width_ | How wide a light or dark logo shows, from 24 to 400 px |

Emails also take your heading and text fonts and the shape of your buttons and cards. Email apps that can't load your fonts show your [fallback fonts](https://docs.cevoid.com/emails/email-settings.md#fallback-fonts).

## Color schemes

A color scheme is a named set of colors for a section and everything in it: text, buttons, cards, form fields, stars, and more. Each review widget uses one, your popups use one, and your emails use one. A new BrandKit has your Loyalty theme's schemes, by default **Primary**, **Secondary**, **Dark**, and **Accent**. **Primary** is your default scheme.

### Edit a color scheme

1. Navigate to [Settings → BrandKit](https://app.cevoid.com/settings/brandkit) and click **Customize**
2. Click **Color schemes**
3. Click the scheme. Its colors open in groups, such as _Section_, _Primary button_, and _Cards_.
4. Click a color and pick a new one
5. Click **Save draft**

- **Hover colors** follow their resting color until you pick one of your own
- **Inside cards:** Click **Add override** under _Cards_ to give avatars, badges, tracks, or buttons different colors on cards than on the section

### Add, rename, or delete a color scheme

Click **Create new** under your schemes on the **Color schemes** tab, or click **...** next to a scheme.

| Action | What it does |
| --- | --- |
| **Create new** | Adds a scheme with neutral colors, once you name it and click **Create scheme** |
| **Duplicate** | Adds a copy of the scheme, named _Copy of_ the original unless you change it, once you click **Duplicate scheme** |
| **Rename** | Renames the scheme. Widgets and emails that use it follow the new name when you publish |
| **Delete** | Removes the scheme once you click **Delete scheme**. Widgets that use it switch to your default scheme when you publish |

**Create new** and **Duplicate** change your draft like any edit, so click **Save draft** afterwards. **Rename** and **Delete** save the draft right away, so save your other changes first. You can't delete your last scheme, or the scheme your popups or emails use: select another one for them first. A new scheme shows in a review widget's _Color scheme_ once you publish.

## Custom fonts

Custom fonts are font files you upload, for a font that isn't in the editor's font list. Popular fonts, including Google Fonts, are already there. Your custom fonts are shared with your Loyalty theme.

1. Navigate to [Settings → BrandKit](https://app.cevoid.com/settings/brandkit)
2. Click **Upload font** under _Custom fonts_
3. Select your font files. Each font shows in the list with a sample.

The font then shows in every _Font_ menu in the editor, which also has **Upload font**. To rename a font, click **...** in its row and select **Edit name**. To remove it, select **Delete** and click **Remove font**: settings that used it return to the default font.

## Customer experience

Shoppers see your BrandKit in review widgets, the popups those open, and review forms, and customers see it in every email Cevoid sends them.

- **Popups on phones:** A centered popup opens as a sheet from the bottom, and a popup set to open from the left or right fills the screen width
- **Form fields on phones:** Text in a field is at least 16 px, so the page doesn't zoom in when a shopper taps it

## Related articles

- [Review widgets](https://docs.cevoid.com/reviews/showcase/review-widgets.md)
- [Email templates](https://docs.cevoid.com/emails/email-templates.md)
- [Loyalty theme](https://docs.cevoid.com/brandkit/design-theme.md)
- [Review forms](https://docs.cevoid.com/reviews/collect/review-forms.md)
- [Review widget settings](https://docs.cevoid.com/reviews/showcase/review-widget-settings.md)

---

Canonical: https://docs.cevoid.com/brandkit