oh-my-design-cli 1.8.6 → 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 (275) 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 +2761 -85
  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/airbridge/DESIGN.md +451 -0
  71. package/web/references/alipay/DESIGN.md +179 -420
  72. package/web/references/apple/DESIGN.md +224 -498
  73. package/web/references/asleep/DESIGN.md +402 -0
  74. package/web/references/au/DESIGN.md +334 -0
  75. package/web/references/autopedia/DESIGN.md +382 -0
  76. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  77. package/web/references/baemin/DESIGN.md +332 -491
  78. package/web/references/banksalad/DESIGN.md +269 -180
  79. package/web/references/barogo/DESIGN.md +416 -0
  80. package/web/references/beusable/DESIGN.md +464 -0
  81. package/web/references/bigin/DESIGN.md +454 -0
  82. package/web/references/bilibili/DESIGN.md +206 -374
  83. package/web/references/bmw/DESIGN.md +162 -276
  84. package/web/references/brandi/DESIGN.md +184 -325
  85. package/web/references/buzzvil/DESIGN.md +457 -0
  86. package/web/references/cafe24/DESIGN.md +472 -0
  87. package/web/references/catchtable/DESIGN.md +219 -264
  88. package/web/references/cgv/DESIGN.md +317 -0
  89. package/web/references/channeltalk/DESIGN.md +210 -336
  90. package/web/references/china-airlines/DESIGN.md +291 -0
  91. package/web/references/cjonstyle/DESIGN.md +453 -0
  92. package/web/references/class101/DESIGN.md +168 -387
  93. package/web/references/classum/DESIGN.md +228 -203
  94. package/web/references/claude/DESIGN.md +242 -479
  95. package/web/references/clay/DESIGN.md +179 -377
  96. package/web/references/clickhouse/DESIGN.md +254 -343
  97. package/web/references/codeit/DESIGN.md +470 -0
  98. package/web/references/cohere/DESIGN.md +214 -324
  99. package/web/references/coinone/DESIGN.md +199 -179
  100. package/web/references/corca/DESIGN.md +414 -0
  101. package/web/references/coupang/DESIGN.md +205 -475
  102. package/web/references/cursor/DESIGN.md +240 -381
  103. package/web/references/dabang/DESIGN.md +248 -213
  104. package/web/references/dable/DESIGN.md +431 -0
  105. package/web/references/datarize/DESIGN.md +338 -0
  106. package/web/references/dealicious/DESIGN.md +402 -0
  107. package/web/references/drdiary/DESIGN.md +404 -0
  108. package/web/references/elastic/DESIGN.md +238 -0
  109. package/web/references/elevenlabs/DESIGN.md +183 -321
  110. package/web/references/elice/DESIGN.md +445 -0
  111. package/web/references/eslite/DESIGN.md +257 -0
  112. package/web/references/evaair/DESIGN.md +338 -0
  113. package/web/references/expo/DESIGN.md +238 -331
  114. package/web/references/familymart-tw/DESIGN.md +254 -0
  115. package/web/references/ferrari/DESIGN.md +160 -377
  116. package/web/references/figma/DESIGN.md +197 -451
  117. package/web/references/fitpet/DESIGN.md +445 -0
  118. package/web/references/flex/DESIGN.md +170 -253
  119. package/web/references/framer/DESIGN.md +197 -340
  120. package/web/references/freee/DESIGN.md +211 -533
  121. package/web/references/friendliai/DESIGN.md +431 -0
  122. package/web/references/frip/DESIGN.md +440 -0
  123. package/web/references/furiosaai/DESIGN.md +450 -0
  124. package/web/references/gangnamunni/DESIGN.md +154 -591
  125. package/web/references/gaudiolab/DESIGN.md +414 -0
  126. package/web/references/google/DESIGN.md +290 -398
  127. package/web/references/goorm/DESIGN.md +470 -0
  128. package/web/references/greencar/DESIGN.md +420 -0
  129. package/web/references/hackle/DESIGN.md +472 -0
  130. package/web/references/hashicorp/DESIGN.md +273 -318
  131. package/web/references/heydealer/DESIGN.md +429 -0
  132. package/web/references/humanscape/DESIGN.md +433 -0
  133. package/web/references/hwahae/DESIGN.md +453 -0
  134. package/web/references/hyundai/DESIGN.md +158 -368
  135. package/web/references/hyundaicard/DESIGN.md +171 -121
  136. package/web/references/ibm/DESIGN.md +227 -378
  137. package/web/references/idus/DESIGN.md +450 -0
  138. package/web/references/igaworks/DESIGN.md +437 -0
  139. package/web/references/inflearn/DESIGN.md +221 -366
  140. package/web/references/intuit/DESIGN.md +244 -0
  141. package/web/references/jandi/DESIGN.md +191 -291
  142. package/web/references/jobplanet/DESIGN.md +415 -0
  143. package/web/references/kakao/DESIGN.md +287 -475
  144. package/web/references/kakaobank/DESIGN.md +220 -521
  145. package/web/references/kakaogames/DESIGN.md +220 -0
  146. package/web/references/kakaopay/DESIGN.md +207 -526
  147. package/web/references/karrot/DESIGN.md +227 -251
  148. package/web/references/kb-kookmin/DESIGN.md +308 -0
  149. package/web/references/kbank/DESIGN.md +220 -175
  150. package/web/references/kcd/DESIGN.md +432 -0
  151. package/web/references/kmong/DESIGN.md +281 -356
  152. package/web/references/krds/DESIGN.md +245 -19
  153. package/web/references/kream/DESIGN.md +224 -359
  154. package/web/references/kurly/DESIGN.md +211 -533
  155. package/web/references/kyobobook/DESIGN.md +445 -0
  156. package/web/references/lablup/DESIGN.md +474 -0
  157. package/web/references/lamborghini/DESIGN.md +198 -360
  158. package/web/references/lemonbase/DESIGN.md +452 -0
  159. package/web/references/lguplus/DESIGN.md +259 -0
  160. package/web/references/likelion/DESIGN.md +283 -0
  161. package/web/references/line/DESIGN.md +396 -355
  162. package/web/references/linear.app/DESIGN.md +209 -562
  163. package/web/references/lotteon/DESIGN.md +386 -0
  164. package/web/references/lovable/DESIGN.md +255 -349
  165. package/web/references/makinarocks/DESIGN.md +242 -0
  166. package/web/references/maum-ai/DESIGN.md +423 -0
  167. package/web/references/medibloc/DESIGN.md +425 -0
  168. package/web/references/megabox/DESIGN.md +232 -0
  169. package/web/references/mercari/DESIGN.md +217 -434
  170. package/web/references/microsoft/DESIGN.md +234 -388
  171. package/web/references/mildang/DESIGN.md +411 -0
  172. package/web/references/millie/DESIGN.md +183 -504
  173. package/web/references/minimax/DESIGN.md +264 -322
  174. package/web/references/miricanvas/DESIGN.md +182 -355
  175. package/web/references/miro/DESIGN.md +234 -232
  176. package/web/references/mistral.ai/DESIGN.md +231 -314
  177. package/web/references/mixi/DESIGN.md +234 -0
  178. package/web/references/moin/DESIGN.md +445 -0
  179. package/web/references/mongodb/DESIGN.md +219 -316
  180. package/web/references/moreh/DESIGN.md +437 -0
  181. package/web/references/musinsa/DESIGN.md +184 -510
  182. package/web/references/mynavi/DESIGN.md +242 -0
  183. package/web/references/myrealtrip/DESIGN.md +169 -406
  184. package/web/references/naver/DESIGN.md +328 -499
  185. package/web/references/naverwebtoon/DESIGN.md +172 -395
  186. package/web/references/neosapience/DESIGN.md +441 -0
  187. package/web/references/nhn/DESIGN.md +169 -346
  188. package/web/references/nhncloud/DESIGN.md +185 -123
  189. package/web/references/nota/DESIGN.md +451 -0
  190. package/web/references/notion/DESIGN.md +271 -475
  191. package/web/references/nrise/DESIGN.md +417 -0
  192. package/web/references/ohouse/DESIGN.md +210 -549
  193. package/web/references/oliveyoung/DESIGN.md +217 -326
  194. package/web/references/ollama/DESIGN.md +241 -308
  195. package/web/references/onestore/DESIGN.md +248 -0
  196. package/web/references/palantir/DESIGN.md +256 -0
  197. package/web/references/panasonic/DESIGN.md +276 -0
  198. package/web/references/patternfly/DESIGN.md +259 -0
  199. package/web/references/payhere/DESIGN.md +438 -0
  200. package/web/references/pega/DESIGN.md +262 -0
  201. package/web/references/peoplefund/DESIGN.md +431 -0
  202. package/web/references/petfriends/DESIGN.md +428 -0
  203. package/web/references/pinkfong/DESIGN.md +199 -367
  204. package/web/references/pinterest/DESIGN.md +258 -308
  205. package/web/references/portone/DESIGN.md +446 -0
  206. package/web/references/poya/DESIGN.md +286 -0
  207. package/web/references/pozalabs/DESIGN.md +438 -0
  208. package/web/references/protopie/DESIGN.md +419 -0
  209. package/web/references/qraft/DESIGN.md +448 -0
  210. package/web/references/queenit/DESIGN.md +432 -0
  211. package/web/references/quotabook/DESIGN.md +449 -0
  212. package/web/references/rebellions/DESIGN.md +449 -0
  213. package/web/references/recruit/DESIGN.md +247 -0
  214. package/web/references/remember/DESIGN.md +202 -396
  215. package/web/references/resend/DESIGN.md +274 -348
  216. package/web/references/returnzero/DESIGN.md +460 -0
  217. package/web/references/sakura-internet/DESIGN.md +269 -0
  218. package/web/references/samsung/DESIGN.md +157 -359
  219. package/web/references/sandoll/DESIGN.md +445 -0
  220. package/web/references/sanity/DESIGN.md +241 -375
  221. package/web/references/saramin/DESIGN.md +465 -0
  222. package/web/references/scatterlab/DESIGN.md +412 -0
  223. package/web/references/selectstar/DESIGN.md +439 -0
  224. package/web/references/servicenow/DESIGN.md +289 -0
  225. package/web/references/shiftee/DESIGN.md +468 -0
  226. package/web/references/shinhanbank/DESIGN.md +161 -341
  227. package/web/references/shinhancard/DESIGN.md +208 -319
  228. package/web/references/sionic/DESIGN.md +454 -0
  229. package/web/references/sktelecom/DESIGN.md +310 -0
  230. package/web/references/socar/DESIGN.md +125 -32
  231. package/web/references/softbank/DESIGN.md +231 -0
  232. package/web/references/solapi/DESIGN.md +483 -0
  233. package/web/references/sony/DESIGN.md +234 -0
  234. package/web/references/soop/DESIGN.md +261 -0
  235. package/web/references/spacex/DESIGN.md +184 -323
  236. package/web/references/spotify/DESIGN.md +253 -394
  237. package/web/references/squeezebits/DESIGN.md +441 -0
  238. package/web/references/stayfolio/DESIGN.md +422 -0
  239. package/web/references/stripe/DESIGN.md +212 -491
  240. package/web/references/supabase/DESIGN.md +244 -316
  241. package/web/references/supertone/DESIGN.md +413 -0
  242. package/web/references/tabling/DESIGN.md +415 -0
  243. package/web/references/taishinbank/DESIGN.md +243 -0
  244. package/web/references/teamlab/DESIGN.md +240 -0
  245. package/web/references/teamsparta/DESIGN.md +472 -0
  246. package/web/references/tellingme/DESIGN.md +392 -0
  247. package/web/references/tesla/DESIGN.md +244 -427
  248. package/web/references/thsr/DESIGN.md +284 -0
  249. package/web/references/thumbtack/DESIGN.md +302 -0
  250. package/web/references/together.ai/DESIGN.md +257 -304
  251. package/web/references/toss/DESIGN.md +251 -593
  252. package/web/references/toss-securities/DESIGN.md +255 -178
  253. package/web/references/tossbank/DESIGN.md +195 -491
  254. package/web/references/toyota/DESIGN.md +238 -0
  255. package/web/references/tving/DESIGN.md +197 -245
  256. package/web/references/typed/DESIGN.md +413 -0
  257. package/web/references/uber/DESIGN.md +256 -333
  258. package/web/references/udn/DESIGN.md +250 -0
  259. package/web/references/upbit/DESIGN.md +145 -256
  260. package/web/references/upstage/DESIGN.md +211 -204
  261. package/web/references/uswds/DESIGN.md +287 -0
  262. package/web/references/vercel/DESIGN.md +236 -440
  263. package/web/references/vuno/DESIGN.md +413 -0
  264. package/web/references/wanted/DESIGN.md +215 -487
  265. package/web/references/weverse/DESIGN.md +437 -0
  266. package/web/references/wise/DESIGN.md +223 -231
  267. package/web/references/wisetracker/DESIGN.md +462 -0
  268. package/web/references/wooribank/DESIGN.md +245 -0
  269. package/web/references/yanolja/DESIGN.md +250 -419
  270. package/web/references/yeogiotte/DESIGN.md +235 -418
  271. package/web/references/zapier/DESIGN.md +256 -377
  272. package/web/references/zendesk/DESIGN.md +288 -0
  273. package/web/references/zigzag/DESIGN.md +200 -621
  274. package/dist/install-skills-7UUDOLG2.js +0 -734
  275. package/dist/install-skills-7UUDOLG2.js.map +0 -1
