The College of Liberal Arts refreshed their Visual Brand Language in summer 2020. College websites that are being redesigned after Fall 2020 will reflect the new VBL. Updated VBL guidance can be found on the College of Liberal Arts Brand website.
The content below is being kept as reference for websites still using the 2015 VBL.
In 2015 the College of Liberal Arts went through a re-branding process and developed a Visual Brand Language to be used with all of our marketing materials. The sections below are are particularly useful, and provide additional details, that are relevant for web content.
Colors
Primary Colors
RGB: 30, 77, 43
CMYK: 92, 18, 94, 61
HEX: #1E4D2B
CSS Classes:
- text-color-csu-green
- background-color-csu-green
RGB: 200, 195, 114
CMYK: 11, 6, 64, 13
HEX: #C8C372
CSS Classes:
- text-color-csu-gold
- background-color-csu-gold
RGB: 88, 88, 90
CMYK: 64, 56, 53, 28
HEX: #58585A
CSS Classes:
- text-color-csu-gray
- background-color-csu-gray
Secondary Colors
RGB: 196, 217, 46
CMYK: 28, 0, 99, 0
HEX: #C4D92E
CSS Classes:
- text-color-lime
- background-color-lime
RGB: 243, 242, 220
CMYK: 4, 2, 15, 0
HEX: #F3F2DC
CSS Classes:
- text-color-cream
- background-color-cream
RGB: 0, 167, 186
CMYK: 77, 13, 25, 0
HEX: #00A7BA
CSS Classes:
- text-color-light-blue
- background-color-light-blue
RGB: 251, 169, 25
CMYK: 0, 38, 99, 0
HEX: #FBA919
CSS Classes:
- text-color-sunflower
- background-color-sunflower
RGB: 0, 36, 50
CMYK: 93, 72, 55, 63
HEX: #002432
CSS Classes:
- text-color-dark-blue
- background-color-dark-blue
RGB: 237, 105, 35
CMYK: 0, 56, 85, 7
HEX: #ED6923
CSS Classes:
- text-color-aggie-orange
- background-color-aggie-orange
RGB: 239, 239, 244
CMYK: 5, 4, 1, 0
HEX: #efeff4
CSS Classes:
- text-color-light-gray
- background-color-light-gray
Fonts
Elena
Regular
CSS Class: font-elena
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Italic
CSS Class: font-elena-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Bold
CSS Class: font-elena-bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Bold Italic
CSS Class: font-elena-bold-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Evenfall
Regular
CSS Class: font-evenfall
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Oblique
CSS Class: font-evenfall-oblique
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Proxima Nova
Thin
CSS Class: font-proxima-nova-thin
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Thin Italic
CSS Class: font-proxima-nova-thin-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Light
CSS Class: font-proxima-nova-light
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Light Italic
CSS Class: font-proxima-nova-light-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Regular
CSS Class: font-proxima-nova
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Italic
CSS Class: font-proxima-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Medium
CSS Class: font-proxima-nova-medium
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Medium Italic
CSS Class: font-proxima-nova-medium-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Semibold
CSS Class: font-proxima-nova-semibold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Semibold Italic
CSS Class: font-proxima-nova-semibold-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Bold
CSS Class: font-proxima-nova-bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Bold Italic
CSS Class: font-proxima-nova-bold-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Extra Bold
CSS Class: font-proxima-nova-extra-bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Extra Bold Italic
CSS Class: font-proxima-nova-extra-bold-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Black
CSS Class: font-proxima-nova-black
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Black Italic
CSS Class: font-proxima-nova-black-italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
Patterns
The patterns below were developed as part of the College of Liberal Arts re-branding process of 2015.
By default, patterns will only be visible over a background color or image. The beginning of a CSS class determines the position of a pattern, and the end of a CSS class determines which pattern is used. Adding '-dark' to the end of a CSS class will make a pattern display dark over a white background. Changing pattern size will affect top and bottom borders, and changing pattern scale will affect backgrounds and overlays.
Position
Background
CSS Class: pattern-background-<pattern>
Overlay
CSS Class: pattern-overlay-<pattern>
Top Border
CSS Class: pattern-top-<pattern>
Bottom Border
CSS Class: pattern-bottom-<pattern>
Patterns
Chevrons
CSS Class: pattern-<position>-chevrons
Chevrons Offset
CSS Class: pattern-<position>-chevrons-offset
Circles
CSS Class: pattern-<position>-circles
Dots
CSS Class: pattern-<position>-dots
Diamonds
CSS Class: pattern-<position>-diamonds
Hexagons
CSS Class: pattern-<position>-hexagons
Lines
CSS Class: pattern-<position>-lines
Squares
CSS Class: pattern-<position>-squares
Stripes
CSS Class: pattern-<position>-stripes
Triangles
CSS Class: pattern-<position>-triangles
Weaves
CSS Class: pattern-background-weaves
Triangles Green
CSS Class: pattern-<position>-triangles-green
Proportion
Scale Small
CSS Class: pattern-<position>-scale-small
Scale Large
CSS Class: pattern-<position>-scale-large
Top Border Size Small
CSS Class: pattern-top-size-small
Bottom Border Size Small
CSS Class: pattern-bottom-size-small
Value
Regular
CSS Class: pattern-<position>-<pattern>
Dark
CSS Class: pattern-<position>-<pattern>-dark