oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/hyundai/DESIGN.md

@@ -9,460 +9,250 @@ primary_color: "#002c5f"
 logo:
   type: simpleicons
   slug: hyundai
-verified: "2026-06-22"
+verified: "2026-07-13"
 omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-13"
+  surfaces:
+    - { id: home, kind: product, url: "https://www.hyundai.com/kr/ko/e", inspected: "2026-07-13" }
+    - { id: vehicles, kind: product, url: "https://www.hyundai.com/kr/ko/e/vehicles", inspected: "2026-07-13" }
+    - { id: ioniq6, kind: product, url: "https://www.hyundai.com/kr/ko/e/vehicles/the-new-ioniq-6/intro", inspected: "2026-07-13" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.hyundai.com/kr/ko/e", captured: "2026-07-13" }
+    - { id: vehicles-live, kind: product-surface, url: "https://www.hyundai.com/kr/ko/e/vehicles", captured: "2026-07-13" }
+    - { id: ioniq6-live, kind: product-surface, url: "https://www.hyundai.com/kr/ko/e/vehicles/the-new-ioniq-6/intro", captured: "2026-07-13" }
+    - { id: design, kind: official-doc, url: "https://www.hyundai.com/worldwide/en/company/innovation/design", captured: "2026-07-13" }
+    - { id: typeface, kind: official-doc, url: "https://www.hyundai.com/worldwide/en/newsroom/detail/0000000287", captured: "2026-07-13" }
+    - { id: history, kind: official-doc, url: "https://www.hyundai.com/worldwide/en/footer/corporate/history/1967-2000", captured: "2026-07-13" }
+  conflicts: []
+  claims:
+    "tokens.colors.accent-cyan": &live { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
+    "tokens.colors.accent-teal": *live
+    "tokens.colors.footer": *live
+    "tokens.colors.ink": *live
+    "tokens.colors.muted": *live
+    "tokens.colors.on-primary": *live
+    "tokens.colors.primary": *live
+    "tokens.colors.utility": *live
+    "tokens.components.selected-carousel-indicator.active": *live
+    "tokens.components.selected-carousel-indicator.fg": *live
+    "tokens.components.selected-carousel-indicator.radius": *live
+    "tokens.components.selected-carousel-indicator.type": *live
+    "tokens.components.selected-carousel-indicator.use": *live
+    "tokens.rounded.none": *live
+    "tokens.rounded.pager": *live
+    "tokens.shadow.chatbot": *live
+    "tokens.typography.action.lineHeight": *live
+    "tokens.typography.action.size": *live
+    "tokens.typography.action.tracking": *live
+    "tokens.typography.action.use": *live
+    "tokens.typography.action.weight": *live
+    "tokens.typography.body.lineHeight": *live
+    "tokens.typography.body.size": *live
+    "tokens.typography.body.use": *live
+    "tokens.typography.body.weight": *live
+    "tokens.typography.display-h2.lineHeight": *live
+    "tokens.typography.display-h2.size": *live
+    "tokens.typography.display-h2.tracking": *live
+    "tokens.typography.display-h2.use": *live
+    "tokens.typography.display-h2.weight": *live
+    "tokens.typography.family.body": *live
+    "tokens.typography.family.display": *live
 tokens:
-  source: live-extract
-  extracted: "2026-06-22"
-  note: "primary = deep navy (#002c5f) dominant brand/CTA color; secondary teal (#007fa8) on badges; warm off-white (#f6f3f2) surface. Custom typefaces HyundaiSansHeadKR (display) and HyundaiSansTextKR (body). Zero-radius sharp corners everywhere — automotive precision geometry."
+  source: reconciled
+  extracted: "2026-07-13"
+  components_harvested: true
+  note: "Only values observed in the supplied three-surface KR product capture are tokenized. HyundaiSansTextKR and HyundaiSansHeadKR have visible computed use backed by loaded FontFaceSet entries. HyundaiSansHeadKRR and HyundaiSansTextKRR are loaded regional variants; Arial is system chrome and element-icons is declared-only."
   colors:
     primary: "#002c5f"
-    primary-teal: "#007fa8"
+    accent-teal: "#007fa8"
     accent-cyan: "#00aad2"
     ink: "#000000"
-    body: "#666666"
-    dark-label: "#333333"
-    canvas: "#ffffff"
-    surface: "#f6f3f2"
-    surface-neutral: "#f5f5f5"
-    dark-chrome: "#1c1b1b"
     on-primary: "#ffffff"
     muted: "#999999"
-    hairline: "#cbcbcb"
+    utility: "#444444"
+    footer: "#1c1b1b"
   typography:
-    family: { display: "HyundaiSansHeadKR", body: "HyundaiSansTextKR", fallback: "Magul Gothic" }
-    display-hero: { size: 44, weight: 400, lineHeight: 1.32, tracking: -0.4, use: "Section H2 headings — Model, Brand, Events" }
-    section:      { size: 30, weight: 400, lineHeight: 1.47, tracking: -0.4, use: "Sub-section H3 headings, HyundaiSansHeadKR" }
-    subsection:   { size: 24, weight: 400, lineHeight: 1.42, tracking: -0.24, use: "Event/feature card H3 titles" }
-    nav:          { size: 16, weight: 400, lineHeight: 1.50, use: "Primary nav items, HyundaiSansHeadKRR" }
-    body:         { size: 16, weight: 400, lineHeight: 1.15, use: "Body text, HyundaiSansTextKR" }
-    button:       { size: 16, weight: 500, lineHeight: 1.50, use: "CTA label — 내 차 만들기, 자세히 보기" }
-    caption:      { size: 15, weight: 500, lineHeight: 1.33, use: "Small action text, HyundaiSansHeadKRR" }
-  spacing: { xs: 4, sm: 8, md: 16, base: 20, lg: 24, xl: 40, xxl: 60, section: 80 }
-  rounded: { none: 0, sm: 2, md: 4, full: 9999 }
-  shadow:
-    none: "none"
-    subtle: "rgba(0,0,0,0.1) 0px 2px 8px"
-    glow: "rgba(0,0,0,0.15) 0px 0px 20px 0px"
+    family: { display: "HyundaiSansHeadKR", body: "HyundaiSansTextKR" }
+    display-h2: { size: 44, weight: 400, lineHeight: 1.32, tracking: -0.4, use: "Observed h2 on the KR product home surface" }
+    body: { size: 16, weight: 400, lineHeight: 1.15, use: "Observed product-surface text" }
+    action: { size: 16, weight: 500, lineHeight: 1.15, tracking: -0.4, use: "Observed navy vehicle action" }
+  spacing: {}
+  rounded: { none: 0, pager: 6 }
+  shadow: { chatbot: "rgba(0,0,0,0.15) 0px 0px 20px 0px" }
   components:
-    button-primary: { type: button, bg: "#002c5f", fg: "#ffffff", radius: "0px", padding: "10px 20px", font: "16px / 500 HyundaiSansTextKR", use: "Primary vehicle CTA — 내 차 만들기, 자세히 보기" }
-    button-secondary: { type: button, bg: "#ffffff", fg: "#002c5f", radius: "2px", padding: "12px 10px", border: "1px solid #002c5f", font: "13px / 600 HyundaiSansTextKR", use: "Cookie accept / secondary action — I Understand" }
-    button-ghost: { type: button, bg: "transparent", fg: "#002c5f", radius: "2px", padding: "12px 10px", border: "1px solid #002c5f", font: "13px / 600 HyundaiSansTextKR", use: "Settings and tertiary actions — Cookies Settings" }
-    nav-item: { type: tab, fg: "#000000", font: "16px / 400 HyundaiSansHeadKRR", use: "Top nav items — 구매/이벤트, 서비스/멤버십, 브랜드", active: "text #002c5f underline active" }
-    card-vehicle: { type: card, bg: "#ffffff", fg: "#000000", radius: "0px", use: "Vehicle model card, flat no-shadow, sharp corners" }
-    card-surface: { type: card, bg: "#f6f3f2", fg: "#000000", radius: "0px", use: "Warm off-white section surface card" }
-    badge-teal: { type: badge, bg: "#007fa8", fg: "#ffffff", radius: "0px", font: "13px / 400 HyundaiSansTextKR", use: "Category badge or EV highlight tag" }
-    input-default: { type: input, bg: "#ffffff", fg: "#000000", border: "1px solid #cbcbcb", radius: "0px", font: "16px HyundaiSansTextKR", use: "Search input field" }
-    chatbot-fab: { type: toggle, bg: "#00aad2", fg: "#666666", radius: "100%", shadow: "rgba(0,0,0,0.15) 0px 0px 20px 0px", use: "Floating chatbot action button, circle 60px" }
-  components_harvested: true
+    selected-carousel-indicator: { type: tab, fg: "#000000", radius: "0px", active: true, use: "Selected shell observed on the home surface" }
 ---
 
 # Design System Inspiration of Hyundai
 
 ## 1. Visual Theme & Atmosphere
 
-현대자동차 (Hyundai Motor Company) presents a design language that is resolutely automotive and precision-engineered — a digital expression of its "Sensuous Sportiness" brand philosophy. The homepage opens on a near-white canvas (`#ffffff`) alternating with a warm off-white tone (`#f6f3f2`) that echoes the pale sophistication of automotive showroom interiors. The dominant brand anchor is a deep, authoritative navy (`#002c5f`), used on every primary CTA ("내 차 만들기") and across brand-link text. This is not a product-blue or a tech-startup blue — it is the kind of navy that suggests institutional trust, engineered quality, and decades of heritage. Against it, a secondary teal accent (`#007fa8`) functions as the signal for innovation and electrification content (EV charging, Hi-EV sections).
+Founded in 1967, Hyundai Motor Company now presents itself as a mobility company as well as an automaker, with its official history tracing the shift from the Ulsan assembly plant to current IONIQ electric vehicles. On the captured Korean product surfaces, that broad automotive identity resolves into a restrained interface: black and white text, a deep navy action color (`#002c5f`), and loaded HyundaiSans families. The documented vehicle-design direction, Sensuous Sportiness, has been Hyundai's design philosophy since 2018; it connects emotional appeal with structure, proportion, styling, and technology. This reference keeps that official vehicle-design context separate from web claims: it describes the captured KR product UI, not a universal Hyundai design system.
 
-What makes Hyundai's digital design distinctive is its absolute rejection of rounded corners. Where Korean fintech peers (Toss, Kakao) embrace pill radii and friendly curves, Hyundai uses 0px radius throughout — every button is a perfect rectangle, every card a sharp-edged frame. This isn't accidental; it mirrors the precision of automotive body panel geometry, the exact-cut steel character lines of a Hyundai vehicle. Typography reinforces this architectural rigor: `HyundaiSansHeadKR` handles all display headings at weight 400 (not 700 — confident, not shouting), while `HyundaiSansTextKR` handles body. The letterforms are bespoke, purpose-designed for the brand, and appear across both KR and global surfaces.
+The product capture favors flat, rectangular actions for its repeated navy vehicle CTA, but it is not a zero-radius system: the selected carousel control has a 6px radius and the chatbot is circular. Deep navy (`#002c5f`) is the repeated product action color; teal (`#007fa8`) appears in captured carousel controls, while cyan (`#00aad2`) appears on the chatbot. Black (`#000000`), white (`#ffffff`), muted gray (`#999999`), utility gray (`#444444`), and the dark footer (`#1c1b1b`) are also directly observed.
 
-The system is depth-minimalist: no drop shadows on cards or CTAs, with separation achieved through the warm surface tint (`#f6f3f2`) and thin hairlines (`#cbcbcb`). Elevation is communicated by imagery — full-bleed vehicle photography that creates visual depth without UI chrome trickery.
+## 2. Color Palette & Roles
 
-**Key Characteristics:**
-- HyundaiSansHeadKR for all display headings — weight 400, a calm authority that matches automotive brochure aesthetics
-- Zero border-radius (`0px`) throughout — buttons, cards, inputs are sharp rectangles referencing vehicle panel geometry
-- Deep navy (`#002c5f`) as the sole interactive/CTA color — single action color philosophy
-- Warm off-white surface (`#f6f3f2`) alternating with pure white for section rhythm
-- Flat depth: no shadows on primary surfaces; vehicle imagery creates visual elevation
-- Negative letter-spacing at display sizes (-0.4px at 44px, -0.24px at 24px)
-- Secondary teal (`#007fa8`) reserved for EV/innovation contexts
-- HyundaiSansTextKR for body and button labels — the workhorse text face
+### Product-surface colors
 
-## 2. Color Palette & Roles
+- **Primary navy** (`#002c5f`): observed filled vehicle action on both the catalogue and IONIQ 6 product surfaces.
+- **Teal** (`#007fa8`): observed on home-surface carousel controls; no broader semantic role is inferred.
+- **Cyan** (`#00aad2`): observed as the home-surface chatbot button background.
+- **Ink** (`#000000`) and **white** (`#ffffff`): repeatedly observed text and border values across the three product surfaces.
+- **Muted gray** (`#999999`) and **utility gray** (`#444444`): observed in footer/list and inline external-link chrome respectively.
+- **Footer dark** (`#1c1b1b`): observed on the Family Site control in the KR product footer.
 
-### Primary
-- **Hyundai Navy** (`#002c5f`): The definitive brand color. All primary CTAs, nav accent color, brand link text, and dark overlays. An extremely saturated, authoritative deep blue with minimal warmth.
-- **Teal Blue** (`#007fa8`): Secondary brand color for electrification and innovation surfaces (Hi-EV section, EV charging). Cooler than the navy, suggesting technology and energy.
-- **Accent Cyan** (`#00aad2`): Used on the chatbot FAB and interactive digital-service elements. Brighter and more digital than the teal.
+## 3. Typography Rules
 
-### Surface & Canvas
-- **Pure White** (`#ffffff`): Primary page canvas and card backgrounds. The clean automotive showroom floor.
-- **Warm Off-White** (`#f6f3f2`): The signature surface tint. Section background that separates content zones without elevation. A barely-warm stone tone — the color of brushed automotive interior panels.
-- **Surface Neutral** (`#f5f5f5`): Alternative neutral surface for secondary content areas.
+### Evidence classes
 
-### Text & Neutral
-- **Ink Black** (`#000000`): Primary text and heading color. Not softened to navy — maximum legibility for automotive product specs.
-- **Body Grey** (`#666666`): Secondary body copy, captions, metadata. The most frequent text color in the neutral ladder.
-- **Dark Label** (`#333333`): Dark body copy for high-contrast sections.
-- **Dark Chrome** (`#1c1b1b`): Near-black footer background and dark chrome UI surfaces.
-- **Muted** (`#999999`): Placeholder text, disabled states, very low emphasis labels.
-- **Hairline** (`#cbcbcb`): Card borders, dividers, input borders. The system's primary structural separator.
+- **Live computed product use, FontFaceSet-backed:** `HyundaiSansTextKR` (287 observed uses) and `HyundaiSansHeadKR` (84) are visible computed families with matching loaded FontFaceSet entries in the supplied KR product capture. `HyundaiSansHeadKRR` (43) and `HyundaiSansTextKRR` (35) are likewise loaded and visibly used variants.
+- **Official brand/type context:** Hyundai's 2023 official newsroom describes Hyundai Sans UI as a next-generation mobility UX typeface that inherits the formative characteristics of Hyundai Sans. That statement concerns the ccNC infotainment context; it does not establish Hyundai Sans UI as the web product-surface family.
+- **System / declared-only:** Arial is a system family observed in utility chrome. `element-icons` is declared in the capture but has no visible usage. Neither is promoted to the UI family token.
+- **License and distribution boundary:** the supplied capture records no font source URLs, and this review found no public first-party web-font licence for the KR files. The loaded families may be described by name and observed metrics, but no downloadable asset or reuse licence is asserted.
 
-## 3. Typography Rules
+### Observed hierarchy
 
-### Font Family
-- **Display/Heading**: `HyundaiSansHeadKR` — Hyundai's proprietary Korean display typeface. Also `HyundaiSansHeadKRR` variant for nav items. Global surfaces use `HyundaiMedium` / `HyundaiKRMedium`.
-- **Body/Text**: `HyundaiSansTextKR` — the workhorse text face. Fallback: `"Magul Gothic"`.
-- All fonts are custom, brand-owned. No system fonts or Korean standards (Noto/Pretendard/SUIT) used.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Section H2 | HyundaiSansHeadKR | 44px | 400 | 1.32 (58px) | -0.4px | "Model", "Brand", "Events" section titles |
-| Sub-section H3 | HyundaiSansHeadKR | 30px | 400 | 1.47 (44px) | -0.4px | Sub-section heads, Hi-EV, Trendy Hyundai |
-| Feature H3 | HyundaiSansHeadKR | 24px | 400 | 1.42 (34px) | -0.24px | Event/card title, 이벤트 H3 |
-| Nav Item | HyundaiSansHeadKRR | 16px | 400 | 1.50 | normal | Primary nav — 구매/이벤트, 서비스/멤버십 |
-| Body | HyundaiSansTextKR | 16px | 400 | 1.15 | normal | Standard body copy |
-| CTA Button | HyundaiSansTextKR | 16px | 500 | 1.50 | normal | "내 차 만들기" — medium weight for action |
-| Small Caption | HyundaiSansHeadKRR | 15px | 500 | 1.33 | normal | "자세히 보기" card links |
-
-### Principles
-- **Weight 400 at display sizes**: Unlike Korean consumer brands (SUIT 800 / Pretendard 800), Hyundai uses weight 400 for all headlines. The custom HyundaiSansHeadKR letterforms carry sufficient visual authority without bold weight — like a automotive nameplate, quiet confidence.
-- **Negative tracking scales with size**: -0.4px at 44px/30px; -0.24px at 24px; normal tracking at 16px and below.
-- **Two-font system**: HyundaiSansHeadKR for display hierarchy, HyundaiSansTextKR for all body/UI. Sharp division of roles.
-- **Proprietary type as brand identity**: The custom fonts are a significant moat — no competitor can simply use HyundaiSansHeadKR. The letterforms themselves communicate brand membership.
+| Role | Family | Size | Weight | Line Height | Tracking | Surface |
+|------|--------|------|--------|-------------|----------|---------|
+| H2 | HyundaiSansHeadKR | 44px | 400 | 58px | -0.4px | home |
+| Body/list | HyundaiSansTextKR | 16px | 400 | 18.4px | normal | all three product surfaces |
+| Vehicle action | HyundaiSansTextKR | 16px | 500 | 18.4px | -0.4px | catalogue and IONIQ 6 |
+| Primary nav trigger | HyundaiSansHeadKRR | 16px | 400 | 30px | -0.4px | all three product surfaces |
+| Inline external link | HyundaiSansHeadKR | 14px | 500 | 14px | -0.4px | all three product surfaces |
 
 ## 4. Component Stylings
 
-### Buttons
+Only the variants below are retained because the supplied collector evidence records their selector, surface, and computed values. The capture has `interactionCount: 0`; hover, focus, pressed, disabled, menu-open, and validation states are not asserted.
 
-**Primary CTA (내 차 만들기)**
-- Background: `#002c5f`
-- Text: `#ffffff`
-- Radius: 0px
-- Padding: 10px 20px
-- Font: 16px HyundaiSansTextKR weight 500
-- Height: 50px
-- Use: Vehicle configurator entry CTA on every model card — "내 차 만들기"
-
-**Secondary / Inline Action**
-- Background: `#ffffff`
-- Text: `#002c5f`
-- Border: 1px solid `#002c5f`
-- Radius: 2px
-- Padding: 12px 10px
-- Font: 13px weight 600
-- Height: 42px
-- Use: Cookie accept, secondary confirmation — "I Understand"
-
-**Ghost / Tertiary**
-- Background: transparent
-- Text: `#002c5f`
-- Border: 1px solid `#002c5f`
-- Radius: 2px
-- Padding: 12px 10px
-- Font: 13px weight 600
-- Height: 42px
-- Use: Settings and tertiary actions — "Cookies Settings"
-
-**Detail Link (자세히 보기)**
+### Vehicle action
+
+**Navy filled action**
 - Background: `#002c5f`
 - Text: `#ffffff`
 - Radius: 0px
-- Font: 15px HyundaiSansHeadKRR weight 500
-- Height: 40px
-- Use: Section-level "more detail" link-button on brand/events cards
+- Font: 16px / 500 / HyundaiSansTextKR
+- Use: `surface-2::[data-omd-capture="15"]`, class `btn nuxt-link-active`; observed on `surface-2` (vehicle catalogue) and `surface-3` (IONIQ 6 intro), 2 occurrences, no state captured.
 
-### Cards & Containers
+### Primary navigation
 
-**Vehicle Model Card**
-- Background: `#ffffff`
+**Top-level trigger**
+- Background: transparent
 - Text: `#000000`
 - Radius: 0px
-- Use: Vehicle model listing card on homepage — sharp edge, no shadow, full-bleed vehicle photo
+- Font: 16px / 400 / HyundaiSansHeadKRR
+- Use: `home::[data-omd-capture="2"]`, class `lnb_depth0_btn`; observed on home, vehicle catalogue, and IONIQ 6 intro, 15 occurrences, no state captured.
 
-**Section Surface Card**
-- Background: `#f6f3f2`
-- Text: `#000000`
+### Inline external link
+
+**Small external link**
+- Background: transparent
+- Text: `#444444`
 - Radius: 0px
-- Use: Warm off-white section containers separating content bands
+- Padding: 10px 0px
+- Font: 14px / 500 / HyundaiSansHeadKR
+- Use: `home::[data-omd-capture="128"]`, class `btn btn-external-sm in-phrase`; observed on all three product surfaces, 9 occurrences, no state captured.
 
-### Badges
+### Carousel pagination
 
-**Teal Category Badge**
+**Teal pager control**
 - Background: `#007fa8`
-- Text: `#ffffff`
-- Radius: 0px
-- Font: 13px HyundaiSansTextKR weight 400
-- Use: EV/electrification category tags, Hi-EV section marker
-
-### Inputs & Forms
+- Radius: 6px
+- Use: `home::[data-omd-capture="75"]`, class `el-carousel__button`; observed on home only, 2 occurrences, no state captured.
 
-**Search Input**
-- Background: `#ffffff`
-- Border: 1px solid `#cbcbcb`
-- Radius: 0px
-- Font: 16px HyundaiSansTextKR
+**Selected indicator shell**
+- Background: transparent
 - Text: `#000000`
-- Placeholder: `#999999`
-- Use: Site-wide search input
+- Radius: 0px
+- Padding: 0px 4px
+- Font: 16px / 400 / HyundaiSansTextKR
+- Use: `home::li`, class `el-carousel__indicator el-carousel__indicator--horizontal is-active`; observed on home only, 13 occurrences, `selected` is the sole captured state. The child visual control was not separately measured.
 
-### Navigation
+### Footer utility control
 
-- Background: `#ffffff` (sticky, no blur)
-- Text: `#000000` primary, `#002c5f` brand accent
-- Font: 16px HyundaiSansHeadKRR weight 400
-- Active: navy `#002c5f` underline / text shift
-- Right-aligned: Auth ("로그인"), Language ("KR"), Search
-- No radius on any nav element
+**Family Site control**
+- Background: `#1c1b1b`
+- Text: `#999999`
+- Border: 1px solid `#676767`
+- Radius: 0px
+- Padding: 0px 13px
+- Use: `home::[data-omd-capture="146"]`; observed on all three product surfaces, 3 occurrences. It uses system Arial and is retained as footer utility chrome, not a HyundaiSans UI token.
 
-### Chatbot FAB
+### Chatbot trigger
 
-- Background: `#00aad2` (accent cyan)
-- Radius: 100% (perfect circle)
-- Dimensions: 60px × 60px
-- Border: 4px solid transparent
-- Shadow: `rgba(0,0,0,0.15) 0px 0px 20px 0px`
-- Use: Floating chatbot trigger fixed on all pages; the lone deliberate glow in an otherwise shadow-free system
+**Circular chatbot button**
+- Background: `#00aad2`
+- Radius: 100%
+- Shadow: rgba(0,0,0,0.15) 0px 0px 20px 0px
+- Font: 16px / 500 / HyundaiSansTextKR
+- Use: `home::[data-omd-capture="122"]`, class `btn ibtn chatbot`; observed once on the home product surface, no state captured. This is single-surface, low-confidence component evidence and does not establish a general floating-action pattern.
 
 ---
 
-**Verified:** 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect)
-**Tier 1 sources:** https://www.hyundai.com/kr/ko/e, https://www.hyundainews.com/ko-kr/
+**Verified:** 2026-07-13
+**Tier 1 sources:** https://www.hyundai.com/kr/ko/e; https://www.hyundai.com/kr/ko/e/vehicles; https://www.hyundai.com/kr/ko/e/vehicles/the-new-ioniq-6/intro; https://www.hyundai.com/worldwide/en/company/innovation/design; https://www.hyundai.com/worldwide/en/newsroom/detail/0000000287; https://www.hyundai.com/worldwide/en/footer/corporate/history/1967-2000
 
-**Tier 2 sources:** getdesign.md/hyundai — not found; styles.refero.design/?q=hyundai — no Hyundai result (automotive results: BMW, Tesla, Rivian)
+**Tier 2 sources:** https://getdesign.md/hyundai — attempted 2026-07-13, web fetch returned an internal error; https://styles.refero.design/?q=hyundai — attempted 2026-07-13, web fetch returned an internal error.
 **Conflicts unresolved:** none
 
+Tier 2 data was unavailable, so it was not used to establish any token or component value.
+
 ## 5. Layout Principles
 
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 8px, 16px, 20px, 24px, 40px, 60px, 80px (section)
-- Button horizontal padding: 20px (primary CTA), 10px (secondary)
-- Section vertical rhythm: 80px+ between major page sections
-
-### Grid & Container
-- Full-width hero carousel with vehicle imagery occupying 100vw
-- Section headings left-aligned with generous top margin (80px+)
-- Vehicle model grid: horizontal scroll/carousel with fixed-height cards
-- Events grid: 3-column with H3 titles and thumbnail imagery
-- Alternating white and warm-off-white (`#f6f3f2`) full-width section bands
-
-### Whitespace Philosophy
-- **Automotive generosity**: significant whitespace between sections mirrors the spacious quality of physical showrooms
-- **Flat separation**: color alternation (`#ffffff` ↔ `#f6f3f2`) rather than elevation or shadows for section rhythm
-- **Sharp geometry**: 0px radius throughout; no organic curves in UI chrome (curves live in the vehicle photography)
-
-### Border Radius Scale
-- Zero (0px): All interactive elements — buttons, cards, inputs — the system signature
-- Micro (2px): Occasional secondary button at global surface
-- Full (100%): Chatbot FAB only — the single exception that proves the rule
+The supplied evidence establishes three desktop product routes, but it does not contain a responsive breakpoint or grid measurement. The catalogue and IONIQ 6 routes share the navy filled vehicle action; no universal card, spacing scale, or layout grid is promoted from the capture.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, cards, all primary surfaces |
-| Tint (Level 1) | `#f6f3f2` background shift | Section separation without elevation |
-| Hairline (Level 2) | `1px solid #cbcbcb` | Card/input borders, fine structural lines |
-| Overlay | `rgba(0,0,0,0.1)` — `rgba(0,0,0,0.7)` | Hero carousel overlays over vehicle photography |
-
-**Shadow Philosophy**: Hyundai is a near-zero-shadow digital system. Live inspection found `box-shadow: none` across all primary UI surfaces — CTAs, cards, the nav header, model carousels. Depth is provided entirely by full-bleed vehicle photography and surface tints. The single deliberate exception is the floating chatbot FAB (`button.btn.ibtn.chatbot`), which carries a soft ambient glow (`rgba(0,0,0,0.15) 0px 0px 20px 0px`) to lift it off the page surface and signal interactivity — a functional exception, not a design contradiction. Every other surface remains flat.
+The repeated captured components in §4 have `box-shadow: none`, except the single home-surface chatbot trigger, which has `rgba(0,0,0,0.15) 0px 0px 20px 0px`. No broader elevation scale is asserted.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use HyundaiSansHeadKR weight 400 for all display headings — the proprietary letterform IS the brand voice
-- Use 0px border-radius on all buttons, cards, and inputs — sharp corners are the system's geometric signature
-- Reserve `#002c5f` deep navy as the single primary CTA/action color
-- Separate sections with the warm off-white surface tint (`#f6f3f2`) and hairlines, not shadows
-- Use vehicle photography as the primary depth signal — full-bleed, cinematic, no shadow competition
-- Use weight 400 for headings and 500 for CTAs — never 700/bold
-- Apply negative letter-spacing on display headings (-0.4px at 44px)
-- Use teal (`#007fa8`) exclusively for EV/electrification contexts
+
+- Use the observed navy vehicle action only when the same product action pattern is intended.
+- Use the loaded HyundaiSans KR families only where licensed assets are provided by Hyundai.
+- Preserve a component's surface and state boundary when reusing this reference.
 
 ### Don't
-- Use rounded corners or pill shapes — 0px is the geometric commitment
-- Use drop shadows on cards or buttons — Hyundai is a flat-depth system
-- Mix in non-brand fonts (Pretendard, SUIT, Noto) — HyundaiSans is the brand moat
-- Spread the teal (`#007fa8`) across general UI — it signals EV specifically
-- Use heavy font weights (600-800) on headlines — weight 400 is the deliberate choice
-- Use pure decorative color gradients — automotive photography carries the visual richness
-- Use circular or pill shapes for standard buttons — only the chatbot FAB breaks the 0px rule
-- Add drop shadows to vehicle card imagery — flat presentation lets the vehicle design speak
+
+- Treat teal, cyan, or the circular chatbot as a general-purpose accent or floating-action system.
+- Substitute a system font while labelling it Hyundai Sans.
+- Invent hover, focus, disabled, form-error, or responsive variants from this capture.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <768px | Single column, hero full-height, stacked model cards |
-| Tablet | 768-1024px | 2-column events grid, moderate padding |
-| Desktop | 1024-1440px | Full layout, 3-column events, horizontal model carousel |
-| Large Desktop | >1440px | Centered content, wider section padding |
-
-### Touch Targets
-- Primary CTA buttons: 50px height with 20px horizontal padding — comfortable automotive-grade target
-- Nav items: 30px height in desktop nav with adequate hover zones
-- Detail link buttons: 40px height
-
-### Collapsing Strategy
-- Hero carousel: maintains full-bleed at all sizes; text overlays scale down
-- Model carousel: horizontal scroll behavior on mobile with snap points
-- Navigation: hamburger at mobile breakpoint, preserving brand logo
-- Section headings 44px → smaller on mobile, weight 400 maintained
-- Off-white section bands: maintain full-width at all sizes
+No responsive viewport comparison was supplied. Breakpoints, touch-target rules, and collapse behavior remain unresolved.
 
 ## 9. Agent Prompt Guide
 
-### Quick Color Reference
-- Primary CTA: Hyundai Navy (`#002c5f`)
-- Background: Pure White (`#ffffff`)
-- Surface Tint: Warm Off-White (`#f6f3f2`)
-- Heading / body text: Ink Black (`#000000`)
-- Secondary text: Body Grey (`#666666`)
-- EV/Innovation: Teal Blue (`#007fa8`)
-- Interactive Cyan: `#00aad2`
-- Border / hairline: `#cbcbcb`
-- Dark chrome: `#1c1b1b`
-
-### Example Component Prompts
-- "Create a vehicle model CTA: `#002c5f` background, white text, 0px radius, 10px 20px padding, 16px HyundaiSansTextKR weight 500 — '내 차 만들기'."
-- "Design a Hyundai model card: white background, 0px radius, no shadow. Vehicle full-bleed image at top. Title in HyundaiSansHeadKR 24px weight 400 letter-spacing -0.24px, #000000. Navy CTA button below."
-- "Build a section heading: HyundaiSansHeadKR 44px weight 400, letter-spacing -0.4px, color #000000. Section label in teal #007fa8 13px above for EV section."
-- "Create top nav: white sticky header. HyundaiSansHeadKRR 16px weight 400 for all nav items, #000000 text. Brand logo left. Language selector (KR) + login + search right. No radius, no shadow."
-- "Design an events section: #f6f3f2 warm off-white background full-width. H2 'Events' in HyundaiSansHeadKR 44px weight 400, letter-spacing -0.4px. Cards in 3-column grid, white background, 0px radius, event thumbnail + H3 title 24px weight 400 HyundaiSansHeadKR."
-
-### Iteration Guide
-1. 0px radius is the single most distinctive UI commitment — never add rounded corners
-2. Weight 400 at all text sizes — no bold headlines
-3. `#002c5f` navy is the only interactive color; teal `#007fa8` for EV-specific only
-4. No shadows — flat depth, photography provides dimension
-5. Section separation: alternate `#ffffff` and `#f6f3f2` full-width bands
-6. HyundaiSans fonts carry the brand — no substitutes
-7. Negative letter-spacing on display: -0.4px at 44px/30px, -0.24px at 24px
-
----
+Apply only source-bound values: a navy vehicle action (`#002c5f`, white text, 0px radius, 16px/500 HyundaiSansTextKR) is supported on the two vehicle product surfaces. Do not derive card, input, error-state, or motion specifications from this reference.
 
 ## 10. Voice & Tone
 
-Hyundai's voice is **aspirational, global, and quietly confident** — an automotive authority that has outgrown its challenger origins and now speaks from a position of earned scale. The Korean homepage balances product functionality ("내 차 만들기" — Build your car) with lifestyle framing ("혼라이프를 즐기다" — Enjoy solo life / "새로운 차원의 라이프" — A new dimension of life). The global surface leads with brand campaigns and FIFA World Cup 2026 sponsorship, projecting global ambition. Hyundai does not shout; it presents.
-
-| Context | Tone |
-|---|---|
-| Vehicle hero headlines | Cinematic, product-forward. "The new GRANDEUR DONE. YET." Mixed Korean-English registers for premium feel. |
-| Model section labels | Clean categorical. "Model", "전기차", "Brand". Functional clarity. |
-| CTA labels | Direct, action-oriented. "내 차 만들기" (Build your car), "자세히 보기" (See more detail). |
-| Event copy | Specific and benefit-led. "6월 전용카드 신차 구매 혜택" — month, product, benefit, in that order. |
-| Brand / lifestyle copy | Lifestyle-benefit framing. "혼라이프를 즐기다" — cultural relevance over product spec. |
-| Global surface | Campaign-narrative. "Forests Without Names", FIFA partnership, "Next Starts Now". |
-
-**Voice samples (verbatim from live homepage):**
-- "The new GRANDEUR DONE. YET. GRANDEUR." — hero carousel headline *(verified live 2026-06-22)*
-- "KONA Electric 새로운 차원의 라이프" — model card headline (EV lifestyle framing) *(verified live 2026-06-22)*
-- "Venue 혼라이프를 즐기다" — model card sub-headline (cultural lifestyle) *(verified live 2026-06-22)*
-- "내 차 만들기" — primary CTA on every vehicle card *(verified live 2026-06-22)*
-- "Hi, EV" — EV section heading *(verified live 2026-06-22)*
-
-**Forbidden register**: aggressive hard-sell, price-anxiety urgency ("지금 당장!"), technical jargon without lifestyle framing, exclamation-heavy copy on premium vehicle surfaces.
+Official corporate language frames Hyundai around “Progress for Humanity,” while the official design material describes Sensuous Sportiness as combining emotional appeal with structure, proportion, styling, and technology. The supplied capture does not preserve reliable product-copy text, so no verbatim voice samples or prescriptive copy rules are claimed here.
 
 ## 11. Brand Narrative
 
-현대자동차 (Hyundai Motor Company) was founded in **1967** by **정주영 (Chung Ju-yung)** in Seoul, South Korea, as part of the broader Hyundai industrial conglomerate. What started as a domestic car assembler has evolved over six decades into the world's third-largest automotive group by sales, a status that would have seemed implausible when Hyundai first exported the Pony to Canada in 1984 — the first Korean car to be exported. That arc — from humble manufacturing ambition to genuine global automotive force — defines Hyundai's brand posture: the brand that proves underestimation wrong.
-
-The design language governing current Hyundai vehicles is **"Sensuous Sportiness"**, introduced under Chief Design Officer **Luc Donckerwolke** (joined 2016) and first fully realized in the 8th-generation Sonata (2019). The philosophy is organized around four values: **Proportion, Architecture, Styling, and Technology**. It pursues the integration of emotional sensibility (the "Sensuous") with dynamic form (the "Sportiness") — surfaces that feel alive rather than engineered, that invite touch before they invite analysis. The IONIQ sub-brand, launched in 2021 as Hyundai's dedicated EV identity, extends this language into a more futuristic, parametric direction with "Parametric Pixels" — the distinctive pixel-pattern lighting signature that appears across IONIQ 5, 6, and 7.
+Hyundai Motor Company was incorporated in 1967; its official history records the Ulsan assembly plant in 1968, the Pony launch in 1976, and its present framing as a mobility solution provider. The 2024 milestone account connects that history to the current dedicated IONIQ electric-vehicle lineup.
 
-What Hyundai has consistently refused, especially since the 2010s transformation: the generic Korean corporate aesthetic, the safe beige of legacy automotive marketing, and the assumption that Korean brands must visually defer to European automotive dominance. The digital surface — HyundaiSansHeadKR at 0px radius, deep navy, warm off-white — is a direct translation of that same ambition: distinctly Korean-branded, globally polished, refusing easy categorization.
+Since 2018, Hyundai has described Sensuous Sportiness as the evolution of its design identity. Its official design page names structure, proportion, and styling, while the 2023 newsroom account separates vehicle infotainment work: the Seon design system and Hyundai Sans UI are an in-vehicle ccNC context, not proof of the KR public-web component rules above.
 
 ## 12. Principles
 
-1. **Progress Through Innovation.** Hyundai's stated commitment ("Innovation for Humanity") drives a design culture where new technology — BEV, FCEV, robotics — is not hidden but showcased. *UI implication:* the EV section has its own distinct teal (`#007fa8`) color identity that marks technological differentiation within the system.
-2. **Sensuous Sportiness — form as emotion.** Vehicle design centers on emotionally resonant proportion and surface, not pure function. *UI implication:* vehicle photography is the primary design element; the UI chrome steps back to pure supporting frame.
-3. **Sharp precision as identity.** 0px radius on every button and card is not a default — it is a deliberate statement of manufacturing precision. *UI implication:* never add rounding to Hyundai UI without explicit brand justification.
-4. **Heritage with ambition.** Hyundai operates from 50+ years of history while aggressively investing in next-generation mobility. *UI implication:* the deep navy heritage color and the teal EV accent can coexist — past and future in the same system.
-5. **Korean excellence, global stage.** The proprietary HyundaiSans font family and the unique visual language are Korean-developed but globally applicable. *UI implication:* do not use generic Korean consumer fonts (Pretendard/SUIT) — the brand font IS the brand.
+1. **Progress for Humanity.** Hyundai's official materials frame this as a mobility and sustainability vision. *UI implication:* none is inferred beyond the recorded product surfaces.
+2. **Sensuous Sportiness.** The official vehicle-design philosophy combines emotional appeal with structure, proportion, styling, and technology. *UI implication:* do not turn that vehicle philosophy into unsupported web tokens.
+3. **Legibility in mobility UX.** Hyundai's official Hyundai Sans UI description stresses legibility and hierarchy for driving environments. *UI implication:* this supports the typeface's brand context, not a substitution or web licence.
 
 ## 13. Personas
 
-*Personas below are fictional archetypes informed by publicly observable Hyundai product segments, not individual people.*
-
-**김민준, 38, 서울.** A married professional in his late 30s upgrading from an i30 to the new Grandeur. Cares deeply about how the car expresses his professional status. Uses "내 차 만들기" to configure colors and trim. Trusts Hyundai's flagship sedans after 15 years as a loyal customer. Would notice if the website felt cheap — the warm off-white surfaces and sharp-precision UI reinforce that he's making a premium purchase.
-
-**이수연, 29, 부산.** A first-time car buyer considering the Venue after seeing "혼라이프를 즐기다" marketing. Values independence and personality-match over raw specs. Gravitates toward lifestyle framing in the model copy. Uses the comparison calculator to understand monthly payments. Appreciates that the website speaks to her life, not just the vehicle dimensions.
-
-**박현우, 44, 경기.** An early EV adopter researching the IONIQ 5. Tracks charging infrastructure, consults "Hi, EV" and the charging network map. Values Hyundai's commitment to rapid EV expansion. The teal `#007fa8` EV color distinction helps him quickly navigate away from ICE content.
-
-**Rachel Kim, 35, Los Angeles.** A second-generation Korean-American considering a TUCSON. Encounters Hyundai as a quality global brand rather than a discount alternative. The worldwide.hyundai.com FIFA World Cup 2026 sponsorship content reinforces her sense that Hyundai has arrived on the global stage. Design quality matches her expectation for a brand sponsoring a world sporting event.
+[FILL IN] No first-party audience segmentation with enough detail to define personas was collected in this reverify packet. Do not use synthetic personas as evidence for Hyundai product decisions.
 
 ## 14. States
 
-| State | Treatment |
-|---|---|
-| **Empty (model lineup, no filter match)** | White canvas. Single line in body grey (`#666666`) at 16px HyundaiSansTextKR: "조건에 맞는 차량이 없습니다." One navy CTA to reset filters. No illustration. Functional, not decorative. |
-| **Empty (event list, none available)** | Neutral statement at body grey: no current events, with a link to all promotions. |
-| **Loading (homepage carousel first paint)** | Warm off-white (`#f6f3f2`) placeholder at final vehicle card dimensions, 0px radius. Pulse without shimmer — flat and consistent with shadow-free system. |
-| **Loading (model page fetch)** | Progressive image reveal — vehicle photo loads from blurred thumbnail to full res. No spinning loader; image quality arrival is the transition. |
-| **Error (page not found)** | Clean error page with H2 "페이지를 찾을 수 없습니다." at 44px HyundaiSansHeadKR weight 400, H3 explanation below, and a single navy "홈으로" CTA. No illustration, no apology emoji. |
-| **Error (form validation)** | Field-level inline message at 13px below the input in a red-adjacent tone; states the specific issue. |
-| **Success (form submitted)** | Inline confirmation in navy tone. Brief, sentence case, next-step linked. No celebratory animation — automotive purchase flows are deliberate, not impulsive. |
-| **Skeleton** | `#f6f3f2` blocks at final image and text dimensions. 0px radius on skeleton blocks (consistent with system). Quiet pulse animation. |
-| **Disabled** | Opacity reduction to 0.4 on surface and label. Navy CTA fades to `rgba(0,44,95,0.4)` — preserves brand color identity rather than switching to grey. |
-| **Hover** | Subtle background shift or text color shift to `#002c5f` on links. No scale/transform animations — automotive brand restraint. |
+No component interaction state was captured. The collector reports `interactionCount: 0` and only the carousel indicator shell carries an observed `selected` state. Empty, loading, error, success, skeleton, disabled, hover, focus, and pressed treatments are unresolved.
 
 ## 15. Motion & Easing
 
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | State toggles, checkbox selection |
-| `motion-fast` | 120ms | Hover states, nav item transitions |
-| `motion-standard` | 200ms | Dropdown open, filter apply, card reveal |
-| `motion-slow` | 400ms | Hero carousel transition, page-level cross-fades |
-| `motion-cinematic` | 800ms | Hero image reveal, full-bleed vehicle entrance |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — panels, carousels, dropdowns |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, slide-outs |
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
-| `ease-automotive` | `cubic-bezier(0.15, 0.85, 0.35, 1)` | Hero carousel — a custom curve suggesting vehicle acceleration and deceleration |
-
-**Motion rules**: Hyundai's digital motion mirrors automotive quality — deliberate, smooth, never jittery. Hero carousels transition at `motion-cinematic` (800ms) to honor the full-bleed vehicle photography; cutting fast would make the premium imagery feel cheap. Hover states at `motion-fast` (120ms) are crisp and responsive. The system avoids bounce, spring, or overshoot — automotive engineering is precise, not playful.
-
-**Signature motions:**
-1. **Vehicle carousel.** Full-bleed hero images cross-fade at `motion-cinematic / ease-automotive`. Overlay text fades in 200ms after image settles. Arrow controls respond at `motion-fast`.
-2. **Model card reveal.** On scroll-triggered entry, vehicle cards reveal with a 3px upward fade at `motion-standard / ease-enter`. Sequential stagger of 50ms per card.
-3. **Nav dropdown.** Opens at `motion-standard / ease-enter`. Closes at `motion-fast / ease-exit` — asymmetric timing mirrors automotive door behavior (slower to open, crisper to close).
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all transitions collapse to `motion-instant`. The carousel becomes paginated with immediate cuts. Product remains fully functional — no motion is structural.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10–15)
-
-Tier 1 live inspect (2026-06-22) via playwright getComputedStyle on:
-- https://www.hyundai.com/kr/ko/e (homepage, live computed style)
-- https://www.hyundai.com/worldwide/en (worldwide global English)
-
-Primary observations:
-- body: font-family HyundaiSansTextKR, "Magul Gothic"; color rgb(0,0,0); font-size 16px
-- H1 "HYUNDAI": font-size 32px; font-weight 400; HyundaiSansTextKR; color rgb(0,0,0)
-- H2 "Model": font-size 44px; font-weight 400; HyundaiSansHeadKR; line-height 58px; letter-spacing -0.4px
-- H3 "Hi, EV": font-size 30px; font-weight 400; HyundaiSansHeadKR; line-height 44px; color rgb(255,255,255)
-- H3 event cards: font-size 24px; font-weight 400; letter-spacing -0.4px
-- Primary CTA "내 차 만들기": bg rgb(0,44,95) #002c5f; color rgb(255,255,255); radius 0px; padding 10px 20px; height 50px; font 16px weight 500 HyundaiSansTextKR
-- Detail link "자세히 보기": bg rgb(0,44,95); color rgb(255,255,255); height 40px; font 15px weight 500 HyundaiSansHeadKRR
-- Chatbot FAB: bg rgb(0,170,210) #00aad2; radius 100%; 60px x 60px
-- Cookie button "I Understand": bg rgb(0,44,95); radius 2px; padding 12px 10px; font 13px weight 600
-- Cookie ghost "Cookies Settings": bg #fff; color rgb(0,44,95); border 1px solid rgb(0,44,95); radius 2px
-- Carousel arrow: bg rgba(31,45,61,0.4); color rgb(255,255,255); height 44px
-- bgFreq top: rgb(246,243,242) ×24 (#f6f3f2), rgb(255,255,255) ×24, rgb(0,127,168) ×18 (#007fa8), rgb(0,44,95) ×16
-- fgFreq top: rgb(0,0,0) ×1551, rgb(102,102,102) ×557 (#666666), rgb(0,44,95) ×247, rgb(255,255,255) ×210
-
-Worldwide site (https://www.hyundai.com/worldwide/en):
-- fonts: HyundaiMedium, HyundaiKRMedium
-- nav CTA color: rgb(0,44,95) matching KR site
-- btn "I Understand": bg rgb(0,44,95); radius 2px; weight 600
-- H1 weight 400 consistent
-
-Brand narrative sources:
-- https://www.hyundai.com/kr/ko/e — verified live brand headlines (GRANDEUR, KONA EV, Venue)
-- https://www.hyundainews.com/ko-kr/ — Hyundai official Korean press room (HTTP 200, brand-owned)
-- Hyundai founding (1967, Chung Ju-yung) and Pony/Canada export (1984) are widely documented public facts
-- "Sensuous Sportiness" design language: publicly documented, first fully realized in 8th-gen Sonata 2019, CDO Luc Donckerwolke
-- IONIQ "Parametric Pixels": publicly documented EV design language, brand-owned
-
-Personas (§13) are fictional archetypes, not individual people.
-Interpretive claims (0px radius as manufacturing precision analogy, "photography as depth") are editorial readings connecting observed design to brand positioning.
--->
+No duration, easing, animation, or reduced-motion behavior was captured. Motion tokens and rules are unresolved.