AhaSlides Design
v0.52.0React · Vue · Lit

Landing · Foundations

Spacing

A landing Foundations-usage page for the spacing rhythm: the same --aha-space-* scale the product design system ships, shown as bars so marketing builders pick padding, gaps and margins from one source. This is not a second token source — every value is the shared token. The live marketing rhythm (section 64/32, gaps 24) maps entirely onto this scale.

◆ generated from landing/spacing.json — do not edit by hand

Preview

space-44px
space-88px
space-1212px
space-1616px
space-2020px
space-2424px
space-3232px
space-4040px
space-4848px
space-6464px
space-8080px
space-9696px

Paste-and-run HTML

Framework-free — copy the whole block into any page (Webflow, WordPress, a static site). It binds only to the shared --aha-* tokens, so load the token layer once on the page first and the block inherits the AhaSlides brand automatically.

spacing.html
<style>
.aha-scale{
  font-family:var(--aha-font-product);
  color:var(--aha-text-default);
  display:flex;
  flex-direction:column;
  gap:var(--aha-space-12);
}
.aha-scale__row{
  display:grid;
  grid-template-columns:7rem 1fr auto;
  align-items:center;
  gap:var(--aha-space-16);
}
.aha-scale__name{font-size:var(--aha-size-default);font-weight:var(--aha-weight-semibold);color:var(--aha-text-secondary)}
.aha-scale__bar{
  height:var(--aha-space-16);
  min-width:var(--aha-space-2);
  background:var(--aha-color-primary);
  border-radius:var(--aha-radius-xs);
  display:block;
}
.aha-scale__val{font-family:var(--aha-font-mono);font-size:var(--aha-size-sm);color:var(--aha-text-tertiary)}
</style>
<div class="aha-scale">
  <div class="aha-scale__row"><span class="aha-scale__name">space-4</span><span class="aha-scale__bar" style="width:var(--aha-space-4)"></span><span class="aha-scale__val">4px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-8</span><span class="aha-scale__bar" style="width:var(--aha-space-8)"></span><span class="aha-scale__val">8px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-12</span><span class="aha-scale__bar" style="width:var(--aha-space-12)"></span><span class="aha-scale__val">12px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-16</span><span class="aha-scale__bar" style="width:var(--aha-space-16)"></span><span class="aha-scale__val">16px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-20</span><span class="aha-scale__bar" style="width:var(--aha-space-20)"></span><span class="aha-scale__val">20px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-24</span><span class="aha-scale__bar" style="width:var(--aha-space-24)"></span><span class="aha-scale__val">24px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-32</span><span class="aha-scale__bar" style="width:var(--aha-space-32)"></span><span class="aha-scale__val">32px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-40</span><span class="aha-scale__bar" style="width:var(--aha-space-40)"></span><span class="aha-scale__val">40px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-48</span><span class="aha-scale__bar" style="width:var(--aha-space-48)"></span><span class="aha-scale__val">48px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-64</span><span class="aha-scale__bar" style="width:var(--aha-space-64)"></span><span class="aha-scale__val">64px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-80</span><span class="aha-scale__bar" style="width:var(--aha-space-80)"></span><span class="aha-scale__val">80px</span></div>
  <div class="aha-scale__row"><span class="aha-scale__name">space-96</span><span class="aha-scale__bar" style="width:var(--aha-space-96)"></span><span class="aha-scale__val">96px</span></div>
</div>

Load the tokens once

Add this to your page <head> before the block — it defines every --aha-* custom property the block reads:

head
<link rel="stylesheet" href="https://ahaslides-product.github.io/ahaslides-design/variables.css">