Skip to content

Color13.10.5

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


$ npm i @if-design-system/color@13.10.5

Accessibility in typography

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/.

Below is the Stylus mixin we use to generate AA compliant text colors while generating background color classes.

$color-text-wcag-ratio = 5

IDS_COLOR_GetCorrectContrastColor($color)
  if(contrast($color, $color-text-lightest-beige).ratio > $color-text-wcag-ratio){
    color $color-text-lightest-beige
  } else if(contrast($color, $color-text-brown).ratio > $color-text-wcag-ratio){
    color $color-text-brown
  } else {
    color $color-text-lightest-beige
  }

And here is how we do it with a SCSS/SASS mixin:

@import 'sass-color-helpers/stylesheets/_color-helpers.scss';

$color-text-wcag-ratio: 5;

@mixin IDS_COLOR_GetCorrectContrastColor($backgroundColor) {
  $contrast1: ch-color-contrast($backgroundColor, $color-text-lightest-beige);
  $contrast2: ch-color-contrast($backgroundColor, $color-text-brown);

  @if $contrast1 > $color-text-wcag-ratio {
    color: $color-text-lightest-beige;
  } @else if $contrast2 > $color-text-wcag-ratio {
    color: $color-text-brown;
  } @else {
    color: $color-text-lightest-beige;
  }
}

And LESS:

@color-text-wcag-ratio: 5;

.ch-color-luminance-raw(@rgb) {
  @result: if((@rgb < 0.03928), @rgb / 12.92, pow((@rgb + 0.055) / 1.055, 2.4, 16));
}

.ch-color-luminance(@color) {
  @red: red(@color) / 255;
  @green: green(@color) / 255;
  @blue: blue(@color) / 255;

  @rgba-lum-raw-red: .ch-color-luminance-raw(@red) [ @result];
  @rgba-lum-raw-green: .ch-color-luminance-raw(@green) [ @result];
  @rgba-lum-raw-blue: .ch-color-luminance-raw(@blue) [ @result];

  @result: 0.2126 * @rgba-lum-raw-red + 0.7152 * @rgba-lum-raw-green + 0.0722 * @rgba-lum-raw-blue;
}

.ch-color-contrast(@color1, @color2) {
  @luminance1: .ch-color-luminance(@color1) [ @result] + 0.05;
  @luminance2: .ch-color-luminance(@color2) [ @result] + 0.05;
  @ratio1: @luminance1 / @luminance2;
  @ratio: if((@luminance2 > @luminance1), 1 / @ratio1, @ratio1);

  @result: round(@ratio * 10) / 10;
}

.IDS_COLOR_GetCorrectContrastColor(@backgroundColor) {
  @contrast1: .ch-color-contrast(@backgroundColor, @color-text-lightest-beige) [ @result];
  @contrast2: .ch-color-contrast(@backgroundColor, @color-text-brown) [ @result];

  .contrastColor() when (@contrast1 > @color-text-wcag-ratio) {
    color: @color-text-lightest-beige;
  }

  .contrastColor() when (@contrast2 > @color-text-wcag-ratio) {
    color: @color-text-brown;
  }

  .contrastColor() when (default()) {
    color: @color-text-lightest-beige;
  }

  .contrastColor();
}
Edit this section

Tokens

All of the tokens can be used as preprocessor variables

Base

Name Hex Rgb Example
$color-base-light-blue-10097e2f7
#97e2f7 rgb(151, 226, 247)
$color-base-light-blue-2004cb0d3
#4cb0d3 rgb(76, 176, 211)
$color-base-light-blue-3005392b2
#5392b2 rgb(83, 146, 178)
$color-base-blue-1000054f0
#0054f0 rgb(0,84,240)
$color-base-blue-200004080
#004080 rgb(0, 64, 128)
$color-base-orange-100f09c00
#f09c00 rgb(240, 156, 0)
$color-base-beige-100faf9f7
#faf9f7 rgb(250,249,247)
$color-base-beige-200f6f3f0
#f6f3f0 rgb(246,243,240)
$color-base-beige-300f1ece8
#f1ece8 rgb(241,236,232)
$color-base-beige-400ede6e1
#ede6e1 rgb(237,230,225)
$color-base-beige-500e8e0d9
#e8e0d9 rgb(232,224,217)
$color-base-pink-100ffc9a6
#ffc9a6 rgb(255, 201, 166)
$color-base-pink-200ff8569
#ff8569 rgb(255, 133, 105)
$color-base-pink-300805c5c
#805c5c rgb(128, 92, 92)
$color-base-green-100217331
#217331 rgb(33, 115, 49)
$color-base-red-100bb320c
#bb320c rgb(187, 50, 12)
$color-base-brown-1006e625e
#6e625e rgb(110,98,94)
$color-base-brown-200331e11
#331e11 rgb(51,30,17)
$color-base-teal-100b5ede8
#b5ede8 rgb(181, 237, 232)
$color-base-teal-20087c7ba
#87c7ba rgb(135, 199, 186)
$color-base-teal-3006b9994
#6b9994 rgb(107, 153, 148)
$color-base-yellow-100ffe082
#ffe082 rgb(255, 224, 130)
$color-base-yellow-200fcc74f
#fcc74f rgb(252, 199, 79)
$color-base-yellow-300b08759
#b08759 rgb(176, 135, 89)

