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.
Files changed (247) hide show
  1. package/.claude/hooks/lib/preferences-parser.cjs +1 -0
  2. package/.claude/hooks/lib/preferences-writer.cjs +1 -0
  3. package/.claude/hooks/post-edit-watch.cjs +1 -0
  4. package/.claude/hooks/session-end-foldin.cjs +1 -0
  5. package/.claude/hooks/session-state-loader.cjs +1 -0
  6. package/.claude/hooks/skill-activation.cjs +1 -0
  7. package/.claude/settings.json +10 -1
  8. package/.github/assets/logo-bg.png +0 -0
  9. package/AGENTS.md +20 -1
  10. package/CHANGELOG.md +482 -0
  11. package/MIGRATION.md +103 -0
  12. package/README.ja.md +56 -19
  13. package/README.ko.md +47 -30
  14. package/README.md +48 -30
  15. package/README.zh-TW.md +59 -22
  16. package/agents/AGENT.md +8 -7
  17. package/agents/omd-codex-image.md +1 -1
  18. package/agents/omd-critic.md +6 -7
  19. package/agents/omd-designer-review.md +1 -1
  20. package/agents/omd-final-qa.md +1 -1
  21. package/agents/omd-humanizer.md +38 -0
  22. package/agents/omd-kr-writer.md +3 -4
  23. package/agents/omd-locale-adapter.md +12 -16
  24. package/agents/omd-master.md +24 -19
  25. package/agents/omd-microcopy.md +1 -1
  26. package/agents/omd-orchestrator.md +7 -8
  27. package/agents/omd-slop-auditor.md +31 -0
  28. package/agents/omd-ux-researcher.md +1 -1
  29. package/data/reference-fingerprints.json +1995 -38
  30. package/dist/bin/oh-my-design.js +16 -8
  31. package/dist/bin/oh-my-design.js.map +1 -1
  32. package/dist/chunk-UJIHCEYF.js +99 -0
  33. package/dist/chunk-UJIHCEYF.js.map +1 -0
  34. package/dist/doctor-LDWSFM3I.js +763 -0
  35. package/dist/doctor-LDWSFM3I.js.map +1 -0
  36. package/dist/install-skills-ZZFNJ2II.js +1120 -0
  37. package/dist/install-skills-ZZFNJ2II.js.map +1 -0
  38. package/docs/CLI_QUICKSTART.md +157 -0
  39. package/package.json +25 -4
  40. package/scripts/postinstall.cjs +5 -4
  41. package/skills/claude-design/SKILL.md +38 -14
  42. package/skills/claude-design/references/claude-design-flow.md +11 -11
  43. package/skills/claude-design/references/codebase-analysis.md +5 -4
  44. package/skills/omd-final-qa/SKILL.md +1 -1
  45. package/skills/omd-harness/SKILL.md +51 -50
  46. package/skills/omd-humanize/SKILL.md +116 -0
  47. package/skills/omd-humanize/agents/openai.yaml +4 -0
  48. package/skills/omd-humanize/references/locale-playbooks.md +102 -0
  49. package/skills/omd-humanize/references/sources.md +11 -0
  50. package/skills/omd-init/SKILL.md +18 -12
  51. package/skills/omd-locale-adapter/SKILL.md +58 -91
  52. package/skills/omd-orchestrator/SKILL.md +11 -5
  53. package/skills/omd-reference-capture/SKILL.md +80 -26
  54. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
  55. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
  56. package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
  57. package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
  58. package/skills/omd-slop-audit/SKILL.md +110 -0
  59. package/skills/omd-slop-audit/agents/openai.yaml +4 -0
  60. package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
  61. package/skills/omd-slop-audit/references/sources.md +24 -0
  62. package/web/references/104/DESIGN.md +354 -0
  63. package/web/references/11st/DESIGN.md +197 -316
  64. package/web/references/29cm/DESIGN.md +297 -393
  65. package/web/references/42dot/DESIGN.md +390 -0
  66. package/web/references/8percent/DESIGN.md +438 -0
  67. package/web/references/ably/DESIGN.md +267 -572
  68. package/web/references/acer/DESIGN.md +329 -0
  69. package/web/references/airbnb/DESIGN.md +219 -557
  70. package/web/references/alipay/DESIGN.md +179 -420
  71. package/web/references/apple/DESIGN.md +224 -498
  72. package/web/references/asleep/DESIGN.md +402 -0
  73. package/web/references/au/DESIGN.md +334 -0
  74. package/web/references/autopedia/DESIGN.md +382 -0
  75. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  76. package/web/references/baemin/DESIGN.md +332 -491
  77. package/web/references/banksalad/DESIGN.md +269 -180
  78. package/web/references/barogo/DESIGN.md +416 -0
  79. package/web/references/beusable/DESIGN.md +464 -0
  80. package/web/references/bilibili/DESIGN.md +206 -374
  81. package/web/references/bmw/DESIGN.md +162 -276
  82. package/web/references/brandi/DESIGN.md +184 -325
  83. package/web/references/catchtable/DESIGN.md +219 -264
  84. package/web/references/cgv/DESIGN.md +317 -0
  85. package/web/references/channeltalk/DESIGN.md +210 -336
  86. package/web/references/china-airlines/DESIGN.md +291 -0
  87. package/web/references/cjonstyle/DESIGN.md +453 -0
  88. package/web/references/class101/DESIGN.md +168 -387
  89. package/web/references/classum/DESIGN.md +228 -203
  90. package/web/references/claude/DESIGN.md +242 -479
  91. package/web/references/clay/DESIGN.md +179 -377
  92. package/web/references/clickhouse/DESIGN.md +254 -343
  93. package/web/references/cohere/DESIGN.md +214 -324
  94. package/web/references/coinone/DESIGN.md +199 -179
  95. package/web/references/corca/DESIGN.md +414 -0
  96. package/web/references/coupang/DESIGN.md +205 -475
  97. package/web/references/cursor/DESIGN.md +240 -381
  98. package/web/references/dabang/DESIGN.md +248 -213
  99. package/web/references/dable/DESIGN.md +431 -0
  100. package/web/references/datarize/DESIGN.md +217 -330
  101. package/web/references/dealicious/DESIGN.md +402 -0
  102. package/web/references/drdiary/DESIGN.md +404 -0
  103. package/web/references/elastic/DESIGN.md +238 -0
  104. package/web/references/elevenlabs/DESIGN.md +183 -321
  105. package/web/references/eslite/DESIGN.md +257 -0
  106. package/web/references/evaair/DESIGN.md +338 -0
  107. package/web/references/expo/DESIGN.md +238 -331
  108. package/web/references/familymart-tw/DESIGN.md +254 -0
  109. package/web/references/ferrari/DESIGN.md +160 -377
  110. package/web/references/figma/DESIGN.md +197 -451
  111. package/web/references/fitpet/DESIGN.md +445 -0
  112. package/web/references/flex/DESIGN.md +170 -253
  113. package/web/references/framer/DESIGN.md +197 -340
  114. package/web/references/freee/DESIGN.md +211 -533
  115. package/web/references/friendliai/DESIGN.md +431 -0
  116. package/web/references/frip/DESIGN.md +440 -0
  117. package/web/references/gangnamunni/DESIGN.md +154 -591
  118. package/web/references/gaudiolab/DESIGN.md +414 -0
  119. package/web/references/google/DESIGN.md +290 -398
  120. package/web/references/hashicorp/DESIGN.md +273 -318
  121. package/web/references/heydealer/DESIGN.md +429 -0
  122. package/web/references/humanscape/DESIGN.md +433 -0
  123. package/web/references/hyundai/DESIGN.md +158 -368
  124. package/web/references/hyundaicard/DESIGN.md +171 -121
  125. package/web/references/ibm/DESIGN.md +227 -378
  126. package/web/references/idus/DESIGN.md +450 -0
  127. package/web/references/igaworks/DESIGN.md +437 -0
  128. package/web/references/inflearn/DESIGN.md +221 -366
  129. package/web/references/intuit/DESIGN.md +244 -0
  130. package/web/references/jandi/DESIGN.md +191 -291
  131. package/web/references/jobplanet/DESIGN.md +415 -0
  132. package/web/references/kakao/DESIGN.md +287 -475
  133. package/web/references/kakaobank/DESIGN.md +220 -521
  134. package/web/references/kakaogames/DESIGN.md +220 -0
  135. package/web/references/kakaopay/DESIGN.md +207 -526
  136. package/web/references/karrot/DESIGN.md +227 -251
  137. package/web/references/kb-kookmin/DESIGN.md +308 -0
  138. package/web/references/kbank/DESIGN.md +220 -175
  139. package/web/references/kmong/DESIGN.md +281 -356
  140. package/web/references/krds/DESIGN.md +245 -19
  141. package/web/references/kream/DESIGN.md +224 -359
  142. package/web/references/kurly/DESIGN.md +211 -533
  143. package/web/references/lamborghini/DESIGN.md +198 -360
  144. package/web/references/lguplus/DESIGN.md +259 -0
  145. package/web/references/likelion/DESIGN.md +283 -0
  146. package/web/references/line/DESIGN.md +396 -355
  147. package/web/references/linear.app/DESIGN.md +209 -562
  148. package/web/references/lotteon/DESIGN.md +386 -0
  149. package/web/references/lovable/DESIGN.md +255 -349
  150. package/web/references/makinarocks/DESIGN.md +149 -349
  151. package/web/references/maum-ai/DESIGN.md +423 -0
  152. package/web/references/medibloc/DESIGN.md +425 -0
  153. package/web/references/megabox/DESIGN.md +232 -0
  154. package/web/references/mercari/DESIGN.md +217 -434
  155. package/web/references/microsoft/DESIGN.md +234 -388
  156. package/web/references/mildang/DESIGN.md +411 -0
  157. package/web/references/millie/DESIGN.md +183 -504
  158. package/web/references/minimax/DESIGN.md +264 -322
  159. package/web/references/miricanvas/DESIGN.md +182 -355
  160. package/web/references/miro/DESIGN.md +234 -232
  161. package/web/references/mistral.ai/DESIGN.md +231 -314
  162. package/web/references/mixi/DESIGN.md +234 -0
  163. package/web/references/moin/DESIGN.md +445 -0
  164. package/web/references/mongodb/DESIGN.md +219 -316
  165. package/web/references/musinsa/DESIGN.md +184 -510
  166. package/web/references/mynavi/DESIGN.md +242 -0
  167. package/web/references/myrealtrip/DESIGN.md +169 -406
  168. package/web/references/naver/DESIGN.md +328 -499
  169. package/web/references/naverwebtoon/DESIGN.md +172 -395
  170. package/web/references/nhn/DESIGN.md +169 -346
  171. package/web/references/nhncloud/DESIGN.md +185 -123
  172. package/web/references/notion/DESIGN.md +271 -475
  173. package/web/references/nrise/DESIGN.md +417 -0
  174. package/web/references/ohouse/DESIGN.md +210 -549
  175. package/web/references/oliveyoung/DESIGN.md +217 -326
  176. package/web/references/ollama/DESIGN.md +241 -308
  177. package/web/references/onestore/DESIGN.md +248 -0
  178. package/web/references/palantir/DESIGN.md +256 -0
  179. package/web/references/panasonic/DESIGN.md +276 -0
  180. package/web/references/patternfly/DESIGN.md +259 -0
  181. package/web/references/payhere/DESIGN.md +438 -0
  182. package/web/references/pega/DESIGN.md +262 -0
  183. package/web/references/peoplefund/DESIGN.md +431 -0
  184. package/web/references/petfriends/DESIGN.md +428 -0
  185. package/web/references/pinkfong/DESIGN.md +199 -367
  186. package/web/references/pinterest/DESIGN.md +258 -308
  187. package/web/references/poya/DESIGN.md +286 -0
  188. package/web/references/pozalabs/DESIGN.md +438 -0
  189. package/web/references/protopie/DESIGN.md +419 -0
  190. package/web/references/qraft/DESIGN.md +448 -0
  191. package/web/references/quotabook/DESIGN.md +449 -0
  192. package/web/references/recruit/DESIGN.md +247 -0
  193. package/web/references/remember/DESIGN.md +202 -396
  194. package/web/references/resend/DESIGN.md +274 -348
  195. package/web/references/sakura-internet/DESIGN.md +269 -0
  196. package/web/references/samsung/DESIGN.md +157 -359
  197. package/web/references/sandoll/DESIGN.md +445 -0
  198. package/web/references/sanity/DESIGN.md +241 -375
  199. package/web/references/scatterlab/DESIGN.md +412 -0
  200. package/web/references/selectstar/DESIGN.md +439 -0
  201. package/web/references/servicenow/DESIGN.md +289 -0
  202. package/web/references/shinhanbank/DESIGN.md +161 -341
  203. package/web/references/shinhancard/DESIGN.md +208 -319
  204. package/web/references/sionic/DESIGN.md +454 -0
  205. package/web/references/sktelecom/DESIGN.md +310 -0
  206. package/web/references/socar/DESIGN.md +125 -32
  207. package/web/references/softbank/DESIGN.md +231 -0
  208. package/web/references/sony/DESIGN.md +234 -0
  209. package/web/references/soop/DESIGN.md +261 -0
  210. package/web/references/spacex/DESIGN.md +184 -323
  211. package/web/references/spotify/DESIGN.md +253 -394
  212. package/web/references/squeezebits/DESIGN.md +441 -0
  213. package/web/references/stayfolio/DESIGN.md +422 -0
  214. package/web/references/stripe/DESIGN.md +212 -491
  215. package/web/references/supabase/DESIGN.md +244 -316
  216. package/web/references/tabling/DESIGN.md +415 -0
  217. package/web/references/taishinbank/DESIGN.md +243 -0
  218. package/web/references/teamlab/DESIGN.md +240 -0
  219. package/web/references/teamsparta/DESIGN.md +472 -0
  220. package/web/references/tellingme/DESIGN.md +392 -0
  221. package/web/references/tesla/DESIGN.md +244 -427
  222. package/web/references/thsr/DESIGN.md +284 -0
  223. package/web/references/thumbtack/DESIGN.md +302 -0
  224. package/web/references/together.ai/DESIGN.md +257 -304
  225. package/web/references/toss/DESIGN.md +251 -593
  226. package/web/references/toss-securities/DESIGN.md +255 -178
  227. package/web/references/tossbank/DESIGN.md +195 -491
  228. package/web/references/toyota/DESIGN.md +238 -0
  229. package/web/references/tving/DESIGN.md +197 -245
  230. package/web/references/typed/DESIGN.md +413 -0
  231. package/web/references/uber/DESIGN.md +256 -333
  232. package/web/references/udn/DESIGN.md +250 -0
  233. package/web/references/upbit/DESIGN.md +145 -256
  234. package/web/references/upstage/DESIGN.md +211 -204
  235. package/web/references/uswds/DESIGN.md +287 -0
  236. package/web/references/vercel/DESIGN.md +236 -440
  237. package/web/references/wanted/DESIGN.md +215 -487
  238. package/web/references/wise/DESIGN.md +223 -231
  239. package/web/references/wisetracker/DESIGN.md +462 -0
  240. package/web/references/wooribank/DESIGN.md +245 -0
  241. package/web/references/yanolja/DESIGN.md +250 -419
  242. package/web/references/yeogiotte/DESIGN.md +235 -418
  243. package/web/references/zapier/DESIGN.md +256 -377
  244. package/web/references/zendesk/DESIGN.md +288 -0
  245. package/web/references/zigzag/DESIGN.md +200 -621
  246. package/dist/install-skills-7UUDOLG2.js +0 -734
  247. package/dist/install-skills-7UUDOLG2.js.map +0 -1
