3.1 #style.colors Colors

Acceptable colors for use on SUNY Oswego websites

Example

Hunter green

#235937
$oswego-green

Golden yellow

#FFCC33
$oswego-gold

Cool green

#498957
$cool-green

Cool gold

#f7bb16
$cool-gold

Light gray

#f2f2f2
$light-gray

Medium gray

#686868
$medium-gray

Dark gray

#2d2d2d
$dark-gray

<div class="row">
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Hunter green</div>
      <div class="panel-body bg-gr">
        #235937<br>
        $oswego-green
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Golden yellow</div>
      <div class="panel-body bg-ye">
        #FFCC33<br>
        $oswego-gold
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Cool green</div>
      <div class="panel-body cool-green">
        #498957<br>
        $cool-green
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Cool gold</div>
      <div class="panel-body cool-gold">
        #f7bb16<br>
        $cool-gold
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Light gray</div>
      <div class="panel-body light-gray">
        #f2f2f2<br>
        $light-gray
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Medium gray</div>
      <div class="panel-body medium-gray">
        #686868<br>
        $medium-gray
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading">Dark gray</div>
      <div class="panel-body dark-gray tc-w">
        #2d2d2d<br>
        $dark-gray
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="panel panel-default">
      <div class="panel-heading"></div>
      <div class="panel-body">

      </div>
    </div>
  </div>
</div>

<style type="text/css">
  #kssref-colors > div.kss-markup.kss-style {
    display: none;
  }
</style>

3.2 #style.hr Horizontal rule

A simple separator

Example

<hr>

3.3.1 #style.typography.headings Style

SUNY Oswego's core styles

Style guide: style Typography

SUNY Oswego's typographic guidelines

Style guide: style.typography Headings

SUNY Oswego's heading styles

Example

Behold this level one heading