oh-my-design-cli 1.8.7 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (247) hide show
  1. package/.claude/hooks/lib/preferences-parser.cjs +1 -0
  2. package/.claude/hooks/lib/preferences-writer.cjs +1 -0
  3. package/.claude/hooks/post-edit-watch.cjs +1 -0
  4. package/.claude/hooks/session-end-foldin.cjs +1 -0
  5. package/.claude/hooks/session-state-loader.cjs +1 -0
  6. package/.claude/hooks/skill-activation.cjs +1 -0
  7. package/.claude/settings.json +10 -1
  8. package/.github/assets/logo-bg.png +0 -0
  9. package/AGENTS.md +20 -1
  10. package/CHANGELOG.md +482 -0
  11. package/MIGRATION.md +103 -0
  12. package/README.ja.md +56 -19
  13. package/README.ko.md +47 -30
  14. package/README.md +48 -30
  15. package/README.zh-TW.md +59 -22
  16. package/agents/AGENT.md +8 -7
  17. package/agents/omd-codex-image.md +1 -1
  18. package/agents/omd-critic.md +6 -7
  19. package/agents/omd-designer-review.md +1 -1
  20. package/agents/omd-final-qa.md +1 -1
  21. package/agents/omd-humanizer.md +38 -0
  22. package/agents/omd-kr-writer.md +3 -4
  23. package/agents/omd-locale-adapter.md +12 -16
  24. package/agents/omd-master.md +24 -19
  25. package/agents/omd-microcopy.md +1 -1
  26. package/agents/omd-orchestrator.md +7 -8
  27. package/agents/omd-slop-auditor.md +31 -0
  28. package/agents/omd-ux-researcher.md +1 -1
  29. package/data/reference-fingerprints.json +1995 -38
  30. package/dist/bin/oh-my-design.js +16 -8
  31. package/dist/bin/oh-my-design.js.map +1 -1
  32. package/dist/chunk-UJIHCEYF.js +99 -0
  33. package/dist/chunk-UJIHCEYF.js.map +1 -0
  34. package/dist/doctor-LDWSFM3I.js +763 -0
  35. package/dist/doctor-LDWSFM3I.js.map +1 -0
  36. package/dist/install-skills-ZZFNJ2II.js +1120 -0
  37. package/dist/install-skills-ZZFNJ2II.js.map +1 -0
  38. package/docs/CLI_QUICKSTART.md +157 -0
  39. package/package.json +25 -4
  40. package/scripts/postinstall.cjs +5 -4
  41. package/skills/claude-design/SKILL.md +38 -14
  42. package/skills/claude-design/references/claude-design-flow.md +11 -11
  43. package/skills/claude-design/references/codebase-analysis.md +5 -4
  44. package/skills/omd-final-qa/SKILL.md +1 -1
  45. package/skills/omd-harness/SKILL.md +51 -50
  46. package/skills/omd-humanize/SKILL.md +116 -0
  47. package/skills/omd-humanize/agents/openai.yaml +4 -0
  48. package/skills/omd-humanize/references/locale-playbooks.md +102 -0
  49. package/skills/omd-humanize/references/sources.md +11 -0
  50. package/skills/omd-init/SKILL.md +18 -12
  51. package/skills/omd-locale-adapter/SKILL.md +58 -91
  52. package/skills/omd-orchestrator/SKILL.md +11 -5
  53. package/skills/omd-reference-capture/SKILL.md +80 -26
  54. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
  55. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
  56. package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
  57. package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
  58. package/skills/omd-slop-audit/SKILL.md +110 -0
  59. package/skills/omd-slop-audit/agents/openai.yaml +4 -0
  60. package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
  61. package/skills/omd-slop-audit/references/sources.md +24 -0
  62. package/web/references/104/DESIGN.md +354 -0
  63. package/web/references/11st/DESIGN.md +197 -316
  64. package/web/references/29cm/DESIGN.md +297 -393
  65. package/web/references/42dot/DESIGN.md +390 -0
  66. package/web/references/8percent/DESIGN.md +438 -0
  67. package/web/references/ably/DESIGN.md +267 -572
  68. package/web/references/acer/DESIGN.md +329 -0
  69. package/web/references/airbnb/DESIGN.md +219 -557
  70. package/web/references/alipay/DESIGN.md +179 -420
  71. package/web/references/apple/DESIGN.md +224 -498
  72. package/web/references/asleep/DESIGN.md +402 -0
  73. package/web/references/au/DESIGN.md +334 -0
  74. package/web/references/autopedia/DESIGN.md +382 -0
  75. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  76. package/web/references/baemin/DESIGN.md +332 -491
  77. package/web/references/banksalad/DESIGN.md +269 -180
  78. package/web/references/barogo/DESIGN.md +416 -0
  79. package/web/references/beusable/DESIGN.md +464 -0
  80. package/web/references/bilibili/DESIGN.md +206 -374
  81. package/web/references/bmw/DESIGN.md +162 -276
  82. package/web/references/brandi/DESIGN.md +184 -325
  83. package/web/references/catchtable/DESIGN.md +219 -264
  84. package/web/references/cgv/DESIGN.md +317 -0
  85. package/web/references/channeltalk/DESIGN.md +210 -336
  86. package/web/references/china-airlines/DESIGN.md +291 -0
  87. package/web/references/cjonstyle/DESIGN.md +453 -0
  88. package/web/references/class101/DESIGN.md +168 -387
  89. package/web/references/classum/DESIGN.md +228 -203
  90. package/web/references/claude/DESIGN.md +242 -479
  91. package/web/references/clay/DESIGN.md +179 -377
  92. package/web/references/clickhouse/DESIGN.md +254 -343
  93. package/web/references/cohere/DESIGN.md +214 -324
  94. package/web/references/coinone/DESIGN.md +199 -179
  95. package/web/references/corca/DESIGN.md +414 -0
  96. package/web/references/coupang/DESIGN.md +205 -475
  97. package/web/references/cursor/DESIGN.md +240 -381
  98. package/web/references/dabang/DESIGN.md +248 -213
  99. package/web/references/dable/DESIGN.md +431 -0
  100. package/web/references/datarize/DESIGN.md +217 -330
  101. package/web/references/dealicious/DESIGN.md +402 -0
  102. package/web/references/drdiary/DESIGN.md +404 -0
  103. package/web/references/elastic/DESIGN.md +238 -0
  104. package/web/references/elevenlabs/DESIGN.md +183 -321
  105. package/web/references/eslite/DESIGN.md +257 -0
  106. package/web/references/evaair/DESIGN.md +338 -0
  107. package/web/references/expo/DESIGN.md +238 -331
  108. package/web/references/familymart-tw/DESIGN.md +254 -0
  109. package/web/references/ferrari/DESIGN.md +160 -377
  110. package/web/references/figma/DESIGN.md +197 -451
  111. package/web/references/fitpet/DESIGN.md +445 -0
  112. package/web/references/flex/DESIGN.md +170 -253
  113. package/web/references/framer/DESIGN.md +197 -340
  114. package/web/references/freee/DESIGN.md +211 -533
  115. package/web/references/friendliai/DESIGN.md +431 -0
  116. package/web/references/frip/DESIGN.md +440 -0
  117. package/web/references/gangnamunni/DESIGN.md +154 -591
  118. package/web/references/gaudiolab/DESIGN.md +414 -0
  119. package/web/references/google/DESIGN.md +290 -398
  120. package/web/references/hashicorp/DESIGN.md +273 -318
  121. package/web/references/heydealer/DESIGN.md +429 -0
  122. package/web/references/humanscape/DESIGN.md +433 -0
  123. package/web/references/hyundai/DESIGN.md +158 -368
  124. package/web/references/hyundaicard/DESIGN.md +171 -121
  125. package/web/references/ibm/DESIGN.md +227 -378
  126. package/web/references/idus/DESIGN.md +450 -0
  127. package/web/references/igaworks/DESIGN.md +437 -0
  128. package/web/references/inflearn/DESIGN.md +221 -366
  129. package/web/references/intuit/DESIGN.md +244 -0
  130. package/web/references/jandi/DESIGN.md +191 -291
  131. package/web/references/jobplanet/DESIGN.md +415 -0
  132. package/web/references/kakao/DESIGN.md +287 -475
  133. package/web/references/kakaobank/DESIGN.md +220 -521
  134. package/web/references/kakaogames/DESIGN.md +220 -0
  135. package/web/references/kakaopay/DESIGN.md +207 -526
  136. package/web/references/karrot/DESIGN.md +227 -251
  137. package/web/references/kb-kookmin/DESIGN.md +308 -0
  138. package/web/references/kbank/DESIGN.md +220 -175
  139. package/web/references/kmong/DESIGN.md +281 -356
  140. package/web/references/krds/DESIGN.md +245 -19
  141. package/web/references/kream/DESIGN.md +224 -359
  142. package/web/references/kurly/DESIGN.md +211 -533
  143. package/web/references/lamborghini/DESIGN.md +198 -360
  144. package/web/references/lguplus/DESIGN.md +259 -0
  145. package/web/references/likelion/DESIGN.md +283 -0
  146. package/web/references/line/DESIGN.md +396 -355
  147. package/web/references/linear.app/DESIGN.md +209 -562
  148. package/web/references/lotteon/DESIGN.md +386 -0
  149. package/web/references/lovable/DESIGN.md +255 -349
  150. package/web/references/makinarocks/DESIGN.md +149 -349
  151. package/web/references/maum-ai/DESIGN.md +423 -0
  152. package/web/references/medibloc/DESIGN.md +425 -0
  153. package/web/references/megabox/DESIGN.md +232 -0
  154. package/web/references/mercari/DESIGN.md +217 -434
  155. package/web/references/microsoft/DESIGN.md +234 -388
  156. package/web/references/mildang/DESIGN.md +411 -0
  157. package/web/references/millie/DESIGN.md +183 -504
  158. package/web/references/minimax/DESIGN.md +264 -322
  159. package/web/references/miricanvas/DESIGN.md +182 -355
  160. package/web/references/miro/DESIGN.md +234 -232
  161. package/web/references/mistral.ai/DESIGN.md +231 -314
  162. package/web/references/mixi/DESIGN.md +234 -0
  163. package/web/references/moin/DESIGN.md +445 -0
  164. package/web/references/mongodb/DESIGN.md +219 -316
  165. package/web/references/musinsa/DESIGN.md +184 -510
  166. package/web/references/mynavi/DESIGN.md +242 -0
  167. package/web/references/myrealtrip/DESIGN.md +169 -406
  168. package/web/references/naver/DESIGN.md +328 -499
  169. package/web/references/naverwebtoon/DESIGN.md +172 -395
  170. package/web/references/nhn/DESIGN.md +169 -346
  171. package/web/references/nhncloud/DESIGN.md +185 -123
  172. package/web/references/notion/DESIGN.md +271 -475
  173. package/web/references/nrise/DESIGN.md +417 -0
  174. package/web/references/ohouse/DESIGN.md +210 -549
  175. package/web/references/oliveyoung/DESIGN.md +217 -326
  176. package/web/references/ollama/DESIGN.md +241 -308
  177. package/web/references/onestore/DESIGN.md +248 -0
  178. package/web/references/palantir/DESIGN.md +256 -0
  179. package/web/references/panasonic/DESIGN.md +276 -0
  180. package/web/references/patternfly/DESIGN.md +259 -0
  181. package/web/references/payhere/DESIGN.md +438 -0
  182. package/web/references/pega/DESIGN.md +262 -0
  183. package/web/references/peoplefund/DESIGN.md +431 -0
  184. package/web/references/petfriends/DESIGN.md +428 -0
  185. package/web/references/pinkfong/DESIGN.md +199 -367
  186. package/web/references/pinterest/DESIGN.md +258 -308
  187. package/web/references/poya/DESIGN.md +286 -0
  188. package/web/references/pozalabs/DESIGN.md +438 -0
  189. package/web/references/protopie/DESIGN.md +419 -0
  190. package/web/references/qraft/DESIGN.md +448 -0
  191. package/web/references/quotabook/DESIGN.md +449 -0
  192. package/web/references/recruit/DESIGN.md +247 -0
  193. package/web/references/remember/DESIGN.md +202 -396
  194. package/web/references/resend/DESIGN.md +274 -348
  195. package/web/references/sakura-internet/DESIGN.md +269 -0
  196. package/web/references/samsung/DESIGN.md +157 -359
  197. package/web/references/sandoll/DESIGN.md +445 -0
  198. package/web/references/sanity/DESIGN.md +241 -375
  199. package/web/references/scatterlab/DESIGN.md +412 -0
  200. package/web/references/selectstar/DESIGN.md +439 -0
  201. package/web/references/servicenow/DESIGN.md +289 -0
  202. package/web/references/shinhanbank/DESIGN.md +161 -341
  203. package/web/references/shinhancard/DESIGN.md +208 -319
  204. package/web/references/sionic/DESIGN.md +454 -0
  205. package/web/references/sktelecom/DESIGN.md +310 -0
  206. package/web/references/socar/DESIGN.md +125 -32
  207. package/web/references/softbank/DESIGN.md +231 -0
  208. package/web/references/sony/DESIGN.md +234 -0
  209. package/web/references/soop/DESIGN.md +261 -0
  210. package/web/references/spacex/DESIGN.md +184 -323
  211. package/web/references/spotify/DESIGN.md +253 -394
  212. package/web/references/squeezebits/DESIGN.md +441 -0
  213. package/web/references/stayfolio/DESIGN.md +422 -0
  214. package/web/references/stripe/DESIGN.md +212 -491
  215. package/web/references/supabase/DESIGN.md +244 -316
  216. package/web/references/tabling/DESIGN.md +415 -0
  217. package/web/references/taishinbank/DESIGN.md +243 -0
  218. package/web/references/teamlab/DESIGN.md +240 -0
  219. package/web/references/teamsparta/DESIGN.md +472 -0
  220. package/web/references/tellingme/DESIGN.md +392 -0
  221. package/web/references/tesla/DESIGN.md +244 -427
  222. package/web/references/thsr/DESIGN.md +284 -0
  223. package/web/references/thumbtack/DESIGN.md +302 -0
  224. package/web/references/together.ai/DESIGN.md +257 -304
  225. package/web/references/toss/DESIGN.md +251 -593
  226. package/web/references/toss-securities/DESIGN.md +255 -178
  227. package/web/references/tossbank/DESIGN.md +195 -491
  228. package/web/references/toyota/DESIGN.md +238 -0
  229. package/web/references/tving/DESIGN.md +197 -245
  230. package/web/references/typed/DESIGN.md +413 -0
  231. package/web/references/uber/DESIGN.md +256 -333
  232. package/web/references/udn/DESIGN.md +250 -0
  233. package/web/references/upbit/DESIGN.md +145 -256
  234. package/web/references/upstage/DESIGN.md +211 -204
  235. package/web/references/uswds/DESIGN.md +287 -0
  236. package/web/references/vercel/DESIGN.md +236 -440
  237. package/web/references/wanted/DESIGN.md +215 -487
  238. package/web/references/wise/DESIGN.md +223 -231
  239. package/web/references/wisetracker/DESIGN.md +462 -0
  240. package/web/references/wooribank/DESIGN.md +245 -0
  241. package/web/references/yanolja/DESIGN.md +250 -419
  242. package/web/references/yeogiotte/DESIGN.md +235 -418
  243. package/web/references/zapier/DESIGN.md +256 -377
  244. package/web/references/zendesk/DESIGN.md +288 -0
  245. package/web/references/zigzag/DESIGN.md +200 -621
  246. package/dist/install-skills-7UUDOLG2.js +0 -734
  247. package/dist/install-skills-7UUDOLG2.js.map +0 -1
