Kyobo Book Centre (교보문고)

S자 곡선으로 맞물린 6색 몰 리본 탭과 둥근 알약 검색창, 초록 점이 붙은 기획전 메뉴 글자

한국이커머스미디어차가운modern-minimalhumanism고딕comfortablesoftsubtle라이트공식한글 지원출시 2025개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: 교보문고 (Kyobo Book Centre). 온라인몰 www.kyobobook.co.kr 은 종이책과 함께 eBook · sam(전자책 구독) · 핫트랙스(음반·문구) · ODYSSEY:K · 바로출판(POD) 몰로 가는 탭을 첫 화면 맨 위에 둔다.
한 줄 정체성: 국내 대표 서점의 온라인몰. 맨 위 6색 리본 탭으로 몰을 오가고, 그 아래는 기획전 배너와 책 표지가 화면 대부분을 채운다.
공식 디자인 철학: 공식 디자인 시스템 KDS(design.kyobobook.co.kr, 2025년 2월 프로덕트UX팀이 공개). 첫 문장은 「사용자 경험을 가치있게, 고객의 삶을 흥미롭게」이고 Brand · Foundation · Component · Voice 네 갈래다. UX 원칙 여섯 가지(Natural flow experience · Context of customer journey · Familiar usability · Minimalist, readable design · Friendly connection · Data-Driven UX) 가운데 Minimalist, readable design 은 유행하는 디자인보다 고민 없이 믿고 쓰는 화면을 앞에 둔다. 시각 모티프는 책(BOOK SQUARE · 남보라 사각) · 음반(CD CIRCLE · 회색 원) · eBook(APP · 파랑 둥근 사각) · IDENTITY(초록 새싹) 네 도형이다.
시그니처 요소 1개: 첫 화면 맨 위, S자 곡선으로 맞물린 6색 리본 탭 — 교보문고 #474BAA · eBook #3F5ED5 · sam #1EA5A8 · 핫트랙스 #E8422F · ODYSSEY:K #292929 · 바로출판(흰 면에 회색 테). 그 아래 UI 는 남보라 blue 700 #5055B1 로 행동을, 초록 green 700 #4DAC27 로 평점 클로버와 기획전 메뉴의 점을 찍는다. 로고의 새싹(곡옥을 바탕으로 새싹·새·열매를 그린 그래픽 아이콘)도 같은 초록 계열이다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 정돈된, 친근한, 다양한 (KDS Voice — 「친근하고 편안한」 목소리, 톤 「정돈된」「다양한」)
무드 설명: 흰 바탕에 검정 글자와 회색 선만 두고, 색은 책 표지와 기획전 배너가 맡는다. UI 가 직접 칠하는 색은 거의 남보라(버튼·선택 탭·「MD의 선택」)와 초록(클로버 평점·할인율·기획전 점) 둘이고, 빨강·파랑은 순위 화살표 같은 작은 표시에만 쓴다. 말투는 해요체 — 「'연휴에 뭐 하지?' 고민중이라면!」, 「MD들이 신중하게 골랐어요」.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (곡옥 새싹 로고, 책·CD·앱 도형 모티프, 부드러운 S자 탭)
밀도(Density): Comfortable — 섹션 제목 24px/700 사이는 넓게 띄우고, 상품 줄 안은 12~14px 글자로 순위·뱃지·가격·평점을 촘촘히 담는다.
모서리 성향: Soft(4~8px) — 버튼·입력 8px, 뱃지 4px. 배너·사이드 카드 12px, 빠른 메뉴 칸 16px 은 넓은 면에만. 검색창·햄버거·MY 버튼은 완전한 원.
평면성: Subtle — 면과 1px 선으로 나눈다. 그림자는 위로 가기 버튼·상세 탭, 도서 상세 표지, MY 버튼에만.

Color System

컬러 시스템 (CSS 변수)

KDS Foundation/Color 의 사다리 5개(blue · light blue · green · red · gray, 100~900)를 그대로 옮겼다. 라이브 CSS 의 --color-blue-700 등과 값이 같다. 단계 번호를 KDS 대로 두므로 대표색은 500 이 아니라 700 이다. 몰 색은 첫 화면 리본 탭 SVG 의 fill 실측값.

