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
|
@@ -7,195 +7,245 @@ homepage: "https://www.hyundaicard.com"
|
|
|
7
7
|
primary_color: "#000000"
|
|
8
8
|
logo:
|
|
9
9
|
type: favicon
|
|
10
|
-
slug: "https://
|
|
11
|
-
verified: "2026-
|
|
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
|
|
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:
|
|
20
|
-
extracted: "2026-
|
|
21
|
-
note: "
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
69
|
+
canvas: "#ffffff"
|
|
70
|
+
inverse: "#ffffff"
|
|
71
|
+
link-product: "#0070f0"
|
|
72
|
+
link-corporate: "#1e75d6"
|
|
27
73
|
typography:
|
|
28
|
-
family: { sans: "
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
**
|
|
78
|
-
|
|
79
|
-
|
|
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
|
-
###
|
|
125
|
+
### Product-home navigation link
|
|
87
126
|
|
|
88
|
-
**
|
|
127
|
+
**Second-level link**
|
|
89
128
|
- Background: transparent
|
|
90
129
|
- Text: #000000
|
|
91
130
|
- Border: none
|
|
92
|
-
-
|
|
93
|
-
-
|
|
94
|
-
- Font:
|
|
95
|
-
- Use:
|
|
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
|
-
###
|
|
136
|
+
### Product-card link
|
|
98
137
|
|
|
99
|
-
**
|
|
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
|
-
-
|
|
116
|
-
-
|
|
117
|
-
-
|
|
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
|
-
###
|
|
146
|
+
### Corporate-information action
|
|
121
147
|
|
|
122
|
-
**
|
|
123
|
-
- Background:
|
|
124
|
-
- Text: #
|
|
125
|
-
- Border:
|
|
126
|
-
- Radius:
|
|
127
|
-
- Padding:
|
|
128
|
-
-
|
|
129
|
-
-
|
|
130
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
152
|
-
-
|
|
153
|
-
-
|
|
154
|
-
-
|
|
155
|
-
- Use the
|
|
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
|
-
|
|
160
|
-
-
|
|
161
|
-
-
|
|
162
|
-
-
|
|
163
|
-
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
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
|
-
|
|
187
|
-
|
|
188
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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-
|
|
198
|
-
**Tier 1 sources:** https://www.hyundaicard.com (
|
|
199
|
-
**Tier 2 sources:** getdesign.md/hyundaicard
|
|
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
|
|
251
|
+
**Proof:** see .verification.md (## Proof — Tier 1 live inspect)
|