Our web pattern library is a collection of building blocks for CSUSM's website, from the smallest elements, to putting them together inside larger components

This sample page shows how all the elements can come together.

Colors

Our color palette follows CSUSM branding standards with slight alterations to be more compatible for the web.

Background Colors

The main background color for webpages is white (#FFFFFF).
The other background colors are used for components and sections.
The dark backgrounds (Cobalt, Deep Cobalt, and Dark Slate) should be used sparingly, and typically with content other than just simple text (i.e. Images with text, highlight cards, etc).

White
#FFFFFF
rgb(255 255 255)

Alabaster
#F8F8F8
rgb(248 248 248)

Cobalt
#004D96
rgb(0 77 150)

Deep Cobalt
#00243d
rgb(0 36 61)

Dark Slate
#47484D
rgb(71 72 77)

Text Colors

There are six basic text colors and two link colors which are intended to cover the majority of text needs dependant on the background.

For Light Backgrounds

Headings (h1,h2)
Cobalt
#004D96
rgb(0 77 150)

Headings (h3)
Dark Slate
#47484D
rgb(71 72 77)

Headings (h4,h5,h6)
Mid Grey
#5A5B61
rgb(90 91 97)

Primary body text color
Jet
#222222
rgb(34 34 34)

Links
Rust
#BC441B
rgb(188 68 27)

For Dark Backgrounds

Headings (All Headings)
White
#FFFFFF
rgb(255 255 255)

Body Text
Porcelain
#F8F8F8
rgb(236 240 240)

Links
Pale True Blue
#6ACEFE
rgb(103 206 254)

Accent and Link Colors

Accent colors are used sparingly in page elements, borders, accents to give the page a splash of color and interest.
Rust and Pale True Blue are used for link colors.

Rust
#BC441B
rgb(188 68 27)

Sun
#F7B905
rgb(247 186 5)

True Blue
#0078CC
rgb(0 120 204)

Pale True Blue
#6ACEFE
rgb(103 206 254)

Typography

Headings

Headings are used to organize content on a page so text is easy to read and manage. They help vistors better comsume your content.

Headings must follow a proper hierarchy. Skipping a heading level is confusing for the visitor and assistive devices.
It is not about choosing one that looks nice, rather think about where the heading fits into the overall content hierarchy.

Headings should not be a link. Consider using a button or other type of link within the accompanying text is a link is needed.

H4 - H6 headings should only be used for pages that have three or more levels.
Since only pages with large amounts of content will require this many levels, these headlines should rarely be used on our site.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs, Text Styles, & Links

Text styles such as bold, italicized, and underline should be used sparingly in accordance with the web style guides.

Links should be semantic and descriptive and avoid any varient of the words "Click Here" or "Link". Links can be used inline in a paragraph, stand-alone, or in a short list.

Example

Main section title

Sub-section title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second Sub-section title

Blockquotes

Blockquotes should be used for quotation of a large section of text from another source. For accessibility reasons, avoid exessive use.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae finibus turpis. In volutpat pretium metus, vitae venenatis tellus convallis vitae. In id dapibus sapien. In a sapien tristique, scelerisque lorem ac, tincidunt dolor. Integer dictum mi accumsan metus elementum euismod tempor quis turpis. Praesent aliquet, velit sit amet semper mollis, mi felis iaculis enim, non rhoncus ipsum quam eu enim. Pellentesque rutrum eros mi, eu varius odio consectetur nec. Etiam mollis sagittis magna sit amet tristique. Sed varius nulla in mauris vestibulum, vitae pulvinar augue commodo. Suspendisse convallis eros lorem, quis porta justo semper ac.

Blockquotes can also include a citation.

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Tables

Tables are used for displaying information in tabular format, where is useful to be able to examine and compare data or information in columns and rows. They must not be used for layout.

Table width must be set to 100% to avoid the content running off the page.

All tables must contain a header to describe the purpose of the data table

Table Header	Table Header	Table Header	Table 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
Content Goes Here	This is longer Content Goes Here Donec	Content Goes Here	Content Goes Here

Buttons

Buttons are used to make links stand out on a page more than a standard hyperlink. They should be used sparingly on a page so they do not lose their empahsis. More specific uses can be found in the web style guide.

Small buttons are used for most applicaitons. Large buttons are used for slabs and sections. Expanded Buttons are used for self-contained sections such as callouts and side panels. Icon buttons are special use for CTA, events, etc

Examples

Pattern Library

Colors

Background Colors

Text Colors

For Light Backgrounds

Headings (h1,h2)

Headings (h3)

Headings (h4,h5,h6)

Primary body text color

Links

For Dark Backgrounds

Headings (All Headings)

Body Text

Links

Accent and Link Colors

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs, Text Styles, & Links

Main section title

Sub-section title

Second Sub-section title

Blockquotes

Tables

Buttons

Icons

Font-Awesome

Ico-Moon