Shadows and radius
Depth and corners
Shadows
shadow-1shadow-2shadow-3Code
<div class="shadow-tile" style="box-shadow: var(--shadow-1)"><code>shadow-1</code></div>
<div class="shadow-tile" style="box-shadow: var(--shadow-2)"><code>shadow-2</code></div>
<div class="shadow-tile" style="box-shadow: var(--shadow-3)"><code>shadow-3</code></div>Radius
rounded-xs6pxrounded-sm10pxrounded-md14pxrounded-lg20pxrounded-xl28pxCode
<div class="radius-tile" style="border-radius: 6px"><code>rounded-xs</code><small>6px</small></div>
<div class="radius-tile" style="border-radius: 10px"><code>rounded-sm</code><small>10px</small></div>
<div class="radius-tile" style="border-radius: 14px"><code>rounded-md</code><small>14px</small></div>
<div class="radius-tile" style="border-radius: 20px"><code>rounded-lg</code><small>20px</small></div>
<div class="radius-tile" style="border-radius: 28px"><code>rounded-xl</code><small>28px</small></div>