Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Color

Default colors

Copy Pug
Copy HTML
Show code
Hide code

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

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

Gray colors
Copy Pug
Copy HTML
Show code
Hide code

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

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

Navigation colors
Copy Pug
Copy HTML
Show code
Hide code

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

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

Service specific colors

Reporting colors
Copy Pug
Copy HTML
Show code
Hide code

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

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

Socialads colors
Copy Pug
Copy HTML
Show code
Hide code

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

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

Notification Center colors
Copy Pug
Copy HTML
Show code
Hide code

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

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

Smart Insight colors
Copy Pug
Copy HTML
Show code
Hide code

<div class="doc-colors">
  <div class="doc-colors__color">
    <div class="doc-colors__example" style="background-color: #6597cf">
      <code class="doc-colors__colorcode" style="color:#ffffff">
        #6597cf
      </code>
    </div>
    <code class="doc-colors__title">
      current_period
    </code>
  </div>
  <div class="doc-colors__color">
    <div class="doc-colors__example" style="background-color: #9bdbf2">
      <code class="doc-colors__colorcode" style="color:#000000">
        #9bdbf2
      </code>
    </div>
    <code class="doc-colors__title">
      comparison_period
    </code>
  </div>
</div>

<div class="doc-colors"><div class="doc-colors__color"><div class="doc-colors__example" style="background-color: #6597cf"><code class="doc-colors__colorcode" style="color:#ffffff">#6597cf</code></div><code class="doc-colors__title">current_period</code></div><div class="doc-colors__color"><div class="doc-colors__example" style="background-color: #9bdbf2"><code class="doc-colors__colorcode" style="color:#000000">#9bdbf2</code></div><code class="doc-colors__title">comparison_period</code></div></div>
#6597cf
current_period
#9bdbf2
comparison_period