Setup

The Web SDK is built with web components and styles them using a styles file containing CSS custom properties and font face definitions. The Web SDK automatically loads the file each time it is triggered.

In order to display the UI correctly, you can follow these steps:

Create the styles file following the guidance below
Share the file with your implementation manager along with your logo in SVG format.

📘
To update the file at any point, contact your Rabobank implementation manager.

Fonts

Font families

This tells the browser which font families to use, e.g. Arial, Roboto. Fonts must be already available to the page, either because they are mobile or imported by the rest of the page. The SDK doesn't import fonts. Fonts can be licensed under a specific domain. You are responsible for acquiring or managing licenses for all fonts you use.

🚧
Fonts must be publicly accessible (e.g., via Google Fonts ) or provided as a direct link to the font files. The link must allow CORS access on the domains where the Web SDK runs.

Custom properties:

Property	Description
`--fl-font-family`	The body text font family. Default: `Roboto`, system-ui, sans-serif
`--fl-font-family-header`	The font to use for headings and titles. Default: `Roboto Slab`, serif
`--fl-font-family-monospace`	A monospace font to use in client input fields. Tip: Set this to ensure inputs don't change width as the client types in them due to characters having different widths. Default: `Roboto Mono`, monospace

Example code:

fl-flow-verify, fl-flow-onboarding {
  --fl-font-family: 'Roboto', system-ui, sans-serif;
  --fl-font-family-header: 'Roboto Slab', serif;
  --fl-font-family-monospace: 'Roboto Mono', monospace;
}

Example screens:

Default font-family on the left, custom font-family on the right — Left: Default font family | Right: Custom

Font face rules

To tell the browser how to render fonts in different situations, you need to define the @font-face rules, e.g. style, weight, and the location of the font resource.

The URLs in the @font-face rules must be accessible by all relevant environments, e.g. sandbox, development, and production. You are responsible for handling any CORS exceptions to the files for these domains.

Fourthline's development domain is http://localhost:3333. To let us check how fonts render during implementation, add our domain to your exception list.

You can either define @font-face rules via:

A third-party font service, e.g. Google Fonts
Inlining

Third-party service

Before setting the font families, add an import statement with a URL to a font asset containing font-face definitions managed by a third-party service. The service maintains the font.

Example code:

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&family=Roboto+Mono:wght@400;500&family=Roboto:wght@400;500&display=swap');

fl-flow-verify, fl-flow-onboarding {
  --fl-font-family: 'Roboto', system-ui, sans-serif;
  --fl-font-family-monospace: 'Roboto Mono', monospace;
  --fl-font-family-header: 'Roboto Slab', serif;
}

Inlining

After setting the font families, copy and paste the content of a third-party font asset into your SDK styles file. This reduces the number of requests in the critical path, but means the font is no longer maintained by the third party. You must host it, maintain it, and share the location URL with your implementation manager so it can be used from our domain.

Custom properties:

Property	Description
`font-family`	The font family the `font-face` rule applies to.
`font-style`	The font style, e.g. `normal`, `italic`.
`font-weight`	The size of the font.
`src`	The local source in case a font of the same name is already available to the browser.

Example code:

Defines the My serif font, My sans-serif font, and My monospace font families
Sets a regular weight (400) and a semibold weight (600) for each family
Provides 2 different formats for each family to maximize browser compatibility and their locations

fl-flow-verify, fl-flow-onboarding {
--fl-font-family: 'Roboto', system-ui, sans-serif;
--fl-font-family-monospace: 'Roboto Mono', monospace;
--fl-font-family-header: 'Roboto Slab', serif;
}
@font-face {
  font-family: "My serif font";
  font-style: normal;
  font-weight: 400;
  src:
    local('My serif font'),
    url(".../my-serif-font-regular.woff2") format("woff2"),
    url(".../my-serif-font-regular.woff") format("woff");
}
@font-face {
  font-family: "My serif font";
  font-style: normal;
  font-weight: 600;
  src:
    local('My serif font'),
    url(".../my-serif-font-semibold.woff2") format("woff2"),
    url(".../my-serif-font-semibold.woff") format("woff");
}
@font-face {
  font-family: "My sans-serif font";
  font-style: normal;
  font-weight: 400;
  src:
    local('My sans-serif font'),
    url(".../my-sans-serif-font-regular.woff2") format("woff2"),
    url(".../my-sans-serif-font-regular.woff") format("woff");
}
@font-face {
  font-family: "My sans-serif font";
  font-style: normal;
  font-weight: 600;
  src:
    local('My sans-serif font'),
    url(".../my-sans-serif-font-semibold.woff2") format("woff2"),
    url(".../my-sans-serif-font-semibold.woff") format("woff");
}
@font-face {
  font-family: "My monospace font";
  font-style: normal;
  font-weight: 400;
  src:
    local('My monospace font'),
    url(".../my-monospace-font-regular.woff2") format("woff2"),
    url(".../my-monospace-font-regular.woff") format("woff");
}
@font-face {
  font-family: "My monospace font";
  font-style: normal;
  font-weight: 600;
  src:
    local('My monospace font'),
    url(".../my-monospace-font-semibold.woff2") format("woff2"),
    url(".../my-monospace-font-semibold.woff") format("woff");
}

