7onicDESIGN SYSTEM

Spacing

A spacing system built on a 4px base unit — providing consistent rhythm across all components and layouts.

4

4px Base Unit

0–12px in 2px steps (fine adjustments), 12px and above in multiples of 4px.

Spacing Scale

Click to copy — full spacing scale from 0px to 96px (0–12px in 2px steps, 12px+ in 4px steps).

Visual Scale

2px
gap-0.5
4px
gap-1
6px
gap-1.5
8px
gap-2
10px
gap-2.5
12px
gap-3
16px
gap-4
20px
gap-5
24px
gap-6

Component Spacing

Recommended spacing values for each component

Padding
Gap

Button

Button
16px|8px gap|16px
Padding X
16pxpx-4
Padding Y
autoh-*
Gap
8pxgap-2

Input

Placeholder...
12/16px| content |12/16px
Padding X
12/16pxpx-3/4
Padding Y
autoh-*

Card

12px
Padding X
16→24pxpx-4 sm:px-6
Header Top
20→24pxpt-5 sm:pt-6
Section Gap
12→16pxpb-3 sm:pb-4
Footer Gap
8pxgap-2

Modal

24px
24px
Padding
24pxp-6
Footer Gap
12pxgap-3

Badge

Badge
8px|4px gap|8px
Height
24pxh-6
Padding X
8pxpx-2
Gap (Icon/Dot)
4pxgap-1

Alert

16px|10px gap|16px
Padding
16pxp-4
Gap (Icon↔Content)
10pxgap-2.5

Layout Spacing

Recommended spacing patterns for page and section layouts — combine primitive tokens with responsive breakpoints.

Symmetric

Default

X = Y same padding — for dashboards and apps

Mobile16px
Tablet24px
Desktop32px
Large40px
Paddingp-4 md:p-6 lg:p-8 xl:p-10
BreakpointPadding
Mobile16px
Tablet (md)24px
Desktop (lg)32px
Large (xl)40px

Reading

Y > X more vertical spacing — for documents and blogs

Mobile16/20
Tablet24/32
Desktop32/40
Large40/48
Padding Xpx-4 md:px-6 lg:px-8 xl:px-10
Padding Ypy-5 md:py-8 lg:py-10 xl:py-12
BreakpointXY
Mobile16px20px
Tablet (md)24px32px
Desktop (lg)32px40px
Large (xl)40px48px

Section

Large section gaps within a page (responsive)

Mobile16px
Tablet24px
Desktop32px
Gap (Between Sections)gap-4 md:gap-6 lg:gap-8
BreakpointGap
Mobile16px
Tablet (md)24px
Desktop (lg)32px

Element

Between elements within a section

16px
16px
Gap (Between Elements)
16pxgap-4

Inline

Between horizontally arranged elements

Item
Item
Item
8px gap between items
Gap (Inline)
8pxgap-2

Interactive Demo

p-1

4px

p-2

8px

p-4

16px

p-6

24px

p-8

32px