Reminder: Web Accessibility Compliance Law in effect
Learn how to meet accessibility standardsStyles & Specifications
This page lists various CSS and other specs to be used by vendors when citing our Sitefinity content management system. For further information, please email: ucd-oit-helpdesk@cuanschutz.edu
Heading One
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 34px;
font-weight: 900;
line-height: 37.4px;
margin-bottom: 10px;
margin-top: 20px;
Heading Two
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 26px;
font-weight: 900;
line-height: 28.6px;
margin-bottom: 10px;
margin-top: 20px;
Heading Three
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 900;
line-height: 24.2px;
margin-bottom: 10px;
margin-top: 20px;
Heading Four
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 900;
line-height: 19.8px;
margin-bottom: 10px;
margin-top: 10px;
Heading Five
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 900;
line-height: 17.6px;
margin-bottom: 10px;
margin-top: 10px;
Heading Six
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 900;
line-height: 17.6px;
margin-bottom: 10px;
margin-top: 10px;
Heading One Regular
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 37.4px;
margin-bottom: 10px;
margin-top: 20px;
Heading Two Regular
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 26px;
font-weight: 400;
line-height: 28.6px;
margin-bottom: 10px;
margin-top: 20px;
Heading Three Regular
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 24.2px;
margin-bottom: 10px;
margin-top: 20px;
Heading One Thin
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 34px;
font-weight: 300;
line-height: 37.4px;
margin-bottom: 10px;
margin-top: 0px;
Heading Two Thin
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 26px;
font-weight: 300;
line-height: 28.6px;
margin-bottom: 10px;
margin-top: 0px;
Heading Three Thin
box-sizing: border-box;
color: rgb(51, 51, 51);
font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 300;
line-height: 24.2px;
margin-bottom: 10px;
margin-top: 0px;
Body text. Let your imagination just wonder around when you're doing these things. Everybody needs a friend. This is truly an almighty mountain.
box-sizing: border-box;
color: rgb(0, 0, 0);
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 21px;
margin-bottom: 16px;
margin-top: 0px;
box-sizing: border-box;
color: rgb(14, 72, 173);
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 23.8px;
text-align: left;
text-decoration-color: rgb(14, 72, 173);
text-decoration-line: underline;
text-decoration-style: solid;
box-sizing: border-box;
color: rgb(102,17,204);
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 23.8px;
text-align: left;
text-decoration-color: rgb(102,17,204);
text-decoration-line: underline;
text-decoration-style: solid;
CU Branded Utility Classes
Borders
| Class | RGBA value | Visual |
| CU_white | (255, 255, 255, 1) | |
| CU_black | (0, 0, 0, 1) | |
| CU_grayLight | (221, 221, 221, 1) | |
| CU_gray | (153, 153, 153, 1) | |
| CU_grayDark | (89, 89, 85, 1) | |
| CU_goldLight | (225, 214, 187, 1) | |
| CU_gold | (207, 184, 124, 1) | |
| CU_goldDark | (165, 150, 105, 1) |
Border Width
| Class | Value | Result |
| border-1 | border-width: 1px; | All borders, 1px width |
| border-2 | border-width: 2px; | All borders, 2px width |
| border-3 | border-width: 3px; | All borders, 3px width |
| border-4 | border-width: 4px; | All borders, 4px width |
| border-5 | border-width: 5px; | All borders, 5px width |
* You can also specify individual borders and their width, up to 5px. For example, using 'border-right-3' would produce a 3px width border on the right side only. It can be combined with other individual border widths to create some interesting results
.
Backgrounds
| Class | RGBA value | Visual |
| bg-CU_transparent | (0, 0, 0, 0) | |
| bg-CU_white | (255, 255, 255, 1) | |
| bg-CU_whiteTransparent | (255, 255, 255, .7) | |
| bg-CU_black | (0, 0, 0, 1) | |
| bg-CU_blackTransparent | (0, 0, 0, .7) | |
| bg-CU_grayLight | (221, 221, 221, 1) | |
| bg-CU_gray | (153, 153, 153, 1) | |
| bg-CU_grayDark | (89, 89, 85, 1) | |
| bg-CU_goldLight* | (225, 214, 187, 1) | |
| bg-CU_gold* | (207, 184, 124, 1) | |
| bg-CU_goldDark* | (165, 150, 105, 1) |
Text Color
| Class | RGBA value | Visual |
| text-CU_white | (255, 255, 255, 1) | Sample |
| text-CU_black | (0, 0, 0, 1) | Sample |
| text-CU_gold | (207, 184, 124, 1) | Sample |
Approved Color Combinations
| Text Class | Background Class | Visual |
| text-CU_black | bg-CU_white | Sample |
| text-CU_black | bg-CU_whiteTransparent | Sample |
| text-CU_white | bg-CU_black | Sample |
| text-CU_white | bg-CU_blackTransparent | Sample |
| text-CU_gold | bg-CU_black | Sample |
| text-CU_black | bg-CU_grayLight | Sample |
| text-CU_black | bg-CU_gray | Sample |
| text-CU_white | bg-CU_grayDark | Sample |
| text-CU_black | bg-CU_goldLight | Sample |
| text-CU_black | bg-CU_gold | Sample |
| text-CU_black | bg-CU_goldDark | Sample |