You may be eligible for additional discounts. Find out which purchasing cooperative or contracts are available in your state.

Style Guide

Grid

Typography

Colors

Buttons

Other Objects

IBM Support

Responsive Grid

This site uses a 12 column grid responsive grid. There are 3 built-in breakpoint classes (acol - smallest screen width, col - mid screen width, ccol - largest screen width). These are used to make the columns responsive for mobile, tablet, and desktop.

acol = 600px width and under
col = 601px to 1281px
ccol = 1281px and over

Default Grid (mid-width columns)

col12

col6

col1

col11

col2

col10

col3

col9

col4

col8

col5

col7

Sample Responsive Grid (resize window to see breakpoints)

col6, acol12, ccol4

col6, acol12, ccol8

Typography

Primary Typography

Main Page Title

Class Name: primary-title

Widget Title

Class Name: titleItems (must be H2)

Headline

Class Name: ssi-type__headline

Title

Class Name: ssi-type__title

Subheading

Class Name: ssi-type__subhead

Body Text

Class Name: ssi-type__body

Link Text

Class Name: ssi-color-text__pri-lt-blue

New Heading + Larger Paragraph Classes

These classes can be applied to any heading regardless of hierarchy. Margin and padding classes can be used to adjust spacing if needed.

Giant Blue Heading

Big Blue Heading

Medium-Large Blue Heading

Medium Blue Heading

Small Blue Heading

Giant Grey Heading

Big Grey Heading

Medium-Large Grey Heading

Medium Grey Heading

Small Grey Heading

Giant White Heading

Big White Heading

Medium-Large White Heading

Medium White Heading

Small White Heading

Also see: Use the intro-paragraph class to bump up the font size.

Text Alignment

Text-Align Left

Class Name: ssi-text__left

Text-Align Right

Class Name: ssi-text__right

Text-Align Center

Class Name: ssi-text__center

Text-Align Justify - Justify the text in a paragraph to stretch the main content evenly from the left edge to the right, similar to a newspaper.

Class Name: ssi-text__justify

adjust <ul> and <ol> for bullets to show- class="ssi-list"

Adjustment

text nowrap - class="ssi-text__nowrap"
not allow selection of text - class="ssi-text__noselect
no padding - class="ssi-text__no-pad "
text-align justify - class="ssi-text__justify"
font size
- .7em - class="ssi-font__70"
- .8em - class="ssi-font__80"
- .9em - class="ssi-font__90"
- MuseoSans-900 - class="ssi-font__ultra-bold" or "ssi-bold "
responsive text - class="mktg-content"

Decoration

text underline - class="ssi-text__underline"
italic text - class="ssi-font__italic"
force lowercase text - class="ssi-text__lowercase"
force uppercase text - class="ssi-text__uppercase"
force capitalize text - class="ssi-text__capitalize"

Always use the appropriate MuseoSans font rather than setting a font-weight seperately.

Available MuseoSans font families:
MuseoSans-900, MuseoSans-900Italic, MuseoSans-700, MuseoSans-700Italic, MuseoSans-500, MuseoSans-500Italic, MuseoSans-300, MuseoSans-300Italic

font weight (bolding)
- MuseoSans-300 - class="ssi-font__light"
- MuseoSans-500 - class="ssi-font__normal"
- MuseoSans-700 - class="ssi-font__bold"
- MuseoSans-900 - class="ssi-font__ultra-bold" or "ssi-bold "

Colors

Primary Colors

#0f6cb6

ssi-color__pri-dk-blue

ssi-color__pri-dk-blue hover

ssi-color__pri-dk-blue-trans

ssi-color-text__pri-dk-blue

#72c267

ssi-color__pri-green

ssi-color__pri-green hover

ssi-color__pri-green-trans

ssi-color-text__pri-green

#00a9cc

ssi-color__pri-lt-blue

ssi-color__pri-lt-blue hover

ssi-color__pri-lt-blue-trans

ssi-color-text__pri-lt-blue

Secondary Colors

#ff6249

ssi-color__deep-orange

ssi-color__deep-orange hover

ssi-color__deep-orange-trans

ssi-color-text__deep-orange

#d95436

ssi-color__dk-deep-orange

ssi-color__dk-deep-orange hover

ssi-color__dk-deep-orange-trans

ssi-color-text__dk-deep-orange

#F08D05

ssi-color__orange

ssi-color__orange hover

ssi-color__orange-trans

ssi-color-text__orange

#d97a36

ssi-color__dk-orange

ssi-color__dk-orange hover

ssi-color__dk-orange-trans

ssi-color-text__dk-orange

#E9D11F

ssi-color__yellow

ssi-color__yellow hover

ssi-color__yellow-trans

ssi-color-text__yellow

#d1ac35

ssi-color__dk-yellow

ssi-color__dk-yellow hover

ssi-color__dk-yellow-trans

ssi-color-text__dk-yellow

#bed14f

ssi-color__lime

ssi-color__lime hover

ssi-color__lime-trans

ssi-color-text__lime

#aab848

ssi-color__dk-lime

ssi-color__dk-lime hover

ssi-color__dk-lime-trans

ssi-color-text__dk-lime

#60AD23

ssi-color__green

ssi-color__green hover

ssi-color__green-trans

ssi-color-text__green

#1fb894

ssi-color__aqua

ssi-color__aqua hover

ssi-color__aqua-trans

