Skip to content

Color

We want to be perceived as a warm and caring brand, as well as being functional and reliable.

By pairing and intersecting these attributes, we create a simple and unique color expression aligned with our "Simply Personal" concept.

Each color has a purpose and adds emotional value to our visual expression.

Edit this section

Overview

Our palette consists of one primary color: BL 1, BLUE. It is the color of our logotype and expresses loyalty, trust and professionalism. The BL 1, BLUE is a functional, eye-catching color used for interaction and activation, e.g. used for our primary buttons and links.

However, BL 1, BLUE should not be over used. Rather, it should be used to highlight key information.

Secondary colors are used to create a warm canvas for all types of content. Our beige colors, (BE 1, DARK BEIGEBE 5, LIGHTEST BEIGE), are used as background colors, which together can be combined and used as dividers for layout purposes. Our brown colors, (BR 1, BROWN and LB 1, LIGHT BROWN), are mostly used for text and buttons.

To amplify the vitality and warmth of our palette, we use complementary colors that are used for content that needs color variation, e.g. for coloring infographics and styling in imagery as accent colors (props and clothing).

Edit this section

Palette

The If color palette reflects the tonality of the brand: uncomplicated, warm and personal. It fulfills specific functions and manages content effectively.

Our primary blue color, (BL 1, BLUE), is used in important graphic elements, such as the logotype, for interactive and activation UI elements such as primary buttons, hyperlinks, etc. On printed material, it can be used, for example, for highlighting key texts. The darker version (BL 1 DARK, DARK BLUE) is a shade of our primary blue color, and only used to support our primary blue color for states.

Our beige secondary colors, (BE), are used for backgrounds. Brown, (BR 1, BROWN), is used for text, web icons, and secondary buttons. However, for copy in text-heavy documents such as core communication and office printed documents, you should use black instead of brown. Light brown, (LB 1, LIGHT BROWN), is used for inactive web icons and/or buttons.

Complementary colors, red (CR), yellow (CY), green (CG), and blue (CB) are used for infographics and info boxes. They are designed to complement our primary and secondary colors.

  1. BL 1.
  2. BE 1.
    BE 2.
    BE 3.
    BE 4.
    BE 5.
    BR 1.
    LB 1.
  3. CR 1.
    CR 2.
    CR 3.
    CY 1.
    CY 2.
    CY 3.
    CG 1.
    CG 2.
    CG 3.
    CB 1.
    CB 2.
    CB 3.
  1. Accent (primary) - Logotype, activation
  2. Backgrounds (secondary) - Backgrounds and text colors
  3. Infographics (complementary) - Infographics, statistics etc.

Accent color

Megaman helmet
Bl 1, blue
#0054f0
rgb(0,84,240)
$color-accent-blue

The primary color, BL 1, BLUE, is the color of our logotype and expresses loyalty, trust and professionalism. The BL 1, BLUE is a functional, eye-catching color used for interaction and activation, e.g. used for our primary buttons and links.

However, BL 1, BLUE should not be over used. Rather, it should be used to highlight key information.

Always use BL 1, BLUE for activation and interaction.

Background colors

Doctor
Be 5, lightest beige
#faf9f7
rgb(250,249,247)
$color-background-lightest-beige
The speed of light
Be 4, lighter beige
#f6f3f0
rgb(246,243,240)
$color-background-lighter-beige
Valhallan blizzard
Be 3, light beige
#f1ece8
rgb(241,236,232)
$color-background-light-beige
Desert storm
Be 2, beige
#ede6e1
rgb(237,230,225)
$color-background-beige
Stone harbour
Be 1, dark beige
#e8e0d9
rgb(232,224,217)
$color-background-dark-beige

Secondary colors are used to create a warm canvas for all types of content. Our beige colors, (BE 1, DARK BEIGEBE 5, LIGHTEST BEIGE), are used as background colors, which together can be combined and used as dividers for layout purposes. Our brown colors, (BR 1, BROWN and LB 1, LIGHT BROWN), are mostly used for text and buttons.

Principles

Branding Information

B1

Hero image backgroundStudio image background

B3

Product category

B5

Informative partInfographics Long text

Usage

