Foundations
Spacing
Tiro의 스페이싱 시스템. Tailwind 4px 기반 스케일.
Tailwind 기본 스페이싱 스케일(4px base)을 그대로 사용합니다. 커스텀 스페이싱 토큰은 없습니다.
Scale
| Token | Value | Description |
|---|---|---|
| 0.5 | 2px | Minimal gap, icon-to-text micro spacing |
| 1 | 4px | Tight inline spacing |
| 1.5 | 6px | Small padding |
| 2 | 8px | Default tight spacing |
| 2.5 | 10px | Input horizontal padding |
| 3 | 12px | Card internal gaps |
| 3.5 | 14px | Button xl vertical padding |
| 4 | 16px | Default component padding |
| 5 | 20px | Medium gaps |
| 6 | 24px | Card padding, section gaps |
| 8 | 32px | In-app section vertical padding |
| 10 | 40px | Large section gaps |
| 12 | 48px | In-app major section padding |
| 16 | 64px | Marketing section vertical padding |
| 20 | 80px | Large marketing padding |
| 24 | 96px | Maximum marketing section padding |
Touch Targets
| Token | Value | Description |
|---|---|---|
| minimum | 44pt · mobile | Minimum tappable area for standalone controls and icon-only actions. |
| comfortable | 48pt · mobile | Preferred touch area for primary form controls and repeated list actions. |
| dense | 32px · web | Mouse/trackpad dense controls such as toolbar icon buttons. |
Visual size and hit area are separate. On mobile, xs/sm controls may keep their visual size but must expand the tappable area to at least 44pt with hitSlop or a row-level press target.
Breakpoints
| Token | Value | Description |
|---|---|---|
| mobile | 0-767px | Phone-width layouts. Component token branch: mobile. |
| tablet | 768-1023px | Responsive layout concern only. Do not introduce tablet component tokens. |
| desktop | 1024px+ | Desktop web layouts. Component token branch: web. |
Breakpoints are layout-level hints. They do not introduce a tablet component token branch; component specs only branch by web and mobile.
Whitespace Philosophy
"여백이 완성도" — 여백이 많을수록 완성도가 높아 보인다.
- 마케팅 페이지 섹션 간: 64–96px
- 인앱 섹션 간: 32–48px
- 카드 내부 패딩: 16–24px
- 노트 리스트 아이템 간: 12–16px
- 로고 주변: 생성 가능한 최대 여백. 로고는 종이 위에 찍힌 도장처럼 느껴져야 함
Radius
Spacing과 동일한 멀티플라이어 명명 체계. r{n}의 px 값은 spacing-{n}과 같다.
예: r2 = 8px = spacing-2 (gap-2, px-2 등과 동일한 단위감각)
| Token | Value | Description |
|---|---|---|
| r0_5 | 2px · rounded-sm | 미세 라운딩 — 배지 테두리, 소형 태그 |
| r1 | 4px · rounded | 배지, 칩, 인디케이터 |
| r1_5 | 6px · rounded-md | 체크박스, 라디오, 토글 등 폼 보조 요소 |
| r2 | 8px · rounded-lg | 버튼, 인풋, 셀렉트 |
| r3 | 12px · rounded-xl | 카드, 드롭다운, 팝오버, 툴팁 |
| r4 | 16px · rounded-2xl | 다이얼로그, 시트, 모달 |
| r6 | 24px · rounded-3xl | 마케팅 서피스, featured 카드 |
| r_full | 9999px · rounded-full | 필, 아바타, 원형 아이콘 버튼 |
Tailwind 클래스를 직접 사용한다. 위 표의 tailwind 열이 컴포넌트 코드에서 쓰는 실제 클래스명이다.
버튼 → r2 → rounded-lg
카드 → r3 → rounded-xl
모달 → r4 → rounded-2xlDo / Don't
- Do: 스케일 안의 값만 사용 (0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 8, 10, 12, 16, 20, 24)
- Don't: 임의 px 값 사용 금지 (
1pxborder, media query 예외) - Don't: 커스텀 spacing 토큰 신설 금지