Configure UI branding


# Configure UI branding

You can customize the user interfaces (UIs) presented to your users during the login, sign-up, and account recovery flows according to the theming guidelines of your organization.

By branding these interfaces, users will get a familiar and consistent user experience.

See the complete list of UI branding options currently available in Asgardeo.

Asgardeo branding example

# Prerequisites

You need to have an organization in Asgardeo. Create an organization if you don’t have one.

# Update branding

Follow the steps given below to configure the branding preferences for your organization.

  1. On the Asgardeo console (opens new window), go to Develop > Branding.

    Asgardeo Console - Branding UI
  2. Update the UI branding options in the General, Design, and Advanced tabs.

    Note

    • If you leave any of the branding preferences empty, Asgardeo defaults will be used.
    • The real-time preview will show you a sample view as you update the values.
  3. Before you save your updates, check the Go Live toggle.

    Important

    If the toggle is already switched on, the changes you save are immediately published to your application flows.

  4. Save your updates.

# Publish branding

Once you are ready with your branding updates, use the Go Live toggle to go live with your updates.

Note that all subsequent branding changes that you save are immediately published if this toggle is switched on.

The email templates of the organization will be automatically updated according to your branding preferences if this toggle is switched on. See Branding email templates for more information.

Info

For free-tier subscriptions, the Powered by Asgardeo label will display on the Asgardeo-powered interfaces when branding is published.

# Disable branding

You can temporarily disable your branding preferences by switching off the Go Live toggle. Your branding updates will still be saved and you can choose to publish them again later.

When disabled, Asgardeo’s default branding will apply to the interfaces in your application's login, user registration, and account recovery flows.

# Revert branding

If you want to revert your branding preferences, scroll down to the Danger Zone and click Revert to default.

Warning

Note that this permanently removes all the branding options that you have saved and the Asgardeo defaults will immediately apply.

# Extend branding

When you go to Develop > Branding on the Asardeo console, you will see the list of branding preferences that are supported for your user interfaces by default.

If you require any of the extended branding capabilities (explained below), you can contact the Asgardeo team at [email protected] . Note that you need to send the request from an administrator account.

# UI branding preferences

Listed below are the branding preferences that you can use to customize the Asgardeo interfaces (UIs) presented to your users.

# General preferences

Listed below are general branding preferences you can apply to the interfaces.

Site Title The site title may appear in browser tabs, search engine results, social shares, etc. You can use any meaningful text here.
Copyright Text The copyright text is a short description that informs users about the copyright law protecting your applications.

In Asgardeo, the copyright text will appear on the footer of the login screens and on the footer of emails.
Contact Email This email address will appear on emails, error pages and, other pages where users would require support from the organization admin.

# Design preferences

Listed below are the design changes you can apply to the user registration and login interfaces.

# Layout variations

Select one of the available layouts for your login interfaces. Asgardeo uses the Centered layout by default.

# Theme variations

Select from either Dark or Light theme variations to modify the styling of your login screens. Asgardeo uses the Light theme by default.

# Theme preferences

The following design preferences apply to the theme you select. You can configure and save separate design preferences for each of the themes.

Images

You can configure the logo and favicon for the theme you selected.

Logo This is the logo that appears above the login box in login screens and in emails sent by the organization. Update the following values to set the logo:
  • URL: You can update the logo by specifying the URL of a hosted image.
  • Alt Text: The 'Alt text' or 'alternative text' is a short description of an image. This text is useful to make sense of the image when it can't be viewed for some reason. A descriptive alt text is always a good practice to improve accessibility.
Use an image that’s at least 600x600 pixels and less than 1MB in size for better performance.
Favicon Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks.

You can update the favicon by specifying the URL of a hosted image (of type png, ico, etc.).

Use an image with a square aspect ratio that’s at least 16x16 pixels in size for better results.

Important

Be sure that the hosted image you use will properly return Content-Type headers. Without these headers, the image will not correctly render and you will experience a 403 error. You can use static image hosting services to ensure these headers are properly returned.

Color Palette

This is the primary color palette of the login screens. Click the color swatch and apply colors that match your organization’s style guide.

Primary Color The color that appears dominantly in primary actions, anchor tags, emails, etc.

By default, Asgardeo uses an orange shade as the primary color for both Light and Dark themes
Secondary Color The color that appears in secondary actions and other emphasized content.

By default, Asgardeo uses a lighter gray shade as the secondary color.
Page