Accent

Name Value Example
$color-accent-blue
#0054f0

Background

Name Value Example
$color-background-lightest-beige
#faf9f7
$color-background-lighter-beige
#f6f3f0
$color-background-light-beige
#f1ece8
$color-background-beige
#ede6e1
$color-background-dark-beige
#e8e0d9

Text

Name Value Example
$color-text-lightest-beige
#faf9f7
$color-text-light-brown
#6e625e
$color-text-brown
#331e11

Status

Name Value Example
$color-status-red
#bb320c
$color-status-green
#217331

Infographic

Name Value Example
$color-infographic-dark-red
#805c5c
$color-infographic-red
#ff8569
$color-infographic-light-red
#ffc9a6
$color-infographic-dark-yellow
#b08759
$color-infographic-yellow
#fcc74f
$color-infographic-light-yellow
#ffe082
$color-infographic-dark-green
#6b9994
$color-infographic-green
#87c7ba
$color-infographic-light-green
#b5ede8
$color-infographic-dark-blue
#5392b2
$color-infographic-blue
#4cb0d3
$color-infographic-light-blue
#97e2f7

Interaction

Name Value Example
$color-interaction-dark-blue
#004080
$color-interaction-orange
#f09c00

Cta

Name Value Example
$color-cta
#0054f0

Shadow

Name Value Example
$color-shadow-light
#6e625e
$color-shadow-dark
#331e11
Edit this section

Classnames

Here you will see the full reference of exposed classnames to be utilised as helper classes for your html styling.

NOTE!

These are not class helpers to be used freely. Follow our design guidelines on how to use the colors correctly.

Background-color class helpers Example
class="if color accent blue"
class="if color interaction dark-blue"
class="if color background dark-beige"
class="if color background beige"
class="if color background light-beige"
class="if color background lighter-beige"
class="if color background lightest-beige"
class="if color text lightest-beige"
class="if color text brown"
class="if color text light-brown"
class="if color infographic dark-red"
class="if color infographic red"
class="if color infographic light-red"
class="if color infographic dark-yellow"
class="if color infographic yellow"
class="if color infographic light-yellow"
class="if color infographic dark-green"
class="if color infographic green"
class="if color infographic light-green"
class="if color infographic dark-blue"
class="if color infographic blue"
class="if color infographic light-blue"
class="if color status green"
class="if color status red"
Edit this section

App development

For application development, we also expose tokens for native app development, like Android and IOS. We also expose tokens for JavaScript development.

JavaScript

We expose this file: @if-design-system/color/src/variables/js/variables.esm.js, in this format:

module.exports = {
  "color": {"background": {
      "lightest-beige": {
        "value": "#faf9f7",
        "filePath": "./src/tokens/background.json",
        "isSource": true,
        "original": {
          "value": "{color.base.beige.100.value}"
        },
        "name": "ColorBackgroundLightestBeige",
        "attributes": {
          "category": "color",
          "type": "background",
          "item": "lightest-beige"
        },
        "path": [
          "color",
          "background",
          "lightest-beige"
        ]
      },},}
}

This can be used like so:

import colors from '@if-design-system/color/src/variables/js/variables.module.js';

const myTitle = ({title}) => (<h1 style={{color: color.text.brown.value}})>{title}</h1>);

And we also expose this file: @if-design-system/color/src/variables/js/variables.esm.js, in this format:

export const ColorBaseGreen100 = "#217331";
export const ColorBaseRed100 = "#bb320c";
export const ColorBaseBrown100 = "#6e625e";
export const ColorBaseBrown200 = "#331e11";
export const ColorBaseTeal100 = "#b5ede8";

This can be used like so:

import { ColorTextBrown } from '@if-design-system/color/src/variables/js/variables.esm.js';

const myTitle = ({title}) => (<h1 style={{color: ColorTextBrown}})>{title}</h1>);

Android

For Android development, you might be interested in this file: @if-design-system/color/src/variables/android/colors.xml, in this format:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <color name="color_background_lightest_beige">#fffaf9f7</color>
  <color name="color_background_lighter_beige">#fff6f3f0</color>
  <color name="color_background_light_beige">#fff1ece8</color>
  <color name="color_background_beige">#ffede6e1</color>
  <color name="color_background_dark_beige">#ffe8e0d9</color>
  <!-- ... -->
</resources>

IOS

For IOS development, we have IfDesignSystemColor.h and IfDesignSystemColor.m under src/variables/ios, and IfDesignSystem.swift and IfDesignSystemColor.swift under src/variables/ios-swift.

Flutter

We also have ifdesignsystem.dart under src/variables/flutter.

Edit this section

Contact us