7onicDESIGN SYSTEM

Spacing

4px 기반으로 설계된 스페이싱 시스템으로, 컴포넌트와 레이아웃 전반에 걸쳐 일관된 리듬을 제공합니다.

4

4px 기본 단위

0–12px는 2px 단위(세밀 조정용), 12px 이상은 4px 배수로 구성됩니다.

Spacing Scale

클릭하면 복사됩니다. 0px에서 96px까지의 전체 스페이싱 스케일 (0–12px는 2px 단위, 12px 이상은 4px 단위).

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

각 컴포넌트의 권장 스페이싱 값

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 (아이콘/점)
4pxgap-1

Alert

16px|10px gap|16px
Padding
16pxp-4
Gap (아이콘↔콘텐츠)
10pxgap-2.5

Layout Spacing

페이지와 섹션 레이아웃에 권장되는 스페이싱 패턴으로, 프리미티브 토큰과 반응형 브레이크포인트를 조합하여 사용합니다.

Symmetric

Default

X = Y 동일 패딩, 대시보드와 앱에 적합

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 세로 여백이 더 큰 패딩, 문서와 블로그에 적합

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

페이지 내 큰 섹션 간 간격 (반응형)

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

Element

섹션 내 요소 간 간격

16px
16px
Gap (요소 간)
16pxgap-4

Inline

수평으로 나열된 요소 간 간격

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

Interactive Demo

p-1

4px

p-2

8px

p-4

16px

p-6

24px

p-8

32px