Website Design

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 column), supplementary links or information (middle column), and social media links (right column).
• UNIVERSITY FOOTER: The university footer should be included on all BYU webpages. 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.

Web 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).

User Interface Palette

You can use accent colors in your website design to highlight key elements of the user interface:

• 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)

Avoid using an accent color in a way that implies it is an official BYU color:

• 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.

Please ensure that your color pairings always meet accessibility standards.

We recommend the color palette below for accent colors on BYU websites, but other colors are also allowed.

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.

Web Typography

Ringside Narrow SSm

Ringside Narrow SSm is our web font for headings on university web pages. The SSm (ScreenSmart) version of Ringside Narrow is specifically created to display larger and more readable on the web. BYU’s license to this font will work on all byu.edu websites (or on a localhost during website construction).

Ringside Narrow SSm is included in the web theme and is used in the header, menu bar, and footer. The web theme must not be modified to use other typefaces for these elements.

Ringside Narrow SSm is recommended for content headers, but should otherwise not be used for body text.

Ringside Narrow SSm is automatically included for websites and applications built using BYU Websites or the BYU Web Components. Custom frameworks can include the following line in their HTML head to access the font:

<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/ringside/fonts.css" media="all">

Ringside Narrow SSm should be referenced in CSS as:

font-family: 'HCo Ringside Narrow SSm', 'Open Sans', Helvetica, Arial, sans-serif;

Public Sans

Public Sans is recommended for body text on university web pages.

Public Sans is automatically included for websites and applications built using BYU Websites or the BYU Web Components. Custom frameworks can include the following line in their HTML head to access the font:

<link rel="stylesheet" href="https://cdn.byu.edu/theme-fonts/1.x.x/public-sans/fonts.css" media="all">

Public Sans should be referenced in CSS as:

font-family: 'Public Sans', 'Noto Sans', 'Open Sans', Helvetica, Arial, sans-serif;