Spacing
A3S UI uses a 4px base. Tight relationships use 4, 6, 8, 12, and 16px; region relationships use 24, 32, 48, 64, and 96px. Headings receive more space above than below, and grouping must not depend on extra cards.
4pxMicro gap
8pxAdjacent controls
12pxComponent interior
16pxSurface padding
24pxSection gap
32pxPage region
<div class="grid w-full gap-4 rounded-xl border border-border bg-card p-6">
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">4px</code>
<span class="h-3 w-4 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">Micro gap</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">8px</code>
<span class="h-3 w-8 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">Adjacent controls</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">12px</code>
<span class="h-3 w-12 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">Component interior</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">16px</code>
<span class="h-3 w-16 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">Surface padding</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">24px</code>
<span class="h-3 w-24 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">Section gap</span>
</div>
<div class="flex items-center gap-4">
<code class="w-16 text-xs text-muted-foreground">32px</code>
<span class="h-3 w-32 rounded-full bg-[var(--a3s-blue)]"></span>
<span class="text-xs text-muted-foreground">Page region</span>
</div>
</div>
Layout benchmarks
Page padding is 16px on phones, 24px on tablets, and 32–48px on desktop. Below 900px, secondary inspectors become overlays. Below 768px, persistent navigation becomes dismissible. Below 520px, headers retain identity and essential actions while bottom actions protect the safe area.
Application parameters
Override public variables before internal grid selectors. Keep the 4px baseline and validate desktop, 320px width, 200% zoom, and coarse pointers whenever density changes.
