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.
- package/.claude/hooks/lib/preferences-parser.cjs +1 -0
- package/.claude/hooks/lib/preferences-writer.cjs +1 -0
- package/.claude/hooks/post-edit-watch.cjs +1 -0
- package/.claude/hooks/session-end-foldin.cjs +1 -0
- package/.claude/hooks/session-state-loader.cjs +1 -0
- package/.claude/hooks/skill-activation.cjs +1 -0
- package/.claude/settings.json +10 -1
- package/.github/assets/logo-bg.png +0 -0
- package/AGENTS.md +20 -1
- package/CHANGELOG.md +482 -0
- package/MIGRATION.md +103 -0
- package/README.ja.md +56 -19
- package/README.ko.md +47 -30
- package/README.md +48 -30
- package/README.zh-TW.md +59 -22
- package/agents/AGENT.md +8 -7
- package/agents/omd-codex-image.md +1 -1
- package/agents/omd-critic.md +6 -7
- package/agents/omd-designer-review.md +1 -1
- package/agents/omd-final-qa.md +1 -1
- package/agents/omd-humanizer.md +38 -0
- package/agents/omd-kr-writer.md +3 -4
- package/agents/omd-locale-adapter.md +12 -16
- package/agents/omd-master.md +24 -19
- package/agents/omd-microcopy.md +1 -1
- package/agents/omd-orchestrator.md +7 -8
- package/agents/omd-slop-auditor.md +31 -0
- package/agents/omd-ux-researcher.md +1 -1
- package/data/reference-fingerprints.json +1995 -38
- package/dist/bin/oh-my-design.js +16 -8
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/chunk-UJIHCEYF.js +99 -0
- package/dist/chunk-UJIHCEYF.js.map +1 -0
- package/dist/doctor-LDWSFM3I.js +763 -0
- package/dist/doctor-LDWSFM3I.js.map +1 -0
- package/dist/install-skills-ZZFNJ2II.js +1120 -0
- package/dist/install-skills-ZZFNJ2II.js.map +1 -0
- package/docs/CLI_QUICKSTART.md +157 -0
- package/package.json +25 -4
- package/scripts/postinstall.cjs +5 -4
- package/skills/claude-design/SKILL.md +38 -14
- package/skills/claude-design/references/claude-design-flow.md +11 -11
- package/skills/claude-design/references/codebase-analysis.md +5 -4
- package/skills/omd-final-qa/SKILL.md +1 -1
- package/skills/omd-harness/SKILL.md +51 -50
- package/skills/omd-humanize/SKILL.md +116 -0
- package/skills/omd-humanize/agents/openai.yaml +4 -0
- package/skills/omd-humanize/references/locale-playbooks.md +102 -0
- package/skills/omd-humanize/references/sources.md +11 -0
- package/skills/omd-init/SKILL.md +18 -12
- package/skills/omd-locale-adapter/SKILL.md +58 -91
- package/skills/omd-orchestrator/SKILL.md +11 -5
- package/skills/omd-reference-capture/SKILL.md +80 -26
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
- package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
- package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
- package/skills/omd-slop-audit/SKILL.md +110 -0
- package/skills/omd-slop-audit/agents/openai.yaml +4 -0
- package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
- package/skills/omd-slop-audit/references/sources.md +24 -0
- package/web/references/104/DESIGN.md +354 -0
- package/web/references/11st/DESIGN.md +197 -316
- package/web/references/29cm/DESIGN.md +297 -393
- package/web/references/42dot/DESIGN.md +390 -0
- package/web/references/8percent/DESIGN.md +438 -0
- package/web/references/ably/DESIGN.md +267 -572
- package/web/references/acer/DESIGN.md +329 -0
- package/web/references/airbnb/DESIGN.md +219 -557
- package/web/references/alipay/DESIGN.md +179 -420
- package/web/references/apple/DESIGN.md +224 -498
- package/web/references/asleep/DESIGN.md +402 -0
- package/web/references/au/DESIGN.md +334 -0
- package/web/references/autopedia/DESIGN.md +382 -0
- package/web/references/aws-cloudscape/DESIGN.md +241 -0
- package/web/references/baemin/DESIGN.md +332 -491
- package/web/references/banksalad/DESIGN.md +269 -180
- package/web/references/barogo/DESIGN.md +416 -0
- package/web/references/beusable/DESIGN.md +464 -0
- package/web/references/bilibili/DESIGN.md +206 -374
- package/web/references/bmw/DESIGN.md +162 -276
- package/web/references/brandi/DESIGN.md +184 -325
- package/web/references/catchtable/DESIGN.md +219 -264
- package/web/references/cgv/DESIGN.md +317 -0
- package/web/references/channeltalk/DESIGN.md +210 -336
- package/web/references/china-airlines/DESIGN.md +291 -0
- package/web/references/cjonstyle/DESIGN.md +453 -0
- package/web/references/class101/DESIGN.md +168 -387
- package/web/references/classum/DESIGN.md +228 -203
- package/web/references/claude/DESIGN.md +242 -479
- package/web/references/clay/DESIGN.md +179 -377
- package/web/references/clickhouse/DESIGN.md +254 -343
- package/web/references/cohere/DESIGN.md +214 -324
- package/web/references/coinone/DESIGN.md +199 -179
- package/web/references/corca/DESIGN.md +414 -0
- package/web/references/coupang/DESIGN.md +205 -475
- package/web/references/cursor/DESIGN.md +240 -381
- package/web/references/dabang/DESIGN.md +248 -213
- package/web/references/dable/DESIGN.md +431 -0
- package/web/references/datarize/DESIGN.md +217 -330
- package/web/references/dealicious/DESIGN.md +402 -0
- package/web/references/drdiary/DESIGN.md +404 -0
- package/web/references/elastic/DESIGN.md +238 -0
- package/web/references/elevenlabs/DESIGN.md +183 -321
- package/web/references/eslite/DESIGN.md +257 -0
- package/web/references/evaair/DESIGN.md +338 -0
- package/web/references/expo/DESIGN.md +238 -331
- package/web/references/familymart-tw/DESIGN.md +254 -0
- package/web/references/ferrari/DESIGN.md +160 -377
- package/web/references/figma/DESIGN.md +197 -451
- package/web/references/fitpet/DESIGN.md +445 -0
- package/web/references/flex/DESIGN.md +170 -253
- package/web/references/framer/DESIGN.md +197 -340
- package/web/references/freee/DESIGN.md +211 -533
- package/web/references/friendliai/DESIGN.md +431 -0
- package/web/references/frip/DESIGN.md +440 -0
- package/web/references/gangnamunni/DESIGN.md +154 -591
- package/web/references/gaudiolab/DESIGN.md +414 -0
- package/web/references/google/DESIGN.md +290 -398
- package/web/references/hashicorp/DESIGN.md +273 -318
- package/web/references/heydealer/DESIGN.md +429 -0
- package/web/references/humanscape/DESIGN.md +433 -0
- package/web/references/hyundai/DESIGN.md +158 -368
- package/web/references/hyundaicard/DESIGN.md +171 -121
- package/web/references/ibm/DESIGN.md +227 -378
- package/web/references/idus/DESIGN.md +450 -0
- package/web/references/igaworks/DESIGN.md +437 -0
- package/web/references/inflearn/DESIGN.md +221 -366
- package/web/references/intuit/DESIGN.md +244 -0
- package/web/references/jandi/DESIGN.md +191 -291
- package/web/references/jobplanet/DESIGN.md +415 -0
- package/web/references/kakao/DESIGN.md +287 -475
- package/web/references/kakaobank/DESIGN.md +220 -521
- package/web/references/kakaogames/DESIGN.md +220 -0
- package/web/references/kakaopay/DESIGN.md +207 -526
- package/web/references/karrot/DESIGN.md +227 -251
- package/web/references/kb-kookmin/DESIGN.md +308 -0
- package/web/references/kbank/DESIGN.md +220 -175
- package/web/references/kmong/DESIGN.md +281 -356
- package/web/references/krds/DESIGN.md +245 -19
- package/web/references/kream/DESIGN.md +224 -359
- package/web/references/kurly/DESIGN.md +211 -533
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lguplus/DESIGN.md +259 -0
- package/web/references/likelion/DESIGN.md +283 -0
- package/web/references/line/DESIGN.md +396 -355
- package/web/references/linear.app/DESIGN.md +209 -562
- package/web/references/lotteon/DESIGN.md +386 -0
- package/web/references/lovable/DESIGN.md +255 -349
- package/web/references/makinarocks/DESIGN.md +149 -349
- package/web/references/maum-ai/DESIGN.md +423 -0
- package/web/references/medibloc/DESIGN.md +425 -0
- package/web/references/megabox/DESIGN.md +232 -0
- package/web/references/mercari/DESIGN.md +217 -434
- package/web/references/microsoft/DESIGN.md +234 -388
- package/web/references/mildang/DESIGN.md +411 -0
- package/web/references/millie/DESIGN.md +183 -504
- package/web/references/minimax/DESIGN.md +264 -322
- package/web/references/miricanvas/DESIGN.md +182 -355
- package/web/references/miro/DESIGN.md +234 -232
- package/web/references/mistral.ai/DESIGN.md +231 -314
- package/web/references/mixi/DESIGN.md +234 -0
- package/web/references/moin/DESIGN.md +445 -0
- package/web/references/mongodb/DESIGN.md +219 -316
- package/web/references/musinsa/DESIGN.md +184 -510
- package/web/references/mynavi/DESIGN.md +242 -0
- package/web/references/myrealtrip/DESIGN.md +169 -406
- package/web/references/naver/DESIGN.md +328 -499
- package/web/references/naverwebtoon/DESIGN.md +172 -395
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/notion/DESIGN.md +271 -475
- package/web/references/nrise/DESIGN.md +417 -0
- package/web/references/ohouse/DESIGN.md +210 -549
- package/web/references/oliveyoung/DESIGN.md +217 -326
- package/web/references/ollama/DESIGN.md +241 -308
- package/web/references/onestore/DESIGN.md +248 -0
- package/web/references/palantir/DESIGN.md +256 -0
- package/web/references/panasonic/DESIGN.md +276 -0
- package/web/references/patternfly/DESIGN.md +259 -0
- package/web/references/payhere/DESIGN.md +438 -0
- package/web/references/pega/DESIGN.md +262 -0
- package/web/references/peoplefund/DESIGN.md +431 -0
- package/web/references/petfriends/DESIGN.md +428 -0
- package/web/references/pinkfong/DESIGN.md +199 -367
- package/web/references/pinterest/DESIGN.md +258 -308
- package/web/references/poya/DESIGN.md +286 -0
- package/web/references/pozalabs/DESIGN.md +438 -0
- package/web/references/protopie/DESIGN.md +419 -0
- package/web/references/qraft/DESIGN.md +448 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/recruit/DESIGN.md +247 -0
- package/web/references/remember/DESIGN.md +202 -396
- package/web/references/resend/DESIGN.md +274 -348
- package/web/references/sakura-internet/DESIGN.md +269 -0
- package/web/references/samsung/DESIGN.md +157 -359
- package/web/references/sandoll/DESIGN.md +445 -0
- package/web/references/sanity/DESIGN.md +241 -375
- package/web/references/scatterlab/DESIGN.md +412 -0
- package/web/references/selectstar/DESIGN.md +439 -0
- package/web/references/servicenow/DESIGN.md +289 -0
- package/web/references/shinhanbank/DESIGN.md +161 -341
- package/web/references/shinhancard/DESIGN.md +208 -319
- package/web/references/sionic/DESIGN.md +454 -0
- package/web/references/sktelecom/DESIGN.md +310 -0
- package/web/references/socar/DESIGN.md +125 -32
- package/web/references/softbank/DESIGN.md +231 -0
- package/web/references/sony/DESIGN.md +234 -0
- package/web/references/soop/DESIGN.md +261 -0
- package/web/references/spacex/DESIGN.md +184 -323
- package/web/references/spotify/DESIGN.md +253 -394
- package/web/references/squeezebits/DESIGN.md +441 -0
- package/web/references/stayfolio/DESIGN.md +422 -0
- package/web/references/stripe/DESIGN.md +212 -491
- package/web/references/supabase/DESIGN.md +244 -316
- package/web/references/tabling/DESIGN.md +415 -0
- package/web/references/taishinbank/DESIGN.md +243 -0
- package/web/references/teamlab/DESIGN.md +240 -0
- package/web/references/teamsparta/DESIGN.md +472 -0
- package/web/references/tellingme/DESIGN.md +392 -0
- package/web/references/tesla/DESIGN.md +244 -427
- package/web/references/thsr/DESIGN.md +284 -0
- package/web/references/thumbtack/DESIGN.md +302 -0
- package/web/references/together.ai/DESIGN.md +257 -304
- package/web/references/toss/DESIGN.md +251 -593
- package/web/references/toss-securities/DESIGN.md +255 -178
- package/web/references/tossbank/DESIGN.md +195 -491
- package/web/references/toyota/DESIGN.md +238 -0
- package/web/references/tving/DESIGN.md +197 -245
- package/web/references/typed/DESIGN.md +413 -0
- package/web/references/uber/DESIGN.md +256 -333
- package/web/references/udn/DESIGN.md +250 -0
- package/web/references/upbit/DESIGN.md +145 -256
- package/web/references/upstage/DESIGN.md +211 -204
- package/web/references/uswds/DESIGN.md +287 -0
- package/web/references/vercel/DESIGN.md +236 -440
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/wise/DESIGN.md +223 -231
- package/web/references/wisetracker/DESIGN.md +462 -0
- package/web/references/wooribank/DESIGN.md +245 -0
- package/web/references/yanolja/DESIGN.md +250 -419
- package/web/references/yeogiotte/DESIGN.md +235 -418
- package/web/references/zapier/DESIGN.md +256 -377
- package/web/references/zendesk/DESIGN.md +288 -0
- package/web/references/zigzag/DESIGN.md +200 -621
- package/dist/install-skills-7UUDOLG2.js +0 -734
- 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-
|
|
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
|
|
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:
|
|
21
|
-
extracted: "2026-
|
|
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
|
-
|
|
30
|
-
|
|
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
|
-
|
|
39
|
-
|
|
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
|
|
45
|
-
display: { size:
|
|
46
|
-
body:
|
|
47
|
-
|
|
48
|
-
label:
|
|
49
|
-
spacing: { xs:
|
|
50
|
-
rounded: {
|
|
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
|
-
|
|
55
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
- IBM Plex Sans
|
|
77
|
-
-
|
|
78
|
-
-
|
|
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
|
-
###
|
|
88
|
-
- **
|
|
89
|
-
- **
|
|
90
|
-
- **
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
- **
|
|
94
|
-
- **
|
|
95
|
-
|
|
96
|
-
-
|
|
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
|
-
###
|
|
130
|
-
|
|
131
|
-
-
|
|
132
|
-
|
|
133
|
-
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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
|
-
###
|
|
160
|
+
### Public product primary action
|
|
164
161
|
|
|
165
|
-
**
|
|
166
|
-
- Background: `#0f62fe`
|
|
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
|
-
-
|
|
180
|
-
-
|
|
181
|
-
-
|
|
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
|
-
-
|
|
228
|
-
-
|
|
229
|
-
-
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
-
|
|
237
|
-
-
|
|
238
|
-
-
|
|
239
|
-
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
-
|
|
245
|
-
-
|
|
246
|
-
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
-
|
|
252
|
-
-
|
|
253
|
-
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
-
|
|
257
|
-
-
|
|
258
|
-
-
|
|
259
|
-
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
314
|
-
-
|
|
315
|
-
-
|
|
316
|
-
-
|
|
317
|
-
- Use
|
|
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
|
-
-
|
|
324
|
-
-
|
|
325
|
-
-
|
|
326
|
-
-
|
|
327
|
-
-
|
|
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
|
-
|
|
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
|
|
368
|
-
-
|
|
369
|
-
-
|
|
370
|
-
-
|
|
371
|
-
-
|
|
372
|
-
|
|
373
|
-
-
|
|
374
|
-
-
|
|
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
|
|
269
|
+
IBM’s 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 |
|
|
271
|
+
| Context | Treatment |
|
|
403
272
|
|---|---|
|
|
404
|
-
|
|
|
405
|
-
|
|
|
406
|
-
|
|
|
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
|
|
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
|
|
421
|
-
2. **
|
|
422
|
-
3. **
|
|
423
|
-
4. **
|
|
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
|
-
|
|
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
|
-
**
|
|
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 |
|
|
299
|
+
| State | Evidence boundary |
|
|
439
300
|
|---|---|
|
|
440
|
-
|
|
|
441
|
-
|
|
|
442
|
-
|
|
|
443
|
-
|
|
|
444
|
-
|
|
|
445
|
-
|
|
|
446
|
-
|
|
|
447
|
-
|
|
|
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
|
-
|
|
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.]**
|