@@ -4,419 +4,293 @@ name: Channel Talk
4
4
  country: KR
5
5
  category: saas
6
6
  homepage: "https://channel.io"
7
- primary_color: "#4f46e5"
7
+ primary_color: "#242428"
8
8
  logo:
9
9
  type: github
10
10
  slug: channel-io
11
- verified: "2026-05-14"
11
+ verified: "2026-07-12"
12
12
  omd: "0.1"
13
13
  ds:
14
14
  name: Bezier
15
15
  url: "https://github.com/channel-io/bezier-react"
16
16
  type: system
17
- description: Channel Talk's open-source design system Bezier (MIT). Inter + Noto KR/JP type stacks, token/component/icon packages, marketing-vs-product type cliff documented.
17
+ description: Channel Talk's open-source product design system and component implementation. It is retained as official product-system context, not used to overwrite current public marketing tokens.
18
18
  og_image: "https://opengraph.githubassets.com/d5fd6836ec938de2c8399cf28b2ceabc49104fbbf86e937f9e89983f1b50d638/channel-io/bezier-react"
19
+ verification_v2:
20
+ schema: 2
21
+ checked: "2026-07-12"
22
+ surfaces:
23
+ - { id: home, kind: marketing-product, url: "https://channel.io/kr", inspected: "2026-07-12" }
24
+ - { id: us, kind: marketing-product, url: "https://channel.io/us", inspected: "2026-07-12" }
25
+ - { id: updates, kind: product-doc, url: "https://docs.channel.io/updates/en/articles/Notice-Channel-Talk-Major-Updates--b3d45997", inspected: "2026-07-12" }
26
+ - { id: help, kind: product-doc, url: "https://docs.channel.io/help/en/articles/94f34984", inspected: "2026-07-12" }
27
+ - { id: rebrand, kind: official-history, url: "https://channel.io/kr/blog/articles/rebranding-channeltalk-3aff8113", inspected: "2026-07-12" }
28
+ sources:
29
+ - { id: home-live, kind: product-surface, url: "https://channel.io/kr", captured: "2026-07-12" }
30
+ - { id: us-live, kind: product-surface, url: "https://channel.io/us", captured: "2026-07-12" }
31
+ - { id: updates-live, kind: official-doc, url: "https://docs.channel.io/updates/en/articles/Notice-Channel-Talk-Major-Updates--b3d45997", captured: "2026-07-12" }
32
+ - { id: help-live, kind: official-doc, url: "https://docs.channel.io/help/en/articles/94f34984", captured: "2026-07-12" }
33
+ - { id: rebrand-official, kind: official-doc, url: "https://channel.io/kr/blog/articles/rebranding-channeltalk-3aff8113", captured: "2026-07-12" }
34
+ - { id: bezier-official, kind: official-doc, url: "https://github.com/channel-io/bezier-react", captured: "2026-07-12" }
35
+ conflicts: []
36
+ claims:
37
+ "tokens.colors.primary": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-12" }
38
+ "tokens.colors.canvas": *home_evidence
39
+ "tokens.colors.surface": *home_evidence
40
+ "tokens.colors.foreground": *home_evidence
41
+ "tokens.colors.secondary": *home_evidence
42
+ "tokens.colors.dark-surface": *home_evidence
43
+ "tokens.colors.hairline": *home_evidence
44
+ "tokens.colors.on-primary": *home_evidence
45
+ "tokens.typography.family.ui": *home_evidence
46
+ "tokens.typography.family.marketing": *home_evidence
47
+ "tokens.typography.family.docs": &docs_evidence { surface_id: updates, source_id: updates-live, method: live-inspect, captured: "2026-07-12" }
48
+ "tokens.typography.marketing-heading.size": *home_evidence
49
+ "tokens.typography.marketing-heading.weight": *home_evidence
50
+ "tokens.typography.marketing-heading.lineHeight": *home_evidence
51
+ "tokens.typography.marketing-heading.tracking": *home_evidence
52
+ "tokens.typography.marketing-heading.use": *home_evidence
53
+ "tokens.typography.marketing-body.size": *home_evidence
54
+ "tokens.typography.marketing-body.weight": *home_evidence
55
+ "tokens.typography.marketing-body.lineHeight": *home_evidence
56
+ "tokens.typography.marketing-body.tracking": *home_evidence
57
+ "tokens.typography.marketing-body.use": *home_evidence
58
+ "tokens.typography.marketing-tab.size": *home_evidence
59
+ "tokens.typography.marketing-tab.weight": *home_evidence
60
+ "tokens.typography.marketing-tab.lineHeight": *home_evidence
61
+ "tokens.typography.marketing-tab.tracking": *home_evidence
62
+ "tokens.typography.marketing-tab.use": *home_evidence
63
+ "tokens.typography.docs-body.size": *docs_evidence
64
+ "tokens.typography.docs-body.weight": *docs_evidence
65
+ "tokens.typography.docs-body.lineHeight": *docs_evidence
66
+ "tokens.typography.docs-body.tracking": *docs_evidence
67
+ "tokens.typography.docs-body.use": *docs_evidence
68
+ "tokens.spacing.xs": *home_evidence
69
+ "tokens.spacing.sm": *home_evidence
70
+ "tokens.spacing.md": *home_evidence
71
+ "tokens.spacing.lg": *home_evidence
72
+ "tokens.spacing.xl": *home_evidence
73
+ "tokens.rounded.control": *docs_evidence
74
+ "tokens.rounded.utility": *docs_evidence
75
+ "tokens.rounded.card": *home_evidence
76
+ "tokens.rounded.full": *home_evidence
77
+ "tokens.shadow.flat": *home_evidence
78
+ "tokens.components.marketing-primary.type": *home_evidence
79
+ "tokens.components.marketing-primary.bg": *home_evidence
80
+ "tokens.components.marketing-primary.fg": *home_evidence
81
+ "tokens.components.marketing-primary.radius": *home_evidence
82
+ "tokens.components.marketing-primary.padding": *home_evidence
83
+ "tokens.components.marketing-primary.font": *home_evidence
84
+ "tokens.components.marketing-primary.states": *home_evidence
85
+ "tokens.components.marketing-primary.use": *home_evidence
86
+ "tokens.components.marketing-outline.type": *home_evidence
87
+ "tokens.components.marketing-outline.bg": *home_evidence
88
+ "tokens.components.marketing-outline.fg": *home_evidence
89
+ "tokens.components.marketing-outline.border": *home_evidence
90
+ "tokens.components.marketing-outline.radius": *home_evidence
91
+ "tokens.components.marketing-outline.padding": *home_evidence
92
+ "tokens.components.marketing-outline.font": *home_evidence
93
+ "tokens.components.marketing-outline.states": *home_evidence
94
+ "tokens.components.marketing-outline.use": *home_evidence
95
+ "tokens.components.marketing-card.type": *home_evidence
96
+ "tokens.components.marketing-card.bg": *home_evidence
97
+ "tokens.components.marketing-card.border": *home_evidence
98
+ "tokens.components.marketing-card.radius": *home_evidence
99
+ "tokens.components.marketing-card.padding": *home_evidence
100
+ "tokens.components.marketing-card.use": *home_evidence
101
+ "tokens.components.marketing-tab.type": *home_evidence
102
+ "tokens.components.marketing-tab.bg": *home_evidence
103
+ "tokens.components.marketing-tab.fg": *home_evidence
104
+ "tokens.components.marketing-tab.radius": *home_evidence
105
+ "tokens.components.marketing-tab.padding": *home_evidence
106
+ "tokens.components.marketing-tab.font": *home_evidence
107
+ "tokens.components.marketing-tab.states": *home_evidence
108
+ "tokens.components.marketing-tab.use": *home_evidence
109
+ "tokens.components.docs-icon-button.type": *docs_evidence
110
+ "tokens.components.docs-icon-button.bg": *docs_evidence
111
+ "tokens.components.docs-icon-button.fg": *docs_evidence
112
+ "tokens.components.docs-icon-button.radius": *docs_evidence
113
+ "tokens.components.docs-icon-button.states": *docs_evidence
114
+ "tokens.components.docs-icon-button.use": *docs_evidence
19
115
  tokens:
20
- source: prose-derived
21
- extracted: "2026-06-08"
22
- note: "primary = live product-chrome accent Cobalt 400 (#329BE7); frontmatter primary_color (#4f46e5) is the registry indigo and is NOT a Bezier token — drift documented"
116
+ source: reconciled
117
+ extracted: "2026-07-12"
118
+ note: "Five current first-party surfaces. Marketing and product-doc domains are intentionally separate. Legacy universal Cobalt, BildV5, generic form, synthetic state, and inferred motion claims are not promoted."
23
119
  colors:
24
- primary: "#329BE7"
25
- primary-hover: "#327AB8"
26
- brand: "#329BE7"
27
- canvas: "#FFFFFF"
28
- surface: "#FCFCFC"
29
- canvas-tint: "#F7F7F8"
30
- hairline: "#EFEFF0"
31
- foreground: "#313234"
32
- body: "#464748"
33
- muted: "#A7A7AA"
34
- on-primary: "#FFFFFF"
35
- cta-dark: "#242428"
36
- accent-light: "#47C8FF"
37
- info: "#5E56F0"
38
- success: "#31A552"
39
- caution: "#EDBC40"
40
- error: "#E94E58"
120
+ primary: "#242428"
121
+ canvas: "#ffffff"
122
+ surface: "#f7f6f3"
123
+ foreground: "#000000"
124
+ secondary: "#716f6d"
125
+ dark-surface: "#3a3530"
126
+ hairline: "#e4e4e5"
127
+ on-primary: "#ffffff"
41
128
  typography:
42
- family: { sans: "Inter, NotoSansKR, NotoSansJP", mono: "ui-monospace, Cascadia Code, Source Code Pro, Menlo" }
43
- size-16: { size: 16, weight: 400, lineHeight: 1.5, tracking: -0.1, use: "Standard body text (product chrome)" }
44
- size-15: { size: 15, weight: 400, lineHeight: 1.33, tracking: -0.1, use: "Nav links, dense body" }
45
- size-18: { size: 18, weight: 400, lineHeight: 1.33, use: "Subhead / product CTA label" }
46
- size-22: { size: 22, weight: 700, lineHeight: 1.27, tracking: -0.4, use: "Section subhead" }
47
- size-24: { size: 24, weight: 700, lineHeight: 1.33, tracking: -0.4, use: "Card heading" }
48
- size-36: { size: 36, weight: 700, lineHeight: 1.22, tracking: -0.4, use: "Product-chrome max heading" }
49
- hero-h1: { size: 64, weight: 700, lineHeight: 1.375, tracking: -1.5, use: "Marketing hero (brand-layer only)" }
50
- section-h2-xl: { size: 54, weight: 600, lineHeight: 1.33, tracking: -1.5, use: "Marketing section h2 on dark" }
51
- section-h2-lg: { size: 48, weight: 600, lineHeight: 1.33, tracking: -1, use: "Marketing section h2" }
52
- spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
53
- rounded: { sm: 8, chip: 8, product: 8, cta: 18, card: 20, band: 32, ladder-max: 44, full: 9999 }
129
+ family: { ui: "Pretendard", marketing: "Pretendard", docs: "Inter" }
130
+ marketing-heading: { size: 44, weight: 600, lineHeight: 1.41, tracking: -0.88, use: "Large current marketing headings" }
131
+ marketing-body: { size: 18, weight: 400, lineHeight: 1.56, tracking: -0.18, use: "Current marketing body and action copy" }
132
+ marketing-tab: { size: 16, weight: 600, lineHeight: 1.56, tracking: -0.16, use: "Interactive marketing category tabs" }
133
+ docs-body: { size: 17, weight: 400, lineHeight: 1.59, tracking: -0.1, use: "English product documentation body" }
134
+ spacing: { xs: 4, sm: 6, md: 10, lg: 20, xl: 30 }
135
+ rounded: { control: 6, utility: 8, card: 35, full: 9999 }
54
136
  shadow:
