카카오 T DESIGN.md

Design System Inspiration of Kakao T (카카오 T)

Overview

Visual Theme & Atmosphere

Kakao T is the all-in-one mobility app from Kakao Mobility — taxi, designated-driver (대리운전), parking, bike, navigation, flights, and quick-delivery, all behind one yellow "T". Its visual identity sits on a knife's edge between two registers. The brand color is the famous Kakao yellow #FEE500 — the same warm, friendly, instantly-Korean yellow that KakaoTalk made a national signal — but the mobility product itself reads far more sober than that yellow alone would suggest. On the corporate Kakao Mobility surface the palette is black-and-white-dominant: deep charcoal headings, generous whitespace, restrained sans-serif type, with yellow used as a sparing accent rather than a flood. The atmosphere is "friendly infrastructure" — approachable enough that anyone hails a taxi without thinking, serious enough to be trusted with real-time location and payment.

That black-led restraint is deliberate. A mobility app is, at the moment of use, mostly a map: a near-full-screen view of streets, cars, and routes. Chrome must recede so the map and the live trip state dominate. Yellow then does precise, high-attention work — the primary "호출하기" (call) CTA, the active vehicle marker, the matched-driver highlight. Against a map and white sheets, #FEE500 is a beacon, not a wallpaper. Black (#000000 / near-black #191919) carries text and the secondary "dark" actions, giving the brand its grown-up, get-you-there-safely tone.

Typography follows Kakao's house direction — the custom Kakao typeface family (Kakao OTF / Kakao Sandoll) for branded surfaces, with Pretendard and the standard Korean system stack as the practical product-UI fallback. Type stays clean, sentence-case, and legible at a glance, because riders read it in motion: on a moving vehicle, at a curb, in one hand.

Key Characteristics:

• Kakao yellow #FEE500 as the brand color and high-attention CTA accent (not a flood)
• Black / near-black (#000000 / #191919) leading text and "dark" actions — the grown-up half of the palette
• Map-first: chrome recedes so the live map and trip state dominate
• Kakao house typeface for brand surfaces; Pretendard / Korean system stack for product UI
• Friendly-but-trustworthy "mobility infrastructure" tone, not playful-cute
• Rounded, soft component geometry (8–12px radii) keeping the yellow approachable
• Bottom-sheet-driven flows over a persistent map canvas

Primary tasks

• Type a destination into the search field to start a trip
• Pick which class of vehicle to call from the sheet
• Check a trip's ETA, fare, and status at a glance
• Pay for the ride automatically instead of fumbling for cash
• Share your route and the driver's details on a late-night ride

Brand Narrative

Kakao T (카카오 T) is the mobility super-app of Kakao Mobility Corp., the transportation arm of the Kakao group. It launched in 2017 — the "T" stands for transportation — consolidating what had been separate Kakao services (Kakao Taxi from 2015, Kakao Driver, Kakao Parking) into one app. Today it spans taxi, designated-driver (대리운전), parking, bike, navigation, flights, and quick-delivery: the single yellow icon Koreans tap to get from anywhere to anywhere.

The brand inherits Kakao's most powerful asset — the yellow. KakaoTalk made #FEE500 a national signal of "the friendly app everyone uses," and Kakao T trades on that familiarity to make hailing a taxi feel as ordinary as sending a message. But mobility carries higher stakes than chat — real-time location, payment, a stranger's car — so the product dials the playfulness down: the corporate and product surfaces are black-led and sober, with yellow reserved for the moments that matter (the call button, the matched car). The design thesis is friendly infrastructure: approachable enough to use without thinking, serious enough to trust with your route home.

What Kakao T refuses: the loud, gamified maximalism of some consumer apps (the map and trip state must stay legible), and the cold, utilitarian gray of legacy transit interfaces. It occupies the warm middle — yellow when it counts, calm everywhere else.

Principles

1. The map is the product. At the moment of use the app is mostly a live map; chrome must recede. UI implication: trip state lives in a bottom sheet over a full-bleed map, not in stacked full-screen pages.
2. Yellow is a beacon, not a wallpaper. #FEE500 marks the single most important action and the live state. UI implication: one yellow CTA per screen; backgrounds stay white/black; black text on yellow for contrast.
3. Black is the grown-up half. The sober black-led palette is what lets a playful yellow be trusted with location and payment. UI implication: strong non-yellow actions and all body text use #191919.
4. Glance, don't read. Riders use the app in motion. UI implication: trip-critical info (ETA, fare, status) is the highest-contrast, largest text; everything else recedes.
5. State over navigation. Each trip step grows the sheet rather than pushing a new page. UI implication: model flows as sheet heights and live status, not screen stacks.
6. Reassure, don't pressure. Mobility copy is calm status, never urgency marketing. UI implication: present-progressive 해요체 status lines; no exclamation pressure on CTAs.

Personas

Personas are fictional archetypes informed by publicly described Korean mobility-app user segments, not individual people.

진우 (Jin-woo), 33, Seoul. Office worker who takes a Kakao T taxi home after late nights. Wants one tap to call, a clear ETA, and auto-payment so he never fumbles cash. Trusts the matched-driver screen and the live map; ignores everything else.

박부장 (Mr. Park), 49, Seongnam. Frequent business traveler. Uses 모범/벤티 classes and 예약 for airport runs, and 대리운전 after dinners. Values reliability and a clear fare estimate over playfulness — the sober black UI is exactly why he trusts it.

소연 (So-yeon), 26, Busan. Mixes bike, taxi, and navigation depending on the trip. Hails late at night and relies on the 안심 (safety) features — sharing her route, the driver info. Reads the status line at a glance, on the move, one-handed.

Colors

Kakao Mobility does not publish a public UI token layer. Brand yellow #FEE500 is the well-documented Kakao corporate color; product UI grays/blacks below follow the live black-led corporate surface (kakaomobility.com, WebFetch 2026-05-27) and standard Korean app conventions. Treat product hexes as conventional, not from a documented token doc.

Brand

• Kakao Yellow (#FEE500): The signature color. Primary CTA (호출하기), active vehicle marker, matched-driver highlight, logo lockup. High-attention accent — used sparingly, never as a full background flood.
• Kakao Yellow Pressed (#F2D900): Slightly deeper yellow for pressed/hover on the primary CTA.

Text / Dark

• Kakao Black (#000000): Logo "T", strongest brand text, "dark" primary action backgrounds.
• Near Black (#191919): Primary headings and labels — the warm near-black of the corporate surface.
• Text Strong (#26282B): Strong body labels, list titles.
• Text Body (#4B4F54): Body text, descriptions, trip metadata.
• Text Secondary (#76787A): Secondary labels, captions, timestamps.
• Text Tertiary (#A2A4A6): Placeholder, disabled labels, low-emphasis fine print.

Surfaces

• Pure White (#FFFFFF): Bottom sheets, cards, the chrome over the map.
• Surface Gray (#F5F6F7): Section backgrounds, inactive segmented backgrounds, skeleton blocks.
• Surface Gray Strong (#EBECED): Dividers' surface variant, secondary fills.

Borders

• Divider (#E5E6E8): Hairline row separators, card borders.
• Border Strong (#D1D3D5): Active input outlines, emphasized edges.

Semantic

• Success (#0FB882): Trip-complete, payment-confirmed, on-the-way green.
• Info / In-progress (#3478F6): En-route status, ETA accent, map route line.
• Warning (#FF8A00): Surge / wait advisories, attention states.
• Error (#F5444C): Cancellation, payment failure, destructive actions.

Typography

Font Family

• Brand: "Kakao", "Kakao OTF", ... — the Kakao house typeface for branded / marketing surfaces
• Product UI: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif
• Monospace: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace (fare/ETA tabular contexts)

Hierarchy

Conventions

• Three weights: 700 for headings + fares, 600 for CTAs/emphasis, 400 for body.
• Tabular numerals for money + time: fares, ETAs, distances use fixed-width digits so they don't jitter as they update live.
• Sentence-case, no all-caps: Korean and Latin both stay sentence-case — riders read in motion.
• Glanceable hierarchy: trip state (ETA, fare, status) is always the highest-contrast text on screen.

Layout

Spacing System

• Base unit: 8px
• Common values: 4, 8, 12, 16, 20, 24, 32
• Sheet padding: 20px; map chrome insets: 16px

Grid & Container

• Map-canvas-first: a near-full-screen map with a draggable bottom sheet over it
• Sheet content: single-column, full-width with 20px h-padding
• Marketing/web: centered column, max ~1200px

Whitespace Philosophy

• The map is the page. Chrome recedes; the live map and trip state get the screen.
• Sheet states stack. Each trip step (destination → vehicle → matching → en-route) is its own sheet height; the sheet grows/shrinks rather than navigating pages.
• Glance density. Trip-critical info (ETA, fare, status) is large and high-contrast; everything else recedes.

Border Radius Scale

• Compact (8px): chips' inner, small controls
• Comfortable (12px): buttons, inputs, vehicle cards
• Large (16px): trip/receipt cards
• Sheet (20px): bottom-sheet top corners
• Pill (999px): status chips, handle

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA: ~52px tall
• Vehicle-class rows: minimum 56px
• Floating map controls: 44–48px circular targets
• Sheet handle: large drag affordance

Collapsing Strategy

• The bottom sheet is the responsive unit — it expands to fill on small screens, becomes a fixed side panel on large
• Map stays full-bleed behind the sheet at all sizes

Image / Map Behavior

• Map tiles full-bleed; vehicle markers scale with zoom
• Vehicle-class icons: consistent 40–48px, yellow accent on selected

Elevation & Depth

Shadow philosophy. Elevation matters most where chrome floats over the map — the bottom sheet and floating map controls cast soft, neutral, single-layer shadows so they read as "above the map." On flat white surfaces, depth is border-defined to keep the look calm. No colored shadows.

Values kept in prose

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

• shadow.card: 0px 2px 12px rgba(0,0,0,0.08)
• shadow.sheet: 0px -4px 16px rgba(0,0,0,0.10)
• shadow.floating: 0px 4px 16px rgba(0,0,0,0.16)

Motion & Easing

Kakao T's motion is purposeful and reassuring — the sheet glides, the map pans smoothly, and live status updates feel calm rather than jumpy.

Durations:

Easings:

Spring stance. Spring/overshoot is avoided on trip surfaces — bouncy motion would undercut the reassurance a mobility app needs. A gentle settle, not a bounce.

Signature motions.

1. Sheet step transition. As the trip advances (destination → vehicle → matching → en-route), the bottom sheet animates its height with motion-sheet / ease-emphasized while content cross-fades. The sheet grows, it never navigates.
2. Driver-matching radar. While matching, a yellow #FEE500 radar/ring pulses outward from the pickup pin over the map — the one place the brand yellow becomes kinetic, signaling "we're finding your car."
3. Map fly-to. On pickup/destination set, the map pans-and-zooms over motion-slow / ease-emphasized to frame the route.
4. Reduce motion. Under prefers-reduced-motion: reduce, the radar becomes a static indicator, sheet transitions become instant opacity changes, and map fly-to snaps. No exceptions.

Components

Kakao Mobility publishes no public component spec; geometry below reflects the live corporate surface and standard Kakao/Korean app conventions. Treat as conventional.

Buttons

Primary (호출 / Yellow)

• Background: #FEE500
• Text: #191919
• Border: none
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Pressed: background #F2D900
• Disabled: background #F5F6F7, text #A2A4A6
• Use: The primary call-to-action — 호출하기, 결제하기. Black text on yellow for contrast. ~52px tall.

Dark (Secondary primary)

• Background: #191919
• Text: #FFFFFF
• Border: none
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Use: Strong action where yellow would be too loud (로그인, 다음). The grown-up half of the palette.

Outline / Ghost

• Background: #FFFFFF
• Text: #26282B
• Border: 1px solid #D1D3D5
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Use: Secondary action paired with a primary (취소, 다른 차량 보기)

Danger

• Background: #FFFFFF
• Text: #F5444C
• Border: 1px solid #F5444C
• Radius: 12px
• Padding: 14px 20px
• Font: 16px / 600 / Pretendard
• Use: Destructive (호출 취소)

Inputs

Search / Address Field

• Background: #F5F6F7
• Text: #26282B
• Border: none (filled)
• Radius: 12px
• Padding: 14px 16px
• Font: 16px / 400 / Pretendard
• Placeholder: #A2A4A6
• Focus: 1px border #191919
• Use: "어디로 갈까요?" destination search — the entry point of every trip

Error

• Background: #FFFFFF
• Text: #26282B
• Border: 1px solid #F5444C
• Radius: 12px
• Padding: 14px 16px
• Font: 16px / 400 / Pretendard
• Use: Invalid input, paired with #F5444C caption

Cards

Vehicle-Class Card

• Background: #FFFFFF
• Border: 1px solid #E5E6E8
• Radius: 12px
• Padding: 16px
• Shadow: none (border-defined)
• Selected: 2px border #191919 + subtle #FEE500 accent on the class icon
• Use: 일반 / 블루 / 모범 / 벤티 selection rows in the call sheet

Trip / Receipt Card

• Background: #FFFFFF
• Border: none
• Radius: 16px
• Padding: 20px
• Shadow: 0px 2px 12px rgba(0,0,0,0.08)
• Use: Active-trip summary, ride receipt — fare 24px/700 tabular

Badges / Chips

Status Chip

• Background: #F5F6F7
• Text: #4B4F54
• Border: none
• Radius: 999px
• Padding: 4px 12px
• Font: 12px / 600 / Pretendard
• Use: Filter chips, vehicle tags (예약, 추천)

Live Status Badge

• Background: rgba(15,184,130,0.12) (success) / rgba(52,120,246,0.12) (en-route)
• Text: #0FB882 / #3478F6
• Border: none
• Radius: 999px
• Padding: 4px 10px
• Font: 12px / 700 / Pretendard
• Use: 도착 / 운행 중 status pill on the trip card

Bottom Sheet (signature surface)

Trip Sheet

• Background: #FFFFFF
• Text: #191919
• Border: none
• Radius: 20px (top corners only)
• Padding: 20px
• Shadow: 0px -4px 16px rgba(0,0,0,0.10)
• Handle: 36px × 4px #E5E6E8 pill, centered top
• Use: The persistent sheet riding over the map — destination, vehicle pick, matched-driver, en-route ETA. The core mobility interaction surface.

Tabs / Nav

Bottom Tab (Active)

• Background: #FFFFFF
• Active text/icon: #191919
• Inactive: #A2A4A6
• Border: 1px solid #E5E6E8 (top only)
• Font: 11px / 500 / Pretendard
• Use: 홈 / 이용내역 / 결제 / 전체 navigation

Toasts

Snackbar

• Background: #26282B
• Text: #FFFFFF
• Border: none
• Radius: 12px
• Padding: 12px 16px
• Shadow: 0px 4px 12px rgba(0,0,0,0.16)
• Font: 14px / 500 / Pretendard
• Use: "호출이 취소되었어요" transient feedback, 3s auto-dismiss

---

Verified: 2026-05-27 Tier 1 sources: https://kakaomobility.com (live WebFetch 2026-05-27 — black-dominant corporate surface, generous whitespace, minimal text-link CTAs 자세히 보기, Korean hero 우리의 기술로 생활을 움직입니다, yellow #FEE500 notably reserved/sparing on the corporate page). Kakao yellow #FEE500 is the widely-documented Kakao corporate brand color. Tier 2 sources: getdesign.md/kakaot — not checked. styles.refero.design — not checked. Kakao house typeface (Kakao OTF / Sandoll) referenced from SandollCloud listing; product-UI Pretendard fallback is a convention, not a verified token. Conflicts unresolved: Brand yellow #FEE500 (high-attention accent) vs. black-led product/corporate surface — resolved as a documented two-register palette (yellow = beacon CTA, black = body + dark actions), consistent with the live corporate page where yellow is sparing.

States

Do's and Don'ts

Do

• Use #FEE500 for the single primary CTA and live active markers — high-attention, sparing
• Put black #191919 text on yellow buttons for contrast (never white on yellow)
• Let the map dominate; keep chrome to the bottom sheet and minimal top controls
• Use tabular numerals for fares, ETAs, and distances
• Use the dark #191919 button for strong actions where yellow would be too loud

Don't

• Don't flood backgrounds with yellow — it's a beacon, not a wallpaper
• Don't use white text on the yellow CTA (fails contrast; black is correct)
• Don't crowd the map with chrome — trip state lives in the sheet
• Don't introduce a second saturated brand hue competing with yellow
• Don't make the tone cute/playful — mobility is friendly infrastructure, trusted with location + payment

Voice & Tone

Kakao T speaks like a calm, capable dispatcher who's already on it — friendly, brief, and reassuring, never chatty. The default register is soft-polite 해요체 (잠시만 기다려 주세요, 기사님을 찾고 있어요), warm but trustworthy. Korean is the unquestioned primary voice. Copy is action-and-status-oriented because the user is mid-task and often in motion: tell them what's happening and what's next in as few words as possible. No exclamation-mark pressure, no marketing superlatives on trip surfaces.

Forbidden phrases. 오류가 발생했습니다 (generic error), exclamation-as-pressure on CTAs, marketing superlatives (최고의, 역대급) on trip chrome, English-first strings on Korean surfaces, emoji on system-generated trip toasts.

Voice samples.

• 우리의 기술로 생활을 움직입니다 — corporate mission line.
• 자세히 보기 — corporate CTA pattern.
• 기사님을 찾고 있어요 — illustrative matching-status copy.
• 차량이 도착했어요 — illustrative arrival notification.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Kakao Yellow #FEE500, black #191919 text (pressed #F2D900)
• Dark action: #191919 bg, white text
• Heading: #191919; body #4B4F54; secondary #76787A
• Surface: white #FFFFFF; gray #F5F6F7; divider #E5E6E8
• En-route: #3478F6; success #0FB882; error #F5444C

Example Component Prompts

• "Build a Kakao T call button: bg #FEE500, text #191919 16px/600, 12px radius, 14px 20px padding, ~52px tall, full-width. Pressed: bg #F2D900. Disabled: bg #F5F6F7, text #A2A4A6."
• "Create a Kakao T trip bottom sheet: white bg, 20px top-corner radius, 0px -4px 16px rgba(0,0,0,0.10) shadow, 36×4px #E5E6E8 handle centered top. Inside: matched-driver name 18px/600, ETA 24px/700 tabular, fare 24px/700 tabular, status pill 운행 중 in #3478F6 on rgba(52,120,246,0.12)."
• "Design a vehicle-class card: white bg, 1px #E5E6E8 border, 12px radius, 16px padding. Selected: 2px #191919 border + yellow accent on the class icon. Class name 16px/600 #26282B, est. fare 14px/400 #76787A tabular."
• "Create a destination search field: bg #F5F6F7, no border, 12px radius, 14px 16px padding, 16px/400 text, placeholder 어디로 갈까요? in #A2A4A6."

Iteration Guide

1. Yellow #FEE500 = primary CTA + live markers only; black text on it
2. Map dominates; chrome lives in the bottom sheet
3. Pretendard product stack with Korean fallbacks
4. Fares/ETAs/distances = tabular numerals, high contrast
5. Radius: 12px buttons/cards, 16px trip cards, 20px sheet
6. Dark #191919 button for strong non-yellow actions

---

Governance

Known Gaps

• Contrast, button-danger. Text #f5444c on #ffffff measures 3.61:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-live. Text #0fb882 on #0fb8821f measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, tab-bottom. Text #a2a4a6 on #ffffff measures 2.50:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.