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
@@ -7,195 +7,245 @@ homepage: "https://www.hyundaicard.com"
7
7
  primary_color: "#000000"
8
8
  logo:
9
9
  type: favicon
10
- slug: "https://www.google.com/s2/favicons?domain=hyundaicard.com&sz=128"
11
- verified: "2026-06-01"
10
+ slug: "https://newsroom.hyundaicard.com/images/favicon.ico"
11
+ verified: "2026-07-13"
12
12
  omd: "0.1"
13
13
  ds:
14
14
  name: Hyundai Card Design Library
15
15
  url: "https://newsroom.hyundaicard.com/front/board/Hyundai-Card-Design-Library?country=en"
16
16
  type: brand
17
- description: Hyundai Card's official Design Library the brand's design philosophy, the proprietary Youandi typeface, and visual identity.
17
+ description: A Hyundai Card cultural space, not a public component design-system specification.
18
+ verification_v2:
19
+ schema: 2
20
+ checked: "2026-07-13"
21
+ surfaces:
22
+ - { id: home, kind: product, url: "https://www.hyundaicard.com/index.jsp", inspected: "2026-07-13" }
23
+ - { id: corporate-ceh, kind: corporate-information, url: "https://www.hyundaicard.com/about/ceh/ho/cehho0101_01.hc", inspected: "2026-07-13" }
24
+ - { id: corporate-ckh, kind: corporate-information, url: "https://www.hyundaicard.com/about/ckh/ho/ckhho0101_01.hc", inspected: "2026-07-13" }
25
+ sources:
26
+ - { id: collector-home, kind: product-surface, url: "https://www.hyundaicard.com/index.jsp", captured: "2026-07-13" }
27
+ - { id: collector-ceh, kind: product-surface, url: "https://www.hyundaicard.com/about/ceh/ho/cehho0101_01.hc", captured: "2026-07-13" }
28
+ - { id: collector-ckh, kind: product-surface, url: "https://www.hyundaicard.com/about/ckh/ho/ckhho0101_01.hc", captured: "2026-07-13" }
29
+ - { id: youandi-official, kind: official-doc, url: "https://newsroom.hyundaicard.com/front/board/Hyundai-Card-branding-through-typeface?country=en", captured: "2026-07-13" }
30
+ claims:
31
+ "tokens.colors.ink": &home { surface_id: home, source_id: collector-home, method: computed-style, captured: "2026-07-13" }
32
+ "tokens.colors.canvas": *home
33
+ "tokens.colors.inverse": &corporate { surface_id: corporate-ceh, source_id: collector-ceh, method: computed-style, captured: "2026-07-13" }
34
+ "tokens.colors.link-product": *home
35
+ "tokens.colors.link-corporate": *corporate
36
+ "tokens.typography.family.sans": &font { surface_id: home, source_id: collector-home, method: computed-style-fontfaceset-source, captured: "2026-07-13" }
37
+ "tokens.typography.hero.size": *font
38
+ "tokens.typography.hero.weight": *font
39
+ "tokens.typography.hero.lineHeight": *font
40
+ "tokens.typography.hero.use": *font
41
+ "tokens.typography.corporate-hero.size": *corporate
42
+ "tokens.typography.corporate-hero.weight": *corporate
43
+ "tokens.typography.corporate-hero.lineHeight": *corporate
44
+ "tokens.typography.corporate-hero.use": *corporate
45
+ "tokens.typography.nav.size": *font
46
+ "tokens.typography.nav.weight": *font
47
+ "tokens.typography.nav.lineHeight": *font
48
+ "tokens.typography.nav.use": *font
49
+ "tokens.typography.card-title.size": *home
50
+ "tokens.typography.card-title.weight": *home
51
+ "tokens.typography.card-title.lineHeight": *home
52
+ "tokens.typography.card-title.use": *home
53
+ "tokens.spacing.nav-inline": *font
54
+ "tokens.spacing.corporate-action-inline": *corporate
55
+ "tokens.rounded.corporate-outline-action": *corporate
56
+ "tokens.rounded.carousel-control": *home
57
+ "tokens.shadow.flat": *home
58
+ "tokens.components.product-card-link.type": *home
59
+ "tokens.components.product-card-link.fg": *home
60
+ "tokens.components.product-card-link.font": *home
61
+ "tokens.components.product-card-link.use": *home
62
+ conflicts: []
18
63
  tokens:
