Arrow_down_24.svgchevron-right-s-16icon-bars1-72icon-bars10-72icon-bars11-72icon-bars12-72icon-bars13-72icon-bars2-72icon-bars3-72icon-bars4-72icon-bars5-72icon-bars6-72icon-bars7-72icon-bars8-72icon-bars9-72storybook-16-solid

Определение

Цвет — это инструмент управления вниманием пользователя: он помогает выделять главное, а не отвлекать от того, что важно. Цвета подобраны так, чтобы они выглядели насыщенно, создавали контраст и привлекали внимание к определенным областям страницы. Чтобы сохранить целостность и узнаваемость системы нельзя нарушать концепцию и создавать новые цвета.

Палитра

White#ffffff
Black-60#43484e
Black-70#3b4045
Black-80#2c3034
Black-90#1e2023
Black#000000
Gray-10#f4f6f7
Gray-20#eaecef
Gray-30#dfe3e6
Gray-40#cad0d6
Gray-50#afb9c1
Gray-60#94a1ad
Gray-70#85919c
Gray-80#76818a
Gray-90#606970
Gray-100#4a5157
Blue-10#e8f0fd
Blue-20#d1e2fc
Blue-30#b9d3fa
Blue-40#8bb6f7
Blue-50#5191f3
Blue-60#176def
Blue-70#1562d7
Blue-80#1257bf
Blue-90#0f479b
Blue-100#0b3778
Yellow-10#fef8e9
Yellow-20#fef1d3
Yellow-30#fdeabd
Yellow-40#fcdc90
Yellow-50#fbca59
Yellow-60#ffc700
Yellow-70#e0a61f
Yellow-80#c7941b
Yellow-90#a27816
Yellow-100#7d5d11
Orange-10#fff3ea
Orange-20#ffe6d5
Orange-30#ffdabf
Orange-40#ffc195
Orange-50#ffa260
Orange-60#ff832b
Orange-70#e57627
Orange-80#cc6922
Orange-90#a6551c
Orange-100#804115
Red-10#ffeced
Red-20#fedada
Red-30#fdc7c8
Red-40#fda2a3
Red-50#fb7475
Red-60#fa4547
Red-70#e13e40
Red-80#c83739
Red-90#a32d2e
Red-100#7d2223
Magenta-10#feeef4
Magenta-20#fddcea
Magenta-30#fccbdf
Magenta-40#faa8ca
Magenta-50#f77daf
Magenta-60#f45295
Magenta-70#dc4a86
Magenta-80#c34277
Magenta-90#9f3561
Magenta-100#7a294b
Purple-10#f4eefe
Purple-20#e9ddfc
Purple-30#dfccfb
Purple-40#c9a9f9
Purple-50#ae7ff5
Purple-60#9354f2
Purple-70#844cda
Purple-80#7643c2
Purple-90#60379d
Purple-100#492a79
Indigo-10#eeedfc
Indigo-20#dddcf9
Indigo-30#cbcaf5
Indigo-40#a9a7ef
Indigo-50#7e7ce7
Indigo-60#5350df
Indigo-70#4b48c9
Indigo-80#4240b2
Indigo-90#363491
Indigo-100#292870
Cyan-10#ebf7ff
Cyan-20#d6efff
Cyan-30#c2e8ff
Cyan-40#99d8ff
Cyan-50#66c5ff
Cyan-60#33b1ff
Cyan 70#2e9fe5
Cyan-80#298ecc
Cyan-90#2173a6
Cyan-100#195980
Turquoise-10#edf4f9
Turquoise-20#dae9f2
Turquoise-30#c8dfeb
Turquoise-40#a3c9df
Turquoise-50#75aece
Turquoise-60#4793be
Turquoise-70#4084ab
Turquoise-80#397698
Turquoise 90#2e607b
Turquoise-100#23495f
Teal-10#eef8f8
Teal-20#ddf1f1
Teal-30#cceaea
Teal-40#aadcdc
Teal-50#80cbcb
Teal-60#55bab9
Teal-70#4ca7a7
Teal-80#449594
Teal-90#377978
Teal-100#2a5d5d
Green-10#e9f7f1
Green-20#d4efe2
Green-30#bee7d3
Green-40#93d7b7
Green-50#5dc392
Green-60#27af6e
Green-70#239d63
Green-80#1f8c58
Green-90#197247
Green-100#135737
Kiwi-10#f0f8ea
Kiwi-20#e1f1d5
Kiwi-30#d2eac0
Kiwi-40#b4db96
Kiwi-50#8fca61
Kiwi-60#6ab82d
Kiwi-70#5fa628
Kiwi-80#559324
Kiwi-90#45781d
Kiwi-100#355c16