# Affinidi Login button styleguide

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

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

## Affinidi Login buttons (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.

     

Default state
     

Hover state
     

Pressed/Active state
     

Loading state
     

Disabled state

##### HTML Code

```HTML

     

```

##### CSS Code

```CSS
.affinidi-login-s {
    border: 0;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
    object-fit: contain;
    border-radius: 48px;
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #1d58fc;
}

.affinidi-login-s:hover {
    background-color: #4a79fd;
    filter: contrast(90%);
}

.affinidi-login-s:active {
    background-color: #1d58fc;
}

.affinidi-login-s-loading {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #4a79fd;
    filter: contrast(90%);
}

.affinidi-login-s:disabled {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #e6e6e9;
}
```

### Medium button

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

    Affinidi Login

Default state
    Affinidi Login

Hover state
    Affinidi Login

Pressed/Active state
     

Loading state
    Affinidi Login

Disabled state

##### HTML Code

```HTML

    Affinidi Login

```

##### CSS Code

```CSS
.affinidi-login-m {
    border: 0;
    width: 188px;
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    object-fit: contain;
    border-radius: 48px;
    background: url('data:image/svg+xml,') no-repeat 20px center;
    background-color: #1d58fc;
    color: #ffffff;
    padding-left: 60px;

    flex-grow: 0;
    font-family: Figtree;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.6px;
}

.affinidi-login-m:hover {
    background-color: #4a79fd;
    filter: contrast(90%);
}

.affinidi-login-m:active {
    background-color: #1d58fc;
}

.affinidi-login-m-loading {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #4a79fd;
    filter: contrast(90%);
}

.affinidi-login-m:disabled {
    background: url('data:image/svg+xml,') no-repeat 20px center;
    background-color: #e6e6e9;
}
```

### 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

Default state
    Affinidi Login

Hover state
    Affinidi Login

Pressed/Active state
     

Loading state
    Affinidi Login

Disabled state

##### HTML Code

```HTML

    Affinidi Login

```

##### CSS Code

```CSS
.affinidi-login-l {
    border: 0;
    width: 224px;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    object-fit: contain;
    border-radius: 48px;
    background: url('data:image/svg+xml,') no-repeat 25px center;
    background-color: #1d58fc;
    color: #ffffff;
    padding-left: 60px;

    flex-grow: 0;
    font-family: Figtree;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: 0.6px;
}

.affinidi-login-l:hover {
    background-color: #4a79fd;
    filter: contrast(90%);
}

.affinidi-login-l:active {
    background-color: #1d58fc;
}

.affinidi-login-l-loading {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #4a79fd;
    filter: contrast(90%);
}

.affinidi-login-l:disabled {
    background: url('data:image/svg+xml,') no-repeat 25px center;
    background-color: #e6e6e9;
}
```

## Affinidi Login buttons (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.

     

Default state
     

Hover state
     

Pressed/Active state
     

Loading state
     

Disabled state

##### HTML Code

```HTML

     

```

##### CSS Code

```CSS
.affinidi-login-dark-s {
    border: 0;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
    object-fit: contain;
    border-radius: 48px;
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #ffffff;
}

.affinidi-login-dark-s:hover {
    background-color: #e6e6e9;
}

.affinidi-login-dark-s:active {
    background-color: #cdced3;
}

.affinidi-login-dark-s-loading {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #e6e6e9;
}

.affinidi-login-dark-s:disabled {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #e6e6e9;
}
```

### Medium button

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

    Affinidi Login

Default state
    Affinidi Login

Hover state
    Affinidi Login

Pressed/Active state
     

Loading state
    Affinidi Login

Disabled state

##### HTML Code

```HTML

    Affinidi Login

```

##### CSS Code

```CSS
.affinidi-login-dark-m {
    border: 0;
    width: 188px;
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    object-fit: contain;
    border-radius: 48px;
    background: url('data:image/svg+xml,') no-repeat 20px center;
    background-color: #ffffff;
    color: #000;
    padding-left: 60px;

    flex-grow: 0;
    font-family: Figtree;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0.6px;
}

.affinidi-login-dark-m:hover {
    background-color: #e6e6e9;
}

.affinidi-login-dark-m:active {
    background-color: #cdced3;
}

.affinidi-login-dark-m-loading {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #e6e6e9;
}

.affinidi-login-dark-m:disabled {
    background: url('data:image/svg+xml,') no-repeat 20px center;
    background-color: #e6e6e9;
    color: #ffffff;
}
```

### 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

Default state
    Affinidi Login

Hover state
    Affinidi Login

Pressed/Active state
     

Loading state
    Affinidi Login

Disabled state

##### HTML Code

```HTML

    Affinidi Login

```

##### CSS Code

```CSS
.affinidi-login-dark-l {
    border: 0;
    width: 224px;
    height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    object-fit: contain;
    border-radius: 48px;
    background: url('data:image/svg+xml,') no-repeat 25px center;
    background-color: #ffffff;
    color: #000;
    padding-left: 60px;

    flex-grow: 0;
    font-family: Figtree;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.22;
    letter-spacing: 0.6px;
}

.affinidi-login-dark-l:hover {
    background-color: #e6e6e9;
}

.affinidi-login-dark-l:active {
    background-color: #cdced3;
}

.affinidi-login-dark-l-loading {
    background: url('data:image/svg+xml,') no-repeat center;
    background-color: #e6e6e9;
}

.affinidi-login-dark-l:disabled {
    background: url('data:image/svg+xml,') no-repeat 25px center;
    background-color: #e6e6e9;
    color: #ffffff;
}
```

## Affinidi Login button adaptation

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](https://fonts.google.com/specimen/Figtree) from Google Font, with a font weight of 600.

```HTML

```

### 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

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.