간격

관계부터 선택

간격은 어떤 요소가 서로 연결되는지 설명해요. 숫자보다 관계를 먼저 선택하고 같은 단계의 요소에는 같은 간격을 반복하세요.

• 세부 간격 (xs–sm): 아이콘과 레이블, 레이블과 값, 하나의 작은 그룹 안에 있는 줄
• 컴포넌트 간격 (md–lg): 필드, 동작, 행, 경계가 있는 컴포넌트 안쪽 여백
• 섹션 간격 (xl–2xl): 작업 그룹, 페이지 영역, 주제가 크게 바뀌는 경계

시각적 스케일

레이아웃 리듬

안쪽부터 바깥쪽으로 구성하세요. 레이블과 값은 xs로 묶고, 같은 단계의 행은 sm이나 md로 나누고, 컴포넌트 안쪽은 lg로 채우고, 다음 작업과는 xl이나 2xl로 분리해요. 모든 요소 쌍에 다른 간격을 만들지 마세요. 같은 관계는 같은 모양으로 보여야 해요.

구현과 참고

.rack-card { display: grid; gap: var(--tinyrack-space-md); padding: var(--tinyrack-space-lg); }

Tailwind 간격 매핑도 확인하세요.