SCU

Design System

2.4.1


Docs

What's New

v2.4.1

An incremental update with minor change

v2.4.0

This update brings fixes to the sidebar navigation, a new emergency banner, and other enhancements.

v2.3.0

v2.2.0

This update brings some minor changes to content types and tooling:

v2.1.2

This update includes a variety of patches and improvements to content types, and refines typography across the site with the use of subpixel rendering.

v2.1.1

This update reintroduces the legacy Header design, carousel enhancements, and various bugfixes.

Important Usage Notes

The redesigned header has been demoted and will be included in a future release. It is included for preview, testing, and feedback use only, and is not to be used at the time of this release.

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 Christina Olivas, 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 :

Social Icons

Static social icons are available for use in emails and other contexts where FontAwesome cannot be loaded.

SCU Icon YouTube Icon Illuminate Icon Vimeo Icon Facebook Icon RSS Icon LinkedIn Icon Twitter Icon Flickr Icon Soundcloud Icon Snapchat Icon Tumblr Icon

Resizing and Transforming

These icons can be resized by changing the URL:

https://res.cloudinary.com/scu/image/upload/c_scale,h_100/v1544637290/social-icons/Soundcloud.png

The /c_scale,h_100/ portion of the URL can be changed to resize the icon in pixels. Changing this to /c_scale,h_50/ would return a 50px icon.

SCU Icon

You can also create rounded icons.

RSS Icon

For more options, see Cloudinary's Image Transformation reference.