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.
Primary colors define part of Lexicon's visual identity. These colors have been carefully chosen for how easily they can be combined and with accessibility in mind.
Dark
Primary
White
| Color | Code | Usage |
|---|---|---|
| Dark | #272833 | Texts/icons, navigation background, borders, and dividers |
| Primary | #0B5FFF | Main actions like primary buttons, links, hover, and active |
| White | #FFFFFF | Cards background, toolbar background, modals, forms, and texts/icons |
Dark D2
Dark D1
Dark
Dark L1
Dark L2
| Color | Light | Code | Usage |
|---|---|---|---|
| Dark D2 | +10% | #111116 | |
| Dark D1 | +5% | #1C1C24 | |
| Dark Default | 0 | #272833 | First level navigation background and primary texts |
| Dark L1 | -4% | #30313F | Second level navigation background |
| Dark L2 | -8% | #393A4A | Third level navigation background and active state on navigation |
Primary D2
Primary D1
Primary
Primary L0 Accessible 3:1
Primary L1
Primary L2
Primary L3
| Color | Light | Code | Usage |
|---|---|---|---|
| Primary D2 | +10% | #004AD7 | Active button and links color |
| Primary D1 | +5% | #0053f0 | Hover button and links color |
| Primary Default | 0 | #0B5FFF | Main action and links |
| Primary L0 | -15% | #5791FF | Color to ensure a 3:1 contrast with white |
| Primary L1 | -23% | #80ACFF | Links in the navigation section |
| Primary L2 | -34% | #B3CDFF | Disabled background |
| Primary L3 | -45% | #F0F5FF | Hover and active background in tables and lists |
Color does have meaning in certain contexts — in very specific use-cases, we employ color as one factor in imparting meaning. Note that we do not use color alone, it is an enhancement. For more on this, please see Lexicon's guides on using color in a functional way.
Light D2
Light D1
Light
Light L1
White
| Color | Light | Code | Usage |
|---|---|---|---|
| Light D2 | +10% | #D3D6E0 | |
| Light D1 | +5% | #E2E4EA | |
| Light Default | 0 | #F1F2F5 | Main background of the application, input backgrounds, and active state in the secondary button |
| Light L1 | -2% | #F7F8F9 | Hover State for the Secondary button |
| White | -100% | #FFFFFF |
Secondary
Secondary L0 Accessible 3:1
Secondary L1
Secondary L2
Secondary L3
| Color | Light | Code | Usage |
|---|---|---|---|
| Secondary | -28% desat 5% | #6B6C7E | Secondary texts |
| Secondary L0 | -15% | #9393A4 | Color to ensure a 3:1 contrast with white |
| Secondary L1 | -52% | #A7A9BC | Disabled texts |
| Secondary L2 | -65% | #CDCED9 | Border for clickable elements like buttons |
| Secondary L3 | -74% | #E7E7ED | Disabled Background and Border for dividers |
Secondary colors are frequently used and still important, but they do not define the visual identity as much as Primary colors.
Error
Success
Warning
Info
Each color is defined below, along with its variations and usage:
Error D2
Error D1
Error
Error L1
Error L2
| Color | Light | Code | Usage |
|---|---|---|---|
| Error D2 | +10% | #AB1010 | Active button and links color |
| Error D1 | +5% | #C31212 | Hover button and links color |
| Error Default | 0 | #DA1414 | Text color in error messages |
| Error L1 | -28% | #F48989 | Border color in error status messages |
| Error L2 | -50% | #FEEFEF | Background color in error status messages |
Success D2
Success D1
Success
Success L1
Success L2
| Color | Light | Code | Usage |
|---|---|---|---|
| Success D2 | +10% | #1C5629 | Active button and links color |
| Success D1 | +5% | #226A33 | Hover button and links color |
| Success Default | 0 | #287D3C | Text color in success messages |
| Success L1 | -25% | #5ACA75 | Border color in success status messages |
| Success L2 | -63% | #EDF9F0 | Background color in success messages like alerts |
Warning D2
Warning D1
Warning
Warning L1
Warning L2
| Color | Light | Code | Usage |
|---|---|---|---|
| Warning D2 | +10% | #863A00 | Active button and links color |
| Warning D1 | +5% | #9F4500 | Hover button and links color |
| Warning Default | 0 | #B95000 | Text color in warning messages |
| Warning L1 | -25% | #FF8F39 | Border color in warning messages like alerts |
| Warning L2 | -60% | #FFF4EC | Background color in warning messages like alerts |
Info D2
Info D1
Info
Info L1
Info L2
| Color | Light | Code | Usage |
|---|---|---|---|
| Info D2 | +10% | #234584 | Active button and links color |
| Info D1 | +5% | #294F98 | Hover button and links color |
| Info Default | 0 | #2E5AAC | Text color in error messages. |
| Info L1 | -28% | #89A7E0 | Border color in info status messages. |
| Info L2 | -53% | #EEF2FA | Background color in info status messages. |
The last color definition row is used in input fields to reduce the impact of the color saturation in the borders.
Lexicon provides a specific color palette for charts. For more information on its usage please visit chart colors.
Blue
Orange
Red
Teal
Pink
Green
Purple
Yellow
Cyan
Indigo
This color palette was chosen with Lexicon's visual identity and brand in mind. You can of course substitute this color palette for colors that reflect your product or corporate image.