Colors

HTML

JADE

Default colors

#81c980

primary default

#9ad499

primary light

#c0e4bf

primary x-light

#6597cf

secondary default

#7cabdf

secondary light

#b2d1f2

secondary x-light

#65b864

success default

#81ef7f

success light

#baf6b9

success x-light

#d86762

danger default

#e77974

danger light

#f2b5b4

danger x-light

#7993ad

dark default

#88a3be

dark light

#beccdb

dark x-light

#39aad3

info default

#48bde7

info light

#9bdbf2

info x-light

#666

default default

#929e9e

default light

#c8ceca

default x-light

#eca24a

warning default

#fbb15a

warning light

#f6f5b2

warning x-light

#9244b5

alert default

#d177fa

alert light

#e6b4fc

alert x-light

<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #81c980" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #81c980
      </code>
    </div>
    <code class="doc-colors__title">
      primary default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #9ad499" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #9ad499
      </code>
    </div>
    <code class="doc-colors__title">
      primary light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #c0e4bf" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #c0e4bf
      </code>
    </div>
    <code class="doc-colors__title">
      primary x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #6597cf" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #6597cf
      </code>
    </div>
    <code class="doc-colors__title">
      secondary default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #7cabdf" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #7cabdf
      </code>
    </div>
    <code class="doc-colors__title">
      secondary light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #b2d1f2" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #b2d1f2
      </code>
    </div>
    <code class="doc-colors__title">
      secondary x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #65b864" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #65b864
      </code>
    </div>
    <code class="doc-colors__title">
      success default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #81ef7f" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #81ef7f
      </code>
    </div>
    <code class="doc-colors__title">
      success light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #baf6b9" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #baf6b9
      </code>
    </div>
    <code class="doc-colors__title">
      success x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #d86762" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #d86762
      </code>
    </div>
    <code class="doc-colors__title">
      danger default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #e77974" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #e77974
      </code>
    </div>
    <code class="doc-colors__title">
      danger light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #f2b5b4" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #f2b5b4
      </code>
    </div>
    <code class="doc-colors__title">
      danger x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #7993ad" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #7993ad
      </code>
    </div>
    <code class="doc-colors__title">
      dark default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #88a3be" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #88a3be
      </code>
    </div>
    <code class="doc-colors__title">
      dark light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #beccdb" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #beccdb
      </code>
    </div>
    <code class="doc-colors__title">
      dark x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #39aad3" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #39aad3
      </code>
    </div>
    <code class="doc-colors__title">
      info default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #48bde7" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #48bde7
      </code>
    </div>
    <code class="doc-colors__title">
      info light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #9bdbf2" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #9bdbf2
      </code>
    </div>
    <code class="doc-colors__title">
      info x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #666" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #666
      </code>
    </div>
    <code class="doc-colors__title">
      default default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #929e9e" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #929e9e
      </code>
    </div>
    <code class="doc-colors__title">
      default light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #c8ceca" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #c8ceca
      </code>
    </div>
    <code class="doc-colors__title">
      default x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #eca24a" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #eca24a
      </code>
    </div>
    <code class="doc-colors__title">
      warning default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #fbb15a" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #fbb15a
      </code>
    </div>
    <code class="doc-colors__title">
      warning light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #f6f5b2" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #f6f5b2
      </code>
    </div>
    <code class="doc-colors__title">
      warning x-light 
    </code>
  </div>
</div>
<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #9244b5" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #9244b5
      </code>
    </div>
    <code class="doc-colors__title">
      alert default 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #d177fa" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #d177fa
      </code>
    </div>
    <code class="doc-colors__title">
      alert light 
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #e6b4fc" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #e6b4fc
      </code>
    </div>
    <code class="doc-colors__title">
      alert x-light 
    </code>
  </div>
