Spacing
Spacing은 UI 요소 간 간격을 정의하고 관리하는 기본 단위입니다. 코드잇 디자인 시스템은 4·8 배수를 기반으로, PC·Tablet은 동일 값을 사용하고 Mobile은 일부 구간에서 한 단계 작은 값을 적용합니다. 이 방식을 통해 다양한 기기에서 일관된 간격과 최적화된 레이아웃을 제공합니다.
Spacing
Spacing은 UI 요소 간 간격을 정의하고 관리하는 기본 단위입니다. 코드잇 디자인 시스템은 4·8 배수를 기반으로, PC·Tablet은 동일 값을 사용하고 Mobile은 일부 구간에서 한 단계 작은 값을 적용합니다. 이 방식을 통해 다양한 기기에서 일관된 간격과 최적화된 레이아웃을 제공합니다.
Spacing
Spacing은 UI 요소 간 간격을 정의하고 관리하는 기본 단위입니다. 코드잇 디자인 시스템은 4·8 배수를 기반으로, PC·Tablet은 동일 값을 사용하고 Mobile은 일부 구간에서 한 단계 작은 값을 적용합니다. 이 방식을 통해 다양한 기기에서 일관된 간격과 최적화된 레이아웃을 제공합니다.
Primitive Tokens
spacing-0~6까지는 전 기기 동일, spacing-8 이상부터 Mobile 축소 적용.
기기별 간격(px) 값을 정의한 기본 값 토큰입니다.
Name | Desktop | Tablet | Mobile |
|---|---|---|---|
spacing-2 | 2 | 2 | 2 |
spacing-4 | 4 | 4 | 4 |
spacing-6 | 6 | 6 | 6 |
spacing-8 | 8 | 8 | 6 |
spacing-10 | 10 | 10 | 8 |
spacing-12 | 12 | 12 | 10 |
spacing-16 | 16 | 16 | 12 |
spacing-20 | 20 | 20 | 16 |
spacing-24 | 24 | 24 | 20 |
spacing-32 | 28 | 28 | 24 |
spacing-40 | 32 | 32 | 32 |
spacing-48 | 48 | 48 | 40 |
spacing-64 | 64 | 64 | 52 |
spacing-80 | 80 | 80 | 64 |
spacing-120 | 120 | 120 | 80 |
spacing-160 | 160 | 160 | 120 |
spacing-200 | 200 | 200 | 160 |
spacing-240 | 240 | 240 | 200 |
Primitive Tokens
spacing-0~6까지는 전 기기 동일, spacing-8 이상부터 Mobile 축소 적용.
기기별 간격(px) 값을 정의한 기본 값 토큰입니다.
Name | Desktop | Tablet | Mobile |
|---|---|---|---|
spacing-2 | 2 | 2 | 2 |
spacing-4 | 4 | 4 | 4 |
spacing-6 | 6 | 6 | 6 |
spacing-8 | 8 | 8 | 6 |
spacing-10 | 10 | 10 | 8 |
spacing-12 | 12 | 12 | 10 |
spacing-16 | 16 | 16 | 12 |
spacing-20 | 20 | 20 | 16 |
spacing-24 | 24 | 24 | 20 |
spacing-32 | 28 | 28 | 24 |
spacing-40 | 32 | 32 | 32 |
spacing-48 | 48 | 48 | 40 |
spacing-64 | 64 | 64 | 52 |
spacing-80 | 80 | 80 | 64 |
spacing-120 | 120 | 120 | 80 |
spacing-160 | 160 | 160 | 120 |
spacing-200 | 200 | 200 | 160 |
spacing-240 | 240 | 240 | 200 |
Primitive Tokens
spacing-0~6까지는 전 기기 동일, spacing-8 이상부터 Mobile 축소 적용.
기기별 간격(px) 값을 정의한 기본 값 토큰입니다.
Name | Desktop | Tablet | Mobile |
|---|---|---|---|
spacing-2 | 2 | 2 | 2 |
spacing-4 | 4 | 4 | 4 |
spacing-6 | 6 | 6 | 6 |
spacing-8 | 8 | 8 | 6 |
spacing-10 | 10 | 10 | 8 |
spacing-12 | 12 | 12 | 10 |
spacing-16 | 16 | 16 | 12 |
spacing-20 | 20 | 20 | 16 |
spacing-24 | 24 | 24 | 20 |
spacing-32 | 28 | 28 | 24 |
spacing-40 | 32 | 32 | 32 |
spacing-48 | 48 | 48 | 40 |
spacing-64 | 64 | 64 | 52 |
spacing-80 | 80 | 80 | 64 |
spacing-120 | 120 | 120 | 80 |
spacing-160 | 160 | 160 | 120 |
spacing-200 | 200 | 200 | 160 |
spacing-240 | 240 | 240 | 200 |
Semantic Tokens
Primitive Token을 의미 기반으로 재정의한 토큰으로, Content Gap과 Section Gap 두 유형이 있으며 사용 맥락에 따라 선택합니다.
Contents Gap
박스 및 컨텐츠 간 간격을 나타내는 토큰입니다.
컴포넌트 내부나 요소 간 간격을 직관적으로 지정할 수 있도록 XL~XS 상대 크기 체계로 재정의했습니다.
XL~XS 단위는 숫자보다 크기 관계를 직관적으로 파악할 수 있어 빠른 의사결정과 적용이 가능합니다.
Token | Primitive |
|---|---|
| radius-32 |
| radius-24 |
| radius-16 |
| radius-12 |
| radius-8 |
Section Gap
섹션 간 여백을 나타내는 토큰입니다.
페이지나 화면 내에서 섹션 위·아래 여백에 주로 사용되며, Mobile에서는 PC·TB 대비 축소된 값을 적용합니다.
Section Gap은 반응형 환경에서 섹션 위·아래 간격을 유연하게 조정하기 위해 px 값을 직접 사용합니다.
Token | PC | Tablet | Mobile |
|---|---|---|---|
| 240 | 240 | 120 |
| 200 | 200 | 120 |
| 160 | 160 | 80 |
| 120 | 120 | 64 |
| 80 | 80 | 64 |
| 40 | 40 | 24 |
Semantic Tokens
Primitive Token을 의미 기반으로 재정의한 토큰으로, Content Gap과 Section Gap 두 유형이 있으며 사용 맥락에 따라 선택합니다.
Contents Gap
박스 및 컨텐츠 간 간격을 나타내는 토큰입니다.
컴포넌트 내부나 요소 간 간격을 직관적으로 지정할 수 있도록 XL~XS 상대 크기 체계로 재정의했습니다.
XL~XS 단위는 숫자보다 크기 관계를 직관적으로 파악할 수 있어 빠른 의사결정과 적용이 가능합니다.
Token | Primitive |
|---|---|
| radius-32 |
| radius-24 |
| radius-16 |
| radius-12 |
| radius-8 |
Section Gap
섹션 간 여백을 나타내는 토큰입니다.
페이지나 화면 내에서 섹션 위·아래 여백에 주로 사용되며, Mobile에서는 PC·TB 대비 축소된 값을 적용합니다.
Section Gap은 반응형 환경에서 섹션 위·아래 간격을 유연하게 조정하기 위해 px 값을 직접 사용합니다.
Token | PC | Tablet | Mobile |
|---|---|---|---|
| 240 | 240 | 120 |
| 200 | 200 | 120 |
| 160 | 160 | 80 |
| 120 | 120 | 64 |
| 80 | 80 | 64 |
| 40 | 40 | 24 |
Semantic Tokens
Primitive Token을 의미 기반으로 재정의한 토큰으로, Content Gap과 Section Gap 두 유형이 있으며 사용 맥락에 따라 선택합니다.
Contents Gap
박스 및 컨텐츠 간 간격을 나타내는 토큰입니다.
컴포넌트 내부나 요소 간 간격을 직관적으로 지정할 수 있도록 XL~XS 상대 크기 체계로 재정의했습니다.
XL~XS 단위는 숫자보다 크기 관계를 직관적으로 파악할 수 있어 빠른 의사결정과 적용이 가능합니다.
Token | Primitive |
|---|---|
| radius-32 |
| radius-24 |
| radius-16 |
| radius-12 |
| radius-8 |
Section Gap
섹션 간 여백을 나타내는 토큰입니다.
페이지나 화면 내에서 섹션 위·아래 여백에 주로 사용되며, Mobile에서는 PC·TB 대비 축소된 값을 적용합니다.
Section Gap은 반응형 환경에서 섹션 위·아래 간격을 유연하게 조정하기 위해 px 값을 직접 사용합니다.
Token | PC | Tablet | Mobile |
|---|---|---|---|
| 240 | 240 | 120 |
| 200 | 200 | 120 |
| 160 | 160 | 80 |
| 120 | 120 | 64 |
| 80 | 80 | 64 |
| 40 | 40 | 24 |