Radius
라운드 값은 F 심볼 막대의 모서리 비율(높이의 0.28)에서 도출했습니다. 컨트롤 높이가 정해지면 라운드는 계산되며, 표 밖의 값은 만들지 않습니다.
xs · 4
sm · 8
md · 12
lg · 16
xxl · 24
도출
심볼 실측: 막대 높이 80, 모서리 반지름 22 → 0.275 ≈ 0.28. 컨트롤 높이 × 0.28 을 가장 가까운 4의 배수로 내림한 값이 라운드 토큰입니다.
| 컨트롤 높이 | × 0.28 | 토큰 | 적용 |
|---|---|---|---|
| 24 (배지 · 칩) | 6.7 | pill 999 | 배지는 완전 둥근 알약 — 막대 비율 대신 "완전히 둥근 끝"으로 구분 |
| 32 (작은 버튼) | 9.0 | xs 4 / sm 8 | 작은 버튼 4, 표 안 입력 8 |
| 40 (기본 컨트롤) | 11.2 | sm 8 · md 12 | 버튼·입력 8(sm), 토스트·배너 12(md) |
| 48 (큰 버튼) | 13.4 | md 12 | 큰 버튼 12 |
| 56~64 (카드 · 시니어 버튼) | 15.7~17.9 | lg 16 | 카드·모달·시니어 버튼·선택 카드 16 |
| 72+ (시트 · 대형 카드) | 20+ | xl 20 · xxl 24 | 하단 시트 상단 모서리 20, 폰 프레임 24 |
xs 4
sm 8
md 12
lg 16
xl 20
xxl 24
pill
토큰
| 토큰 | 라이트 | 다크 | 용도 |
|---|---|---|---|
--fna-radius-xs | 없음 | 없음 | 작은 버튼(sm) · 태그 · 히트맵 셀(2px 예외) |
--fna-radius-sm | 없음 | 없음 | 버튼 · 입력 · 탭 상단 · 세그먼트 |
--fna-radius-md | 없음 | 없음 | 토스트 · 배너 · 코드 블록 · 차트 빈 상태 |
--fna-radius-lg | 없음 | 없음 | 카드 · 모달 · 시니어 버튼 · 선택 카드 |
--fna-radius-xl | 없음 | 없음 | 하단 시트 상단 |
--fna-radius-xxl | 없음 | 없음 | 폰 프레임 · 대형 프로모 카드 |
--fna-radius-pill | 없음 | 없음 | 배지 · 결재 상태 · 알약 탭 · 스위치 |
중첩 규칙
안쪽 요소의 라운드 = 바깥 라운드 − 안쪽 여백. 카드(16) 안에 12px 여백을 두고 넣는 요소는 4, 세그먼트(8) 안의 버튼은 8 − 2(패딩) = 6 입니다(calc(var(--fna-radius-sm) - 2px)).
코드
<div style="width:260px;border-radius:16px;border:2px solid var(--fna-border-strong);padding:12px"><div style="height:56px;border-radius:4px;background:var(--fna-primary-container)"></div></div>Do · Don't
Do 컨트롤 8 · 카드 16, 두 단계만 섞인다
Don't 모든 요소 같은 라운드 · 임의 값(9, 14, 18)위계가 사라지고 심볼 비율과 무관해진다
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json radius.* · 로고 실측Foundations · FNA 디자인 시스템 v1.0