Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Primary Colors
Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.
Name
Primary
Value
#4318ff
Name
Secondary
Value
#0f1535
Name
Info
Value
#0075ff
Name
Success
Value
#01b574
Name
Warning
Value
#ffb547
Name
Error
Value
#e31a1a
Name
Light
Value
#e9ecef
Name
Dark
Value
#344767
Gradient Colors
Our gradient palette is a mixed of two colors for creating beautiful gradient colors.
Name
Primary
Value
#4318ff | #9f7aea
Name
Secondary
Value
#627594 | #a8b8d8
Name
Info
Value
#0075ff | #21d4fd
Name
Success
Value
#01b574 | #c9fbd5
Name
Warning
Value
#f53939 | #fbcf33
Name
Error
Value
#f53c2b | #f53c2b
Name
Light
Value
#ced4da | #ebeff4
Name
Dark
Value
#141727 | #3a416f
Name
CardDark
Value
#ced4da | #ebeff4
Name
Card
Value
rgba(6, 11, 40, 0.94) 19.41% | rgba(10, 14, 35, 0.49) 76.65%
Name
Bill
Value
rgba(24, 29, 60, 0.94) 19.41% | rgba(10, 14, 35, 0.49) 76.65%
Name
Menu
Value
#05153f 28.26% | #072561 91.2%
Name
Sidenav
Value
rgba(6, 11, 40, 0.94) 19.41% | rgba(10, 14, 35, 0.49) 76.65%
Name
Logo
Value
#ffffff 70.67% | rgba(117, 122, 140, 0) 108.55%
Light Neutrals
Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.
| 100 | Value #edf2f7 |
| 200 | Value #e2e8f0 |
| 300 | Value #cbd5e0 |
| 400 | Value #a0aec0 |
| 500 | Value #718096 |
| 600 | Value #4a5568 |
| 700 | Value #2d3748 |
| 800 | Value #1a202a |
| 900 | Value #171923 |
Vision UI Dashboard React contains different sets of colors and you can customize them using the following file: src/asssets/theme/base/colors.js