You are here

Digital Style Guide

These guidelines are designed to ensure uniformity and consistency for all university web content hosted on campus servers and on the content management system. These guidelines should also be used for the creation of stand alone content, such as ad hoc pages, articles, news postings on any other online platforms used by the University.

Required Elements

Required Elements

All web pages are required to include the following elements. For more information on the wordmark and other University marks, visit the Identity Toolkit.

HEADER

Wordmark & Organization Name

​The CSULB wordmark must appear in the top left region of the header area. The wordmark should always appear in the same location and be resized consistently with the responsive specifications coded in the site style sheet. The group name (college / Division / Office / Organization) appears next to the University wordmark. 

Search Tool

The search tool uses Google Search Appliance and it must also be available on the top right corner within the header area When the search took is activated, a search box appears below the menu option.

University (Hamburger) Menu

The university menu is triggered by the hamburger icon in the top right corner of the header. Once activated/displayed, it can be closed by clicking on the "X" icon next to the search tool.

 

FOOTER

The footer contains sitewide links and can not be modified. If a local footer is needed, it can be added below the content area and above the university footer.

University footer

Other Elements

SLIDESHOWS

There are three type of slideshows available for use throughout the website. Full (Hero) Slideshow is featured on the homepage and can showcase images and videos. Article Slideshow displays recent and Discover content.

Full (hero) Slideshow

text color #ffffff, text size 32 pixel

Discover Content (Tiles)

tab background #484236, text color #d7d2c5, text size 18 pixel

Explore Slideshow

text color #ffffff, text size 18 pixel

 

COLOR PALETTE

The CSULB orange is to be used sparingly. A white page background and the occasional dark background are acceptable. Overall imagery should be placed on dark, warm gray backgrounds.

Primary Colors

color sample  #ffffff, overall page background

  #f0f0f0, boxed content background

  #e4e1d9, background for nav. links

  #d7d2c5, links on megamenu and footer

  #484236, footer background

  #463e36, megamenu background

  #f9a600, boxed content background, accent elements

  #0f6774, visited link

  #a74300, default link, nav. triangles.

Body Text

color sample  #000, body text

TYPOGRAPHY

The University primary web typeface, Lato, and its secondary typeface, Sanchez are Google fonts. If you are creating stand alone content (outside the CMS), alternative fonts are available through other services such as Adobe’s typekit.com. Helvetica and Arial fonts in sans serif are also acceptable. Keeping with the clean and professional look and feel of CSULB, Lato is used throughout the site. Sanchez is used as a secondary font and provides variation from the primary font.

Primary Font

primary type lato

Secondary Font

secondary font, sample sanchez

Font Treatment

sample type

STYLE LISTS

Event listings on the homepage are to be shown as in the example below.

Sidebar Listing

FORMS

Styling of text fields, select lists, checkboxes, radio buttons and text areas should be as shown in the example below. An orange asterisk is used to denote which fields are required.

basic form sample

ACCORDIONS

Accordions are available to display content in a list style.

Accordion Sample

BUTTONS & LINKS

Below is acollection of buttons and their desired styling. Social icons are included in the menu and footer. Links are also provided with a large thin arrow to the right.

Buttons

  Default: Font size - 0.75em, Font Weight - normal (400), Background - #35332f, Link - #ffffff

  Hover: Font size - 0.75em, Font Weight - normal (400), Background - #222, Link - #edaa00

Social Links

  Default: Background - #484236, Icon - #f0f0f0

  Hover: Background - #484236, Icon - no background

TABLES

An example of a basic table with columns and rows. Sortable columns are shown with the arrows.

basic table sample