Foundation
Spacing
4px 그리드 · x{n} = 4n px.
모든 간격은 4의 배수입니다(x0_5·x1_5 같은 반 단계는 미세 조정용). 이름이 곧 계산식이라 x6이 24px임을 바로 알 수 있습니다.
스케일보다 관계 토큰을 먼저 고르세요. gap-x4는 "16px"만 말하지만 gap-component는 "컴포넌트 사이"라는 의도를 코드에 남깁니다. 나중에 리듬을 조정할 때 토큰 한 곳만 바꾸면 되고, 화면마다 값이 제각각으로 흐르는 것도 막습니다.
var(--x-4) · p-x4 · gap-component · tokens.x["4"]
Relation
어디에 쓰는 간격인지로 고른다. 대부분의 레이아웃은 이 9개로 충분하다.
spacingX.globalGutter24px페이지 좌우 여백spacingX.betweenChips8px칩·뱃지가 나란히 놓일 때spacingX.betweenActions8px버튼 그룹 내 액션 사이spacingY.betweenText8px문단·라벨 등 텍스트 블록 사이spacingY.titleToBody12px제목 → 바로 아래 본문spacingY.componentDefault16px컴포넌트 사이 기본값 — 애매하면 이것spacingY.navToTitle24px네비게이션 → 페이지 제목spacingY.betweenSections48px페이지 내 섹션 사이spacingY.screenBottom32px화면 하단 여백Scale
관계 토큰으로 표현이 안 되는 경우에만 직접 고른다.
x00pxx0_52pxx14pxx1_56pxx28pxx2_510pxx312pxx3_514pxx416pxx520pxx624pxx728pxx832pxx1040pxx1248pxx1664pxx2080pxx2496pxx32128px