The Office of University Communications creates and maintains content throughout the Elon website, with an emphasis on pages accessed by external audiences, including the home page, navigation pages, directories and maps, news and information, and sites for admissions, academics, administration, student life, advancement, parents and alumni.

The visual elements of Elon’s website are aligned with the university’s graphic identity standards. The web team consults with departments and individuals to determine appropriate website audiences, objectives, navigation, page layout, graphics and photos, and creates templates within the content management system.

For questions on starting a project, updating a page or fixing a website issue, please visit the Online Communications website.

For a comprehensive guide to web and digital accessibility, please review Elon’s Accessibility Toolkit.

Fonts

Roboto is used for body copy.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet ipsum id elit rutrum hendrerit eget quis dui. Maecenas metus quam, feugiat sagittis felis sit amet, fermentum tempor massa. Mauris interdum magna tincidunt justo egestas, non vehicula felis porta. Phasellus augue diam, aliquam vel blandit non, vehicula id urna.

Roboto Condensed is used for headings. Bold (700) is the default weight for headings, but they may also be displayed using light (300) or regular (400) if the design dictates.

Engaged learning. Inspired leaders. Global citizens.

Font Awesome 5 is used for icons. All icon styles and weights may be used, but the light version is preferred in most instances.

Colors

Brand Colors

Elon’s primary palette contains custom screen versions of the university’s maroon and gold Pantone colors.

Maroon

#73000a rgb(115, 0, 10)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on other maroon variations backgrounds
Do not use for text on gold or darker gold variations backgrounds
Passes AA contrast ratio for any size text on lighter gold variations backgrounds
Passes AA contrast ratio for any size text on accent yellow backgrounds
Do not use for text on accent orange or teal backgrounds

Gold

#b59a57 rgb(181, 154, 87)

Do not use for text on white or other light backgrounds
Do not use for text on maroon or lighter maroon variations backgrounds
Passes AA contrast ratio for any size text on darker maroon variations backgrounds
Do not use for text on other gold variations backgrounds
Do not use for text on ANY accent color backgrounds

Brand Color Variations

The colors below are acceptable lighter and darker shades of Elon’s Brand Colors.

Light Maroon

#95000d rgb(149, 0, 13)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on maroon or other maroon variations backgrounds
Do not use for text on gold, medium light gold or darker gold variations backgrounds
Passes AA contrast ratio for any size text on light gold (NOT medium light) backgrounds
Do not use for text on ANY accent color backgrounds

Medium Light Maroon

#84000b rgb(132, 0, 11)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on maroon or other maroon variations backgrounds
Do not use for text on gold or darker gold variations backgrounds
Passes AA contrast ratio for any size text on lighter gold variations backgrounds
Passes AA contrast ratio for any size text on accent yellow backgrounds
Do not use for text on accent orange or teal backgrounds

Medium Dark Maroon

#620009 rgb(98, 0, 9)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on maroon or other maroon variations backgrounds
Passes AA contrast ratio for any size text on gold or lighter gold variations backgrounds
Do not use for text on darker gold variations backgrounds
Passes AA contrast ratio for any size text on accent yellow backgrounds
Do not use for text on accent orange or teal backgrounds

Dark Maroon

#510007 rgb(81, 0, 7)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on maroon or other maroon variations backgrounds
Passes AA contrast ratio for any size text on gold or lighter gold variations backgrounds
Do not use for text on darker gold variations backgrounds
Passes AA contrast ratio for any size text on accent yellow backgrounds
Do not use for text on accent orange or teal backgrounds

Light Gold

#d4c59e rgb(212, 197, 158)

Do not use for text on white or other light backgrounds
Passes AA contrast ratio for any size text on maroon or other maroon variations backgrounds
Do not use for text on gold or other gold variations backgrounds
Do not use for text on ANY accent color backgrounds

Medium Light Gold

#c5af7a rgb(197, 175, 122)

Do not use for text on white or other light backgrounds
Passes AA contrast ratio for any size text on maroon, medium light maroon or darker maroon variations backgrounds
Do not use for text on light maroon backgrounds
Do not use for text on gold or other gold variations backgrounds
Do not use for text on ANY accent color backgrounds

Medium Dark Gold

#977e42 rgb(151, 126, 66)

Passes AA contrast ratio for text above 18pt or bold above 14pt on white backgrounds
Do not use for text on backgrounds darker than white
Do not use for text on maroon or other maroon variations backgrounds
Do not use for text on gold or other gold variations backgrounds
Do not use for text on ANY accent color backgrounds

Dark Gold

#736133 rgb(115, 97, 51)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on backgrounds darker than light gray
Do not use for text on maroon or other maroon variations backgrounds
Do not use for text on gold or other gold variations backgrounds
Do not use for text on ANY accent color backgrounds

