Implement user login experience

A key component of implementing Immutable Passport is the front-end user experience. This guide details implementation of the sign in button which aligns to our brand guidelines.

Sections

Default sign-in button
Our standard assets for building custom buttons
Alongside other authentication solutions

Immutable Passport improves your user app experience to easily sign up or sign in easily into your app without needing you to provide a separate signup flow. We have tried and tested placements to ensure your app authentication experience is optimised by using the following assets and widgets.

Key components that comprise your Immutable Passport front-end integration

Guidance on sign-in button
Guidance on sign-in alongside other authentication solutions

We have the following standard styles for the signup and signin button. Sign in button placement should be below the text instructing the user to sign in and large enough to be easily identified.

The text on your button should say “Sign in with Immutable” with a number of format options detailed below. You can download these SVG files and use as default buttons.

When to use	In dark mode situations	In light mode situations
Default sign up and sign in experiences
In smaller spaces less than 300px width, you can use the logo lockup in button only however button should be proceded with the words "Sign in with"	Sign in with	Sign in with

Our standard assets for building custom buttons

If you wish to create the above buttons in code, you should use the following official logos and styling guides.

Sizing	32px	64px	96px	128px
SVG files

The styling guides are in the below table:

Theme	Example
Dark		Fill: #F3F3F3 Height: 48px Width: 252px Radius: 48px Font: #131313 Roboto Medium
Light		Fill: #131313 Height: 48px Width: 252px Radius: 48px Font: #E1E1E1 Roboto Medium

Alongside other authentication solutions

By exception, and upon review by our team, you may be able to modify the above default with your default style. We allow this based on your need to create multi-auth implementations. In these circumstances your Immutable Passport button implementation should be on par with the other wallet and authentication solutions you're providing.