채널톡 Bezier Design System

채널톡

BEZIER DESIGN SYSTEM

오픈소스 React 디자인 시스템

대화로 매출을 만드는 인디고-바이올렛 시스템

채널톡을 만드는 채널코퍼레이션의 Bezier는 컴포넌트 59종, 아이콘 598개, 토큰 450개를 한 모노레포로 묶은 풀 디자인 시스템이에요. 밝고 깨끗한 표면 위에 단 하나의 인디고 액센트(#6157ea)와 부드러운 스쿼클 코너로 제품의 결을 맞춰요.

Components

59종

Icons

598개

Primary

#6157ea

License

Apache-2.0

01

Components

@channel.io/bezier-react 59 컴포넌트를 7개 영역으로. 각 base가 라벨 셀로 등장해요.
1

Actions / Buttons

accent fill을 가장 폭넓게 쓰는 영역. 색·스타일·사이즈 variant + alpha/legacy 라인.
Buttonprimary / secondary / tertiary · radius scales with size
button-primarystyleVariant="primary"
button-secondarystyleVariant="secondary"
button-floatingelevation-2/3 부양
새 대화
ButtonGroup정렬 래퍼
AlphaButton차세대 버튼
AlphaIconButtonaccent fill/icon 50종+
AlphaFloatingButtonFAB · fill-grey
AlphaFloatingIconButton아이콘 플로팅
AlphaToggleButton선택 상태 = accent blue
AI 응답 자동 번역
AlphaToggleButtonGroup단일/다중 선택
목록보드캘린더
AlphaToggleEmojiButtonGroup이모지 리액션(콘텐츠)
👍 3❤️ 1🎉
SegmentedControlelevation-1 selected
2

Forms / Inputs

--state-input-* (active/default/error) + --b-form-field-size로 상태·밀도 일원화. invalid는 orange 링.
TextFieldborder = inner-shadow ring; focus → indigo
대화 검색
refund
TextField · clear/error
박지훈
bad@
TextAreaTextAreaHeight
고객 요청 사항을 입력하세요…
Select팝업 elevation-3
박지훈
박지훈
정민지
Checkboxgreen-heavier fill
자동 응답
RadioGroupgreen accent active
전체 / 미해결
Switchgreen fill · knob elevation-2
Slidergreen fill · floating thumb · track r3
FormControlLabel(*,Help) + Field + Helper
이메일 *
seoyeon.kim@maple.co
알림은 이 주소로 전송돼요.
FormGroup라벨+필드+헬퍼 그룹
담당자
담당자 선택
FormLabel필드 제목
전화번호 *선택 입력 라벨
FormHelperTextErrorMessage 스토리
도움이 되는 설명 텍스트 형식이 올바르지 않아요.
3

Overlays / Modals / Tooltips

z-index overlay 1000 → modal 1100 → toast 1200 → tooltip 1300. 딤은 dim-absolute-black.
Modalradius-20 · elevation-4 · scrim 40%

대화를 종료할까요?

종료하면 고객이 답장할 때 다시 열려요.

ConfirmModal확인/취소 합성형

삭제할까요?

되돌릴 수 없어요.

AlphaDialogPrimitive헤드리스 다이얼로그
Trigger · Portal · Overlay · Content · Title · Close
Overlay위치 지정 · z 1000
팝오버 메뉴
Tooltipsurface-high · elevation-3 · z 1300
담당자에게 배정
LegacyTooltipelevation-2 · 마이그레이션
이전 버전 툴팁
AlphaTooltipPrimitive헤드리스 + Arrow
Provider · Trigger · Content
4

Navigation

사이드 내비·탭·리스트 행이 활성 상태에 accent blue + radius-6을 공유해요.
Tabsline style · indigo active underline
대화24
고객
통계
NavItem · NavGroup활성 = fill-accent-blue · radius-6
지원 팀
받은 대화함24
내 대화5
ListItemconversation row · radius-12
김
김서연환불 관련해서 문의드려요…
2분
이
이준호감사합니다! 잘 받았어요 👍
1시간
OutlineItem · SectionLabelindent tree · accent blue active

워크스페이스

받은 대화함
VIP 고객
KeyValueItem메타데이터 행 · MultiLine
주문번호#MS-20418
플랜Pro
5

Data display / Avatars

아바타는 squircle shadow-spread를 공유. 배지·상태·태그가 상태 색을 인코딩해요.
Avatarsmooth squircle + status
유 민 SJ
AvatarGroup겹침 · z-floating
ABC+5
CheckableAvatar선택 = blue ring + check
김 SC
AlphaAvatar · AlphaAvatarGroup차세대 · computed-status-gap
AD+2
Badgecount · red fill
31299+5
AlphaStatusBadgestatus + surface
온라인자리비움
Status상태 점/인디케이터
Online Away Offline
Tag20% tint + solid text
VIP 결제완료 대기중 신규
Icon598 SVG · 24×24 · currentColor · outline + -filled
Emoji콘텐츠 리액션 (UI 아이콘 아님)
👋🎉🙏🔥
Text타이포 프리미티브
heading-xsmall text-medium 본문 text-2xsmall caption
6

Feedback / Status

알림 표면은 blue/cobalt/green/orange/red를 상태별로. Banner = 틴트 + filled 아이콘, Toast = 다크 바.
Banneraccent 20% tint + leading filled icon + bold lead + close X · radius-12
Toastfloating dark bar · neutral-heaviest 85% · filled icon + action link
대화를 종료했어요실행 취소
담당자에게 배정했어요보기
ProgressBargreen gradient · radius-3
상담 만족도 68%
Spinner--b-spinner-color
AlphaLoadertrack + indicator color
Help물음표 트리거
도움이 되었나요?
7

Layout / Primitives

Box/Center/Stack + Divider, squircle용 SmoothCornersBox로 골격을 짜요.
Box스타일 프롭 컨테이너
Center자식 가운데 정렬
StackVStack / HStack · gap
ABC
LegacyStack구버전 · 마이그레이션
123
Divider1px neutral hairline · full/indent/vertical
받은 대화함
전체 24건
Reply
Note
Snooze
SmoothCornersBoxcontinuous-curvature squircle · 시그니처
02

Key screen · Desk 인박스

3-페인 앱 셸 — GNB 레일 + 대화 목록 + 대화 패널. 모든 면이 위 토큰으로 조립돼요.
나

받은 대화함

24
대화 검색
김
김서연2분
환불 관련해서 문의드려요. 결제는 어제…
VIP결제
이
이준호1시간
감사합니다! 잘 받았어요 👍
해결됨
박
박민서3시간
배송이 아직 안 왔는데 확인 부탁드려요
배송
김
김서연
온라인 · VIP 고객
오늘
김
환불 관련해서 문의드려요. 결제는 어제 했는데 아직 처리가 안 됐어요.
ALF AI가 주문 내역을 확인하고 있어요…
확인했어요! 환불은 영업일 기준 3일 내 처리돼요. 조금만 기다려 주세요.
메시지를 입력하세요…
Send