Color
The Relax color palette is created with effiency in mind, and with inheritance with the core If Visual Identity
Table of Contents
Palette
Base colors
$rlx-color-base-grey-100
$rlx-color-base-grey-200
$rlx-color-base-grey-300
$rlx-color-base-grey-400
$rlx-color-base-grey-500
$rlx-color-base-grey-600
$rlx-color-base-brown-100
$rlx-color-base-brown-200
$rlx-color-base-brown-300
$rlx-color-base-brown-400
$rlx-color-base-brown-500
$rlx-color-base-brown-600
$rlx-color-base-brown-700
$rlx-color-base-red-100
$rlx-color-base-red-200
$rlx-color-base-pink-100
$rlx-color-base-pink-200
$rlx-color-base-yellow-100
$rlx-color-base-yellow-200
$rlx-color-base-turqois-100
$rlx-color-base-turqois-200
$rlx-color-base-green-100
$rlx-color-base-green-200
$rlx-color-base-blue-100
$rlx-color-base-blue-200
$rlx-color-base-blue-300
$rlx-color-base-purple-100
$rlx-color-base-purple-200
$rlx-color-base-slate-100
$rlx-color-base-slate-200
$rlx-color-base-slate-300
$rlx-color-base-slate-400
$rlx-color-base-slate-500
$rlx-color-base-beige-100
$rlx-color-base-beige-200
$rlx-color-base-beige-300
$rlx-color-base-beige-400
$rlx-color-base-beige-500
Background colors
$rlx-color-background-100-light
$rlx-color-background-100-dark
$rlx-color-background-200-light
$rlx-color-background-200-dark
$rlx-color-background-300-light
$rlx-color-background-300-dark
$rlx-color-background-400-light
$rlx-color-background-400-dark
$rlx-color-background-500-light
$rlx-color-background-500-dark
Infographic colors
$rlx-color-infographic-100
$rlx-color-infographic-200
$rlx-color-infographic-300
$rlx-color-infographic-400
$rlx-color-infographic-500
$rlx-color-infographic-600
$rlx-color-infographic-700
$rlx-color-infographic-800
$rlx-color-infographic-900
$rlx-color-infographic-1000
$rlx-color-infographic-1100
$rlx-color-infographic-1200
$rlx-color-infographic-1300
$rlx-color-infographic-1400