Theming

The widgets come with a default style that you can use, but you will likely want to customize the look and feel to match your website. The widgets use CSS Custom Properties to allow you to customize the design. You can override the default values by setting CSS Custom Properties in a style tag:

<!-- Example based on Go Fjords theme -->
<style>
  :root {
    --bw-color-brand1-lightest: #ffe6e6;
    --bw-color-brand1-lighter: #feb4b4;
    --bw-color-brand1-key: #fd8383;
    --bw-color-brand1-darker: #fc4f4f;

    --bw-color-brand2-lightest: #eae6ff;
    --bw-color-brand2-lighter: #5635fd;
    --bw-color-brand2-key: #15017c;
    --bw-color-brand2-darker: #090132;
  }
</style>

Deprecation notice

The theming system is currently being reworked, and the old theming variables will be deprecated. We are currently working on a more cohesive design system for the widgets based on best practices for UX/ixD. This means new CSS variables will be introduced, and the old ones will eventually not be supported. For new Blend customers we recommend using the new variables. For existing customers we recommend migrating to the new variables as soon as possible. We will attempt to keep the old variables working for as long as possible, but we cannot guarantee that they will work forever. This document only describes the new variables and will be updated as the new variables and concepts are introduced.

Theme categories

We have divided the theming variables into different categories to make it easier to understand how they are used.

Theme colors

Before theming you should read the color palette pdf to get an overview of the color design system. The color wcag pdf can be used to understand the requiredcontrast between colors.

Brand and neutral colors

We define two sets of brand colors and a range of neutral colors. Each color set has a scale of darker and lighter colors to accomodate for different use cases. The brand colors are used to highlight important information and add call to action elements. The neutral colors are used for text and buttons to provide a consistent look and feel.

Figma rendering of an example theme using the above colors from our Go Fjords customer:

Variables

A theme should specify at least the brand colors to be used:

--bw-color-brand1-lightest: #ffe6e6;
--bw-color-brand1-lighter: #feb4b4;
--bw-color-brand1-key: #fd8383;
--bw-color-brand1-darker: #fc4f4f;

--bw-color-brand2-lightest: #eae6ff;
--bw-color-brand2-lighter: #5635fd;
--bw-color-brand2-key: #15017c;
--bw-color-brand2-darker: #090132;

You may also want to override the neutral colors:

--bw-color-neutral-dark: #202124;
--bw-color-neutral-medium: #6c6f7a;
--bw-color-neutral-light: #d6d8db;
--bw-color-neutral-background: #f1f2f3;
--bw-color-neutral-background-white: #ffffff;

The brand colors will occassionally be used as background color for a widget, e.g. brand 1 for the search bar widget. In this case the labels and text will need to use a color with enough contrast to be readable. It will default to white but you can override contrast colors for both brand colors if needed:

--bw-color-brand1-contrast: #fff;
--bw-color-brand2-contrast: #fff;

Semantic colors

You may want to override the semantic colors:

--bw-color-additional: #97e7d3;

--bw-color-semantic-success-lighter: #d9f2d9;
--bw-color-semantic-error-lighter: #ffcccc;
--bw-color-semantic-warning-lighter: #ffecb3;
--bw-color-semantic-info-lighter: #d9ebf2;
--bw-color-semantic-focus: #007acc;
--bw-color-semantic-links: #1a1aff;

--bw-color-semantic-success-darker: #2d862d;
--bw-color-semantic-error-darker: #cc0000;
--bw-color-semantic-warning-darker: #b35900;
--bw-color-semantic-info-darker: #3b73ab;

Typography

The widgets inherit the font family used in the page where they are embedded. This helps ensures the widgets look more or less consistent with the rest of the page. You can leave the font family as is or override it with a specific font family if you wish by setting the --bw-font-family variable:

<style>
  :root {
    --bw-font-family: 'Roboto', sans-serif;
  }
</style>

When doing so, it’s important that you provide the font in your HTML document.

Font sizes, line heights, letter spacings, etc.

