Yanolja's interface is the digital equivalent of a Korean weekend getaway -- warm, energetic, and built around the simple proposition that playing is the best thing you can do. The home surface (now consolidated under the NOL consumer brand at nol.yanolja.com) opens on a clean white canvas (#ffffff) with deep near-black text (#1E1928) and the unmistakable Yanolja Orange (#F54B1E) -- a coral-leaning red-orange that sits halfway between a sunset and a hot pepper. This is not the corporate orange of fintech or the carrot orange of marketplace apps; it is the high-saturation, slightly-pink orange of leisure, of "let's go," of a discount sticker on a hotel banner.
The brand stack is built for a Korean leisure traveler in motion: thumb-zone CTAs, image-dominant lodging cards, prominent percentage discounts in coral, and category chips ("호텔", "펜션", "레저", "티켓", "특가") sized for one-handed scrolling. Underneath the consumer NOL surface sits a much larger group brand system (Yanolja Group / Yanolja Cloud B2B), but the master brand color remains constant across all of it. The system reads as playful but not childish, dense but not cluttered -- closer to a glossy travel magazine than to a utility app.
Key Characteristics:
#F54B1E) as the singular brand accent -- coral-red-orange, energetic, unmistakably leisure-요 endings ("어디로 갈까요?", "우리도 호캉스 갈까?")#F54B1E): Primary CTA, brand accent, discount badges, active states. The signature coral-red-orange that defines every Yanolja and NOL touchpoint. Pantone 2028C/U.#ffffff): Page background, card surfaces, modal panels.#1E1928): Primary heading and text color. A warm dark with a hint of plum -- not pure #000, deliberately soft.#F5EBE1): Secondary surface, soft warm fill -- a brand-warm gray that pulls slightly toward orange in adjacent context.#8C8282): Body and metadata text. Warm-leaning gray that complements the coral primary.#555055): Strong body text, secondary headings.#1E1928): Primary headings (same as Near Black).#F54B1E): Discount percentage labels (-45%, -86%), live-deal badges (라이브 단독!), flash-sale tags (플래시 특가).~#FEEAE2, derived): Soft promotional surfaces, brand-weak backgrounds for hero strips.~#E5342B): Error states, validation failures.~#2D8CFF): Links and informational accents in body copy.~#1FA873): Confirmation states, "예약 완료" success.~#F2A600): Deadline reminders, rate-change advisories.rgba(30, 25, 40, 0.08)): Card borders, dividers.rgba(30, 25, 40, 0.16)): Input borders, defined separators.rgba(0, 0, 0, 0.6)): Modal backdrops, full-screen takeovers."Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif| Role | Size | Weight | Line Height | Notes |
|---|---|---|---|---|
| Display | 28px | 700 | 36px | Hero promo headlines ("우리도 호캉스 갈까?") |
| Heading Large | 22px | 700 | 30px | Section headers ("인기 호텔 미리 예약!") |
| Heading | 18px | 700 | 26px | Card titles, list section headers |
| Title | 16px | 600 | 22px | Lodging name, primary list item |
| Body | 14px | 400 | 20px | Standard body, lodging description |
| Body Bold | 14px | 700 | 20px | Price (always bold), discount label |
| Caption | 12px | 400 | 16px | Metadata ("05.31까지", neighborhood, distance) |
| Caption Bold | 12px | 700 | 16px | Discount % badges, "라이브 단독!" tags |
| Micro | 11px | 500 | 14px | Legal, fine print |
45% → 89,000원 → 그랜드 조선 부산 in that order.Brand Solid (Primary CTA)
#F54B1E (Yanolja Orange)#ffffff#D63E14 (Yanolja Orange shade)#F5EBE1 background, #8C8282 textNeutral Outline
#1E1928#F5EBE1 backgroundNeutral Weak
#F5EBE1#1E1928Critical Solid
~#E5342B#ffffff#ffffff or #F5EBE1 (search variant)#F54B1E outline#1E1928, Placeholder: #8C8282#ffffff0 2px 8px rgba(30, 25, 40, 0.08) on hover, flat at rest#F54B1E background, white text, 4-6px radius, weight 700#F54B1E bg / white text, 11-12px weight 700, 4px radius, padding 2px 6px#F5EBE1 bg / #1E1928 text, pill, 32px height, 12-14px weight 500. Selected: #F54B1E bg / white text.#8C8282| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Default cards at rest, page surfaces |
| Soft (s1) | 0 2px 8px rgba(30, 25, 40, 0.08) | Card hover, list-item lift |
| Standard (s2) | 0 4px 16px rgba(30, 25, 40, 0.12) | Dropdowns, popovers, bottom-sheet |
| Prominent (s3) | 0 8px 24px rgba(30, 25, 40, 0.16) | Modal dialogs, full-screen takeover |
Shadow Philosophy: Yanolja uses shadow as functional layering, not as brand expression. The brand's warmth comes from the coral primary and the photography in cards -- shadows are quiet, low-saturation, slightly plum-tinted (because the dark gray base is #1E1928, not pure black). Never colored shadows. Never inner shadows.
#F54B1E) for primary CTAs, discount badges, and active states -- and almost nowhere else-요 sentence endings in microcopy ("어디로 갈까요?", "확인해 드릴게요")#000) for text -- always #1E1928-습니다 endings in consumer copy -- the brand voice is friendly, not corporate#F54B1E, full stop| Name | Width | Key Changes |
|---|---|---|
| Mobile | <480px | Single-column cards, 16px gutter, sticky bottom tab bar |
| Mobile-large | 480-768px | 2-column lodging grid, expanded category strip |
| Tablet | 768-1024px | 3-column grid, search bar expands inline in nav |
| Desktop | >1024px | 4-column grid, max-width 1280px content, hover states activate |
#F54B1E)#F54B1E)#ffffff)#1E1928#555055#8C8282#F5EBE1rgba(30, 25, 40, 0.08)#F54B1E discount badge 45% in white 12px weight 700, 4px radius. Below image: 16px padding. Title 16px weight 600 #1E1928 (max 2 lines, ellipsis). Below title: 12px caption #8C8282 neighborhood. Bottom row: discount % in coral 14px weight 700, then price 89,000원~ in #1E1928 16px weight 700."#F54B1E background, white text, 16px weight 700, 52px min-height, 8px radius, full-width. Pressed: #D63E14. Disabled: #F5EBE1 bg, #8C8282 text."#F5EBE1 bg, #1E1928 text, 13px weight 500, 32px height, 9999px radius, 14px h-padding. Selected: #F54B1E bg, white text."rgba(30,25,40,0.16), 8px radius, 52px height. Left icon: 24px location pin #1E1928. Placeholder 어디로 갈까요? #8C8282 16px weight 400. Focus: 2px coral outline."#F54B1E corner ribbon top-left with 라이브 단독! white 12px weight 700. Below image: heading 18px weight 700 #1E1928, subheading 13px weight 400 #555055. CTA pill bottom-right: coral bg, white text, 36px height, 9999px radius."#F54B1E -- coral-red-orange. Not pink. Not carrot-orange. Not pure red.-요 endings only -- formal -습니다 reads as corporate marketing, off-brand.Yanolja speaks like a friend texting you about a long weekend that just got 45% cheaper -- warm, casual, slightly impatient with hesitation, and built around the company name, which literally means "Hey, let's play." The voice assumes the user is already in motion -- already curious about Jeju, already comparing Friday-night rates, already thinking about whether to bring the dog -- and the app's job is to not get in the way. Korean copy lands in conversational -요 endings (갈까요?, 확인해 드릴게요, 가실래요?) rather than the formal -습니다. English on group/B2B surfaces (Yanolja Cloud, Yanolja Group corporate) stays plain and aspirational -- "Making dream travels a reality for anyone on earth" -- not jargon-heavy.
| Context | Tone |
|---|---|
| CTAs | Verb-first Korean (예약하기, 지금 예매, 결제하기, 장바구니 담기). Never 결제 진행. |
| Empty states | Friendly nudge with a question (아직 찜한 숙소가 없어요. 어떤 여행을 떠나볼까요?). Never 데이터가 없습니다. |
| Search prompt | One question, generous tap target (어디로 갈까요?). |
| Promo headlines | Conversational invitation, often a question (우리도 호캉스 갈까?, 로맨틱 데이트 완벽준비!). |
| Discount labels | Loud, short, numeric (-45%, 라이브 단독!, 플래시 특가, 얼리버드특가). |
| Error messages | Specific, blameless, actionable (날짜를 다시 선택해 주세요). |
| Success toasts | Past-tense, single sentence (예약이 완료되었어요). |
| B2B / Cloud surfaces | Plain English, aspirational, less casual -- the audience is a hotelier, not a couple booking a pension. |
Forbidden phrases. 불편을 드려 죄송합니다, 오류가 발생했습니다, 데이터가 없습니다, 시스템 점검 중입니다. Marketing-speak bans: 혁신적인 여행, 차별화된 서비스, 최고의 경험, English boilerplate like Best deals ever or Unbeatable prices. Emoji are permitted in promo banners, category icons, and review surfaces -- never in payment confirmations, never in error states, never in cancellation flows.
Voice samples.
어디로 갈까요? -- search bar placeholder. 우리도 호캉스 갈까? -- promo headline (staycation theme). 국내여행 준비는 NOL에서 -- consumer hero positioning. 놀라운 특가 -- recurring promo wordplay (NOL + 놀라운 = "amazing/surprising"). 라이브 단독! -- live-deal exclusivity tag. 다른 날짜 확인 -- soft fallback when sold-out (illustrative microcopy pattern). Hey, Let's Play! -- English brand-name explainer on group site. Yanolja (야놀자, "hey, let's play") was founded in 2005 -- formalized as a hotel-review and booking site in 2007 -- by 이수진 (Lee Su-jin), whose origin story is one of the most retold in Korean tech: orphaned as a child, he worked first as a motel janitor in Korea's love-motel industry, then as a manager, and in 2004 launched a forum site called 모텔 이야기 (Motel Story) that grew to ~10,000 members. In 2005 he acquired 모텔투어 (Motel Tour), then the third-largest site in the segment with ~200,000 members, and used that as the seed of Yanolja. The thesis was unsentimental: Korea's motel and pension market was huge but stigmatized and opaque, and the operator who could modernize the inventory and remove the shame of booking a Friday-night room would own the next decade (CNBC, Wikipedia).
The product followed the thesis. Cards led with photography, not text. Discount percentages were visible before prices were visible. The brand color settled on a coral-red-orange (#F54B1E) -- not the carrot-orange of marketplaces, not the corporate orange of fintech, but a leisure orange, sunset-adjacent, calibrated to feel like a vacation poster. By June 2019 Yanolja became South Korea's eighth unicorn after a $180M round led by Booking Holdings + GIC. In July 2021 SoftBank's Vision Fund 2 invested $1.7 billion at a reported ~$9-10B valuation -- the largest single investment in a travel startup since the pandemic began (Skift, Bloomberg). Three months later, October 2021, Yanolja acquired a 70% stake in Interpark for ~$250M, folding Korea's e-commerce-and-tickets pioneer into the super-app stack (TechCrunch).
Yanolja then split itself into two strategic halves. Yanolja (consumer) -- now branded NOL -- handles B2C: hotels, pensions, leisure tickets, flights, live commerce, and the Interpark inventory. Yanolja Cloud (B2B SaaS) sells hospitality software globally; it acquired eZee (India, hotel PMS) and in May 2023 acquired Israeli B2B travel-tech firm Go Global Travel (GGT), which distributes 1M+ hotels across 200 countries to 20,000+ partners (PRNewswire). The group has been openly preparing for a Nasdaq IPO (KED Global). The brand frame for all of this is the "Multiverse of Dreams" -- the symbol "represents the connection between the travel industry and travelers digitally" -- with the mission "Making dream travels a reality for anyone on earth" (yanoljagroup.com).
What Yanolja refuses: the embarrassment economy of legacy Korean motel booking (call-the-front-desk, no published prices, no photos), the price opacity of legacy OTAs, and the stiffness of corporate hospitality language. The voice is -요, not -습니다. The hero copy is 우리도 호캉스 갈까?, not 프리미엄 호캉스 패키지 안내. The brand insists, in its name and in its color, that playing is not a guilty pleasure -- it is the entire point. Coral is the accent because the brand is selling the feeling of leaving on Friday, not the feature list of a hotel.
#F54B1E appears on the primary CTA, the discount badge, and selected/active states -- and almost nowhere else. It never tints a card background, never decorates a divider. UI implication: at most one coral CTA per viewport in the primary flow; if two compete, demote one to neutral outline. The discount badge is exempt -- multiple discount badges per viewport are normal because they belong to cards, not to flow.45% → 89,000원 → 그랜드 조선 부산 → 부산 해운대 in that order, enforced by weight (700 → 700 → 600 → 400) and color (coral → black → black → gray). UI implication: never demote the discount % below the title to "improve aesthetics"; the badge is the reason the card converts.-요, never -습니다. The consumer brand is a friend, not a vendor. Korean sentences end in conversational -요 endings throughout the consumer surface (NOL, Yanolja app). Formal -습니다 is reserved for legal text, ToS, and B2B Cloud surfaces. UI implication: if a screen of consumer copy contains -습니다, it has drifted into corporate register -- rewrite.#F54B1E master and the same brand grays, but consumer leans playful + image-dense + Korean -요 and B2B leans clean + data-dense + plain English. UI implication: if you are styling a Yanolja Cloud dashboard, keep the coral but quiet the photography; if you are styling a NOL listing card, keep the coral and let the photography lead.Personas are fictional archetypes informed by publicly described Yanolja user segments, not individual people.
서연 (Seo-yeon), 28, Seoul. Marketing manager in 강남구. Books a 호캉스 (hotel-staycation) every 6-8 weeks with her boyfriend -- usually a Friday-night downtown 5-star at 40-60% off. Opens NOL on the subway home Wednesday, filters by 오늘-내일, sorts by discount. Will pay extra for a city view and a late checkout; will not tolerate a card without a photo.
민준 (Min-jun), 34, Daegu. Married, two kids under 8. Books a pension or kids-pool resort every long weekend (어린이날, 추석 연휴). Cares more about kids' amenities and parking than about discount %. Reads every review. Treats the chat-with-host feature as essential, not optional.
Sarah, 31, Singapore. Visits Korea twice a year for K-pop concerts and food tourism. Uses NOL for hotel + Interpark for concert tickets and finds it convenient that the same login covers both. Wants English UI but is fine with Korean photos and venue names; expects credit-card billing with no surprise FX fees.
호스트 박사장님 (Mr. Park), 52, Gangwon. Runs a 12-room pension on the East Sea. Yanolja Cloud user -- the calendar, pricing, and channel-manager screens are his daily UI, not the consumer app. Cares about reliable double-booking prevention, fast payout settlement, and a Korean-speaking support line. Reads English screens slowly; prefers Korean throughout.
| State | Treatment |
|---|---|
| Empty (no saved 찜) | One-line warm prompt (아직 찜한 숙소가 없어요. 어떤 여행을 떠나볼까요?) + primary CTA 둘러보기 in coral. Never an illustration filling the screen. |
| Empty (no search results) | Single line of #8C8282 body (조건에 맞는 숙소가 없어요. 날짜를 바꿔볼까요?) + secondary outline CTA 날짜 변경. |
| Empty (sold out for selected dates) | Inline soft fallback (다른 날짜 확인) directly inside the affected card -- not a full-screen state. The card stays, the price slot becomes the link. |
| Loading (first paint) | Skeleton blocks at #F5EBE1 matching the lodging-card layout -- 16:9 image box, 1 title line, 1 metadata line, 1 price line. Shimmer at 1.2s with 8% white highlight. |
| Loading (infinite scroll) | Bottom-of-list spinner in coral #F54B1E, 24px diameter. Existing cards stay visible. |
| Loading (booking submission) | Full-screen overlay with coral spinner + status copy (예약을 확정하고 있어요). Never auto-dismiss; wait for server. |
| Error (inline field) | Border becomes ~#E5342B 2px, helper text below in critical-red 13px (날짜를 다시 선택해 주세요). |
| Error (toast) | #1E1928 bg, white 14px weight 400 text, 3s auto-dismiss. Bottom of screen, 16px above tab bar. One sentence. |
| Error (payment failure) | Dedicated screen, not a toast. Critical-red icon top, one-line cause (결제가 처리되지 않았어요), one-line guidance (다른 카드를 시도해 보시겠어요?), primary CTA 다시 시도하기 in coral. |
| Success (favorite added) | Brief 200ms coral heart animation + toast 찜 목록에 담았어요. |
| Success (booking complete) | Dedicated confirmation screen. Coral check icon top, one-line past-tense sentence (예약이 완료되었어요), reservation summary card, primary 예약 내역 보기. Never a toast for a paid booking. |
| Skeleton | #F5EBE1 blocks at exact card dimensions. Discount-badge slot stays blank until resolved -- never a placeholder %. |
| Disabled | Button bg drops to #F5EBE1, text to #8C8282. Geometry stays identical to enabled state for frame stability. |
Durations (named tokens):
| Token | Value | Use |
|---|---|---|
motion-instant | 0ms | Toggle flips, checkbox state changes |
motion-fast | 150ms | Hover, focus, button press, inline favorite flash |
motion-standard | 240ms | Card taps, tab switches, bottom-sheet reveal |
motion-slow | 360ms | Booking confirmation reveal, full-sheet presentations |
motion-page | 280ms | Push/pop between routes |
Easings:
| Token | Curve | Use |
|---|---|---|
ease-enter | cubic-bezier(0.0, 0.0, 0.2, 1) | Sheets, toasts, screens entering |
ease-exit | cubic-bezier(0.4, 0.0, 1, 1) | Dismissals, pops, toast auto-close |
ease-standard | cubic-bezier(0.4, 0.0, 0.2, 1) | Two-way transitions -- expandable cards, tab content |
Spring stance. Light, controlled spring is permitted on playful interactions -- the favorite-heart bounce, the category-chip selection pop, the discount-badge enter on first paint -- because the brand is leisure and the name literally means "let's play." But spring is forbidden on payment, cancellation, and error surfaces -- bouncing a 결제하기 button reads as toy-like, and overshooting a refund confirmation looks irresponsible. Spring stays in the consumer-discovery layer; it never enters the money layer.
Signature motions.
motion-fast / ease-standard), releases on tap-up before navigation begins. Route transition then runs motion-page / ease-enter with a 16px upward push.motion-standard. The price slot fades in 80ms after, so the eye reads the % first.#F54B1E heart that scales 1.0 → 1.25 → 1.0 with spring (stiffness 220, damping 14) over motion-fast. A toast slides in from bottom on motion-standard / ease-enter.y+40px with motion-standard / ease-enter; backdrop fades to rgba(0,0,0,0.6). Dismissal is motion-fast / ease-exit -- leaving is lighter than entering.prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. Spring on hearts and badges is replaced with instant scale. Cross-fade replaces slide. The app stays fully usable; just less kinetic.Verified: 2026-05-08 (omd:add-reference initial create -- Apple-tier philosophy)
Tier 1 sources: nol.yanolja.com (consumer -- Yanolja Orange #F54B1E 8px / 52px / 16px·700 Primary CTA + coral discount badge top-left of 16:9 image + 어디로 갈까요? search + 라이브 단독! / 플래시 특가 / 얼리버드특가 status tags); nol.yanolja.com/hotel (lodging surface -- "우리도 호캉스 갈까?" promo + "다른 날짜 확인" sold-out fallback + ranking medals on leisure); yanoljagroup.com/brand_center (canonical palette -- Yanolja Orange #F54B1E Pantone 2028C/U, Light Sand #F5EBE1, Medium Gray #8C8282, Deep Gray #555055, Dark Gray #1E1928; "Multiverse of Dreams" symbol concept).
Tier 2 sources: getdesign.md/yanolja -- no record. styles.refero.design -- not searched (no record expected).
Tier 2 (Philosophy/founders): CNBC (Lee Su-jin motel-janitor origin), Wikipedia (Lee Su-jin -- 2004 Motel Story / 2005 Motel Tour acquisition / 2007 Yanolja launch), Skift + Bloomberg (SoftBank Vision Fund 2 $1.7B July 2021, ~$9B valuation, 24.9% stake), TechCrunch (Interpark 70% / $250M October 2021), PRNewswire (Yanolja Cloud + Go Global Travel May 2023), KED Global (Nasdaq IPO restructuring 2024), yanoljagroup.com/about (mission + funding ladder).
Style ref: karrot (KR consumer warmth + image-dense card grammar).
Conflicts unresolved: The brief described Yanolja as "pink/red signature." Live Tier 1 verification of yanoljagroup.com/brand_center confirms the master brand color is coral-red-orange #F54B1E (Pantone 2028C/U), not pink. Promotional surfaces on nol.yanolja.com lean visually warm and can read as coral/pink-adjacent in context, but the canonical token is documented as orange. DESIGN.md follows the canonical brand-center value.
Yanolja's interface is the digital equivalent of a Korean weekend getaway -- warm, energetic, and built around the simple proposition that playing is the best thing you can do. The home surface (now consolidated under the NOL consumer brand at nol.yanolja.com) opens on a clean white canvas (#ffffff) with deep near-black text (#1E1928) and the u
Brand
Accent
Neutrals
Semantic
Type Scale
Rendered in system-ui to clearly show scale & weight.
Fonts
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Section gap | 16px | |
| Card padding | 12px | |
| Element gap | 12px |
Border Radius
| Element | Value | Preview |
|---|---|---|
| discountMicro | 4px | |
| smallMicro | 4px | |
| buttonsStandard | 8px | |
| inputsStandard | 8px | |
| cardsStandard | 8px | |
| featuredLarge | 12px | |
| prominentLarge | 12px | |
| bottomSheet | 16px | |
| categoryPill | 9999px | |
| statusPill | 9999px | |
| searchPill | 9999px |
Elevation
Do and Don't guidelines parsed from DESIGN.md.
Do
Don't
Buttons