Branding

Make the login experience match your brand with custom logos, colors, and styling.

Logo

Upload your organization's logo to display on login pages.

Requirements:

• Format: PNG, SVG, or JPEG
• Size: Minimum 200x200px
• Max file size: 2MB

Displayed on:

• Login page
• Signup page
• Email templates
• Consent screens

Colors

Primary Color

Used for buttons, links, and interactive elements.

--primary-color: #4F46E5; /* Indigo */

Background

Choose between:

• Solid color
• Gradient
• Background image

--background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Login Page

Layout Options

Custom CSS

For advanced customization:

.login-container {
  font-family: 'Inter', sans-serif;
}
 
.login-button {
  border-radius: 8px;
  font-weight: 600;
}

Email Templates

Customize transactional emails:

Available Templates

Template Variables

{{user.name}} - User's display name
{{user.email}} - User's email
{{organization.name}} - Organization name
{{action_url}} - Link URL
{{expires_in}} - Link expiration time

Example

<h1>Welcome to {{organization.name}}</h1>
<p>Hi {{user.name}},</p>
<p>Click below to verify your email:</p>
<a href="{{action_url}}">Verify Email</a>
<p>This link expires in {{expires_in}}.</p>

SMS Templates

For SMS-based authentication:

Your {{organization.name}} verification code is: {{code}}

Expires in 10 minutes.

Preview

Always preview your branding before publishing:

1. Go to Branding → Preview
2. Test login flow
3. Check email templates
4. Verify mobile responsiveness

Next Steps

• Custom Domains - Use your own domain
• Branding Guide - Customize all branding elements
• Tenant Settings - Authentication policies