<div style="max-width:600px;">
<p style="font-family:'Satoshi';font-size:0.875rem;color:#858B98;margin-bottom:2rem;">Base unit is <strong>4px</strong>. All spacing values are multiples of this base.</p>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-1</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">4px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:4px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Tight — icon padding, badge insets</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-2</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">8px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:8px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Small — input padding, tight gaps</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-3</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">12px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:12px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Default inline spacing</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-4</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">16px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:16px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Base — default padding, card insets</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-5</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">24px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:24px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Medium — section gaps, form fields</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-6</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">32px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:32px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Large — card margins, panel padding</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-7</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">48px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:48px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">XL — section separation</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-8</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">64px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:64px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">XXL — hero/page-level spacing</div>
</div>
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">space-9</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">96px</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:96px;flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">Layout — major section breaks</div>
</div>
</div>
<div style="max-width:600px;">
<p style="font-family:'Satoshi';font-size:0.875rem;color:#858B98;margin-bottom:2rem;">Base unit is <strong>4px</strong>. All spacing values are multiples of this base.</p>
{{#each scale}}
<div style="display:flex;align-items:center;gap:1.5rem;margin-bottom:0.75rem;">
<div style="width:60px;font-family:monospace;font-size:0.8rem;color:#858B98;flex-shrink:0;">{{this.token}}</div>
<div style="width:50px;font-size:0.75rem;color:#858B98;flex-shrink:0;">{{this.value}}</div>
<div style="background:#712F79;height:20px;border-radius:3px;width:{{this.value}};flex-shrink:0;"></div>
<div style="font-size:0.75rem;color:#858B98;">{{this.usage}}</div>
</div>
{{/each}}
</div>
{
"scale": [
{
"token": "space-1",
"value": "4px",
"usage": "Tight — icon padding, badge insets"
},
{
"token": "space-2",
"value": "8px",
"usage": "Small — input padding, tight gaps"
},
{
"token": "space-3",
"value": "12px",
"usage": "Default inline spacing"
},
{
"token": "space-4",
"value": "16px",
"usage": "Base — default padding, card insets"
},
{
"token": "space-5",
"value": "24px",
"usage": "Medium — section gaps, form fields"
},
{
"token": "space-6",
"value": "32px",
"usage": "Large — card margins, panel padding"
},
{
"token": "space-7",
"value": "48px",
"usage": "XL — section separation"
},
{
"token": "space-8",
"value": "64px",
"usage": "XXL — hero/page-level spacing"
},
{
"token": "space-9",
"value": "96px",
"usage": "Layout — major section breaks"
}
]
}
Base unit is 4px. Use these values for padding, margin, and gap. Avoid arbitrary values — if something needs an in-between size, consider whether the scale needs a new step.