Color
Utilities to add color to text and background elements
Utilities to add color to text and background elements
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:
Use of color should adhere to Syracuse University brand standards as well as being purposeful, rational and supporting of the content.
Run tests for correct color contrast when choosing color and never rely solely on color to convey information.
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.
Example | Class Name | Value |
---|---|---|
Syracuse University |
.text-black | #000000 |
Syracuse University |
.text-white | #FFFFFF |
Syracuse University |
.text-gray-light | #707780 |
Syracuse University |
.text-gray | #404040 |
Syracuse University |
.text-blue-light | #203299 |
Syracuse University |
.text-blue | #000E54 |
Syracuse University |
.text-orange | #F76900 |
Syracuse University |
.text-orange-dark | #D74100 |
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 | #ADB3B8 | |
.background-gray | #707780 | |
.background-gray-dark | #203299 | |
.background-blue-light | #2B72D7 | |
.background-blue-medium | #203299 | |
.background-blue | #000E54 | |
.background-orange-light | #FF8E00 | |
.background-orange | #FF431B | |
.background-orange-dark | #D74100 |