로컬 CSS 간격 토큰 생성기

일관된 CSS 간격 척도 구축

시각적 간격 토큰을 생성하고 리듬을 미리 보고 CSS 변수를 복사하기 위한 기본 단위와 비율을 설정합니다.

기본 간격 (px)스케일 비율단계 수출력 단위루트 글자 크기 (px)

rem 기준 루트 크기

준비 완료

간격 토큰 미리보기

--space-1

4pxvar(--space-1)

--space-2

5pxvar(--space-2)

--space-3

6.25pxvar(--space-3)

--space-4

7.81pxvar(--space-4)

--space-5

9.77pxvar(--space-5)

--space-6

12.21pxvar(--space-6)

--space-7

15.26pxvar(--space-7)

--space-8

19.07pxvar(--space-8)

:root {
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 6.25px;
  --space-4: 7.81px;
  --space-5: 9.77px;
  --space-6: 12.21px;
  --space-7: 15.26px;
  --space-8: 19.07px;
}

파일을 업로드하지 않습니다. 처리는 이 브라우저 탭에서만 진행됩니다.

간격 스케일을 쓰는 이유

A small set of related values makes padding, gaps, and margins easier to review across a product.

A linear ratio keeps steps predictable while leaving room between compact and spacious layouts.

Use the preview to judge rhythm, then use the custom properties with var(--space-3) in your CSS.

간격 스케일 질문

What ratio should I start with?

1.25 creates gentle steps, while 1.5 creates stronger separation for larger layouts.

When should I use rem?

Use rem when spacing should follow the document's root font size; use px when the design calls for fixed values.

Are these design tokens?

Yes. The output is a small CSS custom property set that can act as a shared spacing vocabulary.