19
- source: prose-derived
20
- extracted: "2026-06-09"
21
- note: "deliberately monochrome black IS the brand color; the only accents are functional content tags on DIVE"
64
+ source: reconciled
65
+ extracted: "2026-07-13"
66
+ note: "Current product home and corporate-information surfaces are separate from DIVE, marketing, and unobserved interaction states."
22
67
  colors:
23
68
  ink: "#000000"
24
- ground: "#ffffff"
25
- tag-red: "#f36464"
26
- tag-green: "#15a91f"
69
+ canvas: "#ffffff"
70
+ inverse: "#ffffff"
71
+ link-product: "#0070f0"
72
+ link-corporate: "#1e75d6"
27
73
  typography:
28
- family: { sans: "Youandi", fallback: "Noto Sans KR" }
29
- heading: { size: 26, weight: 600, use: "Section-level headings; pair with Youandi for brand moments" }
30
- body: { size: 13, weight: 400, use: "Running text, Noto Sans KR" }
31
- spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
32
- rounded: { sm: 4, md: 8, lg: 24, full: 9999 }
74
+ family: { sans: "YouandiNewKr" }
75
+ hero: { size: 40, weight: 600, lineHeight: 52, use: "Product-home h2 headings" }
76
+ corporate-hero: { size: 54, weight: 700, lineHeight: 80, use: "Corporate-information h2 headings on the two captured routes" }
77
+ nav: { size: 18, weight: 500, lineHeight: 26, use: "Product-home second-level navigation links" }
78
+ card-title: { size: 16, weight: 500, lineHeight: 22, use: "Product-card title labels" }
79
+ spacing:
80
+ nav-inline: 20
81
+ corporate-action-inline: 29
82
+ rounded:
83
+ corporate-outline-action: 3
84
+ carousel-control: 5
33
85
  shadow:
34
86
  flat: "none"
35
87
  components:
36
- button-primary: { type: button, bg: "#ffffff", fg: "#000000", radius: 24, use: "Minimal monochrome pill, 48px tall, outline border" }
37
- heading: { type: card, bg: "#ffffff", fg: "#000000", use: "Section heading, 26px/600, editorial spacing" }
38
- page-surface: { type: card, bg: "#ffffff", fg: "#000000", use: "Base content canvas, white ground, generous whitespace" }
39
- tag-red: { type: badge, fg: "#f36464", use: "Functional content category tag on DIVE only" }
40
- tag-green: { type: badge, fg: "#15a91f", use: "Functional content category tag on DIVE only" }
88
+ product-card-link: { type: card, fg: "#000000", font: "16px / 400 / platform system stack", use: "Product-home card link; transparent, borderless default" }
41
89
  components_harvested: true
42
90
  ---
43
91
  # Design System Inspiration of Hyundai Card
44
92
 
45
93
  ## 1. Visual Theme & Atmosphere
46
94
 