55
- flat: "none (live homepage leans flat — depth via surface tint + border alpha)"
56
- popover: "subtle drop-shadow + rgba(0,0,0,0.05) border (Level 3)"
57
- modal: "full shadow + rgba(0,0,0,0.3) scrim (Level 4)"
137
+ flat: "none"
58
138
  components_harvested: true
59
139
  components:
60
- button-primary: { type: button, bg: "#242428", fg: "#FFFFFF", radius: "18px", padding: "8px 24px", height: "64px", font: "18px / 600", use: "Marketing hero CTA top-of-funnel Sign Up only" }
61
- button-secondary: { type: button, bg: "rgba(0,0,0,0.05)", fg: "rgba(0,0,0,0.85)", radius: "16px", padding: "8px 20px", height: "54px", font: "20px / 700", use: "Section View Details pivots, not primary" }
62
- button-cobalt: { type: button, bg: "#329BE7", fg: "#FFFFFF", radius: "8px", hover: "cobalt-400-20 #329BE733 ghost fill", use: "In-product primary action (Inbox CTA, send-message)" }
63
- input: { type: input, bg: "#FFFFFF", border: "1px solid rgba(0,0,0,0.05)", radius: "8px", padding: "8px 12px", focus: "cobalt-400-30 #329BE74D ring", use: "Bezier form input" }
64
- card: { type: card, bg: "rgb(250,154,240)", fg: "rgba(0,0,0,0.85)", radius: "20px", height: "400px", use: "Theatrical-colored AI Messenger feature card (marketing)" }
65
- cta-band: { type: card, bg: "transparent", radius: "32px", padding: "16px", use: "Bottom Experience It Yourself conversion band, full-bleed" }
66
- nav-link: { type: tab, bg: "transparent", fg: "rgba(0,0,0,0.85)", font: "15px / 400", active: "2px bottom-border indicator", use: "Nav menu items" }
140
+ marketing-primary: { type: button, bg: "#242428", fg: "#ffffff", radius: "9999px", padding: "10px 22px", font: "18px / 400", states: "default captured; no hover or focus token promoted", use: "Primary signup and conversion action on current KR/US marketing" }
141
+ marketing-outline: { type: button, bg: "transparent", fg: "#000000", border: "1px solid #242428", radius: "9999px", padding: "10px 22px", font: "18px / 400", states: "default captured; no hover or focus token promoted", use: "Secondary marketing conversion action" }
142
+ marketing-card: { type: card, bg: "#f7f6f3", border: "1px solid #e4e4e5", radius: "35px", padding: "30px 35px", use: "Current KR/US marketing information card" }
143
+ marketing-tab: { type: tab, bg: "transparent", fg: "#716f6d", radius: "9999px", padding: "6px 20px", font: "16px / 600", states: "selected and tab-selected observed in six safe expansions", use: "Interactive category switcher on current marketing" }
144
+ docs-icon-button: { type: button, bg: "transparent", fg: "rgba(0,0,0,0.85)", radius: "6px", states: "pressed state observed on current documentation controls", use: "Compact icon action in product documentation" }
67
145
  ---
68
146
 
69
147
  # Design System Inspiration of Channel Talk
70
148
 
71
149
  ## 1. Visual Theme & Atmosphere
72
150
 
73
- Channel Talk's marketing surface (`channel.io`) reads as a confident **B2B customer-service messenger** that has openly bet the company on the AI-agent shift. The page operates on a near-white canvas (`#FFFFFF` body with `#FCFCFC` / `#F7F7F8` surface tints from the Bezier `grey` ramp) and uses translucent off-black (`rgba(0,0,0,0.85)`) for body text rather than a hard `#000` a small but characteristic warmth that softens the otherwise engineering-leaning palette. The signature accent observed in product chrome is **Cobalt 400** (`#329BE7`) — Channel's primary brand blue while the homepage AI manifesto sections drop into a dark plum-purple canvas (`rgba(25,3,49,0.898)`) that visually quarantines the AI agent story from the surrounding helpdesk product story.
151
+ Channel Talk is a customer-service platform that joins live chat, team inbox, calls, marketing, workflows, and AI assistance around one ongoing customer relationship. Its public identity has evolved from a bright SaaS-accent story toward a warmer editorial system: current Korean and US pages pair black type with cream `#f7f6f3`, dark charcoal `#242428` conversion controls, generous photography, and rounded 35px information cards. The result feels conversational and human despite the product's operational depth. Official rebrand writing explains that this warmth is intentional—Channel Talk wanted a clearer, more authentic expression of its customer-first culture rather than a generic software identity.
74
152
 
75
- Typography is **Inter** (with `NotoSansKR` / `NotoSansJP` tied for fallback depending on locale). The Bezier DS product scale tops out at **36px / 44px line-height**, but the marketing surface deliberately breaks that ceiling for editorial hero/sectional moments a 64px / 88px-lh / -1.5px-tracking `h1` and a 54px / 72px-lh `h2` give the homepage a sectional, almost manifesto rhythm that the in-product chrome never uses. Negative tracking is light by default (`-0.1px` at 15-17px, `-0.4px` at 22-36px), tightening at the marketing tier (`-1px` at 48px, `-1.5px` at hero).
153
+ The product-documentation domain is visually related but technically separate. Marketing loads Pretendard and uses 18px reading copy, 44px sectional headings, and full-pill actions. English documentation loads an Inter alias and uses a tighter 17px/27px reading scale with compact 6–8px controls. This reference does not merge those two surfaces into a fictional universal stack. Bezier remains valuable official evidence that Channel maintains a real product design system, but a Bezier color does not become a current marketing token unless the inspected surface confirms it.
76
154
 
77
- What distinguishes Channel Talk visually is its **radius ladder discipline**: Bezier exposes 2 / 3 / 4 / 6 / 8 / 12 / 16 / 20 / 32 / 44 / 42% — and the marketing surface uses each tier intentionally. Primary CTAs land at **18px** (pill-tending without becoming capsules), product cards at **20px**, the bottom "Experience It Yourself" CTA band at **32px**, and small chips at **8px**. Cobalt 400 hover treatment also lives in the alpha ladder — `#329BE7` solid → `#329BE73D` / `#329BE71A` for subtle ghost states — a sign of a mature semantic-token system, not improvised tinting.
78
-
79
- **Key characteristics**
80
- - Canvas: white (`#FFFFFF`) with grey-50 / grey-100 surface tints (`#FCFCFC` / `#F7F7F8`)
81
- - Body text: translucent off-black `rgba(0, 0, 0, 0.85)` (141/118 sampled elements observed live)
82
- - Brand accent: **Cobalt 400 `#329BE7`** (`bezier.cobalt.400` + alpha ladder 10/20/30/40)
83
- - AI manifesto canvas: dark plum `rgba(25, 3, 49, 0.898)` (homepage AI section only)
84
- - Type: **Inter** primary, Bezier KR/JP stacks fall through Noto Sans KR/JP
85
- - Marketing hero: 64px / weight 700 / 1.375 line-height / `-1.5px` tracking
86
- - Radius ladder used by tier — 8px chips → 18px CTAs → 20px cards → 32px CTA bands
87
- - Easing default: `cubic-bezier(0.3, 0, 0, 1)` with 150 / 300 / 450ms duration tokens
155
+ **Key Characteristics:**
156
+ - Warm cream `#f7f6f3` marketing surfaces with black type and `#242428` primary actions
157
+ - Pretendard on current KR/US marketing; loaded Inter alias on English product documentation
158
+ - 35px editorial cards and full-pill conversion controls
159
+ - Selected marketing tabs captured through six safe interaction expansions
160
+ - Public Bezier implementation retained as product-system context, not substituted for uninspected app UI
88
161
 
89
162
  ## 2. Color Palette & Roles
90
163
 
