Brand Standards: Web
Web Color Palette
The USU template has a predefined color palette that can be accessed using CSS classes. Do not use colors outside of this prescribed color palette. Below are some general user guidelines when it comes to using the provided colors.
Primary Colors
Official Aggie Blue
HEX: #0F2439
White
HEX: #FFFFFF
Secondary Colors
Secondary colors are mostly used as background colors. The "blue" color is also assigned to all content headings in the web template.
Blue
HEX: #384660
Gray
HEX: #CED4DA
Extended Color Palette
Most of the following colors should be used as background colors. Some may be assigned as text color in the web template based on specific contexts.
Blues
Blue Light
HEX: #E1EAF9
Blue Dark
HEX: #2F3A50
Blue Darker
HEX: #252F40
Grays
Gray Lighter
HEX: #E9ECEF
Gray Light
HEX: #DEE2E6
Gray Dark
HEX: #838898
Gray Darker
HEX: #495057
Blacks
Black Light
HEX: #343A40
Black
HEX: #1E252B
Accent Colors
The following background colors can have accessibility issues when combined with smaller text sizes. Please check accessibility tools (color contrast) when using them.
Bright Light
HEX: #4494DA
Uses
Areas you want to stand out, such as full width content areas, card headers, and buttons.
Bright Light Text
HEX: #4494DA
Uses
Often used as an alternate sub-heading color (h3 heading) to help differentiate lower-level headings or complex heading structures.
Brick
HEX: #C44E28
Uses
Not often used as a background color swatch. Use sparingly. Can be used as a "summer" color designation.
Brick Text
HEX: #C44E28
Uses
Can be used as a subheading modifier to help differentiate mutliple heading levels in close proximity.
Green Light
HEX: #7D9C3A
Uses
Not often used as a background color swatch. Use sparingly. Can be used as a "spring" color designation, or with call-to-action buttons.
Green Light Text
HEX: #7D9C3A
Uses
Not often used for stand-alone text.
Grape
HEX: #543035
Uses
Not often used as a background color swatch. Use sparingly. Can be used as a "fall" color designation.
Grape Text
HEX: #543035
Uses
This color is reserved for only the most critical warnings or signal that a requested operation failed.
Contextual Colors
Success
HEX: #588038
Uses
This color is reserved for giving feedback to the user that an operation was completed successfully.
Success Text
HEX: #588038
Uses
This color is reserved for giving feedback to the user that an operation was successfully completed.
Info
HEX: #226BAA
Uses
This color is used to bring important information to the attention of the user.
Info Text
HEX: #226BAA
Uses
This color is used to bring important information to the attention of the user.
Warning
HEX: #AE6002
Uses
This color is reserved for conveying critical information to the user that may have a detrimental impact.
Warning Text
HEX: #AE6002
Uses
This color is reserved for conveying critical information to the user that may have a detrimental impact.
Danger
HEX: #A6260D
Uses
This color is reserved for only the most critical warnings or to signal that a requested operation failed.
Danger Text
HEX: #A6260D
Uses
This color is reserved for only the most critical warnings or to signal that a requested operation failed.