Our color palette contains 10 colors with bright and dark shades, numbered from 10 (brightest) to 950 (darkest).
When working with colors it's important to check the contrast between the element and the background, in order to keep it accessible, especially when it comes to text and icons.
Keep in mind that for most use cases there are already predefined tokens.
Primary color
Purple is our primary color, and it’s also the main Userlane’s brand color.
We use it for the main CTAs (e.g. primary buttons), to highlight many of our UI elements (e.g. active states), and also to display data in Analytics, in order to reinforce our brand identity.
Purple
10
#f8f7ff
50
#e9e5ff
100
#d3ccff
200
#bdb2ff
300
#8d7aff
400
#7864f5
500
#732bf5
600
#561eb0
700
#461496
800
#380c7d
900
#2a0763
950
#1f044a
Neutral Colors
- We have two scales for neutral colors: Gray and Neutral
- Gray is mostly used in the Dark theme
- Neutral is mainly used in the Light theme
- The difference between them is: Neutral contains more blue in the composition, which works better for the Light Theme, whilst the Gray scale works better on Dark Theme.
Neutral
10
#fafbfc
50
#f4f5f7
100
#dfe1e6
200
#c1c7d0
300
#9ea4b4
400
#7a869a
500
#5e6c84
600
#42526e
700
#344563
800
#253858
900
#172b4d
950
#111e36
Gray
10
#fafafa
50
#f0f0f0
100
#dbdbdb
200
#bfbfbf
300
#999999
400
#868686
500
#666666
600
#5e5e5e
700
#525252
800
#404040
950
#1f1f1f
White
#ffffff
Black
#000000
Secondary colors
Secondary colors are used to convey meaning or add visual detail.
Color-coding
In our product, we currently use the standard "traffic light" color coding in some pages and components.
- Green is used for positive information, such as success or a high score.
- Yellow is used for to get attention to warning states and moderate scores
- Red is used with a negative meaning for critical information that require attention, such as error states, alerts and low scores
Green
10
#f0f7f5
50
#e8f7f2
100
#bae9d6
200
#98e5c6
300
#56d2a0
400
#24b179
600
#007347
700
#005937
800
#004028
900
#00331f
950
#002416
Yellow
10
#fffcf7
50
#fff6e5
100
#ffefd1
200
#ffe5b8
400
#ffbd47
950
#402900
Red
10
#fff8f7
50
#ffedea
100
#ffd2cb
200
#ffb7ac
300
#f98270
400
#e65740
500
#cd361d
600
#ac2008
700
#991700
800
#731100
900
#590d00
950
#400a00
Other secondary colors
We also use Blue, Teal, and Pink for other visual elements, such as charts, labels, and other UI elements that require variety of colors.
Blue
10
#f4f8fc
50
#e9f3fc
100
#cbe2f9
200
#a6d3ff
300
#67adf2
400
#428fdc
500
#2079d1
600
#1068bf
700
#0b58a6
800
#064787
900
#033464
950
#002850
Teal
10
#f0f7f7
50
#def6f7
100
#bbeff3
200
#99e7ef
300
#58cbdb
400
#26a4b9
500
#08798e
600
#006073
700
#004a59
800
#003e4d
900
#002e38
950
#00232a
Pink
10
#fff7ff
50
#ffe0ff
100
#ffbfff
200
#ff9eff
300
#ff73ff
400
#e038e0
500
#b909b9
600
#a108a1
700
#8f078f
800
#780678
900
#5e055e
950
#4c044c