Website Design

Website Guidelines

Design guidelines for BYU’s web space are intended to identify university websites through clear BYU branding, provide a consistent user experience across campus, and offer flexibility for varying communications needs.

The design guidelines emphasize a few key features:

• HEADER: The header bar includes the BYU monogram at the left for clear university branding. To the right of the monogram is the title of the web page.
• NAVIGATION BAR: A consistent navigation bar facilitates a user friendly experience across BYU's web space. Industry best practices suggest menus should be limited to five or six items of one or two words each; drop-down menus can show additional items.
• MAIN CONTENT: Between the navigation bar and footer is your canvas to create whatever content and functionality you need.
• AREA FOOTER: The area footer includes contact information (left), supplementary links or information (middle), and social media links (right).
• UNIVERSITY FOOTER: The university footer should be included on all BYU web pages. It indicates university ownership and provides copyright and university contact information.

BYU Websites

Brightspot is a campus website management and hosting service meant to improve and simplify campus web publishing. It provides cloud hosting, security, round-the-clock monitoring, and ADA-compliant accessible design templates.

BYU websites uses the BYU web design guidelines outlined above. University web pages are strongly encouraged to use BYU websites.

Website Colors

BYU Colors

Our BYU colors are navy, white, and royal, and these should be the dominant colors in university websites. As in the web theme, the top header bar should be navy; white is an acceptable variation. Navigation bars should be white.

Text Colors

We recommend four text colors for websites.

Dark gray and navy provide the best readability. (Black on white creates a contrast that is too high for good readability online.) Medium gray is for muted text. White works well on buttons or on dark backgrounds in small amounts (a lot of white text can cause eye fatigue).

You can use interface colors in your website design to highlight key elements:

• Buttons
• Alert messages and boxes
• Background colors of small text fields
• Highlighted information (e.g., a call to action)
• Important text (e.g., headlines, subheads, or call-out quotes)

Please ensure that your color pairings always meet accessibility standards. We recommend using the color palette below for BYU websites.

Accent Color Dos and Don'ts

• DO match the colors to the action in logical patterns. Green is often associated with transactions and positive actions, blue with neutral actions, and red with error messages.
• DO use accent colors as a call to action, creating subtle emphasis to direct user attention where you’d like them to interact with your content.
• DO use accent colors to create consistency and clarity; always use the same color to communicate the same thing.
• DON'T mix up accent colors in common alert messages. For instance, do not use green to indicate an error.
• DON'T use many different accent colors at once, which creates confusion and reduces the effectiveness of the accent colors.
• DON'T use accent colors in large amounts or to create unnecessarily loud emphasis. This creates a jarring experience for your users; larger items will naturally draw attention and do not need color emphasis. Sparing use of accent color makes it more effective when it is used.
• DON'T use accent colors for large amounts of text; it can reduce readability.
• DON'T use an accent color as a dominant color for your website.
• DON'T use an accent color as a close companion to navy in a way that gives it equal or near-equal status.
  

Web Typography

IBM Plex Sans

IBM Plex Sans is our web font for both headings and body text. It is freely available under an Open Font License, and can be downloaded for desktop use (such as for web mockups) from Google and Adobe.

IBM Plex Sans is a variable font, which means that its weight can be adjusted to any value between 100 and 700.

IBM Plex Sans is automatically included for websites using BYU Brightspot. Other websites can follow the instructions on Google Fonts for embedding or importing the font. For example, including the following in a website's HTML head will add the font with all of its styles (regular and italic) and weights (100–700) to a site:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">

Once it has been added to a site, IBM Plex Sans can be referenced in CSS with the following font stack.

font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;

Body Text

Headings