Kyobo Design System · 미니멀, 읽기 우선
책을 읽듯, 정보가 자연스럽게 흐르는 화면.
교보문고의 디자인 시스템 KDS는 트렌디함을 덜어내고 가독성과 신뢰를 택합니다. 색은 책 표지가 공급하고 배경은 흰색·옅은 그레이로 비웁니다. 표면은 강한 그림자가 아니라 1px 헤어라인과 배경 워시로 나뉘며, 코어 액션 색은 periwinkle indigo blue-700입니다.
한 권의 깊이 1 / 5
오늘의 베스트
전체물고기는 존재하지 않는다
시그니처 컴포넌트는 교보의 차분한 reading-first 표면 위에서 보여야 한다.
Button 위계 · Chip · Badge · Input · BottomSheet · 하단 네비게이션의 초록 MY 버튼 · 4색 반시계 Loading을 KDS 실제 토큰으로 렌더링했다. 브랜드 색은 한 영역의 1차 행동에만, blue-700으로 쓴다.
Button hierarchy · element · size
Hierarchy — primary / secondary / tertiary
State — hover / disabled
Capsule — icon required, max radius, outlined (no fill)
한 영역에는 하나의 1차 행동만 둔다. Primary는 accent blue-700 fill, hover는 blue-800, disabled는 gray-200/gray-400. 눌림 연출은 fill·tint를 어둡게 할 뿐 bounce·scale을 쓰지 않는다.
Loading 4-color · counter-clockwise
Symbol — compact / favicon scale (777×777 새 마크)
새 마크의 green은 brand-green으로 로고 전용이며, UI 액션 색이 아니다. 컴팩트/파비콘 스케일에서만 심볼을 단독으로 쓴다.
Chip basic · input · anchor · action
Basic — single / multi-select filter (selected = gray-900)
Input (deletable) · Anchor · Action
레이블은 최대 20자 + 말줄임이며 두 줄로 감싸지 않는다. 선택 상태는 색뿐 아니라 텍스트 대비로도 구분된다. Anchor는 페이지 내 이동, Action은 즉시 실행으로 역할이 다르다.
Badge basic · intermediate · special
Basic — outlined, 22px, product status
Intermediate — filled, order / group status
Special — ranking / promotion
높이 22px 고정·좌우 여백 basic 4px / intermediate 6px. 보조 팔레트를 쓰되 항상 코어 색 하나와 균형을 맞춘다. Hottracks 빨강과 Negative 빨강은 역할이 달라 혼동하지 않는다.
BottomSheet standard · modal · 16px corner
Standard — handle + chevron + fixed button
Modal — scrim + close + header
Standard는 기본 콘텐츠와 함께 다룰 수 있고, Modal은 해제해야 상호작용할 수 있다. 상단 코너는 16~24px 구간, 딤은 검정 45% 알파다.
Input states · H44(M)
상태 7종(Default/Focused/Filled/Disabled/Error/Success/Autocomplete). Error는 negative red-500로 표기하되 색만으로 의미를 전하지 않고 보조 텍스트를 병기한다.
Bottom navigation signature green MY · shadow-green-100
유일한 컬러 섀도다 — MY(User menu) 버튼은 55×55px 아바타에 shadow-green-100(green 40% alpha)을 얹어 브랜드 색을 그림자로 끌어와 시그니처를 만든다. 일반 아이콘은 특수 26px 사이즈를 쓴다. 나머지 두 섀도 토큰은 검정 10% alpha의 중립 섀도다.
구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.
KDS는 공식 문서에 18개 컴포넌트를 게시한다. Button은 hierarchy·element·size를 명시해 구현하고, 색은 시맨틱 토큰으로 의도를 먼저 표현한다. 라이트 모드 우선이며 다크 토큰은 추정하지 않는다.
Button hierarchy="primary" // primary | secondary | tertiary element="box" // box | text | icon | capsule size="m" // L(H50) MO · M(H44) PC · S(H38) fill="accent" // blue-700 · hover blue-800
Color action="accent" // blue-700, 한 영역 1차 행동만 text="fg" // gray-900 본문 기본 surface="bg / border" // 1px gray-300 헤어라인 워시 brand="navy / green" // LOGO ONLY — 액션 색 금지
Chip / Badge chip="radius-round" // selected = gray-900 badge="h 22px" // basic | intermediate | special loading="4-color ↺" // counter-clockwise, center only
Theme mode="light-first" // 공개 다크 팔레트 없음 depth="divider-first" // 강한 드롭섀도 금지 motion="150 / 240ms" // ease (0.4,0,0.2,1) · toast 4s