t3-code-android-nightly/.repos/alchemy-effect/website/design-system/preview/spacing-elevation.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Elevation</title>
    <link rel="stylesheet" href="_card.css" />
    <style>
      .row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 20px 10px;
      }
      .cell {
        text-align: center;
      }
      .box {
        width: 120px;
        height: 80px;
        background: var(--alc-bg-elev-1);
        border: 1px solid var(--alc-hairline);
        border-radius: 8px;
        margin: 0 auto 10px;
      }
      .s1 {
        box-shadow: var(--alc-shadow-sm);
      }
      .s2 {
        box-shadow: var(--alc-shadow);
      }
      .s3 {
        box-shadow: var(--alc-glow);
        border-color: transparent;
      }
      .name {
        font-family: var(--alc-font-mono);
        font-size: 11px;
        color: var(--alc-fg-1);
        font-weight: 500;
      }
      .desc {
        font-family: var(--alc-font-mono);
        font-size: 10px;
        color: var(--alc-fg-3);
        margin-top: 2px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="row">
        <div class="cell">
          <div class="box s1"></div>
          <div class="name">shadow-sm</div>
          <div class="desc">floating chips</div>
        </div>
        <div class="cell">
          <div class="box s2"></div>
          <div class="name">shadow</div>
          <div class="desc">popovers, menus</div>
        </div>
        <div class="cell">
          <div class="box s3"></div>
          <div class="name">glow</div>
          <div class="desc">focus, active CTA</div>
        </div>
      </div>
    </div>
  </body>
</html>