Yanolja Brand Center
Yanolja Brand Center
yanolja

Yanolja's design system uses #F54B1E as its primary color and Inter for typography, with 16px corner radius. 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**.

Primary
#F54B1E
Typography
Inter
Radius
16px
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

button-primary
Background#f54b1e
Text#ffffff
Radius8px
Padding16px 24px
Font16px/700 Pretendard
Use: 예약/결제 CTA, pressed #d63e14, disabled #f5ebe1 bg #8c8282 text
button-outline
Text#1e1928
Radius8px
Use: Secondary, 1px rgba(30,25,40,0.16) border, pressed #f5ebe1
button-weak
Background#f5ebe1
Text#1e1928
Radius8px
Use: Tertiary, 더 보기 / filter
button-critical
Background#e5342b
Text#ffffff
Use: Destructive, 예약 취소

Inputs

input-default
Background#ffffff
Text#1e1928
Radius8px
Use: Form input, 1px rgba(30,25,40,0.16), focus 2px #f54b1e, placeholder #8c8282

Cards

lodging-card
lodging-card
Background#ffffff
Radius8px
Padding12px 16px
Use: Image-led card, hover soft shadow

Badges

discount
discount-badge
Background#f54b1e
Text#ffffff
Radius4px
Padding2px 6px
Font12px/700 Pretendard
Use: Top-left of image discount %
category
category-chip
Background#f5ebe1
Text#1e1928
Radius9999px
Font12px/500 Pretendard
Use: Category chip, selected #f54b1e bg white text

Toasts

toast
toast
Background#1e1928
Text#ffffff
Font14px/400 Pretendard
Use: Error/success toast, 3s

Tabs

TabTabTab
nav-tab
Text#8c8282
Active#f54b1e icon + label
Use: Bottom tab bar

Related design systems