Hana Tour Company

Overview

Hana Tour Company's design system embodies 'Geometric Modernism'—a sophisticated aesthetic that marries corporate professionalism with contemporary visual dynamism. The brand serves global travelers and corporate partners seeking premium, trustworthy travel solutions. The UI evokes clarity and forward momentum through a distinctive purple-cyan accent palette (#5e2bb8 primary, #08d1d9 secondary) set against a clean, minimal surface hierarchy. The emotional response is one of confidence tempered by approachability: users feel guided by a knowledgeable partner, not intimidated by complexity.

The brand voice is precise, warm, and internationally minded. Vocabulary emphasizes journey, possibility, and seamless experience—never transactional or corporate-stiff. Tone is conversational yet authoritative, with a subtle Korean cultural sensibility reflected in typography choices (Pretendard as the primary typeface, honoring local design heritage). Example sentence in brand voice: '새로운 경험과 가능성을 시작하는 순간, 하나투어와 함께 펼쳐가는 여행의 이야기입니다.' (The moment you begin a new experience and possibility, it is the story of your journey unfolding with Hana Tour.)

Colors

The color system is built on a dual-accent model: Purple (#5e2bb8) as the primary brand signature, used for CTAs, navigation highlights, and brand-critical interactive states; Cyan (#08d1d9) as the secondary accent, reserved for supporting actions, status indicators, and secondary CTAs. The surface stack progresses from pure white (#ffffff) at the brightest level through carefully calibrated grays (#f2f4f8, #dde1e6, #c1c7cd, #878d96, #697077) to near-black (#121619) for text and outlines. This progression ensures sufficient contrast (WCAG AA minimum 4.5:1 on body text) while maintaining visual softness. Primary (#5e2bb8) is applied to main buttons, active navigation states, and focus indicators. Secondary (#08d1d9) appears on secondary buttons, badges, and accent elements that require visu

Typography

The type system uses Pretendard as the primary typeface—a modern Korean sans-serif that balances geometric precision with humanist warmth, essential for a brand serving both Korean and international audiences. The hierarchy spans eight levels: Display (60px, 700 weight, -0.04em tracking) for hero statements; Headline-lg (40px, 600 weight) for major section titles; Headline-md (28px, 600 weight) for subsection breaks; Title-lg (20px, 600 weight) for card headers and form labels; Body-lg (18px, 400 weight) for rich content and descriptions; Body-md (16px, 400 weight) for standard body copy; Label-md (14px, 600 weight) for buttons and interactive labels; Label-sm (12px, 500 weight) for captions and metadata. Line-height is set to 1.5x the font size for body text (28px for 18px type) to ensure

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1366px, scaling responsively via CSS calc() functions (e.g., max(10.56px, 1.0416666667vw) for base font size). The gutter is fixed at 24px on desktop, collapsing to 12px on mobile, creating a breathing room that prevents visual cramping. White-space philosophy prioritizes clarity over density: section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for related elements within a container. The container max-width of 1366px ensures optimal line length for body text (approximately 65–75 characters) while accommodating multi-column layouts. Padding within cards and containers follows the md spacing token (24px) as a default, with xs (4px) reserved

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system that creates perceived depth without relying on color saturation shifts. Level 1 (Base/Flat): No shadow; used for primary surfaces and body backgrounds. Level 2 (Standard Elevation): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to cards, modals, and interactive containers that sit above the base layer. Level 3 (Elevated/Hover): box-shadow: max(5.28px, 0.5208333333vw) max(7.92px, 0.78125vw) max(18.48px, 1.8229166667vw) rgba(0, 0, 0, 0.12); used on hover states, expanded dropdowns, and floating action elements. The shadow blur

Shapes

The shape philosophy is 'Geometric Softness'—combining sharp, architectural precision with subtle human warmth. Buttons and interactive elements use lg radius (1rem / 16px), creating a modern, approachable feel that signals affordance without appearing childish. Cards and containers use xl radius (1.5rem / 24px), establishing a premium, breathing quality that differentiates them from the background. Input fields and form controls use full radius (9999px), evoking a pill-shaped, friendly interaction model that reduces cognitive friction. Smaller UI elements (badges, tags, micro-interactions) us

Components

Action Elements Buttons are the primary affordance for user intent. The button-primary component uses {colors.primary} (#5e2bb8) background with white text, {rounded.lg} (16px), and 48px height to ensure touch-target accessibility (minimum 44px per WCAG). Padding is 12px horizontal, 0px vertical (height handles vertical centering). On hover, the background shifts to #4a2b8f (a darker purple, -10% lightness) with a 200ms ease-in-out transition. The button-secondary variant uses a transparent background with a 2px solid border in {colors.primary}, maintaining the same height and padding; on hover, it fills with {colors.primary-container} (#e8dff5) and text becomes {colors.on-primary-container} (#3d1a7a). Button-ghost is used for tertiary actions: transparent background, {colors.primary}

Do's and Don'ts

**Do**

• Do use {colors.primary} (#5e2bb8) exclusively for primary CTAs and active navigation states—never dilute the accent by overusing it on secondary elements.
• Do apply {spacing.md} (24px) as the default padding inside cards and containers; this creates visual breathing room that prevents cramped layouts.
• Do use {rounded.lg} (16px) for all buttons and interactive elements to maintain a cohesive, modern aesthetic across the interface.
• Do scale shadows responsively using calc() and vw units (e.g., max(5.28px, 0.5208333333vw)) to maintain visual consistency across device sizes.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes to signal interactivity without feeling sluggish.

**Don't**

• Don't use {colors.secondary} (#08d1d9) as a primary CTA color; reserve it for secondary actions and status indicators only.
• Don't apply multiple shadows to a single element; each component occupies one elevation layer (Level 1, 2, or 3).
• Don't mix border-radius values within a single component family (e.g., all buttons in a group must use {rounded.lg}).
• Don't exceed 1366px container width on desktop; wider layouts reduce readability and create visual imbalance.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use {colors.on-surface} (#121619) and {colors.surface} (#ffffff) from the token system instead.