Kyobo Design System · 미니멀, 읽기 우선

책을 읽듯, 정보가 자연스럽게 흐르는 화면.

KDS는 라이트 모드 우선이라 공개된 다크 팔레트가 없습니다. 이 화면은 브랜드 색을 새로 만들지 않고, KDS의 차분한 푸른 회색 램프에서 다크 표면을 파생한 다음 액션·의미색만 대비를 위해 명도를 끌어올린 적응입니다. 코어 액션은 여전히 blue-700 계열입니다.

서점 · 커머스 · 옴니채널 Noto Sans KR + Roboto 4px 간격·반경 리듬 다크 = 파생 표면

9:41

교보문고

제목, 저자, 출판사 검색

전체 소설 에세이 경제경영

이 달의 책 조용히 펼치는
한 권의 깊이

오늘의 베스트

전체

1 물고기는 존재하지 않는다

물고기는 존재하지 않는다

룰루 밀러

10% 15,120원

2 마음의 기술

불안을 다루는 마음의 기술

김혜남

10% 16,200원

3 도시와 그 불확실한 벽

도시와 그 불확실한 벽

무라카미 하루키

10% 18,720원

장바구니에 담았어요

홈 카테고리 찜 MY

도서 상세

물고기는 존재하지 않는다

룰루 밀러 · 곰출판

9.6 · 리뷰 2,481

베스트 바로드림 무료배송

10% 15,120원 16,800원

소개 목차 리뷰 배송

01 Components

시그니처 컴포넌트는 다크 표면 위에서도 같은 위계로 읽혀야 한다.

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차 행동만 둔다. 다크에서는 fill 위 텍스트가 어두운 잉크가 되도록 fg-on-accent를 반전했고, hover는 라이트와 반대로 더 밝은 단계로 간다. bounce·scale은 쓰지 않는다.

Loading 4-color · counter-clockwise

교보 4색 아이덴티티 링이 90° 기준 반시계 방향으로 회전한다. 다크에서는 navy 도트를 끌어올려 네 색이 모두 어두운 카드 위에서 읽히게 했다.

Symbol — compact / favicon scale (777×777 새 마크)

새 마크 green은 brand-green으로 로고 전용이며, 테마와 무관하게 게시값 그대로 둔다. 컴팩트/파비콘 스케일에서만 심볼을 단독으로 쓴다.

Chip basic · input · anchor · action

Basic — single / multi-select filter (selected = gray-900)

전체 국내도서 소설 에세이 경제경영 자기계발

Input (deletable) · Anchor · Action

SF/판타지 추리/미스터리 목차 바로가기 # 연관검색

레이블은 최대 20자 + 말줄임이며 두 줄로 감싸지 않는다. 선택 상태는 색뿐 아니라 텍스트 대비로도 구분된다. Anchor는 페이지 내 이동, Action은 즉시 실행으로 역할이 다르다.

Badge basic · intermediate · special

Basic — outlined, 22px, product status

신간 베스트 웹툰 무료배송

Intermediate — filled, order / group status

바로드림 신청완료 일시품절 쿠폰

Special — ranking / promotion

교보 Best 1 2 AD

높이 22px 고정·좌우 여백 basic 4px / intermediate 6px. 보조 팔레트를 쓰되 항상 코어 색 하나와 균형을 맞춘다. Hottracks 빨강과 Negative 빨강은 역할이 달라 혼동하지 않는다.

BottomSheet standard · modal · 16px corner

Standard — handle + chevron + fixed button

새로운 순

다크는 KDS의 푸른 회색 램프에서 파생한 표면과 명도를 끌어올린 의미색이다.

아래 OKLCH 값은 이 다크 적응에서 실제로 쓰는 값이다(라이트 보드와 다름). 브랜드 navy·green은 로고 전용이라 게시값을 그대로 두고, 액션·의미색은 어두운 표면 위 WCAG AA 대비를 위해 명도를 올렸다.

Colors dark-derived OKLCH

Brand identity — LOGO ONLY · 게시값 고정

brand-navy oklch(0.340 0.126 258) LOGO ONLY

brand-green oklch(0.670 0.188 141) LOGO ONLY

Primary · Blue — action (lifted +L for dark)

blue-100oklch(0.300 0.060 282)tint surface

blue-200oklch(0.360 0.080 282)tint border

blue-300oklch(0.470 0.110 283)

blue-400oklch(0.560 0.130 283)

blue-500oklch(0.630 0.140 283)

blue-600oklch(0.660 0.142 283)

blue-700 · COREoklch(0.690 0.140 283)accent / action

blue-800oklch(0.745 0.130 283)hover (lighter)

blue-900oklch(0.820 0.100 282)