91
- Source of truth: `github.com/channel-io/bezier-react/packages/bezier-tokens/src/global/color.json` (Bezier Design System, MIT). Each hue ships **300 / 400 / 500** weights plus a 4-step alpha ladder per weight (e.g., `300-40` = 40% alpha) — surfaced below by canonical role.
92
-
93
- ### Brand / accent
94
-
95
- - **Cobalt 400** (`#329BE7`): primary brand blue Channel Talk's product-chrome accent (live: 12 of 118 sampled elements)
96
- - **Cobalt 300** (`#47C8FF`): lighter cobalt illustrative / surface highlight
97
- - **Cobalt 500** (`#327AB8`): cobalt heavy pressed / hover-on-light
98
- - **Cobalt 400-30** (`#329BE74D`) / **400-20** (`#329BE733`) / **400-10** (`#329BE71A`): hover / focus / subtle ghost fills
99
-
100
- ### Foundation neutrals (`bezier.grey`)
101
-
102
- - **Grey 50** (`#FCFCFC`): elevated surface
103
- - **Grey 100** (`#F7F7F8`): canvas tint
104
- - **Grey 200** (`#EFEFF0`): divider light
105
- - **Grey 500** (`#A7A7AA`): muted text
106
- - **Grey 700** (`#464748`): body text on light (dark theme inverse)
107
- - **Grey 800** (`#313234`): heading on dark
108
- - **Grey 850** (`#2A2B2D`): dark surface
109
- - **Grey 900** (`#242428`): deepest dark — also `rgb(36,36,40)` observed live as primary CTA bg
164
+ ### Current marketing roles
165
+ - **Primary / conversion** (`#242428`): repeated filled signup and conversion controls.
166
+ - **Canvas** (`#ffffff`): page and neutral content canvas.
167
+ - **Warm surface** (`#f7f6f3`): repeated card and section background.
168
+ - **Foreground** (`#000000`): dominant marketing and documentation text.
169
+ - **Secondary** (`#716f6d`): marketing supporting copy and inactive tab labels.
170
+ - **Dark editorial surface** (`#3a3530`): repeated customer-case media field.
171
+ - **Hairline** (`#e4e4e5`): current 1px marketing-card border.
110
172
 
111
- ### Black / White alpha (`bezier.black` / `bezier.white`)
173
+ Bezier's historical Cobalt `#329BE7` is not promoted as a universal current primary: it was not the conversion color on the five captured public surfaces. Authenticated Inbox status colors remain unresolved.
112
174
 
113
- - **Black 85** (`#000000D9` = `rgba(0,0,0,0.85)`): canonical body text — 141 / 118 elements in live capture
114
- - **Black 60** (`rgba(0,0,0,0.6)`): secondary text
115
- - **Black 40 / 30 / 22 / 20 / 15 / 8 / 5 / 3**: full alpha ladder for borders, overlays, disabled tints
116
- - **White 100** (`#FFFFFF`): primary surface
117
- - **White 90 / 80 / 60 / 40 / 20 / 12 / 8 / 5**: full alpha ladder for inverted scrims, overlays
175
+ ## 3. Typography Rules
118
176
 
119
- ### Semantic hue family (each `300 / 400 / 500` + alpha 40/30/20/10)
177
+ ### Font evidence boundary
120
178
 
121
- - **Blue** 300 `#6687FF` · 400 `#5E56F0` · 500 `#4E40C9` — info / link-secondary
122
- - **Teal** 300 `#3CDDCD` · 400 `#0FB3A3` · 500 `#449C8A`
123
- - **Green** 300 `#3ACF5A` · 400 `#31A552` · 500 `#41904F` success
124
- - **Olive** 300 `#CAD548` · 400 `#A0A540` · 500 `#818628`
125
- - **Yellow** 300 `#FDD353` · 400 `#EDBC40` · 500 `#C39E37` caution
126
- - **Orange** 300 `#FFAB5C` · 400 `#F4800B` · 500 `#C57417`
127
- - **Red** 300 `#FF5C5C` · 400 `#E94E58` · 500 `#AC3E46` error / destructive
128
- - **Pink** 300 `#EC6FD3` · 400 `#CB48AD` · 500 `#A32E92`
129
- - **Purple** 300 `#B570FF` · 400 `#915CE0` · 500 `#6B23B3`
130
- - **Navy** 300 `#647CC9` · 400 `#3A4F8D` · 500 `#333D5B`
179
+ | Evidence class | Resolution |
180
+ |---|---|
181
+ | Official product-use | Bezier is an official product design-system implementation, but the inspected repository context is not treated as proof for every current private app surface. |
182
+ | Live surface-use | Pretendard loaded/high with 484 visible uses on marketing; Inter aliases loaded/high with 581 combined visible uses on product docs. |
183
+ | Official distributed asset | No Channel-exclusive redistributable brand font is promoted. |
184
+ | Declared-only | NotoSansKR, Poppins, fallback faces, and unused locale declarations remain metadata only. |
185
+ | Unresolved | Authenticated app overrides and unobserved locale behavior remain unresolved. |
131
186
 
132
- ### Marketing-only theatrical colors (homepage chrome, not Bezier tokens)
187
+ `NotoSansJP` was loaded for one visible body use and remains a surface-local observation, not the universal family. No BildV5 declaration or visible use appeared in the fresh capture, so it is omitted.
133
188
 
134
- - **AI canvas plum** (`rgba(25,3,49,0.898)`): the "AI Handles The Routine / You Handle The Strategy" panel
135
- - **AI plum deep** (`rgb(60,3,54)`): nested AI panel
136
- - **Inbox card pink** (`rgb(250,154,240)`): single illustrative card surface — not in token source
189
+ ### Current observed hierarchy
137
190
 
138
- ## 3. Typography Rules
139
-
140
- ### Font stack (Bezier `font.family`)
141
-
142
- - **Sans (KR locale)**: `Inter, NotoSansKR, "Noto Sans KR", NotoSansJP, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif`
143
- - **Sans (JP locale)**: `Inter, NotoSansJP, "Noto Sans JP", NotoSansKR, "Noto Sans KR", ...same fallbacks`
144
- - **Mono**: `ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace`
145
- - **Marketing display (homepage chrome only)**: `BildV5, "BildV5 Fallback"` (observed on 1 of 118 sampled elements — not a product token)
146
-
147
- ### Product-chrome scale (Bezier `typography.size`)
148
-
149
- | Token | Size | Line height | Letter spacing |
150
- |---|---|---|---|
151
- | 11 | 11px | 16px | — |
152
- | 12 | 12px | 16px | — |
153
- | 13 | 13px | 18px | — |
154
- | 14 | 14px | 18px | — |
155
- | 15 | 15px | 20px | -0.1px |
156
- | 16 | 16px | 24px | -0.1px |
157
- | 17 | 17px | 24px | -0.1px |
158
- | 18 | 18px | 24px | — |
159
- | 22 | 22px | 28px | -0.4px |
160
- | 24 | 24px | 32px | -0.4px |
161
- | 30 | 30px | 36px | -0.4px |
162
- | 36 | 36px | 44px | -0.4px |
163
-
164
- Weights ship at **400 (regular)** and **700 (bold)** only — Bezier does not stock a 500/600 mid-weight in product chrome.
165
-
166
- ### Marketing-surface extension (homepage observed live)
167
-
168
- | Role | Size | Weight | Line height | Letter spacing |
169
- |---|---|---|---|---|
170
- | Hero h1 | 64px | 700 | 88px | -1.5px |
171
- | Section h2 (XL, on dark) | 54px | 600 | 72px | -1.5px |
172
- | Section h2 (LG) | 48px | 600 | 64px | -1px |
173
- | CTA label (hero) | 18px | 600 | 26px | -0.4px |
174
- | Section "View Details" lead | 20px | 700 | 30px | -0.5px |
175
- | Nav link | 15px | 400 | 21.45px | normal |
176
-
177
- Note: weights 500 / 600 appear on marketing-surface headings but NOT in the Bezier source font weights — treat marketing scale as a brand-layer extension, not a product-chrome token.
191
+ | Role | Surface | Size | Weight | Line height | Tracking |
192
+ |---|---|---:|---:|---:|---:|
193
+ | Section heading | Marketing | 44px | 600 | 62px | -0.88px |
194
+ | Card heading | Marketing | 25px | 600 | 32px | -0.5px |
195
+ | Body / CTA | Marketing | 18px | 400 | 28px | -0.18px |
196
+ | Category tab | Marketing | 16px | 600 | 25px | -0.16px |
197
+ | Article heading | Docs | 24px | 700 | 34px | -0.5px |
198
+ | Article body | Docs | 17px | 400 | 27px | -0.1px |
178
199
 
179
200
  ## 4. Component Stylings
180
201
 
