Color
We provide a Base palette with few colors so simple customizations are easy. You can modify the Base palette either in the Administration area or in the Tailwind configuration file if you need more advanced customization.
When customizing your colors, have in mind the WCAG 2.1 AA compliant contrast ratio. You can check the contrast of your choosing with WebAIM Contrast Checker or other similar tools.
Base
| Value | Tailwind name | Usage |
|---|---|---|
| primary | Main nav component background\nNav menus in homepage and space home | |
| secondary | Main color for links and buttons | |
| tertiary | Graphic ornaments and accent color\nCards and list items hover state border |
State
| Value | Tailwind name | Hex code | RGBA code | Usage |
|---|---|---|---|---|
| success | #28A745 | rgba(40,167,69,1) | Success notice border\nAlert notice icon fill\nButton background on success message | |
| warning | #FFB703 | rgba(255,183,3,1) | Warning notice border | |
| alert | #ED1C24 | rgba(237,28,36,1) | Alert notice border\nAlert notice icon fill |
Main Colors
Typography and texts
| Value | Tailwind name | Hex code | RGBA code | Usage |
|---|---|---|---|---|
| black | #020203 | rgba(2,2,3,1) | Headings and section titles | |
| gray-2 | #3E4C5C | rgba(62,76,92,1) | Inline text | |
| white | #FFFFFF | rgba(255,255,255,1) | Text over dark background | |
| secondary | #155ABF | rgba(21,90,191,1) | Links and buttons |
Background and borders
| Value | Tailwind name | Hex code | RGBA code | Usage |
|---|---|---|---|---|
| background | #F3F4F7 | rgba(243,244,247,1) | Aside background | |
| background-4 | #E4EEFF99 | rgba(228,238,255,0.8) | Selected sidebar filter background | |
| gray | #6B7280CC | rgba(107,114,128,0.3) | Default icon color | |
| gray-3 | #E1E5EF | rgba(225,229,239,1) | Lines and separators | |
| gray-4 | #242424 | rgba(36,36,36,1) | Footer background | |
| gray-5 | #F6F8FA | rgb(246,248,250,1) | Admin layout background |
Form elements
| Value | Tailwind name | Hex code | RGBA code | Usage |
|---|---|---|---|---|
| background-2 | #FAFBFC | rgba(250,251,252,1) | Input elements default background | |
| background-3 | #EFEFEF | rgba(239,239,239,1)) | Input elements disabled state background |