Triple (트리플) DESIGN.md

Overview

Visual Theme & Atmosphere

Triple is Korea's personal travel-planning app — "나를 아는 여행 앱, 트리플" (the travel app that knows me). Where most travel products are booking marketplaces, Triple's core is the itinerary: a friendly companion that helps you plan a trip day by day, recommends places that fit your taste, and gets richer the more you plan with friends. The interface reflects that companion role — bright, clean, approachable, with a single cheerful sky-blue carrying the entire interactive system and lots of soft, rounded, pill-shaped geometry that feels more like a chat app than a corporate OTA.

The signature is a vivid friendly blue, observed live as #368FFF, used everywhere a user acts: the primary "일정 살펴보기" CTA, active states, links, and selection. It's a brighter, more optimistic blue than fintech-trust blues — closer to a clear-sky travel-day blue. It's reinforced by a very light blue tint (#F1F7FF) for informational cards and an even subtler rgba(54,143,255,0.07) wash for selected/highlighted regions, so the blue family quietly tints the whole surface without ever overwhelming the white canvas. The CTA's most distinctive trait is its pill radius (36px) at a tall 56px height — a soft, tappable, friendly button that signals "this is easy."

Typography rides the platform's native system sans (-apple-system, "system-ui", "Segoe UI", Helvetica, Arial, ...) — Triple is mobile-app-first, and the web mirrors the app's native-font feel — rendered in black-to-gray on white. Geometry is the brand's tactile language: pill buttons (36px), rounded cards (20px), and soft tinted blocks. The atmosphere is "your cheerful travel buddy with a map" — light, personal, collaborative, and a little playful.

Key Characteristics:

• Friendly sky-blue (#368FFF) as the single interactive accent — CTAs, active, links, selection
• Pill-radius CTAs (36px radius at 56px height) — soft, tappable, "easy" geometry
• Light blue tint family (#F1F7FF, rgba(54,143,255,0.07)) washing info/selected surfaces
• Clean white canvas with rounded cards (20px)
• Native system-sans type stack (mobile-app-first), black→gray on white
• Personal, collaborative, slightly playful — a travel companion, not a marketplace
• Itinerary-first: the day-by-day plan is the product

Primary tasks

• Plan a trip day by day, dragging recommended places onto a timeline
• Search for a destination or a specific place to put in the plan
• Edit one shared itinerary together with the people travelling with you
• Check what each day holds and how far apart its places are
• Book hotels and tickets straight from the plan you built

Brand Narrative

Triple (트리플) is a Korean travel-planning app operated by Triple Corporation, which became part of the Interpark Triple group (and the broader Yanolja ecosystem after consolidation in the Korean travel-tech sector). Its founding insight was the opposite of the OTA marketplace: most travel products help you book, but few help you plan — and planning is where the anxiety and the joy of a trip actually live. Triple built an app around the day-by-day itinerary: pick a destination, get taste-fit recommendations, drag places onto a timeline, see them on a map, and plan together with the people you're traveling with. The tagline — "나를 아는 여행 앱" — promises a planner that learns your preferences and anticipates them. (triple.guide — product; triple.guide/intro)

The design is the form of "companion, not marketplace." The cheerful sky-blue, the soft pill CTAs, the rounded tinted cards, and the light personal copy all push toward a feeling of planning with a friend rather than transacting with a vendor. Collaboration is first-class — "함께 할수록, 더 풍성해지는 여행" — so the app is built to be shared, and the warm, anticipatory tone scales naturally to a group planning a trip together.

What Triple refuses: the banner-heavy, discount-shouting density of booking OTAs (Triple is calm and glanceable), the impersonal inventory feed (every surface centers your taste and your plan), and the corporate-trust blue of fintech (Triple's blue is a clear-sky travel blue, optimistic and light). Triple is a travel buddy with a map — personal, collaborative, and gently delightful.

Principles

1. Plan, don't just book. The itinerary is the product; booking serves the plan. UI implication: The day-by-day timeline is primary; recommendations and bookings flow into it. Don't bury planning under a storefront.

2. One cheerful blue owns interaction. #368FFF is everywhere a user acts; nothing else competes. UI implication: No second saturated accent. The blue-tint family extends it for info/selected states.

3. Soft is the signature. Pill CTAs (36px) and 20px cards make planning feel easy and friendly. UI implication: Don't use sharp/small radii on actions. Roundness is brand identity, not decoration.

4. It knows you, so it speaks to you. Copy is personal and anticipatory. UI implication: 이런 곳은 어때요?, 나를 아는 여행 앱 — second person, taste-fit framing. Lead with the traveler.

5. Better together. Collaboration is built in, and the tone scales to a group. UI implication: Invite, share, and co-edit affordances are first-class; plural-friendly copy (함께) throughout.

Personas

Personas are fictional archetypes informed by publicly described Triple user segments (Korean leisure travelers and trip-planners), not individual people.

유진 (Yu-jin), 28, Seoul. Plans every trip in detail. Uses Triple to build a day-by-day itinerary before departure, dragging recommended places onto the timeline and checking them on the map. Loves that the app learns her taste (cafes, viewpoints) and pre-fills suggestions.

민서 (Min-seo), 25, Suwon. Travels with friends. Triple's collaboration is why she uses it — the whole group edits one shared itinerary, so nobody's left out of planning. Picks places by the friendly recommendation cards and group votes.

태현 (Tae-hyun), 35, Daejeon. Family trips. Wants a low-stress, glanceable plan — what to do each day, how far apart places are. Distrusts dense booking apps; Triple's calm, rounded, companion feel keeps him in it. Books hotels and tickets directly from the plan.

Colors

Colors below are extracted from live computed styles on triple.guide/intro (2026-05-19). Triple does not publish a public token layer; values are observed.

Brand / Interactive

• Triple Blue (#368FFF): Primary interactive — CTA background, active states, links, selection. Observed rgb(54, 143, 255), the most-frequent saturated color (39 occurrences). (Brief-provided value was #2EA6FF; live observed #368FFF — use the live value.)
• Triple Blue Pressed (#1A85E8): Hover/pressed darkening of Triple Blue.
• Sky Accent (#1AADF6): A lighter cyan-blue seen in secondary accents/illustration. Observed rgb(26, 173, 246).

Tints (Blue Family)

• Blue Tint Card (#F1F7FF): Light blue card/info-block background. Observed rgb(241, 247, 255).
• Blue Wash (rgba(54,143,255,0.07)): Selected/highlighted region wash. Observed directly.

Surfaces

• Canvas White (#FFFFFF): Page background, card surfaces.
• Surface Gray (#F5F6F7): Section bands, subtle grouping.

Text

• Text Primary (#1B1D1F): Headings, primary labels.
• Text Body (#3A3E41): Body copy, card titles.
• Text Secondary (#7E848A): Metadata, captions, secondary labels.
• Text Tertiary (#ADB1B5): Placeholder, disabled, fine print.

Borders & Dividers

• Border Default (#E8EAEC): Card borders, dividers, input outlines.
• Border Strong (#D5D8DB): Active/emphasized borders.

Semantic

• Success (#22C55E): Saved, confirmed, completed.
• Highlight Teal (#0ECEDB): Special accent / map highlight. Observed rgb(14, 206, 219).
• Error (#FF3B30): Errors, destructive.
• Warning (#FAAD14): Pending, attention.

Typography

Font Stack

-apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Triple is mobile-app-first; the web mirrors the app by using the platform native sans (San Francisco / Roboto via the system stack). On Korean devices this resolves to Apple SD Gothic Neo / system Korean faces. All rendering is black-to-gray on white.

Type Scale (observed intro + planning surfaces)

Conventions

• 700 for headlines and CTAs, 600 for card titles, 400 for body — the bold CTA weight (700) makes the friendly pill feel confident.
• Black headline, gray meta — #1B1D1F → #3A3E41 → #7E848A.
• 16px base body — comfortable reading for trip tips and place descriptions.
• Korean-primary — Korean is first-class; English used in place names and the app stores.

Layout

Page Structure

• Mobile-app-first; web intro/marketing is a vertical scroll of feature sections with rounded cards.
• In-app: a day-by-day itinerary timeline with place cards, a map view, and bottom-tab navigation.

Spacing

• Base unit 8px; common values 4 / 8 / 12 / 16 / 20 / 24 / 32.
• Card gutter ~12–16px; section vertical gap ~32px.
• Page horizontal padding ~20px mobile, ~24px desktop.

Density

Comfortable, companion-density. The itinerary is meant to be glanceable — generous spacing around place cards, soft tinted info blocks, lots of rounded breathing room. Not a data-dense table; a friendly planning canvas.

Border Radius Scale

• Standard (12px): inputs, selected regions, snackbars
• Comfortable (20px): cards, info blocks, sheets
• Pill (36px): primary/secondary CTAs
• Pill (999px): chips

Responsive Behavior

Breakpoints

Touch & Media

• Pill CTAs are large (56px) — generous tap targets.
• Place cards swipeable; map pins tappable to popover.
• Sticky bottom add/save CTA with safe-area inset.

Image Behavior

• Place photos 4:3 or 1:1, object-fit: cover, rounded 20px (matching cards).
• Maps full-bleed with rounded container and blue pins.

Elevation & Depth

Depth is gentle and soft-edged, matching the rounded geometry. The blue-tint family does as much separating work as shadows — a #F1F7FF block reads as "set apart" without any elevation. The signature lift is the floating add-to-itinerary button (pill, blue, soft shadow) that follows the planning flow.

Values kept in prose

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

• shadow.none: none

Motion & Easing

Triple's motion is light and friendly — gentle slides, soft pops, map-pin reveals. Playful at small moments, calm overall.

Durations:

Easings:

Spring stance. Spring is licensed for the small delight moments that make planning fun — the add-to-itinerary pop and the map-pin drop. Navigation and sheets use standard easing. The companion should feel playful when you add a place, calm when you move around.

Signature motions.

1. Add to itinerary. On tap, the place chip pops to ~1.15 and the item slides into the timeline over motion-fast / ease-spring, with a snackbar confirm. The signature delight.
2. Map-pin drop. Pins drop onto the map with a brief overshoot motion-standard / ease-spring, sequenced ~40ms apart for multiple places.
3. Itinerary reorder. Dragging a place reflows the timeline with motion-standard / ease-standard; the dropped item settles softly.
4. Reduce motion. Under prefers-reduced-motion: reduce, pops/drops/slides collapse to instant opacity; skeletons go static #F5F6F7. No exceptions.

Components

Buttons

Primary CTA (일정 살펴보기 / 함께 일정 만들기)

• Background: #368FFF
• Text: #FFFFFF
• Border: none
• Radius: 36px (pill)
• Padding: 0 28px
• Font: 18px / 700 / system-sans
• Hover: background #1A85E8
• Use: Primary action — observed 56px tall, pill-shaped friendly button

Secondary / Outline

• Background: #FFFFFF
• Text: #368FFF
• Border: 1px solid #368FFF
• Radius: 36px (pill)
• Padding: 0 28px
• Font: 18px / 700 / system-sans
• Use: Secondary action paired with the filled primary

Soft / Tinted

• Background: #F1F7FF
• Text: #368FFF
• Border: none
• Radius: 36px (pill)
• Padding: 0 24px
• Font: 16px / 600 / system-sans
• Use: Low-emphasis action, "다시 보기", inline suggestions

Ghost / Text

• Background: transparent
• Text: #3A3E41
• Border: none
• Font: 16px / 600 / system-sans
• Use: Tertiary nav, "더보기"

Inputs

Search / Text Field

• Background: #F5F6F7
• Text: #1B1D1F
• Border: none (filled) — or 1px solid #E8EAEC on white
• Radius: 12px
• Padding: 12px 16px
• Font: 16px / 400 / system-sans
• Placeholder: #ADB1B5
• Focus: border #368FFF
• Use: Destination/place search

Cards

Place / Itinerary Card

• Background: #FFFFFF
• Border: 1px solid #E8EAEC (or shadowless on bands)
• Radius: 20px
• Padding: 16px (text region) + image
• Use: The planning atom — place photo + name + tip/metadata

Info / Tip Card

• Background: #F1F7FF
• Border: none
• Radius: 20px
• Padding: 20px
• Font: 16px / 400 / system-sans, #3A3E41
• Use: Travel tips, contextual info, "랜드마크를 사랑한 여행자" style editorial blocks (observed rgb(241,247,255) bg, 20px radius)

Badges / Chips

Category / Filter Chip

• Background: #F5F6F7
• Text: #3A3E41
• Border: none
• Radius: 999px
• Padding: 6px 14px
• Font: 13px / 500 / system-sans
• Active: bg rgba(54,143,255,0.07), text #368FFF
• Use: Place-type filters (관광 / 맛집 / 카페 / 숙소)

Selected Region

• Background: rgba(54,143,255,0.07)
• Text: #368FFF
• Border: 1px solid #368FFF
• Radius: 12px
• Use: Selected itinerary item, chosen place on map

Tabs / Nav

Bottom Tab (app) / Top Nav (web)

• Active: #368FFF (icon + label)
• Inactive: #7E848A
• Font: 12px (tab) / 14px (web nav) / 500 / system-sans
• Use: 일정 / 가이드 / 예약 / 내 여행 switcher

Toasts

Snackbar

• Background: #1B1D1F
• Text: #FFFFFF
• Radius: 12px
• Padding: 12px 16px
• Use: "일정에 추가했어요" transient feedback

Dialogs

Modal / Bottom Sheet

• Background: #FFFFFF
• Text: #1B1D1F
• Radius: 20px (top corners on sheet)
• Padding: 24px
• Backdrop: rgba(0,0,0,0.5)
• Use: Place detail, add-to-itinerary, collaborator invite

Verified: 2026-05-19 Tier 1 sources: https://triple.guide/intro (live computed styles via Playwright — primary CTA #368FFF (rgb 54,143,255) / 36px pill radius / 18px·700 / 56px tall, the most-frequent saturated color (39×); info card #F1F7FF (rgb 241,247,255) / 20px radius; selected wash rgba(54,143,255,0.07) (17×); sky accent #1AADF6 (rgb 26,173,246); highlight teal #0ECEDB (rgb 14,206,219); white bg; font -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, ...). Tier 2 sources: getdesign.md/triple — not checked; styles.refero.design — not checked. Conflicts unresolved: Brief-provided #2EA6FF vs live observed #368FFF — live adopted as canonical primary (39 occurrences on CTAs/active). No internal conflicts.

States

Do's and Don'ts

Do

• Use #368FFF for every interactive element — it's the single accent.
• Use pill radius (36px) on primary CTAs — the soft "easy" geometry is the brand.
• Use the blue-tint family (#F1F7FF, rgba(54,143,255,0.07)) to separate info/selected surfaces.
• Use 20px rounded cards — companion-app softness.
• Keep the itinerary glanceable with generous spacing.

Don't

• Don't introduce a second saturated accent; let blue own interaction.
• Don't use sharp or small radii on CTAs — pill is the brand signature.
• Don't pack the itinerary into a dense table; this is a friendly canvas.
• Don't fight the white canvas with heavy chrome; tints do the separating.
• Don't use a darker fintech-trust blue; Triple's blue is bright and cheerful.

Voice & Tone

Triple speaks like a cheerful travel buddy who already knows your taste — warm, light, second-person, a little playful. The register is friendly Korean with ~요/~어요 endings (일정에 추가했어요, 이런 곳은 어때요?), the companion voice, never stiff ~습니다 except in policy. The brand line — "나를 아는 여행 앱" (the app that knows me) — sets the tone: copy is personal and anticipatory, surfacing places that fit you and getting more useful as you plan together. Korean is primary; place names and stores in English.

Forbidden phrases. 오류가 발생했습니다 (generic error), 죄송하지만 on non-destructive failures, pressure CTAs (지금 예약하세요! → 예약하기), superlatives on UI chrome, English-first strings on Korean surfaces, emoji on system toasts (emoji belongs to user trip notes).

Voice samples.

• 일정 살펴보기 — primary CTA, observed live on the #368FFF pill button.
• 나를 아는 여행 앱, 트리플 — brand line (page title 나를 아는 여행 앱, 트리플).
• 함께 할수록, 더 풍성해지는 여행 — collaboration headline, observed live.
• 이런 곳은 어때요? — illustrative recommendation line, soft ~요.

Agent Prompt Guide

Quick Color Reference

• Primary/active/link: Triple Blue #368FFF (pressed #1A85E8)
• Tints: card #F1F7FF; wash rgba(54,143,255,0.07)
• Canvas: White #FFFFFF; band #F5F6F7
• Text: #1B1D1F → #3A3E41 → #7E848A → #ADB1B5
• Border: #E8EAEC; focus #368FFF
• Success #22C55E; highlight teal #0ECEDB; error #FF3B30

Example Component Prompts

• "Build a Triple primary CTA: bg #368FFF, white text 18px weight 700, 36px pill radius, 56px tall, padding 0 28px. Hover bg #1A85E8."
• "Create a Triple place card: white bg, 1px border #E8EAEC, 20px radius. Place photo top (4:3, cover, rounded 20px top). Below: name (16px weight 600 #1B1D1F), tip/meta (14px #7E848A), category chip (bg #F5F6F7, 999px). Selected: bg rgba(54,143,255,0.07), 1px border #368FFF."
• "Design a Triple info/tip card: bg #F1F7FF, 20px radius, 20px padding, body 16px #3A3E41, optional blue #368FFF highlight."
• "Create a Triple soft button: bg #F1F7FF, text #368FFF 16px weight 600, 36px pill radius — low-emphasis action."

Iteration Guide

1. One blue #368FFF owns all interaction.
2. Pill radius (36px) on CTAs — the soft "easy" signature.
3. Blue-tint family separates info/selected surfaces.
4. 20px rounded cards; 16px base body.
5. System-sans stack first (mobile-app native feel).
6. Gentle soft-edged shadows; tints do separating work.
7. Keep the itinerary glanceable and generous, never dense.

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #368fff measures 3.22:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-outline. Text #368fff on #ffffff measures 3.22:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-soft. Text #368fff on #f1f7ff measures 2.98:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.