:root {
  /* Primary — KDS blue (Informative · Accent) */
  --color-primary-50:  #F5F5FB;  /* KDS 에 50 단계 없음 — 100 과 같게 */
  --color-primary-100: #F5F5FB;
  --color-primary-200: #EDEDF7;  /* Secondary 버튼 hover · 「당일배송」「eBook」 알약 */
  --color-primary-300: #DCDDEF;
  --color-primary-400: #B9BBE0;  /* Primary 버튼 disabled */
  --color-primary-500: #9699D0;  /* Secondary 버튼 disabled */
  --color-primary-600: #7377C0;
  --color-primary-700: #5055B1;  /* ★ UI 기본색 · Primary 버튼 · 「바로구매」 */
  --color-primary-800: #474C98;  /* Secondary 버튼 글자 · 「MD의 선택」 · 리뷰 키워드 */
  --color-primary-900: #2C307C;  /* Primary 버튼 hover/pressed */

  /* Secondary — KDS green (Positive · Accent) */
  --color-secondary-100: #F4FAF2; --color-secondary-200: #EDF7E9; --color-secondary-300: #DBEED3;
  --color-secondary-400: #B7DEA8; --color-secondary-500: #94CD7D; --color-secondary-600: #70BC52;
  --color-secondary-700: #4DAC27;  /* 클로버 평점 · 기획전 점 · MY 버튼 · 입력 성공 테 */
  --color-secondary-800: #3C9A17;  /* 성공 안내 · 홈 할인율 (상품 화면 빌드는 #278203) */
  --color-secondary-900: #2A760C;  /* GNB 기획전 메뉴 글자 */

  /* Light blue — eBook 몰 색과 같은 사다리 */
  --color-lightblue-100: #F1F6FD; --color-lightblue-200: #DDE8FD; --color-lightblue-300: #C5D6F7;
  --color-lightblue-400: #AAC3F2; --color-lightblue-500: #87A4EF; --color-lightblue-600: #6287E5;
  --color-lightblue-700: #3F5ED5;  /* eBook 탭 · 「신간」 뱃지 */
  --color-lightblue-800: #314FB9;  /* 순위 하락 ▼ */
  --color-lightblue-900: #223FA5;

  /* Red — 700 은 핫트랙스 대표색 */
  --color-red-100: #FDF2F2; --color-red-200: #FCE9EA; --color-red-300: #F8D3D4;
  --color-red-400: #FDA1A4; --color-red-500: #FF6C71; --color-red-600: #F64F55;
  --color-red-700: #DA2128;  /* Hottracks primary · 입력 오류 테 */
  --color-red-800: #C71E24;  /* 오류 안내 · 순위 상승 ▲ */
  --color-red-900: #AC2619;

  /* Neutral — KDS gray */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;  /* = 100 */
  --color-neutral-100:  #F7F7F7;  /* 빠른 메뉴 칸 · 날짜 바 · 입력 disabled */
  --color-neutral-200:  #F2F2F2;  /* Tertiary 버튼 hover · 카테고리 칩 */
  --color-neutral-300:  #EAEAEA;  /* 구분선 · disabled 테 */
  --color-neutral-400:  #D5D5D5;  /* 검색창 · 원형 버튼 · 기본 뱃지 테 */
  --color-neutral-500:  #CCCCCC;  /* 입력 · Tertiary 버튼 테 */
  --color-neutral-600:  #999999;  /* disabled 글자 · 「일시품절」 */
  --color-neutral-700:  #767676;  /* placeholder · 저자 · 순위 사각 · 목록 「장바구니」 */
  --color-neutral-800:  #595959;  /* GNB 일반 메뉴 · 유틸 링크 */
  --color-neutral-900:  #292929;  /* Basic chip 선택 · ODYSSEY:K */
  --color-neutral-1000: #000000;

  /* 몰 색 (실측) · CI (현행 헤더 로고) */
  --mall-kyobo: #474BAA; --mall-ebook: #3F5ED5; --mall-sam: #1EA5A8;
  --mall-hottracks: #E8422F; --mall-odyssey: #292929; --mall-pod: #D5D5D5;  /* 바로출판: 흰 면 + 이 색 테, 글자 #767676 */
  --ci-navy: #081D58; --ci-green: #6DB329;

  /* Semantic */
  --color-success-bg: #F4FAF2;  --color-success-fg: #3C9A17;
  --color-warning-bg: #FDF2F2;  --color-warning-fg: #DA2128;  /* KDS 에 주의 색이 따로 없다 — red 로 주의를 끈다 */
  --color-error-bg:   #FDF2F2;  --color-error-fg:   #EC1F2D;  /* Negative */
  --color-info-bg:    #F5F5FB;  --color-info-fg:    #5055B1;

  /* Surface */
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F7F7;
  --bg-strip: #F4F4F4;              /* 리본 탭 띠 (실측 bg-[#f4f4f4]) */
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(0, 0, 0, .5);  /* 모달 딤 (추정) */
  --bg-dim: rgba(0, 0, 0, .3);      /* 배너 페이저 bg-black/30 (실측) */

  /* Text */
  --text-primary: #000000;    /* 본문·제목 (실측 rgb(0,0,0)) */
  --text-secondary: #595959;
  --text-tertiary: #767676;   /* placeholder · 저자·출판사 · 정가 취소선 */
  --text-on-primary: #FFFFFF;
  --text-disabled: #999999;

  /* Border */
  --border-default: #CCCCCC;  /* 입력 · Tertiary 버튼 */
  --border-subtle: #EAEAEA;
  --border-strong: #000000;   /* 선택된 폴더 탭 */
  --border-search: #D5D5D5;   /* 검색창 · 원형 버튼 · 기본 뱃지 */
  --border-focus: #000000;    /* 입력 Focused (KDS) */
}

