Design Tokenها

<div ui="stack tight" class="ltr">
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-1</code><span class="scale-box" style="inline-size:var(--bana-space-1);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-2</code><span class="scale-box" style="inline-size:var(--bana-space-2);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-3</code><span class="scale-box" style="inline-size:var(--bana-space-3);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-4</code><span class="scale-box" style="inline-size:var(--bana-space-4);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-5</code><span class="scale-box" style="inline-size:var(--bana-space-5);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-6</code><span class="scale-box" style="inline-size:var(--bana-space-6);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-8</code><span class="scale-box" style="inline-size:var(--bana-space-8);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-10</code><span class="scale-box" style="inline-size:var(--bana-space-10);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-12</code><span class="scale-box" style="inline-size:var(--bana-space-12);min-block-size:1.5rem;padding:0"></span></div>
  <div style="display:flex;align-items:center;gap:1rem"><code style="inline-size:7rem">--bana-space-16</code><span class="scale-box" style="inline-size:var(--bana-space-16);min-block-size:1.5rem;padding:0"></span></div>
</div>

<div ui="cluster" style="gap:1.5rem">
  <div class="scale-box" style="inline-size:5rem;border-radius:var(--bana-radius-xs)">xs</div>
  <div class="scale-box" style="inline-size:5rem;border-radius:var(--bana-radius-sm)">sm</div>
  <div class="scale-box" style="inline-size:5rem;border-radius:var(--bana-radius-md)">md</div>
  <div class="scale-box" style="inline-size:5rem;border-radius:var(--bana-radius-lg)">lg</div>
  <div class="scale-box" style="inline-size:5rem;border-radius:var(--bana-radius-xl)">xl</div>
</div>
<div ui="cluster" style="gap:1.5rem;margin-block-start:1.5rem">
  <div style="inline-size:5rem;block-size:4rem;display:grid;place-items:center;border-radius:var(--bana-radius-md);background:var(--bana-surface-raised);box-shadow:var(--bana-shadow-xs);font-size:var(--bana-text-xs)">xs</div>
  <div style="inline-size:5rem;block-size:4rem;display:grid;place-items:center;border-radius:var(--bana-radius-md);background:var(--bana-surface-raised);box-shadow:var(--bana-shadow-sm);font-size:var(--bana-text-xs)">sm</div>
  <div style="inline-size:5rem;block-size:4rem;display:grid;place-items:center;border-radius:var(--bana-radius-md);background:var(--bana-surface-raised);box-shadow:var(--bana-shadow-md);font-size:var(--bana-text-xs)">md</div>
  <div style="inline-size:5rem;block-size:4rem;display:grid;place-items:center;border-radius:var(--bana-radius-md);background:var(--bana-surface-raised);box-shadow:var(--bana-shadow-lg);font-size:var(--bana-text-xs)">lg</div>
  <div style="inline-size:5rem;block-size:4rem;display:grid;place-items:center;border-radius:var(--bana-radius-md);background:var(--bana-surface-raised);box-shadow:var(--bana-shadow-xl);font-size:var(--bana-text-xs)">xl</div>
</div>

<div ui="stack tight">
  <div style="font-size:var(--bana-text-4xl);font-weight:700">عنوان بسیار بزرگ</div>
  <div style="font-size:var(--bana-text-3xl);font-weight:700">عنوان بزرگ</div>
  <div style="font-size:var(--bana-text-2xl);font-weight:600">عنوان متوسط</div>
  <div style="font-size:var(--bana-text-xl);font-weight:600">زیرعنوان</div>
  <div style="font-size:var(--bana-text-md)">متن عادی با ارتفاع خط ۱٫۷ که برای خط فارسی مناسب است.</div>
  <div style="font-size:var(--bana-text-sm);color:var(--bana-text-secondary)">متن کوچک و توضیحی</div>
</div>