Design sign in pages and brand experience

Link to this section

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

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.

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. And 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.

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

Talk to us

If you can’t find what you’re looking for in our help center — email our team

Contact support