We have implemented a set of font sizes, line heights, letter spacings, etc. that are used in the widgets. These are defined using CSS variables and available in desktop and mobile versions. The default values should work well for most cases, but you can override them if you must.

Figma illustration of the H1 font size for desktop and mobile respectively

You can see the entire typography system in typography pdf.

Variables

--bw-font-h1-font-size: 60px;
--bw-font-h1-line-height: 110%;
--bw-font-h1-letter-spacing: 0.4px;
--bw-font-h1-weight: var(--bw-font-weight-bold);

--bw-font-h2-font-size: 44px;
--bw-font-h2-line-height: 120%;
--bw-font-h2-letter-spacing: 0.4%;
--bw-font-h2-weight: var(--bw-font-weight-bold);

--bw-font-h3-font-size: 28px;
--bw-font-h3-line-height: 120%;
--bw-font-h3-letter-spacing: 0.4%;
--bw-font-h3-weight: var(--bw-font-weight-bold);

--bw-font-h4-font-size: 28px;
--bw-font-h4-line-height: 120%;
--bw-font-h4-letter-spacing: 0.2%;
--bw-font-h4-weight: var(--bw-font-weight-regular);

--bw-font-body-large-font-size: 20px;
--bw-font-body-large-line-height: 150%;
--bw-font-body-large-letter-spacing: 0;
--bw-font-body-large-weight: var(--bw-font-weight-regular);

--bw-font-body-bold-font-size: 18px;
--bw-font-body-bold-line-height: 150%;
--bw-font-body-bold-letter-spacing: 0.2%;
--bw-font-body-bold-weight: var(--bw-font-weight-bold);

--bw-font-body-font-size: 18px;
--bw-font-body-line-height: 150%;
--bw-font-body-letter-spacing: 0;
--bw-font-body-weight: var(--bw-font-weight-regular);

--bw-font-body-link-size: 18px;
--bw-font-body-link-line-height: 150%;
--bw-font-body-link-letter-spacing: 0;
--bw-font-body-link-weight: var(--bw-font-weight-regular);

--bw-font-body-small-bold-font-size: 16px;
--bw-font-body-small-bold-line-height: 150%;
--bw-font-body-small-bold-letter-spacing: 0.4px;
--bw-font-body-small-bold-weight: var(--bw-font-weight-bold);

--bw-font-body-small-font-size: 16px;
--bw-font-body-small-line-height: 150%;
--bw-font-body-small-letter-spacing: 0;
--bw-font-body-small-weight: var(--bw-font-weight-regular);

--bw-font-body-link-small-size: 16px;
--bw-font-body-link-small-line-height: 150%;
--bw-font-body-link-small-letter-spacing: 0.4%;
--bw-font-body-link-small-weight: var(--bw-font-weight-regular);

--bw-font-button-font-size: 18px;
--bw-font-button-line-height: 150%;
--bw-font-button-letter-spacing: 0.4%;
--bw-font-button-weight: var(--bw-font-weight-semibold);

--bw-font-caption-font-size: 14px;
--bw-font-caption-line-height: 150%;
--bw-font-caption-letter-spacing: 0.2px;
--bw-font-caption-weight: var(--bw-font-weight-regular);

Font weight levels

The typography uses three levels of weights which can be overrided with the variables below. Changing these will alter the weight everywhere it’s used.

--bw-font-weight-regular: 400;
--bw-font-weight-semibold: 600;
--bw-font-weight-bold: 700;

Spacing

We use a 4 grid system for spacing. This means that all spacing values are divisible by 4.

Figma illustration

Variables

/** Spacing 4 grid system **/
--bw-space-0: 0;
--bw-space-4: 4px;
--bw-space-8: 8px;
--bw-space-16: 16px;
--bw-space-24: 24px;
--bw-space-32: 32px;
--bw-space-40: 40px;
--bw-space-48: 48px;
--bw-space-64: 64px;
--bw-space-96: 96px;

Border radius

The widget design system uses rounded borders on some elements. These follow a border radius scale which is defined using CSS variables.

Figma illustration

Variables

The border radius variables are not yet complete, but they will be added soon.