기초FOX · Spacing

간격

모든 간격은 4px 단위 사다리에서 골라요. 가까운 것은 좁게, 다른 묶음은 넓게 띄우면 눈이 구조를 먼저 읽어요.

간격 사다리

막대 길이가 실제 간격이에요. 이 열한 단계 밖의 값은 쓰지 않아요.

SPACING LADDER

--nm-s-22px

--nm-s-44px

--nm-s-88px

--nm-s-1212px

--nm-s-1616px

--nm-s-2020px

--nm-s-2424px

--nm-s-3232px

--nm-s-4040px

--nm-s-4848px

--nm-s-6464px

같은 단계라도 쓰는 곳이 정해져 있어요.

USAGE

2선 두께 보정, 아이콘 옆 아주 작은 틈

4컨트롤 안쪽, 글자와 아이콘 사이

8컨트롤 안쪽 위아래, 붙어 있는 컨트롤 사이

12컨트롤 안쪽 좌우, 목록 줄 안쪽

16카드 안쪽, 컨트롤 사이 기본 간격

20카드 안쪽 넓은 경우

24묶음과 묶음 사이

32작은 영역 사이

40큰 영역 사이

48영역 사이, 화면 위아래 여백

64화면 맨 위와 맨 아래 큰 여백

안쪽 간격, 컨트롤 사이 간격, 묶음 사이 간격 순서로 점점 넓어져요.

THREE LAYERS

1. 컨트롤 안쪽 (8 ~ 12px)

보내기

2. 컨트롤 사이 (8 ~ 16px)

취소저장

3. 묶음 사이 (24 ~ 48px)

내 정보 묶음

알림 묶음