Branding

Customize your authentication UI with logo, colors, title, and slogan to match your brand identity.

What the Branding Panel Does

Customize your authentication UI with logo, colors, title, and slogan to match your brand identity on authentication pages.

Panel features:

• Upload logo (SVG format only, max 2MB)
• Set title and slogan
• Customize colors (background, primary, primary hover)

Prerequisites

• SVG logo file (max 2MB)
• Brand color codes (HEX format)

Opening the Branding Panel

1. Log in to Transcodes Console 
2. Open your project
3. Locate the Authentication Kit Cluster
4. Click the sparkles icon (✨) labeled “Branding”
5. The panel opens on the right side

The Branding panel appears on the right with a purple “Branding” accordion section.

Customizing Your Brand

The Branding panel contains fields for customizing your authentication page appearance.

The panel shows:

• Logo: Upload button, “SVG format only, max 2MB”
• Title: “Your application display name” (example: “Transcodes”)
• Slogan: “A catchy slogan for your authentication page” (example: “Enterprise-Grade Security, Startup-Speed Simplicity”)
• Background Color: Color picker with HEX value (example: “#121212”)
• Primary Color: Color picker with HEX value (example: “#7b61ff”)
• Primary Color (Hover): Color picker with HEX value (example: “#7b61ff”)
• Save Branding Settings button

1. Upload Logo

To upload your logo:

1. Click the CHANGE LOGO button
2. Select an SVG file from your computer (max 2MB)
3. The logo appears immediately in the preview

2. Set Title

To set title:

1. Locate the Title text field
2. Enter your application name
3. Example: “Transcodes” or “MyApp”

3. Set Slogan

To set slogan:

1. Locate the Slogan text field
2. Enter your tagline
3. Example: “Enterprise-Grade Security, Startup-Speed Simplicity”

4. Choose Background Color

To set background color:

1. Locate the Background Color section
2. Click the color picker or enter a HEX code
3. Example: #121212 (dark) or #ffffff (white)

5. Choose Primary Color

To set primary color:

1. Locate the Primary Color section
2. Click the color picker or enter a HEX code
3. Example: #7b61ff (purple)

6. Choose Primary Hover Color

To set hover color:

1. Locate the Primary Color Hover section
2. Click the color picker or enter a HEX code
3. Example: #0056b3 (15-20% darker than primary)

7. Save Changes

To save:

1. Click Save Branding Settings button at the bottom
2. Wait for confirmation message
3. Changes take effect immediately

What to do next?

After customizing your branding:

1. Track user engagement with your branded auth experience
2. Configure RP ID and service URLs
3. Follow Integration Guide to implement authentication
4. Ensure secure implementation