Colour Palette
Onestac Brand Assets
↓
Primary colors
These are the main neutral, brand and semantic colors that make up the majority of the colors used in the design system and components.
Base
These are base black and white color styles to quickly swap out if you need to.
AAA 21.1
White
#FFFFFF
AAA 21:1
Black
#000000
Transparent
#FFFFFF 0%
Gray (light mode)
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design—text, form fields, backgrounds, dividers—are usually gray.
AAA 7.02
25
#FDFDFD
AA 6.84
50
#FAFAFA
AA 6.55
100
#F5F5F5
AA 5.92
200
#E9EAEB
AA 4.95
300
#D5D7DA
2.40
400
#A4A7AE
AA 4.56
500
#717680
AAA 7.14
600
#535862
AAA 9.46
700
#414651
AAA 14.19
800
#252B37
AAA 16.88
900
#181D27
AAA 19.45
950
#0A0D12
Gray (dark mode)
This is a separate gray color palette used specifically for dark mode. This gray has been desaturated and optimised to work well within dark mode variables.
AA 5.66
25
#FAFAFA
AA 5.37
50
#F7F7F7
AA 5.14
100
#F0F0F1
AA 4.95
200
#ECECED
3.75
300
#CECFD2
2.94
400
#94979C
3.55
500
#85888E
AAA 5.85
600
#61656C
AAA 11.38
700
#373A41
AAA 15.14
800
#22262F
AAA 18.13
900
#13161B
AAA 19.31
950
#0C0E12
Brand
The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
AA 6.38
25
#FCFAFF
AA 6.15
50
#F9F5FF
AA 5.72
100
#F4EBFF
AA 4.92
200
#E9D7FE
3.89
300
#D6BBFB
2.49
400
#B692F6
3.32
500
#9E77ED
AA 4.95
600
#7F56D9
AA 6.61
700
#6941C6
AAA 8.65
800
#53389E
AAA 10.76
900
#42307D
AAA 14.59
950
#2C1C5F
Error
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
AA 6.39
25
#FFFBFA
AA 6.04
50
#FEF3F2
AA 5.45
100
#FEE4E2
AA 4.63
200
#FECDCA
3.38
300
#FDA29B
2.78
400
#F97066
3.75
500
#F04438
AA 4.83
600
#D92D20
AA 6.57
700
#B42318
AAA 8.66
800
#912018
AAA 9.84
900
#7A271A
AAA 13.94
950
#55160C
Warning
Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
AA 5.29
25
#FFFCF5
AA 5.20
50
#FFFAEB
AA 4.78
100
#FEF0C7
4.16
200
#FEDF89
3.50
300
#FEC84B
1.84
400
#FDB022
2.34
500
#F79009
AA 3.48
600
#DC6803
AA 5.42
700
#B54708
AAA 7.51
800
#93370D
AAA 9.43
900
#7A2E0E
AAA 13.96
950
#4E1D09
Success
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
AA 5.54
25
#F6FEF9
AA 5.39
50
#ECFDF3
AA 5.11
100
#DCFAE6
4.29
200
#ABEFC6
3.51
300
#75E0A7
2.02
400
#47CD89
2.75
500
#17B26A
3.90
600
#079455
AA 5.69
700
#067647
AAA 7.96
800
#085D3A
AAA 9.92
900
#074D31
AAA 13.98
950
#053321
Gradients
These are the main neutral and brand gradients that can be used in components.
Gray gradients
Gray is a neutral color and is the foundation of the color system. Neutral linear gradients are useful for backgrounds and adding subtle depth and texture to designs.
600
#535862
90deg
500
#717680
700
#414651
45deg
600
#535862
800
#252B37
45deg
600
#535862
800
#252B37
90deg
600
#535862
800
#252B37
26.5deg
700
#414651
900
#181D27
45deg
600
#535862
900
#181D27
45deg
700
#414651
50
#FAFAFA
180deg
white
#FFFFFF
100
#F5F5F5
180deg
white
#FFFFFF
100
#F5F5F5
180deg
25
#FDFDFD
100
#F5F5F5
180deg
50
#FAFAFA
200
#E9EAEB
180deg
25
#FDFDFD
200
#E9EAEB
180deg
50
#FAFAFA
200
#E9EAEB
180deg
100
#F5F5F5
Brand gradients
The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
600
#7F56D9
90deg
500
#9E77ED
700
#6941C6
45deg
600
#7F56D9
800
#53389E
45deg
600
#7F56D9
800
#53389E
90deg
600
#7F56D9
800
#53389E
26.5deg
700
#6941C6
900
#42307D
45deg
600
#7F56D9
900
#42307D
45deg
700
#6941C6