티맵모빌리티 DESIGN.md

Design System Inspiration of TMAP Mobility

Overview

Visual Theme & Atmosphere

TMAP Mobility (티맵모빌리티㈜) runs TMAP, Korea's long-running navigation service, from SK-C Tower in Jung-gu, Seoul. Its own history page traces the product to 2002, when Nate Drive launched as what the company calls the world's first mobile navigation service to reflect real-time traffic. From there the page walks through the TMAP brand (2007), the smartphone app bundled free with mobile plans (2010), in-car TMAP starting with Renault Samsung and extending to SsangYong, Kia, Jaguar and Land Rover (2012), TMAP OPEN API (2012), opening the service free to every carrier (2016), the TMAP X NUGU AI driving assistant (2017), V2X alerts (2018) and aerial high-resolution maps (2019). In June 2021 the whole brand logo was replaced; that December TMAP added designated driving, parking, EV charging and kick-scooter verticals; a truck navigation followed in 2022, and in September 2023 version 10.0 folded public-transit guidance into one integrated mobility app. The company now frames itself as "더 가치 있는 길을 찾는 모빌리티 파트너" — a mobility partner that looks past the fastest route (Route) for a better way to move (Way).

The public site reads like a calm corporate magazine. Pages sit on white #ffffff with pure black #000000 text, set entirely in Pretendard with 700-weight headlines — 44.16px heroes and 61.44px value statements, tracked at -0.32px. TMAP blue #0064ff is used as text, never as a fill: it marks the header item of the section you are in, the selected year of the history timeline and the blue eyebrows above sections, and it tints the mega menu's section titles at 10% under the pointer. Around that, the page is carried by photography: image-led article cards with 2px white outline badges, 43.2px outline pills over images, a pale #f1f8ff 19.2px panel for each navigation feature, and one soft shadow, on the home search pill.

Key Characteristics:

• Pretendard throughout, self-hosted as a variable font; 700 for every headline and navigation label
• White #ffffff canvas, pure black #000000 text and headings, body tracked at -0.32px
• TMAP blue #0064ff as selected-state and eyebrow text, plus a 10% #0064ff hover tint on mega-menu titles — no blue fills
• Photography-led cards with 2px outline badges (9.6px radius) and 2px outline pills (43.2px radius)
• Pale blue #f1f8ff feature panels at 19.2px radius on the navigation page
• A single elevated element: the 69px search pill with rgba(0, 0, 0, 0.08) 0px 3px 5px 0px
• Grey only for secondary navigation: #585858 mega-menu links, #464646 chips, #777777 footer

Primary tasks

• Find the service for a trip: navigation, designated driving, parking, EV charging, rental cars, public transit
• Check what TMAP navigation does before installing the app
• Read company news, driving tips and theme courses (티맵 이야기)
• Learn about the company, its culture and open roles (티맵 피플)
• Evaluate TMAP AUTO, TMAP API & DATA and advertising for a business

Brand Narrative

TMAP's story, as the company tells it on its own history page, is twenty years of widening what "finding the way" means. It began in 2002 with Nate Drive, a mobile navigation service that reflected live traffic; the TMAP name arrived in 2007, the smartphone app in 2010, and TMAP moved into cars, APIs and — from 2016 — every Korean carrier's phones. The late-2010s additions were about the drive itself: an AI assistant with NUGU, V2X warnings, aerial high-resolution maps. The 2020s are about everything around the drive: a new logo in June 2021, designated driving, parking, EV charging and scooters that December, truck navigation in 2022, and in 2023 a single app that also guides public transit.

The company's vision statement names that shift directly: having spent twenty years finding the fastest and safest Route, TMAP now wants to find a better Way to move — for daily life, for future generations and for its own people. Its WAY values read like a working culture rather than slogans: 고객중심 (customer first), 프로답게 (work like a pro), 열린소통 (open communication), 한계없이 (without limits, with the courage to fail fast) and 함께성장 (grow together). The footer links to SK's ethics reporting channel, the only group affiliation the captured pages show.

What the design refuses, as an editorial reading of the captured pages: loud promotional chrome and competing accent colours. What it embraces: black-and-white type, photography, outlines instead of fills, and one blue that tells you where you are.

Principles

