Docs
Colors
Colors
A collection of icons used across all componenents and AX products.
General Usage
- primary
is used to convey the brands identity and draw attention to specific areas or interactive elements.
- shades
are used to layout trough contrast. Whenever possible, the transparency-scales of black and white are used to reduce complexity and create elements that adapt to their environment. (See example)
- system
System-colors have a specific meaning and are exlusively employed to express content within the respective concept (warning, information, error, confirmation)
Scales
Brand
Conveys the brands identity and draws attention to specific areas or interactive elements.
50
hsl(264, 83%, 98%)#f9f6fergb(249, 246, 254)
100
hsl(261, 100%, 97%)#f5f0ffrgb(245, 240, 255)
200
hsl(264, 94%, 93%)#eadcfergb(234, 220, 254)
300
hsl(262, 96%, 91%)#e2d2fergb(226, 210, 254)
400
hsl(263, 96%, 82%)#c7a5fdrgb(199, 165, 253)
500
hsl(263, 95%, 75%)#b183fcrgb(177, 131, 252)
600
hsl(263, 100%, 60%)#8133ffrgb(129, 51, 255)
700
hsl(263, 95%, 55%)#731ff9rgb(115, 31, 249)
800
hsl(263, 84%, 43%)#5812cargb(88, 18, 202)
900
hsl(259, 100%, 18%)#1d005crgb(29, 0, 92)
System
Specific meaning and exlusively employed to express content within the respective concept.
info
50
hsl(223, 100%, 99%)#fafbffrgb(250, 251, 255)
100
hsl(224, 100%, 97%)#f0f4ffrgb(240, 244, 255)
200
hsl(222, 92%, 95%)#e7eefergb(231, 238, 254)
300
hsl(225, 85%, 92%)#d9e2fcrgb(217, 226, 252)
400
hsl(225, 78%, 82%)#adbff5rgb(173, 191, 245)
500
hsl(226, 75%, 75%)#8fa6efrgb(143, 166, 239)
600
hsl(226, 70%, 55%)#3c61ddrgb(60, 97, 221)
700
hsl(226, 65%, 51%)#3157d3rgb(49, 87, 211)
800
hsl(226, 69%, 43%)#2245b9rgb(34, 69, 185)
900
hsl(226, 63%, 17%)#101d47rgb(16, 29, 71)
warn
50
hsl(40, 100%, 96%)#fff8ebrgb(255, 248, 235)
100
hsl(44, 100%, 92%)#fff4d6rgb(255, 244, 214)
200
hsl(43, 100%, 87%)#ffecbdrgb(255, 236, 189)
300
hsl(42, 100%, 82%)#ffe3a3rgb(255, 227, 163)
400
hsl(36, 94%, 70%)#fac16brgb(250, 193, 107)
500
hsl(35, 90%, 63%)#f6af4crgb(246, 175, 76)
600
hsl(35, 96%, 54%)#fa9c19rgb(250, 156, 25)
700
hsl(35, 90%, 50%)#f2930drgb(242, 147, 13)
800
hsl(30, 100%, 34%)#ad5700rgb(173, 87, 0)
900
hsl(20, 79%, 17%)#4e2009rgb(78, 32, 9)
error
50
hsl(7, 100%, 98%)#fff6f5rgb(255, 246, 245)
100
hsl(7, 100%, 97%)#fff1f0rgb(255, 241, 240)
200
hsl(8, 100%, 94%)#ffe4e0rgb(255, 228, 224)
300
hsl(7, 91%, 91%)#fdd8d3rgb(253, 216, 211)
400
hsl(10, 77%, 79%)#f3aea0rgb(243, 174, 160)
500
hsl(10, 72%, 71%)#ea9280rgb(234, 146, 128)
600
hsl(10, 81%, 56%)#ea5234rgb(234, 82, 52)
700
hsl(10, 72%, 50%)#db4224rgb(219, 66, 36)
800
hsl(10, 82%, 44%)#cc3314rgb(204, 51, 20)
900
hsl(10, 51%, 14%)#361811rgb(54, 24, 17)
success
50
hsl(138, 63%, 97%)#f3fcf5rgb(243, 252, 245)
100
hsl(139, 57%, 95%)#ebfaf0rgb(235, 250, 240)
200
hsl(139, 48%, 91%)#ddf3e4rgb(221, 243, 228)
300
hsl(141, 44%, 86%)#ccebd7rgb(204, 235, 215)
400
hsl(147, 45%, 73%)#9bd9b7rgb(155, 217, 183)
500
hsl(152, 44%, 58%)#65c397rgb(101, 195, 151)
600
hsl(151, 55%, 42%)#30a66drgb(48, 166, 109)
700
hsl(152, 57%, 38%)#2a9865rgb(42, 152, 101)
800
hsl(153, 67%, 28%)#18774crgb(24, 119, 76)
900
hsl(10, 51%, 14%)#361811rgb(54, 24, 17)
Shades
Used to layout trough contrast. The transparency-scales of black and white are used to reduce complexity and create elements that adapt to their environment.
white
50
hsla(0, 0%, 100%, 0.95)#ffffffrgba(255, 255, 255, 0.95)
100
hsla(0, 0%, 100%, 0.93)#ffffffrgba(255, 255, 255, 0.93)
200
hsla(0, 0%, 100%, 0.85)#ffffffrgba(255, 255, 255, 0.85)
300
hsla(0, 0%, 100%, 0.8)#ffffffrgba(255, 255, 255, 0.8)
400
hsla(0, 0%, 100%, 0.6)#ffffffrgba(255, 255, 255, 0.6)
500
hsla(0, 0%, 100%, 0.46)#ffffffrgba(255, 255, 255, 0.46)
600
hsla(0, 0%, 100%, 0.1)#ffffffrgba(255, 255, 255, 0.1)
700
hsla(0, 0%, 100%, 0.07)#ffffffrgba(255, 255, 255, 0.07)
800
hsla(0, 0%, 0%, 0.05)#000000rgba(0, 0, 0, 0.05)
900
hsla(0, 0%, 0%, 0.02)#000000rgba(0, 0, 0, 0.02)
black
50
hsla(0, 0%, 0%, 0.02)#000000rgba(0, 0, 0, 0.02)
100
hsla(0, 0%, 0%, 0.05)#000000rgba(0, 0, 0, 0.05)
200
hsla(0, 0%, 0%, 0.07)#000000rgba(0, 0, 0, 0.07)
300
hsla(0, 0%, 0%, 0.1)#000000rgba(0, 0, 0, 0.1)
400
hsla(0, 0%, 0%, 0.19)#000000rgba(0, 0, 0, 0.19)
500
hsla(0, 0%, 0%, 0.28)#000000rgba(0, 0, 0, 0.28)
600
hsla(0, 0%, 0%, 0.52)#000000rgba(0, 0, 0, 0.52)
700
hsla(0, 0%, 0%, 0.61)#000000rgba(0, 0, 0, 0.61)
800
hsla(0, 0%, 0%, 0.71)#000000rgba(0, 0, 0, 0.71)
900
hsla(0, 0%, 0%, 0.96)#000000rgba(0, 0, 0, 0.96)