</div>


                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #81c980" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#81c980</code></div><code class="doc-colors__title">primary default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #9ad499" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#9ad499</code></div><code class="doc-colors__title">primary light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #c0e4bf" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#c0e4bf</code></div><code class="doc-colors__title">primary x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #6597cf" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#6597cf</code></div><code class="doc-colors__title">secondary default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #7cabdf" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#7cabdf</code></div><code class="doc-colors__title">secondary light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #b2d1f2" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#b2d1f2</code></div><code class="doc-colors__title">secondary x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #65b864" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#65b864</code></div><code class="doc-colors__title">success default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #81ef7f" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#81ef7f</code></div><code class="doc-colors__title">success light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #baf6b9" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#baf6b9</code></div><code class="doc-colors__title">success x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #d86762" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#d86762</code></div><code class="doc-colors__title">danger default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #e77974" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#e77974</code></div><code class="doc-colors__title">danger light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #f2b5b4" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#f2b5b4</code></div><code class="doc-colors__title">danger x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #7993ad" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#7993ad</code></div><code class="doc-colors__title">dark default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #88a3be" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#88a3be</code></div><code class="doc-colors__title">dark light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #beccdb" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#beccdb</code></div><code class="doc-colors__title">dark x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #39aad3" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#39aad3</code></div><code class="doc-colors__title">info default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #48bde7" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#48bde7</code></div><code class="doc-colors__title">info light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #9bdbf2" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#9bdbf2</code></div><code class="doc-colors__title">info x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #666" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#666</code></div><code class="doc-colors__title">default default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #929e9e" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#929e9e</code></div><code class="doc-colors__title">default light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #c8ceca" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#c8ceca</code></div><code class="doc-colors__title">default x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #eca24a" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#eca24a</code></div><code class="doc-colors__title">warning default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #fbb15a" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#fbb15a</code></div><code class="doc-colors__title">warning light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #f6f5b2" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#f6f5b2</code></div><code class="doc-colors__title">warning x-light </code>
                          </div>
                        </div>
                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #9244b5" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#9244b5</code></div><code class="doc-colors__title">alert default </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #d177fa" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#d177fa</code></div><code class="doc-colors__title">alert light </code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #e6b4fc" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#e6b4fc</code></div><code class="doc-colors__title">alert x-light </code>
                          </div>
                        </div>

Gray colors

#000000

full

#333333

text

#999999

shade

#dddddd

separator

#f3f3f3

inactive

#cccccc

placeholder

#fafafa

zebra

#fbfbfb

body

#ffffff

empty

<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #000000" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #000000
      </code>
    </div>
    <code class="doc-colors__title">
      full
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #333333" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #333333
      </code>
    </div>
    <code class="doc-colors__title">
      text
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #999999" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #999999
      </code>
    </div>
    <code class="doc-colors__title">
      shade
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #dddddd" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #dddddd
      </code>
    </div>
    <code class="doc-colors__title">
      separator
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #f3f3f3" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #f3f3f3
      </code>
    </div>
    <code class="doc-colors__title">
      inactive
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #cccccc" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #cccccc
      </code>
    </div>
    <code class="doc-colors__title">
      placeholder
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #fafafa" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #fafafa
      </code>
    </div>
    <code class="doc-colors__title">
      zebra
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #fbfbfb" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #fbfbfb
      </code>
    </div>
    <code class="doc-colors__title">
      body
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #ffffff" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #ffffff
      </code>
    </div>
    <code class="doc-colors__title">
      empty
    </code>
  </div>
</div>


                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #000000" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#000000</code></div><code class="doc-colors__title">full</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #333333" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#333333</code></div><code class="doc-colors__title">text</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #999999" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#999999</code></div><code class="doc-colors__title">shade</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #dddddd" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#dddddd</code></div><code class="doc-colors__title">separator</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #f3f3f3" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#f3f3f3</code></div><code class="doc-colors__title">inactive</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #cccccc" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#cccccc</code></div><code class="doc-colors__title">placeholder</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #fafafa" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#fafafa</code></div><code class="doc-colors__title">zebra</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #fbfbfb" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#fbfbfb</code></div><code class="doc-colors__title">body</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #ffffff" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#ffffff</code></div><code class="doc-colors__title">empty</code>
                          </div>
                        </div>

Navigation colors

#002838

background

#00162b

background-active

#0f344a

background-hover

#b6bec3

text

#ffffff

text-active

#ffffff

text-hover

<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #002838" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #002838
      </code>
    </div>
    <code class="doc-colors__title">
      background
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #00162b" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #00162b
      </code>
    </div>
    <code class="doc-colors__title">
      background-active
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #0f344a" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #0f344a
      </code>
    </div>
    <code class="doc-colors__title">
      background-hover
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #b6bec3" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #b6bec3
      </code>
    </div>
    <code class="doc-colors__title">
      text
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #ffffff" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #ffffff
      </code>
    </div>
    <code class="doc-colors__title">
      text-active
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #ffffff" class="doc-colors__example">
      <code style="color:#000000" class="doc-colors__colorcode">
        #ffffff
      </code>
    </div>
    <code class="doc-colors__title">
      text-hover
    </code>
  </div>
</div>


                        <div class="doc-colors">
                          <div class="doc-colors__color">
                            <div style="background-color: #002838" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#002838</code></div><code class="doc-colors__title">background</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #00162b" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#00162b</code></div><code class="doc-colors__title">background-active</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #0f344a" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#0f344a</code></div><code class="doc-colors__title">background-hover</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #b6bec3" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#b6bec3</code></div><code class="doc-colors__title">text</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #ffffff" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#ffffff</code></div><code class="doc-colors__title">text-active</code>
                          </div>
                          <div class="doc-colors__color">
                            <div style="background-color: #ffffff" class="doc-colors__example"><code style="color:#000000" class="doc-colors__colorcode">#ffffff</code></div><code class="doc-colors__title">text-hover</code>
                          </div>
                        </div>

