How to Use Numa's Branding Controls - Admin Guide

Modified on Sun, 21 Dec, 2025 at 9:38 PM

Overview

The Branding Controls in Numa allow administrators to customize the visual appearance of their tenant, including colors, branding assets, and overall theme. All changes publish immediately after saving, giving you real-time control over your platform's appearance.

Getting Started - Enabling Branding Controls

Before you can customize your branding, you need to enable the feature:

Navigate to Admin Settings from your dashboard
Select the Branding section from the left sidebar
Look for the Enable Branding button at the top of the page
Click to activate branding controls for your tenant

Once enabled, you'll see the full Branding Controls panel where you can manage all visual customizations.

Understanding the Interface

Version History & Important Publishing Warning

Critical Notice: When you click Save Changes or Save as New Version, your new branding is immediately published live to ALL users across your Numa tenant.

Strategy for Safe Testing:
If you want to experiment with colors before making them permanent:

Make your color changes and use Save as New Version
Give it a descriptive name (e.g., "New Brand Test - December 2025")
Your changes are now live, but you've preserved this version
Immediately click "Reset to Default" to revert back to original branding
Your named version is safely saved and can be applied later when you're ready to go live

The Version History section provides four key actions to manage your branding changes:

Reset to Default: Reverts all branding to Numa's default theme
Discard Changes: Cancels any unsaved modifications
Save Changes: Applies and publishes your current modifications immediately
Save as New Version: Creates a named version and publishes it live immediately

Using the Live Preview Panel

On the right side of the branding interface, you'll see a live preview panel that shows exactly how your changes will appear to users:

Real-time updates: As you modify colors in the left panel, the preview updates instantly
Interface examples: Shows actual buttons, text, backgrounds, and UI elements with your new colors applied
Interactive elements: See how hover states and different components look
Before making changes: Always check this panel before saving to ensure colors work well together

Pro Tip: Make extensive use of this preview panel - it's your best tool for seeing exactly what users will experience.

Finding Your Company's HEX Color Codes

Before you start customizing, you'll need your brand's HEX color codes. Here are the best ways to find them:

Option 1: Check Your Brand Guidelines

Look for your company's brand style guide or brand guidelines document
These documents typically list exact HEX codes for all approved colors
Check your marketing folders, company intranet, or shared brand asset libraries

Option 2: Ask Your Team

Marketing team: They usually maintain official brand color specifications
Web developer/webmaster: They have access to your website's exact color codes
Graphic designer: Often keeps a master file of approved brand colors

Option 3: Use Color Picker Tools

Browser extensions: Install tools like "ColorZilla" for Chrome or Firefox
Online color pickers: Use websites like coolors.co, Adobe Color, or HTML Color Codes
From your website: Use a color picker tool directly on your existing website or logo
Design software: Photoshop, Canva, Figma, and similar tools have built-in color pickers

Option 4: Extract from Existing Materials

Upload your logo to an online color palette generator (like imagecolorpicker.com)
Use color extraction tools to pull HEX codes from your marketing materials
Always verify extracted colors match your official brand standards

Customizing Colors

Brand Palette

Configure your primary brand colors to match your company identity:

Color Type	Purpose	Default Value
PRIMARY	Main brand color used for buttons, links, and highlights	`#8e50a7`
PRIMARY CONTRAST	Text color that appears on primary backgrounds	`#ffffff`
HOVER	Color displayed when users hover over interactive elements	`#744188`

Surface & Background

Control the overall appearance of your interface:

Color Type	Purpose	Default Value
SURFACE	Background color for cards, panels, and content areas	`#f4eff5`

Step-by-Step Customization Process

1. Planning Your Brand Colors

Before making changes:

Enable branding controls using the button at the top of the page
Gather your HEX codes using the methods above
Ensure colors meet accessibility standards (sufficient contrast ratios)
Test colors align with your brand guidelines
Consider how colors will appear across different screen types

2. Making Changes and Using the Preview

Click on any color field in the Brand Palette or Surface & Background sections
Enter your desired HEX color code (e.g., #8e50a7)
Immediately check the preview panel on the right to see the effect
Test different combinations using the live preview
Ensure good contrast between text and background colors
Repeat for all color fields you want to customize

3. Publishing Strategy

For Safe Testing (Recommended):

Make your changes and watch the preview panel
When satisfied, click Save as New Version
Name it descriptively (e.g., "Holiday Branding 2025" or "New Corporate Colors")
Important: This immediately publishes your changes to all users
If you're just testing, immediately click Reset to Default
Your named version is preserved for future use

For Immediate Implementation:

Once completely satisfied with preview, click Save Changes
Changes publish immediately across your Numa tenant

4. Managing Versions

Save as New Version: Creates a snapshot with a custom name before or after making changes
Reset to Default: Quickly return to Numa's original branding
Discard Changes: Cancel modifications without saving

Best Practices

Color Selection

Use the preview panel extensively: This is your best tool for seeing real results
Contrast: Ensure sufficient contrast between text and background colors
Consistency: Use colors that align with your existing brand identity
Accessibility: Consider colorblind users and WCAG guidelines

Safe Testing Strategy

Always preview first: Use the right-hand panel before saving
Use descriptive version names: "Q4 Campaign Colors" vs "Version 2"
Test with the reset strategy: Save named versions, then reset if not ready
Plan your timing: Implement changes when user impact is minimal

Version Management

Save versions before major changes
Use descriptive naming conventions
Keep notes on what each version represents

Troubleshooting

Common Issues

Changes not appearing: Refresh your browser and clear cache
Preview panel not updating: Try refreshing the admin settings page
Color contrast problems: Use online contrast checkers to verify accessibility
Need to revert quickly: Use "Reset to Default" for immediate rollback

Getting Help

If you encounter issues with branding controls, contact Arcanum AI support at customersuccess@arcanum.ai

Next Steps

After setting up your branding:

Test across devices: Verify appearance on desktop, tablet, and mobile
Gather team feedback: Ensure the new branding works well for all users
Review other Admin Settings sections (Users, Chat Defaults, Agents, Integrations)
Document your final colors: Keep a record of your HEX codes for future reference
Plan for future branding updates or seasonal changes