Primary · Green — positive (lifted +L for dark)

green-100oklch(0.330 0.070 144)tint surface

green-200oklch(0.400 0.100 144)

green-300oklch(0.520 0.140 144)

green-400oklch(0.620 0.165 144)

green-500oklch(0.700 0.185 144)

green-600/700 · COREoklch(0.745 0.190 144)positive

green-800oklch(0.660 0.175 145)

green-900oklch(0.560 0.150 146)

Semantic · Red — Negative vs Hottracks (lifted +L)

red-100oklch(0.330 0.090 24)tint surface

red-200oklch(0.420 0.130 25)

red-300oklch(0.520 0.170 26)

red-400oklch(0.610 0.205 27)

red-500 · negativeoklch(0.665 0.215 28)절제 사용

red-600/700 · hottracksoklch(0.645 0.212 27)서브브랜드

red-800oklch(0.560 0.185 27)

red-900oklch(0.470 0.150 26)

Dark surface ramp — cool blue-tinted (derived)

baseoklch(0.150 0.011 271)page bg

surface / "white"oklch(0.180 0.011 271)card

gray-100oklch(0.225 0.013 271)bg-subtle

gray-200oklch(0.270 0.014 270)bg-muted

gray-300oklch(0.330 0.014 268)1px divider

gray-400oklch(0.410 0.015 266)border-strong

gray-500oklch(0.620 0.016 266)fg-tertiary

gray-600oklch(0.710 0.015 264)

gray-700oklch(0.800 0.013 264)fg-secondary

gray-800oklch(0.890 0.010 262)

gray-900oklch(0.960 0.006 258)fg / primary

Semantic roles — 다크 매핑

fgoklch(0.960 0.006 258)gray-900

fg-secondaryoklch(0.800 0.013 264)gray-700

fg-tertiaryoklch(0.620 0.016 266)gray-500

bg-subtleoklch(0.225 0.013 271)gray-100

borderoklch(0.330 0.014 268)gray-300

accentoklch(0.690 0.140 283)blue-700

positiveoklch(0.745 0.190 144)green-600

negativeoklch(0.665 0.215 28)red-500

Typography Noto Sans KR + Roboto

title-xl
32 / 700디자인 시스템

title-l
28 / 700읽기 우선 화면

title-m
24 / 700오늘의 베스트셀러

title-s
20 / 700도서 상세 제목

title-xs
18 / 700섹션 헤더 라벨

text-xl
16 / 400한국어 본문 샘플 — 기본 텍스트

text-l
14 / 400보조 본문과 카드 설명 문장

text-m
12 / 400캡션 · 메타데이터 (floor 12px)

title 계열은 bold(700), text 계열은 regular(400), medium(500)은 강조 본문·레이블에 끼워 쓴다. 전 스케일 letter-spacing −0.01em, 12px 미만은 권장하지 않는다. 한글 글리프는 Noto Sans KR(프리뷰는 Pretendard)로 폴백한다.

Spacing base unit 4px

spacing-502px

spacing-1004px

spacing-2008px

spacing-30012px

spacing-40016px

spacing-60024px

spacing-80032px

spacing-100040px

spacing-50(2px)만 예외, 그 위는 4px 케이던스. 컴포넌트 간 간격에는 토큰 사용이 필수, 내부 스페이싱은 권장이다. 1300(52px) 위로는 4 배수를 유지하되 8·12px로 점프한다.

Rounded multiples of 4

4 · 4px 8 · 8px 12 · 12px 16 · 16px 24 · 24px round

버튼 8px, 카드·시트 12~24px, 칩·Capsule은 완전 원형(round). 기하적이되 모서리는 일관되게 부드럽고, 무겁거나 컬러풀한 보더는 쓰지 않는다.

Elevation & Depth 3 tokens · shadows are scarce

shadow-green-100 0 4px 10px · green 45% — 유일한 컬러 섀도, 하단 nav MY 버튼

shadow-gray-100 0 5px 12px · 검정 45% — MO/PC 탑버튼 · 상품상세 탭

shadow-gray-200 0 20px 44px · 검정 55% — 도서상세 상품 썸네일

KDS의 깊이 언어는 절제가 기본값이다 — 표면 분리는 대부분 1px border(gray-300) 헤어라인과 옅은 배경 워시가 담당하고, 그림자는 특정 부양 요소에만 쓴다. 다크에서는 그림자 알파를 키워 같은 위계를 유지한다.

03 Implementation

구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.

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"        // dark: +L blue · 잉크 텍스트

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="dark-derived"    // 공개 다크 팔레트 없음
  depth="divider-first"  // 다크는 알파만 키움
  motion="150 / 240ms"   // ease (0.4,0,0.2,1) · toast 4s