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 5 KB style: polish demo visuals and add screenshot workflow
Raw Blame History 
<section class="demo-section">
  <h2>Palette</h2>

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

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

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

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