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, including adding a logo, changing colors, and content.

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.

You can then customize certain other elements (like content) on each individual page.

People who customize pages also like to use their own domain instead of Kinde’s.

Set the global brand theme

Link to this section
  1. In Kinde, go to Design > Global > Brand.

  2. Set the global brand theme. including logo, colours, etc. Your selections will be inherited across all pages and for all organizations, unless you set overrides in an organization.

  3. Upload your company logo. Make sure images are less than 1MB, are PNG, JPEG, or GIF, and at least 316px.

    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.

  4. Set the border radius for the card element, which is the main sign-in part of the screen.

  5. Select Background color and drag the color wheel to the color you like, or enter your brand hex codes in the palette.

  6. Make color selections for Button color, Button text color, and Link color.

  7. Set the button border radius.

  8. Set the input field border radius.

  9. Select Save.

Customize individual 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 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. See also
  • Subscription page - the sign up page for new subscribers (if you use this).

To customize pages

Link to this section

The page components that you can change, depend upon the page type you are editing.

  1. Select the page you want to view or edit.

  2. If you want, add a background image to Sign in, Sign up and Request Access pages. Choose an image that reflects your brand and then set the display view and layout.

    Note: The background image you choose might appear cut off or too short in the preview even after you hit Save (it’s a weird CSS bug we’re working on). However, if you look at the change in your live or test environment, it should be fine.

  3. If you are editing sign up and sign in pages:

    1. Scroll down to the Layout section and choose the position of the sign up / sign in panel.
    2. In the Email block position field, select whether the Email field appears above or below social sign in options. This won’t do anything unless you have social authentication enabled.
  4. In the Content section, update the wording for Title, Subtitle, and Button text.

  5. Select Save to preview and apply changes.

Talk to us

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

Contact us