Radius
Radius는 UI 구성 요소의 모서리를 둥글게 처리하는 기준을 정의해요. 요소의 둥근 정도는 브랜드의 성격을 전달하고, 일관된 비주얼 아이덴티티를 유지하는 데 기여해요. 적절한 radius 값 사용은 컴포넌트 간의 통일성을 높이고, 사용자가 인터페이스를 더욱 직관적으로 인식하도록 도와줘요.
기본 단위
이 기본 단위는 요소의 둥글기(Radius)를 일관되게 정의하고, 전체 UI의 시각적 조화와 브랜드 톤을 유지하는 데 기여해요. 디자인 및 개발 전반에 걸쳐 일관된 둥근 모서리 처리를 가능하게 해요.
Radius token
| Token | px | 사용 예시 | |
|---|---|---|---|
| radius-none | 0 | Square (각진 요소) | |
| radius-xxs | 4 | 작은 컴포넌트 (Badge 등) | |
| radius-xs | 6 | Checkbox, Tooltip | |
| radius-sm | 8 | 인풋 박스 | |
| radius-md | 12 | 표준 버튼, 모달 창 및 일반적인 카드 | |
| radius-lg | 16 | 큰 버튼(54px 높이 등), 섹션 카드 | |
| radius-xl | 24 | 강조가 필요한 버튼이나 팝업 | |
| radius-2xl | 38 | Bottom Sheet | |
| radius-3xl | 64 | ||
| radius-full | 999 | 알약 모양(Pill) 버튼 |