Affinidi Login Button Styleguide

This document provides the recommended way of displaying the Affinidi Login button on your website or application.

Affinidi Login Buttons

You can copy the HTML and CSS code snippet to render the Affinidi Login button, including their state on your website or application.

Light Interface

Small Button

Small button to be used primarily for all interfaces with a light background. Restricted use on mobile screens and areas with limited space.

Medium Button

Medium button to be used primarily for all interfaces with a light background and with screen width up to 1727px.

Large Button

Large button to be used primarily for all interfaces with a light background and a screen width of 1728px and larger.

Dark Interface

Small Button

Small button to be used primarily for all interfaces with a light background. Restricted use on mobile screens and areas with limited space.

Medium Button

Medium button to be used primarily for all interfaces with a light background and with screen width up to 1727px.

Large Button

Large button to be used primarily for all interfaces with a light background and a screen width of 1728px and larger.

Affinidi Login Button Adaptions

If you need to adapt the Affinidi Login button to match your website or application design, adhere to the following guidelines.

Size

You can scale the size of the button based on different devices and screen sizes, but you must preserve the aspect ratio of the Affinidi logo. Additionally, you can change the font size based on the screen width:

  • Screen width of up to 1727px, the font size is 16px.

  • Screen width with 1728px and larger, the font size is 18px.

Text

It should be clear to the user that they are signing in or signing up for your app with their Affinidi Vault. The button label change is limited to the following text:

  • Affinidi Login
  • Log in with Affinidi
  • Sign in with Affinidi

Color

The button must always include the standard color of the Affinidi logo that is the black and white for light theme and black and blue for dark theme. The disabled state of the button must be the standard white color of the Affinidi logo.

Font

The button font is Figtree from Google Font, with a font weight of 600.


<style type="text/css">

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,600;1,600&display=swap');

.affinidi-login {
    font-family: 'Figtree', sans-serif;
    flex-grow: 0;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
}
</style>

Corner Radius

Depending on the customer’s button designs and requirements, the corner-radius can be adapted to match the existing button design. With a minimum of 0px corner-radius (border-radius: 0px;) and up to a maximum corner-radius of 12px (border-radius: 12px;).

Affinidi Logo on Affinidi Login Button

Regardless of the text and button sizes, you can’t change the size of the Affinidi logo. It must be the standard colour except for the disabled state for all supported interfaces.