blue 700 은 행동, green 700 은 긍정·강조다. 베스트 목록 실측: 클로버 평점 #4DAC27, 리뷰 키워드 「고마워요」 #474C98, 순위 상승 ▲ #C71E24, 하락 ▼ #314FB9, 할인율 「10%」 초록 굵게.
같은 text-green-800 이 빌드마다 다르다 — 홈(ui-welcome)은 KDS 값 #3C9A17, 베스트·상세(ui-store)는 #278203(green 900 은 #195800). 새 화면은 KDS 값을 쓴다.
KDS 가 직접 적은 규칙: 핫트랙스 red 700 과 부정의 red 를 헷갈리지 않는다. 투명도는 장식 UI 에만 90~10 단계로 쓰고 글자에는 쓰지 않는다. 의미를 색만으로 전하지 않는다.

Typography

타이포그래피

폰트 페어링:
- 한글: Noto Sans KR (SIL OFL) — KDS 지정, 첫 화면 실측
- 영문·숫자: Roboto (SIL OFL) — KDS 지정. 실측 순서 Roboto, NotoSansKR, "PingFang SC", "Apple SD Gothic Neo", "Microsoft YaHei UI"
- 2026년 상품 화면(베스트·상세)은 Pretendard 로 바뀌었다(실측). 자간 -0.01em 은 같다.
- 앱: iOS SF Pro + Apple SD Gothic Neo, Android Roboto + Noto Sans
위계 (KDS Common style · 굵기 400/500/700 · 자간 모두 -0.01em):
- Display: 30px / 700 / 40px — 첫 화면 배너 제목 (배너가 이미지라 화면 관찰, 추정)
- H1: 32px / 700 / 44px ($font-title-xl)
- H2: 28px / 700 / 38px ($font-title-l) — 상품 상세 제목 「가호」 실측
- H3: 24px / 700 / 34px ($font-title-m) — 홈 섹션 제목 「오늘의 선택」「베스트」 실측. h4 20/30, h5 18/28
- Body Large: 16px / 500·700 / 24px ($font-text-xl) — GNB 메뉴
- Body: 14px / 400 / 22px ($font-text-l) — 검색창 · 버튼 · 리뷰 키워드
- Body Small: 12px / 400·500 / 18px ($font-text-m) — 뱃지 · 유틸 링크 · 적립 포인트
- Caption: 10px / 400 / 14px (font-text-s, 라이브 CSS 에만 있는 단계)
KDS 는 12pt 이하를 권하지 않지만, 실제 화면은 뱃지·유틸 링크에 12px 를 쓴다.

Spacing

스페이싱

Base unit: 4px — 최소 간격 2px($spacing-50)만 예외
토큰 (KDS 16단계):

:root {
  --space-2xs: 2px;  --space-xs: 4px;  --space-sm: 8px;  --space-12: 12px;  /* 뱃지 사이 4 · 아이콘 2개 사이 8 */
  --space-md: 16px;  --space-20: 20px; --space-lg: 24px; --space-28: 28px;  /* 검색창 안 16 · GNB 메뉴 사이 24 */
  --space-xl: 32px;  --space-36: 36px; --space-40: 40px; --space-44: 44px;
  --space-2xl: 48px; --space-52: 52px; --space-3xl: 60px; --space-72: 72px;  /* spacing-1400 은 64 가 아니라 60 */
  --container-max: 1200px;  /* 실측 w-300 */
}

