oh-my-design-cli 1.8.7 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/hooks/lib/preferences-parser.cjs +1 -0
- package/.claude/hooks/lib/preferences-writer.cjs +1 -0
- package/.claude/hooks/post-edit-watch.cjs +1 -0
- package/.claude/hooks/session-end-foldin.cjs +1 -0
- package/.claude/hooks/session-state-loader.cjs +1 -0
- package/.claude/hooks/skill-activation.cjs +1 -0
- package/.claude/settings.json +10 -1
- package/.github/assets/logo-bg.png +0 -0
- package/AGENTS.md +20 -1
- package/CHANGELOG.md +482 -0
- package/MIGRATION.md +103 -0
- package/README.ja.md +56 -19
- package/README.ko.md +47 -30
- package/README.md +48 -30
- package/README.zh-TW.md +59 -22
- package/agents/AGENT.md +8 -7
- package/agents/omd-codex-image.md +1 -1
- package/agents/omd-critic.md +6 -7
- package/agents/omd-designer-review.md +1 -1
- package/agents/omd-final-qa.md +1 -1
- package/agents/omd-humanizer.md +38 -0
- package/agents/omd-kr-writer.md +3 -4
- package/agents/omd-locale-adapter.md +12 -16
- package/agents/omd-master.md +24 -19
- package/agents/omd-microcopy.md +1 -1
- package/agents/omd-orchestrator.md +7 -8
- package/agents/omd-slop-auditor.md +31 -0
- package/agents/omd-ux-researcher.md +1 -1
- package/data/reference-fingerprints.json +1995 -38
- package/dist/bin/oh-my-design.js +16 -8
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/chunk-UJIHCEYF.js +99 -0
- package/dist/chunk-UJIHCEYF.js.map +1 -0
- package/dist/doctor-LDWSFM3I.js +763 -0
- package/dist/doctor-LDWSFM3I.js.map +1 -0
- package/dist/install-skills-ZZFNJ2II.js +1120 -0
- package/dist/install-skills-ZZFNJ2II.js.map +1 -0
- package/docs/CLI_QUICKSTART.md +157 -0
- package/package.json +25 -4
- package/scripts/postinstall.cjs +5 -4
- package/skills/claude-design/SKILL.md +38 -14
- package/skills/claude-design/references/claude-design-flow.md +11 -11
- package/skills/claude-design/references/codebase-analysis.md +5 -4
- package/skills/omd-final-qa/SKILL.md +1 -1
- package/skills/omd-harness/SKILL.md +51 -50
- package/skills/omd-humanize/SKILL.md +116 -0
- package/skills/omd-humanize/agents/openai.yaml +4 -0
- package/skills/omd-humanize/references/locale-playbooks.md +102 -0
- package/skills/omd-humanize/references/sources.md +11 -0
- package/skills/omd-init/SKILL.md +18 -12
- package/skills/omd-locale-adapter/SKILL.md +58 -91
- package/skills/omd-orchestrator/SKILL.md +11 -5
- package/skills/omd-reference-capture/SKILL.md +80 -26
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
- package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
- package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
- package/skills/omd-slop-audit/SKILL.md +110 -0
- package/skills/omd-slop-audit/agents/openai.yaml +4 -0
- package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
- package/skills/omd-slop-audit/references/sources.md +24 -0
- package/web/references/104/DESIGN.md +354 -0
- package/web/references/11st/DESIGN.md +197 -316
- package/web/references/29cm/DESIGN.md +297 -393
- package/web/references/42dot/DESIGN.md +390 -0
- package/web/references/8percent/DESIGN.md +438 -0
- package/web/references/ably/DESIGN.md +267 -572
- package/web/references/acer/DESIGN.md +329 -0
- package/web/references/airbnb/DESIGN.md +219 -557
- package/web/references/alipay/DESIGN.md +179 -420
- package/web/references/apple/DESIGN.md +224 -498
- package/web/references/asleep/DESIGN.md +402 -0
- package/web/references/au/DESIGN.md +334 -0
- package/web/references/autopedia/DESIGN.md +382 -0
- package/web/references/aws-cloudscape/DESIGN.md +241 -0
- package/web/references/baemin/DESIGN.md +332 -491
- package/web/references/banksalad/DESIGN.md +269 -180
- package/web/references/barogo/DESIGN.md +416 -0
- package/web/references/beusable/DESIGN.md +464 -0
- package/web/references/bilibili/DESIGN.md +206 -374
- package/web/references/bmw/DESIGN.md +162 -276
- package/web/references/brandi/DESIGN.md +184 -325
- package/web/references/catchtable/DESIGN.md +219 -264
- package/web/references/cgv/DESIGN.md +317 -0
- package/web/references/channeltalk/DESIGN.md +210 -336
- package/web/references/china-airlines/DESIGN.md +291 -0
- package/web/references/cjonstyle/DESIGN.md +453 -0
- package/web/references/class101/DESIGN.md +168 -387
- package/web/references/classum/DESIGN.md +228 -203
- package/web/references/claude/DESIGN.md +242 -479
- package/web/references/clay/DESIGN.md +179 -377
- package/web/references/clickhouse/DESIGN.md +254 -343
- package/web/references/cohere/DESIGN.md +214 -324
- package/web/references/coinone/DESIGN.md +199 -179
- package/web/references/corca/DESIGN.md +414 -0
- package/web/references/coupang/DESIGN.md +205 -475
- package/web/references/cursor/DESIGN.md +240 -381
- package/web/references/dabang/DESIGN.md +248 -213
- package/web/references/dable/DESIGN.md +431 -0
- package/web/references/datarize/DESIGN.md +217 -330
- package/web/references/dealicious/DESIGN.md +402 -0
- package/web/references/drdiary/DESIGN.md +404 -0
- package/web/references/elastic/DESIGN.md +238 -0
- package/web/references/elevenlabs/DESIGN.md +183 -321
- package/web/references/eslite/DESIGN.md +257 -0
- package/web/references/evaair/DESIGN.md +338 -0
- package/web/references/expo/DESIGN.md +238 -331
- package/web/references/familymart-tw/DESIGN.md +254 -0
- package/web/references/ferrari/DESIGN.md +160 -377
- package/web/references/figma/DESIGN.md +197 -451
- package/web/references/fitpet/DESIGN.md +445 -0
- package/web/references/flex/DESIGN.md +170 -253
- package/web/references/framer/DESIGN.md +197 -340
- package/web/references/freee/DESIGN.md +211 -533
- package/web/references/friendliai/DESIGN.md +431 -0
- package/web/references/frip/DESIGN.md +440 -0
- package/web/references/gangnamunni/DESIGN.md +154 -591
- package/web/references/gaudiolab/DESIGN.md +414 -0
- package/web/references/google/DESIGN.md +290 -398
- package/web/references/hashicorp/DESIGN.md +273 -318
- package/web/references/heydealer/DESIGN.md +429 -0
- package/web/references/humanscape/DESIGN.md +433 -0
- package/web/references/hyundai/DESIGN.md +158 -368
- package/web/references/hyundaicard/DESIGN.md +171 -121
- package/web/references/ibm/DESIGN.md +227 -378
- package/web/references/idus/DESIGN.md +450 -0
- package/web/references/igaworks/DESIGN.md +437 -0
- package/web/references/inflearn/DESIGN.md +221 -366
- package/web/references/intuit/DESIGN.md +244 -0
- package/web/references/jandi/DESIGN.md +191 -291
- package/web/references/jobplanet/DESIGN.md +415 -0
- package/web/references/kakao/DESIGN.md +287 -475
- package/web/references/kakaobank/DESIGN.md +220 -521
- package/web/references/kakaogames/DESIGN.md +220 -0
- package/web/references/kakaopay/DESIGN.md +207 -526
- package/web/references/karrot/DESIGN.md +227 -251
- package/web/references/kb-kookmin/DESIGN.md +308 -0
- package/web/references/kbank/DESIGN.md +220 -175
- package/web/references/kmong/DESIGN.md +281 -356
- package/web/references/krds/DESIGN.md +245 -19
- package/web/references/kream/DESIGN.md +224 -359
- package/web/references/kurly/DESIGN.md +211 -533
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lguplus/DESIGN.md +259 -0
- package/web/references/likelion/DESIGN.md +283 -0
- package/web/references/line/DESIGN.md +396 -355
- package/web/references/linear.app/DESIGN.md +209 -562
- package/web/references/lotteon/DESIGN.md +386 -0
- package/web/references/lovable/DESIGN.md +255 -349
- package/web/references/makinarocks/DESIGN.md +149 -349
- package/web/references/maum-ai/DESIGN.md +423 -0
- package/web/references/medibloc/DESIGN.md +425 -0
- package/web/references/megabox/DESIGN.md +232 -0
- package/web/references/mercari/DESIGN.md +217 -434
- package/web/references/microsoft/DESIGN.md +234 -388
- package/web/references/mildang/DESIGN.md +411 -0
- package/web/references/millie/DESIGN.md +183 -504
- package/web/references/minimax/DESIGN.md +264 -322
- package/web/references/miricanvas/DESIGN.md +182 -355
- package/web/references/miro/DESIGN.md +234 -232
- package/web/references/mistral.ai/DESIGN.md +231 -314
- package/web/references/mixi/DESIGN.md +234 -0
- package/web/references/moin/DESIGN.md +445 -0
- package/web/references/mongodb/DESIGN.md +219 -316
- package/web/references/musinsa/DESIGN.md +184 -510
- package/web/references/mynavi/DESIGN.md +242 -0
- package/web/references/myrealtrip/DESIGN.md +169 -406
- package/web/references/naver/DESIGN.md +328 -499
- package/web/references/naverwebtoon/DESIGN.md +172 -395
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/notion/DESIGN.md +271 -475
- package/web/references/nrise/DESIGN.md +417 -0
- package/web/references/ohouse/DESIGN.md +210 -549
- package/web/references/oliveyoung/DESIGN.md +217 -326
- package/web/references/ollama/DESIGN.md +241 -308
- package/web/references/onestore/DESIGN.md +248 -0
- package/web/references/palantir/DESIGN.md +256 -0
- package/web/references/panasonic/DESIGN.md +276 -0
- package/web/references/patternfly/DESIGN.md +259 -0
- package/web/references/payhere/DESIGN.md +438 -0
- package/web/references/pega/DESIGN.md +262 -0
- package/web/references/peoplefund/DESIGN.md +431 -0
- package/web/references/petfriends/DESIGN.md +428 -0
- package/web/references/pinkfong/DESIGN.md +199 -367
- package/web/references/pinterest/DESIGN.md +258 -308
- package/web/references/poya/DESIGN.md +286 -0
- package/web/references/pozalabs/DESIGN.md +438 -0
- package/web/references/protopie/DESIGN.md +419 -0
- package/web/references/qraft/DESIGN.md +448 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/recruit/DESIGN.md +247 -0
- package/web/references/remember/DESIGN.md +202 -396
- package/web/references/resend/DESIGN.md +274 -348
- package/web/references/sakura-internet/DESIGN.md +269 -0
- package/web/references/samsung/DESIGN.md +157 -359
- package/web/references/sandoll/DESIGN.md +445 -0
- package/web/references/sanity/DESIGN.md +241 -375
- package/web/references/scatterlab/DESIGN.md +412 -0
- package/web/references/selectstar/DESIGN.md +439 -0
- package/web/references/servicenow/DESIGN.md +289 -0
- package/web/references/shinhanbank/DESIGN.md +161 -341
- package/web/references/shinhancard/DESIGN.md +208 -319
- package/web/references/sionic/DESIGN.md +454 -0
- package/web/references/sktelecom/DESIGN.md +310 -0
- package/web/references/socar/DESIGN.md +125 -32
- package/web/references/softbank/DESIGN.md +231 -0
- package/web/references/sony/DESIGN.md +234 -0
- package/web/references/soop/DESIGN.md +261 -0
- package/web/references/spacex/DESIGN.md +184 -323
- package/web/references/spotify/DESIGN.md +253 -394
- package/web/references/squeezebits/DESIGN.md +441 -0
- package/web/references/stayfolio/DESIGN.md +422 -0
- package/web/references/stripe/DESIGN.md +212 -491
- package/web/references/supabase/DESIGN.md +244 -316
- package/web/references/tabling/DESIGN.md +415 -0
- package/web/references/taishinbank/DESIGN.md +243 -0
- package/web/references/teamlab/DESIGN.md +240 -0
- package/web/references/teamsparta/DESIGN.md +472 -0
- package/web/references/tellingme/DESIGN.md +392 -0
- package/web/references/tesla/DESIGN.md +244 -427
- package/web/references/thsr/DESIGN.md +284 -0
- package/web/references/thumbtack/DESIGN.md +302 -0
- package/web/references/together.ai/DESIGN.md +257 -304
- package/web/references/toss/DESIGN.md +251 -593
- package/web/references/toss-securities/DESIGN.md +255 -178
- package/web/references/tossbank/DESIGN.md +195 -491
- package/web/references/toyota/DESIGN.md +238 -0
- package/web/references/tving/DESIGN.md +197 -245
- package/web/references/typed/DESIGN.md +413 -0
- package/web/references/uber/DESIGN.md +256 -333
- package/web/references/udn/DESIGN.md +250 -0
- package/web/references/upbit/DESIGN.md +145 -256
- package/web/references/upstage/DESIGN.md +211 -204
- package/web/references/uswds/DESIGN.md +287 -0
- package/web/references/vercel/DESIGN.md +236 -440
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/wise/DESIGN.md +223 -231
- package/web/references/wisetracker/DESIGN.md +462 -0
- package/web/references/wooribank/DESIGN.md +245 -0
- package/web/references/yanolja/DESIGN.md +250 -419
- package/web/references/yeogiotte/DESIGN.md +235 -418
- package/web/references/zapier/DESIGN.md +256 -377
- package/web/references/zendesk/DESIGN.md +288 -0
- package/web/references/zigzag/DESIGN.md +200 -621
- package/dist/install-skills-7UUDOLG2.js +0 -734
- package/dist/install-skills-7UUDOLG2.js.map +0 -1
|
@@ -8,58 +8,118 @@ primary_color: "#000000"
|
|
|
8
8
|
logo:
|
|
9
9
|
type: favicon
|
|
10
10
|
slug: "https://www.google.com/s2/favicons?domain=yanolja.com&sz=128"
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-13"
|
|
12
12
|
omd: "0.1"
|
|
13
13
|
ds:
|
|
14
14
|
name: Yanolja Brand Center
|
|
15
15
|
url: "https://www.yanoljagroup.com/brand_center"
|
|
16
16
|
type: brand
|
|
17
|
-
description: Yanolja
|
|
17
|
+
description: Official Yanolja Group identity guidance; it is separate from the live NOL consumer-product chrome documented below.
|
|
18
18
|
og_image: "https://www.yanoljagroup.com/common/assets/yanolja_colored_og_image.jpg"
|
|
19
|
+
verification_v2:
|
|
20
|
+
schema: 2
|
|
21
|
+
checked: "2026-07-13"
|
|
22
|
+
surfaces:
|
|
23
|
+
- { id: home, kind: product, url: "https://nol.yanolja.com/", inspected: "2026-07-13" }
|
|
24
|
+
- { id: hotel, kind: product, url: "https://nol.yanolja.com/sub-home/hotel", inspected: "2026-07-13" }
|
|
25
|
+
- { id: leisure, kind: product, url: "https://nol.yanolja.com/sub-home/leisure", inspected: "2026-07-13" }
|
|
26
|
+
- { id: brand-center, kind: brand, url: "https://www.yanoljagroup.com/brand_center", inspected: "2026-07-13" }
|
|
27
|
+
sources:
|
|
28
|
+
- { id: home-live, kind: product-surface, url: "https://nol.yanolja.com/", captured: "2026-07-13" }
|
|
29
|
+
- { id: hotel-live, kind: product-surface, url: "https://nol.yanolja.com/sub-home/hotel", captured: "2026-07-13" }
|
|
30
|
+
- { id: leisure-live, kind: product-surface, url: "https://nol.yanolja.com/sub-home/leisure", captured: "2026-07-13" }
|
|
31
|
+
- { id: brand-center-source, kind: brand-asset, url: "https://www.yanoljagroup.com/brand_center", captured: "2026-07-13" }
|
|
32
|
+
- { id: yanolja-3, kind: official-doc, url: "https://www.yanoljagroup.com/en/press_release/view?id=1534", captured: "2026-07-13" }
|
|
33
|
+
- { id: pretendard-license, kind: license, url: "https://github.com/orioncactus/pretendard", captured: "2026-07-13" }
|
|
34
|
+
conflicts: []
|
|
35
|
+
claims:
|
|
36
|
+
"tokens.colors.brand-yanolja-orange": &brand { surface_id: brand-center, source_id: brand-center-source, method: official-brand-asset, captured: "2026-07-13" }
|
|
37
|
+
"tokens.colors.canvas": &live { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
|
|
38
|
+
"tokens.colors.foreground": *live
|
|
39
|
+
"tokens.colors.hairline": *live
|
|
40
|
+
"tokens.colors.muted": *live
|
|
41
|
+
"tokens.colors.primary": *live
|
|
42
|
+
"tokens.colors.surface-hover": *live
|
|
43
|
+
"tokens.colors.surface-muted": *live
|
|
44
|
+
"tokens.components.neutral-badge.bg": &hotel { surface_id: hotel, source_id: hotel-live, method: computed-style, captured: "2026-07-13" }
|
|
45
|
+
"tokens.components.neutral-badge.fg": *hotel
|
|
46
|
+
"tokens.components.neutral-badge.font": *hotel
|
|
47
|
+
"tokens.components.neutral-badge.padding": *hotel
|
|
48
|
+
"tokens.components.neutral-badge.radius": *hotel
|
|
49
|
+
"tokens.components.neutral-badge.type": *hotel
|
|
50
|
+
"tokens.components.neutral-badge.use": *hotel
|
|
51
|
+
"tokens.components.utility-button.bg": *live
|
|
52
|
+
"tokens.components.utility-button.fg": *live
|
|
53
|
+
"tokens.components.utility-button.font": *live
|
|
54
|
+
"tokens.components.utility-button.hover": *live
|
|
55
|
+
"tokens.components.utility-button.padding": *live
|
|
56
|
+
"tokens.components.utility-button.radius": *live
|
|
57
|
+
"tokens.components.utility-button.type": *live
|
|
58
|
+
"tokens.components.utility-button.use": *live
|
|
59
|
+
"tokens.rounded.full": *live
|
|
60
|
+
"tokens.rounded.md": *live
|
|
61
|
+
"tokens.rounded.sm": *live
|
|
62
|
+
"tokens.shadow.utility": *live
|
|
63
|
+
"tokens.spacing.base": *live
|
|
64
|
+
"tokens.spacing.lg": *live
|
|
65
|
+
"tokens.spacing.md": *live
|
|
66
|
+
"tokens.spacing.sm": *live
|
|
67
|
+
"tokens.spacing.xl": *live
|
|
68
|
+
"tokens.spacing.xs": *live
|
|
69
|
+
"tokens.spacing.xxl": *live
|
|
70
|
+
"tokens.spacing.xxs": *live
|
|
71
|
+
"tokens.typography.action.lineHeight": *live
|
|
72
|
+
"tokens.typography.action.size": *live
|
|
73
|
+
"tokens.typography.action.use": *live
|
|
74
|
+
"tokens.typography.action.weight": *live
|
|
75
|
+
"tokens.typography.badge.lineHeight": *hotel
|
|
76
|
+
"tokens.typography.badge.size": *hotel
|
|
77
|
+
"tokens.typography.badge.use": *hotel
|
|
78
|
+
"tokens.typography.badge.weight": *hotel
|
|
79
|
+
"tokens.typography.body.lineHeight": *live
|
|
80
|
+
"tokens.typography.body.size": *live
|
|
81
|
+
"tokens.typography.body.use": *live
|
|
82
|
+
"tokens.typography.body.weight": *live
|
|
83
|
+
"tokens.typography.display.lineHeight": *live
|
|
84
|
+
"tokens.typography.display.size": *live
|
|
85
|
+
"tokens.typography.display.use": *live
|
|
86
|
+
"tokens.typography.display.weight": *live
|
|
87
|
+
"tokens.typography.family.sans": *live
|
|
88
|
+
"tokens.typography.label.lineHeight": *live
|
|
89
|
+
"tokens.typography.label.size": *live
|
|
90
|
+
"tokens.typography.label.use": *live
|
|
91
|
+
"tokens.typography.label.weight": *live
|
|
92
|
+
"tokens.typography.search.lineHeight": *hotel
|
|
93
|
+
"tokens.typography.search.size": *hotel
|
|
94
|
+
"tokens.typography.search.use": *hotel
|
|
95
|
+
"tokens.typography.search.weight": *hotel
|
|
19
96
|
tokens:
|
|
20
|
-
source:
|
|
21
|
-
extracted: "2026-
|
|
97
|
+
source: reconciled
|
|
98
|
+
extracted: "2026-07-13"
|
|
22
99
|
colors:
|
|
23
|
-
primary: "#
|
|
24
|
-
|
|
25
|
-
coral-tint: "#feeae2"
|
|
100
|
+
primary: "#000000"
|
|
101
|
+
foreground: "#1b1c1f"
|
|
26
102
|
canvas: "#ffffff"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
info: "#2d8cff"
|
|
33
|
-
success: "#1fa873"
|
|
34
|
-
warning: "#f2a600"
|
|
103
|
+
surface-muted: "#f7f8fb"
|
|
104
|
+
surface-hover: "#f2f3f7"
|
|
105
|
+
muted: "#6e6f73"
|
|
106
|
+
hairline: "#dadbdf"
|
|
107
|
+
brand-yanolja-orange: "#f54b1e"
|
|
35
108
|
typography:
|
|
36
|
-
family: { sans: "Pretendard"
|
|
37
|
-
display:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
micro: { size: 11, weight: 500, lineHeight: 1.27, use: "Legal, fine print" }
|
|
46
|
-
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
|
|
47
|
-
rounded: { sm: 4, md: 8, lg: 12, sheet: 16, full: 9999 }
|
|
109
|
+
family: { sans: "Pretendard" }
|
|
110
|
+
display: { size: 32, weight: 700, lineHeight: 1.19, use: "Observed h2 on NOL product surfaces" }
|
|
111
|
+
search: { size: 18, weight: 700, lineHeight: 1.22, use: "Observed search input text" }
|
|
112
|
+
action: { size: 16, weight: 700, lineHeight: 1.19, use: "Observed pill action" }
|
|
113
|
+
body: { size: 16, weight: 400, lineHeight: 1.19, use: "Observed outlined action" }
|
|
114
|
+
label: { size: 14, weight: 700, lineHeight: 1.21, use: "Observed 48px utility action" }
|
|
115
|
+
badge: { size: 12, weight: 400, lineHeight: 1.17, use: "Observed neutral badge" }
|
|
116
|
+
spacing: { xxs: 2, xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32 }
|
|
117
|
+
rounded: { sm: 8, md: 16, full: 9999 }
|
|
48
118
|
shadow:
|
|
49
|
-
|
|
50
|
-
standard: "0 4px 16px rgba(30,25,40,0.12)"
|
|
51
|
-
prominent: "0 8px 24px rgba(30,25,40,0.16)"
|
|
119
|
+
utility: "0 0 8px rgba(0,0,0,0.1)"
|
|
52
120
|
components:
|
|
53
|
-
button
|
|
54
|
-
|
|
55
|
-
button-weak: { type: button, bg: "#f5ebe1", fg: "#1e1928", radius: 8, use: "Tertiary, 더 보기 / filter" }
|
|
56
|
-
button-critical: { type: button, bg: "#e5342b", fg: "#ffffff", use: "Destructive, 예약 취소" }
|
|
57
|
-
input-default: { type: input, bg: "#ffffff", fg: "#1e1928", radius: 8, use: "Form input, 1px rgba(30,25,40,0.16), focus 2px #f54b1e, placeholder #8c8282" }
|
|
58
|
-
lodging-card: { type: card, bg: "#ffffff", radius: 8, padding: "12px 16px", use: "Image-led card, hover soft shadow" }
|
|
59
|
-
discount-badge: { type: badge, bg: "#f54b1e", fg: "#ffffff", radius: 4, padding: "2px 6px", font: "12px/700 Pretendard", use: "Top-left of image discount %" }
|
|
60
|
-
category-chip: { type: badge, bg: "#f5ebe1", fg: "#1e1928", radius: 9999, font: "12px/500 Pretendard", use: "Category chip, selected #f54b1e bg white text" }
|
|
61
|
-
toast: { type: toast, bg: "#1e1928", fg: "#ffffff", font: "14px/400 Pretendard", use: "Error/success toast, 3s" }
|
|
62
|
-
nav-tab: { type: tab, fg: "#8c8282", use: "Bottom tab bar", active: "#f54b1e icon + label" }
|
|
121
|
+
utility-button: { type: button, bg: "#ffffff", fg: "#000000", radius: 16, padding: "0px", font: "14px/700 Pretendard", hover: "#f7f8fb", use: "48px product utility button; hover capture switches to #f7f8fb" }
|
|
122
|
+
neutral-badge: { type: badge, bg: "#f7f8fb", fg: "#1b1c1f", radius: 9999, padding: "2px 8px 2px 6px", font: "12px/400 Pretendard", use: "26px product badge observed on hotel and leisure" }
|
|
63
123
|
components_harvested: true
|
|
64
124
|
---
|
|
65
125
|
|
|
@@ -67,442 +127,213 @@ tokens:
|
|
|
67
127
|
|
|
68
128
|
## 1. Visual Theme & Atmosphere
|
|
69
129
|
|
|
70
|
-
Yanolja
|
|
71
|
-
|
|
72
|
-
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.
|
|
130
|
+
Yanolja is a global travel-technology company whose consumer division operates NOL, a platform spanning accommodation, flights, leisure, entertainment and culture. The Group’s public identity frames that broader system as the “Multiverse of Dreams,” using Yanolja Orange as its distinctive thread; meanwhile, the live NOL product surfaces captured for this reference are visibly more restrained: white surfaces, black and charcoal text, soft cool-gray fills, and rounded utility controls. That split matters. Yanolja Group’s orange and warm-grays are verified corporate-brand assets, not evidence that the current NOL hotel or leisure UI uses an orange primary CTA. The current direction also reflects the Group’s 2026 “Yanolja 3.0” positioning around customer focus, technology, and one-team collaboration, while NOL continues to unify consumer travel, leisure, and culture services.
|
|
73
131
|
|
|
74
132
|
**Key Characteristics:**
|
|
75
|
-
- Yanolja
|
|
76
|
-
-
|
|
77
|
-
-
|
|
78
|
-
-
|
|
79
|
-
- Mobile-first super-app architecture: hotels + leisure + tickets + live commerce + flights in one shell
|
|
80
|
-
- Clean white surfaces with warm near-black headings, no gradient-heavy chrome
|
|
81
|
-
- Discount-first information hierarchy: percentage badge before price, price before name
|
|
82
|
-
- 8px standard radius across cards, buttons, and badges -- not pill-heavy, not square-corner brutal
|
|
133
|
+
- Separate the official Yanolja Group identity from the observed NOL consumer-product UI.
|
|
134
|
+
- NOL product chrome is neutral and rounded: white, `#000000`/`#1B1C1F`, `#F7F8FB`, and 16px/full radii.
|
|
135
|
+
- Yanolja Orange (`#F54B1E`) is a verified Group brand color and logo asset; this packet does not observe it as NOL’s current product-action token.
|
|
136
|
+
- Product typography is loaded Pretendard, backed by computed usage and official NOL-hosted font files.
|
|
83
137
|
|
|
84
138
|
## 2. Color Palette & Roles
|
|
85
139
|
|
|
86
|
-
###
|
|
87
|
-
- **Yanolja Orange** (`#F54B1E`): Primary CTA, brand accent, discount badges, active states. The signature coral-red-orange that defines every Yanolja and NOL touchpoint. Pantone 2028C/U.
|
|
88
|
-
- **Pure White** (`#ffffff`): Page background, card surfaces, modal panels.
|
|
89
|
-
- **Near Black** (`#1E1928`): Primary heading and text color. A warm dark with a hint of plum -- not pure `#000`, deliberately soft.
|
|
90
|
-
|
|
91
|
-
### Secondary (Brand Grays)
|
|
92
|
-
- **Light Sand** (`#F5EBE1`): Secondary surface, soft warm fill -- a brand-warm gray that pulls slightly toward orange in adjacent context.
|
|
93
|
-
- **Medium Gray** (`#8C8282`): Body and metadata text. Warm-leaning gray that complements the coral primary.
|
|
94
|
-
- **Deep Gray** (`#555055`): Strong body text, secondary headings.
|
|
95
|
-
- **Dark Gray** (`#1E1928`): Primary headings (same as Near Black).
|
|
140
|
+
### Live NOL consumer product surfaces
|
|
96
141
|
|
|
97
|
-
|
|
98
|
-
- **
|
|
99
|
-
- **
|
|
142
|
+
- **Primary ink** (`#000000`): observed text and border value across home, hotel, and leisure captures.
|
|
143
|
+
- **Foreground** (`#1B1C1F`): observed product text and border value across all three captured NOL surfaces.
|
|
144
|
+
- **Canvas / raised surface** (`#FFFFFF`): observed page and action surface.
|
|
145
|
+
- **Neutral weak fill** (`#F7F8FB`): observed badge fill and utility-button hover fill.
|
|
146
|
+
- **Neutral hover fill** (`#F2F3F7`): observed menu/action hover fill on the NOL home surface.
|
|
147
|
+
- **Muted text** (`#6E6F73`): observed on the NOL home surface.
|
|
148
|
+
- **Hairline** (`#DADBDF`): one captured NOL home control border; retain as a local border observation, not a global rule.
|
|
100
149
|
|
|
101
|
-
###
|
|
102
|
-
- **Critical Red** (`~#E5342B`): Error states, validation failures.
|
|
103
|
-
- **Informative Blue** (`~#2D8CFF`): Links and informational accents in body copy.
|
|
104
|
-
- **Positive Green** (`~#1FA873`): Confirmation states, "예약 완료" success.
|
|
105
|
-
- **Warning Amber** (`~#F2A600`): Deadline reminders, rate-change advisories.
|
|
150
|
+
### Official Yanolja Group identity assets
|
|
106
151
|
|
|
107
|
-
|
|
108
|
-
- **
|
|
109
|
-
- **Border Strong** (`rgba(30, 25, 40, 0.16)`): Input borders, defined separators.
|
|
110
|
-
- **Overlay** (`rgba(0, 0, 0, 0.6)`): Modal backdrops, full-screen takeovers.
|
|
152
|
+
- **Yanolja Orange** (`#F54B1E`): official Group primary/logo color, documented by the Brand Center with Pantone 2028C/2028U. It is not promoted to NOL product primary from this capture.
|
|
153
|
+
- **Light Gray** (`#F5EBE1`), **Medium Gray** (`#8C8282`), **Deep Gray** (`#555055`), and **Dark Gray** (`#1E1928`): official Group brand-support colors. They remain brand-context assets rather than inferred NOL UI tokens.
|
|
111
154
|
|
|
112
155
|
## 3. Typography Rules
|
|
113
156
|
|
|
114
|
-
### Font
|
|
115
|
-
|
|
116
|
-
- **
|
|
117
|
-
- **
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
| Micro | 11px | 500 | 14px | Legal, fine print |
|
|
132
|
-
|
|
133
|
-
### Principles
|
|
134
|
-
- **Discount-first weight rule**: Discount percentage and price are always weight 700; lodging name is 600; supporting metadata is 400. The eye reads `45% → 89,000원 → 그랜드 조선 부산` in that order.
|
|
135
|
-
- **Three weights only**: Regular (400), Semibold (600), Bold (700). No light, no extra-bold.
|
|
136
|
-
- **Korean-aware leading**: Line heights err generous (1.4-1.5) to accommodate Korean glyph density; tracking stays at 0em.
|
|
137
|
-
- **No italic**: Korean does not have native italic; the system avoids fake-slanting Latin fallbacks.
|
|
157
|
+
### Font evidence classes
|
|
158
|
+
|
|
159
|
+
- **Live computed surface-use — Pretendard:** The home, hotel, and leisure captures compute `Pretendard, -apple-system, "system-ui", sans-serif`. `document.fonts` reports Pretendard as loaded for 512 observed uses, and the capture records 88 NOL-hosted Pretendard variable-subset URLs under `yaimg.yanolja.com`. This establishes Pretendard as the live NOL UI family.
|
|
160
|
+
- **Official distributed font / license — Pretendard:** Pretendard’s upstream project distributes the font under SIL Open Font License 1.1. This explains the type asset’s license boundary; it does not make the upstream repository a Yanolja brand source.
|
|
161
|
+
- **Declared-only — swiper-icons:** A `swiper-icons` face is declared in the capture but has no visible usage. It is not a UI typography token.
|
|
162
|
+
- **Unresolved:** No separate display family, proprietary Yanolja typeface, or additional product font family was established by this packet.
|
|
163
|
+
|
|
164
|
+
### Observed hierarchy
|
|
165
|
+
|
|
166
|
+
| Role | Size | Weight | Line height | Provenance |
|
|
167
|
+
|---|---:|---:|---:|---|
|
|
168
|
+
| Product h2 | 32px | 700 | 38px | NOL capture, 6 occurrences |
|
|
169
|
+
| Search input | 18px | 700 | 22px | hotel + leisure input |
|
|
170
|
+
| Product action | 16px | 700 | 19px | NOL action-pill capture |
|
|
171
|
+
| Outlined action | 16px | 400 | 19px | hotel + leisure button |
|
|
172
|
+
| Utility action | 14px | 700 | 17px | home 48px button |
|
|
173
|
+
| Neutral badge | 12px | 400 | 14px | hotel + leisure badge |
|
|
138
174
|
|
|
139
175
|
## 4. Component Stylings
|
|
140
176
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
-
|
|
147
|
-
-
|
|
148
|
-
-
|
|
149
|
-
-
|
|
150
|
-
-
|
|
151
|
-
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
-
|
|
163
|
-
-
|
|
164
|
-
-
|
|
165
|
-
- Use:
|
|
166
|
-
|
|
167
|
-
**
|
|
168
|
-
- Background:
|
|
169
|
-
- Text: `#
|
|
170
|
-
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
-
|
|
174
|
-
-
|
|
175
|
-
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
-
|
|
182
|
-
-
|
|
183
|
-
-
|
|
184
|
-
-
|
|
185
|
-
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
-
|
|
191
|
-
-
|
|
192
|
-
-
|
|
193
|
-
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
177
|
+
The following are direct product observations. Selector, surface, and state provenance are retained in the verification log; names below describe the observed geometry, not an undocumented public component API.
|
|
178
|
+
|
|
179
|
+
### Utility button
|
|
180
|
+
|
|
181
|
+
**48px white utility control**
|
|
182
|
+
- Background: `#FFFFFF`
|
|
183
|
+
- Text: `#000000`
|
|
184
|
+
- Radius: 16px
|
|
185
|
+
- Shadow: `0 0 8px rgba(0,0,0,0.1)`
|
|
186
|
+
- Padding: 0px
|
|
187
|
+
- Font: 14px / 700 / Pretendard
|
|
188
|
+
- Height: 48px
|
|
189
|
+
- Hover: `#F7F8FB` background with `0 0 6px rgba(0,0,0,0.2)` shadow
|
|
190
|
+
- Use: `home::[data-omd-capture="14"]`; high-confidence, 33 occurrences across home, hotel, and leisure. Hover and pressed were captured, but only the hover computed value is asserted here.
|
|
191
|
+
|
|
192
|
+
### Action button
|
|
193
|
+
|
|
194
|
+
**White pill action**
|
|
195
|
+
- Background: `#FFFFFF`
|
|
196
|
+
- Text: `#1B1C1F`
|
|
197
|
+
- Radius: 9999px
|
|
198
|
+
- Padding: 4px 16px
|
|
199
|
+
- Font: 16px / 700 / Pretendard
|
|
200
|
+
- Height: 52px
|
|
201
|
+
- Use: `home::[data-omd-capture="50"]`; high-confidence, 6 occurrences across home and leisure.
|
|
202
|
+
|
|
203
|
+
**Outlined action**
|
|
204
|
+
- Background: `#FFFFFF`
|
|
205
|
+
- Text: `#1B1C1F`
|
|
206
|
+
- Border: 1px solid `#1B1C1F`
|
|
207
|
+
- Radius: 16px
|
|
208
|
+
- Padding: 4px 16px
|
|
209
|
+
- Font: 16px / 400 / Pretendard
|
|
210
|
+
- Height: 52px
|
|
211
|
+
- Use: `surface-2::[data-omd-capture="101"]`; high-confidence, 4 occurrences across hotel and leisure.
|
|
212
|
+
|
|
213
|
+
### Icon button
|
|
214
|
+
|
|
215
|
+
**Transparent rounded icon control**
|
|
216
|
+
- Text: `#1B1C1F`
|
|
217
|
+
- Radius: 16px
|
|
218
|
+
- Padding: 4px
|
|
219
|
+
- Font: 10px / 700 / Pretendard
|
|
220
|
+
- Height: 56px
|
|
221
|
+
- Use: `surface-2::[data-omd-capture="7"]`; high-confidence, 6 occurrences across hotel and leisure.
|
|
222
|
+
|
|
223
|
+
### Search input
|
|
224
|
+
|
|
225
|
+
**Transparent search text field**
|
|
226
|
+
- Text: `#1B1C1F`
|
|
227
|
+
- Radius: 0px
|
|
228
|
+
- Font: 18px / 700 / Pretendard
|
|
229
|
+
- Height: 22px
|
|
230
|
+
- Use: `surface-2::[data-omd-capture="1"]`; high-confidence search input observed on hotel and leisure. Container geometry and focus treatment were not captured.
|
|
231
|
+
|
|
232
|
+
### Neutral badge
|
|
233
|
+
|
|
234
|
+
**Weak neutral pill**
|
|
235
|
+
- Background: `#F7F8FB`
|
|
236
|
+
- Text: `#1B1C1F`
|
|
237
|
+
- Radius: 9999px
|
|
238
|
+
- Padding: 2px 8px 2px 6px
|
|
239
|
+
- Font: 12px / 400 / Pretendard
|
|
240
|
+
- Height: 26px
|
|
241
|
+
- Use: `surface-2::div`; high-confidence, 2 occurrences across hotel and leisure.
|
|
242
|
+
|
|
243
|
+
---
|
|
244
|
+
**Verified:** 2026-07-13
|
|
245
|
+
**Tier 1 sources:** `https://nol.yanolja.com/`; `https://nol.yanolja.com/sub-home/hotel`; `https://nol.yanolja.com/sub-home/leisure` (raw computed-style and FontFaceSet evidence in `artifacts/reference-evidence/yanolja.json`); `https://www.yanoljagroup.com/brand_center`; `https://www.yanoljagroup.com/about`; `https://www.yanoljagroup.com/yanolja_way`; `https://www.yanoljagroup.com/en/press_release/view?id=1534`
|
|
246
|
+
**Tier 2 sources:** `https://getdesign.md/yanolja` (no independently accessible record found during this run); `https://styles.refero.design/?q=yanolja` (no Yanolja-specific result surfaced in this run’s search)
|
|
247
|
+
**Conflicts unresolved:** none
|
|
248
|
+
|
|
249
|
+
Corporate-brand values and NOL product values are separate evidence domains, so neither is substituted for the other.
|
|
199
250
|
|
|
200
251
|
## 5. Layout Principles
|
|
201
252
|
|
|
202
|
-
|
|
203
|
-
- Base unit: 4px
|
|
204
|
-
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64
|
|
205
|
-
- Global gutter: 16px on mobile, 24px on tablet, 32px on desktop web
|
|
206
|
-
- Card-to-card gap: 12-16px vertical, 8-12px horizontal in grids
|
|
207
|
-
|
|
208
|
-
### Grid & Container
|
|
209
|
-
- Mobile: full-width cards with 16px horizontal gutter
|
|
210
|
-
- Tablet: 2-column grid for lodging cards
|
|
211
|
-
- Desktop web (NOL): centered content, 1280px max-width, 3-4 column lodging grid
|
|
212
|
-
- Hero promo strips: edge-to-edge, no max-width, on home only
|
|
213
|
-
|
|
214
|
-
### Whitespace Philosophy
|
|
215
|
-
- **Image-dense, copy-dense, chrome-light**: The brand sells leisure through photography. Cards must show a hero image at full bleed with minimal frame. Text below is compact, weight-driven, never airy.
|
|
216
|
-
- **Discount visibility is sacred**: A lodging card without a visible discount % feels broken. Coral badges always sit top-left of image at minimum 24px tall.
|
|
217
|
-
- **Korean text density**: Korean glyphs are wider per character than Latin. Cards budget for 2 lines of 14-16px title + 1 metadata line + 1 price line; never expand to 3 title lines.
|
|
218
|
-
|
|
219
|
-
### Border Radius Scale
|
|
220
|
-
- Micro (4px): Discount badges, small chips
|
|
221
|
-
- Standard (8px): Buttons, inputs, cards
|
|
222
|
-
- Large (12px): Featured promo cards, prominent containers
|
|
223
|
-
- Sheet (16px): Bottom sheet top corners
|
|
224
|
-
- Pill (9999px): Category chips, status tags, search bar in some surfaces
|
|
253
|
+
The capture supports a compact spacing vocabulary of 2, 4, 8, 12, 16, 20, 24, and 32px. Radius observations are mostly 0px in unframed text/content, 16px in rounded product controls, 8px on one captured bordered control, and 9999px for pills. No grid, card, responsive-breakpoint, or booking-detail layout rule is asserted because this packet did not measure one.
|
|
225
254
|
|
|
226
255
|
## 6. Depth & Elevation
|
|
227
256
|
|
|
228
|
-
|
|
229
|
-
|-------|-----------|-----|
|
|
230
|
-
| Flat | No shadow | Default cards at rest, page surfaces |
|
|
231
|
-
| Soft (s1) | `0 2px 8px rgba(30, 25, 40, 0.08)` | Card hover, list-item lift |
|
|
232
|
-
| Standard (s2) | `0 4px 16px rgba(30, 25, 40, 0.12)` | Dropdowns, popovers, bottom-sheet |
|
|
233
|
-
| Prominent (s3) | `0 8px 24px rgba(30, 25, 40, 0.16)` | Modal dialogs, full-screen takeover |
|
|
234
|
-
|
|
235
|
-
**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.
|
|
257
|
+
The verified product depth evidence is local rather than a complete elevation scale: the 48px white utility control has `0 0 8px rgba(0,0,0,0.1)` at rest and the captured hover value is `0 0 6px rgba(0,0,0,0.2)`. Other observed product controls are shadowless. No modal, popover, card, or sheet elevation token is claimed.
|
|
236
258
|
|
|
237
259
|
## 7. Do's and Don'ts
|
|
238
260
|
|
|
239
261
|
### Do
|
|
240
|
-
|
|
241
|
-
-
|
|
242
|
-
-
|
|
243
|
-
-
|
|
244
|
-
-
|
|
245
|
-
- Pretendard for both Korean and Latin -- never split fonts mid-string
|
|
246
|
-
- Keep card chrome minimal -- the photo carries the visual weight
|
|
262
|
+
|
|
263
|
+
- Treat `#000000`, `#1B1C1F`, white, and cool-neutral fills as the verified NOL product-chrome palette.
|
|
264
|
+
- Use loaded Pretendard for a NOL UI implementation when the project can load it; do not silently substitute it for a proprietary font.
|
|
265
|
+
- Preserve the 16px/full-radius distinction where the corresponding observed control calls for it.
|
|
266
|
+
- Use Yanolja Orange only when intentionally applying the separately evidenced Group identity, logo, or brand material.
|
|
247
267
|
|
|
248
268
|
### Don't
|
|
249
|
-
|
|
250
|
-
-
|
|
251
|
-
-
|
|
252
|
-
-
|
|
253
|
-
-
|
|
254
|
-
- Don't drop the discount badge to "save space" on a promo card -- it is the entire reason the card exists
|
|
255
|
-
- Don't skin Yanolja Orange into a "Yanolja Pink" or "Yanolja Red" variant -- the master color is `#F54B1E`, full stop
|
|
269
|
+
|
|
270
|
+
- Do not turn Group-brand Yanolja Orange or warm grays into a current NOL CTA, discount, error, or selected-state token without product-surface evidence.
|
|
271
|
+
- Do not invent a lodging-card, booking CTA, bottom navigation, modal, toast, or input-focus variant from this packet.
|
|
272
|
+
- Do not treat declared-only `swiper-icons` as a text family.
|
|
273
|
+
- Do not infer mobile breakpoints or motion behavior from this desktop capture.
|
|
256
274
|
|
|
257
275
|
## 8. Responsive Behavior
|
|
258
276
|
|
|
259
|
-
|
|
260
|
-
| Name | Width | Key Changes |
|
|
261
|
-
|------|-------|-------------|
|
|
262
|
-
| Mobile | <480px | Single-column cards, 16px gutter, sticky bottom tab bar |
|
|
263
|
-
| Mobile-large | 480-768px | 2-column lodging grid, expanded category strip |
|
|
264
|
-
| Tablet | 768-1024px | 3-column grid, search bar expands inline in nav |
|
|
265
|
-
| Desktop | >1024px | 4-column grid, max-width 1280px content, hover states activate |
|
|
266
|
-
|
|
267
|
-
### Touch Targets
|
|
268
|
-
- Buttons: 52px (large), 44px (medium), 36px (small)
|
|
269
|
-
- Bottom tab items: 56px height with icon + label
|
|
270
|
-
- Category chips: 32-40px height
|
|
271
|
-
- Search bar: 48-56px height (always thumb-friendly)
|
|
272
|
-
- Lodging card: full card is tappable (entire image + text region)
|
|
273
|
-
|
|
274
|
-
### Collapsing Strategy
|
|
275
|
-
- Search bar: full-width sticky on mobile, inline in nav above tablet
|
|
276
|
-
- Category strip: horizontal scroll on mobile, wrap to grid on desktop
|
|
277
|
-
- Lodging grid: 1 → 2 → 3 → 4 columns as width grows
|
|
278
|
-
- Bottom CTA bar (booking detail): sticky full-width on mobile with safe-area inset; inline beside content on desktop
|
|
279
|
-
|
|
280
|
-
### Image Behavior
|
|
281
|
-
- Lodging hero: 16:9 on cards, 4:3 on detail, full-bleed crop
|
|
282
|
-
- Activity card: square 1:1 with 8px radius
|
|
283
|
-
- Discount banner image: edge-to-edge no radius
|
|
284
|
-
- Avatar (host, reviewer): circular 9999px, 32-48px
|
|
277
|
+
No breakpoint, mobile navigation, touch-target policy, or responsive grid is documented by the supplied evidence. The packet contains three public NOL product routes, but does not establish a responsive specification.
|
|
285
278
|
|
|
286
279
|
## 9. Agent Prompt Guide
|
|
287
280
|
|
|
288
281
|
### Quick Color Reference
|
|
289
|
-
|
|
290
|
-
-
|
|
291
|
-
-
|
|
292
|
-
-
|
|
293
|
-
-
|
|
294
|
-
-
|
|
295
|
-
- Soft fill: `#F5EBE1`
|
|
296
|
-
- Border: `rgba(30, 25, 40, 0.08)`
|
|
282
|
+
|
|
283
|
+
- NOL product ink: `#000000` and `#1B1C1F`
|
|
284
|
+
- NOL product canvas: `#FFFFFF`
|
|
285
|
+
- NOL neutral weak fill: `#F7F8FB`
|
|
286
|
+
- NOL muted text: `#6E6F73`
|
|
287
|
+
- Yanolja Group brand asset: `#F54B1E` (not a verified NOL product CTA)
|
|
297
288
|
|
|
298
289
|
### Example Component Prompts
|
|
299
|
-
|
|
300
|
-
- "
|
|
301
|
-
- "
|
|
302
|
-
- "Create
|
|
303
|
-
- "Design a Yanolja discount banner card: full-bleed image, coral `#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."
|
|
290
|
+
|
|
291
|
+
- "Create a NOL-style observed product utility control: white 48px surface, 16px radius, `#000000` 14px/700 Pretendard text, and `0 0 8px rgba(0,0,0,0.1)` shadow. Its captured hover background is `#F7F8FB`."
|
|
292
|
+
- "Create an observed NOL product action pill: white background, `#1B1C1F` 16px/700 Pretendard label, 52px height, 4px 16px padding, and a full radius."
|
|
293
|
+
- "Create the observed NOL weak badge: `#F7F8FB` fill, `#1B1C1F` 12px/400 Pretendard text, 26px height, 2px 8px 2px 6px padding, and a full radius."
|
|
304
294
|
|
|
305
295
|
### Iteration Guide
|
|
306
|
-
1. Master color is `#F54B1E` -- coral-red-orange. Not pink. Not carrot-orange. Not pure red.
|
|
307
|
-
2. Discount % comes before price; price comes before lodging name. Reorder if reversed.
|
|
308
|
-
3. Pretendard handles Korean + Latin together -- do not split fonts mid-line.
|
|
309
|
-
4. Card images are 16:9 hero -- never crop to square unless it's an activity tile.
|
|
310
|
-
5. Bottom tab bar persists on mobile; use sticky bottom CTA on detail screens with safe-area inset.
|
|
311
|
-
6. Korean `-요` endings only -- formal `-습니다` reads as corporate marketing, off-brand.
|
|
312
|
-
7. The badge always wins -- if a card looks crowded, demote chrome, never demote the discount %.
|
|
313
296
|
|
|
314
|
-
|
|
297
|
+
1. Decide which evidence domain the task targets: NOL product UI or Yanolja Group identity.
|
|
298
|
+
2. Keep unmeasured component properties absent rather than filling them with a generic travel-product pattern.
|
|
299
|
+
3. Retain Pretendard only where it can be loaded; do not represent a system fallback as Pretendard.
|
|
315
300
|
|
|
316
301
|
## 10. Voice & Tone
|
|
317
302
|
|
|
318
|
-
|
|
303
|
+
Official Group language is future-facing and practical: its stated mission is to make travel “10x easier,” with Customer First, Tech-Driven Innovation, and Together as One Team as core values. The About page explains the name as “Hey, Let’s Play!” and frames the consumer platform around seamless, hyper-personalized leisure. This supports a direct, enabling tone for brand narrative; it does not establish production microcopy, error messages, Korean honorific endings, or a consumer voice guide.
|
|
319
304
|
|
|
320
|
-
| Context |
|
|
305
|
+
| Context | Verified direction |
|
|
321
306
|
|---|---|
|
|
322
|
-
|
|
|
323
|
-
|
|
|
324
|
-
|
|
|
325
|
-
| Promo headlines | Conversational invitation, often a question (`우리도 호캉스 갈까?`, `로맨틱 데이트 완벽준비!`). |
|
|
326
|
-
| Discount labels | Loud, short, numeric (`-45%`, `라이브 단독!`, `플래시 특가`, `얼리버드특가`). |
|
|
327
|
-
| Error messages | Specific, blameless, actionable (`날짜를 다시 선택해 주세요`). |
|
|
328
|
-
| Success toasts | Past-tense, single sentence (`예약이 완료되었어요`). |
|
|
329
|
-
| B2B / Cloud surfaces | Plain English, aspirational, less casual -- the audience is a hotelier, not a couple booking a pension. |
|
|
330
|
-
|
|
331
|
-
**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.
|
|
332
|
-
|
|
333
|
-
**Voice samples.**
|
|
334
|
-
|
|
335
|
-
- `어디로 갈까요?` -- search bar placeholder. <!-- verified: nol.yanolja.com/hotel, 2026-05 -->
|
|
336
|
-
- `우리도 호캉스 갈까?` -- promo headline (staycation theme). <!-- verified: nol.yanolja.com/hotel, 2026-05 -->
|
|
337
|
-
- `국내여행 준비는 NOL에서` -- consumer hero positioning. <!-- verified: nol.yanolja.com, 2026-05 -->
|
|
338
|
-
- `놀라운 특가` -- recurring promo wordplay (NOL + 놀라운 = "amazing/surprising"). <!-- verified: nol.yanolja.com, 2026-05 -->
|
|
339
|
-
- `라이브 단독!` -- live-deal exclusivity tag. <!-- verified: nol.yanolja.com/hotel, 2026-05 -->
|
|
340
|
-
- `다른 날짜 확인` -- soft fallback when sold-out (illustrative microcopy pattern). <!-- verified: nol.yanolja.com/hotel, 2026-05 -->
|
|
341
|
-
- `Hey, Let's Play!` -- English brand-name explainer on group site. <!-- verified: yanoljagroup.com/about, 2026-05 -->
|
|
307
|
+
| Corporate mission | Make travel easier, smarter, and more connected through technology. |
|
|
308
|
+
| Consumer-platform proposition | Seamless, personalized travel, leisure, and culture experiences. |
|
|
309
|
+
| Brand-name context | “Hey, Let’s Play!” is the official English explanation of Yanolja’s name. |
|
|
342
310
|
|
|
343
311
|
## 11. Brand Narrative
|
|
344
312
|
|
|
345
|
-
Yanolja
|
|
346
|
-
|
|
347
|
-
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](https://skift.com/2021/07/15/softbanks-1-7-billion-bet-on-yanolja-is-largest-investment-in-a-travel-startup-since-pandemic-began/), [Bloomberg](https://www.bloomberg.com/news/articles/2021-07-15/softbank-invests-1-7-billion-in-korea-s-yanolja-ahead-of-ipo)). 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](https://techcrunch.com/2021/10/14/softbank-backed-travel-tech-startup-yanolja-acquires-korean-e-commerce-company-interpark/)).
|
|
313
|
+
Yanolja began in 2005 and has developed from a travel and leisure platform into a global travel-technology company. Its official history describes an early focus on making hotel information and operations more accurate and less dependent on fragmented, manual processes. Today it combines enterprise travel technology with a consumer platform: NOL UNIVERSE brings accommodations, airlines, leisure activities, entertainment, sports, and culture together for travelers, while Yanolja’s enterprise offerings connect travel businesses through cloud, transaction, and AI-powered data solutions.
|
|
348
314
|
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
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.
|
|
315
|
+
The visual identity on the Group Brand Center is built around the “Multiverse of Dreams.” Its symbol represents digital connections between the travel industry and travelers, and Yanolja Orange is the recognized constant across that Group identity. In 2026, Yanolja announced “Yanolja 3.0,” identifying Customer, Technology, and One Team as the values guiding its next decade. That corporate evolution and the neutral current NOL product chrome should be read together, but not collapsed into one unproven token set.
|
|
352
316
|
|
|
353
317
|
## 12. Principles
|
|
354
318
|
|
|
355
|
-
1. **
|
|
356
|
-
2. **
|
|
357
|
-
3. **
|
|
358
|
-
4.
|
|
359
|
-
5. **Korean glyph density is a layout constraint.** Korean characters are wider per-glyph than Latin, and titles routinely run to 16-20 characters. Cards must accommodate 2 lines of 14-16px Korean title without ellipsizing the brand name. *UI implication:* card title slot budgets for 2 lines and ellipsizes on line 3 -- never on line 2.
|
|
360
|
-
6. **One color system, two surfaces.** Consumer (NOL / Yanolja) and B2B (Yanolja Cloud) share the same `#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.
|
|
361
|
-
7. **Discount badges are sacred geometry.** Top-left of image, coral background, white text, weight 700, 4-6px radius, never less than 24px tall. *UI implication:* if a localized translation overflows the badge, change the layout, not the geometry.
|
|
362
|
-
8. **The brand promises play, not luxury.** Yanolja does not present itself as a luxury concierge (Banyan Tree, Aman) or a price-aggregator commodity (Trivago). It promises the energy of a long weekend, the relief of a discount, the warmth of a friend who already booked. *UI implication:* avoid both luxury cues (gold accents, serif typefaces, full-bleed cinematic blacks) and discount-aggregator cues (yellow alarm bars, comparison-table chrome). Stay in the leisure-magazine middle.
|
|
319
|
+
1. **Customer First.** The official value says every decision begins and ends with the customer. *UI implication:* prioritize clarity and completion over decorative complexity.
|
|
320
|
+
2. **Tech-Driven Innovation.** The Group says technology should redefine experiences. *UI implication:* make technological assistance legible and useful, rather than adding visual novelty without a task benefit.
|
|
321
|
+
3. **Together as One Team.** The official value centers shared goals and mutual support. *UI implication:* keep handoffs between travel planning, booking, and support coherent; this is a product-design interpretation, not a published component rule.
|
|
322
|
+
4. **Brand and product domains are distinct.** The Brand Center’s orange identity and the captured NOL neutral UI are both authoritative inside their own domains. *UI implication:* do not use one domain as evidence for the other.
|
|
363
323
|
|
|
364
324
|
## 13. Personas
|
|
365
325
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
**서연 (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.
|
|
369
|
-
|
|
370
|
-
**민준 (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.
|
|
326
|
+
This reference records verified stakeholder groups, not synthetic personas.
|
|
371
327
|
|
|
372
|
-
**
|
|
373
|
-
|
|
374
|
-
|
|
328
|
+
- **Travelers:** receive personalized, seamless experiences across pre-trip, in-trip, and post-trip stages.
|
|
329
|
+
- **Travel enterprises:** use data-powered travel technology to improve operations and efficiency.
|
|
330
|
+
- **Consumer-platform customers:** use NOL UNIVERSE across travel, leisure, culture, entertainment, and related services.
|
|
331
|
+
- **Product and operating teams:** the Group’s One Team value emphasizes shared goals and psychological safety internally.
|
|
375
332
|
|
|
376
333
|
## 14. States
|
|
377
334
|
|
|
378
|
-
|
|
379
|
-
|---|---|
|
|
380
|
-
| **Empty (no saved 찜)** | One-line warm prompt (`아직 찜한 숙소가 없어요. 어떤 여행을 떠나볼까요?`) + primary CTA `둘러보기` in coral. Never an illustration filling the screen. |
|
|
381
|
-
| **Empty (no search results)** | Single line of `#8C8282` body (`조건에 맞는 숙소가 없어요. 날짜를 바꿔볼까요?`) + secondary outline CTA `날짜 변경`. |
|
|
382
|
-
| **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. |
|
|
383
|
-
| **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. |
|
|
384
|
-
| **Loading (infinite scroll)** | Bottom-of-list spinner in coral `#F54B1E`, 24px diameter. Existing cards stay visible. |
|
|
385
|
-
| **Loading (booking submission)** | Full-screen overlay with coral spinner + status copy (`예약을 확정하고 있어요`). Never auto-dismiss; wait for server. |
|
|
386
|
-
| **Error (inline field)** | Border becomes `~#E5342B` 2px, helper text below in critical-red 13px (`날짜를 다시 선택해 주세요`). |
|
|
387
|
-
| **Error (toast)** | `#1E1928` bg, white 14px weight 400 text, 3s auto-dismiss. Bottom of screen, 16px above tab bar. One sentence. |
|
|
388
|
-
| **Error (payment failure)** | Dedicated screen, not a toast. Critical-red icon top, one-line cause (`결제가 처리되지 않았어요`), one-line guidance (`다른 카드를 시도해 보시겠어요?`), primary CTA `다시 시도하기` in coral. |
|
|
389
|
-
| **Success (favorite added)** | Brief 200ms coral heart animation + toast `찜 목록에 담았어요`. |
|
|
390
|
-
| **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. |
|
|
391
|
-
| **Skeleton** | `#F5EBE1` blocks at exact card dimensions. Discount-badge slot stays blank until resolved -- never a placeholder %. |
|
|
392
|
-
| **Disabled** | Button bg drops to `#F5EBE1`, text to `#8C8282`. Geometry stays identical to enabled state for frame stability. |
|
|
335
|
+
No empty, loading, error, success, skeleton, or disabled-state treatment is verified by the supplied capture. Do not infer colors, timing, layouts, or copy for these states from the Group brand palette or from generic travel-product conventions.
|
|
393
336
|
|
|
394
337
|
## 15. Motion & Easing
|
|
395
338
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
| Token | Value | Use |
|
|
399
|
-
|---|---|---|
|
|
400
|
-
| `motion-instant` | 0ms | Toggle flips, checkbox state changes |
|
|
401
|
-
| `motion-fast` | 150ms | Hover, focus, button press, inline favorite flash |
|
|
402
|
-
| `motion-standard` | 240ms | Card taps, tab switches, bottom-sheet reveal |
|
|
403
|
-
| `motion-slow` | 360ms | Booking confirmation reveal, full-sheet presentations |
|
|
404
|
-
| `motion-page` | 280ms | Push/pop between routes |
|
|
405
|
-
|
|
406
|
-
**Easings:**
|
|
407
|
-
|
|
408
|
-
| Token | Curve | Use |
|
|
409
|
-
|---|---|---|
|
|
410
|
-
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, toasts, screens entering |
|
|
411
|
-
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, pops, toast auto-close |
|
|
412
|
-
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions -- expandable cards, tab content |
|
|
413
|
-
|
|
414
|
-
**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.
|
|
415
|
-
|
|
416
|
-
**Signature motions.**
|
|
417
|
-
|
|
418
|
-
1. **Lodging-card tap.** Card compresses to 97% scale on press (`motion-fast / ease-standard`), releases on tap-up before navigation begins. Route transition then runs `motion-page / ease-enter` with a 16px upward push.
|
|
419
|
-
2. **Discount-badge enter.** On first card paint, the coral discount badge scales from 0.85 → 1.0 with a soft spring (stiffness 180, damping 18) over `motion-standard`. The price slot fades in 80ms after, so the eye reads the % first.
|
|
420
|
-
3. **Favorite (찜) heart.** Tap triggers a coral `#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`.
|
|
421
|
-
4. **Bottom-sheet (date picker, region picker).** Sheet rises from `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.
|
|
422
|
-
5. **Reduce motion.** Under `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.
|
|
423
|
-
|
|
424
|
-
<!--
|
|
425
|
-
OmD v0.1 Sources -- Philosophy Layer (sections 10-15)
|
|
426
|
-
|
|
427
|
-
Tier 1 -- Direct verification (WebFetch + redirect resolution, 2026-05):
|
|
428
|
-
- https://nol.yanolja.com/ (consumer home, redirected from www.yanolja.com)
|
|
429
|
-
Confirmed: hero "국내여행 준비는 NOL에서", title "NOL | 전세계 숙소, 항공, 레저, 공연 특가",
|
|
430
|
-
promo phrase "놀라운 특가", coral discount badges, 8px card radius, white surface,
|
|
431
|
-
category nav (홈/티켓/쿠폰·혜택/특가/마이/찜/장바구니).
|
|
432
|
-
- https://nol.yanolja.com/hotel
|
|
433
|
-
Confirmed: search placeholder "어디로 갈까요?", region selector "지역선택",
|
|
434
|
-
promo "우리도 호캉스 갈까?", "인기 호텔 미리 예약!", "로맨틱 데이트 완벽준비!",
|
|
435
|
-
status tags "라이브 단독!", "플래시 특가", "얼리버드특가", fallback "다른 날짜 확인",
|
|
436
|
-
price formatting "660,000원~", coral/pink-leaning accent confirmed for promotional UI.
|
|
437
|
-
- https://nol.yanolja.com/leisure
|
|
438
|
-
Confirmed: leisure card grid, ranking medals (1-3 gold/silver/bronze),
|
|
439
|
-
status tags "신규오픈", "MD추천", "★LIVE 특가★", validity dates "05.31까지",
|
|
440
|
-
CTA "자세히보기".
|
|
441
|
-
- https://www.yanoljagroup.com/brand_center
|
|
442
|
-
Confirmed canonical brand colors: Yanolja Orange #F54B1E (Pantone 2028C/U),
|
|
443
|
-
Light Sand #F5EBE1, Medium Gray #8C8282, Deep Gray #555055, Dark Gray #1E1928.
|
|
444
|
-
Confirmed brand concept "Multiverse of Dreams".
|
|
445
|
-
- https://www.yanoljagroup.com/about
|
|
446
|
-
Confirmed mission "Making dream travels a reality for anyone on earth",
|
|
447
|
-
brand-name meaning "Hey, Let's Play!", funding milestones (Skylake 2017,
|
|
448
|
-
AJU IB 2017, Hanwha 2018, GIC + Booking Holdings 2019 $180M, KT 2019,
|
|
449
|
-
SoftBank Vision Fund II 2021 $1.7B), product taxonomy
|
|
450
|
-
(Cloud Hospitality Solution / Transaction Solution / AI Data Solution / NOL UNIVERSE).
|
|
451
|
-
|
|
452
|
-
Tier 2 -- getdesign.md / refero (WebFetch, 2026-05):
|
|
453
|
-
- https://getdesign.md/yanolja -- "No designs found for 'yanolja'". No record.
|
|
454
|
-
|
|
455
|
-
Tier 2 -- Press / philosophy (WebSearch, 2026-05):
|
|
456
|
-
- https://www.cnbc.com/2023/07/18/yanolja-founder-started-as-a-motel-janitornow-he-is-a-billionaire.html
|
|
457
|
-
Lee Su-jin orphaned, motel janitor origin, founded Yanolja 2007.
|
|
458
|
-
- https://en.wikipedia.org/wiki/Lee_Su-jin_(businessman)
|
|
459
|
-
2004 Motel Story (10K members), 2005 acquired Motel Tour (200K members),
|
|
460
|
-
2007 Yanolja launch as hotel booking site.
|
|
461
|
-
- https://skift.com/2021/07/15/softbanks-1-7-billion-bet-on-yanolja-is-largest-investment-in-a-travel-startup-since-pandemic-began/
|
|
462
|
-
SoftBank Vision Fund 2 invested $1.7B July 2021 -- largest travel-startup
|
|
463
|
-
investment since pandemic onset.
|
|
464
|
-
- https://www.bloomberg.com/news/articles/2021-07-15/softbank-invests-1-7-billion-in-korea-s-yanolja-ahead-of-ipo
|
|
465
|
-
SoftBank deal valued Yanolja at >10 trillion KRW (~$9B); 24.9% stake.
|
|
466
|
-
- https://techcrunch.com/2021/10/14/softbank-backed-travel-tech-startup-yanolja-acquires-korean-e-commerce-company-interpark/
|
|
467
|
-
Yanolja acquired 70% of Interpark for ~$250M, October 2021.
|
|
468
|
-
- https://www.prnewswire.com/news-releases/yanolja-cloud-acquires-leading-b2b-travel-solution-provider-go-global-travel-...
|
|
469
|
-
Yanolja Cloud acquired Go Global Travel May 2023; eZee + GGT + SanhaIT
|
|
470
|
-
named as Yanolja Cloud member companies.
|
|
471
|
-
- https://www.kedglobal.com/corporate-restructuring/newsView/ked202408130019
|
|
472
|
-
Group restructure ahead of Nasdaq IPO ambition.
|
|
473
|
-
|
|
474
|
-
Re-verification status:
|
|
475
|
-
- The $9B / 10 trillion KRW valuation in §11 is press-sourced, not an
|
|
476
|
-
official Yanolja disclosure. Re-verify before quoting publicly.
|
|
477
|
-
- The funding ladder (Skylake 60B, AJU IB 21B, Hanwha 30B, GIC+Booking $180M,
|
|
478
|
-
KT 20B, SoftBank $1.7B) is from yanoljagroup.com/about -- carry as-is until
|
|
479
|
-
next official update.
|
|
480
|
-
|
|
481
|
-
Personas (§13) are fictional archetypes informed by publicly described
|
|
482
|
-
Yanolja user segments (KR urban 호캉스 user, KR family pension user,
|
|
483
|
-
international concert/food tourist via Interpark cross-sell, KR pension
|
|
484
|
-
operator on Yanolja Cloud). Any resemblance to specific individuals is
|
|
485
|
-
unintended.
|
|
486
|
-
|
|
487
|
-
Interpretive claims (editorial, not documented Yanolja statements):
|
|
488
|
-
- "Coral leisure orange, sunset-adjacent" framing in §1 and §11 -- editorial
|
|
489
|
-
reading of the verified #F54B1E primary, not a sourced brand statement.
|
|
490
|
-
- "Embarrassment economy of legacy Korean motel booking" in §11 closing --
|
|
491
|
-
editorial framing of the founding thesis based on published founder
|
|
492
|
-
interviews, not a direct Yanolja quote.
|
|
493
|
-
- The spring-permitted-on-discovery / spring-forbidden-on-money stance in
|
|
494
|
-
§15 -- derived from the brand's own playful-name + leisure-positioning
|
|
495
|
-
posture; not a documented motion-system rule.
|
|
496
|
-
- The "-요 vs -습니다" register split between consumer NOL and B2B Yanolja
|
|
497
|
-
Cloud is observed across surfaces but not codified in a published voice
|
|
498
|
-
guide.
|
|
499
|
-
-->
|
|
500
|
-
|
|
501
|
-
---
|
|
502
|
-
|
|
503
|
-
**Verified:** 2026-05-08 (omd:add-reference initial create -- Apple-tier philosophy)
|
|
504
|
-
**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).
|
|
505
|
-
**Tier 2 sources:** getdesign.md/yanolja -- no record. styles.refero.design -- not searched (no record expected).
|
|
506
|
-
**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).
|
|
507
|
-
**Style ref:** `karrot` (KR consumer warmth + image-dense card grammar).
|
|
508
|
-
**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.
|
|
339
|
+
No motion duration, easing curve, animation, or reduced-motion behavior is verified by the supplied evidence. Motion should remain unspecified until a product-surface observation or official NOL documentation establishes it.
|