ssi-color-text__aqua

#01A3A3

ssi-color__teal

ssi-color__teal hover

ssi-color__teal-trans

ssi-color-text__teal

#339193

ssi-color__dk-teal

ssi-color__dk-teal hover

ssi-color__dk-teal-trans

ssi-color-text__dk-teal

#91acea

ssi-color__indigo

ssi-color__indigo hover

ssi-color__indigo-trans

ssi-color-text__indigo

#918ad1

ssi-color__violet

ssi-color__violet hover

ssi-color__violet-trans

ssi-color-text__violet

#b973c9

ssi-color__purple

ssi-color__purple hover

ssi-color__purple-trans

ssi-color-text__purple

#e55f9a

ssi-color__pink

ssi-color__pink hover

ssi-color__pink-trans

ssi-color-text__pink

#a70267

ssi-color__dk-pink

ssi-color__dk-pink hover

ssi-color__dk-pink-trans

ssi-color-text__dk-pink

Warning/Error Colors

#d80000

ssi-color__red

ssi-color__red hover

ssi-color__red-trans

ssi-color-text__red

#8B0F0F

ssi-color__dk-red

ssi-color__dk-red hover

ssi-color__dk-red-trans

ssi-color-text__dk-red

Neutral Colors

#f5f5f5

ssi-color__lt-grey

ssi-color__lt-grey hover

ssi-color__lt-grey-trans

ssi-color-text__lt-grey

#a5a5a5

ssi-color__med-grey

ssi-color__med-grey hover

ssi-color__med-grey-trans

ssi-color-text__med-grey

#686868

ssi-color__dk-grey

ssi-color__dk-grey hover

ssi-color__dk-grey-trans

ssi-color-text__dk-grey

#4d4d4d

ssi-color__charcoal

ssi-color__charcoal hover

ssi-color__charcoal-trans

ssi-color-text__charcoal

#000000

ssi-color__black

ssi-color__black hover

ssi-color__black-trans

ssi-color-text__black

#ffffff

ssi-color__white

ssi-color__white hover

ssi-color__white-trans

ssi-color-text__white

Buttons

Primary Button

class="primary_button"

Secondary Button

class="secondary_button"

Small Primary

class="primary_button small"

Small Secondary

class="secondary_button small"

Non-text Objects

Helper Classes

centering content - class="ssi-content__center"
clear floats - class="ssi-clearfix:after"
3px border - class="ssi-border__3"

adjust <ul> and <ol> for bullets to show- class="ssi-list"

backgound color bar used for heading - class="ssi-heading-bar" with chosen background and text color classes (ex. class="ssi-heading-bar ssi-color__aqua ssi-color-text__white")

CSS margin and padding helper classes to adjust spacing between elements:

	
		/* margin helper classes */
		.m-0 {
			margin: 0 !important;
		}
		.m-10 {
		    margin: 10px !important;
		}
		.m-20 {
		    margin: 20px !important;
		}
		.m-30 {
		    margin: 30px !important;
		}
		.m-40 {
		    margin: 40px !important;
		}
		.m-50 {
		    margin: 50px !important;
		}
		.mt-0 {
			margin-top: 0 !important;
		}
		.mt-10 {
		    margin-top: 10px !important;
		}
		.mt-20 {
		    margin-top: 20px !important;
		}
		.mt-30 {
		    margin-top: 30px !important;
		}
		.mt-40 {
		    margin-top: 40px !important;
		}
		.mt-50 {
		    margin-top: 50px !important;
		}
		.mb-0 {
			margin-bottom: 0 !important;
		}
		.mb-10 {
		    margin-bottom: 10px !important;
		}
		.mb-20 {
		    margin-bottom: 20px !important;
		}
		.mb-30 {
		    margin-bottom: 30px !important;
		}
		.mb-40 {
		    margin-bottom: 40px !important;
		}
		.mb-50 {
		    margin-bottom: 50px !important;
		}
		/* padding helper classes */
		.p-0 {
			padding: 0 !important;
		}
		.p-10 {
		    padding: 10px !important;
		}
		.p-20 {
		    padding: 20px !important;
		}
		.p-30 {
		    padding: 30px !important;
		}
		.p-40 {
		    padding: 40px !important;
		}
		.p-50 {
		    padding: 50px !important;
		}
		.pt-0 {
			padding-top: 0 !important;
		}
		.pt-10 {
		    padding-top: 10px !important;
		}
		.pt-20 {
		    padding-top: 20px !important;
		}
		.pt-30 {
		    padding-top: 30px !important;
		}
		.pt-40 {
		    padding-top: 40px !important;
		}
		.pt-50 {
		    padding-top: 50px !important;
		}
		.pb-0 {
			padding-bottom: 0 !important;
		}
		.pb-10 {
		    padding-bottom: 10px !important;
		}
		.pb-20 {
		    padding-bottom: 20px !important;
		}
		.pb-30 {
		    padding-bottom: 30px !important;
		}
		.pb-40 {
		    padding-bottom: 40px !important;
		}
		.pb-50 {
		    padding-bottom: 50px !important;
		}

Video

Video container class - class="ssi-video-wrapper"
Video class - class="ssi-video"
Video iframe class - class="ssi-video iframe"
YouTube iframe/video class - "youtube-video" - makes youtube embeds responsive and keeps them at a 16:9 ratio

Images