Container: 1200px 가운데 정렬. PC 12열 · 모바일 6열이고, 화면 폭이 아니라 User-Agent 로 PC/모바일 화면을 나눈다(1440×900 노트북은 PC, 1024×1366 태블릿은 모바일).

Border Radius

KDS 규칙은 「4의 배수만, Round 는 높이의 50%」. 라이브 CSS 의 반경을 자리마다 연결했다.

:root {
  --radius-none: 0;      /* 책 표지 */
  --radius-sm: 4px;      /* 뱃지 · 순위 사각 · 배너 라벨 · S·XS 버튼 */
  --radius-md: 8px;      /* XL·L·M 버튼 · 입력 */
  --radius-tab: 6px;     /* 폴더 탭 윗모서리 (rounded-t-md) */
  --radius-xl: 12px;     /* 첫 화면 배너 · 사이드 카드 */
  --radius-2xl: 16px;    /* 빠른 메뉴 칸 · 베스트 날짜 바 */
  --radius-3xl: 24px;    /* 높이 48 검색창 = 알약 */
  --radius-full: 9999px; /* 햄버거 · MY · 페이저 · Intermediate 뱃지 */
}

Shadow / Elevation

KDS 가 공개한 그림자는 셋이다. 상품 카드·배너에는 그림자를 두르지 않는다.

:root {
  --shadow-none: none;
  --shadow-sm: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);   /* shadow-gray-100 · 위로 가기 버튼 · 상품 상세 탭 */
  --shadow-md: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);   /* 별도 단계 없음 — sm 과 같게 */
  --shadow-lg: 0px 20px 40px 0px rgba(0, 0, 0, 0.10);  /* shadow-gray-200 · 도서 상세 표지 */
  --shadow-xl: 0px 20px 40px 0px rgba(0, 0, 0, 0.10);  /* 별도 단계 없음 — lg 와 같게 */
  --shadow-green: 0px 4px 8px 0px rgba(77, 172, 39, 0.40);  /* shadow-green-100 · MY 버튼 (PC 헤더 실측은 0 5px 10px .5) */
}

Iconography

스타일: Outline. 첫 화면 빠른 메뉴 10칸은 검정 선 + 초록 포인트 하나(점·물결·화살표·반짝임)로 그린다. 「이달의 책」 칸만 글자 로고.
Stroke 굵기: 24px 기준 1.5px (라이브 검색·장바구니 아이콘 stroke-width="1.5"). 굵기를 섞지 않는다.
모서리 처리: Round — 선 끝과 꺾임을 둥글게 (KDS Do)
그리드: 24×24, 상하좌우 4px 여백, Keyline shape 안. 모바일 하단 내비 아이콘만 26px.
추천 라이브러리: Lucide 를 stroke 1.5 로 맞춰 쓰면 가깝다(공식 지정 아님).

Component Guide

컴포넌트 가이드 (상태별 CSS)

버튼·입력·뱃지 색은 KDS 문서 그림에서 뽑았고, 검색창·GNB·베스트 목록은 라이브 화면 실측이다.

