Kyobo Design System · 미니멀, 읽기 우선
책을 읽듯, 정보가 자연스럽게 흐르는 화면.
교보문고의 디자인 시스템 KDS는 트렌디함을 덜어내고 가독성과 신뢰를 택합니다. 색은 책 표지가 공급하고 배경은 흰색·옅은 그레이로 비웁니다. 표면은 강한 그림자가 아니라 1px 헤어라인과 배경 워시로 나뉘며, 코어 액션 색은 periwinkle indigo blue-700입니다.KDS는 라이트 모드 우선이라 공개된 다크 팔레트가 없습니다. 이 화면은 브랜드 색을 새로 만들지 않고, KDS의 차분한 푸른 회색 램프에서 다크 표면을 파생한 다음 액션·의미색만 대비를 위해 명도를 끌어올린 적응입니다. 코어 액션은 여전히 blue-700 계열입니다.
한 권의 깊이 1 / 5
오늘의 베스트
전체물고기는 존재하지 않는다
기기 화면 속 도서 목록·베스트 순위·가격·할인율·평점·리뷰 수와 '베스트'·'바로드림'·'무료배송' 배지는 모두 레이아웃 시연용 더미 데이터이며, 실제 판매가·재고 상태나 베스트셀러 순위가 아닙니다.
한 권의 깊이 1 / 5
오늘의 베스트
전체물고기는 존재하지 않는다
기기 화면 속 도서 목록·베스트 순위·가격·할인율·평점·리뷰 수와 '베스트'·'바로드림'·'무료배송' 배지는 모두 레이아웃 시연용 더미 데이터이며, 실제 판매가·재고 상태나 베스트셀러 순위가 아닙니다.
시그니처 컴포넌트는 교보의 차분한 reading-first 표면 위에서 보여야 한다.시그니처 컴포넌트는 다크 표면 위에서도 같은 위계로 읽혀야 한다.
Button 위계 · Chip · Badge · Input · BottomSheet · 하단 네비게이션의 초록 MY 버튼 · 4색 반시계 Loading을 KDS 실제 토큰으로 렌더링했다. 브랜드 색은 한 영역의 1차 행동에만, blue-700으로 쓴다.Button 위계 · Chip · Badge · Input · BottomSheet · 하단 네비게이션의 초록 MY 버튼 · 4색 반시계 Loading을 다크 적응 토큰으로 렌더링했다. 액션 색은 한 영역의 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을 쓰지 않는다.
한 영역에는 하나의 1차 행동만 둔다. 다크에서는 fill 위 텍스트가 어두운 잉크가 되도록 fg-on-accent를 반전했고, hover는 라이트와 반대로 더 밝은 단계로 간다. bounce·scale은 쓰지 않는다.
Loading 4-color · counter-clockwise
Symbol — compact / favicon scale (777×777 새 마크)
새 마크의 green은 brand-green으로 로고 전용이며, UI 액션 색이 아니다. 컴팩트/파비콘 스케일에서만 심볼을 단독으로 쓴다.
새 마크 green은 brand-green으로 로고 전용이며, 테마와 무관하게 게시값 그대로 둔다. 컴팩트/파비콘 스케일에서만 심볼을 단독으로 쓴다.
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% 알파다.Standard는 기본 콘텐츠와 함께 다룰 수 있고, Modal은 해제해야 상호작용할 수 있다. 상단 코너는 16~24px 구간, 다크에서는 딤을 검정 60% 알파로 깊게 둔다.
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의 중립 섀도다.
유일한 컬러 섀도다 — MY(User menu) 버튼은 55×55px 아바타에 shadow-green-100(green 45% alpha)을 얹어 브랜드 색을 그림자로 끌어와 시그니처를 만든다. 다크에서도 이 한 곳만 컬러 섀도를 유지하고, 나머지는 검정 알파의 중립 섀도를 깊게 쓴다. 일반 아이콘은 특수 26px 사이즈다.
구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.
KDS는 공식 문서에 18개 컴포넌트를 게시한다. Button은 hierarchy·element·size를 명시해 구현하고, 색은 시맨틱 토큰으로 의도를 먼저 표현한다. 라이트 모드 우선이며 다크 토큰은 추정하지 않는다.KDS는 공식 문서에 18개 컴포넌트를 게시한다. Button은 hierarchy·element·size를 명시해 구현하고, 색은 시맨틱 토큰으로 의도를 먼저 표현한다. 이 다크는 파생 표면 위 적응이며, 공개 다크 토큰이 나오면 교체해야 한다.
Button hierarchy="primary" // primary | secondary | tertiary element="box" // box | text | icon | capsule size="m" // 공개 픽셀값 없음 — 토큰으로 지정 fill="accent" // blue-700 · hover blue-800
Button hierarchy="primary" // primary | secondary | tertiary element="box" // box | text | icon | capsule size="m" // 공개 픽셀값 없음 — 토큰으로 지정 fill="accent" // dark: +L blue · 잉크 텍스트
Color action="accent" // blue-700, 한 영역 1차 행동만 text="fg" // gray-900 본문 기본 surface="bg / border" // 1px gray-300 헤어라인 워시 brand="navy / green" // LOGO ONLY — 액션 색 금지
Color action="accent" // blue-700(+L), 한 영역 1차만 text="fg" // gray-900 본문 기본 surface="bg / border" // 파생 다크 + 1px 헤어라인 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
Theme mode="dark-derived" // 공개 다크 팔레트 없음 depth="divider-first" // 다크는 알파만 키움 motion="150 / 240ms" // ease (0.4,0,0.2,1) · toast 4s