Yanolja Brand Center
Yanolja Brand Center
yanolja
Design System
Yanolja logo

Yanolja

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

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 700 · 1.25
Design at scale
32px32px · 700 · 1.25
Section heading
heading-lg24px · 700 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
Inter
Open · OFL
Designed by Rasmus Andersson. Variable font with full weight range.
Install via Google Fonts
Primary
Apple SD Gothic Neo
Systemno install needed
Apple system font for Korean.
Not publicly distributed.
Primary
Malgun Gothic
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
Primary
Apple System
Systemno install needed
macOS/iOS default — uses SF Pro automatically.
Not publicly distributed.
Primary
Apple System (Blink)
Systemno install needed
Chrome alias for Apple system font on macOS.
Not publicly distributed.
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycompact
Base unit4px
Section gap16px
Card padding12px
Element gap12px

Border Radius

ElementValuePreview
discountMicro4px
smallMicro4px
buttonsStandard8px
inputsStandard8px
cardsStandard8px
featuredLarge12px
prominentLarge12px
bottomSheet16px
categoryPill9999px
statusPill9999px
searchPill9999px

Elevation

Shadow 1
Shadow 2
Shadow 3
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • Use Yanolja Orange (#F54B1E) for primary CTAs, discount badges, and active states -- and almost nowhere else
  • Lead lodging cards with a full-bleed image -- the photo is the product
  • Show discount % before price, price before name -- discount-first hierarchy
  • Use Korean -요 sentence endings in microcopy ("어디로 갈까요?", "확인해 드릴게요")
  • Round to the 4px grid: 4, 8, 12, 16, 24, 32
  • Pretendard for both Korean and Latin -- never split fonts mid-string
  • Keep card chrome minimal -- the photo carries the visual weight

Don't

  • n't use coral for body text, dividers, or backgrounds -- it is reserved for CTA, badge, and accent
  • n't put two coral CTAs on one viewport -- demote one to neutral outline
  • n't use pure black (#000) for text -- always #1E1928
  • n't add gradients to brand surfaces -- the system is flat-color, photo-driven
  • n't use formal -습니다 endings in consumer copy -- the brand voice is friendly, not corporate
  • n't drop the discount badge to "save space" on a promo card -- it is the entire reason the card exists
  • n't skin Yanolja Orange into a "Yanolja Pink" or "Yanolja Red" variant -- the master color is #F54B1E, full stop
05

Components

Buttons

Brand Solid (Primary CTA)
Background`#F54B1E` (Yanolja Orange)
Text`#ffffff`
Radius8px
Font16px weight 700 (large), 14px weight 700 (medium/small)
Active~`#D63E14` (Yanolja Orange shade)
Disabled`#F5EBE1` background, `#8C8282` text
Min-height52px (large), 44px (medium), 36px (small)
Use: "예약하기", "결제하기", "지금 예매", main booking flow
Neutral Outline
Backgroundtransparent
Text`#1E1928`
Border1px solid rgba(30, 25, 40, 0.16)
Radius8px
Active`#F5EBE1` background
Use: "관심 숙소", "다른 날짜 확인", secondary actions
Neutral Weak
Background`#F5EBE1`
Text`#1E1928`
Radius8px
Use: Tertiary actions, "더 보기", filter buttons
Critical Solid
Background`~#E5342B`
Text`#ffffff`
Use: "예약 취소", destructive confirmations