Brand Kit allows you to set key elements that define your brand's theme that get used throughout the app. It's really important to take a moment to configure your Brand Kit settings when you first install Tapcart as it will greatly improve the speed at which you can develop your app by ensuring your brand is represented in all of our Design Block templates we provide you.
Accessing Brand Kit
Open your Tapcart Dashboard
Hover over App Studio in the header
Select Brand Kit from the drop down
Brand Kit consists of 4 key areas
Colors: controls the color palette used to style design blocks
Typography: controls the font used throughout the app
Icons: provides a way to upload custom icons
Brand Assets: this controls some of your branded assets customers see when they visit the app
Colors
Colors allow you to set your color palette across the app to ensure experiences look and feel just like your brand. To edit a color, click the color swatch tied to the element you’re looking to update and either find the color using the color wheel, use a recently used color swatch or type in the HEX, RGB, or HSL value.
Important notes:
RGB and HSL values will be converted to HEX format after applying.
You can also set the opacity of any color using a slider. By default, this will be set from fully opaque but can be modified to completely transparent. This configuration will be saved in the HEX value assigned to the color.
As you choose your colors, you can preview changes using the mobile previewer. You can change the page you’d like to preview above the mobile phone. The pages you can preview include Homepage, Account, and Cart.
Important note: Not every element will be available for viewing on the screen depending on your use case (i.e. you don’t have sales prices or can’t see an error message toast in the previewer).
Colors are broken down into 4 sections to help drive understanding of where the color change will impact the app. These 4 sections include...
Core Colors include the main color components throughout the app like app background, header, dividing lines, and icons.
Background | Present on home, cart, PDP, account, PLP, collection menu, wishlists, subscriptions, orders, and search pages. |
Header Background | Present on home, cart, PDP, account, PLP, collection menu, wishlists, subscriptions, orders, and search pages. |
Input Background | Present on collection menu (titles of collection), PDP - wishlist heart fill, Sold out badge, Cart - apply discount / gift card fields. |
Modal Background | Present on in app notification modals like abandoned cart, Cart - subtotal section, PLP - Quick add modal, Account menu background, and Notifications line items. |
Tab Bar | Present on bottom navigation only. |
Icon (Primary) | Present on the “x” within modals, cart quantity picker (+,-), loading state jumping dots, selected checkboxes, and accordion arrows within the account page. |
Icon (Secondary) | Present as the outline of wishlist, Non-selected icon on bottom navigation, and account menu icons. |
Icon (Header) | Present on the top of your navigation (left and right). |
Brand (Primary) | Present on bottom navigation selected icons, multipage dividing lines that are selected, search pill outlines, variant selection outline on PDP and wishlist. |
Shadows | Present on collection menus and wishlists. |
Typography Colors include text components throughout the app like titles, primary & secondary colors, captions, and price.
Page Title | Present on the top header title (Navigation, Cart, Collections, Account, Order, Notification, Rewards, Subscriptions, Custom Screen). |
Primary Text | Present on Modals (main text), Homepage & PDP block header titles, Multi-page selected text, sold out badge text, search (text in input field, popular/trending/collection search text & pills), Sort & Filter on PLP, empty state header text, Wishlist variant & wishlist drop down text, Account header text and menu text, Collection menu block text. |
Secondary Text | Present on Multi-page non-selected text, Homepage & PDP "View all", Search block "Search Products", non-selected navigation options, Bar code integration block "Scan barcode or QR code", Empty state sub text, PLP Filter (number of items within each filter category) & Sort (non-selected sort options), Wishlist sub text, |
Legal / Caption Text | Data opt in text on modals |
Product Title | Present on all product titles on Homepage, PDP, PLP, Cart, Wishlist page & blocks. |
Price | Present on all full price on Homepage, PDP, PLP, Cart, Wishlist page & blocks. |
Strikethrough Price | Present on strikethrough price on Homepage, PDP, PLP, Cart, Wishlist page & blocks. |
Sales Price | Present on all discounted price on Homepage, PDP, PLP, Cart, Wishlist page & blocks. This color is different than "Price". |
Button Colors include the components of primary and secondary buttons like fill, text, outline, and enabling shadows.
Primary Button | Present on modals (abandoned cart, applying gift card / discount), number of item indicator on the cart icon (top right), checkout button, sort & filter buttons, saving & creating list on wishlist, empty state buttons (no items, keep shopping), quick add button. |
Secondary Button | Present on discount & gift card cart buttons, wishlist: add to bag button. |
State Colors include alert modals (success, error, warning), disable, and loading states. Some of these color choices are harder to see via the previewer in the app and as such we have provided some examples to help show how they are at.
Subscriptions
Success, Error, Warning / Alert message.
Shadows is an additional setting that can be enabled on blocks and/or buttons
Typography
Typography allows you to select a default font from your app or, if you are on our Enterprise plan, you can also upload a custom font that will be used across any block that’s configured to call the typography. When you upload a custom font, that’s applied to both iOS and Android and no further action is needed on your part to make that happen.
To upload a custom font
Select Typography from the left rail
Click Upload Font or drag and drop your font file(s) into the upload box
Confirm you have the appropriate font license if the font is licensable
Confirm or edit the Font Family name, weight, and style so they are correct
Important notes:
Font files need to be .otf or `.ttf`
Default font is San Francisco on iOS and Roboto on Android.
Custom Font files can have malformed names. We recommend if you are uploading multiple font weights within a similar family that all the font family names match. That will make using them in the experience much easier.
Icons
The Icons section is where you manage your global default icons. Every merchant has access to over 200 icons tailored for eCommerce. There are three global icons that apply as defaults across your app:
Back Icon — used when navigating back within the app
Close Icon — used to dismiss modals and overlays
Cart Icon — used throughout the app to access the cartSelect Icons from the left rail
These defaults apply across your app unless overridden on a specific screen. You can change any of them by clicking the dropdown and selecting a different icon from the library.
If you are on the Enterprise plan, you can also upload your own custom icons to more closely match your brand styling.
To upload a custom icon:
Select Icons from the left rail
Click Add Custom Icons tab
Drag and drop your icon file(s) into the upload box
Once uploaded, these icons will be available across the app for use
Important notes:
Icon files must be .svg
Max file size must be under 1 mb
48x48 SVG sizes work best on mobile layouts
Once uploaded, Tapcart will apply the primary icon color to each icon automatically
Brand Assets
Brand Assets is where you manage the key visuals that represent your app and brand.
App Icon
Your app icon is one of the most important aspects of your app because it’s the real estate on your user’s phone and will be seen within the app stores. An enticing, on-brand app icon will continue to bring your customers back into the app. App Icon should be 1024x1024 pixels.
Placeholder Image
The placeholder image will display while a product loads in your app.
Launch Screen
The launch screen is an image that will appear for 2-3 seconds prior to loading your app. This is a prompt at the start of each app session, please note, if you do not fully quit the app then the launch screen will not appear again. This is also only available on iOS as the Android OS has deprecated the launch screen.
Pro-Tips:
Avoid text on the sides and corners as they may get cut off in smaller iPhone screens
Include lifestyle imagery to ensure it grabs the attention of your audience
Considerations
For more information on all app assets dimensions, check out this guide.
Your app icon, placeholder image, and launch screen are all part of your App Listing. Any updates to these assets require a new submission to both Apple and Google Play to take effect, which typically takes 24-48 hours to process. To confirm your update has been submitted, reach out through LiveChat in your Tapcart dashboard or email [email protected].