These are the basic design preferences you can update for login screens.

Background Color This is the main background color that appears on the login screens and the emails sent by the organization.

By default, Asgardeo uses a gray shade as the page's background color.
Font Color The font color of the text that appears on pages and emails.

By default, Asgardeo uses black as the font color.
Footer

Decide how you want the footer to look in the login screens by modifying the following attributes:

Border Color The color of the top border of the footer that appears on the login screens.

By default, Asgardeo uses a gray shade as the footer's border color.
Font Color The font color of the texts and links that appear on the footer.

By default, the page font color will be used until a value for this is defined.
Font

Use one of the following options to override the default font for the theme you selected.

# Use a web-safe font

Font Family The list of available web-safe fonts to select from.

By default, Asgardeo uses Montserrat as the font family.

# Import a font

Font Import URL Get the URL of a hosted font from the font service and add it here.

E.g., https://fonts.googleapis.com/css2?family=Poppins&display=swap
Font Family This is the font family corresponding to the font imported using the URL (specified in the Font Import URL field).

E.g., Poppins, Sans-serif
Headings

These preferences decide the look and feel of h1, h2, h3, h4, h5, and h6 elements on the login screens.

Font Color This is the font color of the headings that appear on the login screens.

By default, the page font color will be used until a value for this is defined.
Buttons

These preferences change the look and feel of buttons that appear on the login screens.

# Primary Button

Font Color This is the font color of the text inside the primary action buttons.

By default, Asgardeo uses white as the font color for primary buttons.
Border Radius This is the border radius of the primary action buttons.

By default, Asgardeo uses four pixels as the border-radius for primary buttons.

# Secondary Button

Font Color This is the font color of the text inside the secondary action buttons.

By default, Asgardeo uses a dark gray shade as the font color for secondary buttons.
Border Radius This is the border radius of the secondary action buttons.

By default, Asgardeo uses four pixels as the border-radius for secondary buttons.

# External Connection Button

These preferences change the look and feel of buttons used for linking external identity providers (Facebook, Google, etc.) from the login screens.

Background Color This is the background color for external-connection buttons.

By default, Asgardeo uses a light gray shade as the font color for external-connection buttons.
Font Color This is the font color of the text inside the external-connection buttons.

By default, Asgardeo uses a dark gray shade as the font color for external-connection buttons.
Border Radius This is the border radius of the external-connection buttons.

By default, Asgardeo uses four pixels as the border-radius for external-connection buttons.
Login Box

These preferences change how the login box appears on the screens.

Background Color This is the background color of the login box.

By default, Asgardeo uses white as the background color for the login box.
Font Color This is the font color of the text inside the login box.

By default, the page font color will be used until a value for this is defined.
Border Radius This is the border color of the login box.

By default, Asgardeo doesn’t have a border color for the login box.
Border Width This is the border width of the login box.

By default, Asgardeo uses one pixel as the border width for the login box.
Border Radius This is the border-radius of the login box.

By default, Asgardeo uses 12 pixels as the border-radius for the login box.
Inputs

These preferences change the look and feel of input fields, checkboxes, etc. on the login screens.

Background Color This is the background color of the inputs on the login screens.

By default, Asgardeo uses white as the background color for the inputs.
Font Color This is the font color of the inputs on the login screens.

By default, the page font color will be used until a value for this is defined.
Border Color This is the border color of the inputs on the login screens.

By default, Asgardeo uses a lighter gray shade as the border color of the inputs.
Border Width This is the border radius of the inputs on the login screens.

By default, Asgardeo uses four pixels as the border-radius for the login box.
Border Radius This is the border radius of the login box.

By default, Asgardeo uses 12 pixels as the border-radius for the login box.

# Input Labels

Font Color This is the font color of the input labels on the login screens.

By default, the page font color will be used until a value for this is defined.

# Advanced preferences

Listed below are some advanced branding preferences you can apply to the user registration and login interfaces.

Privacy Policy This is a link to a statement or a legal document that states how your organization collects, handles, and processes the data of your users and visitors.

Once you configure a valid URL, Asgardeo will show this on the footer of the login screens.
Terms of Service This is a link to an agreement that your users must agree to and abide by in order to use your organization's applications or other services.

Once you configure a valid URL, Asgardeo will show this on the footer of the login screens.
Cookie Policy This is a link to a document or a webpage with detailed information on all cookies used by your applications and the purpose of each of them.