Service specific colors

Reporting colors

#65B964

opened

#86DA85

mobile_opened

#3b855a

desktop_opened

#012851

sent

#4A4EB2

clicked

#6E71C2

mobile_clicked

#424e88

desktop_clicked

#00c9b4

mobile_click_through

#7993AC

delivered

#A6AC6C

bounced

#9F6E5D

purchased

#D86761

unsubscribed

#ECA24B

complained

#ECA24B

optin_users

<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #65B964" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #65B964
      </code>
    </div>
    <code class="doc-colors__title">
      opened
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #86DA85" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #86DA85
      </code>
    </div>
    <code class="doc-colors__title">
      mobile_opened
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #3b855a" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #3b855a
      </code>
    </div>
    <code class="doc-colors__title">
      desktop_opened
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #012851" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #012851
      </code>
    </div>
    <code class="doc-colors__title">
      sent
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #4A4EB2" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #4A4EB2
      </code>
    </div>
    <code class="doc-colors__title">
      clicked
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #6E71C2" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #6E71C2
      </code>
    </div>
    <code class="doc-colors__title">
      mobile_clicked
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #424e88" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #424e88
      </code>
    </div>
    <code class="doc-colors__title">
      desktop_clicked
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #00c9b4" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #00c9b4
      </code>
    </div>
    <code class="doc-colors__title">
      mobile_click_through
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #7993AC" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #7993AC
      </code>
    </div>
    <code class="doc-colors__title">
      delivered
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #A6AC6C" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #A6AC6C
      </code>
    </div>
    <code class="doc-colors__title">
      bounced
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #9F6E5D" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #9F6E5D
      </code>
    </div>
    <code class="doc-colors__title">
      purchased
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #D86761" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #D86761
      </code>
    </div>
    <code class="doc-colors__title">
      unsubscribed
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #ECA24B" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #ECA24B
      </code>
    </div>
    <code class="doc-colors__title">
      complained
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #ECA24B" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #ECA24B
      </code>
    </div>
    <code class="doc-colors__title">
      optin_users
    </code>
  </div>
</div>


                          <div class="doc-colors">
                            <div class="doc-colors__color">
                              <div style="background-color: #65B964" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#65B964</code></div><code class="doc-colors__title">opened</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #86DA85" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#86DA85</code></div><code class="doc-colors__title">mobile_opened</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #3b855a" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#3b855a</code></div><code class="doc-colors__title">desktop_opened</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #012851" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#012851</code></div><code class="doc-colors__title">sent</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #4A4EB2" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#4A4EB2</code></div><code class="doc-colors__title">clicked</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #6E71C2" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#6E71C2</code></div><code class="doc-colors__title">mobile_clicked</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #424e88" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#424e88</code></div><code class="doc-colors__title">desktop_clicked</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #00c9b4" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#00c9b4</code></div><code class="doc-colors__title">mobile_click_through</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #7993AC" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#7993AC</code></div><code class="doc-colors__title">delivered</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #A6AC6C" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#A6AC6C</code></div><code class="doc-colors__title">bounced</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #9F6E5D" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#9F6E5D</code></div><code class="doc-colors__title">purchased</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #D86761" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#D86761</code></div><code class="doc-colors__title">unsubscribed</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #ECA24B" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#ECA24B</code></div><code class="doc-colors__title">complained</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #ECA24B" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#ECA24B</code></div><code class="doc-colors__title">optin_users</code>
                            </div>
                          </div>

Socialads colors

#65b964

impressions

#5fce5e

socialreach

#86da85

reach

#3b3e8e

likes

#4a4eb2

clicks

#6e71c2

pageclick

#6d70c2

cpc

#d86761

frequency

#eca24b

comments

#7f584a

conversions

#8f6354

spent

#9f6e5d

revenue

#bc998c

cpm

#c5a79d

costperconversion

