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).

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 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.

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

2. Color Palette & Roles

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.

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.

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.

3. Typography Rules

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

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.

4. Component Stylings

Buttons

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 (자세히 보기)

• Background: #002c5f
• Text: #ffffff
• Radius: 0px
• Font: 15px HyundaiSansHeadKRR weight 500
• Height: 40px
• Use: Section-level "more detail" link-button on brand/events cards

Cards & Containers

Vehicle Model Card

• Background: #ffffff
• Text: #000000
• Radius: 0px
• Use: Vehicle model listing card on homepage — sharp edge, no shadow, full-bleed vehicle photo

Section Surface Card

• Background: #f6f3f2
• Text: #000000
• Radius: 0px
• Use: Warm off-white section containers separating content bands

Badges

Teal Category Badge

• Background: #007fa8
• Text: #ffffff
• Radius: 0px
• Font: 13px HyundaiSansTextKR weight 400
• Use: EV/electrification category tags, Hi-EV section marker

Inputs & Forms

Search Input

• Background: #ffffff
• Border: 1px solid #cbcbcb
• Radius: 0px
• Font: 16px HyundaiSansTextKR
• Text: #000000
• Placeholder: #999999
• Use: Site-wide search input

Navigation

• 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

Chatbot FAB

• 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

---

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/

Tier 2 sources: getdesign.md/hyundai — not found; styles.refero.design/?q=hyundai — no Hyundai result (automotive results: BMW, Tesla, Rivian) Conflicts unresolved: none

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

6. Depth & Elevation

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.

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

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

8. Responsive Behavior

Breakpoints

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

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

---

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.

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.

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.

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.

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.

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.

14. States

15. Motion & Easing

Durations:

Easings:

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.