NOL

Overview

NOL is a comprehensive travel and lifestyle marketplace that democratizes access to premium accommodations, flights, activities, and entertainment across Korea and internationally. Serving aspirational travelers and leisure seekers, the platform employs a 'Playful Minimalism' aesthetic—a design philosophy that combines clean, spacious surfaces with vibrant accent colors and delightful micro-interactions to convey approachability, energy, and trustworthiness. The UI evokes a sense of discovery and joy, transforming travel planning from a chore into an exciting experience.

The brand voice is conversational, encouraging, and locally grounded. NOL speaks in the language of everyday travelers—direct, warm, and occasionally playful. The vocabulary emphasizes value ('특가' / special deals), discovery ('추천' / recommendations), and ease ('준비' / preparation). Example sentence in brand voice: '이번주 국내여행 인기 호텔&리조트 — 당신의 다음 여행은 NOL에서 시작하세요.' (This week's popular domestic travel hotels & resorts — start your next trip on NOL.)

Colors

The NOL color system balances a clean, neutral foundation with a signature electric blue accent that drives engagement and trust. Primary (#4154ff) is the brand's core accent—used exclusively on CTAs, active navigation states, and key interactive elements. It conveys reliability and energy without aggression. Secondary (#4ba2f6), a lighter sky blue, provides visual rhythm in supporting UI elements like badges and secondary buttons. Tertiary (#fdba39), a warm golden yellow, highlights promotional content and special offers, creating visual contrast against the cool primary palette.

The surface stack is deliberately light and minimal: surface (#ffffff) forms the clean canvas, while surface-container-lowest (#f2f3f7) and surface-container (#e9eaef) provide subtle depth for cards and sections

Typography

The typography system uses Pretendard as the primary typeface, a modern Korean-optimized sans-serif that balances geometric clarity with warm humanist proportions. The hierarchy spans eight levels from display (60px, 700 weight) down to label-sm (12px, 500 weight), each calibrated for specific use cases. Display and headline-lg are reserved for hero sections and major page titles; headline-md (28px, 600 weight) anchors section headers; title-lg (20px, 600 weight) labels card titles and modal headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) form the reading hierarchy for descriptions and body copy. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for buttons, badges, and metadata.

All headlines use negative letter-spacing (-0.02em to -0.04em) to tighte

Layout

NOL uses a fluid 12-column grid with a maximum container width of 1280px, centered on the viewport. The grid adapts responsively: at 1024px and below, columns collapse to 8; at 768px and below, to 4 columns. The gutter between columns is consistently 24px, maintained via CSS Grid gap or flexbox margin utilities.

White-space philosophy emphasizes breathing room: section separation uses lg spacing (40px) vertically, while internal card padding uses md spacing (24px). The hero banner occupies full-width with 40px top/bottom padding and 24px left/right padding, creating a contained-yet-expansive feel. Container max-width is 1280px for desktop, 1024px for tablet, and 100% - 24px gutter for mobile. Spacing tokens are applied consistently: xs (4px) for micro-interactions and icon spacing, sm (12

Elevation & Depth

Depth in NOL is conveyed through subtle shadows and layered surfaces rather than dramatic depth effects. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and list items at rest, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and floating elements, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and full-screen overlays. All shadows use a 6° angle (offset-y slightly larger than offset-x) to simulate natural overhead lighting.

The hero banner at the top of the page uses a gradient background (linear-gradient(135deg, #4154ff 0%, #3e5fea 50%, #3c7bfd

Shapes

NOL employs a 'Soft-Technical' radius philosophy: rounded corners are present but restrained, conveying modernity without sacrificing clarity. The radius scale progresses from sm (4px) for small UI elements like icon buttons and tight inputs, to DEFAULT (8px) for standard form fields and list items, md (12px) for chips and badges, lg (16px) for primary buttons and cards, xl (24px) for hero banners and modal containers, and full (9999px) for pill-shaped buttons and avatars.

Primary buttons use lg (16px) radius, creating a friendly, approachable feel without appearing childish. Cards and modals

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#4154ff) background with {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 600 weight), {rounded.lg} (16px), and 12px vertical / 24px horizontal padding for a 48px total height. On hover, the background transitions to #2d3ecc (a darker blue) over 200ms. On active/pressed, the background darkens further to #1a2680. Button-secondary mirrors the primary button's dimensions but uses a transparent background with a 2px solid {colors.primary} border and {colors.primary} text. On hover, the background fills with {colors.primary-container} (#eef0ff) while maintaining the border. Button-ghost is used for tertiary actions: transparent background, {colors.on-surface} text, no border

Do's and Don'ts

**Do**

• Do use {colors.primary} (#4154ff) exclusively for primary CTAs, active states, and key brand moments—never dilute it with secondary uses.
• Do maintain minimum 24px padding inside cards and containers; white-space is a design feature, not wasted space.
• Do apply transitions (200ms ease-in-out) to all interactive state changes (hover, focus, active) to signal interactivity without jarring the user.
• Do use {typography.label-md} (14px, 600 weight) for all button text; consistency in button typography reinforces the action hierarchy.
• Do stack sections vertically with lg spacing (40px) to create clear visual rhythm and scannable page structure.
• Do use {rounded.lg} (16px) for primary buttons and {rounded.xl} (24px) for cards to establish clear visual hierarchy through shape.

**Don't**

• Don't use colors outside the defined palette—no custom hex values or arbitrary Tailwind colors; all interactive elements must reference {colors.*} tokens.
• Don't apply shadows larger than {elevation.lg} (0 16px 40px) except for full-screen overlays; excessive shadow depth flattens the visual hierarchy.
• Don't mix border-radius values within a component family (e.g., don't use 12px radius on one button and 16px on another); consistency builds trust.
• Don't set font sizes below 12px for body text or below 14px for interactive labels; accessibility requires minimum legibility.
• Don't use {colors.primary} for backgrounds larger than 280px (hero banner size); overuse dilutes the accent's impact and fatigues the eye.
• Don't apply letter-spacing to body text (body-md, body-lg); negative letter-spacing is reserved for headlines to create visual hierarchy.