---
title: "Branding Module Documentation"
description: "Documentation for Branding"
---

## Table of Contents
1. [Navigation & Access](#navigation--access)
2. [Screenshots & Visual Interface](#screenshots--visual-interface)
3. [🎯 User Roles & Key Capabilities](#-user-roles--key-capabilities)
4. [Module Overview (Technical)](#1-module-overview-technical)
5. [Module Overview (Commercial/Business)](#2-module-overview-commercialbusiness)
6. [Module Overview (End User/Administrator)](#3-module-overview-end-useradministrator)
7. [Configuration Sections](#4-configuration-sections)
8. [Settings Reference](#5-settings-reference)
9. [Common Scenarios & Examples](#6-common-scenarios--examples)
10. [Model Context Protocol (MCP) AI Integration](#model-context-protocol-mcp-ai-integration)
11. [Limitations & Important Notes](#7-limitations--important-notes)
12. [Troubleshooting Tips](#8-troubleshooting-tips)
13. [Glossary](#9-glossary)
---

## Navigation & Access

To access the Branding module:
1. Log in to the Ring2All Web Portal (`https://<domain-or-ip>/login`).
2. In the left navigation sidebar, expand **Admin**.
3. Under **System Settings**, click **Branding** (`/admin/system-settings/branding`).
4. To configure white-label branding for a specific tenant, click on the tenant row in the table or the edit action icon (`/admin/system-settings/branding/:id`).

---

## Screenshots & Visual Interface

### Branding Tenants List View
The Branding overview displays all registered platform organizations and tenants, indicating corporate titles, slug identifiers, primary brand colors, admin contact emails, and customization statuses.
![Branding List](/screenshots/admin/system/branding-list.png)

### Tenant Branding Configuration Form
The tenant branding editor provides comprehensive white-labeling controls, including custom application naming, logo asset uploads, favicon selection, brand color pickers (primary and secondary), and whitelabel footer copyright definitions.
![Tenant Branding Configuration Form](/screenshots/admin/system/branding-form.png)

---

## 🎯 User Roles & Key Capabilities

The Branding module manages white-label customization across multi-tenant enterprise partitions:

| Role | Key Capabilities & Operational Scope |
|------|--------------------------------------|
| **Platform Owner / Master Administrator** | Defines the global platform brand, default fallback logos, copyright texts, and grants white-label customization permissions to tenants. |
| **Tenant Administrator** | Personalizes the tenant's visual identity: uploads corporate logos (light/dark modes), customizes primary theme colors, and sets company support links. |
| **Marketing & Brand Specialist** | Adjusts UI color palettes (HEX codes), verifies favicon contrast across browsers, and ensures branding assets render correctly across mobile and desktop interfaces. |
| **Telephony Auditor (Read-Only)** | Verifies tenant brand configurations, active logo URLs, and copyright strings without modification privileges. |

---

## 1. Module Overview (Technical)

### What Is Branding?

Branding is a **white-labeling module** that customizes the visual identity of each tenant. It manages logos, colors, login page design, and application information to match corporate branding.

### Architecture

```
┌─────────────────────────────────────────────────────────────────┐
│                  Branding Architecture                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Branding Configuration                                         │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │        Tenant: Acme Corp                                 │   │
│  │                                                          │   │
│  │  App Information:                                        │   │
│  │  ├─ App Name: Acme PBX                                  │   │
│  │  ├─ Welcome Message: Welcome to Acme                    │   │
│  │  └─ Footer: © 2025 Acme Corp                            │   │
│  │                                                          │   │
│  │  Colors:                                                 │   │
│  │  ├─ Primary: #1E40AF                                    │   │
│  │  └─ Secondary: #64748B                                  │   │
│  │                                                          │   │
│  │  Logos:                                                  │   │
│  │  ├─ Desktop Light: acme-logo.png                        │   │
│  │  ├─ Desktop Dark: acme-logo-dark.png                    │   │
│  │  ├─ Mobile Light: acme-mobile.png                       │   │
│  │  ├─ Mobile Dark: acme-mobile-dark.png                   │   │
│  │  ├─ Favicon Light: favicon.ico                          │   │
│  │  └─ Favicon Dark: favicon-dark.ico                      │   │
│  │                                                          │   │
│  │  Login Design:                                           │   │
│  │  ├─ Background Color: #0F172A                           │   │
│  │  ├─ Background Image: login-bg.jpg                      │   │
│  │  ├─ Form Background: rgba(...)                          │   │
│  │  └─ Button Color: #3B82F6                               │   │
│  │                                                          │   │
│  │  Notifications:                                          │   │
│  │  ├─ Toast Success: #10B981                              │   │
│  │  ├─ Toast Error: #EF4444                                │   │
│  │  ├─ Toast Warning: #F59E0B                              │   │
│  │  └─ Toast Info: #3B82F6                                 │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│       │                                                         │
│       ▼ Applied to                                             │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │        User Interface                                    │   │
│  │                                                          │   │
│  │  ├─ Login page                                          │   │
│  │  ├─ Application header                                  │   │
│  │  ├─ Browser favicon                                     │   │
│  │  ├─ Mobile PWA icons                                    │   │
│  │  └─ Color scheme throughout                             │   │
│  │                                                          │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## 2. Module Overview (Commercial/Business)

### Business Value

Branding provides **complete white-labeling**:

| Without Branding | With Branding |
|------------------|---------------|
| Generic interface | Custom identity |
| Default colors | Corporate colors |
| Platform logos | Customer logos |
| Same for all | Per-tenant customization |

### Use Cases

1. **Reseller White-Label**
   - Rebrand for each customer
   - Hide platform identity

2. **Corporate Identity**
   - Match company colors
   - Display company logo

3. **Multi-tenant Differentiation**
   - Unique look per tenant
   - Easy tenant identification

4. **Professional Appearance**
   - Custom login page
   - Branded experience

### Feature Highlights

| Feature | Benefit |
|---------|---------|
| **Light/Dark Logos** | Theme support |
| **Desktop & Mobile** | Responsive branding |
| **Favicons** | Browser identity |
| **Color Customization** | Match corporate colors |
| **Login Design** | Custom welcome pages |
| **Per-Tenant** | Multi-tenant branding |

---

## 3. Module Overview (End User/Administrator)

### What Can You Do?

- Set application name
- Upload logos (light/dark modes)
- Upload mobile logos
- Upload favicons
- Set primary and secondary colors
- Customize login page design
- Customize notification toast colors (Success, Error, Warning, Info)
- Set welcome message and footer

### Branding Interface

```
┌─────────────────────────────────────────────────────────────────┐
│              Branding                                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Customize your tenant's visual identity and interface         │
│                                                                 │
│  [🔍 Search tenants...]                                         │
│                                                                 │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │ Tenant Name     │ Branding   │ Status    │ Actions        │  │
│  ├─────────────────┼────────────┼───────────┼────────────────┤  │
│  │ Acme Corp       │ [Logo]     │ ● Active  │ [Configure]    │  │
│  │ Beta Inc        │ [Default]  │ ○ Inactive│ [Configure]    │  │
│  │ Gamma LLC       │ [Logo]     │ ● Active  │ [Configure]    │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### App Information Section

```
┌─────────────────────────────────────────────────────────────────┐
│              App Information                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Application Name: [Acme PBX                    ]              │
│    The name of your application as it appears                   │
│                                                                 │
│  Welcome Message: [Welcome to Acme Communications]             │
│    Welcome message shown to users when they log in              │
│                                                                 │
│  Description: [Enterprise phone system          ]              │
│    Brief description of your application                        │
│                                                                 │
│  Footer Text: [© 2025 Acme Corp. All rights reserved.]        │
│    Footer text displayed at the bottom                          │
│                                                                 │
│  Primary Color: [#1E40AF    ] [🎨]                             │
│    Primary color used for buttons, links, and highlights        │
│                                                                 │
│  Secondary Color: [#64748B   ] [🎨]                            │
│    Secondary color used for backgrounds                         │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### Logos & Icons Section

```
┌─────────────────────────────────────────────────────────────────┐
│              Logos & Icons                                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ▼ Desktop Logos                                                │
│                                                                 │
│  Logo (Light Mode)          Logo (Dark Mode)                   │
│  ┌────────────────┐         ┌────────────────┐                 │
│  │                │         │                │                 │
│  │   [ACME]       │         │   [ACME]       │                 │
│  │                │         │  (white text)  │                 │
│  └────────────────┘         └────────────────┘                 │
│  [Change] [Remove]          [Change] [Remove]                  │
│  200x200px or larger        200x200px or larger                │
│                                                                 │
│  ──────────────────────────────────────────────────────────────│
│                                                                 │
│  ▼ Mobile Logos & Favicons                                      │
│                                                                 │
│  Mobile (Light)  Mobile (Dark)  Favicon (Light) Favicon (Dark) │
│  ┌──────────┐    ┌──────────┐   ┌──────────┐    ┌──────────┐  │
│  │   [A]    │    │   [A]    │   │   [A]    │    │   [A]    │  │
│  └──────────┘    └──────────┘   └──────────┘    └──────────┘  │
│  512x512px       512x512px      32x32px         32x32px        │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### Login Design Section

```
┌─────────────────────────────────────────────────────────────────┐
│              Login Design                                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Background Color: [#0F172A    ] [🎨]                          │
│    Background color for the login page                          │
│                                                                 │
│  Font Color: [#FFFFFF       ] [🎨]                             │
│    Font color for text on the login page                        │
│                                                                 │
│  Form Background: [#1E293B80  ] [🎨]                           │
│    Background color for the login form (with alpha)             │
│                                                                 │
│  Submit Button Color: [#3B82F6CC] [🎨]                         │
│    Color for the submit button (with alpha)                     │
│                                                                 │
│  Add-ons Menu Color: [#47556980] [🎨]                          │
│    Color for the add-ons menu                                   │
│                                                                 │
│  Disable Background Image: ☐                                   │
│                                                                 │
│  Background Image:                                              │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │                                                          │  │
│  │          [Background Image Preview]                      │  │
│  │                                                          │  │
│  └──────────────────────────────────────────────────────────┘  │
│  [Change] [Remove]                                              │
│                                                                 │
│  Login Logo:                                                    │
│  ┌────────────────┐                                            │
│  │   [ACME]       │                                            │
│  └────────────────┘                                            │
│  [Change] [Remove]                                              │
│                                                                 │
│  [Save] [Cancel]                                                │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### Quick Tips

> [!TIP]
> **Light & Dark**: Upload both versions for theme support.

> [!TIP]
> **Recommended Sizes**: Follow size guidelines for best quality.

> [!NOTE]
> **Alpha Colors**: Use hex with alpha (e.g., #3B82F680) for transparency.

---

## 4. Configuration Sections

### App Information

| Field | Description |
|-------|-------------|
| **Application Name** | Display name |
| **Welcome Message** | Login greeting |
| **Description** | App description |
| **Footer Text** | Footer content |
| **Primary Color** | Main accent color (buttons, active tabs, highlight states) |
| **Secondary Color** | Background color |

### Corporate Brand Propagation & User Appearance Hierarchy

The **Primary Color** and **Secondary Color** configured here form the authoritative corporate palette for the entire organization:
- **Automatic User Inheritance (`useCorporateColors: true`)**: By default, all newly provisioned user accounts, extension portals, and administrative sessions inherit these corporate brand colors automatically.
- **Dynamic Synchronization**: Whenever an administrator updates and saves the tenant's brand colors in this module, the new palette propagates immediately in real-time to all users operating with corporate color synchronization enabled.
- **The "Corporate Brand" Preset Slot**: Within the **Appearance > Colors** tab of every user account across the PBX, SBC, BSS, Switchboard, and User Portal, these colors populate **Slot 1 ("Corporate Brand / Marca Corporativa")** with an active status badge.
- **Ergonomic Autonomy without Brand Compromise**: Individual operators may select alternative ergonomic presets or custom hues for specialized lighting environments (which sets their personal `useCorporateColors` flag to `false`), but they can realign with the corporate identity at any time with a single click on the Corporate Brand card. Corporate logos, favicons, login designs, and legal watermarks remain strictly protected and can only be altered by administrators within this module.

### Logos & Icons

| Asset | Light Mode | Dark Mode | Size |
|-------|------------|-----------|------|
| **Desktop Logo** | ✓ | ✓ | 200x200px+ |
| **Mobile Logo** | ✓ | ✓ | 512x512px |
| **Favicon** | ✓ | ✓ | 32x32px |

### Login Design

| Field | Description |
|-------|-------------|
| **Background Color** | Page background |
| **Font Color** | Text color |
| **Form Background** | Login form background |
| **Submit Button** | Button color |
| **Add-ons Menu** | Menu accent |
| **Background Image** | Optional image |
| **Login Logo** | Login-specific logo |

---

## 5. Settings Reference

### Recommended Image Sizes

| Asset | Size | Format |
|-------|------|--------|
| Desktop Logo | 200x200px+ | PNG, SVG |
| Mobile Logo | 512x512px | PNG |
| Favicon | 32x32px or 16x16px | ICO, PNG |
| Background | 1920x1080px | JPG, PNG |

### Color Format

| Format | Example | Use |
|--------|---------|-----|
| Hex 6-digit | #3B82F6 | Solid colors |
| Hex 8-digit | #3B82F680 | With alpha |

### Alpha Values

| Alpha | Hex | Transparency |
|-------|-----|--------------|
| 100% | FF | Solid |
| 80% | CC | Slight |
| 50% | 80 | Half |
| 30% | 4D | Very transparent |

---

## 6. Common Scenarios & Examples

### Scenario 1: Basic Branding

1. Configure Branding for tenant
2. Set Application Name
3. Upload light mode logo
4. Set Primary Color
5. Save

### Scenario 2: Full White-Label

1. Configure Branding
2. Upload all logos (light/dark)
3. Upload mobile logos
4. Upload favicons
5. Set all colors
6. Customize login page
7. Upload login background
8. Save

### Scenario 3: Login Page Customization

1. Open Login Design section
2. Set background color
3. Upload background image
4. Set form background with alpha
5. Set button color
6. Upload login logo
7. Save

### Scenario 4: Dark Mode Support

1. Upload light mode logo
2. Upload dark mode logo (inverted/light colors)
3. Upload both favicon versions
4. Save
5. Interface switches automatically

---

## Model Context Protocol (MCP) AI Integration

The Ring2All PBX platform provides Model Context Protocol (MCP) tools for programmatic inspection of white-label branding configurations.

### MCP Tools Reference

| Tool Name | Operation | Description | Risk Level |
|-----------|-----------|-------------|------------|
| `get_branding_settings` | Read | Retrieves white-label branding parameters (brand name, theme colors, logos, favicon) for the active tenant. | Low |

### JSON Schema Definitions

#### `get_branding_settings`
```json
{
  "name": "get_branding_settings",
  "description": "Retrieves white-label branding parameters (company brand name, theme colors, logo URLs, favicon) for the active tenant.",
  "parameters": {
    "type": "object",
    "properties": {
      "tenant_id": {
        "type": "number",
        "description": "Optional numeric tenant identifier (defaults to active tenant)"
      }
    }
  }
}
```

### Natural Language Prompt Examples

#### English
- *"What brand name and primary theme color are configured for this tenant?"*
- *"Check the desktop light and dark logo URLs configured for the active organization."*
- *"Show the white-label copyright text displayed on the login page footer."*

#### Spanish
- *"¿Cuál es el nombre de marca y color primario configurado para esta empresa?"*
- *"Muestra los enlaces de los logos para modo claro y oscuro del tenant activo."*
- *"Consulta el mensaje de bienvenida y pie de página de la marca blanca."*

### Enterprise Safeguards & Guardrails
1. **Multi-Tenant Isolation**: Tenant administrators can only query branding parameters associated with their own `tenant_id`.
2. **Safe Fallbacks**: If custom tenant branding has not been configured, the tool automatically provides standard platform fallback assets.

---

## 7. Limitations & Important Notes

### Technical Notes

> [!NOTE]
> **Per-Tenant**: Each tenant has separate branding.

> [!NOTE]
> **Cache**: Changes may require cache clear.

> [!WARNING]
> **Image Quality**: Use high-resolution images.

### Best Practices

1. **Consistent Colors**: Match corporate palette
2. **Both Themes**: Provide light and dark variants
3. **Proper Sizes**: Follow recommended dimensions
4. **Test Logos**: Verify on different backgrounds
5. **Mobile-First**: Ensure mobile logos are clear

### Image Guidelines

| Guideline | Recommendation |
|-----------|----------------|
| Format | PNG for transparency |
| Background | Transparent preferred |
| Quality | High resolution |
| Size | At least recommended |

---

## 8. Troubleshooting Tips

### Common Issues

| Symptom | Possible Cause | Solution |
|---------|---------------|----------|
| Logo not showing | Upload failed | Re-upload |
| Colors wrong | Cache | Clear browser cache |
| Blurry logo | Too small | Use larger image |
| Dark mode broken | Missing dark logo | Upload dark variant |

### Verify Active Branding Configuration

1. **Administrative Portal Verification**: Navigate to **Admin > System Settings > Branding** and confirm the preview swatches and asset thumbnails display the expected tenant configuration.
2. **User Appearance Confirmation**: Access **User Avatar > Appearance > Colors** to verify that Slot 1 displays the updated corporate colors with the **Corporate Brand** badge active.
3. **Login Portal Validation**: Open a private/incognito browser window and navigate to the tenant login URL to confirm the updated logo, wallpaper, and welcome messages render cleanly.

### Clear Cache

1. Browser: Ctrl+Shift+R (hard refresh)
2. Application: Clear app cache
3. CDN: Invalidate if applicable

---

## 9. Glossary

| Term | Definition |
|------|------------|
| **Branding** | Visual identity customization |
| **White-Label** | Remove platform identity |
| **Favicon** | Browser tab icon |
| **Alpha** | Transparency value |
| **PWA** | Progressive Web App |

---

*Documentation last updated: January 2026*