Цвет
Figma
Дизайнеры при помощи цвета: управляют акцентами, создают структуру, предупреждают о важных действиях.

Для того, чтобы цветовая палитра была одинакова во всех продуктах мы используем дизайн-токены.
Категории палитр. Дерево
В первую очередь палитры делятся на цветовые темы:
В каждой теме у нас есть 3 палитры:
Базовая (Base)
Основная (Primary)
Дополнительная (Secondary)
Базовая (Base)
Основная (Primary)
Дополнительная (Secondary)
Базовая палитра (Base)
Базовую палитру в основном используют для управлением цветом текста и иконок, фонов и обводок.

Палитра делится на :
  • Статические цвета, не имеющие состояний (Static)
  • Динамические цвета, имеющие состояния (Dynamic)

Статические цвета состоят из:
  • Цвета для статусов (Status)
  • ЧБ Цвета для текста и иконок (Text & Icons)
  • ЧБ Цвета для фона и обводки (Bg & Stroke)

Динамические цвета состоят из:
  • Transparent
  • Цвета для ссылки (Link)
day-base-static-status-positive
day-base-static-status-negative
day-base-static-status-warning
day-base-static-status-info
#3AA981
#DD4C1E
#EDBB3A
#526ED3
day-base-static-text&icons-10
day-base-static-text&icons-20
day-base-static-text&icons-30
day-base-static-text&icons-40
day-base-static-text&icons-50
day-base-static-text&icons-60
day-base-static-text&icons-70
day-base-static-text&icons-80
day-base-static-text&icons-90
#000000
#37394B
rgba(27,31,59,0.8)
rgba(27,31,59,0.6)
rgba(27,31,59,0.4)
rgba(27,31,59,0.24)
rgba(255,255,255,0.4)
rgba(255,255,255,0.7)
#FFFFFF
Static
Text & Icons
Bg & Stroke
day-base-static-bg&stroke-10
day-base-static-bg&stroke-20
day-base-static-bg&stroke-30
day-base-static-bg&stroke-40
day-base-static-bg&stroke-50
day-base-static-bg&stroke-60
day-base-static-bg&stroke-70
day-base-static-bg&stroke-80
day-base-static-bg&stroke-90
#FFFFFF
#F6F6F6
#EDEDED
#D7D7D7
#B0B0B0
#959595
#808080
#333333
#000000
Dynamic
day-base-dynamic-buttonstroke
day-base-dynamic-buttonstroke-hover
day-base-dynamic-buttonstroke-active
rgba(0,0,0,0.4)
rgba(67,68,78,0.4)
#000000
Buttonstroke
Transparent
day-base-dynamic-transparent
day-base-dynamic-transparent-hover
day-base-dynamic-transparent-active
rgba(0,0,0,0.04)
rgba(0,0,0,0.08)
rgba(0,0,0,0.1)
Link
day-base-dynamic-link
day-base-dynamic-link-hover
day-base-dynamic-link-active
day-base-dynamic-link-visited
#254DDD
#4065EE
#163BBF
#254DDD
Status
night-base-static-status-positive
night-base-static-status-negative
night-base-static-status-warning
night-base-static-status-info
#4ACE67
#EE6C42
#F6D935
#4167ED
night-base-static-text&icons-10
night-base-static-text&icons-20
night-base-static-text&icons-30
night-base-static-text&icons-40
night-base-static-text&icons-50
night-base-static-text&icons-60
night-base-static-text&icons-70
night-base-static-text&icons-80
night-base-static-text&icons-90
#FFFFFF
rgba(255,255,255,0.9)
rgba(255,255,255,0.8)
rgba(255,255,255,0.6)
rgba(255,255,255,0.4)
rgba(255,255,255,0.24)
#C7C9CC
#9299A2
#333333
Static
Text & Icons
Bg & Stroke
night-base-static-bg&stroke-10
night-base-static-bg&stroke-20
night-base-static-bg&stroke-30
night-base-static-bg&stroke-40
night-base-static-bg&stroke-50
night-base-static-bg&stroke-60
night-base-static-bg&stroke-70
night-base-static-bg&stroke-80
night-base-static-bg&stroke-90
#000000
#333333
#5C636B
#9299A2
#C7C9CC
#DDDFE0
#EAECEE
#F6F7F8
#FFFFFF
Dynamic
night-base-dynamic-buttonstroke
night-base-dynamic-buttonstroke-hover
night-base-dynamic-buttonstroke-active
rgba(255,255,255,0.7)
rgba(255,255,255,0.4)
#FFFFFF
Buttonstroke
Transparent
night-base-dynamic-transparent
night-base-dynamic-transparent-hover
night-base-dynamic-transparent-active
rgba(255,255,255,0.1)
rgba(255,255,255,0.14)
rgba(255,255,255,0.18)
Link
night-base-dynamic-link
night-base-dynamic-link-hover
night-base-dynamic-link-active
night-base-dynamic-link-visited
#7C96F4
#A1B4F9
#6279CE
#7C96F4
Status
Дизайн-система Night Palette
В рамках одного проекта рекомендуется использование одного цвета в роли акцентного.
Основная палитра подобрана из цветов, предложенных в брендбуке, но адаптированная под элементы пользовательского интерфейса. Эта палитра помогает в узнаваемости продуктов Университета ИТМО. Она ассоциирует продукт с брендом компании.
Основная палитра (Primary)
Брендбук
Дизайн-система Day Palette
day-primary-black-default
day-primary-black-hover
day-primary-black-active
#000000
#43444E
#2E314A
day-primary-red-default
day-primary-red-hover
day-primary-red-active
#F93F37
#FF5F58
#D2342D
Primary
Red
Cyan
day-primary-cyan-default
day-primary-cyan-hover
day-primary-cyan-active
#3CADC9
#1E8CA8
#2C7C90
Orange
Yellow
day-primary-orange-default
day-primary-orange-hover
day-primary-orange-active
#F68300
#FFA135
#D2620C
Black
Green
day-primary-green-default
day-primary-green-hover
day-primary-green-active
#8FB904
#A4D404
#7C9F03
Pink
day-primary-pink-default
day-primary-pink-hover
day-primary-pink-active
#F84EFA
#F16FF2
#CC25CD
Violet
day-primary-violet-default
day-primary-violet-hover
day-primary-violet-active
#7F00FF
#9635F6
#5D00BB
Blue
day-primary-blue-default
day-primary-blue-hover
day-primary-blue-active
#0B68FE
#428AFF
#2E61B4
day-primary-yellow-default
day-primary-yellow-hover
day-primary-yellow-active
#EDDC00
#E3D200
#CCB800
night-primary-white-default
night-primary-white-hover
night-primary-white-active
#FFFFFF
#B7BFCB
#8C94A0
night-primary-red-default
night-primary-red-hover
night-primary-red-active
#FF4C41
#FF5F58
#FF7F7A
Primary
Red
Cyan
night-primary-cyan-default
night-primary-cyan-hover
night-primary-cyan-active
#17CAF6
#90EBFF
#26B4D7
Orange
Yellow
night-primary-orange-default
night-primary-orange-hover
night-primary-orange-active
#FFBA33
#FBCE78
#D9A644
White
Green
night-primary-green-default
night-primary-green-hover
night-primary-green-active
#CAFD00
#E6FF82
#9DC500
Pink
night-primary-pink-default
night-primary-pink-hover
night-primary-pink-active
#CD23CF
#DD38DF
#EB52ED
Violet
night-primary-violet-default
night-primary-violet-hover
night-primary-violet-active
#973EF1
#A168DA
#A579D1
Blue
night-primary-blue-default
night-primary-blue-hover
night-primary-blue-active
#2072F8
#3E85F8
#5592F3
night-primary-yellow-default
night-primary-yellow-hover
night-primary-yellow-active
#FFFF33
#FEFE9C
#F5DD04
Дополнительная палитра (Secondary)
Для акцентных цветовых палитр «черная/белая» — “Primary/black (white) palette” в качестве дополнительных используются ЧБ Цвета “Text & Icons” и ЧБ Цвета “Bg & Stroke” в зависимости от контекста
Дополнительные цвета можно выбирать из Secondary палитр, которые содержат в себе по 8 светлых (light) и по 8 темных (dark) оттенков всех акцентных цветов.
Дополнительный цвет может использоваться, как для иллюстраций и иконок, так и для обводки или фона карточек и прочих визуальных элементов интерфейса, кроме тех, которые окрашены в акцентный цвет (например, кнопки)
Выбрав акцентный цвет, к нему можно добавлять оттенки любых цветов из дополнительной (Secondary) палитры. Не рекомендуется смешивать между собой оттенки из более чем трех палитр.
day-secondary-red-light-10
day-secondary-red-light-20
day-secondary-red-light-30
day-secondary-red-light-40
day-secondary-red-light-50
day-secondary-red-light-60
day-secondary-red-light-70
day-secondary-red-light-80
#FEEBEB
#FED9D7
#FDC5C3
#FDB2AF
#FC9F9B
#FB8C87
#FB7974
#FA655F
Secondary
Red Dark
Red Light
day-secondary-red-dark-10
day-secondary-red-dark-20
day-secondary-red-dark-30
day-secondary-red-dark-40
day-secondary-red-dark-50
day-secondary-red-dark-60
day-secondary-red-dark-70
day-secondary-red-dark-80
#E52B23
#D1170F
#BD0300
#A90000
#950000
#810000
#6D0000
#590000
Violet Dark
Violet Light
day-secondary-violet-light-10
day-secondary-violet-light-20
day-secondary-violet-light-30
day-secondary-violet-light-40
day-secondary-violet-light-50
day-secondary-violet-light-60
day-secondary-violet-light-70
day-secondary-violet-light-80
#F2E6FF
#E5CCFF
#D8B2FF
#CC99FF
#BF7FFF
#B266FF
#A64DFF
#9933FF
day-secondary-violet-dark-10
day-secondary-violet-dark-20
day-secondary-violet-dark-30
day-secondary-violet-dark-40
day-secondary-violet-dark-50
day-secondary-violet-dark-60
day-secondary-violet-dark-70
day-secondary-violet-dark-80
#7200E6
#6600CC
#5900B2
#4C0099
#400080
#330066
#26004D
#190033
Blue Dark
Blue Light
day-secondary-blue-light-10
day-secondary-blue-light-20
day-secondary-blue-light-30
day-secondary-blue-light-40
day-secondary-blue-light-50
day-secondary-blue-light-60
day-secondary-blue-light-70
day-secondary-blue-light-80
#E6EFFE
#CEE1FF
#B5D1FE
#9DC3FF
#85B3FE
#6DA4FE
#5596FF
#3C86FE
day-secondary-blue-dark-10
day-secondary-blue-dark-20
day-secondary-blue-dark-30
day-secondary-blue-dark-40
day-secondary-blue-dark-50
day-secondary-blue-dark-60
day-secondary-blue-dark-70
day-secondary-blue-dark-80
#0A5EE5
#0955CC
#084BB2
#074299
#063980
#053066
#04264D
#031C33
Cyan Dark
Cyan Light
day-secondary-cyan-light-10
day-secondary-cyan-light-20
day-secondary-cyan-light-30
day-secondary-cyan-light-40
day-secondary-cyan-light-50
day-secondary-cyan-light-60
day-secondary-cyan-light-70
day-secondary-cyan-light-80
#E5F9FE
#CCF4FE
#B2EEFD
#99E9FD
#80E3FC
#67DEFC
#4EDAFD
#34D4FC
day-secondary-cyan-dark-10
day-secondary-cyan-dark-20
day-secondary-cyan-dark-30
day-secondary-cyan-dark-40
day-secondary-cyan-dark-50
day-secondary-cyan-dark-60
day-secondary-cyan-dark-70
day-secondary-cyan-dark-80
#01B4E2
#019FCC
#018AB2
#017599
#016080
#014B66
#01364D
#012133
Orange Dark
Orange Light
day-secondary-orange-light-10
day-secondary-orange-light-20
day-secondary-orange-light-30
day-secondary-orange-light-40
day-secondary-orange-light-50
day-secondary-orange-light-60
day-secondary-orange-light-70
day-secondary-orange-light-80
#FFF8EA
#FFF1D6
#FFEAC1
#FFE3AD
#FFDC98
#FFD585
#FFCF71
#FFC85C
day-secondary-orange-dark-10
day-secondary-orange-dark-20
day-secondary-orange-dark-30
day-secondary-orange-dark-40
day-secondary-orange-dark-50
day-secondary-orange-dark-60
day-secondary-orange-dark-70
day-secondary-orange-dark-80
#E6A72E
#CC9529
#B38324
#99711F
#805F1A
#664C14
#4D3A0F
#33280A
Pink Dark
Pink Light
day-secondary-pink-light-10
day-secondary-pink-light-20
day-secondary-pink-light-30
day-secondary-pink-light-40
day-secondary-pink-light-50
day-secondary-pink-light-60
day-secondary-pink-light-70
day-secondary-pink-light-80
#FEEDFE
#FEDCFE
#FDC9FD
#FCB8FD
#FBA6FC
#FB95FC
#FB84FC
#FA71FB
day-secondary-pink-dark-10
day-secondary-pink-dark-20
day-secondary-pink-dark-30
day-secondary-pink-dark-40
day-secondary-pink-dark-50
day-secondary-pink-dark-60
day-secondary-pink-dark-70
day-secondary-pink-dark-80
#DF47E1
#C640C8
#AD39AF
#943296
#7B2B7D
#622464
#491D4B
#301632
Green Dark
Green Light
day-secondary-green-light-10
day-secondary-green-light-20
day-secondary-green-light-30
day-secondary-green-light-40
day-secondary-green-light-50
day-secondary-green-light-60
day-secondary-green-light-70
day-secondary-green-light-80
#F9FEE6
#F4FECD
#EFFDB4
#EAFD9B
#E4FD82
#DFFD69
#DAFD51
#D5FC37
day-secondary-green-dark-10
day-secondary-green-dark-20
day-secondary-green-dark-30
day-secondary-green-dark-40
day-secondary-green-dark-50
day-secondary-green-dark-60
day-secondary-green-dark-70
day-secondary-green-dark-80
#B6E204
#A1C904
#8DBF04
#78A403
#648A03
#4F6F02
#3A5502
#263A01
Yellow Dark
Yellow Light
day-secondary-yellow-light-10
day-secondary-yellow-light-20
day-secondary-yellow-light-30
day-secondary-yellow-light-40
day-secondary-yellow-light-50
day-secondary-yellow-light-60
day-secondary-yellow-light-70
day-secondary-yellow-light-80
#FEFEE6
#FEFECE
#FDFDB6
#FDFD9E
#FCFC85
#FCFC6D
#FCFC56
#FBFB3D
day-secondary-yellow-dark-10
day-secondary-yellow-dark-20
day-secondary-yellow-dark-30
day-secondary-yellow-dark-40
day-secondary-yellow-dark-50
day-secondary-yellow-dark-60
day-secondary-yellow-dark-70
day-secondary-yellow-dark-80
#E1E10B
#C8C80A
#AFAF09
#969608
#7D7D07
#646406
#4B4B04
#323203
night-secondary-red-light-10
night-secondary-red-light-20
night-secondary-red-light-30
night-secondary-red-light-40
night-secondary-red-light-50
night-secondary-red-light-60
night-secondary-red-light-70
night-secondary-red-light-80
#FD5C53
#FC6D64
#FA7D76
#F98E87
#F79E98
#F6AEAA
#F5BFBB
#F3CFCD
Secondary
Red Dark
Red Light
night-secondary-red-dark-10
night-secondary-red-dark-20
night-secondary-red-dark-30
night-secondary-red-dark-40
night-secondary-red-dark-50
night-secondary-red-dark-60
night-secondary-red-dark-70
night-secondary-red-dark-80
#330F0D
#4C1713
#661E1A
#7F2620
#992E27
#B2352D
#CC3D34
#E5443A
Violet Dark
Violet Light
night-secondary-violet-light-10
night-secondary-violet-light-20
night-secondary-violet-light-30
night-secondary-violet-light-40
night-secondary-violet-light-50
night-secondary-violet-light-60
night-secondary-violet-light-70
night-secondary-violet-light-80
#942BFD
#9E41FC
#A857FA
#B36DF9
#BD83F7
#C798F6
#D1AEF5
#DCC4F3
night-secondary-violet-dark-10
night-secondary-violet-dark-20
night-secondary-violet-dark-30
night-secondary-violet-dark-40
night-secondary-violet-dark-50
night-secondary-violet-dark-60
night-secondary-violet-dark-70
night-secondary-violet-dark-80
#1C0433
#29064D
#370866
#450B80
#530D99
#600FB2
#6E11CC
#7C13E5
Blue Dark
Blue Light
night-secondary-blue-light-10
night-secondary-blue-light-20
night-secondary-blue-light-30
night-secondary-blue-light-40
night-secondary-blue-light-50
night-secondary-blue-light-60
night-secondary-blue-light-70
night-secondary-blue-light-80
#357FF7
#4A8CF6
#5E98F5
#73A5F5
#88B1F4
#9DBEF3
#B2CAF2
#C6D7F2
night-secondary-blue-dark-10
night-secondary-blue-dark-20
night-secondary-blue-dark-30
night-secondary-blue-dark-40
night-secondary-blue-dark-50
night-secondary-blue-dark-60
night-secondary-blue-dark-70
night-secondary-blue-dark-80
#061732
#0A224A
#0D2E63
#10397C
#134595
#1650AD
#1A5CC6
#1D67DF
Cyan Dark
Cyan Light
night-secondary-cyan-light-10
night-secondary-cyan-light-20
night-secondary-cyan-light-30
night-secondary-cyan-light-40
night-secondary-cyan-light-50
night-secondary-cyan-light-60
night-secondary-cyan-light-70
night-secondary-cyan-light-80
#2CCEF6
#42D1F5
#58D5F5
#6ED9F4
#83DDF3
#99E1F3
#AFE5F2
#C5E8F1
night-secondary-cyan-dark-10
night-secondary-cyan-dark-20
night-secondary-cyan-dark-30
night-secondary-cyan-dark-40
night-secondary-cyan-dark-50
night-secondary-cyan-dark-60
night-secondary-cyan-dark-70
night-secondary-cyan-dark-80
#052831
#073D4A
#095163
#0B657B
#0E7994
#108DAD
#12A1C5
#14B6DE
Orange Dark
Orange Light
night-secondary-orange-light-10
night-secondary-orange-light-20
night-secondary-orange-light-30
night-secondary-orange-light-40
night-secondary-orange-light-50
night-secondary-orange-light-60
night-secondary-orange-light-70
night-secondary-orange-light-80
#FDBF46
#FCC559
#FACA6C
#F9CF7F
#F7D591
#F6DAA4
#F5E0B7
#F3E5CA
night-secondary-orange-dark-10
night-secondary-orange-dark-20
night-secondary-orange-dark-30
night-secondary-orange-dark-40
night-secondary-orange-dark-50
night-secondary-orange-dark-60
night-secondary-orange-dark-70
night-secondary-orange-dark-80
#33250A
#4D380F
#664A14
#805D19
#996F1F
#B28224
#CC9529
#E5A72E
Pink Dark
Pink Light
night-secondary-pink-light-10
night-secondary-pink-light-20
night-secondary-pink-light-30
night-secondary-pink-light-40
night-secondary-pink-light-50
night-secondary-pink-light-60
night-secondary-pink-light-70
night-secondary-pink-light-80
#EA60EB
#EA70EC
#EB80EC
#EC90ED
#EDA0ED
#EDB0EE
#EEC0EE
#EFD0EF
night-secondary-pink-dark-10
night-secondary-pink-dark-20
night-secondary-pink-dark-30
night-secondary-pink-dark-40
night-secondary-pink-dark-50
night-secondary-pink-dark-60
night-secondary-pink-dark-70
night-secondary-pink-dark-80
#2F102F
#461846
#5D205E
#752875
#8C308D
#A338A4
#BA40BC
#D248D3
Green Dark
Green Light
night-secondary-green-light-10
night-secondary-green-light-20
night-secondary-green-light-30
night-secondary-green-light-40
night-secondary-green-light-50
night-secondary-green-light-60
night-secondary-green-light-70
night-secondary-green-light-80
#CEFC18
#D2FA30
#D6F948
#D9F860
#DDF678
#E1F590
#E5F4A8
#E8F3C0
night-secondary-green-dark-10
night-secondary-green-dark-20
night-secondary-green-dark-30
night-secondary-green-dark-40
night-secondary-green-dark-50
night-secondary-green-dark-60
night-secondary-green-dark-70
night-secondary-green-dark-80
#283300
#3D4C00
#516500
#657E00
#799800
#8EB100
#A2CA00
#B6E400
Yellow Dark
Yellow Light
night-secondary-yellow-light-10
night-secondary-yellow-light-20
night-secondary-yellow-light-30
night-secondary-yellow-light-40
night-secondary-yellow-light-50
night-secondary-yellow-light-60
night-secondary-yellow-light-70
night-secondary-yellow-light-80
#FDFD46
#FCFC59
#FAFA6C
#F9F97F
#F7F791
#F6F6A4
#F5F5B7
#F3F3CA
night-secondary-yellow-dark-10
night-secondary-yellow-dark-20
night-secondary-yellow-dark-30
night-secondary-yellow-dark-40
night-secondary-yellow-dark-50
night-secondary-yellow-dark-60
night-secondary-yellow-dark-70
night-secondary-yellow-dark-80
#33330A
#4D4D0F
#666614
#80801A
#99991F
#B2B224
#CCCC29
#E5E52E