Shape
모서리 둥글기와 경계선 두께로 요소의 역할을 구분하고 화면의 인상을 통일해요.
Radius
radius 토큰은 모든 화면에서 모서리 둥글기를 일관되게 맞춰 줘요. 토큰은 요소의 역할로 골라요.
- 작은 세부 요소(배지, 체크박스)는 작은 둥글기
- 상호작용 요소(버튼, 입력)는 중간 둥글기
- 담는 요소(카드, 모달, 보드 칸)는 큰 둥글기
- 사람과 관련된 요소(아바타)와 알약 모양은 완전한 원
2px배지, 체크박스, 아바타 레이블, 키보드 단축키
4px레이블, 로젠지, 태그, 날짜, 툴팁, 컴팩트 버튼
6px버튼, 입력, 텍스트 영역, 셀렉트, 내비게이션 항목
8px카드, 페이지 안 컨테이너, 플로팅 UI, 드롭다운 메뉴
12px전체 페이지 컨테이너, 모달, 보드 칸, 표
16px동영상 플레이어 컨테이너
9999px아바타, 사람 관련 UI, 이모지 반응, 알약 모양
25%타일 컴포넌트 전용 (크기의 25%)
| 토큰 | 값 | 설명 |
|---|---|---|
| 2px | 배지, 체크박스, 아바타 레이블, 키보드 단축키Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts. | |
| 4px | 레이블, 로젠지, 태그, 날짜, 툴팁, 컴팩트 버튼Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons. | |
| 6px | 버튼, 입력, 텍스트 영역, 셀렉트, 내비게이션 항목Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links. | |
| 8px | 카드, 페이지 안 컨테이너, 플로팅 UI, 드롭다운 메뉴Use for containment elements: cards, in-page containers, floating UI, dropdown menus. | |
| 12px | 전체 페이지 컨테이너, 모달, 보드 칸, 표Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables. | |
| 16px | 동영상 플레이어 컨테이너Use for video player containers. | |
| 9999px | 아바타, 사람 관련 UI, 이모지 반응, 알약 모양Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions. | |
| 25% | 타일 컴포넌트 전용 (크기의 25%)Use this specific radius token exclusively for the tile component system. |
<button className="rounded-ds-medium …">저장</button>
<div className="rounded-ds-large bg-ds-surface-raised shadow-ds-raised">…</div>radius.tile 은 타일 전용이에요
radius.tile 은 크기의 25% 로 계산되는 특수 값이라 아이콘 타일, 오브젝트 타일 컴포넌트에만 써요.
포커스 링의 둥글기
포커스 링은 요소 바깥으로 2px 떨어져 그려지고, 둥글기는 요소의 둥글기 + 2px 이에요. 그래야 링과 요소의 곡선이 평행하게 보여요.
| 요소 radius | 포커스 링 radius |
|---|---|
radius.xsmall (2px) | 4px |
radius.small (4px) | 6px |
radius.medium (6px) | 8px |
radius.large (8px) | 10px |
radius.xlarge (12px) | 14px |
radius.xxlarge (16px) | 18px |
Steel 컴포넌트는 CSS outline 으로 포커스 링을 그려서, 브라우저가 요소의 border-radius 를 따라 링을 둥글게 그려 줘요. 직접 만드는 요소에는 아래 클래스를 붙이면 돼요.
<button className="rounded-ds-medium outline-2 outline-offset-2 outline-transparent focus-visible:outline-ds-border-focused">…</button>Border
경계선은 영역의 경계를 정하고, 컴포넌트를 나누고, 강조를 더해요. 경계선은 두께 토큰(얼마나 눈에 띄는지)과 색 토큰(무엇을 뜻하는지)을 함께 써요.
| 토큰 | 값 | 미리보기 | 설명 |
|---|---|---|---|
| 1px | 평평한 카드 | 모든 기본 경계선과 구분선의 두께The default width for all standard component borders and dividers. | |
| 2px | 개요이슈 | 선택을 알리는 경계선·표시자 두께 (활성 탭 등)Use for the width of a border or visual indicator that communicates selection, such as an active tab or a chosen item. Pair with color.border.selected. Do not use as a substitute for a separate keyboard focus indicator. | |
| 2px | 포커스됨 | 포커스 링 두께Use for the width of the focus ring on an interactive element that currently has keyboard or input focus. Pair with color.border.focused. When the element is also selected, keep the selection indicator and add the focus ring. |
두께와 색 짝 맞추기
| 상태 | 두께 | 색 |
|---|---|---|
| 기본 | border.width | color.border (구분선), color.border.input (입력) |
| 선택 | border.width.selected | color.border.selected |
| 포커스 | border.width.focused | color.border.focused |
<div className="border-(length:--ds-border-width) border-ds-border">…</div>
<span className="border-b-(length:--ds-border-width-selected) border-ds-border-selected">개요</span>- 선택 상태에는 항상
border.width.selected와color.border.selected를 함께 써요. - 포커스 상태에는 항상
border.width.focused와color.border.focused를 함께 써요. - 은은한 accent 배경 위에서는 accent 경계선을 더해 3 : 1 대비를 확보해요.