Fork: 0
root / vmk-ui-kit
Transfer to URL with SHA Find file
Newer
Older
vmk-ui-kit / demo / partials / palette.html
@Eugene Sukhodolskiy Eugene Sukhodolskiy 1 day ago 3 KB Add Input, Badge, Alert components and foundation demos
Raw Blame History 
<section class="demo-section">
  <h2>Palette</h2>

  <h3>Neutral</h3>
  <div class="demo-row">
    <div class="swatch"><div class="swatch-color" style="background:#FCFCFC;border:1px solid #E1E2E3"></div><span>0 #FCFCFC</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#F7F7F8"></div><span>50 #F7F7F8</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#F0F0F0"></div><span>100 #F0F0F0</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#E1E2E3"></div><span>200 #E1E2E3</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#D9D9D9"></div><span>300 #D9D9D9</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#B7BABE"></div><span>400 #B7BABE</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#9CA3AF"></div><span>500 #9CA3AF</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#82868D"></div><span>600 #82868D</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#6B7280"></div><span>700 #6B7280</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#3F4145"></div><span>800 #3F4145</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#1A1A1A"></div><span>900 #1A1A1A</span></div>
  </div>

  <h3>Mint</h3>
  <div class="demo-row">
    <div class="swatch"><div class="swatch-color" style="background:#F2FAFB"></div><span>50 #F2FAFB</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#DFF1F4"></div><span>200 #DFF1F4</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#D9EEF2"></div><span>300 #D9EEF2</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#7EC0C9"></div><span>600 #7EC0C9</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#316873"></div><span>800 #316873</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#1F4B52"></div><span>900 #1F4B52</span></div>
  </div>

  <h3>Yellow</h3>
  <div class="demo-row">
    <div class="swatch"><div class="swatch-color" style="background:#FEFEF0"></div><span>50 #FEFEF0</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#FDFCB8"></div><span>100 #FDFCB8</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#FCFD76"></div><span>300 #FCFD76</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#F0F166"></div><span>400 #F0F166</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#E8E94A"></div><span>500 #E8E94A</span></div>
  </div>

  <h3>Semantic</h3>
  <div class="demo-row">
    <div class="swatch"><div class="swatch-color" style="background:#DDF3E4"></div><span>Success bg #DDF3E4</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#1E7A46"></div><span>Success text #1E7A46</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#FEF0DD"></div><span>Warning bg #FEF0DD</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#B45309"></div><span>Warning text #B45309</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#EAF4FE"></div><span>Info bg #EAF4FE</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#2563A6"></div><span>Info text #2563A6</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#FBE4E2"></div><span>Danger bg #FBE4E2</span></div>
    <div class="swatch"><div class="swatch-color" style="background:#D64545"></div><span>Danger text #D64545</span></div>
  </div>
</section>