Color

A consistent color palette is an essential asset in the communication resources of any design system. Colors have a huge impact in a system. They define the visual identity, bring harmony, communicate, etc. Lexicon defines the following color palette that you are free to change for your own.

Check the Lexicon Color for a more in-depth look at the motivations and proper usage of this.

Grays

N/A
Var
$black
Hex
Rgb
Dark
Var
$gray-900
Hex
Rgb
Dark L2
Var
$gray-800
Hex
Rgb
N/A
Var
$gray-700
Hex
Rgb
Secondary
Var
$gray-600
Hex
Rgb
Secondary L1
Var
$gray-500
Hex
Rgb
Secondary L2
Var
$gray-400
Hex
Rgb
Secondary L3
Var
$gray-300
Hex
Rgb
Light
Var
$gray-200
Hex
Rgb
Light L1
Var
$gray-100
Hex
Rgb
White
Var
$white
Hex
Rgb

Colors

Blue
Var
$blue
Hex
Rgb
Orange
Var
$orange
Hex
Rgb
Red
Var
$red
Hex
Rgb
Teal
Var
$teal
Hex
Rgb
Pink
Var
$pink
Hex
Rgb
Green
Var
$green
Hex
Rgb
Purple
Var
$purple
Hex
Rgb
Yellow
Var
$yellow
Hex
Rgb
Cyan
Var
$cyan
Hex
Rgb
Indigo
Var
$indigo
Hex
Rgb

Primary

Primary D2
Var
$primary-d2
Hex
Rgb
Primary D1
Var
$primary-d1
Hex
Rgb
Primary
Var
$primary
Hex
Rgb
Primary L1
Var
$primary-l1
Hex
Rgb
Primary L2
Var
$primary-l2
Hex
Rgb
Primary L3
Var
$primary-l3
Hex
Rgb

Secondary

Dark L1
Var
$secondary-d2
Hex
Rgb
Dark L2
Var
$secondary-d1
Hex
Rgb
Secondary
Var
$secondary
Hex
Rgb
Secondary L1
Var
$secondary-l1
Hex
Rgb
Secondary L2
Var
$secondary-l2
Hex
Rgb
Secondary L3
Var
$secondary-l3
Hex
Rgb

Success

Success D2
Var
$success-d2
Hex
Rgb
Success D1
Var
$success-d1
Hex
Rgb
Success
Var
$success
Hex
Rgb
Success L1
Var
$success-l1
Hex
Rgb
Success L2
Var
$success-l2
Hex
Rgb

Info

Info D2
Var
$info-d2
Hex
Rgb
Info D1
Var
$info-d1
Hex
Rgb
Info
Var
$info
Hex
Rgb
Info L1
Var
$info-l1
Hex
Rgb
Info L2
Var
$info-l2
Hex
Rgb

Warning

Warning D2
Var
$warning-d2
Hex
Rgb
Warning D1
Var
$warning-d1
Hex
Rgb
Warning
Var
$warning
Hex
Rgb
Warning L1
Var
$warning-l1
Hex
Rgb
Warning L2
Var
$warning-l2
Hex
Rgb

Danger

Error D2
Var
$danger-d2
Hex
Rgb
Error D1
Var
$danger-d1
Hex
Rgb
Error
Var
$danger
Hex
Rgb
Error L1
Var
$danger-l1
Hex
Rgb
Error L2
Var
$danger-l2
Hex
Rgb

Light

Light D2
Var
$light-d2
Hex
Rgb
Light D1
Var
$light-d1
Hex
Rgb
Light
Var
$light
Hex
Rgb
Light L1
Var
$light-l1
Hex
Rgb
White
Var
$light-l2
Hex
Rgb

Dark

N/A
Var
$dark-d2
Hex
Rgb
N/A
Var
$dark-d1
Hex
Rgb
Dark
Var
$dark
Hex
Rgb
Dark L1
Var
$dark-l2
Hex
Rgb
Dark L2
Var
$dark-l2
Hex
Rgb