Docs

What's New

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

v1.0.6

v1.0.5

v1.0.4

v1.0.3

v1.0.2

v1.0.1

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.

Draft Guidelines

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.

Core header example

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.

Example of Customized Page Layout
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.

Customized Layout with Image Logo
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.

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 :