여기어때 Design Library
여기어때 Design Library
yeogiotte
Design System
여기어때 logo

여기어때

여기어때 (GoodChoice / Yeogiotte) is South Korea's #2 travel and lodging booking platform — a brand that turned the awkward Korean motel/pension reservation market into a clean, photo-forward booking surface that competes with Yanolja head-on. The interface opens on a clean white canvas (#ffffff) with warm dark headings (#222222) and a single saturated **Yeo

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Type Scale

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

display48px · 600 · 1.25
Design at scale
32px32px · 600 · 1.25
Section heading
heading-lg24px · 600 · 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
Pretendard_Fallback
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.
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycompact
Base unit4px
Section gap18px
Card padding12px
Element gap12px

Border Radius

ElementValuePreview
inlineTight3px
couponTight3px
memberTight3px
ratingStandard6px
buttonsComfortable8px
heroHero10px
listingCard12px
destinationCard12px
searchCard12px
filterPill9999px
hashtagPill9999px

Borders

ElementValuePreview
Outline1.5px solid #e6e6e6
Outline Border1.5px solid #e6e6e6
Brand Outline1.5px solid #1d8bff

Elevation

Subtle
Default
Elevated
Floating
Modal
04

Components

Buttons

Primary (Yeogiotte Blue Solid)
Background`#1D8BFF`
Text`#ffffff`
Bordernone
Radius8px (utility) / 10px (hero search)
Padding9px 14px (utility 40px) / 10px 18px (search 48px)
Font14px / 600 (utility) · 15px / 700 (search)
Use: Login/회원가입 solid, hero "검색" CTA, "지도 보기"
Brand Outline (Login)
Background`#ffffff`
Text`#1D8BFF`
Border1.5px solid `#1D8BFF`
Radius8px
Padding9px 14px
Font14px / 600
Use: Top-right login/회원가입 entry point
Neutral Outline (비회원 / 비회원 예약조회)
Background`#ffffff`
Text`#222222`
Border1.5px solid `#E6E6E6`
Radius8px
Padding9px 14px
Font14px / 600
Use: Guest reservation lookup, low-emphasis utility
Filter Chip (Pill)
Background`#ffffff`
Text`#222222`
Border1.5px solid `#E6E6E6`
Radius100px (pill)
Padding0px 16px
Font13px / 600
Height32px
Use: Price range, hashtag filters (`#감성숙소`, `#연인추천`), star-rating filter, amenity filter — the most-touched UI primitive on `/domestic-accommodations`. Selected state inferred to fill `#1D8BFF` on the same geometry (not statically captured).

Inputs

Search Input (Hero)
Background`rgba(255,255,255,0)` (transparent, sits inside a styled wrapper)
Text16px / 400 / `#222222`
Bordernone on the input itself; wrapper provides the visible border
Radius0 on input; 12px on the search wrapper container
Padding0 (wrapper handles spacing)
Font`search`
Placeholder`여행지나 숙소를 검색해보세요.`
Use: Home search box — paired with the 48px Yeogiotte Blue "검색" submit button on the right

Cards

Listing Card (Hotel / Motel / Pension)
Listing Card (Hotel / Motel / Pension)
Background`#ffffff`
Bordernone
Radius12px
Padding0 0 24px (photo edge-to-edge top, 24px bottom for meta)
Shadowminimal / none (cards rely on whitespace + photo for separation)
Use: The dominant content primitive — photo top, then `[type · grade · category]` metadata, then 18px / 700 name, then location + distance, then `[★ rating chip] [N명 평가]`, then price line (with strikethrough original + bold final). Used on every search-result and recommendation surface.
Destination Chip Card
Destination Chip Card
Background`#ffffff`
Bordernone
Radius12px
Padding0 (image fills, label sits below)
Use: "국내 인기 여행지", "해외 인기 여행지", "패키지 인기 여행지" rows. Image-led, label in 14px / 500.

Badges

Rating
Rating Yellow
Background`#FFC83B`
Text`#000000` (rating digits stay pure black on yellow for legibility)
Radius6px
Padding4px 5px 3px 3px
Font16px / 400
Use: Review score (`9.2`, `9.4`) on every listing card — the universal trust signal.
Promo
Promo (Flash Deal · Blue Tint)
Background`#E3F0FF`
Text`#1D8BFF`
Radius3px
Padding0px 4px
Font12px / 700
Use: "반짝특가" (flash deal) — brand-tinted promo emphasis; the only place Yeogiotte Blue appears on a non-button surface.
Member
Member-Price (Slate)
Background`#49627A`
Text`#ffffff`
Radius3px
Padding3px 4px
Font12px / 700
Use: "회원가" — distinguishes logged-in member rate without using brand blue, so it reads as utility rather than promotion.
Coupon
Coupon Red
Background`#FFEDEA`
Text`#F94239`
Radius3px
Padding0px 4px
Font12px / 700
Use: "4,500원 쿠폰 적용가", "8% 쿠폰 적용가" — coupon-applied price callout. Warm red signals discount, not error.