Kyobo Design System · 미니멀, 읽기 우선
책을 읽듯, 정보가 자연스럽게 흐르는 화면.
한 권의 깊이 1 / 5
오늘의 베스트
전체물고기는 존재하지 않는다
기기 화면 속 도서 목록·베스트 순위·가격·할인율·평점·리뷰 수와 '베스트'·'바로드림'·'무료배송' 배지는 모두 레이아웃 시연용 더미 데이터이며, 실제 판매가·재고 상태나 베스트셀러 순위가 아닙니다.
한 권의 깊이 1 / 5
오늘의 베스트
전체물고기는 존재하지 않는다
기기 화면 속 도서 목록·베스트 순위·가격·할인율·평점·리뷰 수와 '베스트'·'바로드림'·'무료배송' 배지는 모두 레이아웃 시연용 더미 데이터이며, 실제 판매가·재고 상태나 베스트셀러 순위가 아닙니다.
시그니처 컴포넌트는 교보의 차분한 reading-first 표면 위에서 보여야 한다.시그니처 컴포넌트는 다크 표면 위에서도 같은 위계로 읽혀야 한다.
Button hierarchy · element · size
Hierarchy — primary / secondary / tertiary
State — hover / disabled
Capsule — icon required, max radius, outlined (no fill)
Loading 4-color · counter-clockwise
Symbol — compact / favicon scale (777×777 새 마크)
Chip basic · input · anchor · action
Basic — single / multi-select filter (selected = gray-900)
Input (deletable) · Anchor · Action
Badge basic · intermediate · special
Basic — outlined, 22px, product status
Intermediate — filled, order / group status
Special — ranking / promotion
BottomSheet standard · modal · 16px corner
Standard — handle + chevron + fixed button
Modal — scrim + close + header
Input states · H44(M)
Bottom navigation signature green MY · shadow-green-100