181
- ### Buttons
182
-
183
- **Primary (hero CTA — marketing surface)**
184
- - Background: `#242428` (grey 900, live captured as `rgb(36, 36, 40)` after rendering)
185
- - Text: `#FFFFFF`
186
- - Radius: 18px
187
- - Padding: 8px 24px
188
- - Label: 18px / weight 600 / 26px line-height / -0.4px tracking
189
- - Height: ~64px (label area; outer wrapper drives height)
190
- - Use: top-of-funnel "Sign Up for Free" only
191
-
192
- **Secondary (subtle pill — section CTAs)**
193
- - Background: `rgba(0, 0, 0, 0.05)`
194
- - Text: `rgba(0, 0, 0, 0.85)`
195
- - Radius: 16px
196
- - Padding: 8px 20px
197
- - Label: 20px / weight 700 / 30px line-height / -0.5px tracking
198
- - Height: ~54px
199
- - Use: "View Details" mid-section pivots; not a primary action
200
-
201
- **Tertiary (text link)**
202
- - Background: transparent
203
- - Text: `rgba(0, 0, 0, 0.6)`
204
- - Padding: 4px 6px
205
- - Border: none (underline on hover inferred from convention; not directly captured)
206
- - Use: "Learn more" inline references
207
-
208
- **Cobalt accent (in-product, inferred from Bezier semantic tokens)**
209
- - Background: `#329BE7` (cobalt 400)
210
- - Hover: `#329BE7` over `rgba(50, 155, 231, 0.2)` ghost fill (live observed `rgba(50,155,231,0.2)` = `#329BE733` = cobalt 400-20)
211
- - Text: `#FFFFFF`
212
- - Radius: 6px or 8px (product chrome — Bezier 6/8 tokens)
213
- - Use: primary action inside Channel Talk's product (Inbox CTA, send-message, etc.)
214
-
215
- ### Cards
216
-
217
- **AI Messenger feature card (marketing)**
218
- - Background: per-card theatrical color (e.g., `rgb(250, 154, 240)` pink for Inbox card)
219
- - Text: `rgba(0, 0, 0, 0.85)`
220
- - Radius: 20px
221
- - Padding: section-driven (no padding on outer `a` wrapper; inner content gets its own)
222
- - Width: 1160px on 1280-viewport (`100% - 120px` two-col gutters)
223
- - Height: 400px (fixed feature-card height)
224
- - Use: each Inbox / Meet / Team Chat / Workflow / Marketing / Docs surface gets one of these
225
-
226
- **CTA section wrapper ("Experience It Yourself")**
227
- - Background: transparent (content inside is the colored block)
228
- - Radius: 32px
229
- - Padding: 16px horizontal page-edge inset, vertical-driven
230
- - Width: ~1248px (`100% - 32px`)
231
- - Use: bottom-of-page conversion band
232
-
233
- ### Navigation
234
-
235
- - Nav menu items: Inter 15px / weight 400 / 21.45px line-height
236
- - Color: `rgba(0, 0, 0, 0.85)`
237
- - Padding: 10px 16px 8px 0px (asymmetric — visual underline indicator on bottom only)
238
- - Active indicator: 2px bottom border (border-bottom captured as `0px 0px 2px` on three sides + bottom)
239
- - Logo link: 194×40px wrapper, fg `rgb(82, 84, 99)` (grey-tinted)
240
- - Menu toggle button (mobile): `#FFFFFF` bg, 8px radius
241
-
242
- ### Form inputs
243
-
244
- - Source of truth: `bezier-tokens/src/semantic/input.json` (1.4KB — full input semantic surface in Bezier)
245
- - Surface (resting): `#FFFFFF` with `Black 8` (`rgba(0,0,0,0.05)`) border
246
- - Surface (focus): cobalt 400-30 (`#329BE74D`) outline ring
247
- - Radius: 6px or 8px (product chrome)
248
- - Padding (medium): vertical 8px, horizontal 12px (inferred from Bezier 6/8 sizing patterns)
202
+ ### Current verified components
249
203
 
250
- ## 5. Layout Principles
204
+ #### Marketing primary action
205
+ - `#242428` background, white label, full-pill radius
206
+ - 10px × 22px padding; Pretendard 18px/400/28px
207
+ - Default captured; no guessed hover/focus treatment
251
208
 
252
- **Page max width** (marketing): ~1248px content with 16px page-edge inset on 1280 viewport.
209
+ #### Marketing outline action
210
+ - Transparent background, black label, 1px `#242428` border
211
+ - Same full-pill geometry and type as the primary action
253
212
 
254
- **Grid**: 2-up / 3-up product card rows; the All-in-One AI Messenger section uses a horizontal pill nav (Inbox / Meet / Team Chat / Workflow / Marketing / Docs) that pivots the entire card content in place rather than scrolling — a non-trivial interaction pattern.
213
+ #### Marketing information card
214
+ - `#f7f6f3` surface, 1px `#e4e4e5` border, 35px radius
215
+ - 30px × 35px padding, with 10px internal gap in the captured variant
255
216
 
256
- **Spacing scale**: Bezier doesn't publish a separate spacing token file — instead, padding values cluster at: 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 60 / 64 / 80px (inferred from observed live values; Bezier semantic tokens use these as scale stops).
217
+ #### Marketing category tab
218
+ - Transparent surface, `#716f6d` label, full-pill hit area
219
+ - 6px × 20px padding; Pretendard 16px/600/25px
220
+ - Selected state was observed in six safe tab expansions across KR/US pages
257
221
 
