Visual Branding Editor

Overview

The Visual Branding Editor allows organizations to customize their branding with logo, colors, typography, and custom CSS - all with auto-import capabilities for zero-friction setup.

Route: /portal/settings/branding
Role Required: Organization Admin
Status: ✅ Production Ready (2025-12-27)

Features

🎨 Auto-Import (Zero Account Required)

Logo Fetch: Enter domain → Auto-fetch logo from Clearbit API (free, unlimited)
Color Extraction: Analyzes logo → Suggests 5 dominant colors automatically
No API Keys: Works immediately with no signup or authentication

🎨 Color Customization

Light Mode:

Primary Color
Accent Color
Background Color
Button Color
Text Color

Dark Mode:

Primary Color (auto-lightened from light mode)
Accent Color (auto-lightened from light mode)
Background Color

✍️ Typography

Font Picker: 10 Google Fonts available
Live Preview: See font changes in real-time
Auto-Loading: Fonts loaded from Google Fonts CDN

Available Fonts:

Inter (Default)
Roboto
Open Sans
Lato
Montserrat
Poppins
Source Sans Pro
Raleway
Ubuntu
Nunito

🔧 Advanced Customization

Custom CSS: Add custom styles for fine-tuned control
Live Preview: See all changes in real-time before saving

How to Use

1. Auto-Import Your Brand

Navigate to Settings → Branding
Your company domain is auto-filled from organization name
Click "Auto-Import"
Logo appears + colors extracted automatically

2. Customize Colors

Click any extracted color to use it
OR use the color pickers for manual selection
Switch to Dark Mode tab to customize dark theme
Preview updates in real-time

3. Select Font

Open the Font Family dropdown
Select from 10 Google Fonts
Preview shows your selection immediately

4. (Optional) Add Custom CSS

Use the Custom CSS field for advanced styling
Add any CSS rules (e.g., .login-box { border-radius: 12px; })

5. Save

Click "Save All Settings"
Branding is applied instantly to your organization

What Gets Saved

All branding settings are stored in your organization metadata:

{
  "metadata": {
    "branding": {
      "logo": "https://logo.clearbit.com/yourcompany.com",
      "colors": {
        "light": {
          "primary": "#4F46E5",
          "accent": "#10B981",
          "background": "#FFFFFF",
          "button": "#4F46E5",
          "text": "#1F2937"
        },
        "dark": {
          "primary": "#818CF8",
          "accent": "#34D399",
          "background": "#1F2937"
        }
      },
      "typography": {
        "fontFamily": "Inter"
      },
      "customCSS": ".login-box { border-radius: 12px; }",
      "updatedAt": "2025-12-27T..."
    }
  }
}

Competitive Advantages

vs Auth0/Clerk/WorkOS:

⭐ Auto-Import Logo - Nobody else has this (30-second setup vs 5-10 minutes)
⭐ Color Extraction - Automatically suggests colors from your logo
⭐ Zero Friction - No API keys, no accounts, no signup
✅ Full Parity - Matches all competitor features (colors, fonts, custom CSS)
✅ Dark Mode - With auto-generated color variants

Technical Details

FAQ

Q: What if auto-import doesn't find my logo?
A: Use the manual logo URL input at the bottom of the page. Paste any public image URL.

Q: Can I upload a custom logo file?
A: Not yet - currently supports URLs only. File upload coming in future release.

Q: How do dark mode colors work?
A: Dark mode colors are auto-generated (20% lighter) when you import/select light mode colors. You can manually override them in the Dark Mode tab.

Q: Will my branding apply to login pages?
A: Yes, branding applies to all organization-scoped pages and login flows.

Q: Can I reset to default?
A: Click "Start Over" to clear all settings and begin again.