Back to Color-guidelines

CSS ComponentThe latest version of this package is: 14.23.0, Opens in new window

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

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/color@14.23.0

Table of Contents

Tokens

All of the tokens can be used as preprocessor and CSS variables

Color tokens

Base Color tokens

NameValueIs aliased in
rlx-color-base-grey-100rgb(255, 255, 255)
rgb(255, 255, 255)
rlx-color-base-grey-200rgb(244, 244, 244)
rgb(244, 244, 244)
rlx-color-base-grey-300rgb(217, 217, 217)
rgb(217, 217, 217)
rlx-color-base-grey-400rgb(190, 190, 190)
rgb(190, 190, 190)
rlx-color-base-grey-500rgb(92, 92, 92)
rgb(92, 92, 92)
rlx-color-base-grey-600rgb(51, 51, 51)
rgb(51, 51, 51)
rlx-color-base-brown-100rgb(235, 227, 220)
rgb(235, 227, 220)
rlx-color-base-brown-200rgb(221, 208, 197)
rgb(221, 208, 197)
rlx-color-base-brown-300rgb(213, 196, 183)
rgb(213, 196, 183)
rlx-color-base-brown-400rgb(176, 162, 152)
rgb(176, 162, 152)
rlx-color-base-brown-500rgb(143, 131, 119)
rgb(143, 131, 119)
rlx-color-base-brown-600rgb(110, 100, 90)
rgb(110, 100, 90)
rlx-color-base-brown-700rgb(51, 42, 38)
rgb(51, 42, 38)
rlx-color-base-red-100rgb(240, 96, 100)
rgb(240, 96, 100)
rlx-color-base-red-200rgb(202, 60, 62)
rgb(202, 60, 62)
rlx-color-base-pink-100rgb(248, 198, 201)
rgb(248, 198, 201)
rlx-color-base-pink-200rgb(241, 108, 143)
rgb(241, 108, 143)
rlx-color-base-yellow-100rgb(255, 240, 158)
rgb(255, 240, 158)
rlx-color-base-yellow-200rgb(242, 184, 122)
rgb(242, 184, 122)
rlx-color-base-turqois-100rgb(208, 230, 195)
rgb(208, 230, 195)
rlx-color-base-turqois-200rgb(118, 187, 178)
rgb(118, 187, 178)
rlx-color-base-green-100rgb(145, 209, 105)
rgb(145, 209, 105)
rlx-color-base-green-200rgb(105, 156, 85)
rgb(105, 156, 85)
rlx-color-base-blue-100rgb(186, 221, 231)
rgb(186, 221, 231)
rlx-color-base-blue-200rgb(167, 192, 242)
rgb(167, 192, 242)
rlx-color-base-blue-300rgb(104, 170, 200)
rgb(104, 170, 200)
rlx-color-base-purple-100rgb(199, 144, 193)
rgb(199, 144, 193)
rlx-color-base-purple-200rgb(140, 57, 128)
rgb(140, 57, 128)
rlx-color-base-slate-100rgb(88, 94, 106)
rgb(88, 94, 106)
rlx-color-base-slate-200rgb(51, 58, 72)
rgb(51, 58, 72)
rlx-color-base-slate-300rgb(37, 45, 60)
rgb(37, 45, 60)
rlx-color-base-slate-400rgb(25, 33, 48)
rgb(25, 33, 48)
rlx-color-base-slate-500rgb(20, 28, 44)
rgb(20, 28, 44)
rlx-color-base-beige-100rgb(250, 249, 247)
rgb(250, 249, 247)
rlx-color-base-beige-200rgb(246, 243, 240)
rgb(246, 243, 240)
rlx-color-base-beige-300rgb(241, 236, 232)
rgb(241, 236, 232)
rlx-color-base-beige-400rgb(237, 230, 225)
rgb(237, 230, 225)
rlx-color-base-beige-500rgb(232, 224, 217)
rgb(232, 224, 217)

Background Color tokens

NameValueIs aliased in
rlx-color-background-100-light
rgb(250, 249, 247)
rlx-color-background-100-dark
rgb(20, 28, 44)
rlx-color-background-200-light
rgb(246, 243, 240)
rlx-color-background-200-dark
rgb(25, 33, 48)
rlx-color-background-300-light
rgb(241, 236, 232)
rlx-color-background-300-dark
rgb(37, 45, 60)
rlx-color-background-400-light
rgb(237, 230, 225)
rlx-color-background-400-dark
rgb(51, 58, 72)
rlx-color-background-500-light
rgb(232, 224, 217)
rlx-color-background-500-dark
rgb(88, 94, 106)

Infographic Color tokens

NameValueIs aliased in
rlx-color-infographic-100
rgb(240, 96, 100)
rlx-color-infographic-200
rgb(202, 60, 62)
rlx-color-infographic-300
rgb(145, 209, 105)
rlx-color-infographic-400
rgb(105, 156, 85)
rlx-color-infographic-500
rgb(186, 221, 231)
rlx-color-infographic-600
rgb(104, 170, 200)
rlx-color-infographic-700
rgb(208, 230, 195)
rlx-color-infographic-800
rgb(118, 187, 178)
rlx-color-infographic-900
rgb(248, 198, 201)
rlx-color-infographic-1000
rgb(241, 108, 143)
rlx-color-infographic-1100
rgb(199, 144, 193)
rlx-color-infographic-1200
rgb(140, 57, 128)
rlx-color-infographic-1300
rgb(255, 240, 158)
rlx-color-infographic-1400
rgb(242, 184, 122)

States Color tokens

NameValueIs aliased in
rlx-color-states-disabled
rgba(110,98,94,0.3)
rlx-color-states-active
rgb(0, 64, 128)
rlx-color-states-hover
rgb(0, 64, 128)
rlx-color-states-focus
rgb(0, 84, 240)

Text Color tokens

NameValueIs aliased in
rlx-color-text-subtle
rgb(110, 98, 94)
rlx-color-text-primary-on-light
rgb(51, 30, 17)
rlx-color-text-primary-on-dark
rgb(250, 249, 247)
rlx-color-text-primary-normal
rgb(51, 30, 17)
rlx-color-text-primary-inverse
rgb(250, 249, 247)
Contact us, Opens in new window