The Brand Styles tab in Instant allows you to define the colors and fonts that represent your brand. These styles appear as shortcuts throughout the Builder, ensuring consistent branding across your layouts.
Accessing Brand Styles
Open the Instant Builder
In the left sidebar, click on the Brand Styles tab
Color Styles
Colors added as Brand Styles appear as shortcuts throughout the Builder. This allows you to quickly select your brand colors when styling buttons, background fills, text, and other elements.
Adding a Color Style
Open the Brand Styles tab
Click the plus icon (+) next to Color Styles
Select a color using the color picker or enter a hex color code
Give the Color Style a name
Click anywhere outside the Edit Color panel to save
Recommended Colors
For a complete brand palette, consider adding:
Main brand color
One or two accent colors
Background colors
Grayscale colors
Tip: You can add as many colors as you'd like to build a comprehensive palette.
Deleting a Color Style
Open the Brand Styles tab
Find the Color Style you want to delete
Click the more options button (three dots)
Select Remove Color
Click Remove to confirm
Text Styles
Text Styles added here appear as shortcuts in text elements across your site. Individual text elements can still be customized with different font sizes, weights, and accents through the Design panel.
Adding a Text Style
Open the Brand Styles tab
Click the plus icon (+) next to Text Styles
Select a Font and Weight
Select a color using the color picker or enter a hex color code
Give the Text Style a name
Click anywhere outside the Edit panel to save
Recommended Text Styles
For a complete typography system, consider adding:
Heading styles (H1, H2, H3, etc.)
Body text styles
Emphasis styles (bold, accent text)
Tip: You can add as many text styles as you'd like to cover all your typography needs.
Deleting a Text Style
Open the Brand Styles tab
Find the Text Style you want to delete
Click the more options button (three dots)
Select Remove Text
Click Remove to confirm
Custom Fonts
Upload custom fonts to use across your entire site.
Uploading a Custom Font
Open the Brand Styles tab
Select an existing Text Style or create a new one by clicking the plus icon (+)
Click the Font field
Click the Upload button
Click Choose Fonts and select your font files, or drag and drop them onto the upload area
Supported Formats
Format | Extension |
TrueType | .ttf |
Web Open Font Format | .woff |
Web Open Font Format 2 | .woff2 |
Once uploaded, custom fonts appear in:
All Text elements across your site
Text Styles in Brand Styles
Quick Reference
Task | Action |
Open Brand Styles | Left sidebar → Brand Styles tab |
Add Color Style | Plus icon (+) → Pick color → Name → Click outside to save |
Delete Color Style | More options → Remove Color → Remove |
Add Text Style | Plus icon (+) → Select font/weight → Pick color → Name → Click outside to save |
Delete Text Style | More options → Remove Text → Remove |
Upload custom font | Text Style → Font field → Upload → Choose Fonts |
Brand Style Benefits
Style Type | Where It Appears |
Color Styles | Color pickers throughout the Builder (buttons, fills, text, etc.) |
Text Styles | Text element style dropdowns across your site |
Custom Fonts | Font selectors in all Text elements and Text Styles |