SCU

Design System

2.1.0


Docs

What's New

v2.1.0

An incremental update with minor changes and bugfixes.

v2.0.4

An incremental update with minor changes and bugfixes.

v2.0.3

An incremental update with minor changes and bugfixes.

v2.0.2

An incremental update with small changes limited to some content types, including the header.

v2.0.1

Welcome to the redesigned SCU Design System!

v2.0.0

v2.0.0-beta.3

v2.0.0-beta.2

v2.0.0-beta

Release Highlights:

Bootstrap 4

Content Type Changes

Templates and Documentation

Fabricator and Build

v1.0.7

Released November 15, 2016

v1.0.6

v1.0.5

Released Jul 26, 2016

v1.0.4

v1.0.3

Released June 17, 2016

v1.0.2

v1.0.1

Released May 20, 2016

v1.0

Accessibility

Here's what you need to know about accessibility and code:

The Toolkit has accessibility auditing capabilities (gulp a11y) that can be used to audit content. In addition to automated tools, pages should be checked using WebAIM WAVE. Pages and content should have 0 errors according to WAVE reports.

WAVE will not detect all accessibility issues. It is your responsibility to ensure that websites are accessible. A few errors that may not be detected by the tool are:

If you have questions about accessible contributions to the toolkit or new websites, please contact Nic Bertino, Director of Digital Strategy.

Cloud Fonts

Our primary fonts, Trade Gothic, Bauer Bodoni Italic, and Trajan are provided by fonts.com.

Their license is for use on the official Santa Clara University website and affiliated properties and cannot be used for print materials under this license.

The Office of Marketing and Communication is currently reviewing available options for making these fonts available for print projects.

Getting Started

Header Guidelines

Our header system is designed to be user-friendly, accessible, and flexible. The header design has two primary layouts, core layout and customized layout:


Core Layout

The core layout is a general SCU header and navigation.

Used For:

Not used for:


Customized Layout

The customized layout is intended for use on pages with their own visual identity or where a segment-specific navigation improves user experience.

Customization Options

The custom layout is designed to accommodate a number of elements.

Branding

The branding section, by default, is a text-based logo set in Trade Light with the name of your school, department, or unit. Trade Bold, Bodoni Italic, and Bodoni Bold Italic are also typography options for centers or initiative-based websites. The maximum width of content in this area is 280px.

This header is designed to flex vertically if your content exceeds the height of the bar. If you are looking to use a graphic, it should be 280px wide.

Navigation Options

We have tested the header with up to seven (7) navigation items, and encourage you to use up to that amount. The customized footer also contains up to nine (9) different navigation elements.

See the Navbar section in Bootstrap's documentation for more details on what the navigation supports, including calls-to-action, inline text, and other elements.

Do not:

Footer Guidelines

Similar to the header system, the redesigned footers offer a core layout and a customized layout.

Core Footer

The core footer contains SCU's contact information, social media links, and general links. This layout should not be modified.

Customized Footer

The customized footer offers unit-specific branding, including customizable contact information and social media links to your pages.

There is also three columns of link space available for your use, and we encourage you to put unique links into this area and avoid duplication with your header.

Here are some examples of common pages that work well in a footer:

Do not:

Landing Pages

Draft Guidelines

We recognize that sometimes user needs and business goals necessitate (and sometimes require) a unique digital experience. In anticipating this need, we have integrated landing pages into our design language that can help address any needs not covered by our current design.

Here are some guidelines for landing pages:

Our guidelines for print projects are part of our Visual Identity Elements :