47
- Hyundai Card is Korea's most design-celebrated credit-card brand, and its visual identity is an exercise in disciplined restraint: monochrome premium minimalism built almost entirely from ink black (#000000) on a clean white (#FFFFFF) ground. Color is not used as decoration here — it is withheld on purpose, treated as a luxury that the brand chooses not to spend, so that the absence of color becomes the statement. The signature element is typography itself: the proprietary "Youandi" (유앤아이) typeface carries the brand's voice, making letterforms the primary expressive medium rather than imagery or palette. The atmosphere is gallery-like and editorial generous whitespace, high contrast, and a quiet confidence that reads as understated wealth rather than loud premium cues. Surfaces are flat and unadorned, headers are transparent, and every element earns its place. The result feels less like a banking product and more like a cultural design platform, which is exactly how the DIVE surface presents the brand. This is typography-as-identity, where the discipline of black, white, and a custom face does all the work.
95
+ Hyundai Card is a Korean credit-card company whose identity reaches beyond payment products into card design, cultural programming, and branded libraries. Its most recognizable visual asset is Youandi: the company introduced the proprietary typeface in 2003, then renewed it as YouandiNew for contemporary digital media. Hyundai Card’s own account places the card plate’s proportions inside the letterforms, treating type as a carrier of brand identity rather than as a decorative layer. That history is visible on the current captured product home, where loaded YouandiNewKr leads product headings and navigation, while the corporate-information routes use a larger white-on-dark display treatment. The live product routes are not a uniform monochrome system: black and white form the common base, but their product and corporate links use distinct blue values. DIVE, the Design Library, and other cultural/marketing surfaces are meaningful brand context, but were not used to fill product tokens in this reference.
48
96
 
49
97
  ## 2. Color Palette & Roles
