Pattern Lab

Colors

#000
Sass Variable:
$theme-black
#c80000
Sass Variable:
$theme-red
#fff
Sass Variable:
$theme-white

HTML

									
										<ul class="sg-colors">
    <li>
      <div class="sg-swatch" style="background: #000;"></div>
      <div class="sg-info">
        <h6>#000</h6>
        Sass Variable: <br>
        $theme-black
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #c80000;"></div>
      <div class="sg-info">
        <h6>#c80000</h6>
        Sass Variable: <br>
        $theme-red
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #fff;"></div>
      <div class="sg-info">
        <h6>#fff</h6>
        Sass Variable: <br>
        $theme-white
      </div>
    </li>
</ul>

Greys

#111
Sass Variable:
$grey-black
#333
Sass Variable:
$grey-dark
#666
Sass Variable:
$grey-medium-dark
#818181
Sass Variable:
$grey
#999
Sass Variable:
$grey-slightly-light
#bbb
Sass Variable:
$grey-medium-light
#c0c0c0
Sass Variable:
$grey-light
#e0e0e0
Sass Variable:
$grey-lighter

HTML

									
										<ul class="sg-colors">
    <li>
      <div class="sg-swatch" style="background: #111;"></div>
      <div class="sg-info">
        <h6>#111</h6>
        Sass Variable: <br>
        $grey-black
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #333;"></div>
      <div class="sg-info">
        <h6>#333</h6>
        Sass Variable: <br>
        $grey-dark
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #666;"></div>
      <div class="sg-info">
        <h6>#666</h6>
        Sass Variable: <br>
        $grey-medium-dark
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #818181;"></div>
      <div class="sg-info">
        <h6>#818181</h6>
        Sass Variable: <br>
        $grey
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #999;"></div>
      <div class="sg-info">
        <h6>#999</h6>
        Sass Variable: <br>
        $grey-slightly-light
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #bbb;"></div>
      <div class="sg-info">
        <h6>#bbb</h6>
        Sass Variable: <br>
        $grey-medium-light
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #c0c0c0;"></div>
      <div class="sg-info">
        <h6>#c0c0c0</h6>
        Sass Variable: <br>
        $grey-light
      </div>
    </li>
    <li>
      <div class="sg-swatch" style="background: #e0e0e0;"></div>
      <div class="sg-info">
        <h6>#e0e0e0</h6>
        Sass Variable: <br>
        $grey-lighter
      </div>
    </li>
</ul>

Fonts

$font-base: georgia, times, serif
$font-base italic: georgia, times, serif
$font-base bold: georgia, times, serif

$font-primary: Trebuchet MS, Helvetica, Arial, sans-serif
$font-primary italic: Trebuchet MS, Helvetica, Arial, sans-serif
$font-primary bold: Trebuchet MS, Helvetica, Arial, sans-serif

$font-logo: "Permanent Marker", "Franklin Gothic Demi Cond", sans-serif
$font-logo italic: "Permanent Marker", "Franklin Gothic Demi Cond", sans-serif
$font-logo bold: "Permanent Marker", "Franklin Gothic Demi Cond", sans-serif

$font-header: "Franklin Gothic Demi Cond", sans-serif
$font-header italic: "Franklin Gothic Demi Cond", sans-serif
$font-header bold: "Franklin Gothic Demi Cond", sans-serif

$font-heading: Impact, sans-serif
$font-heading italic: Impact, sans-serif
$font-heading bold: Impact, sans-serif

HTML

									
										<dl class="inline">
    <dt>$font-base</dt>
        <dd style="font-family: georgia, times, serif;">georgia, times, serif</dd>
    <dt>$font-base italic</dt>
        <dd style="font-family: georgia, times, serif; font-style: italic;">georgia, times, serif</dd>
    <dt>$font-base bold</dt>
        <dd style="font-family: georgia, times, serif; font-weight: bold;">georgia, times, serif</dd>
</dl>
<dl class="inline">
    <dt>$font-primary</dt>
        <dd style="font-family: Trebuchet MS, Helvetica, Arial, sans-serif;">Trebuchet MS, Helvetica, Arial, sans-serif</dd>
    <dt>$font-primary italic</dt>
        <dd style="font-family: Trebuchet MS, Helvetica, Arial, sans-serif; font-style: italic;">Trebuchet MS, Helvetica, Arial, sans-serif</dd>
    <dt>$font-primary bold</dt>
        <dd style="font-family: Trebuchet MS, Helvetica, Arial, sans-serif; font-weight: bold;">Trebuchet MS, Helvetica, Arial, sans-serif</dd>
</dl>
<dl class="inline">
    <dt>$font-logo</dt>
        <dd style="font-family: &quot;Permanent Marker&quot;, &quot;Franklin Gothic Demi Cond&quot;, sans-serif;">&quot;Permanent Marker&quot;, &quot;Franklin Gothic Demi Cond&quot;, sans-serif</dd>
    <dt>$font-logo italic</dt>
        <dd style="font-family: &quot;Permanent Marker&quot;, &quot;Franklin Gothic Demi Cond&quot;, sans-serif; font-style: italic;">&quot;Permanent Marker&quot;, &quot;Franklin Gothic Demi Cond&quot;, sans-serif</dd>
    <dt>$font-logo bold</dt>
        <dd style="font-family: &quot;Permanent Marker&quot;, &quot;Franklin Gothic Demi Cond&quot;, sans-serif; font-weight: bold;">&quot;Permanent Marker&quot;, &quot;Franklin Gothic Demi Cond&quot;, sans-serif</dd>
</dl>
<dl class="inline">
    <dt>$font-header</dt>
        <dd style="font-family: &quot;Franklin Gothic Demi Cond&quot;, sans-serif;">&quot;Franklin Gothic Demi Cond&quot;, sans-serif</dd>
    <dt>$font-header italic</dt>
        <dd style="font-family: &quot;Franklin Gothic Demi Cond&quot;, sans-serif; font-style: italic;">&quot;Franklin Gothic Demi Cond&quot;, sans-serif</dd>
    <dt>$font-header bold</dt>
        <dd style="font-family: &quot;Franklin Gothic Demi Cond&quot;, sans-serif; font-weight: bold;">&quot;Franklin Gothic Demi Cond&quot;, sans-serif</dd>
</dl>
<dl class="inline">
    <dt>$font-heading</dt>
        <dd style="font-family: Impact, sans-serif;">Impact, sans-serif</dd>
    <dt>$font-heading italic</dt>
        <dd style="font-family: Impact, sans-serif; font-style: italic;">Impact, sans-serif</dd>
    <dt>$font-heading bold</dt>
        <dd style="font-family: Impact, sans-serif; font-weight: bold;">Impact, sans-serif</dd>
</dl>