System status

Web SDK UI Customization

Integrations guide

Suggest Edits

This page sets out how to customize the Web SDK UI to match the look and feel of your brand.

Setup
Fonts
Colors
Layout

Layout

Border radiuses

The border radius sets how round or square corners of elements are.

You must set acceptable border radius values. See Mozilla Developer – border-radius.

Custom properties:

PropertyDescriptionDefault
--fl-button-border-radiusThe border radius for buttons.
--fl-hint-border-radiusThe border radius for user hints displayed to the client.
--fl-illustration-border-radiusThe border radius for illustrations.
--fl-input-border-radiusThe border radius for client input fields.4px
--fl-main-border-radiusThe border radius for the whole screen.
--fl-qr-border-radiusThe border radius for the redirect QR code.4px

Example code:

  --fl-main-border-radius: 4px;
  --fl-button-border-radius: 4px;
  --fl-illustration-border-radius: 4px;
  --fl-hint-border-radius: 4px;
  --fl-qr-border-radius: 4px;
  --fl-input-border-radius: 6px;

Example screens:

Default border-radius on the left, custom border-radius on the right

Left: Default border radius | Right: Custom

Buttons

  • Primary buttons use the --fl-color-primary as the background color with white text.
  • Secondary buttons use white as the background color and --fl-color-primary for text.
  • The disabled state sets how buttons and inputs appear when inactive or un-clickable.

Custom properties:

PropertyDescriptionDefault
--fl-button-border-radiusThe border radius for buttons.4px
--fl-button-disabled-colorThe button text color in disabled state.--fl-button-primary-color
--fl-button-disabled-background-colorThe button background color in disabled state.--fl-button-primary-background-color
--fl-button-disabled-border-colorThe button border color in disabled state.--fl-button-primary-border-color
--fl-button-disabled-opacityThe button opacity in disabled state.0.5
--fl-button-primary-colorThe primary button text color.--fl-color-light
--fl-button-primary-background-colorThe primary button background color.--fl-color-primary
--fl-button-primary-border-colorThe primary button border color.--fl-border-color
--fl-button-secondary-colorThe secondary button text color.--fl-color-primary
--fl-button-secondary-background-colorThe secondary button background color.--fl-color-light
--fl-button-secondary-border-colorThe secondary button border color.--fl-border-color

Example code:

{...}
  --fl-button-disabled-color: var(--fl-color-primary);
  --fl-button-disabled-background-color: var(--fl-background-color);
  --fl-button-disabled-border-color: var(--fl-color-primary);
  --fl-button-disabled-opacity: 1;

Example screens:

Default styles on the left, custom ghosted of a disabled button on the right.

Left: Default button | Right: Ghost button

Illustrations

The introduction screen for each flow contains an illustration.

Custom properties:

PropertyDescriptionDefault
--fl-illustration-colorThe illustration color.--fl-color-primary
--fl-illustration-background-colorThe illustration background color.rgba(0, 0, 0, 0.05);
--fl-illustration-success-colorThe illustration success color override.--fl-color-success
--fl-illustration-border-radiusThe border radius of the illustration.4px

Example screens:

Magenta-based color scheme and adjusted accent color

Left: Default illustration | Right: Custom

Inputs

Inputs are fields where the client enters information, e.g. name, address, contact details.

Custom properties:

PropertyDescriptionDefault
--fl-input-background-colorThe input background color.--fl-background-color
--fl-input-border-colorThe input border color.--fl-color-gray
--fl-input-border-radiusThe input border radius.6px
--fl-input-colorThe input text color.--fl-heading-color
--fl-input-danger-colorThe text color for input danger hints.--fl-color-danger
--fl-input-disabled-background-colorThe background color for disabled inputs.# F2F2F2
--fl-input-focus-shadowThe box shadow for focal inputs.0 0 4px 0 var(--fl-color-info)
--fl-input-font-weightThe font weight for the input text.--fl-font-weight-bold
--fl-input-info-colorThe text color for input information hints.--fl-color-info
--fl-input-placeholder-colorThe placeholder text color for inputs.--fl-text-light-color
--fl-input-selected-background-colorThe background color for inputs when selected.--fl-input-background-color
--fl-input-selected-colorThe color for inputs when selected.currentColor

Example code:

{...}
  --fl-input-selected-color: var(--fl-color-light);
  --fl-input-selected-background-color: var(--fl-color-dark);

Example screens:

Default styles on the left, custom background and color on the right.

Left: Default inputs | Right: Custom

Links

Links redirect the client to another screen.

Custom properties:

PropertyDescriptionDefault
--fl-link-decorationThe text decoration for links.Underline
--fl-link-font-weightThe font weight for links.--fl-font-weight-regular
--fl-footer-link-colorThe color of the links in the footer.--fl-text-color

Logos

Fourthline's logo always appears in the footer of every screen.

You can add your logo in the top-right corner of the following screens:

  • Introduction screens, e.g. for the Document module, Selfie module, Signature module
  • Generic and system permission error screens
  • Success screens

Send your logo in .svg format to your implementation manager along with the styles file:

  • The logo size must be 82 x 24 px.
  • The bounding box size is 120 x 24 px.
The logo is displayed on the top right corner

Fourthline logo

Padding

To set the padding of the main component, use the --fl-main-spacing property.

You must set an acceptable padding value. See Mozilla Developer – padding.

Example code:

{...}
  --fl-main-spacing: 40px 80px 50px;

Top of page

Updated about 1 month ago

Related pages