Colors

Font Colors

updated 1.8.0

The secondary font color (#666) should not be used on text smaller than 16px.

  • @font-color-primary:
    #001733
  • @font-color-primary:
    #333
  • @font-color-secondary:
    #666
  • @font-color-action:
    #005CCC
  • @font-color-action:
    #A61111
  • @font-color-brand:
    #003980
  • @font-color-brand:
    #CC1414
  • @font-color-savings:
    #D01833
<ul class="list-colors">
  <li class="sears">
    <div class="swatch" style="background:#001733;"></div>
    @font-color-primary:<br>
    #001733
  </li>
  <li class="kmart">
    <div class="swatch" style="background:#333;"></div>
    @font-color-primary:<br>
    #333
  </li>
  <li>
    <div class="swatch" style="background:#666;"></div>
    @font-color-secondary:<br>
    #666
  </li>
</ul>
<ul class="list-colors">
  <li class="sears">
    <div class="swatch" style="background:#005CCC"></div>
    @font-color-action:<br>
    #005CCC
  </li>
  <li class="kmart">
    <div class="swatch" style="background:#A61111"></div>
    @font-color-action:<br>
    #A61111
  </li>
  <li class="sears">
    <div class="swatch" style="background:#003980"></div>
    @font-color-brand:<br>
    #003980
  </li>
  <li class="kmart">
    <div class="swatch" style="background:#CC1414"></div>
    @font-color-brand:<br>
    #CC1414
  </li>
  <li>
    <div class="swatch" style="background:#D01833;"></div>
    @font-color-savings:<br>
    #D01833
  </li>
</ul>

Content Colors

updated 1.8.0
  • @content-color-action:
    #005CCC
  • @content-color-brand:
    #003980
  • @content-color-action:
    #A61111
  • @content-color-brand:
    #CC1414
<ul class="list-colors sears">
  <li>
    <div class="swatch" style="background:#005CCC"></div>
    @content-color-action:<br>
    #005CCC
  </li>
  <li>
    <div class="swatch" style="background:#003980"></div>
    @content-color-brand:<br>
    #003980
  </li>
</ul>
<ul class="list-colors kmart">
  <li>
    <div class="swatch" style="background:#A61111"></div>
    @content-color-action:<br>
    #A61111
  </li>
  <li>
    <div class="swatch" style="background:#CC1414"></div>
    @content-color-brand:<br>
    #CC1414
  </li>
</ul>

Background Colors

  • @content-color-background-primary:
    #FFF
  • @content-color-background-secondary:
    #EEE
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#FFF; border: 1px solid #AAA;"></div>
    @content-color-background-primary:<br>
    #FFF
  </li>
  <li>
    <div class="swatch" style="background:#EEE"></div>
    @content-color-background-secondary:<br>
    #EEE
  </li>
</ul>

Border Colors

  • @content-color-border-light:
    #E3E3E3
  • @content-color-border-medium:
    #D0D0D0
  • @content-color-border-dark:
    #AAA
  • @content-color-border-hover:
    #333
  • @content-color-border-hover:
    #001733
<ul class="list-colors">
  <li>
    <div class="swatch" style="background:#E3E3E3;"></div>
    @content-color-border-light:<br>
    #E3E3E3
  </li>
  <li>
    <div class="swatch" style="background:#D0D0D0;"></div>
    @content-color-border-medium:<br>
    #D0D0D0
  </li>
  <li>
    <div class="swatch" style="background:#AAA;"></div>
    @content-color-border-dark:<br>
    #AAA
  </li>
</ul>
<ul class="list-colors">
  <li class="kmart">
    <div class="swatch" style="background:#333;"></div>
    @content-color-border-hover:<br>
    #333
  </li>
  <li class="sears">
    <div class="swatch" style="background:#001733;"></div>
    @content-color-border-hover:<br>
    #001733
  </li> 
</ul>

Button Colors

updated 1.8.0
  • Primary
  • @button-color-primary:
    #FF4800
  • @button-color-primary-border:
    #FF4800 #FF4800 #C23700
  • @button-color-primary-hover:
    #E44101
  • @button-color-primary-border-hover:
    #FF4800 #FF4800 #C23700
  • Secondary
  • @button-color-secondary:
    #EAF6FD
  • @button-color-secondary-hover:
    #D9E9F2
  • @button-color-secondary-border:
    #B2C3D9
  • Primary
  • @button-color-primary:
    #CC1414
  • @button-color-primary-border:
    #CC1414 #CC1414 #800D0D
  • @button-color-primary-hover:
    #800D0D
  • @button-color-primary-border-hover:
    #800D0D #800D0D #5A0000
  • Secondary
  • @button-color-secondary:
    #E8F5FB
  • @button-color-secondary-hover:
    #CEE6F2
  • @button-color-secondary-border:
    #B2CADD
  • Tertiary
  • @button-color-tertiary:
    #FFF
  • @button-color-tertiary-hover:
    #EEE
  • @button-color-tertiary-border:
    #AAA
<ul class="list-colors sears">
  <li class="title-4">Primary</li>
  <li>
    <div class="swatch" style="background:#ff4800"></div>
    @button-color-primary:<br>
    #FF4800
  </li>
  <li>
    <div class="swatch" style="background: #FF4800;border: 1em solid; border-color: #FF4800 #FF4800 #C23700"></div>
    @button-color-primary-border:<br>
    #FF4800 #FF4800 #C23700
  </li>
  <li>
    <div class="swatch" style="background:#E44101"></div>
    @button-color-primary-hover:<br>
    #E44101
  </li>
  <li>
    <div class="swatch" style="background: #E44101;border: 1em solid; border-color: #FF4800 #FF4800 #C23700"></div>
    @button-color-primary-border-hover:<br>
    #FF4800 #FF4800 #C23700
  </li>
</ul>
<ul class="list-colors sears">
  <li class="title-4">Secondary</li>
  <li>
    <div class="swatch" style="background:#EAF6FD"></div>
    @button-color-secondary:<br>
    #EAF6FD
  </li>
  <li>
    <div class="swatch" style="background:#D9E9F2"></div>
    @button-color-secondary-hover:<br>
    #D9E9F2
  </li>
  <li>
    <div class="swatch" style="background:#B2C3D9"></div>
    @button-color-secondary-border:<br>
    #B2C3D9
  </li>
</ul>

<ul class="list-colors kmart">
  <li class="title-4">Primary</li>
  <li>
    <div class="swatch" style="background:#CC1414"></div>
    @button-color-primary:<br>
    #CC1414
  </li>
  <li>
    <div class="swatch" style="background: #CC1414;border: 1em solid; border-color: #CC1414 #CC1414 #800D0D;"></div>
    @button-color-primary-border:<br>
    #CC1414 #CC1414 #800D0D
  </li>
  <li>
    <div class="swatch" style="background:#800D0D"></div>
    @button-color-primary-hover:<br>
    #800D0D
  </li>
  <li>
    <div class="swatch" style="background: #800D0D;border: 1em solid; border-color: #800D0D #800D0D #5A0000;"></div>
    @button-color-primary-border-hover:<br>
    #800D0D #800D0D #5A0000
  </li>
</ul>
<ul class="list-colors kmart">
  <li class="title-4">Secondary</li>
  <li>
    <div class="swatch" style="background:#E8F5FB"></div>
    @button-color-secondary:<br>
    #E8F5FB
  </li>
  <li>
    <div class="swatch" style="background:#CEE6F2"></div>
    @button-color-secondary-hover:<br>
    #CEE6F2
  </li>
  <li>
    <div class="swatch" style="background:#B2CADD"></div>
    @button-color-secondary-border:<br>
    #B2CADD
  </li>
</ul>

<ul class="list-colors">
  <li class="title-4">Tertiary</li>
  <li>
    <div class="swatch" style="background:#FFF; border: 1px solid #AAA;"></div>
    @button-color-tertiary:<br>
    #FFF
  </li>
  <li>
    <div class="swatch" style="background:#EEE"></div>
    @button-color-tertiary-hover:<br>
    #EEE
  </li>
  <li>
    <div class="swatch" style="background:#AAA"></div>
    @button-color-tertiary-border:<br>
    #AAA
  </li>
</ul>

Brand Colors

updated 1.8.0

These colors are made available in the event that a specific brand's color needs to be used on another site (e.g., Kmart red is needed on sears.com).

  • @brand-color-sears:
    #003980
  • @brand-color-kmart:
    #CC1414
  • @brand-color-syw:
    #F17F21
<ul class="list-colors">  
  <li>
    <div class="swatch" style="background:#003980;"></div>
    @brand-color-sears:<br>
    #003980
  </li>
  <li>
    <div class="swatch" style="background:#CC1414;"></div>
    @brand-color-kmart:<br>
    #CC1414
  </li>
  <li>
    <div class="swatch" style="background:#F17F21;"></div>
    @brand-color-syw:<br>
    #F17F21
  </li>
</ul>

Form Feedback Colors

  • Border Colors
  • @feedback-color-success:
    #347814
  • @feedback-color-alert:
    #FEC70B
  • @feedback-color-error:
    #D01833
  • Background Colors
  • @feedback-color-success-background:
    #D6E4D0 or 20% of #347814
  • @feedback-color-alert-background:
    #FEF3CE or 20% of #FEC70B
  • @feedback-color-error-background:
    #F5D0D6 or 20% of #D01833
  • Font Colors
  • @feedback-color-success:
    #347814
  • @font-color-primary:
    #001733
  • @font-color-primary:
    #333
  • @feedback-color-error:
    #D01833
<ul class="list-colors">
  <li class="title-4">Border Colors</li>
  <li>
    <div class="swatch" style="background:#347814;"></div>
    @feedback-color-success:<br>
    #347814
  </li>
  <li>
    <div class="swatch" style="background:#FEC70B;"></div>
    @feedback-color-alert:<br>
    #FEC70B
  </li>
  <li>
    <div class="swatch" style="background:#D01833;"></div>
    @feedback-color-error:<br>
    #D01833
  </li>
</ul>
<ul class="list-colors">
  <li class="title-4">Background Colors</li>
  <li>
    <div class="swatch feedback-bg-success" style="background:#D6E4D0"></div>
    @feedback-color-success-background:<br>
    #D6E4D0 or 20% of #347814
  </li>
  <li>
    <div class="swatch feedback-bg-alert" style="background:#FEF3CE"></div>
    @feedback-color-alert-background:<br>
    #FEF3CE or 20% of #FEC70B
  </li>
  <li>
    <div class="swatch feedback-bg-error" style="background:#F5D0D6"></div>
    @feedback-color-error-background:<br>
    #F5D0D6 or 20% of #D01833
  </li>
</ul>
<ul class="list-colors">
  <li class="title-4">Font Colors</li>
  <li>
    <div class="swatch" style="background:#347814;"></div>
    @feedback-color-success:<br>
    #347814
  </li>
  <li class="sears">
    <div class="swatch" style="background:#001733;"></div>
    @font-color-primary:<br>
    #001733
  </li>
  <li class="kmart">
    <div class="swatch" style="background:#333;"></div>
    @font-color-primary:<br>
    #333
  </li>
  <li>
    <div class="swatch" style="background:#D01833;"></div>
    @feedback-color-error:<br>
    #D01833
  </li>
</ul>