Color

Guidelines

Color utilities are used to customize a design by changing the colors of an element. The following pillars are the foundation for how color should be used and applied on Syracuse University websites:

Communication Over Decoration

Use of color should adhere to Syracuse University brand standards as well as being purposeful, rational and supporting of the content.

Color Should Be Accessible

Run tests for correct color contrast when choosing color and never rely solely on color to convey information.

Color Should Focus Attention

The use of color should help bring attention to what matters most. Color should support the hierarchy of the page. Each use of primary Syracuse University Orange, for example, needs to be strategic and impactful.

Text Color Utilities

Example	Class Name	Value
Syracuse University	.text-black	#000000
Syracuse University	.text-white	#FFFFFF
Syracuse University	.text-gray-light	#8C939B
Syracuse University	.text-gray	#333333
Syracuse University	.text-blue	#000E54
Syracuse University	.text-blue-light	#203299
Syracuse University	.text-orange	#F76900
Syracuse University	.text-orange-dark	#CD3E00

Background Color Utilities

These utilities can be used to apply a background color to elements. The naming convention is .background combined with any of our defined colors and tints, for example: .background-gray-light-60.

Example	Class Name	Value
	.background-black	#000000
	.background-white	#FFFFFF
	.background-gray-light	#FAFAFA
	.background-gray	#F8F8F8
	.background-gray-dark	#333333
	.background-blue-light	#E6E7EE
	.background-blue-medium	#203299
	.background-blue	#000E54
	.background-orange-light	#FF8E00
	.background-orange	#FF431B
	.background-orange-dark	#CD3E00

Gradient Color Utilities

These utilities can be used to apply a gradient to elements.

Example	Class Name	Placement	Value
Syracuse University	.background-blue-gradient	Background of an element	background: linear-gradient(118deg, $su-blue-primary, 30.08%, $su-blue-medium 98.9%);
Syracuse University	.text-orange-gradient	Orange text gradient. Used on large links with animated arrows in sock area, above footer of syracuse.edu	background: linear-gradient(84deg, $su-orange-medium 0%, $su-orange-primary 50.67%, $su-orange-light 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Syracuse University	.image-overlay-white-left	For use as an overlay on an image. Can be seen in use on the hero on syracuse.edu home page. Left refers to the placement of the content. If there is any text, the white will be less transparent on the left.	background: linear-gradient(185deg, transparent 37% 60%, rgba(255, 255, 255, 0.5019607843) 70%, rgba(255, 255, 255, 0.8) 77%, #FFF 84.79%); @include breakpoint(md){ background: linear-gradient(188deg, transparent 32% 55%, #ffffff80 65%, #ffffffcc 72%, #FFF 79.79%); }
Syracuse University	.image-overlay-white-right	For use as an overlay on an image. Can be seen in use on the hero on syracuse.edu home page. Right refers to the placement of the content. If there is any text, the white will be less transparent on the right.	background: linear-gradient(175deg, transparent 37% 60%, rgba(255, 255, 255, 0.5019607843) 70%, rgba(255, 255, 255, 0.8) 77%, #FFF 84.79%); @include breakpoint(md){ background: linear-gradient(172deg, transparent 32% 55%, #ffffff80 65%, #ffffffcc 72%, #FFF 79.79%); }
Syracuse University	.image-overlay-black	For use as an overlay on an image. Can be seen on full bleed card stories on the syacuse.edu home page.	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, #000 100%);