<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #527E08; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Success</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#527E08</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">103, 157, 10</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-success </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #DDF599; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Success Light</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#DDF599</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">221, 245, 153</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-success-light </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #1948AC; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Info</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#1948AC</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">25, 72, 1729</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-info </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #ADD7FD; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Info Light</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#ADD7FD</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">173, 215, 253</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-info-light </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #DB961E; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Warning</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#DB961E</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">219, 150, 30</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-warning </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #FFEBA9; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Warning Light</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#FFEBA9</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">255, 235, 169</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-warning-light </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #B1232D; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Error</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#B1232D</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">177, 35, 45</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-error </span></p>
</div>
</div>
<div class="mb-3 col-5 d-inline-block border p-0 mr-2">
<div class="wtw-color-swatch" style="background-color: #FAC2AD; height: 50px"></div>
<div class="color-swatch-wrapper p-2">
<div class="heading-6">Error Light</div>
<p class="m-0 p-0 font-p-xsmall">HEX: <span class="font-monospace">#FAC2AD</span></p>
<p class="m-0 p-0 font-p-xsmall">RGB: <span class="font-monospace">250, 194, 173</span></p>
<p class="m-0 p-0 font-p-xsmall">SCSS token: <span class="font-monospace">$wtw-error-light </span></p>
</div>
</div>