타다 DESIGN.md

Design System Inspiration of TADA (타다)

Overview

Visual Theme & Atmosphere

TADA is the Korean mobility brand that built its identity around a single, calming idea: that getting in a car should feel like a small relief, not a transaction. Its visual signature is a fresh mint-teal (#1ec59f) -- a color almost no incumbent transport service used, chosen the way Toss chose cerulean: to be not the aggressive yellow of a taxi nor the corporate navy of a logistics firm, but something that reads as clean, modern, and quietly premium. The mint is the brand. It anchors the wordmark, the primary "차량 호출" CTA, the active map pin, and the trip-in-progress state, against generous white space and a calm near-black type system.

The atmosphere TADA cultivates is space. The product's original differentiator was the roomy van interior, and the design language echoes that physical promise: airy layouts, soft rounded corners, comfortable type, and minimal chrome so the map and the single next action dominate. A ride-hailing app lives or dies on one-glance clarity -- where is my car, how long until it arrives, what do I tap next -- so TADA's screens resolve to one primary action at a time, the mint CTA pinned to a thumb-reachable bottom bar over a clean map canvas. The brand voice is reassuring and unhurried: the trip is handled, you can relax.

What defines TADA visually is the discipline of one signature hue against neutral calm. The mint is interaction and brand; everything else is white, soft gray surfaces, and a warm near-black for text. The result feels closer to a wellness or fintech app than to a legacy transport service -- a deliberate repositioning of "calling a car" from a stressful errand into a moment of ease.

Key Characteristics:

• TADA Mint (#1ec59f) as the signature brand + primary interactive color
• Calm near-black type on white, with soft gray surface fills
• Pretendard / system sans stack for Korean-Latin co-equal rendering
• Map-first, one-action-per-screen layouts — the mint CTA on a thumb-reachable bottom bar
• Soft rounded corners (8-16px) — airy, reassuring, never sharp or aggressive
• Generous whitespace echoing the brand's roomy-interior physical promise
• Minimal shadow — calm comes from clarity, not depth
• Reassuring, unhurried voice — "the trip is handled"

Primary tasks

• Enter a destination on the home screen
• Choose a vehicle type and compare its fare estimate
• Confirm the fare and call a car with one tap
• Track where the car is until it arrives
• Book an airport transfer the night before a flight

Brand Narrative

TADA (타다) launched on October 8, 2018, built by VCNC — a startup best known for the couples app Between, which was acquired by car-sharing company SOCAR and redirected at mobility (namu.wiki — 타다(서비스), ko.wikipedia.org — 타다 플랫폼). Its original product — roomy 11-seat vans summoned on demand with a driver — was a deliberate repositioning of "calling a car" away from the stress of hailing a taxi toward something clean, spacious, and premium. The mint-teal brand color, the airy interface, and the reassuring voice all served that single promise: better movement, better living.

TADA's early trajectory is also a famous chapter in Korean tech-regulation history — its rapid growth collided with the taxi industry and led to the so-called "타다 금지법," forcing a pivot of the original van service. The brand survived and continued under the VCNC / SOCAR umbrella, evolving into a franchise-based premium-taxi and reservation-mobility platform (airport transfers, premium taxi, business shuttles) while keeping the calm, space-forward design identity (thevc.kr — VCNC, mydailybyte.com — about TADA).

What TADA refuses: the aggressive yellow-and-meter aesthetic of legacy taxis, the surge-shaming red urgency of some global ride apps, and chrome-heavy interfaces that bury the map. Its design treats the act of moving through the city as something that can feel calm — a roomy seat, a clear ETA, one mint button, and the quiet confidence that the trip is handled.

Note on color: the current public marketing site (tadatada.com) leans on a deep navy (#19254d) as its contrast field, reflecting the post-relaunch premium-taxi positioning. The mint-teal documented here as primary_color is TADA's signature brand identity established at launch and associated with the brand across its app and marketing; the navy is retained as the dark marketing surface (§2 Semantic / Info Navy).

Principles

1. Space is the brand. TADA's physical promise was room; the UI echoes it with airy layouts and generous padding. UI implication: never compress cards or the action bar to fit more — the breathing room is the brand signal.
2. One mint, one action. The mint marks the single next thing to tap; each screen resolves to one primary action. UI implication: two primary buttons on a screen means it's two screens; mint never decorates.
3. The map dominates, chrome floats. A mobility app is judged on one-glance clarity. UI implication: controls float as cards / a bottom sheet over a full-bleed map; chrome stays minimal.
4. Calm over urgency. The brand sells ease, not pressure. UI implication: no surge-shaming red, no hype; status copy is reassuring and present-tense.
5. Numbers are typography. ETA and fare are the most-glanced data. UI implication: render them at 700 weight with tabular numerals so they stay stable as they update.
6. Soft corners signal calm. 12-16px radii throughout. UI implication: sharp 0-4px corners read as transactional / aggressive and should be softened.

Personas

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

수민 (Sumin), 34, Seoul. Consultant who takes late client meetings in 강남. Calls TADA when she wants a clean, predictable ride home without the variability of hailing a taxi. Glances at the ETA and fare, taps the mint button once, and relaxes. Values that the app never makes her think.

준호 (Junho), 41, Seoul. Frequent flyer, books TADA airport transfers the night before a 6am flight. Needs the reservation flow to be unambiguous — pickup time, vehicle, fare locked in. Distrusts surge pricing; appreciates that TADA shows an exact estimate, not a vague range.

예린 (Yerin), 29, Seongnam. Marketing manager who uses TADA Business for client pickups. Treats the calm interface as a reflection of professionalism — a chaotic app would embarrass her in front of a client in the back seat.

민철 (Mincheol), 52, Seoul. Less app-fluent; his daughter set up TADA for him. Relies on the single large mint CTA and the clear "곧 도착해요" status. Would abandon a screen that asked him to make more than one decision at a time.

Colors

Primary

• TADA Mint (#1ec59f): The signature brand color and primary interactive accent — wordmark, "호출하기" CTA, active map pin, trip-in-progress, links.
• Mint Pressed (#17a384): Pressed / hover state for mint CTAs.
• Mint Light (#e6f8f3): Subtle mint-tinted informational backgrounds, selected-state fills.
• Pure White (#ffffff): Page / map canvas, card surfaces, button text on mint.
• Calm Near-Black (#1a1a1a): Primary heading and strong text. Warm dark, softer than pure black.

Neutral Scale

• Gray 800 (#333333): Strong labels, navigation text.
• Gray 700 (#555555): Emphasized body text.
• Gray 600 (#777777): Body text, descriptions, ETA secondary labels.
• Gray 500 (#999999): Caption text, secondary metadata.
• Gray 400 (#bbbbbb): Placeholder text, disabled icons.
• Gray 200 (#e5e5e5): Default border, dividers, input outlines.
• Gray 100 (#f2f2f2): Secondary background, card fill, disabled surface.
• Gray 50 (#f7f7f7): Lightest surface fill.

Semantic

• Success Mint (#1ec59f): Trip-confirmed / arrived-state — the brand color doubles as success.
• Error Red (#ff4452): Error states, cancellation, destructive actions.
• Warning Amber (#ff9f1c): Surge / wait-time warnings, pending states.
• Info Navy (#19254d): Dark marketing / brand surface (current marketing site uses this deep navy as a contrast field; see footer note).

Surface & Overlays

• Map Scrim: rgba(0,0,0,0.3). Gradient veil for legibility of controls over the map.
• Bottom Sheet Surface: #ffffff. Trip detail, vehicle selection.

Typography

Font Family

• Primary: "Pretendard", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif
• Design Principle: No bespoke wordmark webfont on product surfaces. The system relies on Pretendard's clean geometric Korean glyphs and a warm near-black for a calm, modern read. Korean and Latin render co-equally. Map labels and ETA numbers favor tabular figures for stable alignment.

Hierarchy

Principles

• Calm warm dark: Headings and body use warm near-black #1a1a1a for a reassuring rather than clinical read.
• Numbers are typography: ETA minutes and fares use 700 weight with tabular numerals — they're the most-glanced data and must align stably as they update.
• Three weights: 400 (body), 600 (titles), 700 (headings / numbers). Light is avoided on Korean glyphs.
• One-glance hierarchy: On the map screen, the next action and the ETA are the two largest elements; everything else recedes.
• Tight Korean tracking: -0.2px to -0.4px letter-spacing for clean compactness.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px
• Global gutter (mobile): 16-20px each side
• Bottom action bar: 16px inset + safe-area
• Card internal padding: 16-20px (generous, echoing the roomy-interior promise)

Grid & Container

• Mobile-first, single-column over a full-bleed map canvas
• The map fills the screen; controls float as cards / bottom sheet
• Detail / history: single-column list, 16px gutter
• Marketing web (tadatada.com): full-width sections, centered content, navy contrast fields

Whitespace Philosophy

• Space is the product: TADA's physical differentiator was room; the UI echoes it with airy layouts and generous card padding.
• One action, lots of air: The primary CTA sits alone at the bottom with breathing room around it — no competing buttons.
• Map dominates: Chrome is minimal so the map and the next action own the screen.

Border Radius Scale

• Subtle (8px): Badges, small tags
• Comfortable (12px): Buttons, inputs, receipt cards
• Soft (16px): Vehicle cards, trip cards, bottom-sheet top corners
• Note: TADA is a soft-corner system — sharpness reads as aggressive / transactional, the opposite of the calm brand.

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA: ~52-56px height
• Vehicle cards: minimum 64px tap height
• Bottom tab items: 56px height
• Map pins / floating controls: large, thumb-friendly

Collapsing Strategy

• Bottom sheet → centered modal on larger screens
• Sticky bottom CTA bar with safe-area insets on all devices
• Map stays full-bleed; controls reflow into a side panel on tablet+

Image Behavior

• Vehicle illustrations: clean line/flat art, consistent sizing
• Driver photos: circular, 40-48px on the trip card
• Map tiles: full-bleed, controls layered above with scrim where needed

Elevation & Depth

Shadow Philosophy: TADA keeps shadows soft and neutral. The calm of a mobility app comes from clarity — knowing where your car is — not from dramatic depth. Floating controls over the map get just enough shadow to detach from the map texture. No brand-tinted shadows; the mint lives in fills and borders, not in elevation.

Values kept in prose

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

• shadow.subtle: 0px 1px 3px rgba(0,0,0,0.06)
• shadow.standard: 0px 2px 8px rgba(0,0,0,0.08)
• shadow.floating: 0px 4px 16px rgba(0,0,0,0.12)

Motion & Easing

Durations (named, not raw milliseconds):

Easings:

Signature motions.

1. Matching pulse. While finding a driver, a soft mint ring pulses outward from the user's map pin on motion-pulse loop — calm, breathing, never frantic. The opposite of a frantic loading spinner.
2. Trip-card rise. When a driver is assigned, the trip card rises from the bottom (motion-slow / ease-gentle-spring) with a gentle settle — the one place spring is licensed, signalling reassurance that the trip is handled.
3. ETA tick. When the ETA updates, the old number fades out and the new slides up 8px (motion-fast / ease-enter). Never cross-fade a number — a flickering ETA reads as a bug.
4. Bottom-sheet presentation. Sheets rise from y+40px (motion-standard / ease-enter) with a synchronized backdrop fade rgba(0,0,0,0) → rgba(0,0,0,0.3). Dismissal motion-fast / ease-exit.
5. Reduce motion. Under prefers-reduced-motion: reduce, the matching pulse becomes a static ring, all motion-* collapse to motion-instant, cross-fades replace slides. The app stays fully usable.

---

Verified: 2026-05-27 (omd:add-reference initial create — Tier 1 marketing-site inspect / Tier 2 press confirmed) Tier 1 sources: https://www.tadatada.com (live playwright inspect — body #000 on #fff, Pretendard/system sans; dominant marketing field navy #19254d; light-blue accent #80caff). Note: live marketing site is navy-led, not mint-led. Tier 2 sources: getdesign.md/tada — not checked. styles.refero.design — not checked. Namu Wiki + Korean Wikipedia + THE VC + mydailybyte (2018 launch, VCNC/SOCAR, 타다 금지법 regulatory pivot, premium-mobility repositioning). Style ref: toss (KR calm product-tone scaffolding). Conflicts unresolved: Assumed primary mint #1ec59f is TADA's signature brand identity but the CURRENT marketing site is navy-led (#19254d). Documented mint as primary_color (brand identity) with navy retained as the dark marketing surface. The exact mint hex is the assumed brand value, NOT re-confirmed by live token grab on the current site. Native app not web-inspectable; §4 component geometry reconciled from brand posture + mobility-UX conventions. Re-verify against the live app or an official DS.

Components

Buttons

Primary (TADA Mint)

• Background: #1ec59f
• Text: #ffffff
• Border: none
• Radius: 12px
• Padding: 16px 20px
• Font: 16px / 700 / Pretendard
• Hover: #17a384
• Pressed: #149378
• Disabled: #bbbbbb background, #ffffff text
• Use: Primary CTA — 호출하기, 이대로 호출, 결제하기. The thumb-reachable bottom action.

Dark (Navy Solid)

• Background: #19254d
• Text: #ffffff
• Border: none
• Radius: 12px
• Padding: 16px 20px
• Font: 16px / 700 / Pretendard
• Use: Marketing-surface CTA / strong action where mint would feel too soft (회원가입 없이 바로 타다 부르기 on the marketing site).

Outline (Mint Border)

• Background: #ffffff
• Text: #1ec59f
• Border: 1px solid #1ec59f
• Radius: 12px
• Padding: 16px 20px
• Font: 16px / 600 / Pretendard
• Hover: #e6f8f3 background
• Use: Secondary CTA — 예약하기, 경로 변경

Neutral (Gray Fill)

• Background: #f2f2f2
• Text: #333333
• Border: none
• Radius: 12px
• Padding: 14px 16px
• Font: 14px / 500 / Pretendard
• Hover: #e5e5e5 background
• Use: Tertiary actions — cancel, edit, more options

Danger (Red)

• Background: #ff4452
• Text: #ffffff
• Border: none
• Radius: 12px
• Padding: 16px 20px
• Font: 16px / 700 / Pretendard
• Use: Destructive confirm — 호출 취소

Inputs

Default

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #e5e5e5
• Radius: 12px
• Padding: 14px 16px
• Font: 16px / 400 / Pretendard
• Placeholder: #bbbbbb
• Focus: 1px solid #1ec59f
• Use: Default text input — phone, payment, settings forms

Destination Search

• Background: #f2f2f2
• Text: #1a1a1a
• Border: none
• Radius: 12px
• Padding: 14px 16px 14px 44px (left-pad for inline location icon)
• Font: 16px / 400 / Pretendard
• Placeholder: #999999 ("어디로 갈까요?")
• Focus: #ffffff background, 1px solid #1ec59f border
• Use: The signature destination-entry field at the top of the home screen

Error

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #ff4452
• Radius: 12px
• Padding: 14px 16px
• Font: 16px / 400 / Pretendard
• Use: Form validation failure — helper text 13px/400 #ff4452 below

Cards

Vehicle Option Card

• Background: #ffffff
• Border: 1px solid #e5e5e5
• Radius: 16px
• Padding: 16px
• Shadow: none (selected gets mint border + #e6f8f3 fill)
• Selected: 1.5px solid #1ec59f, #e6f8f3 background
• Use: Vehicle type selection (타다 라이트 / 플러스 / 넥스트) with fare estimate

Trip Card

• Background: #ffffff
• Border: none
• Radius: 16px
• Padding: 20px
• Shadow: 0px 2px 8px rgba(0,0,0,0.08)
• Use: Active-trip summary, driver + vehicle + ETA on the map screen

Receipt Card

• Background: #ffffff
• Border: 1px solid #e5e5e5
• Radius: 12px
• Padding: 16px
• Use: Trip history / fare breakdown

Badges

Status (Mint)

• Background: #e6f8f3
• Text: #149378
• Border: none
• Radius: 8px
• Padding: 4px 8px
• Font: 12px / 700 / Pretendard
• Use: "배차 완료", "운행 중" status

Promotion (Amber)

• Background: #fff3e0
• Text: #cc7a00
• Border: none
• Radius: 8px
• Padding: 4px 8px
• Font: 12px / 700 / Pretendard
• Use: Surge / wait-time notice, scarce promotional flag

Neutral

• Background: #f2f2f2
• Text: #555555
• Border: none
• Radius: 8px
• Padding: 4px 8px
• Font: 12px / 700 / Pretendard
• Use: Metadata tag, vehicle-feature label

Map Controls

Floating Pin

• Color: #1ec59f (origin/active) / #1a1a1a (destination)
• Use: Map markers — the active/origin pin carries the mint

Bottom Action Bar

• Background: #ffffff
• Border: 1px top #e5e5e5 (or shadow 0px -2px 12px rgba(0,0,0,0.08))
• Radius: 16px (top corners) when raised as a sheet
• Use: Sticky container for the primary mint CTA + fare/ETA summary

Navigation

• Top bar: transparent over map or #ffffff, ~56px, back/menu icon left, profile right.
• Bottom tab bar (mobile): 홈, 이용 내역, 더보기. Active label #1ec59f / icon filled, inactive #999999. Mint marks the active tab.

States

Do's and Don'ts

Do

• Use TADA Mint (#1ec59f) for the primary CTA, active pin, and trip-in-progress state
• Keep warm near-black #1a1a1a for headings and body
• Pin the single mint CTA to a thumb-reachable bottom action bar over the map
• Use tabular numerals at 700 weight for ETA minutes and fares
• Keep corners soft (12-16px) — the brand is calm, not aggressive
• Give cards and the action bar generous padding — echo the roomy interior
• Use #e6f8f3 mint-light for selected vehicle cards and informational fills

Don't

• Don't use the mint as decoration — reserve it for interactive / brand / active states
• Don't put two primary buttons on one screen — one action at a time
• Don't sharpen corners to 0-4px — soft corners are the calm brand signal
• Don't crowd the map with chrome — controls float, the map dominates
• Don't use heavy or tinted shadows — calm comes from clarity, not depth
• Don't use red for anything but errors / cancellation
• Don't shout in copy — the voice is reassuring and unhurried

Voice & Tone

TADA speaks like a calm, reliable driver who has everything handled — reassuring, unhurried, never salesy. The voice exists to reduce the small anxieties of getting somewhere: where is the car, how long, what's the fare. Korean copy uses warm, clear endings (-요, -해요) and direct imperatives (호출하기, 타러 가기) over institutional -ㅂ니다. The brand's whole thesis is captured in its positioning that better movement makes for better living — that a ride should feel like ease, not a chore.

Forbidden phrases. 지금 안 부르면 손해, 초특가 호출!!!, 데이터가 없습니다, 오류가 발생했습니다, 불편을 드려 죄송합니다, vague fare approximations (약 ~원) on the confirm screen. The brand sells calm; urgency and hype are off-brand. Emoji avoided in trip-status and fare contexts.

Voice samples.

• 회원가입 없이 바로 타다 부르기 — frictionless-entry CTA on the marketing site.
• 어디로 갈까요? — destination-field placeholder, the home-screen greeting.
• 기사님이 배차되었어요 — driver-assigned status.
• 곧 도착해요 — arrival-imminent status.
• 호출하기 — primary call-a-car CTA.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: TADA Mint (#1ec59f)
• CTA Pressed: Mint Dark (#17a384)
• Background: Pure White (#ffffff)
• Surface fill: Gray 100 (#f2f2f2)
• Heading text: Calm Near-Black (#1a1a1a)
• Body text: Gray 600 (#777777)
• Caption: Gray 500 (#999999)
• Placeholder: Gray 400 (#bbbbbb)
• Border: Gray 200 (#e5e5e5)
• Mint light (selected/info): (#e6f8f3)
• Error: Red (#ff4452)
• Marketing dark field: Navy (#19254d)

Example Component Prompts

• "Create a TADA destination search field: #f2f2f2 bg, no border, 12px radius, 14px 16px 14px 44px padding (left location icon), placeholder '어디로 갈까요?' in 16px/400 #999999. Focus: #ffffff bg, 1px solid #1ec59f."
• "Build a primary CTA: #1ec59f bg, white text, 16px weight 700 Pretendard, padding 16px 20px, 12px radius, full-width, pinned to bottom action bar. Pressed #17a384. Label '호출하기'."
• "Design a vehicle option card: white bg, 1px #e5e5e5 border, 16px radius, 16px padding. Title 16px/600 #1a1a1a, fare estimate 16px/700 tabular #1a1a1a right-aligned. Selected: 1.5px #1ec59f border, #e6f8f3 fill."
• "Create a trip card over the map: white bg, no border, 16px radius, 20px padding, 0px 2px 8px rgba(0,0,0,0.08) shadow. Driver circular photo 44px, ETA in 22px/700 tabular #1a1a1a, status badge #e6f8f3 bg / #149378 / 8px radius '배차 완료'."
• "Design a status badge: #e6f8f3 bg, #149378 text, 12px/700 Pretendard, 4px 8px padding, 8px radius, '운행 중'."

Iteration Guide

1. TADA mint #1ec59f is the brand + interactive accent — CTA, active pin, trip state
2. Headings and body are warm #1a1a1a, never pure #000
3. One primary action per screen, pinned to a thumb-reachable bottom bar
4. ETA / fare numbers: 700 weight, tabular numerals
5. Soft corners: 8px badges, 12px buttons/inputs, 16px cards/sheets
6. Shadows soft and neutral — calm from clarity, not depth
7. The map dominates; chrome floats and recedes

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #1ec59f measures 2.20:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-outline. Text #1ec59f on #ffffff measures 2.20:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-danger. Text #ffffff on #ff4452 measures 3.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-status. Text #149378 on #e6f8f3 measures 3.49:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.