Stylesheet

The Illinois stylesheet defines several CSS custom properties which make it easier to use colors, fonts, and other brand resources.

To use the stylesheet on a web page, add this line to your HTML:

<link rel="stylesheet" href="https://cdn.brand.illinois.edu/illinois.css">

Colors

All brand colors are available as custom properties, and can be used in place of official hex colors. For example:

p {
  color: var(--il-blue); /* instead of color: #13294b */
}
.banner {
  background-color: var(--il-orange); /* instead of color: #ff5f05 */
}

This is the complete set of brand color properties:

Color	Property	Example
`#c84113`	`--il-altgeld`	`color: var(--il-altgeld);`
`#009fd4`	`--il-arches`	`color: var(--il-arches);`
`#277cab`	`--il-arches-50`	`color: var(--il-arches-50);`
`#196389`	`--il-arches-60`	`color: var(--il-arches-60);`
`#55b6d4`	`--il-arches-70`	`color: var(--il-arches-70);`
`#8dd1eb`	`--il-arches-80`	`color: var(--il-arches-80);`
`#c7edf8`	`--il-arches-90`	`color: var(--il-arches-90);`
`#e9f6fb`	`--il-arches-95`	`color: var(--il-arches-95);`
`#5c0e41`	`--il-berry`	`color: var(--il-berry);`
`#000000`	`--il-black`	`color: var(--il-black);`
`#13294b`	`--il-blue`	`color: var(--il-blue);`
`#11181d`	`--il-blue-10`	`color: var(--il-blue-10);`
`#000333`	`--il-blue-15`	`color: var(--il-blue-15);`
`#2f4668`	`--il-blue-30`	`color: var(--il-blue-30);`
`#4877b8`	`--il-blue-50`	`color: var(--il-blue-50);`
`#98afd2`	`--il-blue-70`	`color: var(--il-blue-70);`
`#b5c8e2`	`--il-blue-80`	`color: var(--il-blue-80);`
`#e1e7f1`	`--il-blue-90`	`color: var(--il-blue-90);`
`#7d3e13`	`--il-earth`	`color: var(--il-earth);`
`#fcb316`	`--il-harvest`	`color: var(--il-harvest);`
`#1d58a7`	`--il-industrial`	`color: var(--il-industrial);`
`#ff5f05`	`--il-orange`	`color: var(--il-orange);`
`#a72f10`	`--il-orange-40`	`color: var(--il-orange-40);`
`#007e8e`	`--il-patina`	`color: var(--il-patina);`
`#006230`	`--il-prairie`	`color: var(--il-prairie);`
`#707372`	`--il-storm`	`color: var(--il-storm);`
`#252525`	`--il-storm-10`	`color: var(--il-storm-10);`
`#474948`	`--il-storm-30`	`color: var(--il-storm-30);`
`#8e9090`	`--il-storm-60`	`color: var(--il-storm-60);`
`#aaabab`	`--il-storm-70`	`color: var(--il-storm-70);`
`#c6c7c6`	`--il-storm-80`	`color: var(--il-storm-80);`
`#f4f4f4`	`--il-storm-95`	`color: var(--il-storm-95);`
`#ffffff`	`--il-white`	`color: var(--il-white);`

Deprecated

These properties have been deprecated and will be removed in a future version.