<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #65b964" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #65b964
      </code>
    </div>
    <code class="doc-colors__title">
      impressions
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #5fce5e" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #5fce5e
      </code>
    </div>
    <code class="doc-colors__title">
      socialreach
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #86da85" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #86da85
      </code>
    </div>
    <code class="doc-colors__title">
      reach
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #3b3e8e" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #3b3e8e
      </code>
    </div>
    <code class="doc-colors__title">
      likes
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #4a4eb2" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #4a4eb2
      </code>
    </div>
    <code class="doc-colors__title">
      clicks
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #6e71c2" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #6e71c2
      </code>
    </div>
    <code class="doc-colors__title">
      pageclick
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #6d70c2" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #6d70c2
      </code>
    </div>
    <code class="doc-colors__title">
      cpc
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #d86761" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #d86761
      </code>
    </div>
    <code class="doc-colors__title">
      frequency
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #eca24b" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #eca24b
      </code>
    </div>
    <code class="doc-colors__title">
      comments
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #7f584a" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #7f584a
      </code>
    </div>
    <code class="doc-colors__title">
      conversions
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #8f6354" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #8f6354
      </code>
    </div>
    <code class="doc-colors__title">
      spent
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #9f6e5d" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #9f6e5d
      </code>
    </div>
    <code class="doc-colors__title">
      revenue
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #bc998c" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #bc998c
      </code>
    </div>
    <code class="doc-colors__title">
      cpm
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #c5a79d" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #c5a79d
      </code>
    </div>
    <code class="doc-colors__title">
      costperconversion
    </code>
  </div>
</div>


                          <div class="doc-colors">
                            <div class="doc-colors__color">
                              <div style="background-color: #65b964" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#65b964</code></div><code class="doc-colors__title">impressions</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #5fce5e" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#5fce5e</code></div><code class="doc-colors__title">socialreach</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #86da85" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#86da85</code></div><code class="doc-colors__title">reach</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #3b3e8e" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#3b3e8e</code></div><code class="doc-colors__title">likes</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #4a4eb2" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#4a4eb2</code></div><code class="doc-colors__title">clicks</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #6e71c2" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#6e71c2</code></div><code class="doc-colors__title">pageclick</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #6d70c2" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#6d70c2</code></div><code class="doc-colors__title">cpc</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #d86761" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#d86761</code></div><code class="doc-colors__title">frequency</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #eca24b" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#eca24b</code></div><code class="doc-colors__title">comments</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #7f584a" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#7f584a</code></div><code class="doc-colors__title">conversions</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #8f6354" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#8f6354</code></div><code class="doc-colors__title">spent</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #9f6e5d" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#9f6e5d</code></div><code class="doc-colors__title">revenue</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #bc998c" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#bc998c</code></div><code class="doc-colors__title">cpm</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #c5a79d" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#c5a79d</code></div><code class="doc-colors__title">costperconversion</code>
                            </div>
                          </div>

Notification Center colors

#81c980

from-emarsys

#b5b439

segment-generation

#d69237

automation-center

#39aad3

data-import

#7725ab

campaign-launch

#9f6e5d

dns-fasttrack

#929e9e

achievement

<div class="doc-colors">
  <div class="doc-colors__color">
    <div style="background-color: #81c980" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #81c980
      </code>
    </div>
    <code class="doc-colors__title">
      from-emarsys
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #b5b439" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #b5b439
      </code>
    </div>
    <code class="doc-colors__title">
      segment-generation
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #d69237" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #d69237
      </code>
    </div>
    <code class="doc-colors__title">
      automation-center
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #39aad3" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #39aad3
      </code>
    </div>
    <code class="doc-colors__title">
      data-import
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #7725ab" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #7725ab
      </code>
    </div>
    <code class="doc-colors__title">
      campaign-launch
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #9f6e5d" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #9f6e5d
      </code>
    </div>
    <code class="doc-colors__title">
      dns-fasttrack
    </code>
  </div>
  <div class="doc-colors__color">
    <div style="background-color: #929e9e" class="doc-colors__example">
      <code style="color:#ffffff" class="doc-colors__colorcode">
        #929e9e
      </code>
    </div>
    <code class="doc-colors__title">
      achievement
    </code>
  </div>
</div>


                          <div class="doc-colors">
                            <div class="doc-colors__color">
                              <div style="background-color: #81c980" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#81c980</code></div><code class="doc-colors__title">from-emarsys</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #b5b439" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#b5b439</code></div><code class="doc-colors__title">segment-generation</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #d69237" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#d69237</code></div><code class="doc-colors__title">automation-center</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #39aad3" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#39aad3</code></div><code class="doc-colors__title">data-import</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #7725ab" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#7725ab</code></div><code class="doc-colors__title">campaign-launch</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #9f6e5d" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#9f6e5d</code></div><code class="doc-colors__title">dns-fasttrack</code>
                            </div>
                            <div class="doc-colors__color">
                              <div style="background-color: #929e9e" class="doc-colors__example"><code style="color:#ffffff" class="doc-colors__colorcode">#929e9e</code></div><code class="doc-colors__title">achievement</code>
                            </div>
                          </div>

Last update

Message	refactor(color): add color tag to json
Date:	()
Committer:	David Gyenes

Component history