1. Show where the user is. UI implication: the current section and the selected year turn #0064ff; nothing else is blue.
2. Route, then Way. From the company vision. UI implication: lead with the destination question ("어디로 갈까요?") and put the service catalogue one step away.
3. Let photography carry the mood. UI implication: white outline badges and pills over images instead of filled buttons.
4. Flat and quiet. UI implication: no card shadows; pale #f1f8ff panels and 2px outlines for grouping.
5. Weight, not colour, for hierarchy. UI implication: 700 and 800 Pretendard for structure, 400 for reading.

Personas

Personas below are fictional archetypes informed by publicly observable TMAP user segments (daily drivers, public-transit riders, business customers of TMAP AUTO and TMAP API), not individual people.

김도현, 38, 서울. A daily commuter who checks the navigation page before trying new features. Wants the fastest route and plain explanations, not promotions.

이서연, 29, 경기. A newer driver interested in the driving score and insurance benefit. Reads the service pages to understand what the app measures.

박준호, 45, 부산. A fleet manager comparing TMAP API & DATA and route optimisation for a logistics team. Trusts the calm, data-first presentation.

Colors

Every value below was read on 2026-09-30 from the home page, the TMAP navigation page and the company page.

Blue

• TMAP Blue (#0064ff): the primary. The captured pages render it in two primary roles: the selected state — the top-navigation item of the current section (티맵 서비스 on the navigation page, 티맵 피플 on the about page; the other four stay #000000) and the selected year (2002) of the history timeline — and accent text on the about page's eyebrows (TMAP MOBILITY VISION, TMAP MOBILITY WAY, TMAP MOBILITY 히스토리) and the five WAY slogans. The mega menu's section titles take it as a 10% tint, rgba(0, 100, 255, 0.1), under hover and press. It never appears as a solid fill on the captured pages.

Ink & Text

• Ink (#000000): body text, headings, navigation labels and the news-row rules.
• Menu Link (#585858): service links inside the mega menu, 13.44px / 800.
• Chip Label (#464646): labels of the home quick-link chips.
• Footer (#777777): footer navigation and legal links; also the edge of the category badge on the navigation page.
• On Image (#ffffff): hero and banner headings, outline pills and badges over photography.

Surface & Lines

• Canvas (#ffffff): page background and the search pill.
• Surface Blue (#f1f8ff): the feature panels on the navigation page.
• Hairline (#e5e5e5): the 2px edge of the quick-link chips.
• Search Border (#f2f0f0): the 1px edge of the search pill.
• Badge Border (#dbdbdb): the 2px edge of a category badge on a white card.

Not carried forward

• The June record's #0061fd blue panels and indicator dots, the #f3f5f7 and #efefef grey bands, the #e2e2e2 hairline and the #f1f8ff to #d3e8ff hero gradient were not present in the 2026-09-30 capture, so none is a token. The about page's white-text columns sit on imagery the collector does not read as a colour.

Typography

Font Family

• Live surface use: Pretendard, self-hosted by TMAP as a variable font (https://www.tmapmobility.com/asset/font/PretendardVariable.woff2), loaded and used by 763 captured elements across all three pages — headings, navigation, buttons, cards, badges and body text.
• Official brand typeface: none was found on the captured pages, so none is claimed.
• Declared only / unresolved: none; Pretendard is the only face the pages declare.

Hierarchy

The navigation page's 61.44px h2 computes its letter-spacing as -2% rather than -0.32px.

Principles

• Weight carries the hierarchy: 700 for headings and navigation, 800 for small dense labels, 400 for body.
• One tracking value: -0.32px on body and headings; -2% only on the navigation page's largest headline and the footer.
• Computed sizes, as measured: 13.44, 15.36, 23.04, 28.8, 34.56, 44.16 and 61.44px at a 1440px viewport; use them as given rather than rounding.

Layout

Spacing System

• Navigation: 0 20.16px on top items; 7.68px 23.04px on mega-menu titles and links
• Search pill: 23.04px 28.8px; chips 11.52px; badges 10.56px
• Outline pills: 8.64px 21.12px on the inner link
• Feature panels: 67.2px; news rows 33.6px vertical

Grid & Container

• Content runs in a 1056px column (feature panels, banners, section headings) under a full-width 93px header.
• Home article cards are 509px wide in two columns; the news list is 691px wide beside a 326px heading.
• The about page lays out 326px columns for its service groups and history items.

Whitespace Philosophy

• Magazine rhythm: large headlines, photography and generous section gaps rather than dense widgets.
• Colour for position, not decoration: blue text tells you where you are (current section, selected year); everything else stays black and white.

Border Radius Scale

• 4px: mega-menu titles and links
• 9.6px: chips and badges
• 19.2px: feature panels and banners
• 34.56px: the search pill
• 43.2px and 100px: outline pills

Responsive Behavior

Breakpoints

Only the 1440px desktop layout was captured; no breakpoint values are claimed.

Touch Targets

• The search pill is 69px tall; outline pills 46px; chips 43px.
• Top navigation labels are 22px tall inside a 93px header bar.

Collapsing Strategy

Not captured.

Image Behavior

• Article cards, banners and the hero are image-led; text and outlines over them are white.

Elevation & Depth

Shadow Philosophy: depth is almost absent. Structure comes from photography, 2px outlines and the pale blue panels; the one shadow lifts the search pill, the page's main entry into the product.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.search: rgba(0, 0, 0, 0.08) 0px 3px 5px 0px

Motion & Easing

The collector reads computed style, not animation. A same-day headless read of the declared transition values found: quick-link chips transition colour, background and border over 0.4s; the outline pills transition their background over 0.5s; the search pill and the history year buttons transition a filter over 0.2s. No easing curve is claimed beyond those declarations. Honour prefers-reduced-motion in any build.

Components

Navigation

Top navigation item

• Background: transparent
• Text: #000000
• Padding: 0 20.16px
• Height: 22px (inside a 93px header)
• Font: 15.36px / 700 / 21.5px Pretendard
• Selected: text #0064ff on the current section
• States: selected read from rest values on two pages; no pointer frame
• Use: 티맵 피플, 티맵 서비스, 티맵 이야기, 지속가능경영, 고객지원

Mega-menu section title

• Background: transparent
• Text: #000000
• Radius: 4px
• Padding: 7.68px 23.04px
• Height: 34px
• Font: 15.36px / 700 / 18.4px Pretendard
• Hover: background rgba(0, 100, 255, 0.1)
• Pressed: background rgba(0, 100, 255, 0.1)
• States: two titles on two pages read the same tint in both frames; focus is not declared
• Use: section titles of the header mega menu

Mega-menu link

• Background: transparent
• Text: #585858
• Radius: 4px
• Padding: 7.68px 23.04px
• Height: 31px
• Font: 13.44px / 800 / 16.1px Pretendard
• Use: service links (내비게이션, 주차, 대중교통 …)

History year

• Background: transparent
• Text: #000000
• Height: 25px
• Font: 15.36px / 700 / 25px Pretendard
• Selected: text #0064ff (2002 at rest)
• Use: year selector of the company history timeline, 22 years

Buttons

Search pill

• Background: #ffffff
• Text: #000000
• Border: 1px solid #f2f0f0
• Radius: 34.56px
• Padding: 23.04px 28.8px
• Height: 69px (467px wide)
• Font: 16px / 400 / 22.4px Pretendard
• Shadow: rgba(0, 0, 0, 0.08) 0px 3px 5px 0px
• Use: "어디로 갈까요?" search launcher on home

Quick-link chip

• Background: transparent
• Text: #464646
• Border: 2px solid #e5e5e5
• Radius: 9.6px
• Padding: 11.52px
• Height: 43px
• Font: 13.44px / 800 / 16.1px Pretendard
• Use: 회사소개, 조직문화, 내비게이션, 운전점수/보험혜택(UBI), 어디갈까, 대리운전

Outline pill over imagery

• Background: rgba(0, 0, 0, 0.1)
• Text: #ffffff
• Border: 2px solid #ffffff
• Radius: 43.2px
• Padding: 8.64px 21.12px
• Height: 46px
• Font: 15.36px / 700 / 25px Pretendard
• Use: 티맵 서비스 on the home hero, 채용 공고 확인하기 on the about page

Outline pill on white

• Background: transparent
• Text: #000000
• Border: 2px solid #000000
• Radius: 100px
• Padding: 8.64px 21.12px
• Height: 46px
• Use: the action beside the home news list

Cards & Containers

Image badge

• Background: transparent
• Text: #ffffff
• Border: 2px solid #ffffff
• Radius: 9.6px
• Padding: 10.56px
• Height: 41px
• Font: 13.44px / 800 / 16.1px Pretendard
• Use: category label over article photographs; on a white card it turns black with a #dbdbdb edge, on the navigation page it takes a #777777 edge

Feature panel

• Background: #f1f8ff
• Radius: 19.2px
• Padding: 67.2px
• Size: 1056 × 487
• Use: the five TMAP navigation features, each with a 34.56px / 700 title

Interview banner

• Text: #ffffff
• Radius: 19.2px
• Size: 1056 × 697
• Use: image-led people story on home and the about page

News row

• Text: #000000
• Border: 1px solid #000000, bottom only
• Padding: 33.6px 0
• Use: press list on home, 691px wide

---

Verified: 2026-09-30 (deterministic collector capture of three public pages, logged out, plus first-party context from the company page) Tier 1 sources: https://www.tmapmobility.com/ ; https://www.tmapmobility.com/service/drive/navigation ; https://www.tmapmobility.com/people/about Tier 2 sources: getdesign.md/tmap (HTTP 200; the served page contains no occurrence of the name) and styles.refero.design/?q=tmap (HTTP 200; the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages.

Focus rings, disabled, loading, empty, error and success treatments were not captured and are not described.

Live state probe, 2026-10-16 (https://www.tmapmobility.com/), search-pill: pressed — no visible change (measured 2026-10-16); focus — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• Set everything in Pretendard, headings and navigation at 700, body at 400 with -0.32px tracking
• Keep text #000000 on #ffffff
• Use #0064ff for the selected item and for eyebrows — as text
• Use rgba(0, 100, 255, 0.1) as the hover fill of menu titles
• Put outline badges (2px, 9.6px) and outline pills (2px, 43.2px) over photography
• Use #f1f8ff panels at 19.2px for product features
• Keep one shadow for the search entry point

Don't

• Fill buttons or panels with solid #0064ff — the captured pages never do
• Add drop shadows to cards or panels
• Introduce a second typeface
• Use grey for body text; grey belongs to secondary navigation and the footer

Voice & Tone

TMAP's voice is plain and reassuring: it names a destination, a capability or a value, and trusts the reader. The navigation page leads with a leadership claim stated flatly, the company page talks about the route and the way, and the product entry point is a single question.

Voice samples (read on 2026-09-30):

• "스마트한 이동 생활의 시작 티맵과 함께 언제나 마음 편한 이동과 일상" — home hero heading.
• "가장 빠르고 정확한 길안내 국내 1위 티맵 내비" — navigation page h1.
• "더 가치 있는 길을 찾는 모빌리티 파트너" — company vision.
• "실패할 수 있는 용기가 없다면 허들을 넘어설 수 없다" — the 한계없이 value.
• "어디로 갈까요?" — the home search pill.

Forbidden register: pressure-selling urgency, unexplained jargon, exclamation-heavy hype, playful slang that undercuts a safety-critical product.

Agent Prompt Guide

Quick Color Reference

• Primary (selected / eyebrow text): TMAP Blue #0064ff
• Hover tint: rgba(0, 100, 255, 0.1)
• Text and headings: #000000
• Background: #ffffff
• Feature panel: #f1f8ff
• Mega-menu link: #585858
• Chip label / edge: #464646 / #e5e5e5
• Footer: #777777

Example Component Prompts

• "Create a top navigation on white: five Pretendard 15.36px / 700 items in #000000 with 0 20.16px padding; the current section's label is #0064ff. No underline, no fill."
• "Create a search launcher: #ffffff pill, 1px solid #f2f0f0, 34.56px radius, 23.04px 28.8px padding, 69px tall, 16px / 400 Pretendard placeholder '어디로 갈까요?', shadow rgba(0, 0, 0, 0.08) 0px 3px 5px 0px."
• "Build an image card: full photograph, a 2px white outline badge (9.6px radius, 10.56px padding, 13.44px / 800 white) and a 28.8px / 700 white heading with -0.32px tracking."
• "Build a feature panel: #f1f8ff, 19.2px radius, 67.2px padding, 34.56px / 700 #000000 title, 23.04px / 400 copy."

Iteration Guide

1. Pretendard only; 700 headings, 400 body, -0.32px tracking
2. Black on white; blue only as selected or eyebrow text
3. Hover on menu titles is a 10% blue tint
4. Outlines (2px) instead of fills for badges and pills over imagery
5. Radii: 4 / 9.6 / 19.2 / 34.56 / 43.2px
6. One shadow, on the search pill

---

Governance

Known Gaps

• Contrast, header-nav-link. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, mega-menu-title. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, mega-menu-link. Text #585858 on #00000000 measures 2.95:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, category-chip. Text #464646 on #00000000 measures 2.22:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, outline-pill-dark. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, history-year. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.