간격
역할 이름이 붙은 간격 스케일. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.
간격(GAP)#
숫자 대신 자리 이름으로 골라요.
GAP.hair
2px · 값과 단위처럼 거의 붙는 것
GAP.snug
4px · 아이콘과 글자, 라벨과 배지
GAP.tight
6px · 아바타와 이름, 값과 변화율
GAP.item
8px · 칩·버튼처럼 나란한 형제
GAP.card
10px · 카드와 카드
GAP.block
12px · 카드 안의 문단·행 묶음
GAP.row
12px · 한 줄의 좌우 두 덩어리
GAP.group
16px · 묶음과 묶음, 2열 격자
GAP.section
24px · 섹션과 섹션
안쪽 여백(PAD)#
컨테이너 성격으로 골라요.
PAD.chip
내용
PAD.button
내용
PAD.row
내용
PAD.card
내용
PAD.cardLg
내용
PAD.empty
내용
PAD.emptyLg
내용
플랫폼별 값#
폰과 PC는 같은 간격을 쓰고, 차량은 웹 간격의 두 배예요(차량 글자가 웹의 약 두 배라서).
| 역할 | 모바일 | PC | Pleos개발 중 |
|---|---|---|---|
| GAP.snug (gap-1) | 4px | 4px | 8dp |
| GAP.tight (gap-1.5) | 6px | 6px | 12dp |
| GAP.item (gap-2) | 8px | 8px | 16dp |
| GAP.block (gap-3) | 12px | 12px | 24dp - 누르는 대상 사이 최소 간격 이상 |
| 카드 안쪽 (p-4) | 16px | 16px | 32dp |
Pleos 값은 차량 앱 공개 저장소(reevl-for-pleos)의 테마 코드에서 옮겼어요. 차량 앱은 개발 중이에요.
문서 리듬#
리블 Open의 모든 문서가 같은 간격으로 읽혀요. 값은 간격 단계(4px 배수)에서만 골라요.
| 역할 | 모바일 | PC |
|---|---|---|
| 구획 위(H2) | 72px | 80px |
| H2 → 한 줄 설명 | 8px | 8px |
| 구획 머리 → 내용 | 24px | 24px |
| 소구획(H3) 사이 · H3 → 내용 | 24px · 12px | 24px · 12px |
| 목록 항목 사이 | 12px | 12px |
| 카드 · 그림 단계 사이 | 24px | 24px |
| 강조 상자 안쪽 | 24px | 32px |
| 숫자 줄 사이 | 32px | 32px |
| 본문 줄 간격 · 글 폭 | 1.7 · 화면 폭 - 40px | 1.7 · 640px |
클래스: op-sec(구획) · op-sec-head(머리 → 내용) · op-lead(한 줄 설명) · op-sub(소구획) · op-grid-4 · op-flow.