@@ -8,57 +8,108 @@ primary_color: "#0f62fe"
8
8
  logo:
9
9
  type: github
10
10
  slug: IBM
11
- verified: "2026-05-15"
11
+ verified: "2026-07-13"
12
12
  omd: "0.1"
13
13
  ds:
14
14
  name: Carbon
15
15
  url: "https://carbondesignsystem.com"
16
16
  type: system
17
- description: IBM's open-source design system with React, Angular, Vue, and Web Components.
17
+ description: IBM's official open-source design system; Carbon documentation is distinct from the captured IBM.com product surfaces.
18
18
  og_image: "https://carbondesignsystem.com/ogimage.png"
19
+ verification_v2:
20
+ schema: 2
21
+ checked: "2026-07-13"
22
+ surfaces:
23
+ - { id: home, kind: marketing, url: "https://www.ibm.com/kr-ko", inspected: "2026-07-13" }
24
+ - { id: cloud-support, kind: public-product, url: "https://www.ibm.com/kr-ko/products/cloud/support?lnk=flathl", inspected: "2026-07-13" }
25
+ - { id: confluent, kind: public-product, url: "https://www.ibm.com/kr-ko/products/confluent?lnk=hpfp4kr", inspected: "2026-07-13" }
26
+ sources:
27
+ - { id: home-live, kind: product-surface, url: "https://www.ibm.com/kr-ko", captured: "2026-07-13" }
28
+ - { id: cloud-support-live, kind: product-surface, url: "https://www.ibm.com/kr-ko/products/cloud/support?lnk=flathl", captured: "2026-07-13" }
29
+ - { id: confluent-live, kind: product-surface, url: "https://www.ibm.com/kr-ko/products/confluent?lnk=hpfp4kr", captured: "2026-07-13" }
30
+ - { id: carbon-docs, kind: official-doc, url: "https://carbondesignsystem.com/components/button/usage/", captured: "2026-07-13" }
31
+ - { id: plex-typeface, kind: license, url: "https://www.ibm.com/design/language/typography/typeface/", captured: "2026-07-13" }
32
+ - { id: ibm-history, kind: official-doc, url: "https://www.ibm.com/history/ctr-and-ibm", captured: "2026-07-13" }
33
+ conflicts: []
34
+ claims:
35
+ "tokens.colors.primary": &product { surface_id: cloud-support, source_id: cloud-support-live, method: live-inspect, captured: "2026-07-13" }
36
+ "tokens.colors.canvas": &marketing { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
37
+ "tokens.colors.foreground": *product
38
+ "tokens.colors.muted": *product
39
+ "tokens.colors.layer": *marketing
40
+ "tokens.colors.border": *product
41
+ "tokens.colors.link": &confluent { surface_id: confluent, source_id: confluent-live, method: live-inspect, captured: "2026-07-13" }
42
+ "tokens.typography.family.sans": *product
43
+ "tokens.typography.display.size": *marketing
44
+ "tokens.typography.display.weight": *marketing
45
+ "tokens.typography.display.lineHeight": *marketing
46
+ "tokens.typography.display.use": *marketing
47
+ "tokens.typography.body.size": *product
48
+ "tokens.typography.body.weight": *product
49
+ "tokens.typography.body.lineHeight": *product
50
+ "tokens.typography.body.use": *product
51
+ "tokens.typography.action.size": *product
52
+ "tokens.typography.action.weight": *product
53
+ "tokens.typography.action.lineHeight": *product
54
+ "tokens.typography.action.tracking": *product
55
+ "tokens.typography.action.use": *product
56
+ "tokens.typography.label.size": *marketing
57
+ "tokens.typography.label.weight": *marketing
58
+ "tokens.typography.label.lineHeight": *marketing
59
+ "tokens.typography.label.tracking": *marketing
60
+ "tokens.typography.label.use": *marketing
61
+ "tokens.spacing.xs": *product
62
+ "tokens.spacing.sm": *product
63
+ "tokens.spacing.md": *product
64
+ "tokens.spacing.lg": *product
65
+ "tokens.spacing.xl": *product
66
+ "tokens.spacing.section": *marketing
67
+ "tokens.rounded.sharp": *product
68
+ "tokens.rounded.control": *product
69
+ "tokens.shadow.flat": *product
70
+ "tokens.components.primary-action.type": *product
71
+ "tokens.components.primary-action.bg": *product
72
+ "tokens.components.primary-action.fg": *product
73
+ "tokens.components.primary-action.radius": *product
74
+ "tokens.components.primary-action.padding": *product
75
+ "tokens.components.primary-action.height": *product
76
+ "tokens.components.primary-action.font": *product
77
+ "tokens.components.primary-action.states": *product
78
+ "tokens.components.primary-action.use": *product
79
+ "tokens.components.product-tabs.type": *confluent
80
+ "tokens.components.product-tabs.bg": *confluent
81
+ "tokens.components.product-tabs.fg": *confluent
82
+ "tokens.components.product-tabs.border": *confluent
83
+ "tokens.components.product-tabs.radius": *confluent
84
+ "tokens.components.product-tabs.padding": *confluent
85
+ "tokens.components.product-tabs.height": *confluent
86
+ "tokens.components.product-tabs.font": *confluent
87
+ "tokens.components.product-tabs.states": *confluent
88
+ "tokens.components.product-tabs.use": *confluent
19
89
  tokens:
20
- source: prose-derived
21
- extracted: "2026-06-09"
90
+ source: live-extract
91
+ extracted: "2026-07-13"
22
92
  colors:
23
93
  primary: "#0f62fe"
24
- primary-hover: "#0353e9"
25
- primary-active: "#002d9c"
26
- link-hover: "#0043ce"
27
- primary-tint: "#edf5ff"
28
94
  canvas: "#ffffff"
29
- text: "#161616"
30
- gray-90: "#262626"
31
- gray-80: "#393939"
32
- text-secondary: "#525252"
33
- placeholder: "#6f6f6f"
34
- disabled: "#8d8d8d"
35
- border: "#c6c6c6"
36
- border-subtle: "#e0e0e0"
95
+ foreground: "#161616"
96
+ muted: "#525252"
37
97
  layer: "#f4f4f4"
38
- layer-hover: "#e8e8e8"
39
- error: "#da1e28"
40
- success: "#24a148"
41
- warning: "#f1c21b"
42
- interactive-dark: "#78a9ff"
98
+ border: "#c6c6c6"
99
+ link: "#0062fe"
43
100
  typography:
44
- family: { sans: "IBM Plex Sans", mono: "IBM Plex Mono" }
45
- display: { size: 60, weight: 300, lineHeight: 1.17, use: "Maximum impact display, light weight" }
46
- body: { size: 16, weight: 400, use: "Standard reading text" }
47
- caption: { size: 14, weight: 400, tracking: 0.16, use: "Captions, micro-tracking" }
48
- label: { size: 12, weight: 400, tracking: 0.32, use: "Input labels, helper text" }
49
- spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
50
- rounded: { sm: 0, md: 0, lg: 0, full: 9999 }
101
+ family: { sans: "IBM Plex Sans KR" }
102
+ display: { size: 53.6469, weight: 300, lineHeight: 62.7669, use: "Marketing leadspace at the captured 1440px viewport" }
103
+ body: { size: 16, weight: 400, lineHeight: 24, use: "Observed public-product body text" }
104
+ action: { size: 14, weight: 400, lineHeight: 18.0001, tracking: 0.16, use: "Observed primary action" }
105
+ label: { size: 12, weight: 400, lineHeight: 16, tracking: 0.32, use: "Observed marketing badge" }
106
+ spacing: { xs: 8, sm: 12, md: 16, lg: 24, xl: 32, section: 64 }
107
+ rounded: { sharp: 0, control: 4 }
51
108
  shadow:
52
109
  flat: "none"
53
110
  components:
54
- button-primary: { type: button, bg: "#0f62fe", fg: "#ffffff", radius: 0, padding: "14px 63px 14px 15px", use: "Primary blue button, 48px tall, sharp rectangle" }
55
- button-secondary: { type: button, bg: "#393939", fg: "#ffffff", radius: 0, use: "Gray secondary button" }
56
- button-tertiary: { type: button, bg: "#ffffff", fg: "#0f62fe", radius: 0, use: "Ghost blue, 1px blue border" }
57
- button-ghost: { type: button, bg: "#ffffff", fg: "#0f62fe", radius: 0, padding: "14px 16px", use: "Borderless ghost, gray hover tint" }
58
- button-danger: { type: button, bg: "#da1e28", fg: "#ffffff", radius: 0, use: "Danger button" }
59
- card: { type: card, bg: "#f4f4f4", radius: 0, padding: "16px", use: "Flat tile, no border/shadow, bg-layered separation" }
60
- input: { type: input, bg: "#f4f4f4", fg: "#161616", radius: 0, padding: "0px 16px", use: "Bottom-border field, 40px tall, sharp" }
61
- nav: { type: tab, bg: "#161616", fg: "#c6c6c6", use: "Dark masthead nav, 48px tall", active: "white text + bottom-border indicator" }
111
+ primary-action: { type: button, bg: "#0f62fe", fg: "#ffffff", radius: 4, padding: "14px 63px 14px 15px", height: 48, font: "14px/400 IBM Plex Sans KR", states: "hover/pressed/focus captured on cloud-support and confluent", use: "Public product CTA" }
112
+ product-tabs: { type: tab, bg: "#f4f4f4", fg: "#161616", border: "1px solid #c6c6c6", radius: 4, padding: "0px 16px", height: 48, font: "16px/400 IBM Plex Sans KR", states: "hover/pressed/selected captured", use: "Confluent public-product tablist" }
62
113
  components_harvested: true
63
114
  ---
64
115
 
@@ -66,399 +117,197 @@ tokens:
66
117
 
67
118
  ## 1. Visual Theme & Atmosphere
68
119
 
69
- IBM's website is the digital embodiment of enterprise authority built on the Carbon Design System a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (`#ffffff`) canvas with near-black (`#161616`) text, punctuated by a single, unwavering accent IBM Blue 60 (`#0f62fe`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.
120
+ IBM is a long-running enterprise technology company whose public web experience connects cloud, AI, data, automation, and support information to a highly recognizable system language. Its current Korean public surfaces balance dense, practical product information with a restrained visual grammar: a white and light-gray field, near-black text, precise blue actions, and modestly rounded controls. The brand’s expressive layer comes principally from IBM Plex, a corporate typeface that IBM positions alongside its name and logo, while Carbon supplies the reusable component and accessibility guidance behind many of those public patterns. IBM’s own history traces the company from the 1911 Computing-Tabulating-Recording merger through its 1924 IBM name; its current About material frames the company around AI, cloud, quantum, and sustainability. [IBM history](https://www.ibm.com/history/ctr-and-ibm) · [IBM About](https://www.ibm.com/about?lnk=intro)
70
121
 
71
- The IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.
122
+ The July 2026 capture establishes a narrower, current implementation boundary. It covers one Korean marketing route and two public product routes; it does not represent an authenticated IBM application or every Carbon theme. The product routes repeatedly use IBM Plex Sans KR, full-height 48px primary actions, 4px control corners, flat surfaces, and tab/accordion structures. Carbon documentation is authoritative design-system context, but its catalog of variants is not automatically a claim about every observed IBM.com surface.
72
123
 
73
- What defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with `--cds-` (Carbon Design System). Buttons don't have hardcoded colors; they reference `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.
74
-
75
- **Key Characteristics:**
76
- - IBM Plex Sans at weight 300 (Light) for display corporate gravitas through typographic restraint
77
- - IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes
78
- - Single accent color: IBM Blue 60 (`#0f62fe`) every interactive element, every CTA, every link
79
- - Carbon token system (`--cds-*`) driving all semantic colors, enabling theme-switching at the variable level
80
- - 8px spacing grid with strict adherence — no arbitrary values, everything aligns
81
- - Flat, borderless cards on `#f4f4f4` Gray 10 surface — depth through background-color layering, not shadows
82
- - Bottom-border inputs (not boxed) — the signature Carbon form pattern
83
- - 0px border-radius on primary buttons — unapologetically rectangular, no softening
124
+ **Key characteristics:**
125
+ - White and Gray 10 (`#f4f4f4`) layers with Gray 100 (`#161616`) text
126
+ - IBM Blue (`#0f62fe`) for the captured primary action; `#0062fe` also appears as a public link/color treatment
127
+ - IBM Plex Sans KR is the loaded, visible family on the captured Korean marketing and public-product surfaces
128
+ - Small, explicit action typography: 14px / 400 / 18.0001px with 0.16px tracking
129
+ - A mixed corner treatment: content structures are often sharp, while captured primary actions and tabs use 4px
84
130
 
85
131
  ## 2. Color Palette & Roles
86
132
 
87
- ### Primary
88
- - **IBM Blue 60** (`#0f62fe`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.
89
- - **White** (`#ffffff`): Page background, card surfaces, button text on blue, `--cds-background`.
90
- - **Gray 100** (`#161616`): Primary text, headings, dark surface backgrounds, nav bar, footer. `--cds-text-primary`.
91
-
92
- ### Neutral Scale (Gray Family)
93
- - **Gray 100** (`#161616`): Primary text, headings, dark UI chrome, footer background.
94
- - **Gray 90** (`#262626`): Secondary dark surfaces, hover states on dark backgrounds.
95
- - **Gray 80** (`#393939`): Tertiary dark, active states.
96
- - **Gray 70** (`#525252`): Secondary text, helper text, descriptions. `--cds-text-secondary`.
97
- - **Gray 60** (`#6f6f6f`): Placeholder text, disabled text.
98
- - **Gray 50** (`#8d8d8d`): Disabled icons, muted labels.
99
- - **Gray 30** (`#c6c6c6`): Borders, divider lines, input bottom-borders. `--cds-border-subtle`.
100
- - **Gray 20** (`#e0e0e0`): Subtle borders, card outlines.
101
- - **Gray 10** (`#f4f4f4`): Secondary surface background, card fills, alternating rows. `--cds-layer-01`.
102
- - **Gray 10 Hover** (`#e8e8e8`): Hover state for Gray 10 surfaces.
103
-
104
- ### Interactive
105
- - **Blue 60** (`#0f62fe`): Primary interactive — buttons, links, focus. `--cds-link-primary`, `--cds-button-primary`.
106
- - **Blue 70** (`#0043ce`): Link hover state. `--cds-link-primary-hover`.
107
- - **Blue 80** (`#002d9c`): Active/pressed state for blue elements.
108
- - **Blue 10** (`#edf5ff`): Blue tint surface, selected row background.
109
- - **Focus Blue** (`#0f62fe`): `--cds-focus` — 2px inset border on focused elements.
110
- - **Focus Inset** (`#ffffff`): `--cds-focus-inset` — white inner ring for focus on dark backgrounds.
111
-
112
- ### Support & Status
113
- - **Red 60** (`#da1e28`): Error, danger. `--cds-support-error`.
114
- - **Green 50** (`#24a148`): Success. `--cds-support-success`.
115
- - **Yellow 30** (`#f1c21b`): Warning. `--cds-support-warning`.
116
- - **Blue 60** (`#0f62fe`): Informational. `--cds-support-info`.
117
-
118
- ### Dark Theme (Gray 100 Theme)
119
- - **Background**: Gray 100 (`#161616`). `--cds-background`.
120
- - **Layer 01**: Gray 90 (`#262626`). Card and container surfaces.
121
- - **Layer 02**: Gray 80 (`#393939`). Elevated surfaces.
122
- - **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
123
- - **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
124
- - **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.
125
- - **Interactive**: Blue 40 (`#78a9ff`). Links and interactive elements shift lighter for contrast.
133
+ ### Observed public marketing and product palette
134
+ - **Primary action** (`#0f62fe`): default background on the captured Cloud Support CTA; white text.
135
+ - **Link / product accent** (`#0062fe`): observed as text and border color on the marketing and Confluent routes. It is retained as a separate observed role, not silently collapsed into the CTA value.
136
+ - **Canvas** (`#ffffff`): observed public page background and light control surface.
137
+ - **Foreground** (`#161616`): repeated text and border color across all three captured routes.
138
+ - **Muted text** (`#525252`): repeated secondary text color across all three captured routes.
139
+ - **Layer** (`#f4f4f4`): repeated product tab/input/card-adjacent surface.
140
+ - **Border** (`#c6c6c6`): observed tab and card boundary color.
141
+
142
+ The capture also found route-local state colors such as `#e8e8e8` on a tab hover and several darker blue CTA states. They are documented with selector and surface provenance in §4 rather than promoted as universal palette tokens.
126
143
 
127
144
  ## 3. Typography Rules
128
145
 
129
- ### Font Family
130
- - **Primary**: `IBM Plex Sans`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
131
- - **Monospace**: `IBM Plex Mono`, with fallbacks: `Menlo, Courier, monospace`
132
- - **Serif** (limited use): `IBM Plex Serif`, for editorial/expressive contexts
133
- - **Icon Font**: `ibm_icons` proprietary icon glyphs at 20px
134
-
135
- ### Hierarchy
136
-
137
- | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
138
- |------|------|------|--------|-------------|----------------|-------|
139
- | Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |
140
- | Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |
141
- | Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |
142
- | Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |
143
- | Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |
144
- | Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |
145
- | Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |
146
- | Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |
147
- | Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |
148
- | Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |
149
- | Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |
150
- | Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |
151
- | Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |
152
- | Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |
153
- | Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |
154
-
155
- ### Principles
156
- - **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.
157
- - **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.
158
- - **Three functional weights**: 300 (display/expressive), 400 (body/reading), 600 (emphasis/UI labels). Weight 700 is intentionally absent from the production type scale.
159
- - **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.
146
+ ### Evidence classes
147
+
148
+ **Official product-use.** IBM’s Design Language calls IBM Plex its corporate typeface and lists Sans, Mono, Serif, and Condensed subfamilies. IBM Developer separately states that Plex Mono Light is its expressive primary face and Plex Sans supports informative text. These are official brand-system facts, not proof that every current IBM.com page loads every family. [IBM Design Language](https://www.ibm.com/design/language/typography/typeface/) · [IBM Developer typography](https://www.ibm.com/brand/experience-guides/developer/brand/typography/)
149
+
150
+ **Live computed surface-use.** The supplied 2026-07-13 capture records `IBM Plex Sans KR` as loaded/high for 485 visible elements across marketing, Cloud Support, and Confluent. `IBM Plex Sans` is also loaded/high for 25 elements. Representative measured styles include a 53.6469px/300/62.7669px marketing leadspace, 16px/400/24px product body, 14px/400/18.0001px action text with 0.16px tracking, and a 12px/400/16px marketing badge with 0.32px tracking.
151
+
152
+ **Official distributed asset and license.** IBM describes Plex as open source and directs users to its GitHub release; its Design Language says the downloadable files contain the Open Font License. This supports the typeface’s distribution and license boundary, not a browser substitution. [Typeface and license note](https://www.ibm.com/design/language/typography/typeface/)
153
+
154
+ **Declared-only in this capture.** `IBM Plex Mono`, `IBM Plex Serif`, `IBM Plex Sans Arabic`, `IBM Plex Sans Hebrew`, and `IBM Plex Sans JP` had `@font-face` sources but no visible computed use in the three captured routes. Mono and Serif remain useful official family context, but are not machine UI-family tokens here.
155
+
156
+ **System/unresolved.** A marketing newsletter input computed to `Helvetica, Arial, sans-serif`; it is kept separate as marketing-form chrome and is not represented as IBM Plex. `ibm_icons` was loaded for two icon elements; it is not typography content.
160
157
 
161
158
  ## 4. Component Stylings
162
159
 
163
- ### Buttons
160
+ ### Public product primary action
164
161
 
165
- **Primary Button (Blue)**
166
- - Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
167
- - Text: `#ffffff` (White)
168
- - Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)
169
- - Border: 1px solid transparent
170
- - Border-radius: 0px (sharp rectangle — the Carbon signature)
171
- - Height: 48px (default), 40px (compact), 64px (expressive)
172
- - Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
173
- - Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
174
- - Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner
175
-
176
- **Secondary Button (Gray)**
177
- - Background: `#393939` (Gray 80)
162
+ **Default Cloud Support and Confluent**
163
+ - Background: `#0f62fe`
178
164
  - Text: `#ffffff`
179
- - Hover: `#4c4c4c` (Gray 70)
180
- - Active: `#6f6f6f` (Gray 60)
181
- - Same padding/radius as primary
182
-
183
- **Tertiary Button (Ghost Blue)**
184
- - Background: transparent
185
- - Text: `#0f62fe` (Blue 60)
186
- - Border: 1px solid `#0f62fe`
187
- - Hover: `#0353e9` text + Blue 10 background tint
188
- - Border-radius: 0px
189
-
190
- **Ghost Button**
191
- - Background: transparent
192
- - Text: `#0f62fe` (Blue 60)
193
- - Padding: 14px 16px
194
- - Border: none
195
- - Hover: `#e8e8e8` background tint
196
-
197
- **Danger Button**
198
- - Background: `#da1e28` (Red 60)
199
- - Text: `#ffffff`
200
- - Hover: `#b81921` (Red 70)
201
-
202
- ### Cards & Containers
203
- - Background: `#ffffff` on white theme, `#f4f4f4` (Gray 10) for elevated cards
204
- - Border: none (flat design — no border or shadow on most cards)
205
- - Border-radius: 0px (matching the rectangular button aesthetic)
206
- - Hover: background shifts to `#e8e8e8` (Gray 10 Hover) for clickable cards
207
- - Content padding: 16px
208
- - Separation: background-color layering (white → gray 10 → white) rather than shadows
209
-
210
- ### Inputs & Forms
211
- - Background: `#f4f4f4` (Gray 10) — `--cds-field`
212
- - Text: `#161616` (Gray 100)
213
- - Padding: 0px 16px (horizontal only)
214
- - Height: 40px (default), 48px (large)
215
- - Border: none on sides/top — `2px solid transparent` bottom
216
- - Bottom-border active: `2px solid #161616` (Gray 100)
217
- - Focus: `2px solid #0f62fe` (Blue 60) bottom-border — `--cds-focus`
218
- - Error: `2px solid #da1e28` (Red 60) bottom-border
219
- - Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70
220
- - Helper text: 12px, Gray 60
221
- - Placeholder: Gray 60 (`#6f6f6f`)
222
- - Border-radius: 0px (top) — inputs are sharp-cornered
223
-
224
- ### Navigation
225
- - Background: `#161616` (Gray 100) — full-width dark masthead
165
+ - Border: 1px solid transparent
166
+ - Radius: 4px
167
+ - Padding: 14px 63px 14px 15px
226
168
  - Height: 48px
227
- - Logo: IBM 8-bar logo, white on dark, left-aligned
228
- - Links: 14px IBM Plex Sans, weight 400, `#c6c6c6` (Gray 30) default
229
- - Link hover: `#ffffff` text
230
- - Active link: `#ffffff` with bottom-border indicator
231
- - Platform switcher: left-aligned horizontal tabs
232
- - Search: icon-triggered slide-out search field
233
- - Mobile: hamburger with left-sliding panel
234
-
235
- ### Links
236
- - Default: `#0f62fe` (Blue 60) with no underline
237
- - Hover: `#0043ce` (Blue 70) with underline
238
- - Visited: remains Blue 60 (no visited state change)
239
- - Inline links: underlined by default in body copy
240
-
241
- ### Distinctive Components
242
-
243
- **Content Block (Hero/Feature)**
244
- - Full-width alternating white/gray-10 background bands
245
- - Headline left-aligned with 60px or 48px display type
246
- - CTA as blue primary button with arrow icon
247
- - Image/illustration right-aligned or below on mobile
248
-
249
- **Tile (Clickable Card)**
250
- - Background: `#f4f4f4` or `#ffffff`
251
- - Full-width bottom-border or background-shift hover
252
- - Arrow icon bottom-right on hover
253
- - No shadow — flatness is the identity
254
-
255
- **Tag / Label**
256
- - Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)
257
- - Text: corresponding 60-grade color
258
- - Padding: 4px 8px
259
- - Border-radius: 24px (pill — exception to the 0px rule)
260
- - Font: 12px weight 400
261
-
262
- **Notification Banner**
263
- - Full-width bar, typically Blue 60 or Gray 100 background
264
- - White text, 14px
265
- - Close/dismiss icon right-aligned
169
+ - Font: 14px / 400 / IBM Plex Sans KR
170
+ - Use: Public product CTA; selectors `surface-2::[data-omd-capture="4"]` and `surface-3::[data-omd-capture="16"]`.
171
+ - Hover: `#095bf4` on Cloud Support and `#0b5df8` on Confluent.
172
+ - Pressed: `#0c56e7` on Cloud Support and `#0953e5` on Confluent.
173
+ - Focus: 4px radius with dark-blue background and inset focus treatment; raw values are retained in `.verification.md` because the two routes differ.
174
+
175
+ ### Public product tabs
176
+
177
+ **Contained tab — Confluent route**
178
+ - Background: `#f4f4f4`
179
+ - Text: `#161616`
180
+ - Border: 1px solid `#c6c6c6`
181
+ - Radius: 4px
182
+ - Padding: 0px 16px
183
+ - Height: 48px
184
+ - Font: 16px / 400 / IBM Plex Sans KR
185
+ - Use: `surface-3::[data-omd-capture="10"]`, a public Confluent tablist.
186
+ - Hover: `#e8e8e8` background.
187
+ - Selected: transparent background with `#ffffff` text; the selected target panels were captured through the tab interaction.
188
+ - Pressed: observed by the collector; no universal pressed color is promoted because the evidence records route-local values only.
189
+
190
+ ### Public product accordion
191
+
192
+ **Flush support accordion header — Cloud Support route**
193
+ - Text: `#161616`
194
+ - Border: 1px solid `#e0e0e0` on the item’s top edge
195
+ - Radius: 0px
196
+ - Padding: 0px 16px 0px 0px
197
+ - Height: 40px
198
+ - Font: 16px / 400 / IBM Plex Sans KR
199
+ - Use: `surface-2::[data-omd-capture="5"]`, class `cds--accordion__heading cmp-accordion__button`.
200
+ - Focus: captured on the header.
201
+ - Pressed: captured on the header.
202
+
203
+ The bundle did not record an accordion-panel expansion interaction, so no expanded-panel spacing, icon rotation, disabled state, or generic modal/toast/form-error variant is asserted. Carbon’s [accordion guidance](https://carbondesignsystem.com/components/accordion/usage/) describes the broader component separately.
204
+
205
+ ### Marketing-form boundary
206
+
207
+ **Newsletter field marketing only**
208
+ - Background: `#f4f4f4`
209
+ - Text: `#161616`
210
+ - Border: 1px bottom edge `#8d8d8d`
211
+ - Radius: 0px
212
+ - Padding: 0px 16px
213
+ - Height: 48px
214
+ - Font: 14px / 400 / Helvetica, Arial, sans-serif
215
+ - Use: `home::[data-omd-capture="23"]`; a Marketo-classed field on the public marketing route.
216
+
217
+ This form field is not promoted into the IBM Plex product token set.
218
+
219
+ ---
220
+ **Verified:** 2026-07-13
221
+ **Tier 1 sources:** [IBM KR marketing](https://www.ibm.com/kr-ko), [Cloud Support](https://www.ibm.com/kr-ko/products/cloud/support?lnk=flathl), [Confluent](https://www.ibm.com/kr-ko/products/confluent?lnk=hpfp4kr), [Carbon Button](https://carbondesignsystem.com/components/button/usage/), [Carbon Tabs](https://carbondesignsystem.com/components/tabs/usage/), [Carbon Accordion](https://carbondesignsystem.com/components/accordion/usage/)
222
+ **Tier 2 sources:** [getdesign IBM directory](https://getdesign.md/ibm); Refero query attempted, but the built-in web tool refused the direct URL and no indexed Refero IBM result was used.
223
+ **Resolution note:** The earlier universal 0px primary-button claim was rolled back: the supplied fresh public-product evidence measures 4px on the captured primary CTAs.
224
+ **Conflicts unresolved:** none
266
225
 
267
226
  ## 5. Layout Principles
268
227
 
269
- ### Spacing System
270
- - Base unit: 8px (Carbon 2x grid)
271
- - Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
272
- - Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
273
- - Mini unit: 8px (smallest usable spacing)
274
- - Padding within components: typically 16px
275
- - Gap between cards/tiles: 1px (hairline) or 16px (standard)
276
-
277
- ### Grid & Container
278
- - 16-column grid (Carbon's 2x grid system)
279
- - Max content width: 1584px (max breakpoint)
280
- - Column gutters: 32px (16px on mobile)
281
- - Margin: 16px (mobile), 32px (tablet+)
282
- - Content typically spans 8-12 columns for readable line lengths
283
- - Full-bleed sections alternate with contained content
284
-
285
- ### Whitespace Philosophy
286
- - **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.
287
- - **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.
288
- - **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.
289
-
290
- ### Border Radius Scale
291
- - **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.
292
- - **2px**: Occasionally on small interactive elements (tags)
293
- - **24px**: Tags/labels (pill shape — the sole rounded exception)
294
- - **50%**: Avatar circles, icon containers
228
+ The captured 1440px routes repeatedly expose 8, 12, 16, 24, 32, 48, and 64px spacing values. Treat these as observed rhythm candidates, not a complete responsive grid specification. Carbon’s 2x Grid is official system guidance, but the supplied artifact did not measure breakpoint-specific grid columns or a second viewport; those values remain outside this reference’s live-token scope.
295
229
 
296
- ## 6. Depth & Elevation
230
+ For the observed public routes, use light-gray layering and clean rule boundaries before introducing shadow. Keep action controls at the measured 48px height where the public-product primary CTA pattern is appropriate. Do not infer an authenticated-product layout from the marketing or product-detail pages.
297
231
 
298
- | Level | Treatment | Use |
299
- |-------|-----------|-----|
300
- | Flat (Level 0) | No shadow, `#ffffff` background | Default page surface |
301
- | Layer 01 | No shadow, `#f4f4f4` background | Cards, tiles, alternating sections |
302
- | Layer 02 | No shadow, `#e0e0e0` background | Elevated panels within Layer 01 |
303
- | Raised | `0 2px 6px rgba(0,0,0,0.3)` | Dropdowns, tooltips, overflow menus |
304
- | Overlay | `0 2px 6px rgba(0,0,0,0.3)` + dark scrim | Modal dialogs, side panels |
305
- | Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Keyboard focus ring |
306
- | Bottom-border | `2px solid #161616` on bottom edge | Active input, active tab indicator |
232
+ ## 6. Depth & Elevation
307
233
 
308
- **Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact when something floats in Carbon, it matters.
234
+ The representative public components in the supplied bundle report `box-shadow: none`. The visible hierarchy comes from white and `#f4f4f4` surfaces, text contrast, borders, and the accent action. Floating menus, dialogs, tooltips, and overlays were not captured; their elevation values are intentionally absent.
309
235
 
310
236
  ## 7. Do's and Don'ts
311
237
 
312
238
  ### Do
313
- - Use IBM Plex Sans at weight 300 for display sizes (42px+) the lightness is intentional
314
- - Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions
315
- - Use 0px border-radius on buttons, inputs, cards, and tiles rectangles are the system
316
- - Reference `--cds-*` token names when implementing (e.g., `--cds-button-primary`, `--cds-text-primary`)
317
- - Use background-color layering (white gray 10 gray 20) for depth instead of shadows
318
- - Use bottom-border (not box) for input field indicators
319
- - Maintain the 48px default button height and asymmetric padding for icon accommodation
320
- - Apply Blue 60 (`#0f62fe`) as the sole accent — one blue to rule them all
239
+ - Use the measured IBM Plex Sans KR public-web family when implementing the captured Korean product patterns.
240
+ - Keep the captured primary CTA at 48px high with 4px radius and the observed asymmetric padding.
241
+ - Distinguish `#0f62fe` CTA backgrounds from the separately observed `#0062fe` link treatment.
242
+ - Keep tabs and accordion behavior tied to their documented public-product routes and selector provenance.
243
+ - Use Carbon documentation for system-level guidance while preserving the actual IBM.com surface boundary.
321
244
 
322
245
  ### Don't
323
- - Don't round button corners 0px radius is the Carbon identity
324
- - Don't use shadows on cards or tiles flatness is the point
325
- - Don't introduce additional accent colors IBM's system is monochromatic + blue
326
- - Don't use weight 700 (Bold) the scale stops at 600 (Semibold)
327
- - Don't add letter-spacing to display-size text tracking is only for 14px and below
328
- - Don't box inputs with full borders — Carbon inputs use bottom-border only
329
- - Don't use gradient backgrounds — IBM's surfaces are flat, solid colors
330
- - Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)
246
+ - Do not reintroduce a universal 0px-radius primary-button rule for the captured public-product routes.
247
+ - Do not render Helvetica marketing-form chrome as IBM Plex or promote it to the product type token.
248
+ - Do not turn declared-only Mono, Serif, or locale faces into visible-webfont claims.
249
+ - Do not invent expanded accordion, error, modal, toast, or dashboard states from the current capture.
250
+ - Do not apply the Korean public-web measurements as a substitute for an authenticated IBM product surface.
331
251
 
332
252
  ## 8. Responsive Behavior
333
253
 
334
- ### Breakpoints
335
- | Name | Width | Key Changes |
336
- |------|-------|-------------|
337
- | Small (sm) | 320px | Single column, hamburger nav, 16px margins |
338
- | Medium (md) | 672px | 2-column grids begin, expanded content |
339
- | Large (lg) | 1056px | Full navigation visible, 3-4 column grids |
340
- | X-Large (xlg) | 1312px | Maximum content density, wide layouts |
341
- | Max | 1584px | Maximum content width, centered with margins |
342
-
343
- ### Touch Targets
344
- - Button height: 48px default, minimum 40px (compact)
345
- - Navigation links: 48px row height for touch
346
- - Input height: 40px default, 48px large
347
- - Icon buttons: 48px square touch target
348
- - Mobile menu items: full-width 48px rows
349
-
350
- ### Collapsing Strategy
351
- - Hero: 60px display → 42px → 32px heading as viewport narrows
352
- - Navigation: full horizontal masthead → hamburger with slide-out panel
353
- - Grid: 4-column → 2-column → single column
354
- - Tiles/cards: horizontal grid → vertical stack
355
- - Images: maintain aspect ratio, max-width 100%
356
- - Footer: multi-column link groups → stacked single column
357
- - Section padding: 48px → 32px → 16px
358
-
359
- ### Image Behavior
360
- - Responsive images with `max-width: 100%`
361
- - Product illustrations scale proportionally
362
- - Hero images may shift from side-by-side to stacked below
363
- - Data visualizations maintain aspect ratio with horizontal scroll on mobile
254
+ No breakpoint comparison was collected in this packet. The public primary CTA, tabs, accordion header, and marketing field were measured only at the captured 1440×900 viewport. Preserve normal responsive accessibility requirements in an implementation, but do not claim IBM-specific mobile geometry, navigation collapse, or grid changes without a separate observation.
364
255
 
365
256
  ## 9. Agent Prompt Guide
366
257
 
367
- ### Quick Color Reference
368
- - Primary CTA: IBM Blue 60 (`#0f62fe`)
369
- - Background: White (`#ffffff`)
370
- - Heading text: Gray 100 (`#161616`)
371
- - Body text: Gray 100 (`#161616`)
372
- - Secondary text: Gray 70 (`#525252`)
373
- - Surface/Card: Gray 10 (`#f4f4f4`)
374
- - Border: Gray 30 (`#c6c6c6`)
375
- - Link: Blue 60 (`#0f62fe`)
376
- - Link hover: Blue 70 (`#0043ce`)
377
- - Focus ring: Blue 60 (`#0f62fe`)
378
- - Error: Red 60 (`#da1e28`)
379
- - Success: Green 50 (`#24a148`)
380
-
381
- ### Example Component Prompts
382
- - "Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding)."
383
- - "Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8."
384
- - "Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f."
385
- - "Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border."
386
- - "Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400."
387
-
388
- ### Iteration Guide
389
- 1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon
390
- 2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text
391
- 3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold
392
- 4. Blue 60 is the only accent color — do not introduce secondary accent hues
393
- 5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows
394
- 6. Inputs have bottom-border only, never fully boxed
395
- 7. Use `--cds-` prefix for token naming to stay Carbon-compatible
396
- 8. 48px is the universal interactive element height
258
+ ### Quick reference
259
+ - Product CTA: `#0f62fe` / `#ffffff`, 4px radius, 48px high, 14px / 400 IBM Plex Sans KR.
260
+ - Product body: IBM Plex Sans KR, 16px / 400 / 24px, `#161616`.
261
+ - Product tabs: `#f4f4f4` surface, `#161616` text, 1px `#c6c6c6` border, 4px radius.
262
+ - Support accordion: sharp 40px header, top rule `#e0e0e0`, 16px / 400 IBM Plex Sans KR.
263
+
264
+ ### Boundary-aware prompt
265
+ - "Create a public-product CTA using the captured IBM pattern: `#0f62fe` background, white text, 4px radius, 48px height, 14px 63px 14px 15px padding, and IBM Plex Sans KR at 14px/400. Keep hover, pressed, and focus route-specific rather than inventing one global state value."
397
266
 
398
267
  ## 10. Voice & Tone
399
268
 
400
- IBM's voice is **enterprise-technical and Carbon-systematic.** Carbon Design System discipline shows up in every surface uppercase labels, IBM Plex font, 0px-radius buttons, IBM Blue `#0f62fe` primary. The voice is closer to a research lab + enterprise contract than to consumer marketing.
269
+ IBMs public design guidance favors clear, action-led labels and systematic information architecture over decorative copy. Carbon’s button guidance asks labels to communicate the action and recommends sentence case; the IBM Developer typography guidance uses code-adjacent glyphs and disciplined type to make technical communication recognizable. For IBM-style public product copy, name the task or resource, use direct verbs, and let supporting text explain the technical context. Avoid invented security certifications, performance outcomes, or informal claims of transformation. [Carbon Button guidance](https://carbondesignsystem.com/components/button/usage/) · [IBM Developer typography](https://www.ibm.com/brand/experience-guides/developer/brand/typography/)
401
270
 
402
- | Context | Tone |
271
+ | Context | Treatment |
403
272
  |---|---|
404
- | CTA | Verb. "Get started", "Try free", "Talk to sales" |
405
- | Marketing | Enterprise-fluent. SOC 2 / FedRAMP / ISO references |
406
- | Documentation | Carbon-component-named; deep-linked component docs |
407
- | Error | Specific. "Authentication failed (HTTP 401). Check API key." |
408
-
409
- **Voice samples**
410
- - Marketing CTA (KR): *"무료로 시작하기"* <!-- verified: ibm.com/kr-ko 2026-05 -->
411
-
412
- **Forbidden phrases.** "Revolutionary AI" without specifics. Casual emoji.
273
+ | Primary action | Sentence-case action label that states the outcome. |
274
+ | Product detail | Direct technical noun plus a concise explanatory sentence. |
275
+ | Support disclosure | Short heading that describes the content revealed by the accordion. |
413
276
 
414
277
  ## 11. Brand Narrative
415
278
 
416
- IBM was founded **June 16 1911** as the **Computing-Tabulating-Recording Company (CTR)** by **Charles Ranlett Flint** a Wall Street financier who **amalgamated four companies** (Tabulating Machine Company, International Time Recording Company, Computing Scale Company of America, Bundy Manufacturing Company) ([Charles Ranlett Flint — Wikipedia](https://en.wikipedia.org/wiki/Charles_Ranlett_Flint), [IBM — The origins of IBM](https://www.ibm.com/history/ctr-and-ibm)). **Renamed "International Business Machines" 1924** under **Thomas J. Watson Sr.**, who had joined CTR in 1914. The contemporary brand identity was established through **Paul Rand**, hired by **Thomas J. Watson Jr. in 1956** — Rand replaced Beton Bold with **City Medium** and created the iconic 8-bar (later 13-bar) striped IBM logo, with a directive to "**herald a new era of IBM while also communicating continuity**" ([History of IBM logo — Hatchwise](https://www.hatchwise.com/resources/the-history-of-the-ibm-logo)). The Rand→**Eddy Opara** design legacy continues today through the **Carbon Design System** (open-sourced 2018, [carbondesignsystem.com](https://carbondesignsystem.com/)) — IBM Plex font, IBM Blue `#0f62fe`, 0px-radius buttons. Carbon makes IBM one of the few enterprise vendors with a publicly documented design system that's also adopted by external teams. **In 2024-2025 IBM acquired HashiCorp** ($6.4B announced April 24 2024, **closed February 27 2025**), folding HashiCorp's products into IBM's hybrid cloud strategy.
279
+ IBM’s own history places its origin in the 1911 creation of Computing-Tabulating-Recording Company from data-processing businesses; the company later became IBM. That long data-and-computing lineage helps explain a brand system that presents technical information as structured, durable, and internationally usable rather than fashion-led. [The origins of IBM](https://www.ibm.com/history/ctr-and-ibm)
280
+
281
+ The contemporary expression is held together by IBM Plex and Carbon. IBM calls Plex a corporate typeface and makes its source and OFL boundary available; Carbon provides the public component guidance that contextualizes buttons, tabs, and accordions. Current IBM About material presents the company’s work around AI, cloud, quantum computing, and sustainability. This reference keeps those first-party narrative facts separate from the limited set of computed values collected on Korean public routes. [IBM Plex](https://www.ibm.com/design/language/typography/typeface/) · [IBM About](https://www.ibm.com/about?lnk=intro)
417
282
 
418
283
  ## 12. Principles
419
284
 
420
- 1. **Carbon is the system.** *UI implication:* every component has a Carbon spec read carbondesignsystem.com before deviating.
421
- 2. **0px radius is intentional.** Carbon's defining aesthetic choice. *UI implication:* never round corners on Carbon-spec elements.
422
- 3. **IBM Plex is the type voice.** Sans / Mono / Serif variants. *UI implication:* don't substitute system fonts; Plex is the brand register.
423
- 4. **48px universal interactive height.** *UI implication:* all clickable elements meet 48px tap target.
424
- 5. **`#0f62fe` IBM Blue is THE accent.** *UI implication:* other Carbon tokens carry semantic meaning; IBM Blue is for "primary action" only.
285
+ 1. **Make the action legible.** Carbon treats a button label as the statement of the action. *UI implication:* use direct sentence-case action labels rather than vague promotional nouns.
286
+ 2. **Use typography as identity and information structure.** IBM positions Plex as a core brand asset and uses Mono/Sans differently in its Developer guidance. *UI implication:* use the loaded KR Sans evidence for this public-web reference; reserve other official Plex families for surfaces where their use is actually established.
287
+ 3. **Keep component context intact.** Carbon’s tab and accordion guidance makes their purpose and behavior explicit. *UI implication:* use tabs for related views and accordions for progressive disclosure; do not invent unobserved state variants.
288
+ 4. **Separate system guidance from surface fact.** Carbon is IBM’s official system, but this packet observes a bounded public web slice. *UI implication:* never overwrite product/marketing evidence with a generic component catalog.
425
289
 
426
290
  ## 13. Personas
427
291
 
428
- *Personas are fictional archetypes informed by IBM user segments (enterprise IT architects, watsonx AI/ML platform users, regulated-industry compliance), not individual people.*
429
-
430
- **Catherine Liu, 47, Toronto.** Principal architect at a global insurance company. IBM Cloud + watsonx the chosen path for compliant AI deployment.
292
+ No first-party audience research suitable for named personas was collected in this packet. Do not invent demographic personas.
431
293
 
432
- **Hiroshi Tanaka, 52, Tokyo.** CIO at multinational logistics. IBM partnership for hybrid cloud modernization.
433
-
434
- **Aisha Khan, 35, Dubai.** Senior consultant at IBM Consulting. Translates client needs into Carbon-compliant deliverables.
294
+ - **[FILL IN: validated public-product audience]** add only with an IBM first-party research or product source.
295
+ - **[FILL IN: validated support-information audience]** — add only with an IBM first-party research or product source.
435
296
 
436
297
  ## 14. States
437
298
 
438
- | State | Treatment |
299
+ | State | Evidence boundary |
439
300
  |---|---|
440
- | **Empty (no resources)** | "Create your first resource" Carbon Button.Primary |
441
- | **Empty (no data)** | Carbon EmptyState component pattern + CTA |
442
- | **Loading** | Carbon InlineLoading or Loading component, never custom |
443
- | **Error** | Carbon Notification.error variant; persistent until dismissed |
444
- | **Success** | Carbon Notification.success; auto-dismiss 4s |
445
- | **Skeleton** | Carbon SkeletonText / SkeletonPlaceholder components |
446
- | **Disabled** | Carbon disabled state explicit visual contrast (not just opacity) |
447
- | **Loading (long)** | Carbon ProgressBar with explicit ETA |
301
+ | Primary action default | Captured on Cloud Support and Confluent: `#0f62fe`, white text, 4px radius, 48px height. |
302
+ | Primary action hover | Captured route-local values: `#095bf4` (Cloud Support) and `#0b5df8` (Confluent). |
303
+ | Primary action — pressed | Captured route-local values: `#0c56e7` (Cloud Support) and `#0953e5` (Confluent). |
304
+ | Primary action — focus | Captured on both routes with dark-blue/inset focus treatment; raw values are in verification notes. |
305
+ | Tab — default | Confluent: `#f4f4f4`, `#161616`, 1px `#c6c6c6`, 4px radius. |
306
+ | Tab hover | Confluent: `#e8e8e8` background. |
307
+ | Tab selected | Confluent interaction capture: white text, transparent background. |
308
+ | Accordion focus/pressed | Cloud Support header interaction states captured; no expanded panel was captured. |
309
+ | Loading, error, empty, disabled, success, skeleton | Not captured on these public routes; intentionally unspecified. |
448
310
 
449
311
  ## 15. Motion & Easing
450
312
 
451
- Carbon Motion tokens: `productive` (110ms / 240ms / 400ms), `expressive` (175ms / 240ms / 400ms / 700ms). Curves: `standard / entrance / exit / expressive`.
452
-
453
- **Motion rules.**
454
- 1. Carbon productive curves for utility motions
455
- 2. Carbon expressive curves for marketing
456
- 3. `prefers-reduced-motion: reduce` collapses to instant
457
-
458
- ---
459
-
460
- **Verified:** 2026-05-08 (omd:migrate run 28 — Apple-tier)
461
- **Tier 1 sources:** ibm.com/us-en home + /products (live DOM via playwright — Primary `#0f62fe` IBM Blue 0px / asymmetric 14-15×15-16 / 48px / 14px·400; triple-confirmed against Carbon DS `$blue-60` token ✓).
462
- **Tier 1 (DS-official):** carbondesignsystem.com — Carbon Design System open-source spec, the rare case where a brand publishes its own DS as authoritative.
463
- **Tier 2 (Philosophy/history):** Wikipedia (Charles Flint, IBM, CTR, History of IBM), IBM corporate history (`ibm.com/history/ctr-and-ibm`), Hatchwise IBM logo timeline.
464
- **Style ref:** `stripe`. **Conflicts unresolved:** none.
313
+ The supplied evidence records hover, pressed, focus, and tab-selected results but does not measure durations, curves, or reduced-motion behavior. Do not infer a motion scale from Carbon documentation or from static state values. **[FILL IN: motion tokens only after direct IBM-surface or official-token evidence.]**