Palette
The color palette is a set of colors. Our palette is the following:
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| dusk | #EBEDF2 | #BCC4D3 | #92A1B9 | #70839F | #546984 | #3E526A | #2B3C50 | #1F2C3A | #141C25 | #090B0F |
| grey | #F9FAFB | #E3E7EC | #CAD2DA | #B3BDC7 | #9AA3AD | #828A92 | #6B7178 | #53585E | #3C4043 | #252729 |
| blue | #EDF7FA | #B8E1EE | #87CDE1 | #5EBCD5 | #4BA2B9 | #3D899C | #327080 | #285864 | #1E3F48 | #13262B |
| green | #EDFAF5 | #ABE9D2 | #71D8B3 | #42C798 | #32AD81 | #27926C | #1F7858 | #195E45 | #134332 | #0D291F |
| red | #FAEDED | #FFD1D1 | #FF9496 | #FF6B6E | #DB4A4C | #B73032 | #931F21 | #6F1415 | #4A0C0D | #260606 |
| orange | #FDF6EC | #FAE6CB | #F5CA93 | #F0AF60 | #ED9B42 | #E68D35 | #CE7C2E | #A86826 | #895620 | #603E19 |
| purple | #EEF1FF | #E1E6FE | #C8D1FD | #A7B2FA | #8489F5 | #5855EC | #5849E2 | #4C3BC7 | #3D33A0 | #211C4A |
Usage
You can use the palette thanks to class names:
<div class="bg-grey-500 text-dusk-400">...</div>
Disclaimer
The palette is not meant to be used as a color system. It is only a set of colors that you can use to build your own color system.
Color system
A color system is a set of colors that you can use to build your UI. It is composed of a primary color, a secondary color, a success color, a warning color and a danger color.
In Sirius you also have dusk color.
Colors are named by their usage, not by their value. For example, if you want to use a dusk background you will use bg-dusk-bg and not bg-dusk-100.
Here are all the variants of Sirius's color system:
| dusk | primary | secondary | danger | success | warning | info | purple | |
|---|---|---|---|---|---|---|---|---|
| on-light | #3E526A | #3D899C | #828A92 | #B73032 | #27926C | #E68D35 | #3D899C | #5855EC |
| on-DEFAULT | #2B3C50 | #327080 | #6B7178 | #931F21 | #1F7858 | #CE7C2E | #327080 | #5849E2 |
| on-strong | #090B0F | #13262B | #252729 | #260606 | #0D291F | #603E19 | #13262B | #211C4A |
| on-hover-light | #2B3C50 | #327080 | #6B7178 | #931F21 | #1F7858 | #CE7C2E | #327080 | #5849E2 |
| on-hover-DEFAULT | #1F2C3A | #285864 | #53585E | #6F1415 | #195E45 | #A86826 | #285864 | #4C3BC7 |
| on-hover-strong | #090B0F | #13262B | #252729 | #260606 | #0D291F | #603E19 | #13262B | #211C4A |
| bg-light | #EBEDF2 | #EDF7FA | #F9FAFB | #FAEDED | #EDFAF5 | #FDF6EC | #EDF7FA | #EEF1FF |
| bg-DEFAULT | #BCC4D3 | #B8E1EE | #E3E7EC | #FFD1D1 | #ABE9D2 | #FAE6CB | #B8E1EE | #E1E6FE |
| bg-strong | #546984 | #4BA2B9 | #9AA3AD | #DB4A4C | #32AD81 | #ED9B42 | #4BA2B9 | #8489F5 |
| bg-stronger | #141C25 | #1E3F48 | #3C4043 | #4A0C0D | #134332 | #895620 | #1E3F48 | #3D33A0 |
| bg-hover-light | #BCC4D3 | #B8E1EE | #E3E7EC | #FFD1D1 | #ABE9D2 | #FAE6CB | #B8E1EE | #E1E6FE |
| bg-hover-DEFAULT | #92A1B9 | #87CDE1 | #CAD2DA | #FF9496 | #71D8B3 | #F5CA93 | #87CDE1 | #C8D1FD |
| bg-hover-strong | #3E526A | #3D899C | #828A92 | #B73032 | #27926C | #E68D35 | #3D899C | #5855EC |
| bg-hover-stronger | #090B0F | #13262B | #252729 | #260606 | #0D291F | #603E19 | #13262B | #211C4A |
| border-light | #BCC4D3 | #B8E1EE | #E3E7EC | #FFD1D1 | #ABE9D2 | #FAE6CB | #B8E1EE | #E1E6FE |
| border-DEFAULT | #70839F | #5EBCD5 | #B3BDC7 | #FF6B6E | #42C798 | #F0AF60 | #5EBCD5 | #A7B2FA |
| border-strong | #2B3C50 | #327080 | #6B7178 | #931F21 | #1F7858 | #CE7C2E | #327080 | #5849E2 |
| border-hover-light | #92A1B9 | #87CDE1 | #CAD2DA | #FF9496 | #71D8B3 | #F5CA93 | #87CDE1 | #C8D1FD |
| border-hover-DEFAULT | #546984 | #4BA2B9 | #9AA3AD | #DB4A4C | #32AD81 | #ED9B42 | #4BA2B9 | #8489F5 |
| border-hover-strong | #1F2C3A | #285864 | #53585E | #6F1415 | #195E45 | #A86826 | #285864 | #4C3BC7 |
note: text-dusk-on is the same as text-dusk-on-DEFAULT
Usage
You can use the color system thanks to class names:
<div class="bg-primary text-dusk-light">...</div>