258
- **Radius scale** (Bezier `radius`): 2, 3, 4, 6, 8, 12, 16, 20, 32, 44px, plus a special `42%` token for circular avatars (used by `bezier-react`'s avatar size scale where 42% gives the visual rounding without committing to a fixed px value).
222
+ #### Documentation icon action
223
+ - Transparent compact control with 6px radius
224
+ - Loaded Inter alias; pressed state observed
259
225
 
260
- **Surface elevation**: see §6.
226
+ Inputs, dialogs, toasts, authenticated inbox rows, and error/success patterns are not promoted because current inspectable evidence did not establish them at the required boundary.
261
227
 
262
- ## 6. Depth & Elevation
228
+ ## 5. Layout Principles
263
229
 
264
- Source: `bezier-tokens/src/semantic/elevation.json` (2.3KB). Bezier exposes a semantic elevation ladder rather than raw `box-shadow` tokens — every elevation is paired with a background surface so dark-theme inversion is automatic.
230
+ - Marketing uses wide centered sections with strong vertical breaks and generous 30–45px internal spacing.
231
+ - Editorial cards use large 35px corners; documentation controls remain compact at 6–8px.
232
+ - Do not transfer marketing's full-pill geometry to uninspected product controls.
233
+ - Preserve the separation between marketing composition and documentation density.
265
234
 
266
- - **Level 1** (resting card): `Grey 50` (`#FCFCFC`) surface + minimal shadow
267
- - **Level 2** (interactive card): `Grey 100` (`#F7F7F8`) surface + slight shadow
268
- - **Level 3** (popover / dropdown): subtle drop-shadow + `Black 8` border instead of pure shadow
269
- - **Level 4** (modal / sheet): full shadow + dimmed scrim (`Black 30` / `rgba(0,0,0,0.3)`)
235
+ ## 6. Depth & Elevation
270
236
 
271
- Live homepage chrome leans **flat** virtually no `box-shadow` captured across 118 elements; depth is signaled via surface tint + border alpha, not shadow.
237
+ Current promoted surfaces are flat. Marketing cards use background, border, radius, and photography for separation; no reusable shadow token was established. Documentation overlays and authenticated product elevation remain unresolved.
272
238
 
273
239
  ## 7. Do's and Don'ts
274
240
 
275
241
  ### Do
276
- - Use **Inter** as the type voice never substitute a different sans for product-chrome.
277
- - Apply translucent off-black (`rgba(0,0,0,0.85)`) for body text never pure `#000`.
278
- - Honor the Bezier radius ladder by tier 8px for chips, 18-20px for CTAs/cards, 32px for full-bleed CTA bands.
279
- - Use Cobalt 400 `#329BE7` as the **only** brand accent in product chrome.
280
- - Reach for the Bezier alpha ladder (`-10` / `-20` / `-30`) before inventing new tints.
281
- - Top out at **36px** for in-product type; reserve >36px for marketing surfaces only.
242
+ - Use current surface-local evidence and label marketing versus documentation roles.
243
+ - Keep warm cream, charcoal actions, and editorial card geometry together on marketing surfaces.
244
+ - Preserve Bezier as official system history and implementation context.
282
245
 
283
246
  ### Don't
284
- - Don't introduce a 5th radius value between Bezier tokens (e.g., 24px is not in the ladder).
285
- - Don't add font weights between 400 and 700 inside product chrome Bezier only ships those two.
286
- - Don't decorate with semantic hues (red / yellow / green) they are reserved for status semantics.
287
- - Don't translate marketing's plum AI canvas (`rgba(25,3,49,0.898)`) into product chrome — it's a homepage-only rhetorical device.
288
- - Don't use `BildV5` for product UI — it's a marketing display face.
247
+ - Do not call Cobalt the universal current primary without current product evidence.
248
+ - Do not substitute a system font, BildV5, or Noto declaration for the loaded surface family.
249
+ - Do not generate Inbox components or semantic states from generic SaaS conventions.
289
250
 
290
251
  ## 8. Responsive Behavior
291
252
 
292
- Marketing breakpoints (inferred from live capture at 1280-viewport):
293
- - 768px / 896px / 1024px / 1280px
294
-
295
- The product app (Inbox / Meet / Team Chat) is a desktop-first SaaS surface — Bezier components ship with `size` prop (`xs / s / m / l / xl`) rather than viewport-driven responsive behavior; the host app sets size programmatically based on layout context. The marketing site does respond fluidly with a mobile MenuToggleButton (8px radius, white surface) replacing the desktop nav under ~768px.
253
+ The public marketing system retains full-pill controls and rounded editorial cards while reducing horizontal section padding and tab padding on narrower layouts. Exact private-product breakpoints and mobile-native behavior are unresolved and should not be inferred from the marketing site.
296
254
 
297
255
  ## 9. Agent Prompt Guide
298
256
 
299
- ### Quick reference
300
-
301
- - **Canvas**: `#FFFFFF` body, `#FCFCFC` / `#F7F7F8` surface tints
302
- - **Body text**: `rgba(0, 0, 0, 0.85)` — *never* `#000`
303
- - **Brand accent**: Cobalt `#329BE7`
304
- - **Type**: Inter 15-16px body, 18-24px subheads (product); 48-64px marketing headlines
305
- - **Radius**: 8 / 18 / 20 / 32 — pick the tier, don't interpolate
306
- - **Easing**: `cubic-bezier(0.3, 0, 0, 1)` at 150 / 300 / 450ms
307
-
308
- ### Example component prompts
309
-
310
- - *"Build a Channel-Talk-styled SaaS dashboard hero. White (#FFFFFF) canvas, Inter 64px / weight 700 / 88px line-height / -1.5px tracking, text rgba(0,0,0,0.85). Primary CTA: bg #242428, text #fff, 18px radius, padding 8px 24px, label Inter 18px / weight 600 / -0.4px tracking. Secondary CTA: bg rgba(0,0,0,0.05), text rgba(0,0,0,0.85), 16px radius."*
311
- - *"Build an AI-handles-routine manifesto section. Dark plum canvas rgba(25,3,49,0.898), Inter 54px / weight 600 / 72px line-height / -1.5px tracking, two-line headline with the second line color-shifted lighter as visual call-and-response."*
312
- - *"Build a Bezier product modal. Grey-100 (#F7F7F8) surface, 12px radius, 24px padding, Black-30 scrim, transition s (150ms) cubic-bezier(0.3, 0, 0, 1)."*
257
+ > Build a warm, editorial customer-conversation surface using a white and cream canvas, black text, charcoal full-pill conversion actions, Pretendard marketing typography, and 35px bordered cards. Use the Inter documentation scale only for documentation-like surfaces. Do not add Cobalt product controls, inbox states, inputs, or dialogs unless a current product source is supplied.
313
258
 
314
259
  ## 10. Voice & Tone
315
260
 
316
- Channel Talk's voice is **operator-pragmatic + AI-evangelical**. The marketing surface speaks as a Korean-origin B2B platform that has staked its 2025-26 narrative on the AI-agent transition every section pivots back to how AI takes "the routine" so human teams can take "the strategy."
317
-
318
- | Context | Tone |
319
- |---|---|
320
- | CTA | Direct verb. "Sign Up for Free" / "View Details" / "Learn more" |
321
- | Marketing headline | Manifesto-shaped, present-tense. "The future of customer service is AI." "AI handles the routine. You handle the strategy." |
322
- | Feature copy | Compound noun-led. "All Chats In One Place." "All-in-One AI Messenger." |
323
- | Product (Inbox) | Pragmatic operator-speak (inferred from Bezier component naming: `Inbox`, `Workflow`, `Meet` — verbs/nouns, no "experiences") |
324
- | Error | Specific, action-paired (e.g., "Message not sent. Retry") — convention inferred from Bezier semantic-tokens framing |
325
-
326
- **Voice samples** (live channel.io 2026-05-14, paraphrased to avoid verbatim brand copy in derivative work)
327
-
328
- - AI-era positioning: *"The future of customer service is AI."* (homepage hero) <!-- verified: channel.io/en 2026-05-14, used only as voice reference, not as derived copy -->
329
- - AI/human split: *"AI handles the routine. You handle the strategy."* (homepage AI section) <!-- verified: channel.io/en 2026-05-14, voice reference only -->
330
- - Compound positioning: *"All-in-One AI Messenger"* (section h2) <!-- verified: channel.io/en 2026-05-14 -->
331
-
332
- **IP guardrail (DO NOT verbatim).** Any DESIGN.md or downstream artifact derived from this reference must **rewrite** Channel Talk's marketing taglines in its own voice — these voice samples document *tone shape*, not borrowable copy. Fresh derivation patterns (use these as templates instead): "Routine, automated. Strategy, yours." / "AI for the queue. You for the moves that matter." / "Every channel. One inbox." — none of which appear verbatim on channel.io.
333
-
334
- **Forbidden phrases.** "AI-powered" without specifics. "Revolutionary support." "Next-generation CRM." Anything that promises AI without naming the surface (Inbox / Meet / Workflow) it operates on.
261
+ Official Channel Talk writing centers customers, conversations, and practical operational improvement. The tone is direct and optimistic rather than ceremonial: explain what a team can do, why it improves a customer relationship, and where AI removes routine work. Product updates should name the affected workflow, the person who benefits, and the next available action. Support guidance should stay calm and procedural, while brand stories may be warmer and more reflective. Avoid unsupported performance numbers, excessive futurism, and generic “all-in-one revolution” language.
335
262
 
336
263
  ## 11. Brand Narrative
337
264
 
338
- *Some facts in this section carry partial verification see footer for source map.*
339
-
340
- Channel Talk is operated by **Channel Corp** (주식회사 채널코퍼레이션) [channel.io/en/team], a Korean SaaS company whose current CEO is **Choi Si-won (최시원)** [channel.io/en/team]. The company's roots trace to a Korean startup originally named **ZOYI Corp**, founded around 2014 [secondary source — confidence moderate]; the rename to Channel Corp followed the product's pivot from offline-retail analytics to the SaaS customer-messenger that ships today. Channel Talk's primary positioning through ~2023 was as "the all-in-one business messenger" competing with Intercom on smaller-team economics + Korean/Japanese market fit; the 2024-26 narrative has shifted explicitly to **AI agent infrastructure**, with the **ALF** brand surface (AI Agent for customer inquiries + AI Agent for internal work) now sharing main-nav placement with the historical Inbox/Meet/Team Chat product line [channel.io/en about page].
341
-
342
- By the metrics Channel itself publishes [channel.io/en/team footer 2026-05-14]: **234,545+ cumulative channels** deployed, **170 million monthly support messages**, **1,286,781+ AI-resolved cases** cumulative, **2,135+ companies using ALF**, **98% uptime**, **4.8/5 G2 rating**. Engineering compliance: **ISMS** (Korean information security certification), **ISO information protection certification**, AWS-hosted infrastructure.
343
-
344
- The most distinctive engineering signal is **Bezier** — Channel's openly published, MIT-licensed design system [github.com/channel-io/bezier-react] shipping `bezier-react` (274+ stars) + `BezierSwift` (native iOS) + a canonical `bezier-tokens` package that powers both. Few Korean SaaS companies maintain a public token-grade DS at this depth, and the fact that the marketing site's homepage renders against the same primitives (Inter, the cobalt accent, the radius ladder) is itself the strongest claim about Channel's product-discipline.
345
-
346
- *Unverified at time of writing*: precise founding year (2014 vs neighboring year), founder list beyond current CEO, total funding raised, exact HQ city within Korea. These are flagged in the verification footer for a follow-up UPDATE pass.
265
+ Channel Talk presents customer communication as a durable operating capability rather than a support widget. Official rebrand material describes the visual change as a way to express the company's identity and culture more honestly, while official product updates show the platform continuing to combine messaging operations with AI-assisted service. The public Bezier repository is a separate but complementary signal: Channel has invested in reusable product primitives, even though this reference does not use that repository to fabricate current private-app values. Across these sources, the company consistently frames conversation as the place where support, sales, and long-term customer understanding meet. The visual move toward warmer editorial surfaces supports that human relationship, while the operational product story remains structured around inboxes, configuration, documentation, and AI-assisted work. Reuse should therefore strengthen continuity between people and tools, not flatten every surface into one marketing style.
347
266
 
348
267
  ## 12. Principles
349
268
 
350
- 1. **One brand color does the lifting.** Cobalt 400 (`#329BE7`) is the only brand accent semantic hues (red/yellow/green/blue) are reserved for status. *UI implication*: don't decorate with the semantic palette; pick cobalt or nothing.
351
- 2. **Inter, always Noto fills the locale gap.** Korean and Japanese product rendering must keep Inter primary; Noto Sans KR/JP only resolves CJK characters Inter doesn't ship. *UI implication*: never substitute a single Korean-first stack — break the dual-locale resolution.
352
- 3. **Radius is a ladder, not a slider.** 2 3 4 6 8 12 → 16 → 20 → 32 → 44px. *UI implication*: pick the rung that matches component scale; never interpolate (24 is not a Bezier rung).
353
- 4. **Translucent off-black over pure black.** Body text is `rgba(0,0,0,0.85)`. *UI implication*: the 0.15 alpha is a deliberate atmospheric softening — preserve it on light surfaces.
354
- 5. **Marketing breaks the product ceiling on purpose.** 64px hero, 54-48px section headlines, 600-weight intermediate — all marketing-only. *UI implication*: never bring those tokens into product chrome; the visual cliff between marketing and product is part of the brand register.
355
- 6. **Dark theme is paired surface + elevation.** Bezier ships dark-theme as a full semantic mirror, not a CSS filter. *UI implication*: every elevation level has a paired light/dark surface — never invert color without inverting elevation.
269
+ 1. **The customer is the answer.** Start from a real conversation or task rather than feature spectacle.
270
+ 2. **Warmth supports operational clarity.** Editorial cream, photography, and rounded cards humanize a complex service platform.
271
+ 3. **Evidence domains stay separate.** Marketing, documentation, Bezier, and private product surfaces cannot silently overwrite one another.
272
+ 4. **AI should remove routine work.** Describe assistance in terms of what people can focus on next, without inventing outcomes.
356
273
 
357
274
  ## 13. Personas
358
275
 
359
- *Personas are fictional archetypes informed by publicly visible Channel Talk user segments (Korean/Japanese DTC ecommerce, K-beauty, SaaS support, mid-market team CS leads) — not real individuals.*
360
-
361
- **Yoonseo Han, 31, Seoul.** Customer-experience lead at a K-beauty DTC brand on Cafe24. Has the Channel Talk Inbox open in a pinned tab from 09:00 to 19:00 KST. Just turned ALF on for tier-1 FAQs (size exchange, shipping ETA) — measures the deflection weekly and reports it to her CCO.
362
-
363
- **Ren Takahashi, 38, Tokyo.** Support manager at a B2B SaaS that uses Channel Talk for both customer Inbox and internal Team Chat. Cares deeply about JP/KR locale resolution (Inter + Noto), keyboard-shortcut macros, and the team-handoff UX when ALF escalates to a human agent.
364
-
365
- **Jiwon Park, 27, Seongnam.** Frontline CS agent on a 5-person team. Lives in Inbox. Will defect to any tool with cleaner conversation-history scroll-back and faster `cmd+k` search. Doesn't care about the AI narrative — cares that ALF closed 60 of her 100 daily tickets so she can focus on the 40 that need her.
276
+ Public product material supports task contexts, not verified biographical personas:
277
+ - A support lead reviewing conversations and adopting current AI-assisted operations.
278
+ - A frontline agent using product documentation to configure or troubleshoot a customer channel.
279
+ - A growth or commerce operator evaluating whether Channel Talk fits an ongoing customer relationship workflow.
366
280
 
367
- **Sungho Lee, 44, Busan.** RevOps lead at a mid-market commerce platform. Integrated Channel Talk with Channel's Meet (Call) for outbound retention plays. Reads the weekly Workflow dashboard. Reports cost-per-resolved-ticket to the founder.
281
+ Project-specific names, ages, company sizes, locations, and quantitative goals are intentionally unspecified and must come from the product brief rather than this public reference.
368
282
 
369
283
  ## 14. States
370
284
 
371
- | State | Treatment |
372
- |---|---|
373
- | **Empty (no conversations)** | Cobalt-tinted illustrated panel + single CTA "Connect a channel" (inferred from Bezier `EmptyContent` component name) |
374
- | **Empty (ALF disabled)** | Subtle prompt: "Turn on ALF to deflect tier-1 tickets" + single cobalt CTA |
375
- | **Loading (conversation history)** | Skeleton message bubbles in `Grey 100` (`#F7F7F8`) — no shimmer animation, just static surface tint (Bezier's flat depth signature) |
376
- | **Loading (ALF response)** | Three-dot typing indicator with ALF avatar (cobalt accent ring) |
377
- | **Error (sync failure)** | Top-of-Inbox banner in `Red 400` (`#E94E58`) at `red-400-20` alpha fill + "Retry" link |
378
- | **Error (ALF escalation needed)** | Inline below message bubble, `Yellow 400` (`#EDBC40`) status dot + "Hand off to human" CTA |
379
- | **Success (ticket closed)** | Subtle row tint shift to `Green 400` at `green-400-10` (`#31A5521A`) — no animation |
380
- | **Success (ALF resolved)** | Resolution badge on conversation row — cobalt outlined chip |
381
- | **Skeleton (inbox list)** | `Grey 100` row blocks, no shimmer, transition fades when real content lands |
382
- | **Disabled (no permission)** | Component opacity 40% + permission tooltip on hover |
383
- | **Loading (ALF reasoning trace)** | Per-step expandable trace: "Searching knowledge base..." → "Drafting response..." → "Awaiting confirmation" |
285
+ Only the current marketing tab selected state and a compact documentation control's pressed state were safely observed. No canonical empty, loading, error, success, disabled, or authenticated Inbox state is promoted.
384
286
 
385
287
  ## 15. Motion & Easing
386
288
 
387
- | Token | Value | Use |
388
- |---|---|---|
389
- | `transition.duration.s` | 150ms | Hover, focus, small surface tints |
390
- | `transition.duration.m` | 300ms | Modal open, popover, sheet |
391
- | `transition.duration.l` | 450ms | Page transitions, large surface swaps |
392
- | `transition.timing-function.default` | `cubic-bezier(0.3, 0, 0, 1)` | All transitions unless overridden |
393
-
394
- Bezier ships exactly **one** easing curve as default — `cubic-bezier(0.3, 0, 0, 1)` — a sharp-out / soft-in shape that arrives quickly then settles. No bouncy or elastic curves in the source. The marketing site's section transitions (the AI-Messenger card pivots between Inbox / Meet / Team Chat / Workflow) appear to use the `m` duration with the default ease.
395
-
396
- `prefers-reduced-motion: reduce` → durations collapse toward 0ms, transforms become opacity-only (convention; not explicitly documented in source but consistent with Bezier's accessibility framing).
289
+ No reusable current duration or easing token was established by this capture. The six tab expansions prove state change, not a universal animation specification; motion values remain absent.
397
290
 
398
291
  ---
399
292
 
400
- **Verified:** 2026-05-14
401
- **Tier 1 sources (live + canonical DS):**
402
- - `channel.io/en` live DOM via CDP (Chrome DevTools Protocol over localhost:9222) 2026-05-14, 118 element samples with full `getComputedStyle` capture (proof file: `assets/_reference/.live-inspect-proof.json`, 10 raw_samples retained 5-minimum threshold)
403
- - `github.com/channel-io/bezier-react/tree/main/packages/bezier-tokens/src/global` — canonical Bezier DS token JSON files (color 6.7KB, font 3.0KB, typography 2.7KB, radius 463B, transition 945B, opacity 66B, z-index 361B) fetched via `gh api` 2026-05-14
404
- - `github.com/channel-io/bezier-react/tree/main/packages/bezier-tokens/src/semantic` — elevation 2.3KB + input 1.5KB + light-theme/dark-theme directories
405
-
406
- **Tier 2 sources:** `styles.refero.design/?q=channel+talk` and `getdesign.md/channeltalk` not consulted this pass (Bezier is the Tier-1 canonical source, making Tier-2 third-party indexes redundant for this reference); to be checked in a follow-up UPDATE.
407
-
408
- **Tier 2 (Philosophy/founders):** `channel.io/en/about` (positioning + metrics + tagline), `channel.io/en/team` (CEO + metrics + compliance). Founder list beyond current CEO, exact founding year, total funding raised — *unverified* at this pass, flagged in §11 and below.
409
-
410
- **Style ref:** `intercom` (closest peer: B2B customer messaging + AI agent positioning; warm dual-product chrome ↔ cobalt-disciplined product chrome contrast deliberate).
411
-
412
- **Conflicts unresolved:**
413
- - Founding year: secondary sources suggest ZOYI Corp lineage ~2014; Channel-side surfaces consulted do not confirm year. Flag for UPDATE.
414
- - Founder list: only current CEO Choi Si-won verified from Channel surfaces; co-founders not enumerated.
415
- - Total funding / HQ city: not extractable from channel.io surfaces consulted; Crunchbase blocked WebFetch (403); requires Tier 2 source on UPDATE pass.
416
-
417
- **IP guardrails applied:**
418
- - §10 voice samples documented for tone-shape reference only, **not derivable as verbatim copy** in downstream DESIGN.md generations. Fresh derivation patterns provided inline.
419
- - Brand assets (logo, marketing photography) NOT mirrored into `assets/_reference/`; only computed-style raw samples + canonical Bezier DS token JSON (MIT-licensed, redistribution-permitted) captured.
420
- - Bezier tokens are MIT-licensed at source — reproduction in this DESIGN.md is within license terms with attribution.
421
-
422
- **Earlier mistakes reverted:** none (first capture of this reference).
293
+ **Verified:** 2026-07-12 (omd:migrate)
294
+ **Tier 1 sources:** https://channel.io/kr ; https://channel.io/us ; https://docs.channel.io/updates/en/articles/Notice-Channel-Talk-Major-Updates--b3d45997 ; https://docs.channel.io/help/en/articles/94f34984 ; https://channel.io/kr/blog/articles/rebranding-channeltalk-3aff8113 ; https://github.com/channel-io/bezier-react
295
+ **Tier 2 attempts:** getdesign.md/channeltalk and styles.refero.design search; unavailable as positive evidence
296
+ **Conflicts unresolved:** none