Design System Inspiration of TMAP Mobility

1. Visual Theme & Atmosphere

TMAP Mobility (티맵모빌리티) is Korea's dominant navigation and mobility super-app, and its corporate brand site reads like a confident editorial magazine rather than a busy utility. The canvas is pure white (#ffffff) and the system is overwhelmingly monochrome: headlines and most text sit in pure black (#000000), softened down a three-step grey ladder (#464646 → #585858 → #777777) for supporting copy. Against this near-greyscale field, a single saturated brand blue (#0064ff) does all the signalling — section eyebrows ("TMAP MOBILITY VISION", "TMAP MOBILITY WAY"), accent links, the 4px underline under the active nav item, and solid blue value-panels. The effect is calm, premium, and engineered: a mobility company that wants to read as trustworthy infrastructure, not a playful consumer toy.

The typographic personality is pure Korean-modern: the entire site runs on Pretendard, the de-facto hangul product font, with weight 700 (Bold) carrying every headline. Display scales are large and declarative — a 61px feature headline with a notably tight -2% tracking, 44px hero/section heads, and 34.5px feature-block titles — all at line-height 1.40 with -0.32px tracking. Body and UI drop to a quiet 16px / weight 400. There is no second display typeface and no light-weight flourish; hierarchy is built almost entirely from size and the Bold/Regular weight split. This single-font, weight-driven discipline is what gives TMAP its clean, fast, slightly corporate feel.

What distinguishes TMAP from flashier fintech or commerce peers is its restraint with depth and color. Live inspection found box-shadow: none across the hero, nav, and content cards — separation comes from large 19px-radius image cards, flat tinted surfaces, and thin #e2e2e2 hairlines, never elevation. Color is deployed in two registers: the assertive #0064ff brand blue for action and emphasis, and a soft light-blue product atmosphere on service pages — a #f1f8ff tint and a gentle linear-gradient(#f1f8ff → #d3e8ff) hero wash that evokes open sky and roads. The geometry mixes a sharp 4px nav-pill radius with generous 19px content-card rounding and a fully-rounded 35px search pill, signalling "precise where it's functional, friendly where it invites."

Key Characteristics:

• Single typeface — Pretendard — with weight 700 (Bold) on every headline; 400 for body
• Monochrome-on-white base: pure black (#000000) text on white (#ffffff), greyed down a #464646/#585858/#777777 ladder
• One saturated brand blue (#0064ff) reserved for eyebrows, accent links, the active-nav underline, and value panels
• Large declarative display scale — 61px / 44px / 34.5px — with tight tracking (-2% at 61px, -0.32px elsewhere)
• Near-shadowless: box-shadow: none; depth comes from 19px-radius cards, tinted surfaces, and #e2e2e2 hairlines
• Soft light-blue product atmosphere — #f1f8ff tint + #f1f8ff → #d3e8ff gradient — on service pages
• Mixed radius register: 4px nav pills, 19px content cards, 35px search pill, full-round indicator dots
• Cool neutral surfaces (#f3f5f7, #efefef) for alternating content bands

2. Color Palette & Roles

Primary

• TMAP Blue (#0064ff): Primary brand color. The single saturated accent — section eyebrows, accent links, the active-nav 4px underline bar, and emphasis. The system's "this matters / this is the action" color.
• Blue Alt (#0061fd): A near-identical companion blue used as the fill on solid blue value-panels and active indicator dots. Functionally interchangeable with the primary; the tiny shift is a render artifact of the same brand blue.
• Ink Black (#000000): Primary text and heading color — pure black, used directly on white for maximum editorial contrast.

Neutral & Surface

• Pure White (#ffffff): Page background, card surfaces, and text on blue/dark panels.
• Surface Cool (#f3f5f7): Cool-grey tinted surface for alternating content bands and tinted cards.
• Surface Grey (#efefef): A flatter neutral grey for secondary blocks and media placeholders.
• Hairline (#e2e2e2): Thin borders, dividers, and the outline on the white search pill — the primary separation device in this shadow-free system.
• Hairline Alt (#e5e5e5): Secondary hairline for fine dividers.

Product Atmosphere (Blue Tints)

• Surface Blue (#f1f8ff): Very light blue tint for service/product feature sections — the calm "TMAP product" backdrop.
• Surface Blue Deep (#d3e8ff): The deeper stop of the hero gradient (#f1f8ff → #d3e8ff), evoking open sky and roads.

Text Hierarchy

• Ink Black (#000000): Headings, primary text, nav labels.
• Body Grey (#464646): Secondary body copy and descriptions.
• Muted Grey (#585858): Tertiary text, sub-nav labels, metadata.
• Faint Grey (#777777): Lowest-emphasis captions and fine print.

3. Typography Rules

Font Family

• Primary: Pretendard (with sans-serif fallback) — the single typeface for the entire site, headlines through body. ExtraBold (800) appears on dense sub-nav, Bold (700) on headlines and main nav, Regular (400) on body.

Hierarchy

Principles

• One font, weight does the work: Pretendard everywhere; hierarchy is built from size and the Bold (700) / Regular (400) split, not from multiple families.
• Bold display, quiet body: Every headline is weight 700; body stays at 400. There is no light-weight headline treatment.
• Tight tracking on display: -2% at the 61px feature size and -0.32px across the rest of the display scale; body sits at normal tracking.
• Large, declarative heads: Display sizes (61px / 44px / 34.5px) are big and confident, consistent with the editorial, infrastructure-grade tone.

4. Component Stylings

Buttons

Hero Search Pill

• Background: #ffffff
• Text: #000000
• Border: 1px solid #e2e2e2
• Radius: 35px
• Padding: 23px 29px
• Font: 16px Pretendard weight 400
• Height: 69px
• Use: Hero search/launch pill — "어디로 갈까요?" (Where to?)

Navigation

Top Nav Item

• Text: #000000
• Font: 15px Pretendard weight 700
• Radius: 4px
• Padding: 8px 23px
• Active: blue #0064ff text with a 4px bottom border #0064ff
• Use: Primary horizontal nav ("티맵 서비스", "티맵 이야기", "회사소개")

Sub-nav Item

• Text: #585858
• Font: 13px Pretendard weight 800
• Radius: 4px
• Padding: 8px 23px
• Active: text shifts to #000000
• Use: Secondary nav row beneath the main nav

Cards & Containers

Article Card

• Background: #ffffff
• Text: #000000
• Radius: 19px
• Use: Story/content article card (image-led, no shadow)

Tinted Surface Card

• Background: #f3f5f7
• Text: #000000
• Radius: 19px
• Use: Cool-grey tinted content card

Solid Blue Panel

• Background: #0061fd
• Text: #ffffff
• Radius: 19px
• Use: Service/value panel (운전자 서비스, 대중교통 이용 서비스, 기업고객 서비스)

Badges

Blue Eyebrow Label

• Text: #0064ff
• Font: 23px Pretendard weight 700
• Use: Section eyebrow above a headline ("TMAP MOBILITY VISION", "TMAP MOBILITY WAY")

Indicator Dot

• Background: #0061fd
• Radius: 9999px (full)
• Use: Active carousel/step indicator dot

---

Verified: 2026-06-17 (omd:add-reference CREATE — Tier 1 live inspect, 3 brand-owned surfaces) 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 — not listed (no entry) ; styles.refero.design/?q=tmap — no TMAP-specific style (Western-biased catalog under-covers KR brands) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 16px, 20px, 23px, 29px, 48px, 64px
• Notable: Nav items carry ~23px horizontal padding; the hero search pill uses a generous 23px×29px pad for a large, tappable target

Grid & Container

• Centered single-column hero with a large Pretendard Bold headline and the rounded search pill as the anchor
• Content laid out as wide ~509px-width image-led article cards (19px radius) in multi-column rows
• Feature/service sections alternate white (#ffffff), cool grey (#f3f5f7), and light-blue (#f1f8ff) full-width bands
• Service product pages open on a #f1f8ff → #d3e8ff gradient hero wash

Whitespace Philosophy

• Editorial breathing room: large headlines with generous vertical rhythm; the page reads like a magazine spread, not a dense dashboard.
• Flat segmentation: sections separate by background tint (#f3f5f7 / #f1f8ff vs #ffffff) and hairlines, never by shadow.
• Color as punctuation: long monochrome passages are punctuated by #0064ff eyebrows and the occasional solid blue panel.

Border Radius Scale

• Sharp (4px): nav-item pills — precise, functional
• Card (19px): content/article cards and blue panels — the workhorse rounding
• Pill (35px): the hero search/launch pill
• Full (9999px / 100%): indicator dots

6. Depth & Elevation

Shadow Philosophy: TMAP's corporate site is a near-shadowless system. Live inspection found box-shadow: none across the hero, nav, headings, and content cards. Depth and grouping are communicated entirely through flat tinted surfaces (#f3f5f7, #f1f8ff), large 19px card radii, and thin #e2e2e2 hairlines. This is a deliberate modern-flat choice consistent with the editorial register — it keeps the brand reading as clean, fast infrastructure rather than a heavy, card-stacked app. When emphasis is needed the system reaches for the brand blue (#0064ff) or a solid blue panel (#0061fd), never elevation.

7. Do's and Don'ts

Do

• Use Pretendard for everything — headlines at weight 700, body at 400
• Keep the base monochrome: pure black (#000000) text on white (#ffffff)
• Reserve TMAP Blue (#0064ff) for eyebrows, accent links, the active-nav underline, and value panels
• Grey down supporting text along the #464646 → #585858 → #777777 ladder
• Separate sections with flat tints (#f3f5f7, #f1f8ff) and #e2e2e2 hairlines, not shadows
• Use the light-blue product atmosphere (#f1f8ff, #f1f8ff → #d3e8ff gradient) on service/product pages
• Round content cards at 19px and the search pill fully (35px); keep nav pills sharp at 4px
• Apply tight tracking on display headlines (-2% at 61px, -0.32px elsewhere)

Don't

• Use drop shadows for elevation — TMAP is a flat, shadow-free system
• Spread the brand blue across many elements — it dilutes the single-accent signal
• Introduce a second display typeface — Pretendard owns the whole system
• Use a light weight for headlines — display is always Bold (700)
• Mix in a second saturated accent color — blue is the only brand hue
• Use pure black backgrounds for whole sections — the base is white, with tints for variety
• Set display headlines with loose/positive tracking — TMAP tracks tight

8. Responsive Behavior

Breakpoints

Touch Targets

• Hero search pill at 69px height, full 35px radius — an unmistakable, generous target
• Nav items with ~23px horizontal padding for comfortable spacing
• Sub-nav row spaced for touch beneath the main nav

Collapsing Strategy

• Hero: large Pretendard Bold headline scales down on mobile, weight 700 maintained
• Article-card rows: multi-column → 2-up → single stacked column
• White / cool-grey / light-blue alternating bands maintain full-width treatment
• Service-page gradient hero (#f1f8ff → #d3e8ff) persists across breakpoints

Image Behavior

• Image-led article cards keep their 19px radius and carry no shadow at any size, consistent with the flat system
• Service-page illustrations sit on the light-blue tint without elevation

9. Agent Prompt Guide

Quick Color Reference

• Primary accent: TMAP Blue (#0064ff)
• Blue panel fill: Blue Alt (#0061fd)
• Background: Pure White (#ffffff)
• Tinted surface: Surface Cool (#f3f5f7)
• Product atmosphere: Surface Blue (#f1f8ff), gradient to (#d3e8ff)
• Heading / primary text: Ink Black (#000000)
• Body text: Body Grey (#464646)
• Muted text: Muted Grey (#585858)
• Faint text: Faint Grey (#777777)
• Hairline: #e2e2e2

Example Component Prompts

• "Create a hero on white background. Headline at 44px Pretendard weight 700, line-height 1.40, letter-spacing -0.32px, color #000000. Below it a white rounded search pill: #ffffff background, 1px solid #e2e2e2 border, 35px radius, 23px 29px padding, 16px Pretendard — 'Where to?'. No shadow."
• "Design a feature-block heading: 35px Pretendard weight 700, letter-spacing -0.32px, #000000, preceded by a blue eyebrow label in #0064ff at 23px Pretendard weight 700."
• "Build a service section on light blue: #f1f8ff background (or #f1f8ff → #d3e8ff gradient). Solid blue value panel: #0061fd background, white text, 19px radius. Article cards: white #ffffff, 19px radius, no shadow."
• "Create top nav: white header, Pretendard 15px weight 700 items in #000000, 4px radius. Active item gets #0064ff text and a 4px bottom border #0064ff."

Iteration Guide

1. Pretendard for every element; weight 700 for headlines, 400 for body
2. Brand blue (#0064ff) is the single accent — reserve it for eyebrows, links, the active-nav underline, and panels
3. No shadows — separate with #f3f5f7 / #f1f8ff tints and #e2e2e2 hairlines
4. Mixed radius: 4px nav pills, 19px cards, 35px search pill
5. Text color is #000000, greyed to #464646 / #585858 / #777777 for hierarchy
6. Tight tracking on display headlines (-2% at 61px, -0.32px elsewhere)
7. Use the light-blue atmosphere only on service/product pages, not the corporate chrome

---

10. Voice & Tone

TMAP Mobility's voice is clear, confident, and reassuring — a mobility leader that speaks plainly about getting people where they're going with the least friction. The navigation product page leads with "가장 빠르고 정확한 길안내 / 국내 1위 티맵 내비" ("The fastest, most accurate route guidance — Korea's #1 TMAP Navi"), a register that states a category-leading claim without hype. Corporate copy ("스마트한 이동 생활의 시작" / "The start of a smart mobility life") frames the brand around everyday peace of mind. The tone trusts the reader: it explains capability, not adjectives.

Voice samples (verbatim from live surfaces):

• "스마트한 이동 생활의 시작" — corporate homepage hero (mission-framed). (verified live 2026-06-17)
• "가장 빠르고 정확한 길안내 국내 1위 티맵 내비" — navigation product H1 (leadership claim). (verified live 2026-06-17)
• "가장 빠른 길을 넘어, 가장 나다운 길을 찾는 법" — homepage section H2 (beyond-speed framing). (verified live 2026-06-17)

Forbidden register: aggressive sales urgency, undefined jargon, exclamation-heavy hype, second saturated accent colors that compete with the brand blue.

11. Brand Narrative

TMAP Mobility (티맵모빌리티) was established in December 2020 as a spin-off from SK Telecom, carving the long-running TMAP navigation service — Korea's most-used driving-navigation app — into an independent mobility company. The founding premise was to evolve from a single navigation app into a comprehensive mobility platform: driving, public transit, parking, EV charging, car rental, and B2B mobility data and APIs all under one roof. The 2021 super-app rebrand introduced the current brand identity — a clean, blue-accented, Pretendard-driven system that signals infrastructure-grade trust over consumer playfulness.

The product positions itself around being the user's most accurate, most-trusted way to move. The navigation page's "국내 1위" (Korea's #1) claim rests on TMAP's scale advantage — its "압도적 운전자 데이터" (overwhelming driver-data) — which feeds route accuracy, arrival-time prediction, and safe-driving scoring (UBI). The brand frames this data not as surveillance but as the engine of better, safer guidance.

What TMAP refuses, visible in its design: the heavy, busy chrome of legacy portal-style Korean services (no shadow-stacked widgets, no rainbow of competing accents), and the gimmicky playfulness of consumer apps chasing engagement. What it embraces: a calm monochrome-on-white editorial base, a single confident brand blue, large declarative Pretendard headlines, and a soft light-blue product atmosphere that evokes open roads and sky — a company that wants to read as dependable mobility infrastructure for everyday life.

12. Principles

1. Accuracy is the product. TMAP's claim to leadership is precision — fastest, most accurate guidance from the largest driver dataset. UI implication: present data and capability plainly; let real numbers and clear feature copy carry weight, not decoration.
2. One accent, used sparingly. The brand blue (#0064ff) means "this matters." UI implication: reserve blue for eyebrows, links, the active-nav underline, and value panels; keep everything else monochrome so the accent always reads.
3. Calm over busy. Mobility infrastructure should feel steady, not frantic. UI implication: flat surfaces, no shadows, generous editorial whitespace; emphasis via color, never elevation.
4. One voice, one typeface. Pretendard carries the whole system. UI implication: build hierarchy from size and the Bold/Regular split, not from extra families or weights.
5. Friendly where it invites, precise where it functions. UI implication: round the search pill and content cards generously (35px / 19px) to feel approachable; keep nav pills sharp (4px) where precision reads as competence.

13. Personas

Personas below are fictional archetypes informed by publicly observable TMAP Mobility user segments (Korean drivers, commuters, fleet/business customers), not individual people.

김도현, 38, 서울. A daily commuter who relies on TMAP Navi for the fastest route to work and trusts its arrival-time prediction over rivals. Values that the app feels accurate and uncluttered; would be put off by a navigation UI that buried the route under ads or playful clutter.

이서연, 29, 경기. A new driver who uses TMAP's safe-driving score and insurance benefit (UBI) to build better habits. Appreciates that the brand frames driver data as helping her, explained in plain Korean rather than fine print.

박준호, 45, 부산. A logistics operations manager evaluating TMAP's B2B mobility data and APIs for fleet routing. Trusts the brand because the corporate site reads as serious infrastructure — calm, data-led, leadership-claimed — not a consumer gimmick.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and steady — consistent with the calm, infrastructure-grade aesthetic. The active-nav 4px underline slides smoothly between items; carousel/article rows advance at motion-standard / ease-enter with a quiet fade-and-rise; indicator dots cross-fade. No bounce or spring — a mobility-leadership brand signals dependability, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.