Foundations
Spacing
20-step 고정 스케일 (px 단위)
PDS는 px 단위 명시 스케일을 쓴다. Tailwind v4 기본 rem·0.25rem step 대신 20-step px 스케일을 채용해, 데스크탑 밀도에 맞는 미세 조정(0.5, 1, 2px)과 큰 여백(80px)을 모두 커버한다.
원칙
--spacing-*로 정의 → Tailwindp-*,m-*,gap-*,space-*모든 유틸리티에 자동 반영- 직접 px 쓰지 말고 반드시 토큰 참조 (코드/디자인 간 드리프트 방지)
- 4px 미만(0.5, 1, 2)은 구분선 두께·아이콘 오프셋 같은 특수 용도만
spacing-00pxspacing-0.50.5pxspacing-11pxspacing-22pxspacing-44pxspacing-66pxspacing-88pxspacing-1010pxspacing-1212pxspacing-1414pxspacing-1616pxspacing-2020pxspacing-2424pxspacing-3232pxspacing-4040pxspacing-4848pxspacing-5656pxspacing-6464pxspacing-7272pxspacing-8080px사용 예
<div className="p-16 gap-8"> {/* padding 16px, gap 8px */}
<section className="mt-32 mb-24"> {/* margin-top 32px, margin-bottom 24px */}