채널톡 Bezier Design System

채널톡

BEZIER DESIGN SYSTEM

오픈소스 React 디자인 시스템

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

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

Components

59종

Icons

598개

Primary

#6157ea

License

Apache-2.0

01

Colors

글로벌 원시값 → 시맨틱 → 컴포넌트 3계층. 1차 액션은 indigo-violet blue-400, 다크 표면은 grey-900 사다리 · 텍스트는 white-alpha 위계.

Brand · primary (blue-400)

blue-300

#8082ff

다크 링크·포커스·강조 텍스트

blue-400

#6157ea

1차 액션 · primary fill

blue-500

#5139d9

언더라인 · hover-down

fill-accent-blue

rgba(97,87,234,.22)

배너/태그 틴트 (다크 보정)

Accent hues — 20%+ tint fill + 300-tier text/icon

cobalt-400#3292e3
green-400#20ab55
red-400#e1535d
orange-400#e67f2b
yellow-400#edae0d
olive-400#a9b110
teal-400#09b2ac
navy-400#424fab
purple-400#8e57e7
pink-400#d64bb5
blue-400#6157ea
cobalt-300#5cadef

Neutral surface (grey-900 ladder) & white-alpha text

grey-900

#1d1d20

페이지 · 스레드 베이스

grey-850

#242426

카드 · 헤더 · 패널 표면

grey-800

#29292d

입력 필드 · 토스트 바

grey-750

#313135

팝업 · 툴팁 · 최상단 표면

text-neutral

rgba(255,255,255,.90)

본문 기본 (white-90)

text-light

rgba(255,255,255,.60)

보조 텍스트 (white-60)

icon-neutral

rgba(255,255,255,.40)

아이콘 · 3차 (white-40)

border-neutral

rgba(255,255,255,.08)

헤어라인 보더 (white-8)

02

Typography

Inter(라틴) + Noto Sans KR(국문), 2-weight(400/700). 본문 14/18, 큰 텍스트는 음수 자간.
bz-display-large
700 · 36/44 · -0.4px

디자인 시스템

bz-heading-xlarge
700 · 24/32 · -0.4px

대화로 매출을 만드는 메신저

bz-heading-medium
700 · 18/24 · -0.1px

받은 대화함 · Team Inbox

bz-text-xlarge
400 · 16/24 · -0.1px

한국어 본문 샘플입니다. 어두운 SaaS 톤 위에 인디고 액센트가 올라가요. Inter and Noto Sans KR mix.

bz-text-medium
400 · 14/18 · 본문 기본

설정이 저장되었어요. 알림은 등록하신 이메일로 전송돼요. The quick brown fox jumps over the lazy dog.

bz-text-small
400 · 13/18 · caption

고객 요청 사항을 입력하세요. 환불은 영업일 기준 3일 이내 처리돼요.

bz-text-2xsmall
400 · 11/16 · micro UI

DENSE TOOLBAR LABEL · 타임스탬프 · 99+ 배지 숫자

03

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 55%

대화를 종료할까요?

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

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 raised bar · grey-800 · 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 · 시그니처
04

Key screen · Desk 인박스

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

받은 대화함

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