Design System Inspiration of Kia

1. Visual Theme & Atmosphere

Kia's digital presence since the 2021 global rebrand ("Movement that inspires") is a study in automotive restraint — an identity that lets the vehicles breathe rather than compete with the interface chrome. The canvas is pure white (#ffffff) broken only by a single dominant near-black (#05141f), a deep charcoal-navy that serves simultaneously as primary text, button backgrounds, and the brand's main interactive surface. There is no signature saturated accent color in Kia's web UI — no red, orange, or electric blue — making the homepage feel closer to a high-end automotive showroom than a typical Korean consumer site.

The proprietary typeface system — Kia Signature — is the identity's most distinctive element. Two weights dominate: Kia Signature Bold (used at display sizes and for all CTAs/headings) and Kia Signature Regular (used for navigation, body, and UI labels), both falling back to Arial. Despite being named "Bold," the display weight registers as a confident medium weight at screen — not the heavy slab of legacy automotive brands. At 52px (hero), the font has an athletic, engineered feel with normal tracking — no extreme tight-tracking like many premium automotive sites.

The overall geometry is strikingly square and orthogonal. All buttons use border-radius: 0px (sharp rectangular edges), cards use a restrained 15px radius, and the layouts are clean horizontal bands. This is automotive-grade precision applied to UI — corners that say "engineered," not "consumer app." Depth comes almost entirely from flat contrast — dark surface (#05141f) vs white content — rather than shadows. The vehicle photography dominates; the interface steps back to frame it.

Key Characteristics:

• Kia Signature Bold for all display headings and CTAs — proprietary automotive typeface
• Deep charcoal-navy (#05141f) as the single primary color (text, buttons, nav surfaces)
• Pure white canvas with #f8f8f8 subtle surface for card/section separation
• Zero-radius (0px) buttons — sharp, engineered, automotive
• 15px card radius — the only soft curve in the system
• No saturated accent color — monochrome identity with steel-grey (#697278) secondary
• Full-bleed vehicle photography as the hero — UI frames the car, not vice versa
• Flat shadows: none throughout; depth via background contrast only

2. Color Palette & Roles

Primary

• Kia Charcoal Navy (#05141f): The single dominant color — headings, button backgrounds, nav text. A very dark desaturated blue-navy that reads as near-black with depth. Used instead of pure black to maintain warmth and brand character.
• Dark Surface (#010e18): Darkest variant for dark-mode hero sections. Also seen as #01141b in the EV6 vehicle page dark banner.
• Pure White (#ffffff): Page background, card surfaces, button text on dark backgrounds. The system's dominant surface.

Surface & Border

• Surface Grey (#f8f8f8): Subtle tinted background for alternating sections and light surface elements.
• Border Grey (#dadce0): Card outlines (Best Kia vehicle cards) — thin, clean separation.

Text Hierarchy

• Primary Text (#05141f): Headings, nav links, strong labels, button text on white.
• Body Slate (#37434b): Secondary body copy and descriptions.
• Steel Grey (#697278): Tertiary text, inactive tabs, muted labels.
• Steel Alt (#79838b): Alternate muted text for fine print.

On-dark

• On-Primary (#ffffff): Text and icons on the dark #05141f button and nav backgrounds.

3. Typography Rules

Font Family

• Display / UI: Kia Signature Bold — proprietary typeface, fallback Arial, sans-serif, Hevetica. Used for all headings, vehicle names, CTA labels, and navigation panel headers.
• Body / Nav: Kia Signature Regular — the lighter companion. Used for global nav links, body copy, and utility labels.

Hierarchy

Principles

• One typeface, two weights: Kia Signature Bold vs Regular carries the entire hierarchy. No third-party Korean/Latin fonts on the main site.
• Automotive precision at display sizes: normal (not negative) tracking even at 52px — confident, not compressed. The type doesn't need tight-tracking to feel premium; the proportion and weight do the work.
• Bold for action, Regular for context: every clickable/navigable element in Bold; every paragraph in Regular — a clean semantic split.

4. Component Stylings

Buttons

Primary Dark

• Background: #05141f
• Text: #ffffff
• Radius: 0px
• Padding: 16px 24px
• Font: 14px Kia Signature Bold weight 400
• Border: 1px solid #05141f
• Height: 48px
• Use: Primary CTA on white/light backgrounds (견적 내기, 바로가기)

Secondary White (Ghost)

• Background: #ffffff
• Text: #05141f
• Radius: 0px
• Padding: 16px 24px
• Font: 14px Kia Signature Bold weight 400
• Border: 1px solid #ffffff
• Height: 48px
• Use: Secondary CTA placed on dark hero/vehicle images (자세히 보기, 렌터카 견적 내기)

White Outlined

• Background: #ffffff
• Text: #05141f
• Radius: 0px
• Padding: 16px 24px
• Font: 14px Kia Signature Bold weight 400
• Border: 1px solid #05141f
• Height: 48px
• Use: Outlined white CTA on mixed backgrounds

Cards & Containers

Vehicle Card

• Background: #ffffff
• Text: #05141f
• Border: 1px solid #dadce0
• Radius: 15px
• Use: Best Kia vehicle lineup cards (the only rounded element in the system)

Surface Section

• Background: #f8f8f8
• Radius: 0px
• Use: Alternating section backgrounds for content grouping

Tabs

Vehicle Page Tab (Active)

• Text: #05141f
• Font: 20px Kia Signature Bold weight 400
• Active: bottom border indicator on active tab
• Use: In-page navigation (특징, 제원, 갤러리, 모델 비교, EV TCO 계산기, 가격)

Vehicle Page Tab (Inactive)

• Text: #697278
• Font: 20px Kia Signature Bold weight 400
• Use: Non-selected vehicle page sub-nav items

Badges & Tags

Model Badge

• Background: #f8f8f8
• Text: #05141f
• Radius: 0px
• Font: 14px Kia Signature Regular weight 400
• Use: Model category labels, metadata tags

Navigation

Global Navigation Header

• Background: transparent / overlays hero image
• Text: #ffffff on dark hero; #05141f on scrolled white header
• Font: 16px Kia Signature Regular weight 400
• Height: 60px
• Use: Top horizontal nav (차량, 구매, 체험, 이벤트, 고객 지원, Discover Kia, PBV)

Vehicle Sub-navigation Panel

• Text (panel heading): #ffffff on dark panel, 18px Kia Signature Bold
• Use: Mega-menu panels for 차량, 구매, 체험 nav items

---

Verified: 2026-06-22 Tier 1 sources: https://www.kia.com/kr/ (homepage, computed style live inspect), https://www.kia.com/kr/vehicles/ev6/ (EV6 vehicle page, second surface), https://worldwide.kia.com/en/brand/our-brand/brand-identity/who-we-are (Kia global brand identity page), https://www.kia.com/kr/discover-kia/news/list (Kia Korea newsroom) Tier 2 sources: getdesign.md/kia — 0 results (not listed); styles.refero.design/?q=kia — no exact match found (search returned automotive brands Ferrari, BMW, Tesla, Lamborghini, Rivian but not Kia) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px+
• Notable: CTA button padding is exactly 16px 24px — a generous, press-friendly automotive target

Grid & Container

• Full-bleed hero sections with vehicle photography spanning the full viewport width
• Centered content columns inside sections with generous horizontal padding
• Horizontal card rows for vehicle lineup (Best Kia) — typically 3–4 cars per row
• Dark (#05141f) and white sections alternate to create visual rhythm without using color
• Vehicle page sticky sub-nav bar with horizontal tab list

Whitespace Philosophy

• Photography-first layout: the UI chrome (nav, CTAs, labels) is minimal so vehicle imagery is the primary content
• Generous section spacing: vertical rhythm between sections is ample — 64px+ between major content blocks
• Two-button CTA pattern: each vehicle/section typically shows a pair of CTAs (light + dark) side by side

Border Radius Scale

• Zero (0px): all interactive buttons — sharp, engineered, automotive
• Card (15px): vehicle lineup cards only
• Circle: floating chat button (50% radius)

6. Depth & Elevation

Shadow Philosophy: Kia's site is essentially shadowless. Live inspection confirmed box-shadow: none across all primary UI elements — nav, hero CTAs, vehicle cards, buttons. Depth is communicated through full-bleed dark (#05141f) sections alternating with white, and through the vehicle photography itself. This "shadow-free, photography-first" approach makes the digital experience feel like a clean automotive brochure rather than an app.

7. Do's and Don'ts

Do

• Use Kia Signature Bold for all CTAs, headings, and vehicle names — it's the brand voice
• Use #05141f (charcoal navy) as the primary text and button color — not pure black
• Use sharp 0px radius on all buttons — Kia's UI is engineered and orthogonal
• Reserve the 15px radius for vehicle cards only — the system's single soft curve
• Use full-bleed photography as the hero; the UI frames the vehicle, not the reverse
• Use the two-CTA pattern (dark primary + white secondary) on hero sections
• Keep the palette monochrome — no saturated accent colors in UI chrome

Don't

• Add a saturated accent color (red, orange, blue) to UI elements — Kia's identity is monochrome
• Use pill-shaped or large-radius buttons — 0px sharp corners are the automotive design signature
• Use drop shadows for card elevation — flat contrast and hairlines only
• Set display text in Kia Signature Regular — Bold is required at heading sizes
• Use positive or extreme negative letter-spacing — Kia runs at normal tracking across sizes
• Replace the vehicle photography with illustration — the real car is the design element

8. Responsive Behavior

Breakpoints

Touch Targets

• CTA buttons at 48px height with 24px horizontal padding — comfortably tappable
• Nav items at 60px header height
• Vehicle page tabs at 52px height
• Floating chat button at 56px diameter (50% radius)

Collapsing Strategy

• Hero: vehicle page H2 at 52px scales down proportionally on mobile
• Navigation: horizontal mega-menu collapses to hamburger toggle
• Vehicle lineup: 3-4 column cards → 2-column → 1-column stacked
• Button pair: dark + white CTAs stack vertically on mobile

9. Agent Prompt Guide

Quick Color Reference

• Primary / CTA background: Charcoal Navy (#05141f)
• CTA text on dark: Pure White (#ffffff)
• Body text: Deep Charcoal (#05141f)
• Secondary text: Body Slate (#37434b)
• Muted / inactive: Steel Grey (#697278)
• Page background: White (#ffffff)
• Subtle surface: Surface Grey (#f8f8f8)
• Card border: Border Grey (#dadce0)
• Dark sections: Dark Surface (#01141b)

Example Component Prompts

• "Create a Kia-style hero: full-bleed vehicle photograph background. Overlay: H2 at 52px Kia Signature Bold, line-height 1.23, color #ffffff. Two CTAs side-by-side: dark button (#05141f bg, white text, 0px radius, 16px 24px padding, 14px Kia Signature Bold, 1px solid #05141f) + white button (#ffffff bg, #05141f text, 0px radius, same specs, 1px solid #ffffff). No shadows."
• "Design a vehicle lineup card: #ffffff background, 1px solid #dadce0 border, 15px radius, no shadow. Vehicle name at 28px Kia Signature Bold #05141f. CTA button below: #05141f bg, #ffffff text, 0px radius, 14px 16px 24px padding."
• "Build a page sub-nav: horizontal tab row on white. Active tab: #05141f text, 20px Kia Signature Bold, bottom border indicator. Inactive tabs: #697278 text, same size. No background color on tab bar itself."

Iteration Guide

1. Default to sharp 0px corners on every interactive element — pillsare off-brand
2. Use only #05141f for primary actions — resist adding a secondary accent
3. Never use box-shadow — depth via background color and full-bleed dark sections
4. Kia Signature Bold for CTAs + headings; Regular for nav links and body
5. White and dark (#05141f) sections alternate for rhythm — no mid-range grays
6. Vehicle photography is always primary; keep UI chrome minimal

---

10. Voice & Tone

Kia's brand voice since the 2021 global rebrand centers on the phrase "Movement that inspires" — a manifesto that positions Kia not as a car manufacturer but as a creator of sustainable mobility experiences that move people emotionally as well as physically. The tone is aspirational but grounded: confident without being aggressive, premium without condescension, international while addressing Korean consumers directly.

Voice samples (verbatim from live site, 2026-06-22):

• "기아 - Movement that inspires" — site title and meta (brand manifesto). (verified live 2026-06-22)
• "Best Kia" — homepage section title (concise, bilingual-friendly). (verified live 2026-06-22)
• "The 2026 EV6" — EV6 vehicle page hero H2 (year + model, English on Korean site). (verified live 2026-06-22)

Forbidden register: legacy automotive bravado ("Power. Performance. Passion."), feature lists that don't tie to mobility narrative, patronising "simplicity" copy, excessive Korean honorifics that feel corporate over human.

11. Brand Narrative

Kia was founded in 1944 in Korea as a manufacturer of steel tubing and bicycles, evolving through motorcycles into automobile production in the 1960s. The name "기아(起亞)" means "rising from Asia" — a founding ambition that still shapes the brand's confidence. After surviving the 1997 Asian financial crisis through acquisition by Hyundai Motor Group, Kia spent two decades building volume before executing one of Korea's most deliberate automotive brand transformations.

The pivotal moment was the appointment of Peter Schreyer as Chief Design Officer in 2006 — the "tiger nose" grille, clean silhouettes, and design-led identity that followed gave Kia genuine global design credibility. The transformation accelerated in January 2021 when Kia unveiled a new logo (the flowing "KIA" signature), the repositioned brand identity, and the "Movement that inspires" tagline — signaling Kia's shift from a value-focused car brand into a sustainable mobility company. The rebrand was one of the most publicly discussed automotive identity launches of the decade (famously confused with "KN" in social media — Kia addressed it by leaning into the modern, connected letterforms).

The design philosophy — "Opposites United" — guides both product and digital surfaces: the interplay of opposites (bold/calm, wild/restrained, natural/technical) drives a creative tension that refuses to let Kia settle into one lane. For digital, this means the ultra-clean white canvas paired with the weighty charcoal-navy, the sharp 0px buttons coexisting with soft 15px card curves, and global English vehicle names ("The 2026 EV6") on a primarily Korean-language site.

12. Principles

1. Design is the product. Kia's "Opposites United" philosophy treats design as the root of everything — not styling, but the tension between contrasting ideas that produces emotional resonance. UI implication: every layout decision should carry intentional contrast (dark/light, sharp/soft, minimal/bold).
2. Movement as purpose. "Movement that inspires" is not just about cars moving — it's about inspiring people to move toward a better life. UI implication: CTAs frame an invitation to experience, not just a transactional step. "견적 내기" leads somewhere meaningful.
3. Premium restraint, not premium excess. Kia's premium signal comes from what is not there — no shadows, no accent colors, no decorative flourishes. UI implication: resist adding elements; every component should earn its presence.
4. The vehicle is the content. Digital surfaces exist to showcase the vehicle, not to be design artifacts themselves. UI implication: vehicle photography is always primary; UI chrome is always secondary.
5. Engineered confidence. 0px button radius is not a mistake — it's a deliberate statement that Kia's products are built with precision. UI implication: sharp geometric forms throughout; no pill shapes.

13. Personas

Personas below are fictional archetypes informed by publicly observable Kia user segments (Korean car buyers, EV early adopters, family SUV buyers), not individual people.

이준혁, 38, 경기 수원. A software engineer considering his first EV purchase. Has been following the EV6 and EV9 launches. Uses kia.com/kr's configurator to compare trims and calculate monthly payments. Values the clarity of the "EV TCO 계산기" tool and the clean vehicle photography that lets him visualize color options without visiting a dealer.

최수민, 45, 서울 강남. A family SUV buyer upgrading from a Sorento to a Carnival. Visits the vehicle lineup section first, then checks "이 달의 구매 혜택" for monthly financing offers before booking a test drive. Appreciates the direct "시승 신청" CTA without friction.

박지훈, 31, 대전. A Kia fan who followed the 2021 rebrand closely. Uses worldwide.kia.com to explore the brand's "Opposites United" design philosophy and international design exhibition content before recommending Kia to friends. Views the brand's visual transformation as validation of Korean automotive design globally.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Kia's site motion is quiet and functional — befitting an automotive brand that signals reliability. Hero carousels and vehicle image transitions use motion-cinematic with linear or gentle ease-in-out for a polished brochure feel. Navigation mega-menus appear with motion-standard. No bounce, no spring, no overshoot — automotive reliability translated to motion design. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the photography remains static and fully accessible.

Signature motion: Full-bleed vehicle photography crossfades in the hero carousel. Images transition with a slow, cinematic fade (600ms+) — never a slide or push — so the vehicle appears to emerge rather than move. This reinforces the "Movement that inspires" brand idea: the experience should feel like the car arriving, not a UI sliding.