:root { --font-body: Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

/* 검색창 — 48px 알약, 「통합검색 ▾ | 입력 | 돋보기」 */
.kb-search { display: flex; align-items: center; min-width: 0; height: 48px; border: 1px solid var(--border-search); border-radius: var(--radius-3xl); background: var(--bg-base); }
.kb-search__scope { flex: none; display: flex; align-items: center; gap: 16px; padding-left: 24px; font-size: 14px; white-space: nowrap; }
.kb-search__scope::after { content: ""; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
.kb-search input { flex: 1; min-width: 0; width: 0; height: 100%; margin-left: 16px; padding: 0 16px; border: 0; outline: 0; text-overflow: ellipsis; background: linear-gradient(var(--border-subtle), var(--border-subtle)) 0 50% / 1px 12px no-repeat; font: 400 14px/22px var(--font-body); }
.kb-search input::placeholder { color: var(--text-tertiary); }
.kb-search svg { flex: none; margin-right: 24px; }

/* Navigation — GNB: 기획전은 green 900 굵게 + 오른쪽 위 4px 점. 원형 전체메뉴 · MY */
.kb-gnb { display: flex; align-items: center; gap: 24px; height: 44px; white-space: nowrap; }
.kb-gnb a { display: flex; align-items: flex-start; gap: 2px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.kb-gnb a.is-promo { font-weight: 700; color: var(--color-secondary-900); }
.kb-gnb a.is-promo::after { content: ""; width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-secondary-700); }
.kb-icon-round { flex: none; width: 44px; height: 44px; border: 1px solid var(--border-search); border-radius: var(--radius-full); display: grid; place-items: center; }
.kb-my { flex: none; width: 48px; height: 48px; border-radius: var(--radius-full); background: linear-gradient(#6BCB45, var(--color-secondary-700)); box-shadow: var(--shadow-green); display: grid; place-items: center; }   /* 모바일 하단 내비에선 55px, 선 위로 솟는다 */

/* Button — 높이 XL 50 · L 44 · M 38 · S 30 · XS 24 (S·XS 반경 4). Hover = Pressed */
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-md); font: 700 16px/24px var(--font-body); cursor: pointer; transition: background-color var(--duration-base) var(--ease-in-out); }
.kb-btn--md { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; }   /* 목록 「장바구니」「바로구매」 100×38 */
.kb-btn--primary { background: var(--color-primary-700); color: #FFFFFF; }
.kb-btn--primary:hover, .kb-btn--primary:active { background: var(--color-primary-900); }
.kb-btn--primary:disabled { background: var(--color-primary-400); }
.kb-btn--secondary { background: #FFFFFF; border-color: var(--color-primary-700); color: var(--color-primary-800); }
.kb-btn--secondary:hover { background: var(--color-primary-200); }
.kb-btn--secondary:disabled { border-color: var(--color-primary-500); color: var(--color-primary-500); }
.kb-btn--tertiary { background: #FFFFFF; border-color: var(--border-default); font-weight: 400; }
.kb-btn--tertiary:hover { background: var(--color-neutral-200); }
.kb-btn--tertiary:disabled { border-color: var(--border-subtle); color: var(--text-disabled); }
.kb-btn--gray { background: var(--color-neutral-700); color: #FFFFFF; }   /* 목록 「장바구니」, hover gray 800 */
.kb-btn--danger { background: var(--color-error-fg); color: #FFFFFF; }    /* KDS 에 없음 (추정) */
.kb-btn.is-loading { position: relative; color: transparent; pointer-events: none; }   /* (추정) */
.kb-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF; border-radius: var(--radius-full); animation: kb-spin .8s linear infinite; }
@keyframes kb-spin { to { transform: rotate(360deg); } }

/* Input — PC 44 · S 38 · 모바일 50 */
.kb-input { width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font: 400 14px/22px var(--font-body); }
.kb-input::placeholder { color: var(--text-tertiary); }
.kb-input:focus { outline: 0; border-color: var(--border-focus); }
.kb-input:disabled { background: var(--bg-subtle); }
.kb-input.is-error { border-color: var(--color-red-700); }           /* 안내 글자 red 800 + ⓘ */
.kb-input.is-success { border-color: var(--color-secondary-700); }   /* 안내 글자 green 800 */

/* Card — 배너 · 빠른 메뉴 · 책 */
.kb-banner { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.kb-label { display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); background: #000000; color: #FFFFFF; font-size: 12px; line-height: 18px; font-weight: 500; }   /* 「종이책」 */
.kb-pager { display: flex; gap: 4px; font-size: 12px; color: #FFFFFF; }
.kb-pager > * { height: 30px; min-width: 30px; padding: 0 12px; border-radius: var(--radius-full); background: var(--bg-dim); display: flex; align-items: center; justify-content: center; gap: 4px; }
.kb-pager__btn { padding: 0; }
.kb-quick { width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; line-height: 22px; white-space: nowrap; }
.kb-quick i { width: 68px; height: 68px; border-radius: var(--radius-2xl); background: var(--bg-subtle); display: grid; place-items: center; }
.kb-book { display: flex; flex-direction: column; min-width: 0; }
.kb-book__cover { display: block; width: 100%; height: auto; aspect-ratio: 60 / 86; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }   /* 상세 표지는 --shadow-lg */
.kb-book__rank { display: flex; align-items: center; justify-content: space-between; height: 22px; margin-top: 12px; }
.kb-book__title { margin-top: 8px; font-size: 16px; line-height: 24px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Badge — Basic 4px · Intermediate 알약 · Special. 높이 22 고정, 사이 4px */
.kb-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px; border: 1px solid var(--border-search); border-radius: var(--radius-sm); color: var(--text-tertiary); font-size: 12px; font-weight: 500; white-space: nowrap; }   /* 「예약판매」「사은품」 */
.kb-badge--blue { border-color: var(--color-primary-700); color: var(--color-primary-800); }   /* 「MD의 선택」 */
.kb-badge--pill { padding: 0 6px; border-color: transparent; border-radius: var(--radius-full); background: var(--color-primary-200); color: var(--color-primary-800); }   /* 「당일배송」 */
.kb-badge--best { padding: 0 8px 0 6px; border: 0; border-radius: 4px 0 8px 0; background: linear-gradient(90deg, #3960D7, #3F999E 55%, #45CA70); color: #FFFFFF; font-weight: 700; }   /* 「교보문고 Best 1」 · 핫트랙스는 #FF4942→#FF8608 */
.kb-rank { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--color-neutral-700); color: #FFFFFF; font-size: 12px; font-weight: 700; }
.kb-change { font-size: 12px; color: var(--text-disabled); }
.kb-change--up { color: var(--color-red-800); }
.kb-change--down { color: var(--color-lightblue-800); }

/* Tab — 라이브 폴더 탭: 윗모서리 6px, 선택은 검정 테 + 바닥 열림 (KDS Primary tab 은 선택 칸을 blue 700 으로 채운다) */
.kb-tab { flex: 1; max-width: 160px; height: 44px; margin-left: -1px; display: grid; place-items: center; border: 1px solid var(--border-search); border-bottom-color: var(--border-strong); border-radius: var(--radius-tab) var(--radius-tab) 0 0; color: var(--text-tertiary); font-size: 16px; }
.kb-tab.is-active { border-color: var(--border-strong); border-bottom-color: transparent; color: var(--text-primary); font-weight: 500; }

/* Chip — 카테고리 필터. 선택은 gray 800 (Basic chip 은 gray 900) */
.kb-chip { height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--text-secondary); font-size: 14px; }
.kb-chip.is-selected { background: var(--color-neutral-800); color: #FFFFFF; }

Motion

라이브 CSS 는 Tailwind 기본 곡선을 쓰고, 버튼은 transition-colors duration-200 ease-in-out 이다(실측).

:root {
  --duration-fast: 100ms;   /* 작은 아이콘 */
  --duration-base: 200ms;   /* 버튼·링크 색 전환 (실측) */
  --duration-slow: 300ms;   /* 패널 */
  --duration-fade: 700ms;   /* animate-fadeIn .7s */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);   /* 기본 transition 곡선 */
  --ease-fade: cubic-bezier(.25, .1, .25, 1);
}
@keyframes kb-fade-in { from { opacity: 0; } to { opacity: 1; } }

첫 화면 배너는 자동으로 넘어가고(관찰 당시 39장), 오른쪽 아래 페이저(일시정지 원 + 「‹ 06 - 39 › 전체보기」)로 멈추고 넘긴다.

Anti-patterns

1. 핫트랙스 red 700 `#DA2128` 와 부정의 red `#EC1F2D` 를 섞지 않는다 — KDS 가 직접 적은 금지다. 오류는 Negative, 몰 표시는 핫트랙스 색. 2. 한 영역에 Primary 버튼은 하나 — 「장바구니」와 「바로구매」가 나란하면 하나는 회색(gray 700)이나 테두리 버튼으로 낮춘다. 3. 뱃지 높이를 섞지 않는다 — 22px 고정, 짧은 낱말만, 같은 줄에 다른 높이 금지. 4. 새싹 그래픽 아이콘을 떼어 장식·패턴으로 쓰지 않는다 — 로고타입 대체 서체, 아이콘과 로고타입 자리 바꾸기도 금지(KDS Logo). 5. 아이콘 선 끝을 각지게, 굵기를 섞어 그리지 않는다 — 둥근 끝·둥근 꺾임·한 굵기. 글자에는 투명도를 주지 않는다.

Sources

출처

Kyobo Book Centre (교보문고) 이름과 로고는 각 권리자의 상표입니다.