Branding

Branding (also called Themes) controls the visual appearance of your webapp. Match your corporate identity by customizing colors, fonts, shapes, and more.

What is Branding?

Branding profiles define how your webapp looks to customers. Each profile includes:

• Color palette
• Typography (fonts)
• Component roundings (button corners, cards, etc.)
• Icon styles

You can create multiple branding profiles and assign them to different webapps.

Creating Branding

Basic Information

Field	Description
Name	Internal name for your reference
Description	Notes about when to use this branding
Default Branding	Base theme to inherit from (Stampix default)

INFO

Empty branding values fall back to the default branding. You only need to customize what you want to change.

Color Settings

Primary Colors

Color	Usage
Primary	Main brand color — buttons, links, highlights
Secondary	Accent color — secondary buttons, subtle highlights
Text	Default text color

Status Colors

Color	Usage
Danger	Error messages, destructive actions
Warning	Warning messages, caution states

How to Set Colors

1. Open your branding profile
2. Navigate to the Colors section
3. Click on a color field
4. Enter a hex color code (e.g., #3B82F6) or use the color picker
5. Save your changes

TIP

Test your colors for accessibility. Ensure sufficient contrast between text and backgrounds.

Font Settings

Font Types

Type	Usage
Body Font	General text, paragraphs, descriptions
Title Font	Headings, product names, section titles
Monospace Font	Code, technical text (rarely used)

Font Sources

You can get fonts from two sources:

Google Fonts

1. Select "Google Fonts" as the source
2. Search for your font
3. Select it from the list

Custom Upload

1. Select "Custom Font" as the source
2. Upload your font files (.woff, .woff2, .ttf, or .otf)
3. Upload both normal and bold weight files

Font Settings

For each font, you can configure:

Setting	Description
Font Name	The name of your selected font
Fallback Font	What to use if the main font fails to load

Fallback options: Serif, Sans Serif, Monospace, System UI

Component Roundings

Control how rounded corners appear on different elements:

Component	What it affects
General	Default rounding for most elements
Button	Button corners
Input	Text fields, dropdowns
Card	Product cards, content boxes
Modal	Popup dialogs
Image	Photo containers
Thumbnail	Small image previews

Rounding Values

Choose from preset options:

Value	Appearance
None	Sharp, square corners
Small	Subtle rounding
Medium	Moderate rounding
Large	Very rounded
Full	Completely round (pill shape for buttons)
Custom	Enter a specific pixel value

Icon Settings

Configure the style of icons throughout your webapp:

Setting	Options
Style	Line style of icons
Shape	Container shape around icons

Using Branding

Assigning to Webapps

1. Create or edit a webapp
2. In the Brand Configuration section
3. Select your branding profile from the dropdown

Multiple Webapps

One branding profile can be used by multiple webapps. This is useful when:

• Running multiple campaigns with consistent branding
• Maintaining brand consistency across promotions

Creating Variations

If you need slightly different looks:

1. Create a new branding profile
2. Select the same default branding
3. Only change what needs to be different

Previewing Changes

After saving your branding:

1. Open your webapp
2. Click Open in new tab
3. See your changes in action

WARNING

Changes take effect immediately on the live webapp. Test in Demo Mode first.

Best Practices

Colors

• Use your brand's primary color for main actions
• Ensure text is readable on all backgrounds
• Test how colors look on mobile devices
• Keep status colors (danger, warning) distinct

Fonts

• Use 1-2 fonts maximum (body and title)
• Ensure fonts are readable at small sizes
• Consider loading time for custom fonts
• Always set appropriate fallbacks

Roundings

• Stay consistent — use similar roundings throughout
• Match your brand's visual style (modern = more rounded, corporate = less)
• Consider how buttons look next to input fields

Overall

• Less is more — subtle customization looks professional
• Test on multiple devices and browsers
• Get feedback before going live

Examples

Modern Tech Brand

• Primary Color: #3B82F6 (blue)
• Secondary Color: #10B981 (green)
• Body Font: Inter (Google Fonts)
• Title Font: Inter
• Roundings: Medium to Large
• Icons: Modern, rounded

Luxury Brand

• Primary Color: #1F1F1F (near black)
• Secondary Color: #C9A55C (gold)
• Body Font: Custom serif font
• Title Font: Custom display font
• Roundings: Small or None
• Icons: Classic, minimal

Playful Consumer Brand

• Primary Color: #FF6B6B (coral)
• Secondary Color: #4ECDC4 (teal)
• Body Font: Nunito (Google Fonts)
• Title Font: Fredoka One (Google Fonts)
• Roundings: Large to Full
• Icons: Rounded, friendly

Related Topics

• Webapps — Apply branding to webapps
• Content — Manage text and images