Design & Development Guidelines

On this page you will find details on the styles that is the standard for the Web at Andrews University. Using the Andrews Content Management System (CMS) we have a variety of the styles you will need to make your site just by using a header, paragraph or custom control on the page. But, sometimes you may want to make something a little more complex or change things up a bit. So the question comes to mind, what are the design elements that make up the andrews webpage? The purpose of this guide is to show you the different styles that are central to the Andrews University website and how to achieve those on your page. We also include suggestions on when to use the elements.

Typeface

In 2020, we moved to IBM Plex for our typeface superfamily, with both Sans Serif and Serif typefaces. These typefaces have a similar look and feel to Akkurat and Meta Serif, the licensed fonts Andrews has previosly used. By using IBM Plex we are allowed much more freedom since it is freely available for use and backed by a major company. We use the Sans Serif typeface for most things on the web due to increased readability on screens. But occasionally for minor headings we use serif typeface.

Here are the options available with each typeface:

IBM Plex Sans Serif (font weight)

---

• Thin (100)
• Thin Italic
• Extra-Light (200)
• Extra-Light Italic
• Light (300)
• Light Italic
• Regular (400)
• Regular Italic
• Medium (500)
• Medium Italic
• Semi-Bold (600)
• Semi-Bold Italic
• Bold (700)
• Bold Italic

 

IBM Plex Serif (font weight)

---

• Thin (100)
• Thin Italic
• Extra-Light (200)
• Extra-Light Italic
• Light (300)
• Light Italic
• Regular (400)
• Regular Italic
• Medium (500)
• Medium Italic
• Semi-Bold (600)
• Semi-Bold Italic
• Bold (700)
• Bold Italic

We use the 400 weight as our primary font. Light text will mostly use the 300 weight and bolded text usually uses 600, but may dip to 500 for a slight effect or 700 for stronger emphasis, depending on the application.

Colors

Color is a powerful unifier and needs to be accurate. Colors that are even slightly off can make visitors view our brand negatively. We try to keep colors on print and web in sync, but it doesn't always work out well because of the difference in the mediums. Colors for the web are as follows:

 

Headings

Usually colored gold, headings help to make your information more scannable so readers easily find the content they want. If a heading is a link it will be styled blue. When two types of headings are used close to each other, such as in a heading with a subheading, we will color the main one blue to set it apart more distinctly. All headings of a certain type should be the same color on a page.

As previously mentioned, most of the time we use Sans Serif typeface, but we occasionally use the Serif typeface. Also, notice there is extra padding above and below the headings.

Heading 1 should only be used once per page. Many times the template has already defined it and you can set its text by setting the title of the page. It should explain the important information on your page.  Think about what terms a person might search for when wanting to find information on your page. This can help Search Engine Optimization (SEO) as Google and other search engines use this to help determine what information is on your page and it will be prominently displayed in their results.

Here is an example of each of the headings:

• Heading 1

• Heading 2

• Heading 3

• Heading 4

• Heading 5

• Heading 6

Buttons

We use two primary buttons. A blue (with gold hover effect) and a gold one. For general purposes we usually use the blue one. The gold is usually used for times when we want to call more attention to something. Sometimes one or the other will be chosen because the particular color just works better to stand out in the context of that button. 

To create a button in the CMS editor, just create a link and then in its advanced settings set a class of btn and then either btn-blue or btn-gold depending on which button you want to use.

Blue Button

Gold Button

Text Links

The web is built on links. Andrews text links are blue. When hovered, they turn gold and are underlined. Be sure to check all the links on your site often to make sure people are able to find what they are looking for.