50
- The palette is deliberately monochrome. The ground is white (#FFFFFF) and the ink is black (#000000), and the brand color is essentially black itself — color is the thing that is held back, which is the entire point of the identity. The only chromatic accents appear as functional category tags on the DIVE content surface, never as primary brand expression.
51
98
 
52
- | Role | Value | Usage |
99
+ The three supplied current captures share black text and white page fields. Two blue link treatments are surface-specific, so neither is promoted as a universal brand primary.
100
+
101
+ | Role | Value | Usage and evidence boundary |
53
102
  | --- | --- | --- |
54
- | Ground | #FFFFFF | Page and surface background; the dominant field |
55
- | Ink | #000000 | Body text, headings, primary brand color; the monochrome anchor |
56
- | Accent red (functional) | #F36464 | Content category tag on DIVE only |
57
- | Accent green (functional) | #15A91F | Content category tag on DIVE only |
103
+ | Ink | #000000 | Current product home and both corporate-information routes; text and border observations |
104
+ | Canvas | #FFFFFF | Current captured surface background observations |
105
+ | Inverse text | #FFFFFF | Corporate-information hero/action context; not a global text token |
106
+ | Product link | #0070F0 | Product-home detail links only |
107
+ | Corporate link | #1E75D6 | Corporate-information links only |
58
108
 
59
- The accents are strictly utilitarian. They classify content; they do not brand. Treat #F36464 and #15A91F as labeling tools confined to tags, and keep the rest of the experience in pure black-and-white.
109
+ The prior DIVE-only red and green content tags are omitted: they were not observed in this product/corporate packet and cannot describe the current product token set.
60
110
 
61
111
  ## 3. Typography Rules
62
- Typography is the brand. The display layer uses the proprietary "Youandi" typeface (confirmed in the DOM as YouandiNewKr, with HEB / TR / HB weights) for headings and branding — it is the signature element and should be reserved for moments that carry the brand's voice. Body text is set in Noto Sans KR for legibility across Korean and Latin content. The captured body size is 13px, and the heading size is 26px at weight 600, giving a clear two-step hierarchy: a confident editorial heading over a quiet, readable body.
63
112
 
64
- | Token | Value |
65
- | --- | --- |
66
- | Display / branding | Youandi (YouandiNewKr — HEB / TR / HB weights), proprietary |
67
- | Body | Noto Sans KR |
68
- | Body size | 13px |
69
- | Heading | 26px / 600 |
113
+ **Official product-use.** Hyundai Card says that it has used Youandi for product branding and official company documents since 2003; the 2021 renewal, YouandiNew, was designed for digital environments, readability, Korean/English balance, and variable-font use. The official account describes it as a proprietary corporate typeface, not a public web-font distribution or open-license announcement.
70
114
 
71
- Rule of thumb: let Youandi own the brand and headline moments; let Noto Sans KR carry running text at 13px; reserve the 26px/600 step for section-level headings.
115
+ **Live computed surface-use.** `YouandiNewKr` is the only verified branded family in this packet: it is the computed family on 60 visible heading, navigation, and text observations, has a loaded FontFace match, and resolves to Hyundai Card-hosted `YouandiNewKrTitle` font files. The product home uses 40px/600/52px `h2` headings and 18px/500/26px second-level links; the two corporate-information pages use 54px/700/80px `h2` headings.
72
116
 
73
- ## 4. Component Stylings
117
+ **System use.** A platform stack is the first computed family on 351 ordinary body, card, button, and text observations. It is an observed runtime fallback/utility stack, not a substitute rendering of YouandiNewKr and not a brand-font claim. Product-card labels are observed at 16px/500/22px in that stack.
74
118
 
75
- ### Page Surface (DIVE)
119
+ **Declared-only assets.** `Spoqa Han Sans Neo`, `YouandiModernHEB`, `YouandiModernTR`, and `YouandModern` have `@font-face` source declarations in the capture but no visible first-family usage. They remain declared-only. A password-input face named `pass` is loaded for two inputs and is not a brand type token.
76
120
 
77
- **Default**
78
- - Background: #FFFFFF
79
- - Text: #000000
80
- - Border: none
81
- - Padding: generous whitespace (editorial)
82
- - Height: full viewport
83
- - Font: 13px / 400 (Noto Sans KR)
84
- - Use: the base content canvas — white ground, black ink, maximal restraint
121
+ **License boundary.** The official font history establishes Hyundai Card’s ownership and internal product/document use. No public redistribution license or browser-consumable licensing terms were found in the official sources consulted; do not infer permission to ship the font outside its supplied Hyundai Card sources.
122
+
123
+ ## 4. Component Stylings
85
124
 
86
- ### Heading
125
+ ### Product-home navigation link
87
126
 
88
- **Section heading**
127
+ **Second-level link**
89
128
  - Background: transparent
90
129
  - Text: #000000
91
130
  - Border: none
92
- - Padding: editorial spacing above and below
93
- - Height: auto
94
- - Font: 26px / 600
95
- - Use: section-level titles; pair with Youandi for true brand moments
131
+ - Radius: 0px
132
+ - Padding: 0px 20px
133
+ - Font: 18px / 500 / YouandiNewKr
134
+ - Use: `home::[data-omd-capture="1"–"7"]` static second-level navigation links on the product home
96
135
 
97
- ### Button
136
+ ### Product-card link
98
137
 
99
- **Primary (minimal pill)**
100
- - Background: #FFFFFF
101
- - Text: #000000
102
- - Border: minimal outline (monochrome)
103
- - Radius: 24px
104
- - Padding: balanced for a 48px pill
105
- - Height: 48px
106
- - Font: body scale (Noto Sans KR)
107
- - Use: primary action; the rounded pill is the one soft gesture in an otherwise hard, flat system
108
-
109
- ### Header
110
-
111
- **Transparent header**
138
+ **Default**
112
139
  - Background: transparent
113
140
  - Text: #000000
114
141
  - Border: none
115
- - Padding: edge-aligned to the content grid
116
- - Height: auto
117
- - Font: Noto Sans KR
118
- - Use: lets the white ground read continuously from header into content; no chrome, no shadow
142
+ - Radius: 0px
143
+ - Font: 16px / 400 / platform system stack
144
+ - Use: `home::[data-omd-capture="55"–"84"]` product-card links; only the default was captured
119
145
 
120
- ### Content Tag
146
+ ### Corporate-information action
121
147
 
122
- **Category tag (red)**
123
- - Background: tag fill
124
- - Text: #F36464
125
- - Border: none
126
- - Radius: pill
127
- - Padding: compact
128
- - Height: compact label
129
- - Font: small body scale
130
- - Use: functional content classification on DIVE only — not brand color
131
-
132
- **Category tag (green)**
133
- - Background: tag fill
134
- - Text: #15A91F
135
- - Border: none
136
- - Radius: pill
137
- - Padding: compact
138
- - Height: compact label
139
- - Font: small body scale
140
- - Use: functional content classification on DIVE only — not brand color
148
+ **Outline action**
149
+ - Background: transparent
150
+ - Text: #FFFFFF
151
+ - Border: 1px solid rgba(255,255,255,0.6)
152
+ - Radius: 3px
153
+ - Padding: 0px 29px
154
+ - Font: 16px / 400 / platform system stack
155
+ - Use: `surface-2::[data-omd-capture="11"]` and `surface-3::[data-omd-capture="12"]`; corporate-information routes only
156
+
157
+ No hover, focus, pressed, disabled, error, menu, dialog, or toast state is included: the supplied collector reports zero interaction expansions and zero observed states.
141
158
 
142
159
  ## 5. Layout Principles
143
- The layout is editorial and gallery-like, built on generous whitespace and a continuous white ground. The transparent header dissolves into the content so the page reads as one uninterrupted surface, and the absence of borders, fills, and chrome keeps attention on type and spacing. Black ink on white field creates the contrast that structures the page; there is no competing color to organize around. Hierarchy is established through the typographic step — 26px/600 headings over 13px body — and through the rhythm of negative space rather than through dividers or boxes. The pill button at 24px radius is the single soft moment in an otherwise crisp, rectilinear field. Treat layout as composition: align to a clean grid, let whitespace breathe, and resist the urge to add color or ornament.
160
+
161
+ The captured product home establishes hierarchy through a 40px YouandiNewKr heading, 18px second-level navigation, and transparent product-card links rather than a documented card-container recipe. Corporate-information routes use a separate 54px inverse hero and compact 3px outline action. Treat those as surface-specific compositions; there is no captured evidence for a shared responsive grid, spacing scale, or universal card treatment.
144
162
 
145
163
  ## 6. Depth & Elevation
146
- This is a flat system. There are no documented shadows, gradients, or elevation layers — the header is transparent and surfaces sit at a single plane on the white ground. Depth, to the extent it exists, comes from contrast (black ink against white) and from spacing, not from drop shadows or stacking. Keep elements coplanar; if separation is needed, use whitespace and the typographic hierarchy rather than introducing elevation. The only curvature in the system is the 24px button radius, which softens the action without implying lift. Restraint applies to depth exactly as it applies to color.
164
+
165
+ The captured representatives report `box-shadow: none`. This supports a flat default for the retained components only. It does not establish that Hyundai Card never uses shadows, gradients, or elevation on other product, marketing, or native-app surfaces.
147
166
 
148
167
  ## 7. Do's and Don'ts
149
168
 
150
169
  ### Do
151
- - Keep the palette monochrome: #FFFFFF ground, #000000 ink.
152
- - Treat black (#000000) as the brand color withholding color is the point.
153
- - Reserve Youandi (proprietary) for headings and branding moments.
154
- - Set body in Noto Sans KR at 13px; use 26px/600 for headings.
155
- - Use the 48px pill button with 24px radius as the soft action gesture.
156
- - Keep the header transparent and surfaces flat.
170
+
171
+ - Use YouandiNewKr only when it is licensed and actually available from Hyundai Card-controlled sources.
172
+ - Preserve the product/corporate split: black-and-white foundation, product link #0070F0, corporate link #1E75D6.
173
+ - Keep the observed product navigation and card links transparent and borderless.
174
+ - Use the 3px corporate outline action only for the corporate-information context from which it was measured.
157
175
 
158
176
  ### Don't
159
- - Introduce color as a brand element — the accents #F36464 and #15A91F are for functional content tags only.
160
- - Add shadows, gradients, or elevation; the system is flat.
161
- - Substitute a generic display face where Youandi carries the brand voice.
162
- - Crowd the layout whitespace is structural.
163
- - Box content in borders or fills; let contrast and spacing do the work.
177
+
178
+ - Treat DIVE tag colors or Design Library visuals as current payment-product tokens.
179
+ - Replace unavailable YouandiNewKr with a system face while labeling it Youandi.
180
+ - Generalize the corporate white outline action into a product-home primary button.
181
+ - Invent interaction states, motion, a spacing scale, or component variants absent from the capture.
164
182
 
165
183
  ## 8. Responsive Behavior
166
- The captured surface (DIVE) is a content/culture platform whose responsive logic follows its editorial, whitespace-driven layout: the continuous white ground and transparent header scale naturally from desktop to mobile, with the typographic hierarchy (26px/600 heading over 13px body) carrying structure at every width. The 48px pill button provides a comfortable touch target on mobile. Beyond these observed values, responsive specifics were not captured (the main banking site is security-plugin-walled), so adapt qualitatively: preserve generous whitespace, keep the monochrome contrast, maintain the flat single-plane surface, and let the type hierarchy — not added chrome — communicate structure as the viewport narrows.
184
+
185
+ The supplied evidence is desktop-only at 1440×900. It establishes typography and default component values on the listed routes, not a responsive contract. Preserve the surface split and remeasure at target breakpoints before assigning mobile dimensions, stacking behavior, or touch states.
167
186
 
168
187
  ## 9. Agent Prompt Guide
169
- When generating UI in the Hyundai Card style, instruct the agent: "Design a monochrome, editorial interface — white (#FFFFFF) ground, black (#000000) ink, and treat black as the brand color. Withhold color entirely; the absence of color is the statement. Use a proprietary-feeling display typeface (Youandi, weights HEB/TR/HB) for headings and branding, and Noto Sans KR for body at 13px, with 26px/600 section headings. Keep everything flat — no shadows, no gradients, no elevation, transparent header. The only soft gesture is a 48px pill button with 24px radius, white fill, black text. Lean on generous whitespace and high black-on-white contrast for structure. If you must classify content, you may use red #F36464 or green #15A91F as small functional tag colors only — never as brand color." Emphasize restraint above all: when in doubt, remove rather than add.
188
+
189
+ When using the verified current Hyundai Card web cues, prompt for a restrained black-and-white base with surface-local blue links, not a generic monochrome luxury system. Use licensed YouandiNewKr for verified display/nav moments only; otherwise keep the observed platform stack honestly labeled. On a product-home composition, use transparent 18px/500 YouandiNewKr second-level links with 20px inline padding and transparent product-card links. Do not import DIVE category tags, a 48px pill, Noto Sans KR, or any invented state behavior. Keep the 54px inverse corporate hero and 3px white outline action confined to corporate-information-like contexts.
170
190
 
171
191
  ## 10. Voice & Tone
172
- The voice is quietly confident and editorial — the tone of a design gallery rather than a bank. It speaks with the assurance of a brand that has nothing to prove, letting restraint imply premium. There is no shouting, no urgency, no decorative flourish; the message lands through clarity and discipline. Like the monochrome palette, the language withholds: it says only what is needed, and it trusts the audience to read the sophistication in the negative space. The tone is cultured, deliberate, and self-assured.
192
+
193
+ The official materials frame Hyundai Card as a financial company that has deliberately built a wider culture-and-design practice through its branded spaces, card plates, and typeface. The usable voice is therefore precise, design-literate, and concrete rather than “luxury” by default.
194
+
195
+ | Do | Don't |
196
+ | --- | --- |
197
+ | Describe a specific product, design choice, or cultural program plainly. | Claim an unmeasured visual rule as a universal brand mandate. |
198
+ | Let Youandi’s card-derived construction carry a factual brand story. | Use vague premium language in place of evidence. |
199
+ | Keep product and cultural surfaces named and separated. | Fold DIVE or library material into payment-product UI claims. |
173
200
 
174
201
  ## 11. Brand Narrative
175
- Hyundai Card built its reputation as Korea's most design-celebrated credit-card brand by treating design as the product, not the packaging. The brand's central idea is that luxury is restraint: a monochrome world of black and white, anchored by a typeface it commissioned for itself — Youandi (유앤아이) — so that even the letters belong to the brand alone. Color is the resource it refuses to spend, turning absence into a signature. The DIVE platform extends this story from finance into culture and design, presenting the same monochrome, Youandi-led identity as a creative point of view rather than a transactional one. The narrative is consistent at every touchpoint: typography-as-identity, discipline-as-luxury, and the quiet confidence of a brand that lets what it leaves out speak as loudly as what it puts in.
202
+
203
+ Hyundai Card pairs credit-card products with a long-running cultural and design program. Its official company overview describes a current move toward a technology-company identity while continuing the cultural work expressed through libraries, performance programs, branded spaces, card plates, and Youandi. That makes the company’s visual story broader than one web page or one card campaign.
204
+
205
+ Youandi is the clearest continuity thread. Hyundai Card developed the first version in 2003; its official account says the original letterforms drew from the physical shape and proportions of a card. The 2021 YouandiNew renewal rebuilt that asset for evolving digital media, expanded its range, and added variable-font capability. The current web capture corroborates that the newer family is not merely historical: `YouandiNewKr` is loaded and visible on current product and corporate headings.
176
206
 
177
207
  ## 12. Principles
178
- - **Withhold color.** Black (#000000) on white (#FFFFFF) is the identity; color is deliberately held back.
179
- - **Typography is the brand.** Youandi (proprietary) carries the voice; let letterforms lead.
180
- - **Restraint as luxury.** Remove before you add; whitespace and contrast do the structural work.
181
- - **Flat and honest.** No shadows, no gradients, no chrome a single clean plane.
182
- - **One soft gesture.** The 24px-radius, 48px pill button is the system's only concession to softness.
183
- - **Function over decoration.** The only accents (#F36464, #15A91F) exist to classify, never to brand.
208
+
209
+ 1. **Build identity into useful assets.** Youandi is presented as a brand asset used in product branding and official documents.
210
+ *UI implication:* preserve the verified family distinction instead of approximating it with a system font.
211
+ 2. **Let the product and the cultural program remain distinct evidence domains.** The company’s libraries and DIVE expand brand context, but they are not product-component documentation.
212
+ *UI implication:* do not transfer their colors or patterns into payment-product tokens without direct proof.
213
+ 3. **Use surface-local rules.** The current product home and corporate-information routes intentionally expose different link and inverse-action treatments.
214
+ *UI implication:* name a component’s source surface before reusing its geometry or colors.
184
215
 
185
216
  ## 13. Personas
186
- - **The design-literate cardholder** — values craft and discretion over flash; reads the monochrome restraint as a marker of taste and expects the interface to feel like a curated space.
187
- - **The culture seeker on DIVE** — comes for design, art, and editorial content rather than banking, and responds to the gallery-like white-ground layout and Youandi typography.
188
- - **The premium minimalist** — wants the confidence of black-and-white sophistication, prefers whitespace to ornament, and trusts a brand that says less.
217
+
218
+ These are service-context archetypes, not claims about private user research.
219
+
220
+ - **Card product visitor** — needs a product route whose navigation, cards, and links remain clear without relying on cultural-site styling.
221
+ - **Corporate-information reader** — encounters a high-contrast informational hero and outline action on Hyundai Card’s company pages.
222
+ - **Culture-program visitor** — may meet DIVE or a Hyundai Card library; that context can inform brand understanding but must not be mistaken for payment-product UI evidence.
189
223
 
190
224
  ## 14. States
191
- Observed component states are minimal by design — the system favors flat, high-contrast defaults over elaborate interactive feedback. From the captured values: the default surface is #FFFFFF ground with #000000 text; the primary button defaults to white fill, black text, 24px radius, 48px height; the header defaults to transparent. Hover, pressed, focus, disabled, and error states were not captured in the blob, so do not invent them — derive them qualitatively in keeping with the monochrome, flat philosophy (e.g., subtle black/white contrast shifts rather than colored state changes), and keep any feedback as restrained as the rest of the system. Functional content tags carry the red (#F36464) or green (#15A91F) accent to signal category, the closest thing to a "stateful" color in the system.
225
+
226
+ The packet captured default styles only. It reports `interactionCount: 0`, `interactionKinds: 0`, and `observedStates: 0`; no state token is published. Reinspect the relevant live surface before specifying any of the following:
227
+
228
+ | Category | Status |
229
+ | --- | --- |
230
+ | Default | Observed only for the three §4 component defaults |
231
+ | Hover | Not observed |
232
+ | Focus | Not observed |
233
+ | Pressed | Not observed |
234
+ | Disabled | Not observed |
235
+ | Error | Not observed |
236
+ | Loading | Not observed |
237
+ | Success | Not observed |
238
+ | Empty | Not observed |
239
+ | Skeleton | Not observed |
192
240
 
193
241
  ## 15. Motion & Easing
194
- No motion or easing values were captured in the blob. In keeping with the brand's restraint, motion should be treated qualitatively: quiet, minimal, and unobtrusive — transitions that respect the gallery-like calm rather than drawing attention to themselves. The flat, monochrome system implies subtle, understated movement (gentle fades and clean transitions) over expressive or bouncy animation. Do not invent specific durations or curves; let any motion echo the same discipline as the visual identity — present only when it serves clarity, never as decoration.
242
+
243
+ No transition duration, easing curve, or motion state was observed in the supplied capture. Do not derive motion guidance from the flat default component styles; retain motion as unresolved until a relevant live surface is measured.
195
244
 
196
245
  ---
197
- **Verified:** 2026-06-01
198
- **Tier 1 sources:** https://www.hyundaicard.com (homepage / brand context main site security-plugin-walled), https://dive.hyundaicard.com (live DOM inspect monochrome surface, Youandi display fonts, Noto Sans KR body, button + tag values), https://newsroom.hyundaicard.com (brand-owned regional source)
199
- **Tier 2 sources:** getdesign.md/hyundaicard NOT LISTED. refero not listed. Note: hyundaicard.com main site is security-plugin-walled; DIVE (dive.hyundaicard.com) is the accessible brand surface and carries the same Youandi/monochrome identity.
246
+ **Verified:** 2026-07-13
247
+ **Tier 1 sources:** https://www.hyundaicard.com/index.jsp (current product home, supplied computed-style capture), https://www.hyundaicard.com/about/ceh/ho/cehho0101_01.hc and https://www.hyundaicard.com/about/ckh/ho/ckhho0101_01.hc (current corporate-information routes, supplied capture), https://newsroom.hyundaicard.com/front/board/Hyundai-Card-branding-through-typeface?country=en (official Youandi/YouandiNew history and product-use context), https://img.hyundaicard.com/about/common/en/pageView.hc?id=ceabi0201_01 (official company overview), https://newsroom.hyundaicard.com/front/board/Hyundai-Card-Design-Library?country=en (official cultural/design context; not token evidence)
248
+ **Tier 2 sources:** https://getdesign.md/hyundaicard (attempted; built-in fetch path rejected the direct URL and search yielded no importable record), https://styles.refero.design/?q=Hyundai%20Card (attempted; built-in fetch path rejected the direct URL and search yielded no importable record). No Tier 2 values were promoted.
249
+ **Resolution note:** Prior DIVE-only palette, Noto Sans KR body, 26px heading, 24px/48px pill, category tags, and interaction guidance were removed because this packet did not corroborate them on current product/corporate routes.
200
250
  **Conflicts unresolved:** none
201
- **Proof:** see .verification.md (## Proof block)
251
+ **Proof:** see .verification.md (## Proof — Tier 1 live inspect)