Web Style Guide

There are more than 200 Wesleyan websites that are maintained within our Web Content Management System (CMS), Cascade.  Through Cascade we maintain common templates and style sheets to encourage a unified and easy to use look and feel.  These templates include Wesleyan branding and Wesleyan navigation.  Our latest templates and designs are created in a responsive format to ensure optimal viewing on all devices.  

Below are defined some of the styles used within Cascade.

Body Text

Roboto medium / 22pt / #333333

This is an introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula sed augue ac porttitor. Vivamus interdum risus vitae magna porta, nec volutpat diam lacinia. Nunc id nisi facilisis, sollicitudin arcu a, lacinia magna. Duis tincidunt augue ac justo egestas, sit amet cursus est imperdiet.

Roboto medium / 16pt / #333333

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula sed augue ac porttitor. Vivamus interdum risus vitae magna porta, nec volutpat diam lacinia. Nunc id nisi facilisis, sollicitudin arcu a, lacinia magna. Duis tincidunt augue ac justo egestas, sit amet cursus est imperdiet. Duis laoreet felis neque, eget interdum purus sagittis ac. Aliquam dolor metus, ullamcorper eget augue et, euismod condimentum urna. Mauris semper lorem sit amet diam tincidunt, eu convallis ex efficitur. Nunc tempor mollis arcu eget rhoncus. Suspendisse at fringilla purus. Nulla feugiat rutrum urna. Mauris porttitor imperdiet ex, non suscipit metus bibendum in. Suspendisse posuere sollicitudin libero. Nunc vel ligula a ex porttitor accumsan vitae cursus lacus. Quisque dictum in mi tempor suscipit. Curabitur lobortis laoreet libero, viverra dignissim tellus rutrum nec. Donec luctus lobortis quam at tempor.

Roboto medium / 16pt / #990000

Link Text

Roboto bold / 16pt / #999999

Blockquote

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov

Text Highlights

Roboto medium, 22pt, #333333

Background color = #dbdbdb / Padding = 15px

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

Table Styles

Table HeaderTable HeaderTable HeaderTable Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Header Styles

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

(#990000)

Alt Header 1

Alt Header 2

Alt Header 3

Alt Header 4

Alt Header 5
Alt Header 6

(#333333)

37px

30px

23px

18px

18px - lowercase
16px