Hana Tour

Overview

Hana Tour is Korea's premier travel agency, serving millions of travelers seeking curated global experiences. The design system embodies 'Vibrant Minimalism'—a philosophy that channels the brand's energetic hot-pink signature (#e5236d) as a focal accent against a serene, light-neutral foundation. The interface prioritizes clarity and accessibility, allowing complex travel data (flights, hotels, packages) to feel intuitive and inviting rather than overwhelming. The emotional response is one of wanderlust tempered by confidence: users feel empowered to explore the world, supported by a trustworthy, modern interface.

The brand voice is warm, conversational, and action-oriented. Hana Tour speaks in the language of possibility—never pushy, always encouraging. Vocabulary leans toward aspirational yet grounded: 'dream destinations,' 'seamless booking,' 'unforgettable moments.' The tone avoids corporate stiffness, instead adopting a friendly, peer-to-peer cadence. Example sentence in brand voice: '꿈꾸는 대로, 펼쳐지다'—'As you dream it, so it unfolds'—capturing the brand's promise of personalized, attainable travel.

Colors

The color system is anchored by a vibrant hot pink primary (#e5236d), deployed strategically on CTAs, active states, and brand-critical interactive elements. This accent is never diluted; it commands attention without aggression. The surface stack is built on pure white (#ffffff) and a carefully calibrated gray ladder: surface-dim at #f5f5f5, surface-container at #eeeeee, and surface-container-highest at #dddddd. This progression ensures sufficient contrast (WCAG AA minimum 4.5:1 on body text) while maintaining visual lightness. Secondary (#26a69a, a teal) and tertiary (#5e2bb8, a deep purple) serve as supporting accents for status indicators, promotional badges, and secondary CTAs—never competing with primary. Error red (#c10015) is reserved for destructive actions and validation failures

Typography

The type system uses Pretendard as the primary typeface, with fallbacks to AppleSDGothicNeo and system fonts for Korean language support and cross-platform consistency. Display (60px, 300 weight, -0.04em tracking) anchors hero sections and page titles, conveying aspirational scale without heaviness. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy, with tighter line-heights (48px and 36px respectively) to maintain visual density. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide readable body copy with generous line-spacing for accessibility. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for UI labels, buttons, and metadata. On small labels over busy backgrounds (e.g., pr

Layout

The layout system employs a 12-column grid with a maximum container width of 1280px, allowing flexible content scaling from mobile to desktop. The gutter is consistently 24px, applied as margin between grid columns and as padding around page edges. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is treated as a design element, not wasted space; generous margins around cards (md spacing) and between sections (lg spacing) create visual breathing room that reduces cognitive load. The search bar and primary navigation occupy a fixed header with 24px horizontal padding, ensuring consistent alignment with content

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics subtle, naturalistic light. Level 1 (sm elevation: 0 1px 2px rgba(17, 17, 17, 0.06)) is applied to subtle interactive elements like chips and input fields, providing just enough separation to indicate interactivity. Level 2 (md elevation: 0 4px 12px rgba(17, 17, 17, 0.16)) is the default for cards, modals, and floating elements, creating clear visual hierarchy and suggesting 'liftoff' from the page surface. Level 3 (lg elevation: 0 16px 40px rgba(17, 17, 17, 0.12)) is reserved for prominent modals, popovers, and hero-stage promot

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used purposefully to soften the interface without sacrificing clarity. Buttons and input fields use 4px (0.5rem / DEFAULT) border-radius, a subtle curve that feels modern and approachable without appearing playful or childish. Cards and modals use 16px (1rem / lg) border-radius, creating a distinct container feel while maintaining visual cohesion. Chips and badges use full (9999px) border-radius for a pill-shaped appearance, signaling their role as discrete, removable elements. Search bars and prominent CTAs also use full radius, emp

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the brand's hot pink (#e5236d) background with white text, 48px height, 0 35px horizontal padding, and 4px border-radius. On hover, the background darkens to #d41a5f and elevation increases to lg (0 6px 16px shadow). On active/pressed state, the background further darkens to #c01555 and elevation drops to sm, creating tactile feedback. All button text uses label-md typography (14px, 600 weight). The button-secondary variant inverts the logic: white background with dark text, a 1px outline-variant border, and no shadow by default. On hover, the background shifts to surface-container-high (#e5e5e5) and the border darkens to outline (#999999). Transitions between states occur over 150ms using

Do's and Don'ts

**Do**

• Do use the hot pink primary (#e5236d) exclusively for CTAs, active states, and brand-critical moments—never dilute it with secondary uses.
• Do maintain the 24px gutter and lg spacing between major sections to create visual breathing room and reduce cognitive load.
• Do apply the three-tier shadow system (sm/md/lg elevation) consistently to create clear depth hierarchy and signal interactivity.
• Do use Pretendard with Korean-specific letter-spacing (-0.002em to -0.04em) to ensure Hangul legibility and visual balance.
• Do transition interactive elements over 150–200ms using ease-out timing to provide smooth, predictable feedback without feeling sluggish.

**Don't**

• Don't use primary pink on backgrounds or large surface areas—reserve it for accents and interactive elements only.
• Don't mix rounded corner sizes arbitrarily; stick to the defined scale (4px for inputs/buttons, 16px for cards, 9999px for pills) to maintain visual consistency.
• Don't apply shadows to flat, non-interactive elements; elevation should signal interactivity and hierarchy, not decoration.
• Don't use system fonts or generic sans-serif fallbacks for display/headline text; always specify Pretendard with proper Korean font stack to maintain brand voice.
• Don't exceed lg elevation (0 16px 40px shadow) on any element; deeper shadows create visual chaos and diminish the impact of truly prominent elements.