Hemförsäkring
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Use the background color palette to divide space.
  • BE 1, DARK BEIGE for hero sections/mood boards
  • BE 3, LIGHT BEIGE or BE 5, LIGHTEST BEIGE for product cross links where studio images are used (open pages primarily) and other blocks for emphasizing sections of a page (all applications)
  • BE 5, LIGHTEST BEIGE for content heavy sections and to be used instead of white.
  • Certain components can have either BE 5, LIGHTEST BEIGE or BE 3, LIGHT BEIGE as a background color (for instance cross link areas, forms, etc, but should be used in moderation. Focus on as "light" as possible and use BE 5, LIGHTEST BEIGE mostly, but to maintain readability of content).

Text colors

Doctor
Be 5, lightest beige
#faf9f7
rgb(250,249,247)
$color-text-lightest-beige
Fozzie bear
Lb 1, light brown
#6e625e
rgb(110,98,94)
$color-text-light-brown
Black slug
Br 1, brown
#331e11
rgb(51,30,17)
$color-text-brown

Brown, (BR 1, BROWN), is used for text, web icons, and secondary buttons. However, for copy in text-heavy documents such as core communication and office printed documents, you should use black instead of brown. Light brown, (LB 1, LIGHT BROWN), is used for inactive web icons and/or buttons.

active inactive
Always use BR 1, BROWN and LB 1, LIGHT BROWN on text. Exceptions include web links and text on dark backgrounds.
active inactive
Never use black text or black tint in digital communication.

Accessibility

For every background color, we have found a corresponding AA compliant text color as the default text color. We use a ratio threshold of 5. We recommend this tool to check your color contrasts: https://webaim.org/resources/contrastchecker/.

To see the code for this, you can head over to the color component page.

BE 5, LIGHTEST BEIGE:

Contrast Ratio 5.65:1

Small text AA AAA

check AA AAA
Contrast Ratio 14.95:1

Small text AA AAA

check AA AAA

BR 1, BROWN:

Contrast Ratio 12.06:1

Small text AA AAA

check AA AAA
Contrast Ratio 12.74:1

Small text AA AAA

check AA AAA
Contrast Ratio 13.41:1

Small text AA AAA

check AA AAA
Contrast Ratio 14.23:1

Small text AA AAA

check AA AAA
Contrast Ratio 14.95:1

Small text AA AAA

check AA AAA

LB 1, LIGHT BROWN

Contrast Ratio 4.51:1

Small text AA AAA

check AA AAA
Contrast Ratio 4.76:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.01:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.31:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.58:1

Small text AA AAA

check AA AAA

Status colors

Virtual boy
Red, red
#bb320c
rgb(187, 50, 12)
$color-status-red
Camarone
Green, green
#217331
rgb(33, 115, 49)
$color-status-green

The GREEN color is used for success, safe, right. The RED color is used for error, danger, wrong.

These colors are only used for small notifications, warnings, feedback to the user about something that has happened. Like a new claim, new message in inbox, error message etc.

Accessibility

GREEN:

Contrast Ratio 4.51:1

Small text AA AAA

check AA AAA
Contrast Ratio 4.77:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.02:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.33:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.61:1

Small text AA AAA

check AA AAA

RED:

Contrast Ratio 4.5:1

Small text AA AAA

check AA AAA
Contrast Ratio 4.75:1

Small text AA AAA

check AA AAA
Contrast Ratio 5:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.31:1

Small text AA AAA

check AA AAA
Contrast Ratio 5.58:1

Small text AA AAA

check AA AAA

Alert Banner colors

These colors are only used in notifications, and they are blended infographic and background colors. The colors are blended like this:

.color {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

The text color allowed to be used with this background colors is BR 1, BROWN.

The real color information is ommited. The color information to the notification colors are an approximation, and is only used for accessibility testing purposes.
Relax
Light blue
#b8d2d5
rgb(184, 210, 213) AA AAA
Dry Lichen
Light green
#c6d8ce
rgb(198, 216, 206) AA AAA
Hampton
Light Yellow
#e8d2a3
rgb(232, 210, 163) AA AAA
Cupcake Rose
Light red
#e8c8b3
rgb(232, 200, 179) AA AAA
Aquarelle Blue
Light Blue
#c0dee4
rgb(192, 222, 228) AA AAA
Dew Not Disturb
Light green
#cee3dd
rgb(206, 227, 221) AA AAA
Vinaigrette
Light yellow
#f1ddae
rgb(241, 221, 174) AA AAA
Maiden's Blush
Light red
#f1d3bf
rgb(241, 211, 191) AA AAA
Frosty Day
Light blue
#c7eaf3
rgb(199, 234, 243) AA AAA
Reduced Sky
Light green
#d5f0eb
rgb(213, 240, 235) AA AAA
Sand Diamond
Light yellow
#fae9ba
rgb(250, 233, 186) AA AAA
Peachade
Light red
#fadecb
rgb(250, 222, 203) AA AAA

Infographic colors

Musk deer
Cr 1, dark red
#805c5c
rgb(128, 92, 92)
$color-infographic-dark-red
Fresh salmon
Cr 2, red
#ff8569
rgb(255, 133, 105)
$color-infographic-red
Peach crayon
Cr 3, light red
#ffc9a6
rgb(255, 201, 166)
$color-infographic-light-red
Apple cinnamon
Cy 1, dark yellow
#b08759
rgb(176, 135, 89)
$color-infographic-dark-yellow
Go bananas
Cy 2, yellow
#fcc74f
rgb(252, 199, 79)
$color-infographic-yellow
Swedish yellow
Cy 3, light yellow
#ffe082
rgb(255, 224, 130)
$color-infographic-light-yellow
Little league
Cg 1, dark green
#6b9994
rgb(107, 153, 148)
$color-infographic-dark-green
Tranquil teal
Cg 2, green
#87c7ba
rgb(135, 199, 186)
$color-infographic-green
Spearmint water
Cg 3, light green
#b5ede8
rgb(181, 237, 232)
$color-infographic-light-green
Vanity
Cb 1, dark blue
#5392b2
rgb(83, 146, 178)
$color-infographic-dark-blue
Blue martini
Cb 2, blue
#4cb0d3
rgb(76, 176, 211)
$color-infographic-blue
Gas giant
Cb 3, light blue
#97e2f7
rgb(151, 226, 247)
$color-infographic-light-blue

Complementary colors, red (CR), yellow (CY), green (CG), and blue (CB) are used for infographics and info boxes. They are designed to complement our primary and secondary colors.

Hemförsäkring
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Never use infographic colors as background color.
Infographic colors are not used for activation and interaction.

Interaction colors

Bracing blue
Bl 1 dark, dark blue
#004080
rgb(0, 64, 128)
$color-interaction-dark-blue
Wiener schnitzel
Bl 1 complement, orange
#f09c00
rgb(240, 156, 0)
$color-interaction-orange

Interaction colors are only for used with interactions like hover and active.

Edit this section

Combinations

This chart shows the permitted color combinations of text color on our brand colors.

All If colors are tested according to WCAG guidelines for legibility (AA only) in digital environments.

BL 1. Text
(BE 5)
BE 1.. Text
(BL 1)
BE 1.. Text
(BR 1)
BE 1.. Text
(LB 1)
BE 2. Text
(BL 1)
BE 2. Text
(BR 1)
BE 2. Text
(LB 1)
BE 3. Text
(BL 1)
BE 3. Text
(BR 1)
BE 3. Text
(LB 1)
BE 4. Text
(BL 1)
BE 4. Text
(BR 1)
BE 4. Text
(LB 1)
BE 5. Text
(BL 1)
BE 5. Text
(BR 1)
BE 5. Text
(LB 1)
BR 1. Text
(BE 5)
LB 1. Text
(BE 5)
CR 1. Text
(BE 5)
CR 2. Text
(BR 1)
CR 3. Text
(BR 1)
CY 1. Text
(BE 5)
CY 2. Text
(BR 1)
CY 3. Text
(BR 1)
CG 1. Text
(BE 5)
CG 2. Text
(BR 1)
CG 3. Text
(BR 1)
CB 1. Text
(BE 5)
CB 2. Text
(BR 1)
CB 3. Text
(BR 1)
Edit this section

Contact us