Using the Brand Kit — Colors, Typography & Global Styles
Brand Kit is MobiDrag's global styling layer. Set your colors, fonts, icons, and brand assets once — and they apply consistently across your entire app automatically.
1 What is Brand Kit and why it matters
Brand Kit is a set of global style rules that define the look of your entire app from a single place. Instead of changing the color on every block individually, you define your brand's primary color once in Brand Kit — and it automatically applies everywhere.
This means:
- Your app always looks visually consistent across all pages
- Rebranding or updating colors takes seconds, not hours
- New blocks you add automatically inherit your brand styles
Always set up Brand Kit first before building your pages. It is the foundation everything else inherits from.
2 How to open Brand Kit
Click the ✦ Brand Kit button in the mode switcher on the left side of the builder toolbar. This switches the left and right panels to Brand Kit mode.
The left panel shows the four Brand Kit sections. A green tick indicates sections that are already configured. The right panel shows the settings for whichever section you have selected.
3 Colors
The Colors section defines every color used throughout your app. Changes here update all blocks instantly.
| Color group | What it controls |
|---|---|
| Page Background | The default background color of every page |
| Header Background | The app header bar background |
| Header Text & Icon | Color of text and icons in the header (e.g., cart icon, search icon) |
| Bottom Nav Color | Background of the bottom navigation bar |
| Bottom Nav Text & Icon | Color of nav tab labels and icons |
| Side Nav Color | Background of the slide-out side menu |
| Primary Text | Main body text color used across all pages |
| Secondary Text | Subdued text used for descriptions and captions |
Click any color swatch to open a color picker. You can type a hex code directly or use the visual picker to choose a color.
4 Typography
Typography lets you choose the font family for your app. All text across every block uses these fonts — you never need to set fonts block by block.
| Font setting | Used for |
|---|---|
| Headline Font | Large titles, section headings, hero text |
| Sub Headline Font | Subtitles, card labels, navigation items |
Available fonts include Inter (Modern), Poppins (Friendly), Roboto (Classic), Playfair Display (Elegant), Montserrat (Bold), Open Sans (Clean), and Lato (Professional). Each shows a live “The Quick Brown Fox Jumps” preview so you can judge the style.
5 Icons
The Icons section controls the icon style used throughout your app — navigation icons, action icons, and UI elements. Choose between different icon families (outlined, filled, rounded) to match your brand's personality.
6 Brand Assets
Upload your core brand files here. These assets power the visual identity of your app:
- App Logo — displayed in the header bar
- App Icon — the icon shown on users' home screens (used during publishing)
- Splash Screen — the loading screen shown when the app first opens
App Icon and Splash Screen are required before you can publish to the App Store or Play Store. Upload them in Brand Assets as part of your launch preparation.
7 Tips for a polished brand
- Limit your palette: Pick 1–2 main brand colors, 1 accent, and neutral text/background colors. More than 5 colors usually looks inconsistent.
- Match your website: Use the same hex codes you use on your Shopify store. This gives customers a seamless brand experience across web and app.
- Contrast is key: Make sure text colors have enough contrast against their background. Dark text on a light background, or vice versa.
- Preview immediately: Every Brand Kit change reflects live in the center canvas. Click different pages in the page dropdown to see how the style looks across multiple screens.