Accent Colors

These accent colors may be used sparingly within a design to complement Elon’s Brand Colors.

Accent Yellow

#dda510 rgb(221, 165, 16)

Do not use for text on white or other light backgrounds
Passes AA contrast ratio for any size text on maroon or darker maroon variations backgrounds
Do not use for text on gold or any gold variations backgrounds

Accent Orange

#b7410e rgb(183, 65, 14)

Passes AA contrast ratio for any size text on white or other light backgrounds
Do not use for text on backgrounds darker than light gray
Do not use for text on maroon, gold or any maroon/gold variations backgrounds

Accent Teal

#527b82 rgb(82, 123, 130)

Passes AA contrast ratio for any size text on white backgrounds
Passes AA contrast ratio for text above 18pt or bold above 14pt on light gray backgrounds
Do not use for text on backgrounds darker than light gray
Do not use for text on maroon, gold or any maroon/gold variations backgrounds

Gray Colors

The following shades of gray are used frequently within Elon’s website as accent colors.

Gray 100

#f5f5f5 rgb(245, 245, 245)

Gray 200

#dadada rgb(218, 218, 218)

Gray 300

#bebebe rgb(190, 190, 190)

Gray 400

#a3a3a3 rgb(163, 163, 163)

Gray 500

#888888 rgb(136, 136, 136)

Gray 600

#6d6d6d rgb(109, 109, 109)

Gray 700

#525252 rgb(82, 82, 82)

Gray 800

#363636 rgb(54, 54, 54)

Gray 900

#1b1b1b rgb(27, 27, 27)

System Colors

They’re not part of our brand, but we use these in special cases like form validation.

Success Green

#2b8156 rgb(43, 129, 86)

Error Red

#bf1c13 rgb(191, 28, 19)

Typography

For a more accessible type scale, Elon website styles assume the browser default font size (typically 16px) so visitors can customize their browser defaults as needed. Headings should be sized proportionately to the default font size to create a clear hierarchy between elements.

Headings

By default, all HTML headings, <h1> through <h6>, are typically presented in Elon’s Maroon color.

h1. Example heading

h2. Example heading

h3. Example heading

h4. Example heading

h5. Example heading

h6. Example heading

To create emphasis and separation, Gray 800 may be used as a secondary heading color.

h1. Example heading

h2. Example heading

h3. Example heading

h4. Example heading

h5. Example heading

h6. Example heading

White may also be used as a heading color on dark backgrounds.

h1. Example heading

h2. Example heading

h3. Example heading

h4. Example heading

h5. Example heading

h6. Example heading

Blockquotes

Below is an example of a default <blockquote>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Source Name in Title of Source Work

We also have the option to float a <blockquote> element to the left or right of the surrounding content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus purus, consectetur auctor ultricies eget, rhoncus ac lorem. Fusce purus ex, imperdiet volutpat gravida vitae, convallis sit amet urna. Mauris leo leo, consectetur ut sollicitudin ac, varius fringilla ipsum. Duis eget blandit odio. Ut aliquet justo nec metus scelerisque hendrerit. Etiam risus massa, vehicula non ligula nec, pharetra feugiat lacus. In est ante, laoreet sed nibh quis, iaculis gravida quam. Pellentesque ornare justo quis finibus volutpat. Cras augue arcu, dictum nec felis sit amet, vehicula posuere ligula. Aenean feugiat purus varius porttitor ullamcorper. Sed molestie et sapien non tempus. Quisque a vestibulum neque, et dignissim mauris. Mauris luctus luctus iaculis. Phasellus et hendrerit enim, interdum tempor erat. Pellentesque eleifend mauris in lacus efficitur, sit amet imperdiet dolor laoreet. Sed varius, metus vitae laoreet dignissim, est lorem elementum sapien, a laoreet purus magna ac sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Unordered Lists

Below is an example of a default <ul>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec tristique augue non urna laoreet consectetur.
Sed ut ex ut nibh pulvinar sollicitudin.
Maecenas accumsan urna sit amet viverra placerat.

We sometimes switch out the default bullets for a Font Awesome chevron icon.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec tristique augue non urna laoreet consectetur.
Sed ut ex ut nibh pulvinar sollicitudin.
Maecenas accumsan urna sit amet viverra placerat.

Ordered Lists

Below is an example of a default <ol>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec tristique augue non urna laoreet consectetur.
Sed ut ex ut nibh pulvinar sollicitudin.
Maecenas accumsan urna sit amet viverra placerat.

We also have a custom number style that is used for extra emphasis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec tristique augue non urna laoreet consectetur.
Sed ut ex ut nibh pulvinar sollicitudin.
Maecenas accumsan urna sit amet viverra placerat.

Horizontal Rule

Below are examples of our various styles for <hr> elements.