형태 | CoUI

형태

CoUI 모서리 반경과 선 굵기 — CoreRadius · CoreStrokeWidth 가 단일 출처입니다.

형태#

Figma Foundation · 04. Shape · 값은 coui_core 가 정본입니다.

이 페이지는 모서리와 선 굵기를 고르는 곳입니다. 반경 19단계(radius0–radius64, radius9999)와 선 굵기 7단계(stroke0–stroke8)는 coui_core 의 CoreRadius · CoreStrokeWidth 가 정하고, Flutter / Web 이 같은 이름을 읽습니다.

전역 "input radius" / "card radius" 같은 시맨틱 별칭은 의도적으로 없습니다. 컴포넌트가 자기 CoreXxxStyle.defaultBorderRadius 에서 primitive 를 직접 고릅니다. 그래서 "이 필드의 모서리는 얼마인가" 는 그 컴포넌트 Style 을 보면 답이 나오고, 전역 별칭을 바꿔 엉뚱한 컨트롤까지 움직이는 일이 없습니다.

토큰 축 전체는 디자인 토큰 을 보세요.

언제 쓰나#

토큰을 고르세요

컨트롤·카드·칩 모서리 → CoreRadius.radius8 근처. 알약·아바타 → radius9999
테두리·디바이더·언더라인 → CoreStrokeWidth.stroke1 (기본) / stroke2 (강조)
네 모서리를 따로 줄 때 → CoreBorderRadius.all(CoreRadius.radius8) 또는 .only(...)

쓰지 마세요

BorderRadius.circular(12) / rounded-[12px] 처럼 사다리 밖 숫자 — Web 은 --coui-radius-* 를 우회해 서페이스 프리셋이 그 컴포넌트만 비껴갑니다
1.5px 보더 — 스케일에 없고, 가장 가까운 stroke1 또는 stroke2 를 고르거나 토큰 확장을 요청합니다 (디자인 소스 충돌 3)

중첩된 모서리는 바깥이 안쪽보다 커야 합니다. 카드 radius12 안의 썸네일은 radius8 이하가 자연스럽습니다. radius9999 는 크기가 아니라 완전 원/알약 의도입니다.

coui_core 맵#

쓰는 이름	의미
`CoreRadius.radius8`	반경 primitive (logical px). 19단계
`CoreRadius.radius9999`	pill / circle. 높이의 절반으로 읽힘
`CoreRadius.scale.radius8`	Web Tailwind 키 (`'radius8'`)
`CoreStrokeWidth.stroke1`	선 굵기 primitive. 7단계 (0·1·2·3·4·6·8)
`CoreBorderRadius.all(...)`	네 모서리 도메인 타입. Style 필드에 넣음

근거 명세: design/design-tokens/border-radius/CoUI_Border_Radius_Token_Specification.md (v1.0), design/design-tokens/stroke-width/CoUI_Stroke_Width_Token_Specification.md (1.0). 우선순위는 디자인 소스.

스케일#

반경 — `CoreRadius`#

구간	토큰	간격
Small	`radius0` … `radius16`	2px
Medium	`radius20` … `radius36`	4px
Large	`radius40` … `radius64`	8px
Full	`radius9999`	알약·원

radius0 과 radius9999 는 크기 사다리가 아니라 의도(각 / 완전 원)입니다. 서페이스 프리셋이 값을 옮길 때 이 둘은 자리에 남습니다.

선 굵기 — `CoreStrokeWidth`#

토큰	px	쓰는 곳
`stroke0`	0	선 없음
`stroke1`	1	기본 보더, Divider, 테이블
`stroke2`	2	선택 카드, 활성 탭 언더라인
`stroke3`	3	강한 강조. 포커스 링에 가깝게
`stroke4`	4	장식·섹션 디바이더
`stroke6`	6	강한 섹션 강조
`stroke8`	8	최대. 특수 장식만

실사용은 대부분 stroke1 / stroke2 에 몰립니다. 포커스 링 자체는 효과 의 CoreFocusRing 이 한 세트로 묶습니다.

사용법#

// Flutter / Web — Style 슬롯에 primitive
CoreButtonStyle(
  borderRadius: CoreBorderRadius.all(CoreRadius.radius8),
  borderWidth: CoreStrokeWidth.stroke1,
)

// pill
CoreChipStyle(
  borderRadius: CoreBorderRadius.all(CoreRadius.radius9999),
)

함께 보기#

디자인 토큰 — 축 전체 맵
효과 — 그림자 · 포커스 링
테마 — CoreRadius 를 앱 테마에 주입
Figma 라이브러리 — 정본 파일

형태

형태#