MyRealtrip

Overview

MyRealtrip is a global travel marketplace that democratizes access to authentic local experiences—flights, stays, tours, activities, and transportation—across 1,500+ cities. The brand aesthetic is **Accessible Clarity**: a light, trust-forward interface that prioritizes information hierarchy and decisive action over decoration. The emotional response is one of confidence and possibility—users feel empowered to explore and book without friction. The visual language is clean, spacious, and purposeful, with strategic use of color to guide attention to conversion moments.

The brand voice is conversational yet authoritative, encouraging yet practical. MyRealtrip speaks to travelers as peers, not customers—offering insider knowledge ("진짜 나다운 여행" / "Your authentic travel") without condescension. Vocabulary emphasizes discovery, ease, and trust: "confirm instantly," "local guides," "verified reviews." Example sentence in brand voice: "Book your Seoul food tour with a local chef—confirmed in 30 seconds, rated 4.9 stars."

Colors

The color system balances trust (cool blues), growth (vibrant greens), and urgency (warm ambers) to support the full travel booking journey. **Primary (#51abf3)** is a confident sky blue deployed on all CTAs, active states, and key interactive elements—it signals trustworthiness and forward momentum. **Secondary (#33b893)** is a fresh, optimistic green used for success states, confirmations, and positive feedback (e.g., "booking confirmed" badges). **Tertiary (#ffbf00)** is a warm amber reserved for warnings, limited-time offers, and attention-grabbing promotional badges. The neutral stack ranges from pure white (#ffffff) for surfaces to deep charcoal (#212529) for primary text, with intermediate grays (#f1f3f5, #dee2e6, #adb5bd) creating visual separation and hierarchy. Surface containers

Typography

The type system uses Pretendard (a Korean-optimized sans-serif) paired with system fallbacks to ensure consistent rendering across devices and languages. Display (56px, 700 weight) anchors hero sections and major announcements; Headline-lg (32px, 700) titles key sections; Headline-md (24px, 600) breaks up content zones; Title-lg (20px, 600) labels cards and subsections. Body-lg (18px, 400) and Body-md (16px, 400) carry descriptive copy and product details, with line-height set to 1.5x the font size (28px and 24px respectively) for comfortable reading. Label-md (14px, 600) and Label-sm (12px, 500) are reserved for buttons, badges, and metadata. Letter-spacing is tightened on display sizes (-0.02em) to create visual weight, while body text uses neutral spacing (0em) for legibility. On small

Layout

The layout uses a 12-column fluid grid with a max-width of 1200px, centering content on desktop while allowing full-bleed sections (hero, carousels) to extend edge-to-edge. Horizontal rhythm is maintained through consistent gutter spacing: 24px between columns, 24px padding on container edges. Vertical spacing follows a semantic scale: 12px (sm) for tight groupings within a card, 24px (md) for section separation, 40px (lg) for major content blocks, and 64px (xl) for page-level breaks. The search/filter bar sits in a fixed header (white background, 1px bottom border in #dee2e6) to remain accessible during scroll. Product cards are arranged in responsive grids (4 columns on desktop, 2 on tablet, 1 on mobile) with 16px gap between items. Whitespace is generous—cards and sections breathe with

Elevation & Depth

Depth is conveyed through a three-tier shadow system paired with subtle border colors, avoiding heavy drop-shadows that would feel dated. **Level 1 (Base)**: No shadow; 1px solid border in #dee2e6 (surface-container-high) for definition. **Level 2 (Standard Cards & Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px border in #ced4da; used for product cards, input fields, and dropdown panels. **Level 3 (Modals & Elevated Surfaces)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with 1px border in #dee2e6; reserved for modals, popovers, and floating action elements. Hover states elevate

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are present but restrained, reflecting a modern, approachable brand that respects both form and function. Buttons and inputs use 8px radius ({rounded.lg}), creating a friendly, clickable appearance without feeling playful or childish. Cards and modals use 16px radius ({rounded.xl}) to establish visual hierarchy and soften the container edges. Badges and chips use full radius ({rounded.full}) to signal compactness and status. Smaller UI elements (dropdowns, tooltips) use 4px ({rounded.DEFAULT}) for subtle definition. This tiered approa

Components

Action Elements Buttons follow a three-tier hierarchy: **Primary** (solid #51abf3 background, white text, 44px height, 12px vertical / 24px horizontal padding) for main CTAs like "Book Now" and "Search"; **Secondary** (transparent background, #51abf3 border and text) for alternative actions like "Learn More"; **Ghost** (no border, subtle gray background on hover) for tertiary actions. All buttons use {typography.label-md} (14px, 600 weight) and transition background-color over 200ms on hover. Primary buttons darken to #3a96d9 on hover and #2a7fb8 on active, providing clear feedback without relying on opacity shifts.

Containers & Surfaces **Cards** (product listings, testimonials, promotions) use {rounded.lg} (8px), 24px padding, and a 1px border in #dee2e6 with box-shadow: 0 3px 8

Do's and Don'ts

**Do**

• Do use primary blue (#51abf3) exclusively on CTAs and active states—never on passive text or backgrounds—to maintain conversion focus and visual clarity.
• Do maintain 24px minimum gutter spacing between major sections and 12px between related elements to preserve the accessible, uncluttered aesthetic.
• Do apply the three-tier shadow system (Level 1: border only, Level 2: 0 3px 8px, Level 3: 0 8px 24px) consistently across cards, inputs, and modals to establish depth hierarchy.
• Do use Pretendard font family with system fallbacks (-apple-system, BlinkMacSystemFont, 'Segoe UI') to ensure consistent rendering across Korean and English content.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms using ease-out timing to reinforce responsiveness without feeling sluggish.

**Don't**

• Don't use secondary green (#33b893) or tertiary amber (#ffbf00) on primary CTAs—reserve them for success confirmations and promotional badges only.
• Don't apply border-radius greater than 16px on cards or modals; the soft-technical aesthetic breaks down with overly rounded corners.
• Don't stack shadows (e.g., combining Level 2 and Level 3 shadows on the same element); use one shadow tier per element to maintain visual clarity.
• Don't use system fonts (system-ui, sans-serif) without Pretendard fallback; the brand relies on Pretendard's Korean-optimized metrics for consistency.
• Don't apply opacity-based hover states on buttons; use explicit color shifts (e.g., #51abf3 → #3a96d9) to ensure sufficient contrast and accessibility.