Example screens:

Default font-size on the left, custom font-size on the right — Left: Default font size | Right: Custom size

Colors

You can define colors in any acceptable CSS way. For defined base colors, you can leave them or replace them with another shade of the same color.

Custom properties:

Property	Description
`--fl-background-color`	The default background color. Default: `--fl-color-light`
`--fl-border-color`	The border color for buttons, hints, and QR components. Default: rgba(0, 0, 0, 0.1)
`--fl-color-primary`	The color alias used for illustrations and highlighted elements, e.g. buttons, inputs. Notes: • Illustrations and animations use the same primary color as the dominant color. • Set to a base color or use a new color. Default: var(--fl-color-info)
`--fl-color-accent`	The color alias used for choice elements, e.g. tabs, radio buttons. Note: Set to a base color or use a new color. Default: var(--fl-color-success)
`--fl-color-danger`	The color for warnings about invalid client input. Default: # E02020 red
`--fl-color-dark`	The default heading color. Default: # 333333
`--fl-color-dark-light`	The default text color. Default: # 666666
`--fl-color-dark-lighter`	The default alternative and less emphasis text color. Default: # 999999
`--fl-color-hint`	The color for hints. Default: # FFF9D5 yellow
`--fl-color-info`	The primary color for informative highlighting. Default: # 0091FF blue
`--fl-color-light`	The default background color. Default: # FFFFFF
`--fl-color-success`	The color for successful events or actions. Default: # 00E062 green
`--fl-color-warning`	The color for errors. Default: # FA6400 orange
`--fl-decorative-line-color`	The color of decorative lines. Default: `--fl-border-color`
`--fl-heading-color`	The color for headings. Default: `--fl-color-dark`
`--fl-hint-color`	The text color for hints. Default: `--fl-heading-color`
`--fl-hint-background-color`	The background color for hints. Default: `--fl-color-hint`
`--fl-illustration-color`	The illustration color. Default: `--fl-color-primary`
`--fl-illustration-background-color`	The illustration background color. Default: rgba(0, 0, 0, 0.05);
`--fl-illustration-success-color`	The illustration success color override. Default: `--fl-color-success`
`--fl-label-color`	The color for form field labels. Default: `--fl-color-gray`
`--fl-link-color`	The color for links. Default: `--fl-color-info`
`--fl-permission-background-color`	The color of the background screen for permissions requests. Note: The background of illustrations is always a darker shade of the page background. Default: `--fl-color-primary`
`--fl-permission-color`	The text color for permissions requests. Default: `--fl-color-light`
`--fl-qr-border`	The color of the QR code border. Default: `--fl-color-info`
`--fl-strong-color`	The strong tag color. Default: `--fl-heading-color`
`--fl-tab-color`	The color for the redirect options tabs. Default: `--fl-heading-color`
`--fl-text-color`	The color for text. Default: `--fl-color-dark-light`
`--fl-text-light-color`	The color for text with less emphasis. Default: `--fl-color-dark-lighter`
`--fl-title-color`	The color for titles. Default: `--fl-heading-color`
`--fl-warning-face-color`	The skin color of the warning face on error screens. Default: `--fl-color-warning`
`--fl-warning-face-eyes-color`	The color of the eyes and mouth of the warning face on error screens. Default: `--fl-color-light`

Example code:

{...}  
  --fl-color-primary: var(--my-primary-color);
  --fl-color-info: #0091FF;     /* blue */
  --fl-color-success: #00E062;  /* green */
  --fl-color-hint: #FFF9D5;     /* yellow */
  --fl-color-warning: #FA6400;  /* orange */
  --fl-color-danger: #E02020;   /* red */
  --fl-color-primary: var(--fl-color-info);
  --fl-color-accent: var(--fl-color-success);
  --fl-permission-background-color: green;

Example screens:

Default accent color on the left, custom accent color on the right — Illustration colors

Default permission background color on the left, custom color on the right — Input background colors

Themes

You can set light mode and dark mode themes for the UI, and are responsible for adding the theme class and hosting the styles.

Example code:

.dark-theme fl-flow-onboarding {
  /* Add your custom CSS variables for dark theme */
}

.light-theme fl-flow-onboarding {
  /* Add your custom CSS variables for light theme */
}

Layout

Border radiuses

The border radius sets how round or square corners of elements are.. You must set acceptable border radius values.

Custom properties:

Property	Description
`--fl-button-border-radius`	The border radius for buttons.
`--fl-hint-border-radius`	The border radius for user hints displayed to the client.
`--fl-illustration-border-radius`	The border radius for illustrations.
`--fl-input-border-radius`	The border radius for client input fields. Default: 4px
`--fl-main-border-radius`	The border radius for the whole screen.
`--fl-qr-border-radius`	The border radius for the redirect QR code. Default: 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:

Property	Description
`--fl-button-border-radius`	The border radius for buttons. Default: 4px
`--fl-button-disabled-color`	The button text color in disabled state. Default: `--fl-button-primary-color`
`--fl-button-disabled-background-color`	The button background color in disabled state. Default: `--fl-button-primary-background-color`
`--fl-button-disabled-border-color`	The button border color in disabled state. Default: `--fl-button-primary-border-color`
`--fl-button-disabled-opacity`	The button opacity in disabled state. Default: 0.5
`--fl-button-primary-color`	The primary button text color. Default: `--fl-color-light`
`--fl-button-primary-background-color`	The primary button background color. Default: `--fl-color-primary`
`--fl-button-primary-border-color`	The primary button border color. Default: `--fl-border-color`
`--fl-button-secondary-color`	The secondary button text color. Default: `--fl-color-primary`
`--fl-button-secondary-background-color`	The secondary button background color. Default: `--fl-color-light`
`--fl-button-secondary-border-color`	The secondary button border color. Default: `--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:

Property	Description
`--fl-illustration-color`	The illustration color. Default: `--fl-color-primary`
`--fl-illustration-background-color`	The illustration background color. Default: rgba(0, 0, 0, 0.05);
`--fl-illustration-success-color`	The illustration success color override. Default: `--fl-color-success`
`--fl-illustration-border-radius`	The border radius of the illustration. Default: 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:

Property	Description
`--fl-input-background-color`	The input background color. Default: `--fl-background-color`
`--fl-input-border-color`	The input border color. Default: `--fl-color-gray`
`--fl-input-border-radius`	The input border radius. Default: 6px
`--fl-input-color`	The input text color. Default: `--fl-heading-color`
`--fl-input-danger-color`	The text color for input danger hints. Default: `--fl-color-danger`
`--fl-input-disabled-background-color`	The background color for disabled inputs. Default: # F2F2F2
`--fl-input-focus-shadow`	The box shadow for focal inputs. Default: 0 0 4px 0 var(--fl-color-info)
`--fl-input-font-weight`	The font weight for the input text. Default: `--fl-font-weight-bold`
`--fl-input-info-color`	The text color for input information hints. Default: `--fl-color-info`
`--fl-input-placeholder-color`	The placeholder text color for inputs. Default: `--fl-text-light-color`
`--fl-input-selected-background-color`	The background color for inputs when selected. Default: `--fl-input-background-color`
`--fl-input-selected-color`	The color for inputs when selected. Default: `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:

Property	Description
`--fl-link-decoration`	The text decoration for links. Default: Underline
`--fl-link-font-weight`	The font weight for links. Default: `--fl-font-weight-regular`
`--fl-footer-link-color`	The color of the links in the footer. Default: `--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 maximum bounding box size is 120 x 50 px.
The logo is flexible, as long as it fits within the 120×50 px bounding box.

Padding

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

You must set an acceptable padding value.

Example code:

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