---
url: /branding.md
description: >-
  How to customize webapp visual appearance including colors, fonts (Google or
  custom), component roundings, and icon styles.
---

# 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](/webapp) — Apply branding to webapps
* [Content](/content) — Manage text and images