7onicDESIGN SYSTEM

Spacing

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

4

4px 기본 단위

레이아웃은 4px 배수로 통일하고, 컴포넌트 내부 및 정밀한 조정은 0–14px 구간에서 2px 단위를 사용합니다.

Spacing Scale

클릭하면 복사됩니다. 0–14px는 2px 단위(컴포넌트 내부·정밀 조정용), 16px 이상은 4px 단위(레이아웃·섹션 간격용).

Visual Scale

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

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