채널톡

BEZIER DESIGN SYSTEM

오픈소스 React 디자인 시스템

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

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

채널톡 팀

보통 1분 내 응답해요

안녕하세요! ALF AI가 첫 응답을 도와드려요. 무엇을 도와드릴까요?

결제 영수증을 다시 받고 싶어요 🙏

바로 보내드릴게요. 가입하신 이메일로 영수증을 재발송했어요.

메시지를 입력하세요…

Components

59종

Icons

602개

Primary

#6157ea

License

Apache-2.0

Components

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

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

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 스토리

도움이 되는 설명 텍스트 형식이 올바르지 않아요.

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

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

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 결제완료 대기중 신규

Icon602 SVG · 24×24 · currentColor · outline + -filled

Emoji콘텐츠 리액션 (UI 아이콘 아님)

👋🎉🙏🔥

Text타이포 프리미티브

heading-xsmall text-medium 본문 text-2xsmall caption

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물음표 트리거

도움이 되었나요?

Layout / Primitives

Box/Center/Stack + Divider, squircle용 SmoothCornersBox로 골격을 짜요.

Box스타일 프롭 컨테이너

Center자식 가운데 정렬

StackVStack / HStack · gap

ABC

LegacyStack구버전 · 마이그레이션

123

Divider1px neutral hairline · full/vertical

받은 대화함

전체 24건

Note

Snooze

SmoothCornersBoxcontinuous-curvature squircle · 시그니처

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

Components

Actions / Buttons

Forms / Inputs

Overlays / Modals / Tooltips

Navigation

워크스페이스

Data display / Avatars

Feedback / Status

Layout / Primitives

Key screen · Desk 인박스

받은 대화함