Overview
The different spacings are divided into 4px increments and numbered according to our naming concept. You can use absolute values in px or relative values in rem for spacing. In contrast to absolute spacing, relative spacing resizes when the font size changes.
Spacing values:
| spacing-0 | 0px | 0rem |
|---|---|---|
| spacing-25 | 4px | 0.25rem |
| spacing-50 | 8px | 0.5rem |
| spacing-75 | 12px | 0.75rem |
| spacing-100 | 16xp | 1rem |
gap
spacing-50↔
spacing-50↔
padding
spacing-50↔
spacing-50↔
margin
spacing-100↔
spacing-100↔
HTML
<div class="on-frame" style="padding:56px 16px 32px;overflow-x:auto"><div style="position:relative;width:322px;margin:0 auto 0 max(140px,calc(50% - 120px))">
<div style="border:1px solid var(--oc-semantic-color-stroke-divider);overflow:hidden;padding:16px 0 32px 16px"><div style="display:flex;gap:8px"><div style="flex:none;width:200px"><div style="background:var(--oc-semantic-color-background-canvas);border-radius:20px;padding:8px"><div style="height:250px;border-radius:12px;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></div></div><div style="padding-top:12px"><p class="oc-copy-75" style="text-transform:uppercase">Brand name</p><p class="oc-copy-100">Product name</p><p class="oc-copy-100" style="margin-top:12px">UVP <s>9999,99 €</s></p><p class="oc-headline-100" style="color:var(--oc-semantic-color-text-sale)">9999,99 €</p></div></div><div style="flex:none;width:200px"><div style="background:var(--oc-semantic-color-background-canvas);border-radius:20px;padding:8px"><div style="height:250px;border-radius:12px;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></div></div><div style="padding-top:12px"><p class="oc-copy-75" style="text-transform:uppercase">Brand name</p><p class="oc-copy-100">Product name</p><p class="oc-copy-100" style="margin-top:12px">UVP <s>9999,99 €</s></p><p class="oc-headline-100" style="color:var(--oc-semantic-color-text-sale)">9999,99 €</p></div></div></div></div>
<div style="position:absolute;left:224px;top:-48px;display:grid;justify-items:center"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;white-space:nowrap"><b>gap</b><br>spacing-50</span><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div>
<div style="position:absolute;right:calc(100% - 20px);top:62px;display:flex;align-items:center;gap:6px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;white-space:nowrap"><b>padding</b><br>spacing-50</span><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div>
<div style="position:absolute;right:calc(100% + 4px);top:170px;display:flex;align-items:center;gap:6px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;white-space:nowrap"><b>margin</b><br>spacing-100</span><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div>
</div>Use spacing to position content in relation to each other, applying the principle of proximity: use smaller spacings (e.g. spacing-50: 8px) for content that is closely related, and larger spacings (e.g. spacing-250: 40px) for content that is unrelated.
9:30
Startseite
Inspiration
HTML
<div class="on-frame" style="padding:32px 16px;overflow-x:auto"><div style="padding-left:120px;width:max-content;margin:0 auto"><div style="width:360px;flex:none;margin:0 auto;position:relative;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);border-radius:12px;overflow:visible;color:var(--oc-semantic-color-text-default)"><div style="background:var(--oc-semantic-color-background-canvas);border-radius:12px 12px 0 0;padding-bottom:16px"><div style="display:flex;justify-content:space-between;align-items:center;padding:14px 24px 10px;font:700 15px/20px OTTOSans,sans-serif;color:var(--oc-semantic-color-text-default)"><span>9:30</span><span style="display:flex;gap:6px;align-items:center"><oc-icon-v1 type="wifi" style="width:16px;height:16px"></oc-icon-v1><span style="width:10px;height:16px;border-radius:2px;background:var(--oc-semantic-color-text-default)"></span></span></div><div style="display:flex;align-items:center;gap:4px;padding:0 16px 0 4px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><div style="flex:1"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div></div><div style="padding:16px 16px 0"><p class="oc-copy-75" style="color:var(--oc-semantic-color-text-secondary)">Startseite</p><p class="oc-headline-200" style="margin-top:8px">Inspiration</p></div></div><div style="padding-top:56px"><div style="display:flex;overflow:hidden;padding-left:16px;padding-top:56px;margin-top:-56px"><div style="flex:none;width:180px"><oc-card-v3><a href="#" aria-label="Kopfhörer"></a><div slot="content" style="display:flex;align-items:center;gap:16px;padding:16px 20px"><oc-icon-v1 type="volume-on" style="width:40px;height:40px"></oc-icon-v1><span class="oc-copy-100">Kopfhörer</span></div></oc-card-v3></div><div style="flex:none;width:16px;position:relative"><span style="position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><b>related</b><br>16px<br><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div><div style="flex:none;width:180px"><oc-card-v3><a href="#" aria-label="Sneaker"></a><div slot="content" style="display:flex;align-items:center;gap:16px;padding:16px 20px"><oc-icon-v1 type="sneaker" style="width:40px;height:40px"></oc-icon-v1><span class="oc-copy-100">Sneaker</span></div></oc-card-v3></div><div style="flex:none;width:16px;position:relative"><span style="position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><b>related</b><br>16px<br><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div><div style="flex:none;width:180px"><oc-card-v3><a href="#" aria-label="Shirts"></a><div slot="content" style="display:flex;align-items:center;gap:16px;padding:16px 20px"><oc-icon-v1 type="t-shirt" style="width:40px;height:40px"></oc-icon-v1><span class="oc-copy-100">Shirts</span></div></oc-card-v3></div></div><div style="padding:12px 16px 0"><oc-link-v2 icon-left="arrow-right"><a href="#">Alle Kategorien</a></oc-link-v2></div><div style="height:40px;position:relative"><span style="position:absolute;right:calc(100% + 12px);top:0;bottom:0;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="text-align:right"><b>unrelated</b><br>40px</span><span style="width:1px;align-self:stretch;background:#f06"></span></span></div><div style="display:flex;overflow:hidden;padding-left:16px;padding-top:56px;margin-top:-56px;padding-bottom:4px"><div style="flex:none;width:300px"><oc-paper-card-v1><div style="display:flex;gap:12px;align-items:flex-start"><div style="flex:none;width:72px;padding:6px 0;border-radius:4px;background:var(--oc-semantic-color-background-sale);color:var(--oc-semantic-color-text-inverted);text-align:center;font:700 12px/16px OTTOSans,sans-serif">Jetzt<br><span style="font-size:20px;line-height:24px">20%</span><br>Suffix</div><div><p class="oc-copy-75" style="font-weight:700;color:var(--oc-semantic-color-text-sale)">Nur in der App</p><p class="oc-headline-100">Extra-Rabatt auf Wohnen und Möbel</p></div></div><div slot="footer" style="display:flex;align-items:center;justify-content:space-between;gap:8px"><p class="oc-copy-75">Gültig bis:<br><b>Mittwoch, 14.02.</b></p><oc-button-v1 size="50" icon-type-right="arrow-right" fit-content>Zur Aktivierung</oc-button-v1></div></oc-paper-card-v1></div><div style="flex:none;width:16px;position:relative"><span style="position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><b>related</b><br>16px<br><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div><div style="flex:none;width:300px"><oc-paper-card-v1><div style="display:flex;gap:12px;align-items:flex-start"><div style="flex:none;width:72px;padding:6px 0;border-radius:4px;background:var(--oc-semantic-color-background-sale);color:var(--oc-semantic-color-text-inverted);text-align:center;font:700 12px/16px OTTOSans,sans-serif">Jetzt<br><span style="font-size:20px;line-height:24px">20%</span><br>Suffix</div><div><p class="oc-copy-75" style="font-weight:700;color:var(--oc-semantic-color-text-sale)">Nur in der App</p><p class="oc-headline-100">Extra-Rabatt auf Wohnen und Möbel</p></div></div><div slot="footer" style="display:flex;align-items:center;justify-content:space-between;gap:8px"><p class="oc-copy-75">Gültig bis:<br><b>Mittwoch, 14.02.</b></p><oc-button-v1 size="50" icon-type-right="arrow-right" fit-content>Zur Aktivierung</oc-button-v1></div></oc-paper-card-v1></div></div><div style="height:40px;position:relative"><span style="position:absolute;right:calc(100% + 12px);top:0;bottom:0;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="text-align:right"><b>unrelated</b><br>40px</span><span style="width:1px;align-self:stretch;background:#f06"></span></span></div><p class="oc-headline-200" style="padding:0 16px 48px">Empfehlungen für dich</p><div style="display:flex;overflow:hidden;padding-left:16px;padding-top:56px;margin-top:-56px"><div style="flex:none;width:128px;height:150px;background:var(--oc-semantic-color-background-canvas);border-radius:16px 16px 0 0;padding:8px 8px 0;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-01.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0"></div><div style="flex:none;width:8px;position:relative"><span style="position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><b>related</b><br>8px<br><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div><div style="flex:none;width:128px;height:150px;background:var(--oc-semantic-color-background-canvas);border-radius:16px 16px 0 0;padding:8px 8px 0;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-04.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0"></div><div style="flex:none;width:8px;position:relative"><span style="position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace"><b>related</b><br>8px<br><span style="font-size:20px;line-height:16px;vertical-align:-2px">↔</span></span></div><div style="flex:none;width:128px;height:150px;background:var(--oc-semantic-color-background-canvas);border-radius:16px 16px 0 0;padding:8px 8px 0;overflow:hidden"><img src="/references/images/otto/otto-fashion-drop-mojo-06.jpg" alt="" style="display:block;width:100%;height:100%;object-fit:cover;border-radius:8px 8px 0 0"></div></div></div></div></div></div>Fragments
You can find an overview of all spacing tokens here.
Status
Implementation
Note: For full technical documentation of spacings, visit Storybook/Spacing.