Deprecated property	Use instead
`--il-altgeld-darker-1`	`--il-orange-40`
`--il-arches-darker-1`	`--il-arches-50`
`--il-arches-darker-2`	`--il-arches-60`
`--il-arches-lighter-1`	`--il-arches-70`
`--il-arches-lighter-2`	`--il-arches-80`
`--il-arches-lighter-3`	`--il-arches-90`
`--il-arches-lighter-4`	`--il-arches-95`
`--il-blue-darker-1`	`--il-blue-15`
`--il-blue-darker-2`	`--il-blue-10`
`--il-blue-lighter-1`	`--il-blue-30`
`--il-blue-lighter-2`	`--il-blue-50`
`--il-blue-lighter-3`	`--il-blue-70`
`--il-blue-lighter-4`	`--il-blue-90`
`--il-industrial-darker-1`	`--il-blue-30`
`--il-industrial-darker-2`	`--il-blue`
`--il-industrial-lighter-1`	`--il-blue-50`
`--il-industrial-lighter-2`	`--il-blue-70`
`--il-industrial-lighter-3`	`--il-blue-80`
`--il-industrial-lighter-4`	`--il-blue-90`
`--il-storm-darker-1`	`--il-storm-30`
`--il-storm-darker-2`	`--il-storm-10`
`--il-storm-lighter-1`	`--il-storm-60`
`--il-storm-lighter-2`	`--il-storm-70`
`--il-storm-lighter-3`	`--il-storm-80`
`--il-storm-lighter-4`	`--il-storm-95`

Fonts

Font	Property	Example
Montserrat	`--il-montserrat`	`font-family: var(--il-montserrat);`
Source Sans	`--il-source-sans`	`font-family: var(--il-source-sans);`
Georgia	`--il-georgia`	`font-family: var(--il-georgia);`
Open Sans Condensed	`--il-open-sans-condensed`	`font-family: var(--il-open-sans-condensed);`

Shorthand properties

Property	Equivalent to
`--il-font-sans`	`--il-source-sans`
`--il-font-serif`	`--il-georgia`
`--il-font-heading`	`--il-montserrat`
`--il-font-heading-condensed`	`--il-open-sans-condensed`

Deprecated

These properties have been deprecated and will be removed in a future version.

Deprecated property	Use instead
`--il-font-montserrat`	`--il-montserrat`
`--il-font-source-sans`	`--il-source-sans`
`--il-font-georgia`	`--il-georgia`
`--il-font-open-sans`	`--il-open-sans-condensed`

Backgrounds

--il-ascend-blue

background: var(--il-ascend-blue);

--il-ascend-orange

background: var(--il-ascend-orange);

--il-ascend-white

background: var(--il-ascend-white);

--il-finial-blue

background: var(--il-finial-blue);

--il-finial-orange

background: var(--il-finial-orange);

--il-finial-white

background: var(--il-finial-white);

Gradients

--il-gradient-blue

background: var(--il-gradient-blue), var(--il-white);

background: var(--il-gradient-blue), var(--il-orange);

--il-gradient-orange

background: var(--il-gradient-orange), var(--il-white);

background: var(--il-gradient-orange), var(--il-blue);

--il-gradient-white

background: var(--il-gradient-white), var(--il-blue);

background: var(--il-gradient-white), var(--il-orange);

Patterns

--il-pattern-ascend-blue

background: var(--il-pattern-ascend-blue), var(--il-white);

background: var(--il-pattern-ascend-blue), var(--il-orange);

--il-pattern-ascend-orange

background: var(--il-pattern-ascend-orange), var(--il-white);

background: var(--il-pattern-ascend-orange), var(--il-blue);

--il-pattern-ascend-white

background: var(--il-pattern-ascend-white), var(--il-blue);

background: var(--il-pattern-ascend-white), var(--il-orange);

--il-pattern-finial-blue

background: var(--il-pattern-finial-blue), var(--il-white);

background: var(--il-pattern-finial-blue), var(--il-orange);

--il-pattern-finial-orange

background: var(--il-pattern-finial-orange), var(--il-white);

background: var(--il-pattern-finial-orange), var(--il-blue);

--il-pattern-finial-white

background: var(--il-pattern-finial-white), var(--il-blue);

background: var(--il-pattern-finial-white), var(--il-orange);

Deprecated

These properties have been deprecated and will be removed in a future version.

Deprecated property	Use instead
`--il-background-ascend-blue`	`--il-ascend-blue`
`--il-background-ascend-orange`	`--il-ascend-orange`
`--il-background-ascend-white`	`--il-ascend-white`
`--il-background-finial-blue`	`--il-finial-blue`
`--il-background-finial-orange`	`--il-finial-orange`
`--il-background-finial-white`	`--il-finial-white`