Colors & Typography
Colors
- Brand Blue
#0c2340 - Brand Blue, Dark
#081629 - Brand Blue, Light
#143865 - Brand Blue, Bright
#1c4f8f
- Brand Gold
#ae9142 - Brand Gold, Dark
#8c7535 - Brand Gold, Light
#d39f10
- Sky Blue
#e1e8f2 - Sky Blue, Dark
#c1cddd - Sky Blue,
Light
#edf2f9
- Gray
#555 - Gray, Dark
#333 - Gray, Light
#d2d2d2 - Gray, Extra Light
#e2e2e2 - Gray, Extra Extra Light
#f2f2f2
CSS Custom Properties
The following CSS custom properties are used throughout the Web Theme:
/* Brand Blue */
--brand-blue: #0c2340;
--brand-blue-dark: #081629;
--brand-blue-light: #143865;
--brand-blue-bright: #1c4f8f;
/* Brand Gold */
--brand-gold: #ae9142;
--brand-gold-dark: #8c7535;
--brand-gold-light: #d39f10;
/* Sky Blue */
--sky-blue: #e1e8f2;
--sky-blue-dark: #c1cddd;
--sky-blue-light: #edf2f9;
/* Gray */
--gray: #555;
--gray-dark: #333;
--gray-light: #d2d2d2;
--gray-extra-light: #e2e2e2;
--gray-extra-extra-light: #f2f2f2;
Typography
The Web Theme automatically loads the following fonts. Galaxie Polaris is hosted on static.nd.edu. Sumana and Libre Franklin are loaded from Google Fonts by the Web Theme JavaScript file.
Galaxie Polaris Condensed
Default heading style
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) < > " ' “ ” ‘ ’
- Style
- Bold
- Usage
- Site title, page title, and content headings
- Link
- https://onmessage.nd.edu/university-branding/fonts/
Sumana
Alternate heading style
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) < > " ' “ ” ‘ ’
- Style
- Regular
- Usage
- Card titles, headlines on news & events snippets, and blockquotes
- Link
- https://fonts.google.com/specimen/Sumana
Libre Franklin
Default body copy
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) < > " ' “ ” ‘ ’
- Styles
- Regular, Bold
- Usage
- Body copy and less prominent headings (h4-h6)
- Link
- https://fonts.google.com/specimen/Libre+Franklin
CSS Custom Properties
The following CSS custom properties are used throughout the Web Theme to designate the appropriate font-stack:
/* Default */
--font-default: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
/* Headings */
--font-heading: GPC, "Arial Narrow", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
--font-heading-article: "Sumana", Georgia, "Times New Roman", Times, serif;