--- name: 리디 slug: ridi category: content last_updated: "2026-10-20" created_at: "2026-10-19" lang: ko logo: https://getdesign.kr/logos/ridi.png colors: ## neutral — 무채색 원시 (층 A --ridi-color-*) neutral-25: oklch(0.985 0.000 0.0) # #FAFAFA — 렌더 상세 정보 박스 바탕과 같은 값 neutral-50: oklch(0.970 0.000 0.0) # #F5F5F5 — 렌더 검색창·바로가기 원 바탕과 같은 값 neutral-100: oklch(0.925 0.000 0.0) # #E6E6E6 — 렌더 테두리와 같은 값 neutral-200: oklch(0.845 0.000 0.0) # #CCCCCC neutral-300: oklch(0.722 0.000 0.0) # #A5A5A5 — 렌더 보조 글자와 같은 값 neutral-400: oklch(0.573 0.000 0.0) # #787878 — 렌더 회색 보조 글자(홈 1440 최다)와 같은 값 neutral-500: oklch(0.510 0.000 0.0) # #666666 neutral-600: oklch(0.431 0.000 0.0) # #505050 neutral-700: oklch(0.337 0.000 0.0) # #373737 neutral-750: oklch(0.293 0.000 0.0) # #2C2C2C — 규칙 밖 단계 neutral-800: oklch(0.244 0.000 0.0) # #202020 neutral-850: oklch(0.222 0.000 0.0) # #1B1B1B — 규칙 밖 단계 neutral-900: oklch(0.191 0.000 0.0) # #141414 — 렌더 기본 글자와 같은 값 neutral-white: oklch(1.000 0.000 0.0) # #FFFFFF — red-25 와 같은 값 neutral-black: oklch(0.000 0.000 0.0) # #000000 ## coolgray — 푸른 기 회색 원시 coolgray-25: oklch(0.982 0.002 247.8) # #F8F9FA coolgray-50: oklch(0.966 0.003 228.8) # #F2F4F5 — 렌더 회차 행 구분선과 같은 값 coolgray-100: oklch(0.930 0.005 258.3) # #E6E8EB coolgray-200: oklch(0.871 0.007 247.9) # #D1D5D9 — 렌더 보기 버튼 테두리와 같은 값 coolgray-300: oklch(0.723 0.013 236.7) # #9EA7AD coolgray-400: oklch(0.625 0.016 244.8) # #808991 coolgray-500: oklch(0.526 0.016 241.2) # #636C73 coolgray-600: oklch(0.394 0.014 244.0) # #40474D coolgray-700: oklch(0.325 0.009 233.9) # #303538 coolgray-800: oklch(0.266 0.008 240.2) # #222629 coolgray-900: oklch(0.212 0.005 248.1) # #17191B ## blue — 원시 블루 램프 blue-50: oklch(0.964 0.019 243.0) # #E9F5FF blue-100: oklch(0.892 0.058 241.4) # #BAE1FF blue-200: oklch(0.840 0.087 242.4) # #98D2FF blue-300: oklch(0.774 0.125 243.5) # #69BEFF blue-400: oklch(0.735 0.147 245.2) # #4CB1FF # 화면·워드마크의 리디 블루는 #1E9EFF(emotion-blue)다. blue-500 은 렌더 8조합에서 0건이고 사이트 아이콘 PNG 에만 나온다 blue-500: oklch(0.683 0.176 248.4) # #1F9EFF — 토큰 원시값 · 대표색은 emotion-blue blue-600: oklch(0.637 0.163 248.1) # #1C90E8 blue-660: oklch(0.569 0.174 252.7) # #0077D9 — 규칙 밖 단계 blue-700: oklch(0.531 0.134 248.0) # #1670B5 blue-800: oklch(0.444 0.109 247.3) # #11578C blue-900: oklch(0.369 0.088 247.3) # #0D426B ## deepblue — 짙은 청색 원시 deepblue-25: oklch(0.970 0.010 267.4) # #F2F5FC deepblue-50: oklch(0.951 0.020 264.5) # #E8EFFD deepblue-100: oklch(0.846 0.066 267.0) # #B9CCF9 deepblue-200: oklch(0.773 0.100 265.8) # #97B4F6 deepblue-300: oklch(0.673 0.150 264.5) # #6792F2 deepblue-400: oklch(0.613 0.181 263.5) # #497DEF deepblue-500: oklch(0.531 0.225 262.9) # #1C5CEB deepblue-600: oklch(0.497 0.208 262.9) # #1954D6 deepblue-650: oklch(0.500 0.236 262.2) # #0050E6 — 규칙 밖 단계 deepblue-700: oklch(0.416 0.171 263.1) # #1441A7 deepblue-800: oklch(0.351 0.138 262.8) # #0F3381 deepblue-900: oklch(0.295 0.111 263.1) # #0C2763 ## darknavy — 남색 회색 원시 darknavy-25: oklch(0.973 0.002 247.8) # #F5F6F7 darknavy-50: oklch(0.943 0.003 264.5) # #EBECEE darknavy-100: oklch(0.818 0.010 252.8) # #BFC4CA darknavy-200: oklch(0.729 0.015 254.6) # #A1A8B1 darknavy-300: oklch(0.596 0.023 255.0) # #76808D darknavy-400: oklch(0.510 0.029 255.7) # #5B6777 darknavy-500: oklch(0.371 0.040 255.8) # #324155 — 렌더 1권무·무료 배지 바탕과 같은 값 darknavy-600: oklch(0.349 0.036 256.6) # #2E3B4D darknavy-700: oklch(0.298 0.029 256.8) # #242E3C darknavy-800: oklch(0.258 0.024 256.4) # #1C242F darknavy-900: oklch(0.220 0.020 258.3) # #151B24 ## red — 원시 레드 램프 red-25: oklch(1.000 0.000 0.0) # #FFFFFF — neutral-white 와 같은 값(상류 중복을 그대로 둔다) red-50: oklch(0.954 0.019 17.5) # #FCEBEB red-100: oklch(0.852 0.061 18.4) # #F4BFBF red-200: oklch(0.785 0.093 19.4) # #EFA1A1 red-300: oklch(0.697 0.142 21.4) # #E87676 red-400: oklch(0.647 0.170 23.1) # #E35B5B red-500: oklch(0.587 0.206 26.4) # #DC3232 — 렌더 별점·할인 배지와 같은 값 red-600: oklch(0.547 0.191 26.2) # #C82E2E red-700: oklch(0.458 0.156 25.9) # #9C2424 red-800: oklch(0.383 0.128 25.6) # #791C1C red-900: oklch(0.318 0.103 25.2) # #5C1515 ## yellow — 원시 옐로 램프 yellow-25: oklch(0.993 0.011 95.2) # #FFFDF5 yellow-50: oklch(0.987 0.021 95.3) # #FFFBEB yellow-100: oklch(0.957 0.065 94.0) # #FFF1C0 yellow-200: oklch(0.938 0.094 94.0) # #FFEAA1 yellow-300: oklch(0.913 0.131 94.0) # #FFE176 yellow-400: oklch(0.899 0.148 93.3) # #FFDB5C yellow-500: oklch(0.878 0.168 91.7) # #FFD233 yellow-600: oklch(0.818 0.156 91.7) # #E8BF2E yellow-700: oklch(0.680 0.128 91.9) # #B59524 yellow-800: oklch(0.566 0.106 92.7) # #8C741C yellow-900: oklch(0.467 0.086 92.3) # #6B5815 ## green — 원시 그린 램프 green-25: oklch(0.979 0.009 161.4) # #F3FAF6 green-50: oklch(0.970 0.018 161.1) # #EBF9F1 green-100: oklch(0.905 0.053 160.6) # #C2EBD4 green-200: oklch(0.861 0.080 159.4) # #A4E2BF green-300: oklch(0.800 0.113 158.2) # #7AD4A2 green-400: oklch(0.766 0.133 156.7) # #61CC90 green-500: oklch(0.715 0.158 154.2) # #39BF74 green-600: oklch(0.668 0.147 154.4) # #34AE6A green-700: oklch(0.558 0.122 154.3) # #288852 green-800: oklch(0.464 0.098 154.9) # #1F6940 green-900: oklch(0.386 0.079 155.4) # #185031 ## purple — 원시 퍼플 램프 purple-25: oklch(0.979 0.008 293.9) # #F8F7FD purple-50: oklch(0.957 0.017 293.1) # #F1EFFC purple-100: oklch(0.865 0.058 293.9) # #D4CCF6 purple-200: oklch(0.798 0.088 293.2) # #BFB3F1 purple-300: oklch(0.705 0.131 291.2) # #A190EB purple-400: oklch(0.650 0.157 289.8) # #8F7BE7 purple-500: oklch(0.566 0.196 286.8) # #735AE1 purple-600: oklch(0.529 0.182 287.0) # #6952CD purple-700: oklch(0.445 0.149 287.3) # #5240A0 purple-800: oklch(0.374 0.121 287.1) # #3F327C purple-900: oklch(0.314 0.097 287.5) # #30265F ## orange — 원시 오렌지 램프 orange-25: oklch(0.983 0.010 58.2) # #FFF8F3 orange-50: oklch(0.966 0.021 60.8) # #FFF1E6 orange-100: oklch(0.892 0.066 60.1) # #FDD2B0 orange-200: oklch(0.844 0.099 58.5) # #FDBC8A orange-300: oklch(0.781 0.143 56.7) # #FC9E54 orange-400: oklch(0.746 0.166 54.0) # #FB8B33 orange-500: oklch(0.699 0.194 46.9) # #FA6E00 orange-600: oklch(0.652 0.180 47.1) # #E46400 orange-700: oklch(0.544 0.149 47.8) # #B24E00 orange-800: oklch(0.455 0.122 49.3) # #8A3D00 orange-900: oklch(0.376 0.099 50.4) # #692E00 ## mint — 원시 민트 램프 mint-25: oklch(0.978 0.010 197.0) # #F1FAFA mint-50: oklch(0.973 0.018 196.9) # #E9FAFA mint-100: oklch(0.918 0.056 196.2) # #B9F0F0 mint-200: oklch(0.880 0.078 195.8) # #98E8E8 mint-300: oklch(0.833 0.106 195.3) # #68DEDE mint-400: oklch(0.806 0.118 195.1) # #4BD7D7 mint-500: oklch(0.770 0.127 194.8) # #1ECDCD — 렌더 UP 배지 바탕과 같은 값 mint-600: oklch(0.719 0.119 194.8) # #1BBBBB mint-700: oklch(0.599 0.098 194.8) # #159292 mint-800: oklch(0.499 0.081 194.9) # #117171 mint-900: oklch(0.412 0.066 194.9) # #0D5656 ## gold — 원시 골드 램프 gold-25: oklch(0.982 0.004 91.4) # #FAF9F6 gold-50: oklch(0.978 0.009 100.0) # #F9F8F1 gold-100: oklch(0.930 0.026 94.7) # #EDE8D5 gold-200: oklch(0.896 0.039 95.9) # #E4DDC0 gold-300: oklch(0.848 0.058 97.6) # #D7CEA3 gold-400: oklch(0.820 0.070 97.6) # #D0C591 gold-500: oklch(0.773 0.085 97.3) # #C4B676 gold-600: oklch(0.722 0.080 98.1) # #B2A66B gold-700: oklch(0.601 0.064 97.2) # #8B8154 gold-800: oklch(0.502 0.052 96.8) # #6C6441 gold-900: oklch(0.415 0.041 96.7) # #524C32 ## emotion 테마 (층 B) — 화면이 실제로 칠하는 이름 붙은 값 primary: "{colors.emotion-blue}" emotion-blue: oklch(0.683 0.176 248.3) # #1E9EFF — 층 B lightTheme blue · 공개 글의 최종 리디 블루 · 현재 탭·선택 알약·구매 버튼·워드마크 dark-emotion-blue: oklch(0.649 0.156 244.3) # #1496E6 — 층 B darkTheme blue emotion-grey200: oklch(0.955 0.000 0.0) # #F0F0F0 — 층 B grey200 · 홈 구분선·테두리 · 층 A 에 없는 값 emotion-grey550: oklch(0.450 0.000 0.0) # #555555 — 층 B grey550 · 상세 보조 글자 · darkTheme 에 키 없음 emotion-dim-thumb: oklch(0.000 0.000 0 / 0.04) # rgba(0, 0, 0, 0.04) — 층 B dimThumb · 표지 덧칠·외곽선 · 다크도 같은 값 ## 시맨틱 background·surface (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인 background-neutral-default: "{colors.neutral-white}" dark-background-neutral-default: "{colors.neutral-900}" background-neutral-subtle: "{colors.neutral-50}" dark-background-neutral-subtle: "{colors.neutral-900}" surface-elevated: "{colors.neutral-white}" dark-surface-elevated: "{colors.neutral-800}" surface-disabled: "{colors.neutral-50}" # 다크 값은 원시 참조가 아닌 리터럴이라 본문 표에만 # surface-thumbnail-blur 는 라이트·다크 모두 color-mix 라 본문 표에만 둔다 surface-selected-blue: "{colors.blue-500}" dark-surface-selected-blue: "{colors.blue-600}" surface-selected-white: "{colors.neutral-white}" dark-surface-selected-white: "{colors.neutral-600}" surface-selected-black: "{colors.neutral-900}" dark-surface-selected-black: "{colors.neutral-50}" surface-danger-50: "{colors.red-50}" dark-surface-danger-50: "{colors.red-800}" surface-danger-300: "{colors.red-300}" dark-surface-danger-300: "{colors.red-700}" surface-danger-400: "{colors.red-400}" dark-surface-danger-400: "{colors.red-500}" surface-danger-500: "{colors.red-500}" dark-surface-danger-500: "{colors.red-600}" surface-danger-600: "{colors.red-600}" dark-surface-danger-600: "{colors.red-500}" surface-warning-50: "{colors.orange-50}" dark-surface-warning-50: "{colors.orange-800}" surface-warning-300: "{colors.orange-300}" dark-surface-warning-300: "{colors.orange-700}" surface-warning-500: "{colors.orange-500}" dark-surface-warning-500: "{colors.orange-600}" surface-success-50: "{colors.green-50}" dark-surface-success-50: "{colors.green-800}" surface-success-300: "{colors.green-300}" dark-surface-success-300: "{colors.green-700}" surface-success-500: "{colors.green-500}" dark-surface-success-500: "{colors.green-600}" ## 시맨틱 surface-general (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인 surface-general-white-default: "{colors.neutral-white}" dark-surface-general-white-default: "{colors.neutral-900}" surface-general-white-subtle: "{colors.neutral-white}" dark-surface-general-white-subtle: "{colors.neutral-800}" surface-general-white-static: "{colors.neutral-white}" dark-surface-general-white-static: "{colors.neutral-white}" surface-general-gray-25: "{colors.neutral-25}" dark-surface-general-gray-25: "{colors.neutral-850}" surface-general-gray-50: "{colors.neutral-50}" dark-surface-general-gray-50: "{colors.neutral-800}" surface-general-gray-100: "{colors.neutral-100}" dark-surface-general-gray-100: "{colors.neutral-700}" surface-general-gray-800: "{colors.neutral-800}" dark-surface-general-gray-800: "{colors.neutral-50}" surface-general-gray-900: "{colors.neutral-900}" dark-surface-general-gray-900: "{colors.neutral-white}" surface-general-black-static: "{colors.neutral-black}" dark-surface-general-black-static: "{colors.neutral-black}" surface-general-blue-50: "{colors.blue-50}" dark-surface-general-blue-50: "{colors.blue-800}" surface-general-blue-100: "{colors.blue-100}" dark-surface-general-blue-100: "{colors.blue-700}" surface-general-blue-300: "{colors.blue-300}" dark-surface-general-blue-300: "{colors.blue-700}" surface-general-blue-500: "{colors.blue-500}" dark-surface-general-blue-500: "{colors.blue-600}" surface-general-blue-600: "{colors.blue-600}" # 라이트 600 ↔ 다크 500 맞바꿈 dark-surface-general-blue-600: "{colors.blue-500}" surface-general-deepblue-50: "{colors.deepblue-50}" dark-surface-general-deepblue-50: "{colors.deepblue-800}" surface-general-deepblue-300: "{colors.deepblue-300}" dark-surface-general-deepblue-300: "{colors.deepblue-700}" surface-general-deepblue-500: "{colors.deepblue-500}" dark-surface-general-deepblue-500: "{colors.deepblue-600}" surface-general-darknavy-50: "{colors.darknavy-50}" dark-surface-general-darknavy-50: "{colors.darknavy-800}" surface-general-darknavy-300: "{colors.darknavy-300}" dark-surface-general-darknavy-300: "{colors.darknavy-700}" surface-general-darknavy-500: "{colors.darknavy-500}" dark-surface-general-darknavy-500: "{colors.darknavy-600}" surface-general-red-50: "{colors.red-50}" dark-surface-general-red-50: "{colors.red-800}" surface-general-red-300: "{colors.red-300}" dark-surface-general-red-300: "{colors.red-700}" surface-general-red-500: "{colors.red-500}" dark-surface-general-red-500: "{colors.red-600}" surface-general-yellow-50: "{colors.yellow-50}" dark-surface-general-yellow-50: "{colors.yellow-800}" surface-general-yellow-300: "{colors.yellow-300}" dark-surface-general-yellow-300: "{colors.yellow-700}" surface-general-yellow-500: "{colors.yellow-500}" dark-surface-general-yellow-500: "{colors.yellow-600}" surface-general-green-50: "{colors.green-50}" dark-surface-general-green-50: "{colors.green-800}" surface-general-green-300: "{colors.green-300}" dark-surface-general-green-300: "{colors.green-700}" surface-general-green-500: "{colors.green-500}" dark-surface-general-green-500: "{colors.green-600}" surface-general-purple-50: "{colors.purple-50}" dark-surface-general-purple-50: "{colors.purple-800}" surface-general-purple-300: "{colors.purple-300}" dark-surface-general-purple-300: "{colors.purple-700}" surface-general-purple-500: "{colors.purple-500}" dark-surface-general-purple-500: "{colors.purple-600}" surface-general-orange-50: "{colors.orange-50}" dark-surface-general-orange-50: "{colors.orange-800}" surface-general-orange-300: "{colors.orange-300}" dark-surface-general-orange-300: "{colors.orange-700}" surface-general-orange-500: "{colors.orange-500}" dark-surface-general-orange-500: "{colors.orange-600}" surface-general-mint-50: "{colors.mint-50}" dark-surface-general-mint-50: "{colors.mint-800}" surface-general-mint-300: "{colors.mint-300}" dark-surface-general-mint-300: "{colors.mint-700}" surface-general-mint-500: "{colors.mint-500}" dark-surface-general-mint-500: "{colors.mint-600}" surface-general-gold-50: "{colors.gold-50}" dark-surface-general-gold-50: "{colors.gold-800}" surface-general-gold-300: "{colors.gold-300}" dark-surface-general-gold-300: "{colors.gold-700}" surface-general-gold-500: "{colors.gold-500}" dark-surface-general-gold-500: "{colors.gold-600}" ## 시맨틱 border (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인 border-default: "{colors.neutral-100}" dark-border-default: "{colors.neutral-700}" border-inverse: "{colors.neutral-700}" dark-border-inverse: "{colors.neutral-100}" border-strong: "{colors.neutral-200}" dark-border-strong: "{colors.neutral-600}" border-disabled: "{colors.neutral-50}" dark-border-disabled: "{colors.neutral-700}" border-divider-default: "{colors.neutral-50}" dark-border-divider-default: "{colors.neutral-750}" border-divider-strong: "{colors.neutral-100}" dark-border-divider-strong: "{colors.neutral-600}" border-danger: "{colors.red-500}" dark-border-danger: "{colors.red-600}" border-warning: "{colors.orange-500}" dark-border-warning: "{colors.orange-600}" border-success: "{colors.green-500}" dark-border-success: "{colors.green-600}" border-information: "{colors.blue-500}" dark-border-information: "{colors.blue-600}" border-selected-blue: "{colors.blue-500}" dark-border-selected-blue: "{colors.blue-600}" border-selected-white: "{colors.neutral-white}" dark-border-selected-white: "{colors.neutral-600}" border-selected-black: "{colors.neutral-900}" dark-border-selected-black: "{colors.neutral-50}" ## 시맨틱 text (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인 text-primary: "{colors.neutral-900}" dark-text-primary: "{colors.neutral-50}" text-primary-static: "{colors.neutral-900}" dark-text-primary-static: "{colors.neutral-900}" text-inverse: "{colors.neutral-50}" dark-text-inverse: "{colors.neutral-900}" text-inverse-static: "{colors.neutral-50}" dark-text-inverse-static: "{colors.neutral-50}" text-secondary: "{colors.neutral-400}" dark-text-secondary: "{colors.neutral-500}" text-tertiary: "{colors.neutral-300}" dark-text-tertiary: "{colors.neutral-600}" text-disabled: "{colors.neutral-200}" dark-text-disabled: "{colors.neutral-700}" text-rating: "{colors.red-500}" dark-text-rating: "{colors.red-600}" text-danger: "{colors.red-500}" dark-text-danger: "{colors.red-600}" text-warning: "{colors.orange-500}" dark-text-warning: "{colors.orange-600}" text-success: "{colors.green-500}" dark-text-success: "{colors.green-600}" text-information: "{colors.blue-500}" dark-text-information: "{colors.blue-600}" text-general-deepblue-650: "{colors.deepblue-650}" dark-text-general-deepblue-650: "{colors.deepblue-300}" text-general-blue-660: "{colors.blue-660}" dark-text-general-blue-660: "{colors.blue-300}" text-general-red-400: "{colors.red-400}" dark-text-general-red-400: "{colors.red-500}" text-selected-blue: "{colors.blue-500}" dark-text-selected-blue: "{colors.blue-600}" text-selected-white: "{colors.neutral-50}" dark-text-selected-white: "{colors.neutral-600}" text-selected-black: "{colors.neutral-900}" dark-text-selected-black: "{colors.neutral-50}" ## 시맨틱 icon (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인 icon-primary: "{colors.neutral-900}" dark-icon-primary: "{colors.neutral-50}" icon-inverse: "{colors.neutral-50}" dark-icon-inverse: "{colors.neutral-900}" icon-inverse-static: "{colors.neutral-50}" dark-icon-inverse-static: "{colors.neutral-50}" icon-secondary: "{colors.neutral-400}" dark-icon-secondary: "{colors.neutral-500}" icon-tertiary: "{colors.neutral-200}" dark-icon-tertiary: "{colors.neutral-700}" # icon-disabled 는 라이트·다크 모두 color-mix 라 본문 표에만 둔다 icon-rating: "{colors.red-500}" dark-icon-rating: "{colors.red-600}" icon-danger: "{colors.red-500}" dark-icon-danger: "{colors.red-600}" icon-warning: "{colors.orange-500}" dark-icon-warning: "{colors.orange-600}" icon-success: "{colors.green-500}" dark-icon-success: "{colors.green-600}" icon-information: "{colors.blue-500}" dark-icon-information: "{colors.blue-600}" icon-selected-blue: "{colors.blue-500}" dark-icon-selected-blue: "{colors.blue-600}" icon-selected-white: "{colors.neutral-white}" dark-icon-selected-white: "{colors.neutral-600}" icon-selected-black: "{colors.neutral-900}" dark-icon-selected-black: "{colors.neutral-50}" icon-general-white-static: "{colors.neutral-white}" dark-icon-general-white-static: "{colors.neutral-white}" icon-general-general-static: "{colors.neutral-black}" # 상류 이름 그대로 dark-icon-general-general-static: "{colors.neutral-black}" icon-general-gray-50: "{colors.neutral-50}" dark-icon-general-gray-50: "{colors.neutral-800}" icon-general-gray-300: "{colors.neutral-300}" dark-icon-general-gray-300: "{colors.neutral-700}" icon-general-gray-500: "{colors.neutral-500}" dark-icon-general-gray-500: "{colors.neutral-600}" icon-general-gray-300-static: "{colors.neutral-300}" dark-icon-general-gray-300-static: "{colors.neutral-300}" icon-general-blue-500: "{colors.blue-500}" dark-icon-general-blue-500: "{colors.blue-600}" icon-general-blue-600: "{colors.blue-600}" # 라이트 600 ↔ 다크 500 맞바꿈 dark-icon-general-blue-600: "{colors.blue-500}" icon-general-deepblue-500: "{colors.deepblue-500}" dark-icon-general-deepblue-500: "{colors.deepblue-600}" icon-general-darknavy-500: "{colors.darknavy-500}" dark-icon-general-darknavy-500: "{colors.darknavy-600}" icon-general-red-500: "{colors.red-500}" dark-icon-general-red-500: "{colors.red-600}" icon-general-yellow-500: "{colors.yellow-500}" dark-icon-general-yellow-500: "{colors.yellow-600}" icon-general-green-500: "{colors.green-500}" dark-icon-general-green-500: "{colors.green-600}" icon-general-purple-500: "{colors.purple-500}" dark-icon-general-purple-500: "{colors.purple-600}" icon-general-orange-500: "{colors.orange-500}" dark-icon-general-orange-500: "{colors.orange-600}" icon-general-mint-500: "{colors.mint-500}" dark-icon-general-mint-500: "{colors.mint-600}" icon-general-gold-500: "{colors.gold-500}" dark-icon-general-gold-500: "{colors.gold-600}" typography: body-LSemibold: # --text-body-LSemibold fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: -0.16px body-mBold: # --text-body-mBold fontSize: 15px fontWeight: 700 lineHeight: 22px letterSpacing: -0.15px body-mSemibold: # --text-body-mSemibold fontSize: 15px fontWeight: 600 lineHeight: 22px letterSpacing: -0.15px body-mMedium: # --text-body-mMedium fontSize: 15px fontWeight: 500 lineHeight: 22px letterSpacing: -0.15px body-sSemibold: # --text-body-sSemibold fontSize: 14px fontWeight: 600 lineHeight: 22px letterSpacing: -0.14px body-sRegular: # --text-body-sRegular fontSize: 14px fontWeight: 400 lineHeight: 22px letterSpacing: -0.14px body-xsSemibold: # --text-body-xsSemibold fontSize: 13px fontWeight: 600 lineHeight: 20px letterSpacing: -0.13px body-xsRegular: # --text-body-xsRegular fontSize: 13px fontWeight: 400 lineHeight: 20px letterSpacing: -0.13px caption-mMedium: # --text-caption-mMedium fontSize: 12px fontWeight: 500 lineHeight: 18px letterSpacing: -0.12px scale-01: # fontSize-01 · letterSpacing-01 fontSize: 7px letterSpacing: -0.07px scale-02: # fontSize-02 · letterSpacing-02 fontSize: 8px letterSpacing: -0.08px scale-03: # fontSize-03 · letterSpacing-03 fontSize: 9px letterSpacing: -0.09px scale-04: # fontSize-04 · letterSpacing-04 fontSize: 11px letterSpacing: -0.11px scale-05: # fontSize-05 · letterSpacing-05 fontSize: 12px letterSpacing: -0.12px scale-06: # fontSize-06 · letterSpacing-06 fontSize: 13px letterSpacing: -0.13px scale-07: # fontSize-07 · letterSpacing-07 fontSize: 14px letterSpacing: -0.14px scale-08: # fontSize-08 · letterSpacing-08 fontSize: 15px letterSpacing: -0.15px scale-09: # fontSize-09 · letterSpacing-09 fontSize: 16px letterSpacing: -0.16px scale-10: # fontSize-10 · letterSpacing-10 fontSize: 18px letterSpacing: -0.18px scale-11: # fontSize-11 · letterSpacing-11 fontSize: 20px letterSpacing: -0.2px scale-12: # fontSize-12 · letterSpacing-12 fontSize: 22px letterSpacing: -0.22px scale-13: # fontSize-13 · letterSpacing-13 fontSize: 24px letterSpacing: -0.24px scale-14: # fontSize-14 · letterSpacing-14 fontSize: 26px letterSpacing: -0.26px scale-15: # fontSize-15 · letterSpacing-15 fontSize: 34px letterSpacing: -0.34px scale-16: # fontSize-16 · letterSpacing-16 fontSize: 42px letterSpacing: -0.42px fonts: font-sans: '"Pretendard Variable", "Pretendard Std Variable", "Pretendard JP Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif' font-sans-detail: '"Pretendard Variable", "Pretendard Std Variable", "Pretendard JP Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif' spacing: ds-50: 2px ds-100: 4px ds-150: 6px ds-200: 8px ds-250: 10px ds-300: 12px ds-400: 16px ds-500: 20px ds-600: 24px ds-700: 28px ds-750: 30px ds-900: 36px ds-1000: 40px rounded: radius-50: 2px radius-100: 4px radius-full: 9999px elevation: carousel-arrow: 2px 4px 8px 0 oklch(0.000 0.000 0.0 / 0.06) # 캐러셀 화살표 원 · 컴포넌트 코드의 값(이름 붙은 그림자 토큰 아님) floating-box: 5px 5px 10px 0 oklch(0.000 0.000 0.0 / 0.08) # 떠 있는 상자(1440 만) · 컴포넌트 코드의 값(이름 붙은 그림자 토큰 아님) legacy-button: 0 1px 1px 0 oklch(0.871 0.007 247.9 / 0.3) # 상세 rui_ 버튼(옛 층) · 레거시 CSS 의 값 components: gnb-tab: textColor: "{colors.neutral-900}" gnb-tab-current: textColor: "{colors.emotion-blue}" genre-pill: textColor: "{colors.neutral-900}" rounded: 99px genre-pill-selected: backgroundColor: "{colors.emotion-blue}" textColor: "{colors.neutral-white}" rounded: 99px hero-card: rounded: 20px width: 364px height: 414px book-card: rounded: "{rounded.radius-100}" width: 180px cover-badge: textColor: "{colors.neutral-white}" height: 23px purchase-button: backgroundColor: "{colors.emotion-blue}" textColor: "{colors.neutral-white}" rounded: 6px favorite-pill: backgroundColor: "{colors.neutral-white}" textColor: "{colors.emotion-blue}" rounded: 30px info-chip: rounded: "{rounded.radius-50}" width: 40px height: 18px carousel-arrow: backgroundColor: "{colors.neutral-white}" width: 40px height: 40px --- # 리디 — design.md ## Brand & Style 리디는 흰 바탕과 차가운 무채색 회색 위에 하늘색 리디 블루 `oklch(0.683 0.176 248.3)` 한 점으로 현재 탭·선택 알약·구매 버튼을 표시하고, 표지·카드는 4px 모서리로 정돈해 표지와 일러스트가 화면을 채우게 둔 웹툰·웹소설·전자책 콘텐츠 플랫폼이다 [src:5][src:3][src:17]. 리디(RIDI)는 리디주식회사가 운영하는 콘텐츠 플랫폼이고 웹 서비스는 ridibooks.com 이다. 2022년 리뉴얼에서 서비스명을 "리디북스"에서 "리디"로 바꾸고 카테고리를 웹툰·웹소설·도서·셀렉트로 나눴으며, BI 콘셉트 "스페이스"와 새 심볼 'R' 을 내놓으면서 "리디의 상징인 블루 컬러 등 디자인 요소들을 재정의" 했다고 적는다 [src:4]. 브랜드 에센스는 "모두의 취향(For All Tastes)"이고, 웹툰·웹소설 등은 리디의 서브 브랜드, 옛 리디북스는 전자책 카테고리의 서브 브랜드가 됐다 [src:6]. App Store 앱 이름은 "만화 웹툰 웹소설 도서는 리디"이고 판매자는 RIDI Corporation 이다 [src:12]. **블루 한 색에 내력이 있다.** 리뉴얼 첫 테스트에서 고른 더 짙은 블루가 다크 모드의 검정 배경과 대비가 심해 "눈의 피로도를 주어" 다시 골랐고, 최종 리디 블루가 위 값이다 [src:5]. 선정 목표는 서비스 방향이 드러나는 블루, 다양한 환경에서 눈이 편한 블루, "다크 모드 대응이 가능한 장기적으로 건강한 컬러 시스템" 세 가지였다 [src:5]. 그래서 이 블루는 강조의 크기가 아니라 빈도로 일한다 — 화면 대부분은 짙은 회색 글자 `{colors.neutral-900}` 과 회색 보조 글자 `{colors.neutral-400}` 이 차지하고, 블루는 지금 어디에 있는지·무엇을 골랐는지·어디서 사는지를 알리는 자리에만 나온다(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음). 밀도는 높다. 데스크톱은 1170px 컨테이너 [src:20] 안에 히어로 카드 셋을 동시에 놓고 [src:16], 그 아래 표지 여섯 장과 랭킹 세 열을 촘촘히 깐다(≈ 캡처에서 읽음 · 공개 출처 없음). 모바일은 같은 내용을 장르 알약·바로가기·표지의 가로 스크롤 띠로 접는다(375 렌더 관찰 ≈, 캡처에서 읽음 · 공개 출처 없음). 면(카드)으로는 히어로 카드 하나만 20px 로 둥글게 튀고 [src:16], 표지·카드는 4px 다 [src:17]. 알약(99px · 30px)과 원형 조작 표지(50% · 29px)는 따로다 [src:15][src:10][src:14]. **로고.** 심볼 'R' 은 리디가 처음 만든 심볼로, 이니셜 방식에 퍼스펙티브로 "무한한 공간"을, 비대칭 조형으로 "재미있고 즐거운" 정서를 담고, 워드마크는 "둥글고 볼드한 형태를 각지고 정돈된 형태로 개선"했다 [src:7]. 카탈로그 로고는 리디 웹이 게시한 512px 사이트 아이콘(흰 정사각 위 R 심볼)을 원본 그대로 쓴다 [src:11]. 그 아이콘의 주색은 토큰 `{colors.blue-500}` 과 같은 값이고, 아이콘 안에 화면의 리디 블루(`{colors.emotion-blue}`) 값 픽셀은 0개다 [src:11]. App Store 앱 아이콘(블루 전면 위 흰 글리프)은 대표색과 맞지만 심볼을 발행한 브랜드라 쓰지 않았다 [src:13][src:7]. 헤더 `RIDI` 워드마크는 SVG 이미지이고 채움이 `{colors.emotion-blue}` 값이다 [src:1][src:37]. 회사 사이트 워드마크 SVG 도 같은 채움이다 [src:33]. 로고 이용 허락·가이드 문구는 찾지 못했다 [src:7]. **범위.** 이 항목은 ridibooks.com 웹 하나 — 만화 홈 · 웹툰 홈 · 웹툰 상세 · 만화 e북 상세 — 를 다룬다. 앱 전용 화면, 리디페이퍼, 다른 서비스는 넣지 않는다. 공개된 디자인 시스템 이름이 없어 `design_system_name` 을 두지 않는다. 옛 디자인 시스템 저장소는 MIT 라이선스로 아카이브돼 있고 [src:31], npm `@ridi/colors` 0.7.1 은 111색을 싣고 [src:30], 옛 문서 사이트는 대표색을 "Dodger Blue" 로 불렀다 [src:34]. 이것들은 대표색 근거로 쓰지 않는다. **목소리.** 서비스 문구는 명사형·짧은 구절이다. 섹션 제목은 `지금 많이 읽고 있는 만화` · `오늘, 리디의 발견` 같은 관형형·명사구이고 [src:1], 버튼은 `첫화보기` · `전권 대여` · `전권 할인 소장` 처럼 서술형 종결어미 없이 끝난다 [src:9][src:10]. 안내는 `만화 감상을 더 몰입감 있게!`(≈ 캡처 · 공개 출처 없음) 같은 평서 감탄이다. 시스템 안내는 `혜택 기간 : …` 같은 건조한 명사 나열이고 [src:10], 작품관·이벤트 이름은 대괄호로 묶는다(`[RIDI ONLY 작품관]`) [src:9]. 웹툰 홈 섹션은 `웹툰 실시간 랭킹` · `요일별 웹툰` · `기다리면 무료로 시작해!` 다 [src:8]. ## Colors 리디의 색은 두 층으로 나뉜다. 층 A 는 홈이 불러오는 `--ridi-*` 디자인 토큰 CSS 로, 원시 137색과 라이트/다크 시맨틱 122쌍이 이름 붙어 발행돼 있고, 그 Tailwind 유틸 클래스(`.bg-surface-elevated` 등 23개)도 같은 파일에 정의돼 있다 [src:2]. 그러나 수집한 HTML 5개 · JS 71개에서 이 이름과 유틸 클래스를 쓰는 곳은 0건이고(≈ 보드 판독 · 공개 출처 없음), 화면이 실제로 칠하는 것은 층 B — emotion 테마 객체와 컴포넌트 CSS 의 리터럴 값 — 이다 [src:3]. 층 B 의 값 대부분이 층 A 원시와 같을 뿐, 토큰을 거쳐 칠해진 것은 아니다. 다크도 마찬가지로 단서가 붙는다. 층 A 는 다크 짝을 발행하지만, 웹 브라우저에서 다크가 켜지는 경로는 확인하지 못했다 — 테마 선택 코드는 앱 안에서 앱이 다크를 알릴 때, `/bridge/books/` 경로, `/inapp/account/reauth` + dark 일 때만 다크를 고르고 그 밖은 라이트이며 [src:19], 렌더 8조합(4페이지 × 2폭)은 모두 `data-theme="light"` 였고 `prefers-color-scheme` 은 수집 파일에 0건이었다(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음). 그래서 frontmatter 는 층 A 를 이름 그대로 싣고(키는 `--ridi-color-` 를 뗀 것), 층 B 에서 층 A 에 없는 이름 붙은 값 넷과 다크 블루 하나를 `emotion-` 접두 그룹으로 따로 싣는다. 층 A 를 쓰는 소비자는 이것이 **발행됐지만** [src:2] **화면에서 쓰이지 않은 이름**(≈ 보드 판독 · 공개 출처 없음)이라는 점을 전제로 해야 한다. ### 대표색 — emotion-blue, blue-500 이 아니다 `primary` 는 `{colors.emotion-blue}` 를 가리킨다. 공개 글이 최종 리디 블루로 밝힌 값이 이것이고 [src:5], 같은 값이 emotion 테마의 `blue` 라는 이름 붙은 발행값이다 [src:3]. 층 A 의 `{colors.blue-500}` 은 이와 R 채널 1 만 다른 값으로(OKLCH 로는 `248.4` 대 `248.3` 의 색상각 차이뿐이라 기계 대조로는 구분되지 않는다) [src:2], 렌더 8조합 어디에도 나오지 않고(≈ 보드 판독 · 공개 출처 없음) 사이트 아이콘 PNG 에 나온다 [src:11]. 토큰이 왜 이 값인지(의도인지 반올림인지)는 확인되지 않았다. **브랜드 블루 역할은 상류 정의 그대로 둔다.** 층 A 시맨틱 `surface-selected-blue` · `text-information` 등은 `{colors.blue-500}` / `{colors.blue-600}` 을 가리키고 [src:2], 이 항목은 그것을 `emotion-blue` 로 다시 가리키지 않는다. 다크에서 화면이 쓰는 블루는 emotion 쪽 짝 `{colors.dark-emotion-blue}` 다 [src:3]. ### emotion 층 그룹 | 키 | 층 B 키 | 화면 자리 | | --- | --- | --- | | `{colors.emotion-blue}` | `blue` | 현재 탭 글자 · 선택 알약 · 구매 버튼 · `+ 관심` · `선택 대여` · 가격 글자 · 워드마크 — 값은 [src:3][src:5], 쓰이는 자리는 렌더 관찰(≈ 보드 판독 · 공개 출처 없음) | | `{colors.dark-emotion-blue}` | `blue`(darkTheme) | 다크 테마의 같은 자리 [src:3] | | `{colors.emotion-grey200}` | `grey200` | 홈 구분선·테두리 — 컴포넌트 소스는 `1px solid` 리터럴로 같은 값을 쓴다 [src:3][src:14] | | `{colors.emotion-grey550}` | `grey550` | 상세 보조 글자(평가 수 · 출판사 · 총 화수). darkTheme 에는 이 키가 없다 [src:3] | | `{colors.emotion-dim-thumb}` | `dimThumb` | 표지 위 덧칠·외곽선, 다크도 같은 값 [src:3][src:17] | `{colors.emotion-grey200}` 은 층 A 에 없는 값이고, 가장 가까운 원시 `{colors.neutral-50}` · `{colors.coolgray-50}` · `{colors.darknavy-50}` 셋이 같은 거리로 동률이다 [src:2][src:3]. emotion 테마의 다른 키 — `grey600` · `fillPrimary` · `fillCta`(라이트 모두 `{colors.neutral-900}` 값), `bgBase`(라이트 `{colors.neutral-white}` 값), `darkNavy` `oklch(0.315 0.030 258.3)`, 375 히어로 쪽 번호 배경 `fillCarouselNum` `oklch(0.191 0.000 0.0 / 0.2)`, 다이얼로그 배경막 `dimDialog` `oklch(0.000 0.000 0.0 / 0.7)` — 는 토큰 맵 밖에 둔다 [src:3]. **층 사이에서 값이 갈린다.** `1권무`·`무료` 배지의 렌더 바탕(≈, 보드 판독 · 공개 출처 없음)은 층 A `{colors.darknavy-500}` 과 같은 값이고, emotion `darkNavy` 와는 다르다 [src:2][src:3]. emotion 다크 값도 층 A 다크와 같지 않다 — emotion `bgBase` 다크는 층 A `background-neutral-default` 다크(`{colors.neutral-900}`)와 다른 값이다 [src:3][src:2]. 그래서 다크에서 emotion 층에서 가져오는 것은 브랜드 블루 `{colors.dark-emotion-blue}` 하나이고, 바탕·글자·테두리는 층 A 다크 시맨틱으로 칠한다. 블루 밖의 emotion 다크 값(`bgBase` 다크 등)을 층 A 다크 시맨틱과 섞으면 한 화면 안에서 바탕이 두 가지로 갈린다. ### 원시 팔레트 137 12계열 — neutral 15 · coolgray 11 · blue 11 · deepblue 12 · darknavy 11 · red 11 · yellow 11 · green 11 · purple 11 · orange 11 · mint 11 · gold 11 — 이고, 알파를 가진 원시는 없다 [src:2]. 규칙 밖 단계가 넷 있다(`{colors.blue-660}` · `{colors.deepblue-650}` · `{colors.neutral-750}` · `{colors.neutral-850}`) [src:2]. 같은 값을 가진 원시 쌍은 `{colors.neutral-white}` = `{colors.red-25}` 하나뿐이고, 상류 중복을 그대로 두었다 [src:2]. **원시는 테마를 타지 않는다** — 다크 정의는 원시 값을 바꾸지 않고 시맨틱이 가리키는 원시만 바꾼다 [src:2]. 그래서 아래 다크 짝은 `dark-` 팔레트가 아니라 접두 없는 원시를 가리킨다. 렌더에서 원시와 같은 값이 나온 자리는 다음과 같다(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음 — 값 일치일 뿐 토큰 경유가 아니다): `{colors.neutral-400}` 보조 글자(홈 1440 최다) · `{colors.neutral-900}` 기본 글자 · `{colors.red-500}` 별점·할인 배지 · `{colors.neutral-300}` 보조 글자 · `{colors.neutral-50}` 검색창·바로가기 원 · `{colors.darknavy-500}` 배지 · `{colors.mint-500}` `UP` 배지 · `{colors.neutral-100}` 테두리 · `{colors.neutral-25}` 상세 정보 박스 · `{colors.coolgray-200}` `보기` 버튼 테두리 · `{colors.coolgray-50}` 회차 행 구분선. 층 A·emotion 어디에도 없는 렌더 색도 있다(≈, 보드 판독 · 공개 출처 없음): 비선택 회차 탭 `oklch(0.967 0.000 0.0)`, 체크박스 테두리 `oklch(0.795 0.009 264.5)`, 정보 칩의 바탕·글자 여섯 색(`연재` 글자 · `이벤트` 바탕·글자 · `리다무` 바탕 · `추천` 바탕·글자 — `## Components` 의 `info-chip`. `독점` 칩 바탕·글자는 `{colors.neutral-100}` / `{colors.emotion-grey550}` 값이라 여기 들지 않는다), 히어로 칩의 반투명 흰 바탕과 반투명 검정 글자, 맨 위로 버튼의 반투명 흰 바탕. 빈도 1의 배너 배경 40여 개는 작품별 배너 색이라 토큰이 아니다. 상세 화면 코드에는 배경 상수 `oklch(0.628 0.191 27.4)` 가 있고 다크면 테마의 빨강으로 바뀐다 [src:22]. 메타 `msapplication-TileColor` 는 목록 HTML 에서 `{colors.emotion-blue}` 값, 상세 HTML 에서 흰색이고, `theme-color` 는 흰색이다 [src:1][src:10]. **옛 층의 색.** 상세 화면만 불러오는 레거시 CSS 에 옛 이름 변수가 남아 있다. 옛 대표색 `--dodgerblue_50` `oklch(0.628 0.164 249.6)` 이 회차 리스트의 파란 버튼과 `리다무` 칩 글자에 쓰이고, `--lightsteelblue_20` `oklch(0.942 0.017 248.0)` 이 `연재` 칩 바탕이다 [src:27][src:29]. 옛 팔레트 111키는 지금도 emotion 번들 안 객체로 실려 있다 [src:3][src:30]. 레거시 hover 블루 `oklch(0.609 0.200 254.9)` 는 상세 레거시 CSS 에만 있다 [src:26]. ### 시맨틱 122쌍 — 라이트 / 다크 이름 집합은 라이트·다크가 같다(122 = 122). 참조 형태는 라이트 `var()` 120 · color-mix 2, 다크 `var()` 119 · color-mix 2 · 리터럴 1 이다 [src:2]. color-mix 두 토큰은 `var()` 폴백을 먼저 정의한 뒤 `@supports (color:color-mix(in lab, red, red))` 안에서 덮는다 [src:2]. 다크 경향은 일정하다 — 강조 채움·글자는 라이트 500 → 다크 600, 연한 50 단계 채움은 다크 800 으로 가고, `surface-general-blue-600` · `icon-general-blue-600` 만 라이트 600 ↔ 다크 500 을 맞바꾼다 [src:2]. 아래 표는 frontmatter 참조 행과 **같은 대응의 두 벌**이다. 단일 원시를 가리키는 역할(라이트 120 · 다크 119)은 frontmatter 에도 `text-primary: "{colors.neutral-900}"` / `dark-text-primary: "{colors.neutral-50}"` 꼴로 실려 있고, color-mix 둘(`surface-thumbnail-blur` · `icon-disabled`)과 다크 리터럴 하나(`surface-disabled` 다크)는 이 표에만 있다. 다크 열은 발행된 다크 짝이지만 웹에서 켜지는 경로는 확인되지 않았다. **background · surface** | 역할 | 라이트 | 다크 | | --- | --- | --- | | `background-neutral-default` | `{colors.neutral-white}` | `{colors.neutral-900}` | | `background-neutral-subtle` | `{colors.neutral-50}` | `{colors.neutral-900}` | | `surface-elevated` | `{colors.neutral-white}` | `{colors.neutral-800}` | | `surface-disabled` | `{colors.neutral-50}` | 리터럴 `oklch(0.431 0.000 0.0)` — `{colors.neutral-600}` 과 같은 값이지만 참조가 아니다 | | `surface-thumbnail-blur` | color-mix `{colors.neutral-50}` 60% → 투명 = `oklch(0.970 0.000 0.0 / 0.6)` | color-mix `{colors.coolgray-800}` 60% → 투명 = `oklch(0.266 0.008 240.2 / 0.6)` | | `surface-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` | | `surface-selected-white` | `{colors.neutral-white}` | `{colors.neutral-600}` | | `surface-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` | | `surface-danger-50` | `{colors.red-50}` | `{colors.red-800}` | | `surface-danger-300` | `{colors.red-300}` | `{colors.red-700}` | | `surface-danger-400` | `{colors.red-400}` | `{colors.red-500}` | | `surface-danger-500` | `{colors.red-500}` | `{colors.red-600}` | | `surface-danger-600` | `{colors.red-600}` | `{colors.red-500}` | | `surface-warning-50` | `{colors.orange-50}` | `{colors.orange-800}` | | `surface-warning-300` | `{colors.orange-300}` | `{colors.orange-700}` | | `surface-warning-500` | `{colors.orange-500}` | `{colors.orange-600}` | | `surface-success-50` | `{colors.green-50}` | `{colors.green-800}` | | `surface-success-300` | `{colors.green-300}` | `{colors.green-700}` | | `surface-success-500` | `{colors.green-500}` | `{colors.green-600}` | **surface-general** | 역할 | 라이트 | 다크 | | --- | --- | --- | | `surface-general-white-default` | `{colors.neutral-white}` | `{colors.neutral-900}` | | `surface-general-white-subtle` | `{colors.neutral-white}` | `{colors.neutral-800}` | | `surface-general-white-static` | `{colors.neutral-white}` | `{colors.neutral-white}` | | `surface-general-gray-25` | `{colors.neutral-25}` | `{colors.neutral-850}` | | `surface-general-gray-50` | `{colors.neutral-50}` | `{colors.neutral-800}` | | `surface-general-gray-100` | `{colors.neutral-100}` | `{colors.neutral-700}` | | `surface-general-gray-800` | `{colors.neutral-800}` | `{colors.neutral-50}` | | `surface-general-gray-900` | `{colors.neutral-900}` | `{colors.neutral-white}` | | `surface-general-black-static` | `{colors.neutral-black}` | `{colors.neutral-black}` | | `surface-general-blue-50` | `{colors.blue-50}` | `{colors.blue-800}` | | `surface-general-blue-100` | `{colors.blue-100}` | `{colors.blue-700}` | | `surface-general-blue-300` | `{colors.blue-300}` | `{colors.blue-700}` | | `surface-general-blue-500` | `{colors.blue-500}` | `{colors.blue-600}` | | `surface-general-blue-600` | `{colors.blue-600}` | `{colors.blue-500}` | | `surface-general-deepblue-50` | `{colors.deepblue-50}` | `{colors.deepblue-800}` | | `surface-general-deepblue-300` | `{colors.deepblue-300}` | `{colors.deepblue-700}` | | `surface-general-deepblue-500` | `{colors.deepblue-500}` | `{colors.deepblue-600}` | | `surface-general-darknavy-50` | `{colors.darknavy-50}` | `{colors.darknavy-800}` | | `surface-general-darknavy-300` | `{colors.darknavy-300}` | `{colors.darknavy-700}` | | `surface-general-darknavy-500` | `{colors.darknavy-500}` | `{colors.darknavy-600}` | | `surface-general-red-50` | `{colors.red-50}` | `{colors.red-800}` | | `surface-general-red-300` | `{colors.red-300}` | `{colors.red-700}` | | `surface-general-red-500` | `{colors.red-500}` | `{colors.red-600}` | | `surface-general-yellow-50` | `{colors.yellow-50}` | `{colors.yellow-800}` | | `surface-general-yellow-300` | `{colors.yellow-300}` | `{colors.yellow-700}` | | `surface-general-yellow-500` | `{colors.yellow-500}` | `{colors.yellow-600}` | | `surface-general-green-50` | `{colors.green-50}` | `{colors.green-800}` | | `surface-general-green-300` | `{colors.green-300}` | `{colors.green-700}` | | `surface-general-green-500` | `{colors.green-500}` | `{colors.green-600}` | | `surface-general-purple-50` | `{colors.purple-50}` | `{colors.purple-800}` | | `surface-general-purple-300` | `{colors.purple-300}` | `{colors.purple-700}` | | `surface-general-purple-500` | `{colors.purple-500}` | `{colors.purple-600}` | | `surface-general-orange-50` | `{colors.orange-50}` | `{colors.orange-800}` | | `surface-general-orange-300` | `{colors.orange-300}` | `{colors.orange-700}` | | `surface-general-orange-500` | `{colors.orange-500}` | `{colors.orange-600}` | | `surface-general-mint-50` | `{colors.mint-50}` | `{colors.mint-800}` | | `surface-general-mint-300` | `{colors.mint-300}` | `{colors.mint-700}` | | `surface-general-mint-500` | `{colors.mint-500}` | `{colors.mint-600}` | | `surface-general-gold-50` | `{colors.gold-50}` | `{colors.gold-800}` | | `surface-general-gold-300` | `{colors.gold-300}` | `{colors.gold-700}` | | `surface-general-gold-500` | `{colors.gold-500}` | `{colors.gold-600}` | **border** | 역할 | 라이트 | 다크 | | --- | --- | --- | | `border-default` | `{colors.neutral-100}` | `{colors.neutral-700}` | | `border-inverse` | `{colors.neutral-700}` | `{colors.neutral-100}` | | `border-strong` | `{colors.neutral-200}` | `{colors.neutral-600}` | | `border-disabled` | `{colors.neutral-50}` | `{colors.neutral-700}` | | `border-divider-default` | `{colors.neutral-50}` | `{colors.neutral-750}` | | `border-divider-strong` | `{colors.neutral-100}` | `{colors.neutral-600}` | | `border-danger` | `{colors.red-500}` | `{colors.red-600}` | | `border-warning` | `{colors.orange-500}` | `{colors.orange-600}` | | `border-success` | `{colors.green-500}` | `{colors.green-600}` | | `border-information` | `{colors.blue-500}` | `{colors.blue-600}` | | `border-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` | | `border-selected-white` | `{colors.neutral-white}` | `{colors.neutral-600}` | | `border-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` | **text** | 역할 | 라이트 | 다크 | | --- | --- | --- | | `text-primary` | `{colors.neutral-900}` | `{colors.neutral-50}` | | `text-primary-static` | `{colors.neutral-900}` | `{colors.neutral-900}` | | `text-inverse` | `{colors.neutral-50}` | `{colors.neutral-900}` | | `text-inverse-static` | `{colors.neutral-50}` | `{colors.neutral-50}` | | `text-secondary` | `{colors.neutral-400}` | `{colors.neutral-500}` | | `text-tertiary` | `{colors.neutral-300}` | `{colors.neutral-600}` | | `text-disabled` | `{colors.neutral-200}` | `{colors.neutral-700}` | | `text-rating` | `{colors.red-500}` | `{colors.red-600}` | | `text-danger` | `{colors.red-500}` | `{colors.red-600}` | | `text-warning` | `{colors.orange-500}` | `{colors.orange-600}` | | `text-success` | `{colors.green-500}` | `{colors.green-600}` | | `text-information` | `{colors.blue-500}` | `{colors.blue-600}` | | `text-general-deepblue-650` | `{colors.deepblue-650}` | `{colors.deepblue-300}` | | `text-general-blue-660` | `{colors.blue-660}` | `{colors.blue-300}` | | `text-general-red-400` | `{colors.red-400}` | `{colors.red-500}` | | `text-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` | | `text-selected-white` | `{colors.neutral-50}` | `{colors.neutral-600}` | | `text-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` | **icon** | 역할 | 라이트 | 다크 | | --- | --- | --- | | `icon-primary` | `{colors.neutral-900}` | `{colors.neutral-50}` | | `icon-inverse` | `{colors.neutral-50}` | `{colors.neutral-900}` | | `icon-inverse-static` | `{colors.neutral-50}` | `{colors.neutral-50}` | | `icon-secondary` | `{colors.neutral-400}` | `{colors.neutral-500}` | | `icon-tertiary` | `{colors.neutral-200}` | `{colors.neutral-700}` | | `icon-disabled` | color-mix `{colors.neutral-200}` 50% → 투명 = `oklch(0.845 0.000 0.0 / 0.5)` | color-mix `{colors.neutral-700}` 50% → 투명 = `oklch(0.337 0.000 0.0 / 0.5)` | | `icon-rating` | `{colors.red-500}` | `{colors.red-600}` | | `icon-danger` | `{colors.red-500}` | `{colors.red-600}` | | `icon-warning` | `{colors.orange-500}` | `{colors.orange-600}` | | `icon-success` | `{colors.green-500}` | `{colors.green-600}` | | `icon-information` | `{colors.blue-500}` | `{colors.blue-600}` | | `icon-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` | | `icon-selected-white` | `{colors.neutral-white}` | `{colors.neutral-600}` | | `icon-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` | | `icon-general-white-static` | `{colors.neutral-white}` | `{colors.neutral-white}` | | `icon-general-general-static` | `{colors.neutral-black}` | `{colors.neutral-black}` | | `icon-general-gray-50` | `{colors.neutral-50}` | `{colors.neutral-800}` | | `icon-general-gray-300` | `{colors.neutral-300}` | `{colors.neutral-700}` | | `icon-general-gray-500` | `{colors.neutral-500}` | `{colors.neutral-600}` | | `icon-general-gray-300-static` | `{colors.neutral-300}` | `{colors.neutral-300}` | | `icon-general-blue-500` | `{colors.blue-500}` | `{colors.blue-600}` | | `icon-general-blue-600` | `{colors.blue-600}` | `{colors.blue-500}` | | `icon-general-deepblue-500` | `{colors.deepblue-500}` | `{colors.deepblue-600}` | | `icon-general-darknavy-500` | `{colors.darknavy-500}` | `{colors.darknavy-600}` | | `icon-general-red-500` | `{colors.red-500}` | `{colors.red-600}` | | `icon-general-yellow-500` | `{colors.yellow-500}` | `{colors.yellow-600}` | | `icon-general-green-500` | `{colors.green-500}` | `{colors.green-600}` | | `icon-general-purple-500` | `{colors.purple-500}` | `{colors.purple-600}` | | `icon-general-orange-500` | `{colors.orange-500}` | `{colors.orange-600}` | | `icon-general-mint-500` | `{colors.mint-500}` | `{colors.mint-600}` | | `icon-general-gold-500` | `{colors.gold-500}` | `{colors.gold-600}` | 계층별 개수는 background 2 · surface 17 · surface-general 41 · border 13 · text 18 · icon 31 이다 [src:2]. `icon-general-general-static` 은 상류 이름을 그대로 옮긴 것이다 [src:2]. ## Typography **패밀리는 Pretendard Variable 하나다.** 발행 글꼴 토큰은 `--ridi-fontFamily-pretendardVariable` 하나이고 [src:2], emotion 테마에는 크기·줄높이·글꼴 정의가 0건이라 타입의 발행처는 층 A 한 곳이다 [src:3]. @font-face 는 Pretendard Variable · JP Variable · Std Variable 서브셋으로, 모두 `font-weight: 300 700`, `font-display: swap`, `woff2-variations` 이고 리디 CDN 에서 받는다 [src:24]. 홈·웹툰 홈의 렌더 스택은 `{fonts.font-sans}` 이고(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음), 상세 화면만 `"Apple SD Gothic Neo"` 와 `"Malgun Gothic"` 사이에 Noto Sans KR 이 더 낀 `{fonts.font-sans-detail}` 이다 [src:10][src:35]. **브랜드 전용 디스플레이 서체는 없다** — 헤더 `RIDI` 는 SVG 이미지이고 [src:1][src:37], 토큰·테마 어디에도 다른 패밀리가 없다 [src:2][src:3]. 그래서 `font-display-src` 는 해당하지 않는다. 리디가 OFL 로 배포하는 리디바탕은 전자책 뷰어용 글꼴이고 웹 UI 에는 쓰이지 않는다 [src:32][src:1]. **크기 16단계, 자간은 크기 × −0.01.** `fontSize-01`…`16` 과 같은 번호의 `letterSpacing-*` 가 짝으로 발행돼 있어 frontmatter 는 이것을 `{typography.scale-01}`…`{typography.scale-16}` 으로 크기와 자간만 싣는다 [src:2]. 7 · 8 · 9 · 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 24 · 26 · 34 · 42px 이고, 26px 다음이 바로 34px 다 [src:2]. **줄높이 14단계는 번호가 크기와 짝이 아니다.** `lineHeight-01`…`14` 는 아래 값이고, `lineHeight-08` 24px 은 `fontSize-08` 15px 의 짝이 아니며, 크기 15·16 번에 대응하는 줄높이 번호가 없다 [src:2]. 짝을 지어내지 않고 이 표에만 둔다. | 토큰 | 값 | 토큰 | 값 | | --- | --- | --- | --- | | `lineHeight-01` | 8px | `lineHeight-08` | 24px | | `lineHeight-02` | 10px | `lineHeight-09` | 28px | | `lineHeight-03` | 12px | `lineHeight-10` | 32px | | `lineHeight-04` | 16px | `lineHeight-11` | 36px | | `lineHeight-05` | 18px | `lineHeight-12` | 38px | | `lineHeight-06` | 20px | `lineHeight-13` | 46px | | `lineHeight-07` | 22px | `lineHeight-14` | 56px | **굵기는 넷이다** — `regular` 400 · `medium` 500 · `semibold` 600 · `bold` 700 [src:2]. **합성 역할 9개가 네 값을 모두 갖는다.** 층 A 의 `--text-*` 역할은 크기·줄높이·자간·굵기를 묶은 것이고, frontmatter 스타일 이름은 상류 이름 그대로다 [src:2]. | 스타일 | 크기 / 줄높이 / 굵기 | 상류 참조 | | --- | --- | --- | | `{typography.body-LSemibold}` | 16 / 24 / 600 | `fontSize-09` · `lineHeight-08` · `semibold` | | `{typography.body-mBold}` | 15 / 22 / 700 | `fontSize-08` · `lineHeight-07` | | `{typography.body-mSemibold}` | 15 / 22 / 600 | `fontSize-08` · `lineHeight-07` | | `{typography.body-mMedium}` | 15 / 22 / 500 | `fontSize-08` · `lineHeight-07` | | `{typography.body-sSemibold}` | 14 / 22 / 600 | `fontSize-07` · `lineHeight-07` | | `{typography.body-sRegular}` | 14 / 22 / 400 | `fontSize-07` · `lineHeight-07` | | `{typography.body-xsSemibold}` | 13 / 20 / 600 | `fontSize-06` · `lineHeight-06` | | `{typography.body-xsRegular}` | 13 / 20 / 400 | `fontSize-06` · `lineHeight-06` | | `{typography.caption-mMedium}` | 12 / 18 / 500 | `fontSize-05` · `lineHeight-05` | `--text-body-LBold` 는 크기 16px 만 있고 유틸 클래스가 없어 스타일로 싣지 않는다 [src:2]. 이 합성 이름들도 수집 화면에서는 0건이다(≈ 보드 판독 · 공개 출처 없음). **화면이 실제로 쓰는 스타일**(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음). 상속 기본값은 HTML 인라인 전역 규칙 — `line-height:normal` · `letter-spacing:-0.03em` · `font-size:14px` — 이다 [src:1]. 크기는 거의 전부 위 16값 안이지만(홈 1440 1140요소 중 1138), 줄높이는 토큰 밖 값(17 · 19 · 21 · 18.4 · 11 · 26px 등)이 많고 굵기 900 도 쓴다. | 자리 | 1440 | 375 | | --- | --- | --- | | 히어로 제목 | ≈ 22 / 32 / 900 | ≈ 20 / 28 / 900 | | 섹션 제목 h2 | ≈ 22 / 26 / 700 | ≈ 18 / 22 / 700 | | 카드 제목 | ≈ 16 / 19 / 500 | ≈ 15 / 18 / 500 | | 작가 줄 | ≈ 14 / 17 / 400 | ≈ 13 / 16 / 400 | | 별점 | ≈ 13 / 16 | ≈ 12 / 14 | | 상세 제목 h1 | ≈ 32 / 38 / 700 | (상세는 375 에서 접히지 않음) | | 구매 버튼 | ≈ 18 / 22 / 600 | — | 1440 → 375 에서 줄어드는 폭은 1·2·4px 로 일정하지 않다. 도서 카드 제목은 코드에 15px / 500 / −0.01em / 18px 로 적혀 있으나 [src:17] 1440 렌더는 위처럼 16 / 19 / 500 이다(≈). 굵기 900 은 토큰 밖이고 @font-face 범위가 300–700 이라 [src:24], 실제로 몇으로 그려지는지는 확인되지 않았다. ## Spacing **간격은 `--spacing-ds-*` 13단계이고, 이름의 숫자 ÷ 25 = px 다.** `{spacing.ds-50}` 2px 부터 `{spacing.ds-1000}` 40px 까지이고 다크 재정의는 없다 [src:2]. 4px 배수가 뼈대지만 2 · 6 · 10 · 30px 이 끼어 있고 800 단계는 없다(`{spacing.ds-750}` 30px 다음이 `{spacing.ds-900}` 36px) [src:2]. **컨테이너는 1170px 이다.** `max-width:1170px` · 좌우 패딩 30px(`{spacing.ds-750}` 과 같은 값) · 가운데 정렬이고, 1440 에서 콘텐츠 폭은 1110px 이다. `DesktopSmall`(767px) 이하에서 좌우 패딩이 16px(`{spacing.ds-400}` 과 같은 값)로 줄어든다 [src:20][src:16]. 캐러셀 간격은 상수 `TABLET_GAP` 9 · `MOBILE_GAP` 8 이고 렌더 gap 도 같다 [src:16]. 화면 간격 중 값이 토큰과 맞는 것은 gap 4px(`{spacing.ds-100}`), 컨테이너 패딩, 왼쪽 24px(`{spacing.ds-600}`) 정도이고, 토큰을 거쳤는지는 확인되지 않았다(≈, 보드 판독 · 공개 출처 없음). 단계 밖 값도 많다 — 장르 알약 여백 `7px 10px 8px` [src:15], 3px, `17px 12px`, 계산 소수 패딩(≈). ## Rounded **발행된 반경은 셋이다** — `{rounded.radius-50}` 2px · `{rounded.radius-100}` 4px · `{rounded.radius-full}` 9999px [src:2]. 키는 숫자만 남기면 YAML 이 정수 키로 읽으므로 `radius-` 접두를 남겼다. 화면의 지배적인 반경은 4px 로, 표지·카드에 반복되고 `{rounded.radius-100}` 과 같은 값이다 [src:17]. 그 밖의 반경은 토큰 맵에 넣지 않고 `## Components` 의 각 스펙과 frontmatter `components:` 에 단위 붙은 값으로 둔다. | 반경 | 자리 | 근거 | | --- | --- | --- | | 2px | 상세 정보 칩(`{rounded.radius-50}` 과 같은 값) | ≈ 보드 판독 · 공개 출처 없음 | | 4px | 표지 · 카드 · 정보 박스 | [src:17] | | 6px | 구매 버튼 | [src:10] | | 8px | 검색창 · 떠 있는 상자 | [src:21] · 검색창 ≈ | | 20px | 히어로 카드 | [src:16] | | 29px | 맨 위로 버튼 | [src:14] | | 30px | `+ 관심` 알약 | [src:10] | | 99px | 장르 알약(선택·비선택 모두) | [src:15] | | 999px | 진행 막대 | [src:22] | | 50% | 캐러셀 화살표 원 | [src:14] | | `0 4px 0 0` | 표지 좌하단 배지 묶음 | [src:17] | | `4px 0` | `R ONLY` 배지 | [src:17] | `{rounded.radius-full}` 과 같은 값의 요소는 렌더 8조합 어디에도 없었다(≈ 보드 판독 · 공개 출처 없음) — 알약은 99px·30px 같은 리터럴로 그린다 [src:15][src:10]. 상세 레거시 CSS 는 3px·4px 가 많다 [src:25]. ## Elevation & Depth **브랜드가 이름 붙인 그림자 토큰은 0개다.** 층 A 에는 클래스마다 값을 박은 Tailwind 임의값 그림자 6개가 있을 뿐 이름 붙은 그림자가 없고 [src:2], emotion 테마에도 없다 [src:3]. 그래서 frontmatter `elevation:` 맵에는 컴포넌트 코드가 값을 박아 둔 그림자 셋을 관찰값으로 싣는다(브랜드가 붙인 이름이 없어 키는 쓰이는 자리로 지었다) — 캐러셀 화살표 원 `carousel-arrow` [src:14], 1440 에서만 뜨는 상자 `floating-box`(테두리 `{colors.emotion-grey200}` · 반경 8px) [src:21], 상세 옛 층 `rui_` 버튼 `legacy-button` [src:25]. 히어로 작은 칩의 `0 1px 1px 0` 검정 15% 그림자는 출처 없는 보드 판독이라 맵에 싣지 않는다(≈ 보드 판독 · 공개 출처 없음). 구분은 그림자보다 `{colors.emotion-grey200}` · `{colors.neutral-100}` 의 얇은 선과 `{colors.neutral-50}` 면으로 한다(렌더 관찰 ≈). 렌더 테두리 두께가 소스의 `1px` 이 아니라 `0.888889px` 로 나오는데 원인은 확인되지 않았다(≈). ```text filters (레거시 키 객체 — 그림자가 아니라 drop-shadow 필터): logoFilter drop-shadow(0 0 1px oklch(0.000 0.000 0.0 / 0.3)) [src:3] logoFilter2 drop-shadow(0 1px 1px oklch(0.000 0.000 0.0 / 0.2)) [src:3] ``` **높이는 그림자보다 쌓임 순서로 표현한다.** emotion 번들의 `ZIndexLayer` 가 그 체계다 [src:3]. ```text ZIndexLayer [src:3] LEVEL_TOASTMESSAGE 10000 LEVEL_MODAL 9000 LEVEL_OVERLAY 8000 (하단 고정 구매바가 이 층) [src:18] LEVEL_HEADER 7000 LEVEL_TOOLTIP 6000 LEVEL_DROPDOWN 5000 LEVEL_BASE 0 LEVEL_BELOW -1 ``` **모션 값 토큰도 0개다.** 관찰된 지속은 0.1 · 0.2 · 0.3 · 0.4s, 이징은 `ease` · `ease-in-out` · `ease-out` 이다(≈, 보드 판독 · 공개 출처 없음). 이름 붙은 모션 변수는 레거시 스피너의 `--animation-duration: .7s` 하나다 [src:28]. ```text motion (번들 관측 — 모션 토큰 파일은 없다): carousel-arrow opacity, color, pointer-events 0.2s ease [src:14] genre-pill all 0.2s ease-in-out, hover opacity 0.4 [src:15] back-to-top opacity, pointer-events, transform 0.4s ease [src:14] infinite-drag transform 0.2s cubic-bezier(0, 0, 0.31, 1) (인라인) [src:20] banner-carousel ANIMATION_DURATION 모바일 500 · 태블릿 300 · 데스크톱 800 [src:16] ANIMATION_DELAY 4000 · DESKTOP_ANIMATION_DELAY 6000 TEXT_MOTION_DURATION 400 · TEXT_MOTION_OFFSET 30 (단위 표기 없음 — ms 로 보인다) mobile-text 모바일 보기에서만 opacity transition, ease-in-out [src:36] legacy-spinner --animation-duration .7s [src:28] ``` `prefers-reduced-motion` 은 수집한 HTML 5 · JS 71 · CSS 14 에서 0건이었다(≈, 보드 판독 · 공개 출처 없음). 배너 캐러셀에는 자동 넘김 지연 상수 4000 · 6000(단위 미표기)이 있으므로 [src:16], 움직임 줄이기 대응은 소비자가 채워야 한다. ## Shapes 리디의 형태는 **작은 사각형 위에 몇 개의 큰 곡면**이다. 표지·카드·정보 박스가 4px 의 얕은 모서리를 공유하고 [src:17], 그 안에서 히어로 카드의 20px [src:16]과 장르 알약의 99px [src:15], `+ 관심` 알약의 30px [src:10] 만 둥글게 튄다. 원은 캐러셀 화살표(50%)와 맨 위로 버튼(29px) 같은 떠 있는 조작 표지에 쓰이고 [src:14], 바로가기 아이콘도 원형이다(≈ 캡처). 표지 배지는 모서리 하나만 둥글린 비대칭 모양이다 — 좌하단 배지 묶음은 `0 4px 0 0`, 좌상단 `R ONLY` 배지는 `4px 0` 으로, 표지 모서리에 붙어 바깥쪽 모서리만 각을 유지한다 [src:17]. 심볼 'R' 도 퍼스펙티브와 비대칭 조형을 쓰고, 워드마크는 "각지고 정돈된 형태"로 다듬었다 [src:7] — 정돈된 기하 위에 비대칭 한 점을 얹는 문법이 로고와 배지에 같이 있다. 선은 가늘고 연하다. 1px 회색 선과 연회색 면이 구분을 맡고, 테두리를 진하게 하거나 두께를 올려 강조하는 장치는 `+ 관심` 알약의 블루 테두리 정도다 [src:10]. 표지 위에는 `{colors.emotion-dim-thumb}` 1px 외곽선을 안쪽으로 그어(`outline-offset:-1px`) 흰 표지가 흰 바탕에 녹지 않게 한다 [src:17][src:3]. ## Components 아래 9종(변형 포함 11개)은 frontmatter `components:` 에도 같은 이름으로 실려 있다. 값은 대부분 화면 실측이고, 코드 정의가 확인된 것은 해당 청크를 `[src:N]` 으로 인용한다. **`≈` 는 공개 URL 이 없는 렌더 관찰값이다** — 계산 스타일을 승인된 디자인 보드에서 옮긴 값은 "보드 판독 · 공개 출처 없음", 캡처 이미지에서 잰 값(`약` 이 붙은 치수)은 추정이다. **맵에 싣는 기준도 이 구분을 따른다.** 코드 정의값과 보드 판독값(계산 스타일을 옮긴 정확값 — `info-chip` 40 × 18, `cover-badge` 23, `carousel-arrow` 40 × 40)은 `components:` 에 싣고, `약` 이 붙은 캡처 추정 치수(`genre-pill-selected` 높이 약 34px, `favorite-pill` 약 64 × 34, `purchase-button` 약 226 × 52)는 본문에만 둔다 — 맵에 들어가면 기계 소비자가 추정값을 발행값과 구별할 수 없다. 색은 층 A 원시나 emotion 그룹을 가리키지만, 화면은 그 토큰 이름이 아니라 리터럴 값으로 칠한다는 점(`## Colors`)을 전제로 읽는다. 치수 단위는 px 다. ### gnb-tab ```text GNB 대분류 탭 ≈ 보드 판독 · 공개 출처 없음 label 만화 · 웹툰 · 웹소설 · 도서 · 리디샵 · 셀렉트 [src:1] default {colors.neutral-900} · 16 / 18 / 600 gap 22 · padding 12 0 375 15 / 20 · padding 13 9 11 detail 상세 화면에서는 현재 탭 표시 없이 전부 {colors.neutral-400} extras 리디샵 옆 빨간 N({colors.red-500} 9px 700) · 셀렉트 옆 외부 링크 아이콘 ``` ### gnb-tab-current 현재 탭은 글자만 `{colors.emotion-blue}` 로 바꾸고 굵기를 700 으로 올린다(16 / 18 / 700). 밑줄·배경은 없다(≈, 보드 판독 · 공개 출처 없음). ### genre-pill ```text 장르 알약 (비선택) [src:15] fill 없음 label {colors.neutral-900} (emotion fillPrimary 값) · 600 radius 99 1440 16 / 19 · padding 7 10 8 375 14 / 17 · padding 7 10 6 · 가로 스크롤 gap 4 ({spacing.ds-100} 과 같은 값) hover opacity 0.4 · transition all 0.2s ease-in-out ``` 라벨은 만화 홈 `추천` · `베스트` · `신작` · `BL` · `라노벨` …, 웹툰 홈 `추천` · `로맨스` · `BL` · `판타지/SF` … 다 [src:1][src:8]. hover 는 `(hover:hover) and (pointer:fine)` 쿼리 안에서만 켜진다 [src:3]. ### genre-pill-selected 선택 알약은 `{colors.emotion-blue}` 채움에 `{colors.neutral-white}` 700 글자이고, 반경·여백은 비선택과 같다 [src:15]. 높이는 약 34px 이다(≈ 추정 — 캡처에서 잰 값이라 `components:` 에 싣지 않는다). ```tsx // 재구성 예시 — 선택 알약은 {colors.emotion-blue} 채움 + 흰 글자, 반경 99px BL 라노벨 ``` ### hero-card ```text 히어로 배너 카드 [src:16] size 364 × 414 (1440) · gap 9 · 3장 동시 radius 20 media 전면 작품 일러스트 title 흰 글자 ≈ 22 / 32 / 900, 두 줄 subtitle ≈ 16 / 24 / 500 copyright ≈ 8 / 11 / 400 chips 좌상단 묶음 (UP | ↓30% · R ONLY | ↓10% · R ONLY | NEW) ≈ 보드 판독 fill oklch(1.000 0.000 0.0 / 0.87) · 글자 oklch(0.000 0.000 0.0 / 0.8) 13 / 16 / 700 · radius 3 · shadow 0 1px 1px 0 oklch(0.000 0.000 0.0 / 0.15) 375 1장 + 양옆 이웃 비침 · 약 329–359 × 364 · 제목 ≈ 20 / 28 / 900 우상단 쪽 번호 2 / 20, 배경 fillCarouselNum oklch(0.191 0.000 0.0 / 0.2) [src:3] ``` 화살표 원(`{component.carousel-arrow}`)은 1440 에서 컨테이너 바깥으로 걸쳐 놓인다(≈ 캡처). ### book-card ```text 도서 카드 [src:17] cover 반경 4 ({rounded.radius-100} 과 같은 값) · 이미지 폭 767 초과 180 / 이하 78 overlay outline 1px solid {colors.emotion-dim-thumb} · outline-offset -1px background {colors.emotion-dim-thumb} [src:3] title ≈ 16 / 19 / 500, 최대 2줄 (코드값 15 / 500 / -0.01em / 18) author ≈ 14 / 17 / 400 {colors.neutral-400} rating 빨간 별 + 점수 + (평가 수) ≈ 13 / 16 · 점수 {colors.red-500} · 평가 수 {colors.neutral-400} section h2 ≈ 22 / 26 / 700 1440 / 375 한 줄 6장 (약 180) / 약 2.3장 가로 스크롤 (약 130) ≈ 추정 ``` ### cover-badge ```text 표지 배지 [src:17] group 표지 좌하단 ul · radius 0 4px 0 0 item min-width 23 · height 23 · 흰 글자 {colors.neutral-white} 11px 700 · 자간 -0.02em fill 서버 데이터 색 — 관찰된 대응: 10% {colors.red-500} 1권무 {colors.darknavy-500} 대여 {colors.neutral-400} UP {colors.mint-500} R ONLY 배지 position 좌상단 · radius 4px 0 fill 검정 opacity 0.7 바탕 + 흰 SVG 로고 size 767 초과 61 × 30 / 이하 47 × 24 ``` ### purchase-button ```text 구매 버튼 [src:10] fill {colors.emotion-blue} label {colors.neutral-white} · ≈ 18 / 22 / 600 (크기는 {typography.scale-10} 과 같은 값) radius 6 size 약 226 × 52 (≈ 추정 · components 맵에는 싣지 않음) layout 만화 상세: 전권 대여 · 전권 할인 소장 두 개, 간격 약 8 / 웹툰 상세: 첫화보기 하나 contrast 흰 글자 / 블루 채움 ≈ 2.8:1 (보드 판독) ``` 흰 글자와 `{colors.emotion-blue}` 의 대비는 약 2.8:1 이고, 18px · 600 은 WCAG 큰 글자 기준 밖이라 4.5:1 에 못 미친다(≈, 보드 판독 · 공개 출처 없음). 브랜드의 관행이지 기준을 채운 조합이 아니다. 레거시 hover 색은 상세 레거시 CSS 에만 있다 [src:26]. ```tsx // 재구성 예시 — 만화 상세의 두 버튼, 각 {colors.emotion-blue} 채움 · 반경 6px 전권 대여 전권 할인 소장 ``` ### favorite-pill `+ 관심` 알약은 `{colors.neutral-white}` 바탕에 `{colors.emotion-blue}` 테두리·글자, 반경 30px, 14px 500 이다 [src:10]. 크기는 약 64 × 34 다(≈ 추정 — 캡처에서 잰 값이라 `components:` 에 싣지 않는다). ### info-chip ```text 상세 정보 라벨 칩 ≈ 보드 판독 · 공개 출처 없음 size 40 × 18 · 11 / 13 / 700 radius 2 ({rounded.radius-50} 과 같은 값) variants 연재 바탕 oklch(0.942 0.017 248.0) (레거시 --lightsteelblue_20 [src:27]) 글자 ≈ oklch(0.601 0.038 261.9) 이벤트 바탕 ≈ oklch(0.913 0.019 295.8) · 글자 ≈ oklch(0.517 0.129 283.6) 독점 바탕 {colors.neutral-100} · 글자 {colors.emotion-grey550} 리다무 바탕 ≈ oklch(0.967 0.016 239.1) 글자 oklch(0.628 0.164 249.6) (레거시 --dodgerblue_50 [src:29]) 추천 바탕 ≈ oklch(0.948 0.016 262.8) · 글자 ≈ oklch(0.504 0.013 252.2) divider 칩 행 사이 {colors.neutral-100} ``` `리다무` 칩 옆에는 뜻풀이 `1일마다 1편 기다리면 무료` 가 같은 행에 붙는다 [src:9]. ### carousel-arrow ```text 캐러셀 화살표 원 [src:14] size 40 × 40 · radius 50% fill {colors.neutral-white} border 1px solid {colors.emotion-grey200} [src:3] shadow 2px 4px 8px 0 oklch(0.000 0.000 0.0 / 0.06) transition opacity, color, pointer-events 0.2s ease ``` ### screen-parts-observed 맵에 싣지 않은 화면 부품이다(≈, 렌더 관찰 · 공개 출처 없음 — 출처가 있는 값만 `[src:N]`). - **검색창** — `{colors.neutral-50}` 바탕, 약 260 × 40, 반경 8px, 돋보기 `{colors.neutral-400}`, 입력 전 문구 없음. - **바로가기 원형 아이콘** — 지름 70px(375 에서 56px), `{colors.neutral-50}` 바탕, 라벨 13px 500, 1440 에서 8개 가운데 정렬. - **랭킹 리스트** — 표지 80 × 116 + 순위 숫자 18 / 21 / 500 + 제목·작가·별점, 3열 × 3행. - **정보 박스** — `{colors.neutral-25}` 바탕, `{colors.emotion-grey200}` 테두리, 반경 4px, 2열 라벨(굵은 검정)·값(`{colors.neutral-400}`, 미지원은 `{colors.neutral-200}`). ISBN · UCI · 지원 환경(앱 · 웹 · PC뷰어 · PAPER)이 여기 나온다 [src:10]. - **가격 표(만화 상세)** — `소장` · `단권` · `전권` · `정가` · `판매가`, 할인율·판매가는 블루, 정가는 검정 [src:10]. - **맨 위로 버튼** — 우하단 고정, 약 58 × 58, 반경 29px, 반투명 흰 바탕 `oklch(1.000 0.000 0.0 / 0.9)`, 얇은 `{colors.neutral-100}` 값의 테두리(emotion `grey300`) [src:14]. - **상세 사이드 베스트 목록** — 순위 숫자 `{colors.red-500}` 700, 제목 14 / 20 `{colors.emotion-grey550}` 말줄임. - **하단 고정 구매바** — 코드에만 있다: `position:fixed; bottom:0`, `LEVEL_OVERLAY`(8000), 패딩 `10px 10px calc(10px + var(--safe-area-inset-bottom,0px))`, 위쪽 1px `grey300` 선, 흰 바탕, `belowType("desktop")` 일 때만 `display:flex`. 라벨은 `소장하기` · `대여하기` · `캐시백 구매하기` · `바로 보기` · `첫화보기` · `이어보기` 다 [src:18]. 렌더 캡처에는 보이지 않았고 기준 폭은 확인되지 않았다. ### legacy-episode-list 웹툰 상세의 회차 리스트는 위 emotion 컴포넌트보다 오래된 `rui_` 클래스 층이다. 한 DOM 안에 `fig-` · `book-detail-direct-` · `rui_` 접두가 섞인다(≈). 맵에 싣지 않는다. ```text 회차 리스트 (옛 층) ≈ 보드 판독 · 공개 출처 없음 (변수 출처만 [src:N]) tabs 위 2px 선 {colors.neutral-500} 값 선택 대여하기 흰 바탕 · 굵게 비선택 소장하기 바탕 ≈ oklch(0.967 0.000 0.0) (토큰·레거시 변수 어디에도 없음) · 경계 {colors.neutral-200} 값 row 체크박스 테두리 ≈ oklch(0.795 0.009 264.5) inset 0 1px 0 0 oklch(0.922 0.000 0.0) (레거시 --gray_10) [src:29] 썸네일 약 40 × 60 · radius 4 무료 배지 {colors.darknavy-500} 값 제목 13 / 16 / 700 {colors.neutral-black} 값 · 보조줄 12px {colors.coolgray-400} 값 보기 버튼 rui_button_white_30 · 테두리 {colors.coolgray-200} 값 · radius 3 shadow 0 1px 1px 0 oklch(0.871 0.007 247.9 / 0.3) [src:25] divider {colors.coolgray-50} 값 (레거시 --slategray_5 와도 같다) [src:29] toolbar 전체 선택 · ↑↓ 신간부터 · 카트(테두리 {colors.coolgray-200} 값, radius 3) 총 0화 0원 (금액 {colors.emotion-blue} 값) · 선택 대여 ({colors.emotion-blue} 값 채움) blue button rui_button_blue_40 · 바탕 oklch(0.628 0.164 249.6) (레거시 --dodgerblue_50) [src:27] active link a.active 글자 레거시 --gray_80 [src:29] ``` ## Do's and Don'ts **Do** — 블루는 위치·선택·구매 세 자리에만 쓴다. 현재 탭 글자, 선택 알약 채움, 구매 버튼·`+ 관심` 이 `{colors.emotion-blue}` 이고(자리는 렌더 관찰 ≈, 보드 판독 · 공개 출처 없음), 나머지 화면은 `{colors.neutral-900}` · `{colors.neutral-400}` 회색 글자와 흰 바탕으로 짠다 [src:3][src:15][src:10]. **Do** — 대표색이 필요하면 `{colors.emotion-blue}`(`primary`)를 쓴다. 공개 글의 최종 리디 블루이자 화면이 칠하는 값이다 [src:5][src:3]. 층 A 의 브랜드 블루 역할을 쓸 때는 그것이 `{colors.blue-500}` 을 가리키고 [src:2] 그 값은 화면에 나오지 않는다(≈ 보드 판독 · 공개 출처 없음)는 점을 알고 쓴다. **Do** — 표지가 주인공이게 둔다. 표지는 `{rounded.radius-100}` 과 같은 4px 모서리에 `{colors.emotion-dim-thumb}` 외곽선을 안쪽으로 긋고, 큰 곡면(20px)은 히어로 카드 하나에만 준다 [src:17][src:16]. **Do** — 흰 글자 / `{colors.emotion-blue}` 채움(약 2.8:1)을 재현할 때는 그것이 본문·큰 글자 기준 모두에 못 미치는 조합이라는 것을 전제로 한다(≈, 보드 판독). 기준 충족이 필요한 제품이면 이 조합을 그대로 옮기지 말고 따로 판단한다. **Don't** — 층 A `--ridi-*` 이름을 "리디 화면이 쓰는 토큰"처럼 소개하지 않는다. 발행됐지만 [src:2] 수집 화면에서 사용처가 0건인 이름이다(≈ 보드 판독 · 공개 출처 없음). **Don't** — 다크에서 emotion 층에서 가져오는 것은 브랜드 블루 `{colors.dark-emotion-blue}` 하나뿐이고, 바탕·글자·테두리는 층 A 다크 시맨틱으로 칠한다. emotion `bgBase` 다크 등 블루 밖의 emotion 다크 값을 층 A 다크 시맨틱과 섞지 않는다 — 바탕부터 다른 값이다 [src:3][src:2]. 웹에서 다크가 켜지는 경로도 확인되지 않았다 [src:19]. **Don't** — 구분을 그림자로 하지 않는다. 그림자는 캐러셀 화살표 원과 떠 있는 상자 정도에만 있고, 현재 화면(emotion) 층의 카드·버튼·알약은 그림자 없이 선과 면으로 구분한다 [src:14][src:21]. 히어로 작은 칩의 `0 1px 1px` 그림자(≈ 보드 판독 · 공개 출처 없음)와 상세 회차 리스트의 옛 층 `rui_` 버튼 그림자 [src:25]는 이 규칙의 예외다. **Don't** — 옛 층 색(`--dodgerblue_50` 등)을 대표색으로 승격하지 않는다. 상세 회차 리스트에 남은 레거시이고, 리뉴얼 뒤의 리디 블루가 아니다 [src:27][src:29][src:5]. **Don't (도메인 경계)** — 차용할 것은 리디의 시각 처리이지 콘텐츠 플랫폼의 서비스 개념이 아니다. `리다무`(기다리면 무료) · `R ONLY` / `리디온리`(독점 작품) · `대여하기` / `소장하기` 이중 구매 구조 · `1권무` · `캐시충전` · `셀렉트` 같은 리디 고유 개념과 그 배지·칩·뜻풀이 카피를 관계없는 제품에 옮기지 않는다 [src:9][src:1][src:17][src:18]. 흰 바탕 위 블루 한 점, 4px 표지 모서리, 알약 필터라는 시각 언어만 가져간다. ## Responsive Behavior **코드에 브레이크포인트 열거가 있다.** emotion 번들의 `BreakPoint` 는 `MobileSmall` 319 · `MobileDefault` 374 · `DesktopSmall` 767 · `DesktopMedium` 1169 · `DesktopDefault` 1279 · `DesktopLarge` 1439 와 그리드용 `GridSmall` 599 · `GridMedium` 999 · `GridLarge` 1169 다 [src:3]. 다른 청크의 판은 `ExtraSmall` 299 · `Small` 374 · `Mobile` 432 · `Medium` 833 · `Large` 999 · `ExtraLarge` 1279 를 더해 15개다 [src:23]. 캐러셀 모듈의 `MOBILE_BREAKPOINT` 479 는 이 열거와 별도 상수다 [src:16]. 쿼리 도우미는 아래쪽 한정 `max-width:${e}px`, 위쪽 한정 `min-width:${e+1}px` 로 1을 더하므로, 렌더 쿼리는 `(max-width: 767px)` · `(min-width: 768px)` 쌍으로 보인다 [src:3]. 아래 표는 `BreakPoint` 9개를 모두 싣는다. 렌더는 1440 · 375 두 폭에서만 했으므로, 그 사이 경계에서 무엇이 바뀌는지는 코드에 적힌 것 말고는 관찰하지 못했다. | 폭 | 근거 | Key Changes | | --- | --- | --- | | ≥ 1440 | `DesktopLarge` 1439 [src:3] | 컨테이너 1170 / 콘텐츠 1110 · 히어로 3장 [src:20][src:16] · 표지 6장 · 랭킹 3열(≈) | | ≤ 1279 | `DesktopDefault` 1279 [src:3] | 렌더 폭 밖 · 미관찰(≈) | | ≤ 1169 | `DesktopMedium` · `GridLarge` 1169 [src:3] | 1170 컨테이너가 화면 폭을 넘기 시작하는 경계 | | ≤ 999 | `GridMedium` 999 [src:3] | 렌더 폭 밖 · 미관찰(≈) | | ≤ 767 | `DesktopSmall` 767 [src:3] | 컨테이너 패딩 30 → 16 [src:20] · 표지 이미지 180 → 78 · `R ONLY` 배지 61×30 → 47×24 [src:17] | | ≤ 599 | `GridSmall` 599 [src:3] | 렌더 폭 밖 · 미관찰(≈) | | ≤ 479 | `MOBILE_BREAKPOINT` [src:16] | 캐러셀 모듈 전용 모바일 판정 상수 — `BreakPoint` 열거와 무관 | | 375 | 렌더 관찰 ≈ | 아래 표. `MobileDefault` 374 경계 바로 위 폭이다 | | ≤ 374 | `MobileDefault` 374 [src:3] | 렌더 폭 밖 · 미관찰(≈) | | ≤ 319 | `MobileSmall` 319 [src:3] | 렌더 폭 밖 · 미관찰(≈) | **1440 ↔ 375 (홈 · 웹툰 홈, 렌더 관찰 ≈ — 캡처·보드 판독 · 공개 출처 없음)** | 항목 | 1440 | 375 | | --- | --- | --- | | GNB | 1단 `RIDI` · 검색창 260×40 · `로그인 / 회원가입`, 2단 대분류 + `전체 카테고리` · `캐시충전` | `RIDI` + `로그인` 알약, 검색창 별도 줄, 대분류 가로 잘림(오른쪽 흰 그라데이션) + 햄버거 | | 장르 알약 | 한 줄에 전부, 16/19 | 가로 스크롤, 14/17 [src:15] | | 히어로 | 3장 동시, 364×414, gap 9 [src:16] | 1장 + 양옆 이웃 비침, 쪽 번호 `2 / 20` | | 바로가기 원 | 70px × 8, 가운데 정렬 | 56px, 5개 보이고 가로 스크롤 + 화살표 | | 표지 | 약 180px, 한 줄 6장 | 약 130px, 약 2.3장 가로 스크롤 | | 랭킹 | 3열 × 3행 | 1열(재확인 안 됨) | | 섹션 제목 | 22/26/700 | 18/22/700 | **상세 페이지는 375 에서 접히지 않았다.** 헤더만 `RIDI` + 검색 아이콘 + `로그인` 알약으로 줄고, 본문은 표지 + 정보 열 + 오른쪽 베스트 목록의 데스크톱 배치 그대로 그려져 오른쪽이 잘렸다(≈ 캡처). 레거시 CSS 에 `#ridi_books` 의 `min-width:1170px` 가 있으나 그것이 원인인지는 확인되지 않았다 [src:26]. 코드의 하단 고정 구매바는 `belowType("desktop")` 일 때만 켜지는데 [src:18], 렌더에서는 보이지 않았다. 그래서 모바일 상세 UI 는 관찰하지 못했다. **터치 타깃.** 모바일 햄버거 44 × 44, 캐러셀 화살표 40 × 40(`{component.carousel-arrow}`), 장르 알약 높이 약 34px 로 44px 미만인 컨트롤이 있다(≈) [src:14]. 이 치수를 빌릴 때는 히트 영역을 패딩으로 보완하는 편이 안전하다. 호버 효과는 `(hover:hover) and (pointer:fine)` 쿼리로 터치 기기에서 끈다 [src:3]. **이미지.** 표지는 폭 옵션(180 / 78)으로 갈아 끼우고 [src:17], 375 의 표지·바로가기·장르 띠는 줄바꿈 대신 가로 스크롤로 넘친다(≈ 캡처). ## Known Gaps - **웹 다크 경로를 확인하지 못했다.** 층 A 는 다크 짝 122개를 발행하고(그중 단일 원시를 가리키는 119개를 frontmatter 참조 행으로 실었다) emotion 테마도 다크 객체가 있지만, 테마 선택 코드는 앱 안·특정 경로에서만 다크를 고르고 [src:19], 렌더 8조합은 모두 라이트였다(≈ 보드 판독 · 공개 출처 없음). frontmatter 의 `dark-` 행은 발행값이지 웹에서 관찰한 값이 아니다. - **`--ridi-*` 이름은 수집 화면에서 쓰이지 않는다.** 토큰과 그 유틸 클래스는 발행돼 있지만 [src:2], 그 사용처가 HTML 5 · JS 71 에서 0건이고(≈ 보드 판독 · 공개 출처 없음), 화면은 emotion 리터럴로 칠한다. 프리뷰가 층 A 이름으로 그린 자리는 실제 화면과 갈릴 수 있다. - **모바일 상세 화면을 관찰하지 못했다.** 375 에서 상세 본문이 접히지 않고 데스크톱 배치로 잘려 그려졌고, 코드의 하단 고정 구매바도 렌더에 나오지 않았다 [src:18][src:26]. - **굵기 900 의 실제 렌더를 모른다.** 히어로 제목이 900 을 지정하지만 Pretendard @font-face 범위가 300–700 이라 [src:24], 실제로 몇으로 그려지는지 확인되지 않았다. - **움직임 줄이기 대응이 없다.** `prefers-reduced-motion` 이 수집 파일 HTML 5 · JS 71 · CSS 14 에서 0건이었다(≈ 보드 판독 · 공개 출처 없음). 배너 캐러셀의 자동 넘김 [src:16]을 빌리려면 소비자가 채워야 한다. - **로고 이용 조건을 확인하지 못했다.** 심볼·워드마크 공개 글에 여백·최소 크기·색 변형 규정이 없고, 이용 허락 문구도 찾지 못했다 [src:7]. 게시된 아이콘 변형은 전부 흰 바탕 불투명이라 투명 공식 변형이 없다(≈). ## References 안정 진입점은 ridibooks.com 이다[src:1]. "(해시 번들)" 표시가 붙은 항목은 경로의 빌드 디렉터리와 파일명 해시가 배포마다 바뀐다. 2번은 홈이 불러오는 `--ridi-*` 정의 CSS 로, 3번은 emotion 테마(`blue` 키)·`BreakPoint`·`ZIndexLayer` 를 정의한 JS 청크로 홈 HTML 에서 다시 찾는다. 1. https://ridibooks.com/ — 리디 웹 홈(만화). 메타(`msapplication-TileColor` · `theme-color`)와 인라인 전역 CSS 는 원문 HTML 에만 있고 마크다운 변환 결과에는 안 나온다 2. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/2ethfubrjwnx3.css — (해시 번들) `--ridi-*` 토큰 파일. 운영 빌드 산출물이고 라이선스 고지가 없다. 수집 화면(HTML 5 · JS 71)에서 이 이름과 그 유틸 클래스의 사용처는 확인되지 않았다 — 화면은 emotion 테마의 리터럴 값으로 칠한다 3. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/24q01dois7pyq.js — (해시 번들) emotion 테마 · BreakPoint · ZIndexLayer · 옛 팔레트 객체 4. https://ridicorp.com/2022/03/ridi_brand_renewal/ — 리디 브랜드 리뉴얼 보도자료. 직접 조회는 HTTP 403 이라 웨이백 사본으로 읽힌다 5. https://brunch.co.kr/@rididesign/3 — 리디 디자인팀 글. 리디 블루 선정 과정 6. https://brunch.co.kr/@rididesign/1 — 리디 디자인팀 글. 브랜드 에센스 · 슬로건 · 브랜드 위계 7. https://brunch.co.kr/@rididesign/5 — 리디 디자인팀 글. 심볼 'R' 과 워드마크 8. https://ridibooks.com/webtoon/recommendation — 웹툰 홈 9. https://ridibooks.com/books/4766000001 — 웹툰 상세. 컴포넌트 CSS 는 원문 HTML 의 인라인 emotion 스타일에만 있다 10. https://ridibooks.com/books/845057904 — 만화 e북 상세. 메타와 인라인 emotion CSS(구매 버튼 · 관심 알약 치수)는 원문 HTML 에만 있다 11. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/media/favicon-512x512.1cyy_bycddyab.png — (해시 번들) 사이트 아이콘 512px. 카탈로그 로고 원본 12. https://apps.apple.com/kr/app/id338813698 — App Store 리디 앱 페이지 13. https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/cd/ab/d0/cdabd09d-5c78-d1e3-5799-2a80e59a5f73/AppIcon-0-0-1x_U007emarketing-0-8-0-85-220.png/512x512bb.png — App Store 앱 아이콘(로고 대안, 채택하지 않음) 14. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/0d-e8wyl9jo7t.js — (해시 번들) 원형 화살표 · 맨 위로 버튼 15. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/0zzvuqqu1yfjb.js — (해시 번들) 장르 알약 16. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/1olus6ddrutne.js — (해시 번들) 배너 캐러셀 상수 · 히어로 17. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/3a_yseolhbvor.js — (해시 번들) 도서 카드 · 배지 · 별점 18. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/0gbp_78gr4iip.js — (해시 번들) 상세 · 하단 고정 구매바 19. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/2vj87jyhia5aa.js — (해시 번들) AppThemeProvider(테마 선택) 20. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/25z1iesmb3nnt.js — (해시 번들) 1170 컨테이너 · 무한 스크롤 드래그 이징 21. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/1uc0h5t-1snq-.js — (해시 번들) 떠 있는 상자 그림자 22. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/34oie16683kj2.js — (해시 번들) 상세 배경 색 상수 · 999px 진행 막대 23. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/07ssoqeqp8vjq.js — (해시 번들) BreakPoint 15개 판 24. https://static.ridicdn.net/books-backend/p/081c5d/books/dist/css/common/pretendard.css — (해시 번들) Pretendard @font-face 25. https://static.ridicdn.net/books-backend/p/081c5d/books/dist/css/page_base_renewal.css — (해시 번들) 레거시 CSS 26. https://static.ridicdn.net/books-backend/p/081c5d/books/dist/css/page_detail_renewal.css — (해시 번들) 상세 레거시 CSS 27. https://static.ridicdn.net/books-backend/p/081c5d/store/dist/bookDetail.css — (해시 번들) 상세 레거시 CSS 28. https://static.ridicdn.net/books-backend/p/081c5d/store/dist/modal.css — (해시 번들) 레거시 CSS(스피너) 29. https://static.ridicdn.net/books-backend/p/081c5d/store/dist/base.css — (해시 번들) 레거시 CSS. `--dodgerblue_*` 등 옛 이름 변수 30. https://unpkg.com/@ridi/colors@0.7.1/hex.json — 옛 디자인 시스템 색 패키지(111색) 31. https://github.com/ridi/design-system — 옛 디자인 시스템 저장소. MIT, 아카이브 상태 32. https://ridicorp.com/ridibatang/ — 리디바탕 글꼴 소개. 직접 조회는 HTTP 403 이라 웨이백 사본으로 읽힌다 33. https://ridicorp.com/wp-content/uploads/2022/03/ridi.svg — 회사 사이트 워드마크 SVG 34. https://web.archive.org/web/20211022233111/https://ridi.design/colors/ — 옛 디자인 시스템 문서 사이트(색 페이지)의 웨이백 사본 35. https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400..700&display=swap — 상세 화면이 불러오는 Noto Sans KR 36. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/352t57z-gyyan.js — (해시 번들) 텍스트 모션 상수 37. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/12izop6p_2o-u.js — (해시 번들) 헤더 워드마크 SVG 컴포넌트