Color

Syracuse University colors and tints

Primary Colors

Example	Value	Token
	#F76900	$su-orange-primary
	#FFFFFF	$white
	#000E54	$su-blue-primary

Secondary Colors

Example	Value	Token
	#FF431B	$su-orange-medium
	#FF8E00	$su-orange-light
	#203299	$su-blue-medium
	#2B72D7	$su-blue-light
	#000000	$black
	#707780	$su-gray-medium
	#ADB3B8	$su-gray-light

Special Use Colors

Example	Value	Token
	#404040	$su-gray-dark
	#D74100	$su-orange-dark

Color Tints

Tints are used in the design system for small elements such as borders, background colors and box shadows.

Important

Never use tints for major design elements and ensure their usage adheres to accessibility standards.

Primary Orange Tints

Example	Value	Token
	#F76900	$su-orange-primary-100
	#F8781A	$su-orange-primary-90
	#F98733	$su-orange-primary-80
	#F9964D	$su-orange-primary-70
	#FAA566	$su-orange-primary-60
	#FBB480	$su-orange-primary-50
	#FCC399	$su-orange-primary-40
	#FDD2B3	$su-orange-primary-30
	#FDE1CC	$su-orange-primary-20
	#FEF0E6	$su-orange-primary-10

Primary Blue Tints

Example	Value	Token
	#000E54	$su-blue-primary-100
	#1A2665	$su-blue-primary-90
	#333E76	$su-blue-primary-80
	#4D5687	$su-blue-primary-70
	#666E98	$su-blue-primary-60
	#8087AA	$su-blue-primary-50
	#999FBB	$su-blue-primary-40
	#B3B7CC	$su-blue-primary-30
	#CCCFDD	$su-blue-primary-20
	#E6E7EE	$su-blue-primary-10

Dark Orange Tints

Example	Value	Token
	#D74100	$su-orange-dark-100
	#DB541A	$su-orange-dark-90
	#DF6733	$su-orange-dark-80
	#E37A4D	$su-orange-dark-70
	#E78d66	$su-orange-dark-60
	#EBA080	$su-orange-dark-50
	#EFB399	$su-orange-dark-40
	#F3C6B3	$su-orange-dark-30
	#F7D9CC	$su-orange-dark-20
	#FBECE6	$su-orange-dark-10

Medium Orange Tints

Example	Value	Token
	#FF431B	$su-orange-medium-100
	#FF5632	$su-orange-medium-90
	#FF6949	$su-orange-medium-80
	#FF7B5F	$su-orange-medium-70
	#FF8E76	$su-orange-medium-60
	#FFA18D	$su-orange-medium-50
	#FFB4A4	$su-orange-medium-40
	#FFC7BB	$su-orange-medium-30
	#FFD9D1	$su-orange-medium-20
	#FFECE8	$su-orange-medium-10

Light Orange Tints

Example	Value	Token
	#FF8E00	$su-orange-light-100
	#FF991A	$su-orange-light-90
	#FFA533	$su-orange-light-80
	#FFB04D	$su-orange-light-70
	#FFBB66	$su-orange-light-60
	#FFC780	$su-orange-light-50
	#FFD299	$su-orange-light-40
	#FFDDB3	$su-orange-light-30
	#FFE8CC	$su-orange-light-20
	#FFF4E6	$su-orange-light-10

Medium Blue Tints

Example	Value	Token
	#203299	$su-blue-medium-100
	#3647A3	$su-blue-medium-90
	#4D5BAD	$su-blue-medium-80
	#6370B8	$su-blue-medium-70
	#7984C2	$su-blue-medium-60
	#9099CC	$su-blue-medium-50
	#A6ADD6	$su-blue-medium-40
	#BCC2E0	$su-blue-medium-30
	#D2D6EB	$su-blue-medium-20
	#E9EBF5	$su-blue-medium-10

Light Blue Tints

Example	Value	Token
	#2B72D7	$su-blue-light-100
	#4080DB	$su-blue-light-90
	#558EDF	$su-blue-light-80
	#6B9CE3	$su-blue-light-70
	#80AAE7	$su-blue-light-60
	#95B9EB	$su-blue-light-50
	#AAC7EF	$su-blue-light-40
	#BFD5F3	$su-blue-light-30
	#D5E3F7	$su-blue-light-20
	#EAF1FB	$su-blue-light-10

Dark Gray Tints

Example	Value	Token
	#404040	$su-gray-dark-100
	#535353	$su-gray-dark-90
	#666666	$su-gray-dark-80
	#797979	$su-gray-dark-70
	#8C8C8C	$su-gray-dark-60
	#A0A0A0	$su-gray-dark-50
	#B3B3B3	$su-gray-dark-40
	#C6C6C6	$su-gray-dark-30
	#D9D9D9	$su-gray-dark-20
	#ECECEC	$su-gray-dark-10

Medium Gray Tints

Example	Value	Token
	#707780	$su-gray-medium-100
	#7E858D	$su-gray-medium-90
	#8D9299	$su-gray-medium-80
	#9BA0A6	$su-gray-medium-70
	#A9ADB3	$su-gray-medium-60
	#B8BBC0	$su-gray-medium-50
	#C6C9CC	$su-gray-medium-40
	#D4D6D9	$su-gray-medium-30
	#E2E4E6	$su-gray-medium-20
	#F1F1F2	$su-gray-medium-10

Light Gray Tints

Example	Value	Token
	#ADB3B8	$su-gray-light-100
	#B5BBBF	$su-gray-light-90
	#BDC2C6	$su-gray-light-80
	#C6CACD	$su-gray-light-70
	#CED1D4	$su-gray-light-60
	#D6D9DC	$su-gray-light-50
	#DFE1E3	$su-gray-light-40
	#E6E8EA	$su-gray-light-30
	#EFF0F1	$su-gray-light-20
	#F7F7F8	$su-gray-light-10