Design sign in pages and brand experience

When users sign up or sign in to your product, they land on pages generated by Kinde. You can update the look of these pages to match your brand.

You also have the option to bring your own page design to the authentication experience. See Custom sign-up and sign-in pages.

Setting global brand elements

Link to this section

To ensure consistency across pages, Kinde gives you global brand options so that when you change the look on one page, the changes are automatically applied to all other pages.

Use the following procedures to make design changes to suit your brand.

Set a light or dark theme

Link to this section

1. In Kinde, go to Design > Global > Brand.
2. Set the Theme: Light, Dark, or User preference. If you select user preference, make sure you choose a brand color scheme for both experiences. See below.
3. Select Save.

You can change the light and dark theme settings for your organizations as well.

Add your company logo

Link to this section

1. In Kinde, go to Design > Global > Brand.

2. In the Logo section, upload your company logo. Make sure images are less than 1MB, are PNG, JPEG, or GIF.

   The logo will be automatically linked to the Redirect URL set for your business, or the application homepage URL set up for each application. If you are using tracking, the URL will also reflect that the user clicked out of the sign up/sign in screen, so you can distinguish this action from successful sign ins.

3. Select Save.

Change the language and name order on sign up pages

Link to this section

You first need to enable the language you want in the global language settings.

1. In Kinde, go to Design.
2. Choose a sign up page. Sign up or Request access.
3. Select the language from the selector in the top right and then select Save.

For some languages, such as Hungarian and Japanese, this also switches the fields to be last name, then first name - which is the Eastern naming order.

Add favicons for web browsers

Link to this section

Favicons are small icons that appear on browser tabs. To add them to Kinde, they must measure 48x48px (or multiples of, such as 96x96).

1. In Kinde, go to Design > Global > Brand.
2. In the Favicon section:
   1. Add one as SVG format (so it works in most browsers).
   2. Add one as a Fallback PNG for other browsers, such as Safari.
3. Select Save.

To change the favicon of an organization, see Apply unique branding for an organization.

Set brand color scheme

Link to this section

Your selections will be inherited across all pages and for all organizations, unless you set overrides in an organization.

1. In Kinde, go to Design > Global > Brand.
2. Select settings and colors for Pages, Cards, Buttons, Input fields, and Links. Be sure to set a light and dark version of each if you want your brand colours to appear in both modes.
3. Select Save.
4. To preview pages, select a page type from the left menu.

To set the brand color scheme of an organization, see Apply unique branding for an organization.

Customize user-facing pages

Link to this section

After you’ve set the global brand, view how it looks on individual pages, and make additional changes. You can further customize:

• sign in page - what a user sees each time they sign in to their account
• sign up page - what a user sees when they first sign up to your business
• confirm sign in page (if using passwordless authentication) - where a user enters the passwordless email code each time they sign in.
• Confirm sign up page (if using passwordless authentication) - where a user enters the passwordless email code the first time they sign up.
• Emails - for when you send email from the company.
• Subscription page - the sign up page for new subscribers (if you use this).

To customize pages

Link to this section

1. Select the page you want to view or edit from the left menu.

2. On the preview screen, select Edit.

3. Depending on the kind of page you are viewing, you can edit, the background image, page layout, content, and more.

4. Select Save to preview and apply changes.

   If the background image you choose appears cut off or too short in the preview even after you hit Save, it could be a CSS bug. Check how it looks in your live or test environment, where it should be fine. Let us know if you’re having issues.

Other cusomizations you might want to apply

Link to this section

• Change the language that appears
• Use your own domain instead of Kinde’s
• Manage the authentication experience for users
• Add a marketing consent checkbox to the sign up page