@@ -0,0 +1,386 @@
1
+ ---
2
+ id: "lotteon"
3
+ name: "롯데ON"
4
+ country: KR
5
+ category: ecommerce
6
+ homepage: "https://www.lotteon.com/"
7
+ primary_color: "#000000"
8
+ logo:
9
+ type: favicon
10
+ slug: "https://www.google.com/s2/favicons?domain=lotteon.com&sz=128"
11
+ verified: "2026-07-14"
12
+ omd: "0.1"
13
+ verification_v2:
14
+ schema: 2
15
+ checked: "2026-07-14"
16
+ surfaces:
17
+ - { id: home, kind: storefront, url: "https://www.lotteon.com/p/display/main/lotteon", inspected: "2026-07-13" }
18
+ - { id: recent-products, kind: account-history, url: "https://www.lotteon.com/p/mylotte/recent/product", inspected: "2026-07-13" }
19
+ sources:
20
+ - { id: home-live, kind: product-surface, url: "https://www.lotteon.com/p/display/main/lotteon", captured: "2026-07-13" }
21
+ - { id: recent-products-live, kind: product-surface, url: "https://www.lotteon.com/p/mylotte/recent/product", captured: "2026-07-13" }
22
+ - { id: corporate-profile, kind: official-doc, url: "https://www.lotte.co.kr/business/compDetail.do?compCd=L207", captured: "2026-07-14" }
23
+ - { id: lotteon-story, kind: official-doc, url: "https://story.lotteon.com/", captured: "2026-07-14" }
24
+ - { id: pretendard-license, kind: license, url: "https://github.com/orioncactus/pretendard/blob/main/LICENSE", captured: "2026-07-14" }
25
+ claims:
26
+ "tokens.colors.canvas": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
27
+ "tokens.colors.field-border": *home_evidence
28
+ "tokens.colors.foreground": *home_evidence
29
+ "tokens.colors.hairline": *home_evidence
30
+ "tokens.colors.muted": *home_evidence
31
+ "tokens.colors.primary": *home_evidence
32
+ "tokens.colors.secondary": *home_evidence
33
+ "tokens.colors.tab-border": *home_evidence
34
+ "tokens.components.home-image-tab.bg": *home_evidence
35
+ "tokens.components.home-image-tab.border": *home_evidence
36
+ "tokens.components.home-image-tab.fg": *home_evidence
37
+ "tokens.components.home-image-tab.font": *home_evidence
38
+ "tokens.components.home-image-tab.height": *home_evidence
39
+ "tokens.components.home-image-tab.padding": *home_evidence
40
+ "tokens.components.home-image-tab.radius": *home_evidence
41
+ "tokens.components.home-image-tab.states": *home_evidence
42
+ "tokens.components.home-image-tab.type": *home_evidence
43
+ "tokens.components.home-image-tab.use": *home_evidence
44
+ "tokens.components.product-card.bg": *home_evidence
45
+ "tokens.components.product-card.fg": *home_evidence
46
+ "tokens.components.product-card.font": *home_evidence
47
+ "tokens.components.product-card.height": *home_evidence
48
+ "tokens.components.product-card.padding": *home_evidence
49
+ "tokens.components.product-card.radius": *home_evidence
50
+ "tokens.components.product-card.type": *home_evidence
51
+ "tokens.components.product-card.use": *home_evidence
52
+ "tokens.components.recent-products-dropdown.bg": &recent_evidence { surface_id: recent-products, source_id: recent-products-live, method: live-inspect, captured: "2026-07-13" }
53
+ "tokens.components.recent-products-dropdown.border": *recent_evidence
54
+ "tokens.components.recent-products-dropdown.fg": *recent_evidence
55
+ "tokens.components.recent-products-dropdown.font": *recent_evidence
56
+ "tokens.components.recent-products-dropdown.height": *recent_evidence
57
+ "tokens.components.recent-products-dropdown.padding": *recent_evidence
58
+ "tokens.components.recent-products-dropdown.radius": *recent_evidence
59
+ "tokens.components.recent-products-dropdown.states": *recent_evidence
60
+ "tokens.components.recent-products-dropdown.type": *recent_evidence
61
+ "tokens.components.recent-products-dropdown.use": *recent_evidence
62
+ "tokens.components.search-input.bg": *home_evidence
63
+ "tokens.components.search-input.fg": *home_evidence
64
+ "tokens.components.search-input.font": *home_evidence
65
+ "tokens.components.search-input.height": *home_evidence
66
+ "tokens.components.search-input.padding": *home_evidence
67
+ "tokens.components.search-input.radius": *home_evidence
68
+ "tokens.components.search-input.states": *home_evidence
69
+ "tokens.components.search-input.type": *home_evidence
70
+ "tokens.components.search-input.use": *home_evidence
71
+ "tokens.rounded.pill": *home_evidence
72
+ "tokens.rounded.square": *home_evidence
73
+ "tokens.shadow.flat": *home_evidence
74
+ "tokens.spacing.base": *home_evidence
75
+ "tokens.spacing.md": *home_evidence
76
+ "tokens.spacing.sm": *home_evidence
77
+ "tokens.spacing.xs": *home_evidence
78
+ "tokens.typography.body.lineHeight": *home_evidence
79
+ "tokens.typography.body.size": *home_evidence
80
+ "tokens.typography.body.use": *home_evidence
81
+ "tokens.typography.body.weight": *home_evidence
82
+ "tokens.typography.family.commerce": *home_evidence
83
+ "tokens.typography.family.navigation": *home_evidence
84
+ "tokens.typography.home-heading.lineHeight": *home_evidence
85
+ "tokens.typography.home-heading.size": *home_evidence
86
+ "tokens.typography.home-heading.use": *home_evidence
87
+ "tokens.typography.home-heading.weight": *home_evidence
88
+ "tokens.typography.tab-label.lineHeight": *home_evidence
89
+ "tokens.typography.tab-label.size": *home_evidence
90
+ "tokens.typography.tab-label.use": *home_evidence
91
+ "tokens.typography.tab-label.weight": *home_evidence
92
+
93
+ tokens:
94
+ source: live-extract
95
+ extracted: "2026-07-13"
96
+ note: "Two public product surfaces; values are limited to measured computed styles. Pretendard and NotoSansKR were loaded; Avenuel Didot and Roboto Condensed were declared-only."
97
+ colors:
98
+ primary: "#000000"
99
+ foreground: "#333333"
100
+ canvas: "#ffffff"
101
+ muted: "#757575"
102
+ secondary: "#666666"
103
+ hairline: "#e5e5e5"
104
+ field-border: "#dddddd"
105
+ tab-border: "#eeeeee"
106
+ typography:
107
+ family: { commerce: "Pretendard", navigation: "NotoSansKR" }
108
+ home-heading: { size: 22, weight: 600, lineHeight: 1.27, use: "Observed home body-heading text" }
109
+ body: { size: 14, weight: 500, lineHeight: 1.29, use: "Observed home commerce body text" }
110
+ tab-label: { size: 16, weight: 500, lineHeight: 1.31, use: "Home image-tab label" }
111
+ spacing: { xs: 2, sm: 4, md: 8, base: 16 }
112
+ rounded: { square: 0, pill: 23 }
113
+ shadow:
114
+ flat: "none"
115
+ components_harvested: true
116
+ components:
117
+ product-card: { type: card, bg: "transparent", fg: "#333333", radius: "0px", padding: "0px", height: "368px", font: "16px / 400", use: "Repeated home product-card container" }
118
+ home-image-tab: { type: tab, bg: "#ffffff", fg: "#666666", border: "1px solid #eeeeee", radius: "23px", padding: "0px 16px 0px 4px", height: "46px", font: "16px / 500", states: "default and selected captured; no hover, focus, pressed, disabled, or error values captured", use: "Home image-tab control" }
119
+ search-input: { type: input, bg: "transparent", fg: "#333333", radius: "0px", padding: "0px 28px 0px 0px", height: "30px", font: "16px / 400", states: "default captured; no hover, focus, pressed, disabled, or error values captured", use: "Home search field" }
120
+ recent-products-dropdown: { type: button, bg: "#ffffff", fg: "#333333", border: "1px solid #dddddd", radius: "0px", padding: "0px 38px 0px 16px", height: "32px", font: "13px / 400", states: "default captured; no hover, focus, pressed, disabled, or error values captured", use: "Recently viewed products dropdown trigger" }
121
+ ---
122
+
123
+ # Design System Inspiration of 롯데ON
124
+
125
+ ## 1. Visual Theme & Atmosphere
126
+
127
+ 롯데ON은 롯데 계열 상품과 오픈마켓 상품을 한 곳에서 검색·구매하도록 만든 통합 이커머스 플랫폼이며, 백화점·그로서리·전자제품·브랜드 상품을 발견하는 흐름을 함께 다룬다. 공식 기업 소개는 1996년 롯데닷컴에서 시작한 온라인 종합쇼핑의 계보와 2020년 4월 롯데ON 출범을 연결하고, 현재 서비스는 오프라인 유통 인프라와 온라인 경험을 결합한 쇼핑을 지향한다. 그 결과로 보이는 화면의 인상은 과장된 브랜드 색보다 상품·카테고리·혜택을 빠르게 읽게 하는 흰 바탕, 짙은 문자, 얇은 경계, 그리고 0px 또는 제한적인 pill 형상이다. 공식 Lotte ON Story가 말하는 ‘취향, 브랜드, 혜택을 발견하는 즐거움’과 버티컬·개인화 서비스의 확장은, 이 공용 쇼핑 셸이 탐색성과 비교 가능성을 우선하는 현재 방향을 설명한다.
128
+
129
+ 두 제품 표면에서 `#ffffff` 캔버스와 `#333333` 전경색이 반복되고, `#000000`은 검색 아이콘·선택된 이미지 탭에 쓰였다. 보조 텍스트에는 `#757575`와 `#666666`, 얇은 경계에는 `#e5e5e5`·`#dddddd`·`#eeeeee`가 관찰됐다. 이는 전역 마케팅 팔레트의 선언이 아니라 2026-07-13에 캡처된 두 공개 제품 표면의 측정값이다.
130
+
131
+ 서체도 한 덩어리로 취급하지 않는다. `Pretendard`는 상품 카드와 이미지 탭 등에서 432회, `NotoSansKR`은 내비게이션·검색·목록 등에서 339회 loaded 상태로 관찰됐다. 사각형 0px이 압도적이지만, 홈 이미지 탭은 23px radius의 pill이고 원형 쇼핑몰 버튼은 50% radius였다. 이 대비는 상품 단위의 평평한 정보 밀도와 선택 컨트롤의 명확한 경계를 함께 만든다.
132
+
133
+ **Observed characteristics:**
134
+ - 두 공개 제품 표면: 홈과 최근 본 상품
135
+ - `#ffffff` 캔버스, `#333333` 본문 전경, `#000000`의 제한적 강조
136
+ - loaded family: Pretendard와 NotoSansKR
137
+ - 0px product-card geometry와 23px 홈 이미지 탭
138
+ - 2px, 4px, 8px, 16px의 반복 간격 샘플
139
+ - 상호작용 확장은 홈 이미지 탭의 selected 상태 세 건만 안전하게 관찰됨
140
+
141
+ ## 2. Color Palette & Roles
142
+
143
+ ### Core
144
+ - **Primary** — `#000000`: 관찰된 검색 아이콘 배경과 선택된 홈 이미지 탭.
145
+ - **Foreground** — `#333333`: 두 표면에서 반복된 기본 문자색.
146
+ - **Canvas** — `#ffffff`: 페이지와 탭·드롭다운의 관찰된 표면색.
147
+ - **Muted** — `#757575`: 상단 유틸리티와 보조 텍스트.
148
+ - **Secondary** — `#666666`: 선택되지 않은 홈 이미지 탭의 문자색.
149
+
150
+ ### Boundaries
151
+ - **Hairline** — `#e5e5e5`: 원형 쇼핑몰 버튼의 1px 경계.
152
+ - **Field border** — `#dddddd`: 최근 본 상품 드롭다운의 1px 경계.
153
+ - **Tab border** — `#eeeeee`: 선택되지 않은 홈 이미지 탭의 1px 경계.
154
+
155
+ `#f3f3f3`과 `#f5f5f5`도 홈에서 제한적으로 관찰됐지만 한 표면의 낮은 빈도 배경이므로 canonical color token으로 올리지 않았다. 제품 표면에서 측정되지 않은 롯데 그룹 컬러·프로모션 컬러·오류 색은 이 reference에 없다.
156
+
157
+ ## 3. Typography Rules
158
+
159
+ ### Font evidence
160
+
161
+ | Evidence class | Resolution |
162
+ |---|---|
163
+ | Official product-use | 공식 기업·서비스 소개는 서비스 방향을 설명하지만, 특정 UI family의 제품 적용을 선언하지 않는다. |
164
+ | Live computed surface-use | `Pretendard`와 `NotoSansKR` 모두 loaded FontFace가 뒷받침하는 computed family로 관찰됐다. |
165
+ | Official distributed brand asset | 이 조사에서는 제품 서체의 별도 공식 배포·라이선스 문서를 확인하지 못했다. |
166
+ | Declared-only | `Avenuel Didot`, `Roboto Condensed`는 `@font-face` 선언이 있었지만 visible usage는 0이었다. |
167
+ | Unresolved | 네이티브 앱·캠페인·로그인 후 표면의 서체는 이번 증거로 확정하지 않는다. |
168
+
169
+ - **Commerce family:** `Pretendard` — 상품 카드, 버튼, 탭 등에서 loaded 상태로 관찰.
170
+ - **Navigation family:** `NotoSansKR` — 내비게이션, 검색, 최근 본 상품 표면에서 loaded 상태로 관찰.
171
+ - **Declared-only:** `Avenuel Didot`, `Roboto Condensed` — 선언만으로 UI family나 specimen으로 승격하지 않는다.
172
+ - **Availability boundary:** 두 canonical family의 캡처된 파일 URL은 `.verification.md`에 보존했지만, 이 reference는 해당 파일의 재배포 권리나 라이선스를 주장하지 않는다.
173
+
174
+ ### Captured hierarchy
175
+
176
+ | Role | Size | Weight | Line height | Captured surface |
177
+ |---|---:|---:|---:|---|
178
+ | Home body heading | 22px | 600 | 28px | Home |
179
+ | Home commerce body | 14px | 500 | 18px | Home |
180
+ | Home image-tab label | 16px | 500 | 21px | Home |
181
+ | Home search field | 16px | 400 | 30px | Home |
182
+ | Recent-products dropdown | 13px | 400 | normal | Recent products |
183
+
184
+ The three tokenized roles retain their measured sizes, weights, and line-height ratios. The remaining rows are useful measured siblings, not an invented universal type scale.
185
+
186
+ ## 4. Component Stylings
187
+
188
+ ### Product Card
189
+
190
+ **Home product-card container**
191
+ - Type: card
192
+ - Background: transparent
193
+ - Text: `#333333`
194
+ - Radius: 0px
195
+ - Padding: 0px
196
+ - Height: 368px
197
+ - Font: 16px at weight 400
198
+ - Use: repeated home product-card container
199
+
200
+ ### Home Image Tab
201
+
202
+ **Default and selected capture**
203
+ - Type: tab
204
+ - Background: `#ffffff`
205
+ - Text: `#666666`
206
+ - Border: 1px solid `#eeeeee`
207
+ - Radius: 23px
208
+ - Padding: 0px 16px 0px 4px
209
+ - Height: 46px
210
+ - Font: 16px at weight 500
211
+ - States: default and selected captured; no hover, focus, pressed, disabled, or error values captured
212
+ - Use: home image-tab control
213
+
214
+ The selected sibling used `#000000` background and `#ffffff` text with the same 23px radius, 46px height, and padding. Only selected state changes were observed through three tab interactions.
215
+
216
+ ### Search Input
217
+
218
+ **Home search field**
219
+ - Type: input
220
+ - Background: transparent
221
+ - Text: `#333333`
222
+ - Radius: 0px
223
+ - Padding: 0px 28px 0px 0px
224
+ - Height: 30px
225
+ - Font: 16px at weight 400
226
+ - States: default captured; no hover, focus, pressed, disabled, or error values captured
227
+ - Use: home search field
228
+
229
+ ### Recent Products Dropdown
230
+
231
+ **Default trigger**
232
+ - Type: button
233
+ - Background: `#ffffff`
234
+ - Text: `#333333`
235
+ - Border: 1px solid `#dddddd`
236
+ - Radius: 0px
237
+ - Padding: 0px 38px 0px 16px
238
+ - Height: 32px
239
+ - Font: 13px at weight 400
240
+ - States: default captured; no hover, focus, pressed, disabled, or error values captured
241
+ - Use: recently viewed products dropdown trigger
242
+
243
+ The supplied evidence contains 38 component variants across card, listItem, button, input, and tab classifications. Static default geometry is retained even where no interaction-specific values were observed; only unobserved interactive states are omitted.
244
+
245
+ ---
246
+ **Verified:** 2026-07-14
247
+ **Tier 1 sources:** https://www.lotteon.com/p/display/main/lotteon ; https://www.lotteon.com/p/mylotte/recent/product
248
+ **Tier 2 sources:** https://getdesign.md/lotteon attempted on 2026-07-14; no accessible brand-specific result was returned by the search environment. https://styles.refero.design/?q=lotteon attempted on 2026-07-14; no accessible brand-specific result was returned by the search environment.
249
+ **Conflicts unresolved:** none
250
+
251
+ Tier 2 supplied no component or token value; all promoted visual values come from the supplied Tier 1 evidence bundle.
252
+
253
+ ## 5. Layout Principles
254
+
255
+ The home surface combines a centered search field, horizontal category navigation, image-tab selection, and repeated product-card containers. The recent-products surface changes density: utility rows, list structures, tabs, and a 32px dropdown permit scanning a personal commerce history. Preserve this distinction rather than applying the large home product-card geometry to every commerce context.
256
+
257
+ Measured spacing samples recur at 2px, 4px, 8px, and 16px. They are observed values rather than an assertion of a complete mathematical scale. The home product-card contains a 220px-wide, 368px-tall outer container; its visual sub-area is 220px square, but that sub-area is not separately promoted as a component token.
258
+
259
+ ## 6. Depth & Elevation
260
+
261
+ | Treatment | Captured use |
262
+ |---|---|
263
+ | Flat / no shadow | Page, product card, search field, tabs, and dropdown trigger |
264
+ | `1px solid #eeeeee` | Unselected home image tab |
265
+ | `1px solid #dddddd` | Recent-products dropdown trigger |
266
+ | `1px solid #e5e5e5` | Circular shopping-mall button |
267
+ | 23px radius | Home image-tab control |
268
+
269
+ The canonical shadow token is `none`. It reports the reusable box-shadow result in these two captures; it does not claim that overlays or uninspected transient product states have no elevation.
270
+
271
+ ## 7. Do's and Don'ts
272
+
273
+ ### Do
274
+ - Use `#ffffff`, `#333333`, and thin neutral borders for the measured public commerce surfaces.
275
+ - Preserve `Pretendard` and `NotoSansKR` as separate loaded families where the observed surface calls for them.
276
+ - Use 23px pill geometry only for the observed home image-tab control; keep the product-card container square.
277
+ - Keep product-card, tab, input, and dropdown semantics distinct.
278
+ - Describe only the captured tab selected state; request a new capture before adding hover, focus, pressed, disabled, or error styling.
279
+
280
+ ### Don't
281
+ - Don't substitute a system font for `Pretendard` or `NotoSansKR` and present it as the loaded family.
282
+ - Don't promote declared-only `Avenuel Didot` or `Roboto Condensed` as a UI font.
283
+ - Don't turn `#000000` into a universal filled CTA token; it was measured on the selected tab and search icon, not as a general button rule.
284
+ - Don't infer brand-wide red, success, error, campaign, or promotion colors from the absent evidence.
285
+ - Don't map a link or list row to button semantics without evidence.
286
+
287
+ ## 8. Responsive Behavior
288
+
289
+ The evidence bundle contains two desktop 1440px-wide product surfaces. It supports the measured component heights and list/card structure, not breakpoint rules or a mobile layout contract.
290
+
291
+ - Keep home product-card media and information grouping together when adapting width.
292
+ - Retain the 46px home tab and 30px search-input heights unless a measured responsive variant replaces them.
293
+ - Preserve the recent-products list hierarchy and its dropdown trigger as separate controls.
294
+ - Treat mobile columns, navigation collapse, touch-target expansion, sticky elements, tablet gutters, and image crop policy as `[FILL IN: controlled multi-viewport capture required]`.
295
+
296
+ ## 9. Agent Prompt Guide
297
+
298
+ ### Quick token reference
299
+ - Canvas: `#ffffff`
300
+ - Foreground: `#333333`
301
+ - Primary / selected tab: `#000000`
302
+ - Muted / secondary: `#757575`, `#666666`
303
+ - Borders: `#e5e5e5`, `#dddddd`, `#eeeeee`
304
+ - Families: Pretendard (commerce), NotoSansKR (navigation)
305
+ - Spacing samples: 2px, 4px, 8px, 16px
306
+ - Geometry: 0px square; 23px home image-tab pill
307
+
308
+ ### Construction prompts
309
+ - “Build the observed home product-card container: transparent background, `#333333` text, 0px radius, 0px padding, 368px height, 16px/400 Pretendard.”
310
+ - “Build the observed home image tab: white `#ffffff` surface, `#666666` label, 1px `#eeeeee` border, 23px radius, 46px height, and 0px 16px 0px 4px padding. The selected capture uses black `#000000` with white `#ffffff` text.”
311
+ - “Build the observed home search input: transparent background, `#333333` text, 30px height, 0px radius, and 0px 28px 0px 0px padding.”
312
+ - “Build the recently viewed-products dropdown trigger: white background, `#333333` text, 1px `#dddddd` border, square corners, 32px height, and 0px 38px 0px 16px padding.”
313
+
314
+ If a requested state, component, viewport, product flow, or brand color is absent, leave that smallest field or group absent and obtain new evidence rather than using a generic ecommerce fallback.
315
+
316
+ ## 10. Voice & Tone
317
+
318
+ Official Lotte ON materials describe a discovery-oriented commerce service: the Story home uses phrases about discovering taste, brands, and benefits, while the corporate profile describes vertical shopping services and customer benefits. This supports a concise, practical, discovery-led interface voice. It is not a published comprehensive writing standard, so it does not authorize invented error, push, legal, or accessibility copy rules.
319
+
320
+ | Do | Don't |
321
+ |---|---|
322
+ | Name the shopping subject, benefit, or next action directly. | Turn a product label into an ungrounded lifestyle claim. |
323
+ | Keep utility labels short enough for dense navigation and product rows. | Add emotive sales language where no official product wording supports it. |
324
+ | Use discovery language where a browse surface actually presents brands, benefits, or categories. | Recast operational states as a brand promise without evidence. |
325
+
326
+ ### Source-backed copy samples
327
+ - “취향을, 브랜드를, 혜택을 발견하는 즐거움” — official Lotte ON Story home.
328
+ - “고객이 원하고 만족하는 서비스를 만들어요” — official Lotte ON Story home.
329
+ - “쇼핑을 새롭게, 세상을 이롭게!” — official Lotte e-commerce corporate profile.
330
+
331
+ ## 11. Brand Narrative
332
+
333
+ 롯데 e-commerce의 공식 기업 소개에 따르면, 롯데닷컴은 1996년 국내 온라인 종합 쇼핑몰로 출발했고 롯데e커머스는 2018년 롯데쇼핑 사업부로 출범했다. 롯데ON은 2020년 4월 롯데의 통합 온라인 쇼핑 플랫폼으로 선보였으며, 계열사 상품과 오픈마켓 상품을 한 번에 검색하고 구매하는 범위를 갖는다.
334
+
335
+ 현재의 표현은 단순한 상품 나열보다 발견의 경험을 강조한다. 공식 Story는 해외직구·뷰티·그로서리·선물하기 같은 영역과 오프라인 매장 연계를 설명하고, 공식 기업 소개는 뷰티·명품·패션·키즈 버티컬과 멤버십 혜택을 현재 확장 방향으로 제시한다. 이 reference의 제품 UI 관찰은 그 방향과 일치하는 넓은 홈 탐색과 더 조밀한 개인 목록을 보여 준다.
336
+
337
+ 공개 자료가 확인하지 않은 창업자 인용, 로고의 의미, 상세 리브랜딩 연혁, 내부 브랜드 원칙은 추가하지 않는다. 이 문서가 보존하는 범위는 공식적으로 설명된 통합·발견·온오프라인 연결의 서비스 맥락과, 지정된 두 표면에서 측정된 제품 표현이다.
338
+
339
+ ## 12. Principles
340
+
341
+ The following are official service directions paraphrased from first-party material, not an invented design manifesto.
342
+
343
+ 1. **Make shopping discovery useful.** Official Story frames the service around discovering taste, brands, and benefits.
344
+ *UI implication:* Make category, brand, benefit, and search affordances legible before adding decorative treatment.
345
+ 2. **Connect online choice to offline retail strength.** Official sources describe the use of Lotte’s online know-how and offline infrastructure.
346
+ *UI implication:* Keep a clear boundary between verified product information and any unmeasured fulfilment or store-integration pattern.
347
+ 3. **Serve specialist shopping contexts.** The corporate profile identifies vertical areas including beauty, luxury, fashion, and kids.
348
+ *UI implication:* Let surface density vary by task—for example, home discovery versus recent-product scanning—rather than imposing one card treatment.
349
+ 4. **Support customers and participating brands.** Official material describes customer benefits and brand-oriented commerce support.
350
+ *UI implication:* Treat customer-facing shopping controls and seller/brand operational flows as separate surfaces unless direct UI evidence links them.
351
+
352
+ ## 13. Personas
353
+
354
+ These are service-role archetypes grounded in first-party service descriptions, not demographic personas or user-research findings.
355
+
356
+ 1. **Integrated-shopper customer.** Searches and buys across Lotte affiliate and open-market assortment; the public service description explicitly frames this as one platform.
357
+ 2. **Vertical-service shopper.** Explores beauty, luxury, fashion, or kids-focused shopping areas and related benefits described by the corporate profile.
358
+ 3. **Participating brand or seller.** Uses the broader e-commerce offering to reach customers; the official profile describes brand-store and commerce-support services, but this capture does not validate its operational UI.
359
+
360
+ No age, income, motivation, task-success rate, or behavioral preference is inferred beyond those stated service roles.
361
+
362
+ ## 14. States
363
+
364
+ | State | Verified treatment |
365
+ |---|---|
366
+ | Tab default | Home image tab: `#ffffff` background, `#666666` text, 1px `#eeeeee` border, 23px radius |
367
+ | Tab selected | Home image tab: `#000000` background, `#ffffff` text; three selected-state interactions captured |
368
+ | Search input default | Transparent background, `#333333` text, 30px height, 0px radius |
369
+ | Dropdown default | `#ffffff` background, `#333333` text, 1px `#dddddd` border, 32px height |
370
+ | Product card default | Transparent `#333333` information container, 0px radius, 368px height |
371
+ | Hover | `[FILL IN: no hover value captured]` |
372
+ | Focus | `[FILL IN: no focus value captured]` |
373
+ | Pressed | `[FILL IN: no pressed value captured]` |
374
+ | Disabled | `[FILL IN: no disabled value captured]` |
375
+ | Error | `[FILL IN: no error value captured]` |
376
+ | Empty | `[FILL IN: no empty-state capture]` |
377
+ | Loading | `[FILL IN: no loading-state capture]` |
378
+ | Success | `[FILL IN: no success-state capture]` |
379
+
380
+ The interaction count of three supports the selected tab state only. It does not justify filling interactive-state values for buttons, inputs, or other tabs.
381
+
382
+ ## 15. Motion & Easing
383
+
384
+ `[FILL IN: no transition duration, easing curve, animation name, or reduced-motion behavior was present in the supplied evidence.]`
385
+
386
+ The evidence records static values and three tab selected-state interactions. Do not infer hover animation, carousel timing, modal transitions, skeleton motion, toast dismissal, or a generic ecommerce duration scale from this capture.