Spacing utilities

tier 2 — classes

Two families, and deliberately only two: the gap inside a row or column, and a top or bottom margin on one element. Everything else is a token.

There is no numeric spacing scale And there will not be one. The vertical rhythm between page sections is the frame's job — see Shell — and the sizes themselves are --space-*.

Gaps

.sedna-row and .sedna-col carry one gap, and these four override it: .sedna-gap-0 removes it, .sedna-gap-1 is the default 8px restated, and -2 and -3 are 12px and 20px. A gap that needs a fifth value is usually a layout that wants a grid.

sedna-gap-0no gapat all

sedna-gap-18pxthe default

sedna-gap-212px

sedna-gap-320px

<div class="sedna-col sedna-gap-3">
    <div class="sedna-row sedna-gap-0">
        <span class="badge">sedna-gap-0</span><span class="badge">no gap</span><span class="badge">at all</span>
    </div>
    <div class="sedna-row sedna-gap-1">
        <span class="badge">sedna-gap-1</span><span class="badge">8px</span><span class="badge">the default</span>
    </div>
    <div class="sedna-row sedna-gap-2">
        <span class="badge">sedna-gap-2</span><span class="badge">12px</span>
    </div>
    <div class="sedna-row sedna-gap-3">
        <span class="badge">sedna-gap-3</span><span class="badge">20px</span>
    </div>
</div>

Margins

.sedna-mt-0 to -3 and .sedna-mb-0 to -3, on the same 0 / 8 / 12 / 20px steps. Top and bottom only, and the zeros do most of the work: they are the escape from a margin a library component sets, without overriding that component's class.

sedna-mt-0 kills a component's own top margin; sedna-mb-1 adds 8px.

sedna-mt-1 and sedna-mb-2 — 8px above, 12px below.

sedna-mt-2 and sedna-mb-3 — 12px above, 20px below.

sedna-mt-3 adds 20px; sedna-mb-0 removes the last bottom margin.

<div class="sedna-col sedna-gap-0" style="max-width:420px; border:1px dashed var(--border); padding:8px">
    <p class="sedna-mt-0 sedna-mb-1">sedna-mt-0 kills a component's own top margin; sedna-mb-1 adds 8px.</p>
    <p class="sedna-mt-1 sedna-mb-2">sedna-mt-1 and sedna-mb-2 — 8px above, 12px below.</p>
    <p class="sedna-mt-2 sedna-mb-3">sedna-mt-2 and sedna-mb-3 — 12px above, 20px below.</p>
    <p class="sedna-mt-3 sedna-mb-0">sedna-mt-3 adds 20px; sedna-mb-0 removes the last bottom margin.</p>
</div>