oh-my-design-cli 1.8.6 → 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 (275) 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 +2761 -85
  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/airbridge/DESIGN.md +451 -0
  71. package/web/references/alipay/DESIGN.md +179 -420
  72. package/web/references/apple/DESIGN.md +224 -498
  73. package/web/references/asleep/DESIGN.md +402 -0
  74. package/web/references/au/DESIGN.md +334 -0
  75. package/web/references/autopedia/DESIGN.md +382 -0
  76. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  77. package/web/references/baemin/DESIGN.md +332 -491
  78. package/web/references/banksalad/DESIGN.md +269 -180
  79. package/web/references/barogo/DESIGN.md +416 -0
  80. package/web/references/beusable/DESIGN.md +464 -0
  81. package/web/references/bigin/DESIGN.md +454 -0
  82. package/web/references/bilibili/DESIGN.md +206 -374
  83. package/web/references/bmw/DESIGN.md +162 -276
  84. package/web/references/brandi/DESIGN.md +184 -325
  85. package/web/references/buzzvil/DESIGN.md +457 -0
  86. package/web/references/cafe24/DESIGN.md +472 -0
  87. package/web/references/catchtable/DESIGN.md +219 -264
  88. package/web/references/cgv/DESIGN.md +317 -0
  89. package/web/references/channeltalk/DESIGN.md +210 -336
  90. package/web/references/china-airlines/DESIGN.md +291 -0
  91. package/web/references/cjonstyle/DESIGN.md +453 -0
  92. package/web/references/class101/DESIGN.md +168 -387
  93. package/web/references/classum/DESIGN.md +228 -203
  94. package/web/references/claude/DESIGN.md +242 -479
  95. package/web/references/clay/DESIGN.md +179 -377
  96. package/web/references/clickhouse/DESIGN.md +254 -343
  97. package/web/references/codeit/DESIGN.md +470 -0
  98. package/web/references/cohere/DESIGN.md +214 -324
  99. package/web/references/coinone/DESIGN.md +199 -179
  100. package/web/references/corca/DESIGN.md +414 -0
  101. package/web/references/coupang/DESIGN.md +205 -475
  102. package/web/references/cursor/DESIGN.md +240 -381
  103. package/web/references/dabang/DESIGN.md +248 -213
  104. package/web/references/dable/DESIGN.md +431 -0
  105. package/web/references/datarize/DESIGN.md +338 -0
  106. package/web/references/dealicious/DESIGN.md +402 -0
  107. package/web/references/drdiary/DESIGN.md +404 -0
  108. package/web/references/elastic/DESIGN.md +238 -0
  109. package/web/references/elevenlabs/DESIGN.md +183 -321
  110. package/web/references/elice/DESIGN.md +445 -0
  111. package/web/references/eslite/DESIGN.md +257 -0
  112. package/web/references/evaair/DESIGN.md +338 -0
  113. package/web/references/expo/DESIGN.md +238 -331
  114. package/web/references/familymart-tw/DESIGN.md +254 -0
  115. package/web/references/ferrari/DESIGN.md +160 -377
  116. package/web/references/figma/DESIGN.md +197 -451
  117. package/web/references/fitpet/DESIGN.md +445 -0
  118. package/web/references/flex/DESIGN.md +170 -253
  119. package/web/references/framer/DESIGN.md +197 -340
  120. package/web/references/freee/DESIGN.md +211 -533
  121. package/web/references/friendliai/DESIGN.md +431 -0
  122. package/web/references/frip/DESIGN.md +440 -0
  123. package/web/references/furiosaai/DESIGN.md +450 -0
  124. package/web/references/gangnamunni/DESIGN.md +154 -591
  125. package/web/references/gaudiolab/DESIGN.md +414 -0
  126. package/web/references/google/DESIGN.md +290 -398
  127. package/web/references/goorm/DESIGN.md +470 -0
  128. package/web/references/greencar/DESIGN.md +420 -0
  129. package/web/references/hackle/DESIGN.md +472 -0
  130. package/web/references/hashicorp/DESIGN.md +273 -318
  131. package/web/references/heydealer/DESIGN.md +429 -0
  132. package/web/references/humanscape/DESIGN.md +433 -0
  133. package/web/references/hwahae/DESIGN.md +453 -0
  134. package/web/references/hyundai/DESIGN.md +158 -368
  135. package/web/references/hyundaicard/DESIGN.md +171 -121
  136. package/web/references/ibm/DESIGN.md +227 -378
  137. package/web/references/idus/DESIGN.md +450 -0
  138. package/web/references/igaworks/DESIGN.md +437 -0
  139. package/web/references/inflearn/DESIGN.md +221 -366
  140. package/web/references/intuit/DESIGN.md +244 -0
  141. package/web/references/jandi/DESIGN.md +191 -291
  142. package/web/references/jobplanet/DESIGN.md +415 -0
  143. package/web/references/kakao/DESIGN.md +287 -475
  144. package/web/references/kakaobank/DESIGN.md +220 -521
  145. package/web/references/kakaogames/DESIGN.md +220 -0
  146. package/web/references/kakaopay/DESIGN.md +207 -526
  147. package/web/references/karrot/DESIGN.md +227 -251
  148. package/web/references/kb-kookmin/DESIGN.md +308 -0
  149. package/web/references/kbank/DESIGN.md +220 -175
  150. package/web/references/kcd/DESIGN.md +432 -0
  151. package/web/references/kmong/DESIGN.md +281 -356
  152. package/web/references/krds/DESIGN.md +245 -19
  153. package/web/references/kream/DESIGN.md +224 -359
  154. package/web/references/kurly/DESIGN.md +211 -533
  155. package/web/references/kyobobook/DESIGN.md +445 -0
  156. package/web/references/lablup/DESIGN.md +474 -0
  157. package/web/references/lamborghini/DESIGN.md +198 -360
  158. package/web/references/lemonbase/DESIGN.md +452 -0
  159. package/web/references/lguplus/DESIGN.md +259 -0
  160. package/web/references/likelion/DESIGN.md +283 -0
  161. package/web/references/line/DESIGN.md +396 -355
  162. package/web/references/linear.app/DESIGN.md +209 -562
  163. package/web/references/lotteon/DESIGN.md +386 -0
  164. package/web/references/lovable/DESIGN.md +255 -349
  165. package/web/references/makinarocks/DESIGN.md +242 -0
  166. package/web/references/maum-ai/DESIGN.md +423 -0
  167. package/web/references/medibloc/DESIGN.md +425 -0
  168. package/web/references/megabox/DESIGN.md +232 -0
  169. package/web/references/mercari/DESIGN.md +217 -434
  170. package/web/references/microsoft/DESIGN.md +234 -388
  171. package/web/references/mildang/DESIGN.md +411 -0
  172. package/web/references/millie/DESIGN.md +183 -504
  173. package/web/references/minimax/DESIGN.md +264 -322
  174. package/web/references/miricanvas/DESIGN.md +182 -355
  175. package/web/references/miro/DESIGN.md +234 -232
  176. package/web/references/mistral.ai/DESIGN.md +231 -314
  177. package/web/references/mixi/DESIGN.md +234 -0
  178. package/web/references/moin/DESIGN.md +445 -0
  179. package/web/references/mongodb/DESIGN.md +219 -316
  180. package/web/references/moreh/DESIGN.md +437 -0
  181. package/web/references/musinsa/DESIGN.md +184 -510
  182. package/web/references/mynavi/DESIGN.md +242 -0
  183. package/web/references/myrealtrip/DESIGN.md +169 -406
  184. package/web/references/naver/DESIGN.md +328 -499
  185. package/web/references/naverwebtoon/DESIGN.md +172 -395
  186. package/web/references/neosapience/DESIGN.md +441 -0
  187. package/web/references/nhn/DESIGN.md +169 -346
  188. package/web/references/nhncloud/DESIGN.md +185 -123
  189. package/web/references/nota/DESIGN.md +451 -0
  190. package/web/references/notion/DESIGN.md +271 -475
  191. package/web/references/nrise/DESIGN.md +417 -0
  192. package/web/references/ohouse/DESIGN.md +210 -549
  193. package/web/references/oliveyoung/DESIGN.md +217 -326
  194. package/web/references/ollama/DESIGN.md +241 -308
  195. package/web/references/onestore/DESIGN.md +248 -0
  196. package/web/references/palantir/DESIGN.md +256 -0
  197. package/web/references/panasonic/DESIGN.md +276 -0
  198. package/web/references/patternfly/DESIGN.md +259 -0
  199. package/web/references/payhere/DESIGN.md +438 -0
  200. package/web/references/pega/DESIGN.md +262 -0
  201. package/web/references/peoplefund/DESIGN.md +431 -0
  202. package/web/references/petfriends/DESIGN.md +428 -0
  203. package/web/references/pinkfong/DESIGN.md +199 -367
  204. package/web/references/pinterest/DESIGN.md +258 -308
  205. package/web/references/portone/DESIGN.md +446 -0
  206. package/web/references/poya/DESIGN.md +286 -0
  207. package/web/references/pozalabs/DESIGN.md +438 -0
  208. package/web/references/protopie/DESIGN.md +419 -0
  209. package/web/references/qraft/DESIGN.md +448 -0
  210. package/web/references/queenit/DESIGN.md +432 -0
  211. package/web/references/quotabook/DESIGN.md +449 -0
  212. package/web/references/rebellions/DESIGN.md +449 -0
  213. package/web/references/recruit/DESIGN.md +247 -0
  214. package/web/references/remember/DESIGN.md +202 -396
  215. package/web/references/resend/DESIGN.md +274 -348
  216. package/web/references/returnzero/DESIGN.md +460 -0
  217. package/web/references/sakura-internet/DESIGN.md +269 -0
  218. package/web/references/samsung/DESIGN.md +157 -359
  219. package/web/references/sandoll/DESIGN.md +445 -0
  220. package/web/references/sanity/DESIGN.md +241 -375
  221. package/web/references/saramin/DESIGN.md +465 -0
  222. package/web/references/scatterlab/DESIGN.md +412 -0
  223. package/web/references/selectstar/DESIGN.md +439 -0
  224. package/web/references/servicenow/DESIGN.md +289 -0
  225. package/web/references/shiftee/DESIGN.md +468 -0
  226. package/web/references/shinhanbank/DESIGN.md +161 -341
  227. package/web/references/shinhancard/DESIGN.md +208 -319
  228. package/web/references/sionic/DESIGN.md +454 -0
  229. package/web/references/sktelecom/DESIGN.md +310 -0
  230. package/web/references/socar/DESIGN.md +125 -32
  231. package/web/references/softbank/DESIGN.md +231 -0
  232. package/web/references/solapi/DESIGN.md +483 -0
  233. package/web/references/sony/DESIGN.md +234 -0
  234. package/web/references/soop/DESIGN.md +261 -0
  235. package/web/references/spacex/DESIGN.md +184 -323
  236. package/web/references/spotify/DESIGN.md +253 -394
  237. package/web/references/squeezebits/DESIGN.md +441 -0
  238. package/web/references/stayfolio/DESIGN.md +422 -0
  239. package/web/references/stripe/DESIGN.md +212 -491
  240. package/web/references/supabase/DESIGN.md +244 -316
  241. package/web/references/supertone/DESIGN.md +413 -0
  242. package/web/references/tabling/DESIGN.md +415 -0
  243. package/web/references/taishinbank/DESIGN.md +243 -0
  244. package/web/references/teamlab/DESIGN.md +240 -0
  245. package/web/references/teamsparta/DESIGN.md +472 -0
  246. package/web/references/tellingme/DESIGN.md +392 -0
  247. package/web/references/tesla/DESIGN.md +244 -427
  248. package/web/references/thsr/DESIGN.md +284 -0
  249. package/web/references/thumbtack/DESIGN.md +302 -0
  250. package/web/references/together.ai/DESIGN.md +257 -304
  251. package/web/references/toss/DESIGN.md +251 -593
  252. package/web/references/toss-securities/DESIGN.md +255 -178
  253. package/web/references/tossbank/DESIGN.md +195 -491
  254. package/web/references/toyota/DESIGN.md +238 -0
  255. package/web/references/tving/DESIGN.md +197 -245
  256. package/web/references/typed/DESIGN.md +413 -0
  257. package/web/references/uber/DESIGN.md +256 -333
  258. package/web/references/udn/DESIGN.md +250 -0
  259. package/web/references/upbit/DESIGN.md +145 -256
  260. package/web/references/upstage/DESIGN.md +211 -204
  261. package/web/references/uswds/DESIGN.md +287 -0
  262. package/web/references/vercel/DESIGN.md +236 -440
  263. package/web/references/vuno/DESIGN.md +413 -0
  264. package/web/references/wanted/DESIGN.md +215 -487
  265. package/web/references/weverse/DESIGN.md +437 -0
  266. package/web/references/wise/DESIGN.md +223 -231
  267. package/web/references/wisetracker/DESIGN.md +462 -0
  268. package/web/references/wooribank/DESIGN.md +245 -0
  269. package/web/references/yanolja/DESIGN.md +250 -419
  270. package/web/references/yeogiotte/DESIGN.md +235 -418
  271. package/web/references/zapier/DESIGN.md +256 -377
  272. package/web/references/zendesk/DESIGN.md +288 -0
  273. package/web/references/zigzag/DESIGN.md +200 -621
  274. package/dist/install-skills-7UUDOLG2.js +0 -734
  275. package/dist/install-skills-7UUDOLG2.js.map +0 -1
@@ -8,550 +8,280 @@ primary_color: "#000000"
8
8
  logo:
9
9
  type: favicon
10
10
  slug: "https://www.coupang.com/favicon.ico"
11
- verified: "2026-05-15"
11
+ verified: "2026-07-13"
12
12
  omd: "0.1"
13
13
  ds:
14
- name: Coupang Media Assets
14
+ name: Coupang Media Assets Brand Guidelines
15
15
  url: "https://news.coupang.com/coupang-media-assets-brand-guidelines-eng/"
16
16
  type: brand
17
- description: Coupang's official media-asset brand guidelines logo usage, sizing, and attribution rules.
17
+ description: Official rules for downloaded Coupang media assets, logo treatment, and attribution.
18
18
  og_image: "https://news.coupang.com/wp-content/uploads/2023/01/Coupang_2_1609.jpg"
19
+ verification_v2:
20
+ schema: 2
21
+ checked: "2026-07-13"
22
+ surfaces:
23
+ - { id: home, kind: commerce, url: "https://www.coupang.com/", inspected: "2026-07-12" }
24
+ - { id: product-a, kind: commerce-product, url: "https://www.coupang.com/vp/products/7225189423?itemId=18319675609&vendorItemId=5351802654", inspected: "2026-07-12" }
25
+ - { id: product-b, kind: commerce-product, url: "https://www.coupang.com/vp/products/7225189423?itemId=18319675609&vendorItemId=80324048129", inspected: "2026-07-12" }
26
+ sources:
27
+ - { id: home-live, kind: product-surface, url: "https://www.coupang.com/", captured: "2026-07-12" }
28
+ - { id: product-a-live, kind: product-surface, url: "https://www.coupang.com/vp/products/7225189423?itemId=18319675609&vendorItemId=5351802654", captured: "2026-07-12" }
29
+ - { id: product-b-live, kind: product-surface, url: "https://www.coupang.com/vp/products/7225189423?itemId=18319675609&vendorItemId=80324048129", captured: "2026-07-12" }
30
+ - { id: coupang-sans, kind: official-doc, url: "https://news.coupang.com/archives/19962/", captured: "2026-07-13" }
31
+ - { id: brand-guidelines, kind: brand-asset, url: "https://news.coupang.com/coupang-media-assets-brand-guidelines-eng/", captured: "2026-07-13" }
32
+ conflicts: []
33
+ claims:
34
+ "tokens.colors.canvas": &home { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-12" }
35
+ "tokens.colors.foreground": *home
36
+ "tokens.colors.foreground-muted": *home
37
+ "tokens.colors.foreground-secondary": *home
38
+ "tokens.colors.foreground-account": *home
39
+ "tokens.colors.hairline": *home
40
+ "tokens.typography.body.size": *home
41
+ "tokens.typography.body.weight": *home
42
+ "tokens.typography.body.lineHeight": *home
43
+ "tokens.typography.body.use": *home
44
+ "tokens.typography.search.size": *home
45
+ "tokens.typography.search.weight": *home
46
+ "tokens.typography.search.lineHeight": *home
47
+ "tokens.typography.search.use": *home
48
+ "tokens.typography.utility.size": *home
49
+ "tokens.typography.utility.weight": *home
50
+ "tokens.typography.utility.lineHeight": *home
51
+ "tokens.typography.utility.use": *home
52
+ "tokens.typography.utility-small.size": *home
53
+ "tokens.typography.utility-small.weight": *home
54
+ "tokens.typography.utility-small.lineHeight": *home
55
+ "tokens.typography.utility-small.use": *home
56
+ "tokens.spacing.xxs": *home
57
+ "tokens.spacing.xs": *home
58
+ "tokens.spacing.sm": *home
59
+ "tokens.spacing.md": *home
60
+ "tokens.spacing.lg": *home
61
+ "tokens.spacing.xl": *home
62
+ "tokens.spacing.xxl": *home
63
+ "tokens.spacing.account-gap": *home
64
+ "tokens.rounded.none": *home
65
+ "tokens.shadow.none": *home
66
+ "tokens.components.header-menu-item.type": *home
67
+ "tokens.components.header-menu-item.fg": *home
68
+ "tokens.components.header-menu-item.radius": *home
69
+ "tokens.components.header-menu-item.padding": *home
70
+ "tokens.components.header-menu-item.use": *home
71
+ "tokens.components.header-account-utility.type": *home
72
+ "tokens.components.header-account-utility.fg": *home
73
+ "tokens.components.header-account-utility.radius": *home
74
+ "tokens.components.header-account-utility.font": *home
75
+ "tokens.components.header-account-utility.use": *home
19
76
  tokens:
20
- source: prose-derived
21
- extracted: "2026-06-09"
77
+ source: live-extract
78
+ extracted: "2026-07-12"
22
79
  colors:
23
- primary: "#E94B22"
24
- primary-hover: "#C73D17"
25
- brand: "#E94B22"
26
80
  canvas: "#ffffff"
27
- surface: "#ffffff"
28
- foreground: "#111111"
29
- body: "#333D4B"
30
- muted: "#6B7684"
31
- on-primary: "#ffffff"
32
- red-tint: "#FFEEE8"
33
- wow-magenta: "#A50034"
34
- yellow: "#FAC000"
35
- green: "#80BC27"
36
- blue: "#3DACDC"
37
- brown: "#894F24"
38
- critical: "#D60404"
39
- success: "#03AC0E"
40
- link: "#0074E9"
41
- surface-alt: "#F7F8FA"
42
- surface-muted: "#F2F4F6"
43
- hairline: "#E5E8EB"
44
- inert: "#B0B8C1"
81
+ foreground: "#000000"
82
+ foreground-muted: "#555555"
83
+ foreground-secondary: "#333333"
84
+ foreground-account: "#212b36"
85
+ hairline: "#e5e7eb"
45
86
  typography:
46
- family: { sans: "Pretendard Variable" }
47
- display: { size: 28, weight: 700, lineHeight: 1.29, use: "Hero promo banners, splash takeovers" }
48
- headline: { size: 22, weight: 700, lineHeight: 1.36, use: "Section headers" }
49
- title: { size: 16, weight: 600, lineHeight: 1.38, use: "Product name (truncated 2 lines)" }
50
- body: { size: 14, weight: 400, lineHeight: 1.43, use: "Standard reading, descriptions" }
51
- caption: { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, fine print" }
52
- price: { size: 18, weight: 700, lineHeight: 1.33, use: "Primary product price — tabular numerals" }
53
- discount: { size: 14, weight: 700, lineHeight: 1.29, use: "Discount % red label" }
54
- badge: { size: 11, weight: 700, lineHeight: 1.27, use: "로켓배송, BEST badge labels" }
55
- spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 32, xxl: 48, section: 64 }
56
- rounded: { sm: 4, md: 4, lg: 8, full: 9999 }
57
- shadow:
58
- soft: "rgba(17,17,17,0.06) 0px 2px 8px"
87
+ body: { size: 16, weight: 400, lineHeight: 1.5, use: "Observed default body text on the live commerce home surface; system-family only." }
88
+ search: { size: 14, weight: 400, lineHeight: 1.5, use: "Observed search-field text on the live commerce home surface." }
89
+ utility: { size: 12, weight: 400, lineHeight: 1.25, use: "Observed compact account and utility text on the live commerce home surface." }
90
+ utility-small: { size: 11, weight: 400, lineHeight: 1.5, use: "Observed top utility navigation text on the live commerce home surface." }
91
+ spacing: { xxs: 1, xs: 5, sm: 10, md: 12, lg: 14, xl: 16, xxl: 20, account-gap: 24 }
92
+ rounded: { none: 0 }
93
+ shadow: { none: "none" }
59
94
  components_harvested: true
60
95
  components:
61
- button-primary: { type: button, bg: "#E94B22", fg: "#ffffff", radius: 4, padding: "12px 20px", font: "16/700", use: "Primary checkout CTA 구매하기, 장바구니 담기; pressed #C73D17" }
62
- button-secondary: { type: button, bg: "#ffffff", fg: "#E94B22", radius: 4, use: "Outlined, 1px #E94B22 border; pressed #FFEEE8 fill" }
63
- button-tertiary: { type: button, bg: "#F2F4F6", fg: "#333D4B", radius: 4, use: "Neutral filter toggle, 전체보기, low-emphasis" }
64
- button-wow: { type: button, bg: "#A50034", fg: "#ffffff", radius: 4, use: "WOW membership upsell — distinct from primary red" }
65
- button-critical: { type: button, bg: "#ffffff", fg: "#D60404", radius: 4, use: "Destructive — 주문 취소, 삭제; 1px #D60404 border" }
66
- product-card: { type: card, bg: "#ffffff", radius: 4, padding: "12px", use: "Atomic unit — 1:1 thumbnail, badge, name, rating, price block, delivery promise; hover border #111111" }
67
- promo-card: { type: card, bg: "#FFEEE8", radius: 8, padding: "16px", use: "Brand-tinted promo container" }
68
- filter-chip: { type: badge, bg: "#ffffff", radius: 4, font: "13/500", use: "32px height, 1px #E5E8EB border; selected = #111111 fill + white text" }
69
- rocket-badge: { type: badge, bg: "#ffffff", fg: "#E94B22", font: "11/700", use: "로켓배송 — icon + label, no border/radius" }
70
- discount-badge: { type: badge, fg: "#E94B22", font: "14/700", use: "Standalone red percentage; or #E94B22 fill pill for 특가/BEST" }
71
- search-input: { type: input, bg: "#ffffff", fg: "#111111", radius: 4, padding: "0 16px", use: "Hero chrome — 2px #E94B22 branded border, 48px height, red search button" }
72
- standard-input: { type: input, bg: "#ffffff", fg: "#111111", radius: 4, use: "1px #E5E8EB border, 44px height; focus 1px #E94B22" }
73
- category-nav: { type: tab, fg: "#333D4B", font: "14/700", use: "Sticky horizontal bar", active: "#E94B22 text + 2px bottom underline" }
96
+ header-menu-item: { type: listItem, fg: "#000000", radius: 0, padding: "0px 5px", use: "Observed default header menu list item only." }
97
+ header-account-utility: { type: listItem, fg: "#212b36", radius: 0, font: "12/400 system", use: "Observed default account-area list item only." }
74
98
  ---
75
99
 
76
100
  # Design System Inspiration of Coupang (쿠팡)
77
101
 
78
102
  ## 1. Visual Theme & Atmosphere
79
103
 
80
- Coupang's interface is the digital equivalent of a hyper-efficient Korean discount warehouse every pixel earns its rent by surfacing a price, a delivery promise, or a deal. The page opens on a clean white canvas (`#ffffff`) with near-black text (`#111111`) and the unmistakable **Coupang Red** (`#E94B22`) a warm, slightly orange-leaning red that reads less "alarm" and more "rocket exhaust." This isn't the deep crimson of luxury commerce; it's the saturated red of a price tag, a delivery truck, a `로켓배송` (Rocket Delivery) badge.
104
+ Coupang is a commerce and services company whose customer-facing Korean storefront is built around a broad catalog and a compact global header. Its verified public product surface is materially different from the company’s marketing and careers material: the captured storefront presents a white field, black text, pale gray dividers, a prominent search field, and small utility navigation rather than a published consumer design system. The company describes its broader aim as making shopping, eating, and living easier, and as building the future of commerce; its careers material frames the desired outcome as customers wondering how they lived without Coupang. Those ideas explain the dense, utilitarian register without licensing an inferred brand palette or a generic e-commerce component library. [Coupang Careers](https://www.coupang.jobs/en/why-coupang/) and the [Coupang Newsroom](https://news.coupang.com/21597-2/) are corporate/editorial sources; they are not token sources for the commerce UI.
81
105
 
82
- The aesthetic is unapologetically **information-dense**. Where Apple uses whitespace to elevate a single object, Coupang uses tight grids to fit four products per row above the fold because the brand's defining promise (`쿠팡 없이 어떻게 살았을까?` "How did we live without Coupang?") is that every search returns a faster, cheaper, in-stock answer than the user expected. The product card is the atomic unit of the brand: a square thumbnail, a discount percentage in red, a `로켓배송` rocket icon, a price in heavy weight, a delivery date promise — sometimes nine pieces of information in 200 pixels of height. Pretendard carries the Korean text; the system stack carries everything else; a small palette of accent reds, a `WOW` magenta-pink for membership moments, and warm neutrals do the rest.
106
+ The reference therefore preserves the verified distinction between domains. The live commerce capture covers the homepage and two product URLs, although the product URLs exposed only minimal document chrome in this collector run. Corporate media guidance governs downloadable marks and logo treatment, not the live product UI. No public source collected in this pass authorizes treating a marketing color, logo asset, or a careers-font deployment as a commerce-app token.
83
107
 
84
108
  **Key Characteristics:**
85
- - **Coupang Red** (`#E94B22`) as the singular brand engine — used on CTAs, price emphasis, the rocket badge, and the logo
86
- - Pretendard / Apple SD Gothic Neo system stack — no custom typeface, because density rules over typography
87
- - 4-column product grid as the dominant layout primitive (mobile: 2-col, tablet: 3-col, desktop: 4-5 col)
88
- - Information density: 6-9 data points per product card (image, badge, name, rating, review count, price, original price, discount %, delivery promise)
89
- - Sub-brand color extensions: WOW (magenta-pink), Eats (red-tinted), Play (red-on-dark) all share the Red parent
90
- - Heavy use of badges (`로켓배송`, `로켓프레시`, `WOW only`, `최저가`) as inline signals
91
- - Mobile-first at 360px baseline — most Korean e-commerce traffic is mobile
92
- - Yellow highlight (`#FAC000`) reserved for star ratings and promotional badges only
109
+
110
+ - White commerce header and canvas with black default text
111
+ - Pale gray #e5e7eb divider/border chrome
112
+ - Search-led header with compact utility and menu controls
113
+ - Square default geometry: sampled controls and inputs have 0px radius
114
+ - System-font rendering on the captured commerce surface, separate from Coupang Sans on official corporate/careers surfaces
93
115
 
94
116
  ## 2. Color Palette & Roles
95
117
 
96
- ### Primary
97
- - **Coupang Red** (`#E94B22`): Primary brand color. CTAs, price emphasis, rocket badge, logo wordmark, active tab indicator. The defining warm-red that anchors every Coupang surface. RGB(233, 75, 34).
98
- - **Deep Coupang Red** (`#C73D17`): Pressed / hover state for primary buttons and active price indicators.
99
- - **Near Black** (`#111111`): Primary text heavier than Karrot's `#1a1c20`, because product names need maximum read-density.
100
- - **Pure White** (`#ffffff`): Page and card background.
101
-
102
- ### Brand Tints & Sub-brands
103
- - **Red Tint** (`#FFEEE8`): Soft red wash behind WOW pricing rows, deal banners.
104
- - **Coupang Brown** (`#894F24`): Secondary brand accent — used sparingly on legacy chrome and Rocket Fresh produce indicators.
105
- - **WOW Magenta** (`#A50034`): Coupang Wow membership badge, `WOW only` price labels — distinct from Red but in the same warm family.
106
- - **Coupang Yellow** (`#FAC000`): Star ratings, promotional `BEST` / `HOT` badges. Never a CTA color.
107
- - **Coupang Green** (`#80BC27`): Stock-in / availability indicators, Rocket Fresh subscribe state.
108
- - **Coupang Blue** (`#3DACDC`): Informational links and `Coupang Play` accent on dark surfaces.
109
-
110
- ### Semantic
111
- - **Critical Red** (`#D60404`): Out-of-stock, error states. Distinct from brand red — colder, closer to alarm red.
112
- - **Discount Red** (`#E94B22`): Discount percentage labels — same as brand red, used as a price-emphasis tool.
113
- - **Positive Green** (`#03AC0E`): "도착 보장" arrival-guarantee badges, success confirmations.
114
- - **Informative Blue** (`#0074E9`): Standard hyperlinks, "더보기" expansion links.
115
-
116
- ### Neutral Scale
117
- - **Gray 50** (`#F7F8FA`): Page-section dividers, card hover fill.
118
- - **Gray 100** (`#F2F4F6`): Disabled bg, secondary surface.
119
- - **Gray 200** (`#E5E8EB`): Standard border, divider lines.
120
- - **Gray 400** (`#B0B8C1`): Muted icons, placeholder.
121
- - **Gray 600** (`#6B7684`): Secondary metadata (review count, seller name).
122
- - **Gray 800** (`#333D4B`): Body text, secondary headings.
123
- - **Gray 900** (`#111111`): Headings, product names, prices.
124
-
125
- ### Surface & Borders
126
- - **Border Subtle** (`#E5E8EB`): Card outlines on category grid.
127
- - **Border Strong** (`#111111`): Selected filter chips, active tab underline.
128
- - **Overlay** (`rgba(17,17,17,0.6)`): Modal backdrop, image-zoom scrim.
118
+ ### Observed live commerce surface
119
+
120
+ - **Canvas** (#ffffff): Observed background on the header menu control and search input.
121
+ - **Foreground** (#000000): Dominant observed text color across all three captured routes.
122
+ - **Muted foreground** (#555555): Repeated home-surface text color; no semantic role was observed.
123
+ - **Secondary foreground** (#333333): Repeated home-surface text color; no semantic role was observed.
124
+ - **Account foreground** (#212b36): Observed on the home account-area list item.
125
+ - **Hairline** (#e5e7eb): Repeated border color in the collector output.
126
+
127
+ ### Boundary
128
+
129
+ No live computed Coupang-red fill, WOW color, semantic status color, or hover/pressed value was present in the supplied capture. Those values are omitted rather than inferred from logos, screenshots, or third-party color lists.
129
130
 
130
131
  ## 3. Typography Rules
131
132
 
132
- ### Font Family
133
- - **Primary**: `"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", Roboto, "Noto Sans KR", sans-serif`
134
- - **Numeric (prices)**: Pretendard tabular variant or `tabular-nums` prices must align by digit, especially in compare-by-price grids.
135
- - **Design Principle**: No custom typeface. The brand is a price catalog; legibility at 12-14px under fluorescent grocery-store conditions matters more than typographic identity.
136
-
137
- ### Hierarchy
138
-
139
- | Role | Font | Size | Weight | Line Height | Notes |
140
- |------|------|------|--------|-------------|-------|
141
- | Display | Pretendard | 28px | 700 | 36px | Hero promo banners, splash takeovers |
142
- | Headline | Pretendard | 22px | 700 | 30px | Section headers ("로켓배송 신상품") |
143
- | Subheadline | Pretendard | 18px | 700 | 26px | Card cluster headings |
144
- | Title | Pretendard | 16px | 600 | 22px | Product name (truncated 2 lines) |
145
- | Body | Pretendard | 14px | 400 | 20px | Standard reading, descriptions |
146
- | Body Small | Pretendard | 13px | 400 | 18px | Review count, seller info |
147
- | Caption | Pretendard | 12px | 400 | 16px | Timestamps, fine print |
148
- | Price Large | Pretendard | 18px | 700 | 24px tabular | Primary product price |
149
- | Price | Pretendard | 16px | 700 | 22px tabular | Card price |
150
- | Strikethrough | Pretendard | 13px | 400 line-through | 18px | Original price before discount |
151
- | Discount % | Pretendard | 14px | 700 | 18px | `#E94B22` red, e.g. "37%" |
152
- | Badge | Pretendard | 11px | 700 | 14px | `로켓배송`, `BEST`, ALL CAPS Korean |
153
-
154
- ### Principles
155
- - **Three weights only**: Regular (400), Semibold (600), Bold (700). No light, no extra-bold.
156
- - **Tabular numerals on every price**: Currency figures must left-align by digit so users compare by glance, not by reading.
157
- - **Truncation is mandatory**: Product names truncate at 2 lines with ellipsis — never wrap to 3, never single-line. The 2-line ceiling is a card-grid contract.
158
- - **Korean-first letter-spacing**: Default `letter-spacing: -0.02em` on Korean headings to tighten Pretendard's natural metrics.
159
- - **Discount percentage is visually dominant**: A `37%` discount label is bigger and bolder than the product name beside it — price psychology is the brand.
133
+ ### Evidence classes
134
+
135
+ - **Live computed surface-use:** the captured commerce pages resolve to Apple SD Gothic Neo followed by Korean/Japanese/Chinese and common sans fallbacks. The collector classifies it as a high-confidence operating-system stack (155 uses), with no loaded FontFaceSet match or @font-face source URL. It is documented as system use, not a Coupang-owned UI font token.
136
+ - **Official product/corporate-use:** Coupang’s Newsroom says its BX team created **Coupang Sans**, applied it to the corporate homepage and careers site, and split it into Display and Text families. This is official corporate/careers use; it does not establish use on the captured commerce storefront. [Coupang Sans announcement](https://news.coupang.com/archives/19962/)
137
+ - **Official distributed asset / license:** no downloadable font file or font-license terms were found in the official material reviewed for this pass. Coupang’s media-assets license covers marks and logos, not a font license. [Media Assets Brand Guidelines](https://news.coupang.com/coupang-media-assets-brand-guidelines-eng/)
138
+ - **Unresolved:** Times appeared eight times in the captured product URL documents but has no FontFaceSet/source corroboration and is not promoted.
139
+
140
+ ### Observed hierarchy
141
+
142
+ | Role | Size | Weight | Line height | Surface boundary |
143
+ |------|------|--------|-------------|------------------|
144
+ | Default body | 16px | 400 | 24px | Observed on the commerce home surface |
145
+ | Search field | 14px | 400 | 21px | Observed on the commerce home surface |
146
+ | Utility text | 12px | 400 | 15–32px | Observed on the commerce home surface |
147
+ | Utility small | 11px | 400 | 16.5px | Observed on the commerce home surface |
148
+
149
+ Do not substitute Pretendard, Inter, or another webfont and label it as Coupang. Coupang Sans is useful brand context only until a product surface and loaded source corroborate it for that surface.
160
150
 
161
151
  ## 4. Component Stylings
162
152
 
163
- ### Buttons
164
-
165
- **Primary (Coupang Red)**
166
- - Background: `#E94B22` (Coupang Red)
167
- - Text: `#ffffff`
168
- - Radius: **4px** (sharp, utilitarian — not a pill, not soft)
169
- - Min-height: **48px** (large), **40px** (medium), **32px** (small)
170
- - Padding: 12px 20px (medium)
171
- - Font: 16px weight 700 (large), 14px weight 700 (medium)
172
- - Pressed: `#C73D17`
173
- - Disabled: `#F2F4F6` bg, `#B0B8C1` text
174
- - Use: "구매하기", "장바구니 담기", "로그인", primary checkout flow CTAs
175
-
176
- **Secondary (Outlined)**
177
- - Background: `#ffffff`
178
- - Text: `#E94B22` (Coupang Red)
179
- - Border: 1px solid `#E94B22`
180
- - Radius: 4px
181
- - Pressed: `#FFEEE8` background fill
182
- - Use: "위시리스트 추가", "쿠폰 받기", paired with primary button
183
-
184
- **Tertiary (Neutral)**
185
- - Background: `#F2F4F6` (Gray 100)
186
- - Text: `#333D4B` (Gray 800)
187
- - Radius: 4px
188
- - Pressed: `#E5E8EB`
189
- - Use: Filter toggles, "전체보기", low-emphasis actions
190
-
191
- **WOW Magenta (Membership)**
192
- - Background: `#A50034` (WOW Magenta)
193
- - Text: `#ffffff`
194
- - Radius: 4px
195
- - Use: "Wow 멤버십 가입하기", subscription upsells distinct from primary red to flag the membership context
196
-
197
- **Critical (Destructive)**
198
- - Background: `#ffffff`
199
- - Text: `#D60404`
200
- - Border: 1px solid `#D60404`
201
- - Use: "주문 취소", "삭제"
202
-
203
- ### Cards & Containers
204
-
205
- **Product Card (the atomic unit)**
206
- - Background: `#ffffff`
207
- - Border: 1px solid `#E5E8EB` (Gray 200) OR no border + 8px gap-based separation
208
- - Radius: **0px** for grid cards (sharp edges maximize density), **8px** for featured promo cards
209
- - Padding: 12px (compact), 16px (standard)
210
- - Hover: 1px border shifts to `#111111`, no shadow lift
211
- - Layout: 1:1 thumbnail top, then in order rocket badge row, product name (2 lines), star+reviews, price block (discount %, original, current), delivery promise
212
-
213
- **Promo Card**
214
- - Background: `#ffffff` or brand-tinted `#FFEEE8`
215
- - Radius: 8px
216
- - Padding: 16px-20px
217
- - Optional 1px border or shadow `0px 2px 8px rgba(17,17,17,0.06)`
218
-
219
- ### Chips & Badges
220
-
221
- **Filter Chip**
222
- - Background: `#ffffff`, Selected: `#111111` with white text
223
- - Border: 1px solid `#E5E8EB`, Selected: `#111111`
224
- - Radius: 4px (not pill — Coupang's sharp register)
225
- - Height: 32px, Padding: 0 12px, Font: 13px weight 500
226
-
227
- **Rocket Badge** (the iconic element)
228
- - Background: `#ffffff` with rocket icon `#E94B22`
229
- - Text: `로켓배송` in `#E94B22` weight 700, 11px
230
- - Compact horizontal layout, 16-20px tall
231
- - No border, no radius — the icon does the work
232
-
233
- **Discount Badge**
234
- - Standalone red percentage: `#E94B22` text, no bg, weight 700, 14-18px
235
- - "특가" / "BEST" pill: `#E94B22` bg, white text, 4px radius, 11px weight 700
236
-
237
- **WOW Badge**
238
- - Background: `#A50034`, white text, "WOW only" or "Wow 회원가"
239
- - 4px radius, 11px weight 700
240
-
241
- ### Inputs & Forms
242
-
243
- **Search Input** (the hero of the chrome)
244
- - Background: `#ffffff`
245
- - Border: 2px solid `#E94B22` (the search bar IS branded — red-bordered by default)
246
- - Radius: 4px
247
- - Height: 48px, Padding: 0 16px
248
- - Right-side red search button (square, `#E94B22`, white magnifier icon)
249
-
250
- **Standard Input**
251
- - Background: `#ffffff`
252
- - Border: 1px solid `#E5E8EB`
253
- - Radius: 4px
254
- - Focus: 1px solid `#E94B22`
255
- - Height: 44px
256
-
257
- ### Navigation
258
-
259
- **Top Header**
260
- - Background: `#ffffff`
261
- - Logo: `#E94B22` Coupang wordmark, ~28-32px tall
262
- - Search bar dominates center (red-bordered, ~600px wide on desktop)
263
- - Right: "마이쿠팡", "장바구니" with cart count badge
264
- - Height: 80-90px (taller than typical because search must breathe)
265
-
266
- **Category Nav**
267
- - Sticky horizontal bar, white bg, 1px bottom border
268
- - Active item: `#E94B22` text + 2px bottom underline
269
- - 14px weight 700
270
-
271
- **Mobile Bottom Tab**
272
- - 5 tabs: 홈 / 카테고리 / 검색 / 장바구니 / 마이쿠팡
273
- - Active: `#E94B22` icon + label
274
- - Inactive: `#6B7684`
275
- - Height: 56px + safe area
153
+ ### Header controls
154
+
155
+ **Menu control — observed default**
156
+ - Background: #ffffff
157
+ - Text: #000000
158
+ - Radius: 0px
159
+ - Padding: 0px 16px
160
+ - Font: 16px / 400 / system stack
161
+ - Use: Home header control at home::[data-omd-capture="15"]; 32px rendered height, observed default state only.
162
+
163
+ **Search submit control observed default**
164
+ - Text: #000000
165
+ - Radius: 0px
166
+ - Font: 16px / 400 / system stack
167
+ - Use: Home header submit button at home::[data-omd-capture="12"]; 20px rendered height, observed default state only.
168
+
169
+ ### Search field
170
+
171
+ **Header search input observed default**
172
+ - Background: #ffffff
173
+ - Text: #000000
174
+ - Radius: 0px
175
+ - Padding: 0px
176
+ - Font: 14px / 400 / system stack
177
+ - Use: Text input at home::[data-omd-capture="10"]; 351px rendered width and 17px rendered height in the supplied desktop capture.
178
+
179
+ ### Header navigation
180
+
181
+ **Menu item — observed default**
182
+ - Text: #000000
183
+ - Radius: 0px
184
+ - Padding: 0px 5px
185
+ - Use: home::li.gnb-menu-item; observed 32px rendered height. This item was classified as a list item, not a tab.
186
+
187
+ **Account utility item — observed default**
188
+ - Text: #212b36
189
+ - Radius: 0px
190
+ - Font: 12px / 400 / system stack
191
+ - Use: home::li.my-coupang; observed 59px rendered height and 0px 24px margin.
192
+
193
+ No product card, checkout CTA, badge, selected, error, focus, hover, pressed, dialog, or mobile-tab variant is specified: none had selector/state provenance in the supplied capture.
194
+
195
+ ---
196
+ **Verified:** 2026-07-13
197
+ **Tier 1 sources:** https://www.coupang.com/; https://www.coupang.com/vp/products/7225189423?itemId=18319675609&vendorItemId=5351802654&from=home_C2&traid=home_C2&trcid=4750545; https://www.coupang.com/vp/products/7225189423?itemId=18319675609&vendorItemId=80324048129&from=home_C2&traid=home_C2&trcid=4750546; https://news.coupang.com/archives/19962/; https://news.coupang.com/coupang-media-assets-brand-guidelines-eng/; https://www.coupang.jobs/en/why-coupang/
198
+ **Tier 2 sources:** https://getdesign.md/coupang (no indexed record found); https://styles.refero.design/?q=coupang (no Coupang result found in the public search result set)
199
+ **Conflicts unresolved:** none
200
+
201
+ The live commerce capture does not corroborate legacy #E94B22, Pretendard, or any interaction/state variant; these values are intentionally absent. Coupang Sans is confirmed only for corporate/careers use, not the captured commerce product surface. Interactive machine components are omitted because the capture contains no observed interaction state; their measured defaults remain documented above as prose evidence.
276
202
 
277
203
  ## 5. Layout Principles
278
204
 
279
- ### Spacing System
280
- - Base unit: 4px
281
- - Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
282
- - Gutter: 16px mobile, 24px tablet, 32px desktop
283
- - Card grid gap: 8px (compact) or 12px (standard) — *tight*, because density is the brand
284
-
285
- ### Grid & Container
286
- - Mobile: 2-column product grid, 360-414px viewport
287
- - Tablet: 3-column, 768px breakpoint
288
- - Desktop: 4-5 column at >1024px, max content width 1280px
289
- - Header search bar: max 600px wide, centered
290
- - Promo banners: full-bleed edge-to-edge
291
-
292
- ### Whitespace Philosophy
293
- - **Density before drama**: A typical search result fits 12-20 product cards above the fold on desktop. Whitespace is functional gap, never decorative breathing room.
294
- - **Card gaps over card padding**: Use 8-12px gaps between cards rather than internal padding to maximize image and price visibility.
295
- - **Vertical rhythm in price blocks**: 4px between discount %, original price (strikethrough), current price, delivery promise — tight stack so the eye reads top-to-bottom in one motion.
296
-
297
- ### Border Radius Scale
298
- - **Sharp (0-4px)**: Product cards, filter chips, buttons, inputs — Coupang's default. The sharp corner reads as catalog/utility/efficient.
299
- - **Soft (8px)**: Promo cards, modals, bottom sheets.
300
- - **Pill (9999px)**: Avatars only — never on chips, never on buttons.
205
+ The supplied desktop home capture is 1440px wide. Its verified layout evidence is limited to a 351px search input, compact 32px menu controls, and home-header utility spacing. Product-grid columns, responsive breakpoints, sticky behavior, and card spacing are not asserted because they were not reliably captured across the supplied routes.
301
206
 
302
207
  ## 6. Depth & Elevation
303
208
 
304
- | Level | Treatment | Use |
305
- |-------|-----------|-----|
306
- | Flat (0) | No shadow | Page background, product card grid (gap-only separation) |
307
- | Subtle (s1) | `0px 1px 4px rgba(17,17,17,0.06)` | Card hover, dropdown |
308
- | Standard (s2) | `0px 2px 8px rgba(17,17,17,0.10)` | Promo cards, sticky CTAs, modals |
309
- | Prominent (s3) | `0px 4px 16px rgba(17,17,17,0.16)` | Bottom sheets, image zoom, full-screen overlays |
310
-
311
- **Shadow Philosophy**: Coupang uses shadows sparingly — the grid's information density already creates depth through sheer visual weight. Shadows appear at hover, on sticky elements, and on overlays — never as decorative card-lifting on the main grid. The dominant separation tool is the 1px gray border (`#E5E8EB`) and the 8-12px gap, not elevation.
209
+ The representative captured controls have box-shadow: none. No elevated component or overlay state is retained.
312
210
 
313
211
  ## 7. Do's and Don'ts
314
212
 
315
213
  ### Do
316
- - Use Coupang Red (`#E94B22`) for CTAs, price emphasis, rocket badges, and the logo — these four roles only
317
- - Keep border-radius at 0-4px for grid elements sharp corners read as catalog efficiency
318
- - Use tabular numerals on every price, every count, every quantity
319
- - Pack 6-9 data points per product card that's the brand's contract with the user
320
- - Truncate product names at 2 lines with ellipsis never wrap to 3
321
- - Use Pretendard with `letter-spacing: -0.02em` on Korean headings
322
- - Reserve WOW Magenta (`#A50034`) exclusively for membership-context buttons and badges
323
- - Use the 4px grid for all spacing — same as Karrot, but applied to denser layouts
214
+
215
+ - Keep the observed commerce header canvas white with black text and pale gray hairlines when recreating this captured state.
216
+ - Treat Apple SD Gothic Neo as an operating-system stack on this surface, not a Coupang webfont.
217
+ - Keep components constrained to their recorded selector, route, and default state provenance.
218
+ - Apply the official media-assets rules when using downloaded Coupang logos or marks.
324
219
 
325
220
  ### Don't
326
- - Don't use pill-shaped (9999px) buttons or chips — that's a Toss/Karrot register, not Coupang's
327
- - Don't add ambient shadows to product cards on the main grid gap + 1px border carries the load
328
- - Don't use yellow (`#FAC000`) for buttons it's exclusively for stars and `BEST` badges
329
- - Don't introduce dramatic whitespace that drops grid density below the device's max-card-count
330
- - Don't replace the red-bordered search bar with a neutral gray version — the red border is brand chrome
331
- - Don't pair Coupang Red with a secondary brand red — the WOW Magenta is the only sibling, and it's membership-scoped
332
- - Don't use serif typography or display faces — Pretendard does every weight Coupang needs
333
- - Don't single-line product names — the 2-line ceiling is what makes the grid scannable
221
+
222
+ - Do not infer a consumer CTA color from Coupang’s logo, media assets, or third-party color directories.
223
+ - Do not use Coupang Sans as a commerce UI font without product-surface and font-source corroboration.
224
+ - Do not add hover, focus, pressed, selected, error, or responsive variants from this evidence set.
225
+ - Do not reuse corporate/careers or newsroom visual chrome as storefront evidence.
334
226
 
335
227
  ## 8. Responsive Behavior
336
228
 
337
- ### Breakpoints
338
- | Name | Width | Key Changes |
339
- |------|-------|-------------|
340
- | Mobile | <480px | 2-column product grid, 16px gutter, bottom tab bar |
341
- | Tablet | 480-1024px | 3-column grid, 24px gutter, top nav unchanged |
342
- | Desktop | >1024px | 4-5 column grid, 32px gutter, max content 1280px |
343
-
344
- ### Touch Targets
345
- - Buttons: 48px (large), 40px (medium), 32px (small)
346
- - Filter chips: 32px height
347
- - Bottom tab: 56px height
348
- - Product card thumbnail: minimum 156x156px on mobile
349
-
350
- ### Collapsing Strategy
351
- - Search bar: full-width on mobile, max 600px on desktop, sticky on scroll
352
- - Category nav: horizontal scroll on mobile, full row on desktop
353
- - Product grid: 2 → 3 → 4 → 5 columns by viewport
354
- - Add-to-cart CTA: sticky bottom bar on mobile product detail, inline on desktop
355
-
356
- ### Image Behavior
357
- - Product thumbnails: 1:1 aspect ratio, 0px or 4px radius
358
- - Hero banners: 16:9 desktop, 4:3 mobile
359
- - Avatar (review author): circular 9999px, 32-40px
229
+ No mobile viewport was captured. The source evidence does not support breakpoint, grid, sticky, or touch-target rules.
360
230
 
361
231
  ## 9. Agent Prompt Guide
362
232
 
363
- ### Quick Color Reference
364
- - Primary CTA: Coupang Red (`#E94B22`)
365
- - CTA Pressed: Deep Red (`#C73D17`)
366
- - Background: White (`#ffffff`)
367
- - Heading: Near Black (`#111111`)
368
- - Body: Gray 800 (`#333D4B`)
369
- - Caption: Gray 600 (`#6B7684`)
370
- - Border: Gray 200 (`#E5E8EB`)
371
- - Disabled: Gray 100 (`#F2F4F6`)
372
- - Critical: Red (`#D60404`)
373
- - Success: Green (`#03AC0E`)
374
- - Info: Blue (`#0074E9`)
375
- - Star/Best: Yellow (`#FAC000`)
376
- - WOW: Magenta (`#A50034`)
377
-
378
- ### Example Component Prompts
379
- - "Build a Coupang product card: white bg, 1px solid #E5E8EB border, 0px radius, 12px padding. 1:1 thumbnail top. Below: 로켓배송 badge (#E94B22 rocket icon, 11px weight 700). Product name 14px weight 600 #111111, truncate 2 lines. Star rating row: yellow #FAC000 stars + gray review count. Price block: discount % 14px weight 700 #E94B22 + strikethrough original 13px #6B7684 + current price 16px weight 700 #111111 tabular-nums. Delivery promise '내일 도착' 12px #03AC0E."
380
- - "Design the Coupang search bar: white bg, 2px solid #E94B22 border, 4px radius, 48px height. Right-side square button: #E94B22 bg, white magnifier icon, 48x48px, 0px radius, attached to right edge."
381
- - "Create a primary CTA: #E94B22 bg, white text 16px weight 700, 48px min-height, 4px radius, 12px×20px padding. Pressed: #C73D17. Disabled: #F2F4F6 bg #B0B8C1 text. Use for '구매하기', '장바구니 담기'."
382
- - "Build a WOW membership upsell: #A50034 bg, white text 'Wow 멤버십 가입하기' 14px weight 700, 4px radius, 40px height. Above the button: WOW logo + benefit list with #03AC0E checkmarks."
383
- - "Design a discount badge: standalone '37%' label, #E94B22 text, 18px weight 700, no background. Position top-left of product image, 8px inset."
384
-
385
- ### Iteration Guide
386
- 1. Coupang Red `#E94B22` is the only true brand color — WOW Magenta is the membership-scoped sibling
387
- 2. Border-radius defaults: 0-4px buttons/inputs/cards, 8px modals, 9999px avatars only
388
- 3. Density is non-negotiable — 4-5 cards per row desktop, 2-3 mobile, never sparse
389
- 4. Every price uses tabular numerals — alignment matters more than aesthetics
390
- 5. The red-bordered search bar is brand chrome — don't neutralize it
391
- 6. Sharp corners read as catalog/utility — soft corners read as lifestyle, which is off-brand
392
- 7. Pretendard, three weights (400/600/700), Korean-tightened with `letter-spacing: -0.02em`
233
+ ### Verified prompt boundary
393
234
 
394
- ---
235
+ “Create only the observed Coupang desktop-header elements: a white, square-cornered search input with black 14px system-stack text; white/black square menu controls; and pale gray hairlines. Do not add a red CTA, product card, delivery badge, font substitution, or interaction state unless separately evidenced.”
395
236
 
396
237
  ## 10. Voice & Tone
397
238
 
398
- Coupang speaks like a **highly competent Korean discount-store ajumma** — direct, deal-driven, results-first, allergic to florid marketing. The voice assumes a working parent on a phone at 11pm trying to get diapers delivered before 7am, and treats their time as scarce. Sentences are short, verb-first, and load-bearing. The signature catchphrase `쿠팡 없이 어떻게 살았을까?` ("How did we live without Coupang?") — is the entire brand thesis distilled to seven words: utility so deep it becomes infrastructure. English surfaces (Coupang Inc. corporate, US headquarters) carry the same posture in plain American English — "We bring Wow to every customer," not "Discover the future of e-commerce."
399
-
400
- | Context | Tone |
401
- |---|---|
402
- | CTAs | Verb-first Korean (`구매하기`, `장바구니 담기`, `로그인`, `지금 구독하기`) / plain English (`Buy now`, `Add to cart`, `Apply`) |
403
- | Price labels | Numeric-dominant. `최저가`, `WOW 회원가`, `로켓와우 회원가`, `즉시할인` — short noun phrases that name the price type |
404
- | Delivery promise | Time-specific, never vague. `내일(목) 도착 보장`, `오늘 7시까지 주문 시 새벽 도착`. Not "fast shipping." |
405
- | Rocket badges | Single-word power: `로켓배송`, `로켓프레시`, `로켓직구`, `로켓설치` — each names a specific logistics product, not a feeling |
406
- | Empty states | Practical reframe. Never `데이터가 없습니다`. Prefer `검색 결과가 없어요. 다른 키워드로 검색해보세요.` |
407
- | Error messages | Specific + actionable. `네트워크 연결을 확인하고 다시 시도해 주세요`, not `오류가 발생했습니다`. |
408
- | Success toasts | Past-tense, transactional. `장바구니에 담겼어요`, `주문이 완료되었어요`. No celebration, no exclamation marks. |
409
- | Membership upsells | Benefit-stack, not aspiration. Lists concrete perks (`무료배송`, `무료반품`, `쿠팡플레이 무료`) over lifestyle promises. |
410
- | Coupang Eats / Play | Sub-brands borrow the parent register but slightly warmer — Eats uses food-craving copy (`30분 안에 도착`), Play uses content-hook copy (`SNL 코리아 시즌 6 독점 공개`). |
239
+ Coupang’s official careers language is customer-centred, direct, and action-oriented: it describes an aim to “wow” customers, make everyday commerce easier, and build the future of commerce. That is a corporate voice source, not evidence of storefront microcopy. [Why Coupang](https://www.coupang.jobs/en/why-coupang/)
411
240
 
412
- **Forbidden phrases.** `불편을 드려 죄송합니다`, `데이터가 없습니다`, `오류가 발생했습니다`, `놀라운`, `혁신적인`, `세계 최고의`. English boilerplate bans: `Oops`, `something went wrong`, `amazing deals`, `unbeatable prices`, `revolutionary`. Marketing inflation is anti-Coupang — the brand lets the price tag and the delivery date do the persuading. Emoji are permitted in promotional banners and chat-with-seller flows, but never in error messages, never in payment confirmations, never in delivery-status notifications.
241
+ | Do | Don't |
242
+ |----|-------|
243
+ | Describe customer outcomes plainly and specifically. | Attribute unobserved commerce labels or error messages to Coupang. |
244
+ | Use the official “wow the customer” framing only with its source context. | Turn careers language into a product UI token or interaction claim. |
245
+ | Preserve the distinction between corporate and commerce copy. | Invent delivery, checkout, or membership copy. |
413
246
 
414
247
  **Voice samples.**
415
248
 
416
- - `쿠팡 없이 어떻게 살았을까?` corporate brand tagline, the defining catchphrase. <!-- verified: coupang.jobs/kr 2026-05 -->
417
- - `우리의 미션은 고객과 직원, 파트너의 일상을 혁신하는 것입니다` corporate mission. <!-- verified: coupang.jobs/kr 2026-05 -->
418
- - `쿠팡은 커머스의 미래를 만들어 가고 있습니다` — careers hero copy. <!-- verified: coupang.jobs/kr 2026-05 -->
419
- - `로켓배송` — flagship logistics sub-brand mark. <!-- verified: coupang.com product surfaces, widely documented -->
420
- - `WOW 회원가` — membership-scoped price label. <!-- illustrative: standard pricing convention on Coupang catalog surfaces -->
421
- - `오늘 7시까지 주문 시 새벽 도착` — Dawn Delivery promise pattern. <!-- illustrative: documented Rocket Wow benefit, exact wording varies -->
422
- - `장바구니에 담겼어요` — illustrative success-toast pattern. <!-- illustrative: not verified as live Coupang copy -->
249
+ - “We exist to wow our customers.” official careers copy. <!-- verified: coupang.jobs/en/why-coupang 2026-07-13 -->
250
+ - “How did I ever live without Coupang?”official customer-outcome framing. <!-- verified: coupang.jobs/en/why-coupang 2026-07-13 -->
251
+ - “Our mission to build the future of commerce is real.” official careers copy. <!-- verified: coupang.jobs/en/why-coupang 2026-07-13 -->
423
252
 
424
253
  ## 11. Brand Narrative
425
254
 
426
- Coupang was founded in **2010 in Seoul** by **Bom Kim (김범석)** a Korean-American who moved from Seoul to the US at age 7, graduated Harvard College, then **dropped out of Harvard Business School in his second semester** to start the company. The first version was a Groupon-clone daily-deals site. By 2014, Kim had bet the company on a thesis no Korean e-commerce incumbent believed: that the bottleneck wasn't catalog or price, it was **logistics control**. Coupang would not be a marketplace that referred orders to third-party shippers; it would own the warehouses, the trucks, the drivers (the "로켓맨" / Rocketmen), and the delivery promise end-to-end ([CNBC](https://www.cnbc.com/2019/12/04/coupang-harvard-dropout-bom-kim-built-koreas-most-valuable-start-up.html), [Wikipedia — Bom Kim](https://en.wikipedia.org/wiki/Bom_Kim)).
427
-
428
- **Rocket Delivery (`로켓배송`) launched March 2014.** Same-day or next-day on millions of items, eventually expanded to **Dawn Delivery** (order by midnight, arrives by 7am). The capital that made it possible: **$100M from Sequoia Capital May 2014**, **$300M from BlackRock months later**, then the bet that changed everything — **SoftBank $1B in June 2015**, followed by **SoftBank Vision Fund $2B in November 2018** at a $9B valuation, making Bom Kim the second-youngest billionaire in South Korea ([Korea Times](https://www.koreatimes.co.kr/business/tech-science/20190129/coupangs-rocket-delivery-gaining-popularity), [Speedwell Research](https://www.speedwellmemos.com/p/coupang-business-history)).
429
-
430
- **The IPO.** Coupang listed on the **NYSE on March 11, 2021**, ticker **CPNG**. First-day close: $49.25. Day-one market cap: **~$84.47 billion** — the **largest US IPO by a foreign company since Alibaba in 2014**, and the largest US listing ever by a Korean company. The company raised **$4.6 billion** in the offering ([CNBC IPO coverage](https://www.cnbc.com/2021/03/11/coupang-ipo-cpng-begins-trading-on-the-nyse.html), [Kim & Chang legal note](https://www.kimchang.com/en/insights/detail.kc?sch_section=2&idx=23179)).
255
+ Coupang describes itself as a technology company shaping global commerce and says it was born from an effort to make shopping, eating, and living easier. Its official careers page connects that objective with a customer-outcome test: whether people feel they could not live without the service. The company’s Newsroom separates corporate information, services, technology, and media assets into distinct editorial areas, a useful boundary when reading brand claims versus UI evidence. [Why Coupang](https://www.coupang.jobs/en/why-coupang/) · [Newsroom information](https://news.coupang.com/21597-2/)
431
256
 
432
- The product family extended into a **super-app**: **Coupang Eats (`쿠팡이츠`)** launched May 2019 promising 30-minute "cheetah" delivery; **Coupang Play (`쿠팡플레이`)** launched December 2020 as a Wow-membership-bundled streaming service (now home to SNL Korea, Premier League rights, and Paramount+ Korea); **Rocket Fresh** for groceries; **Rocket Direct** for cross-border imports. The unifying thread: every sub-brand is a perk inside the **WOW (`로켓와우`) membership** — a 7,890 KRW/month subscription embraced by **two-thirds of Korean households** ([Korea Herald](https://www.koreaherald.com/article/10489777), [Wikipedia — Coupang](https://en.wikipedia.org/wiki/Coupang)).
433
-
434
- What Coupang refuses: the marketplace-only model of 11번가 / 옥션 (no logistics ownership, slow delivery), the lifestyle aesthetic of 무신사 / 29CM (curated, white-glove, slow), the boutique register of luxury commerce. Coupang's design language follows that refusal — a warm-red price-tag accent, sharp 0-4px corners, dense product grids, tabular price stacks, and a singular promise that hangs over every screen: `쿠팡 없이 어떻게 살았을까?`
257
+ The current public brand record also includes a purpose-built Coupang Sans family for corporate and careers use. The source describes Display and Text cuts and links the design to speed and legibility, but does not provide a license or establish the font as a loaded commerce-webfont asset. [Coupang Sans](https://news.coupang.com/archives/19962/)
435
258
 
436
259
  ## 12. Principles
437
260
 
438
- 1. **Density is the brand.** Coupang's product grid is engineered to surface more catalog per viewport than any Korean competitor. *UI implication:* never reduce a 4-column desktop grid to 3 for "breathing room"; never single-column a mobile listing. Density is what users came for.
439
- 2. **Red is for price and rocket — nothing else.** Coupang Red (`#E94B22`) carries four jobs: CTA, discount %, rocket badge, logo. It does not decorate, does not tint backgrounds, does not paint borders ambient. *UI implication:* if a design uses red for an info card or a status pill that isn't a discount or a rocket, demote to gray or to a semantic color.
440
- 3. **Sharp corners read as catalog; soft corners read as lifestyle.** Coupang lives at 0-4px radii on grid elements. *UI implication:* if a card or chip is rendering at 12px+ radius, it has drifted toward Toss/Karrot register and is off-brand for utility surfaces.
441
- 4. **Tabular numerals on every price.** Korean shoppers compare by digit-alignment, not by reading. *UI implication:* every `<price>` element gets `font-variant-numeric: tabular-nums` or a tabular Pretendard variant. Misaligned columns of 19,800원 / 24,500원 / 8,900원 destroy the scan.
442
- 5. **The delivery promise is a first-class data point.** "내일(목) 도착 보장" is on the same hierarchy as the price — sometimes higher. *UI implication:* a product card without a visible delivery date or a rocket badge is incomplete; the date must render before the page is "done."
443
- 6. **Sub-brands inherit the parent palette.** Coupang Eats, Play, Fresh, Direct, and Wow all use the same red parent — Wow's magenta is the only documented sibling. *UI implication:* don't introduce a "Coupang Eats yellow" or "Play purple" — every sub-brand is a context tag, not a separate visual identity.
444
- 7. **Every screen earns its keep.** The brand is utility. A screen with no price, no promise, no action is suspect. *UI implication:* hero banners must surface a CTA + a price/promise within the first viewport; "splash"-style content-only takeovers are a Toss move, not a Coupang move.
445
- 8. **Membership is the loyalty engine — surface it, but scope it.** WOW perks (`로켓배송 무료`, `쿠팡플레이 무료`, `새벽배송`) appear in cart, checkout, product detail, and onboarding — but with WOW Magenta, never with Coupang Red, so the user can tell brand from membership at a glance.
261
+ 1. **Wow the customer.** Coupang says the customer is the beginning and end of decisions. *UI implication:* connect a product claim to a clear user outcome; do not claim more product behavior than the evidence records.
262
+ 2. **Simplify.** The company’s published leadership principles call complexity an enemy of scale, speed, and customer experience. *UI implication:* preserve a clear default hierarchy before adding optional surface variants.
263
+ 3. **Move with urgency.** Coupang describes timely action as a leadership value. *UI implication:* use concise, actionable language where official product copy is available; otherwise leave the copy unspecified.
446
264
 
447
265
  ## 13. Personas
448
266
 
449
- *Personas are fictional archetypes informed by publicly described Coupang user segments, not individual people.*
450
-
451
- **민지 (Minji), 34, 위례신도시.** Working mother of two, engineer at an IT company. WOW member since 2018. Orders diapers, formula, 새벽배송 groceries 4-5x per week. Treats Coupang as critical household infrastructure — power, water, Coupang. Will switch Coupang Eats to a competitor if a single order is late, then switch back the next week because nothing else delivers a forgotten ingredient by 7am.
452
-
453
- **준호 (Junho), 41, 분당.** Mid-career manager, two kids in elementary school. The household's primary Coupang account holder. Uses 로켓배송 for everything from printer ink to weekend hiking gear. Watches SNL Korea on Coupang Play after the kids are in bed. The 7,890 won monthly Wow fee feels like the cheapest line item on his budget — *"한 달에 7,990원이 아까운 적이 없다"* (never once felt the monthly fee was wasteful).
454
-
455
- **Sarah, 29, Hannam-dong.** American expat working at a multinational in Seoul. Discovered Coupang because Korean colleagues said it was the only e-commerce site that worked the way she expected things to work in NYC. Orders English-language books via 로켓직구, groceries via 로켓프레시, and uses Coupang Eats more than any other delivery app because the in-app English support is the cleanest among Korean platforms.
267
+ *No first-party persona research was collected for this reference. Do not fabricate customer archetypes or demographic facts.*
456
268
 
457
- **박여사 (Mrs. Park), 62, 대구.** Retired, lives alone, learned Coupang from her daughter during COVID. The first online shopping platform she ever trusted, because the Rocketmen leave packages where she asked, never ring the bell, and the return process is a single tap. Uses voice search to type Korean — relies on the mobile UI being big enough at the default font size that she doesn't need glasses for the price.
269
+ - [FILL IN: user-provided primary customer segment]
270
+ - [FILL IN: user-provided commerce task and context]
458
271
 
459
272
  ## 14. States
460
273
 
461
- | State | Treatment |
462
- |---|---|
463
- | **Empty (no search results)** | One-line factual reframe (`'키워드'에 대한 검색 결과가 없어요`) + suggested broader keywords as chips + bottom CTA `카테고리 둘러보기`. Never an illustration. |
464
- | **Empty (empty cart)** | Single line `장바구니가 비어 있어요` + 12px caption suggestion + primary CTA `로켓배송 구경하기`. No illustration. |
465
- | **Loading (first paint)** | Skeleton blocks at `#F2F4F6` matching final product-card geometry — 1:1 thumbnail box, two text lines (name), one line (price). Shimmer 1.4s with 6% white highlight. |
466
- | **Loading (infinite scroll)** | Bottom-of-list spinner in Coupang Red, 24px diameter. No overlay. Existing cards stay visible. |
467
- | **Loading (price recalc / coupon apply)** | Inline 16px spinner in `#E94B22` next to the price line — never a full-screen overlay for a price update. |
468
- | **Error (inline field)** | Input border `#D60404` 1px, helper text below `#D60404` 13px. One actionable sentence. |
469
- | **Error (toast)** | `#111111` background, white 14px weight 400 text, 3s auto-dismiss. Bottom of screen, 16px above tab bar. No icon, no emoji. |
470
- | **Error (network blocking)** | Full-screen centered: `#111111` 18px weight 700 message, `#6B7684` 14px subline, retry button in Coupang Red. No illustration. |
471
- | **Out of stock** | Product card: 50% grayscale image overlay, `품절` badge `#6B7684` bg over image bottom-left, price stays visible but `#B0B8C1` text. Add-to-cart button replaced with `재입고 알림 신청` outlined-red. |
472
- | **Success (added to cart)** | Toast: `장바구니에 담겼어요` + secondary text `장바구니 보기 ›`. 3s auto-dismiss. White text on `#111111`. |
473
- | **Success (order complete)** | Dedicated full-screen page — not a toast. Green checkmark `#03AC0E`, `주문이 완료되었어요`, summary card with delivery date in red, primary CTA `주문 상세보기`. |
474
- | **Skeleton** | `#F2F4F6` blocks matching exact card layout. Never animate the price slot brighter than other slots — equal-weight shimmer across all data points. |
475
- | **Disabled** | Button `#F2F4F6` bg, `#B0B8C1` text. No color shift. Geometry stays identical so re-enable is frame-stable. |
476
- | **WOW-gated** | A non-Wow user sees the Wow price label in `#A50034` magenta with a small lock icon and `WOW 회원가입 시 적용` 12px caption. The regular price stays visible — Coupang never hides info, it labels access. |
274
+ Only default states were captured. The following states require a product-specific observation before specification:
477
275
 
478
- ## 15. Motion & Easing
479
-
480
- **Durations** (named, not raw milliseconds):
481
-
482
- | Token | Value | Use |
483
- |---|---|---|
484
- | `motion-instant` | 0ms | Toggles, checkbox state, filter chip on/off |
485
- | `motion-fast` | 120ms | Hover, focus, button press, inline price flash |
486
- | `motion-standard` | 200ms | Card taps, tab switches, dropdown reveals — the catalog default |
487
- | `motion-slow` | 300ms | Bottom-sheet presentations, modal opens |
488
- | `motion-page` | 280ms | Route transitions, native push/pop |
489
-
490
- **Easings:**
491
-
492
- | Token | Curve | Use |
493
- |---|---|---|
494
- | `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, toasts, screens appearing |
495
- | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, toast auto-close |
496
- | `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions |
497
-
498
- **Spring stance.** **Coupang motion is fast, short, and never bouncy.** The brand is a logistics platform — when a button presses, it commits; when a card opens, it opens. Spring physics, overshoot, and elastic bounces are forbidden because they imply *deliberation* — a quality the brand explicitly does not want users to associate with Coupang. A user who clicks "구매하기" should feel the order has already shipped. Durations skew shorter than Karrot's (`motion-standard` 200ms vs Karrot's 250ms) to enforce that mental model.
499
-
500
- **Signature motions.**
501
-
502
- 1. **Add-to-cart fly.** When a user taps "장바구니 담기" on a product card, the thumbnail performs a tiny scaled translate (~8% scale, 200ms `ease-standard`) toward the cart icon in the header, ending with a +1 badge increment. The motion is brief enough that a fast scroller will miss it — that's intentional; it confirms without blocking.
503
- 2. **Price-recalc flash.** When a coupon applies or a Wow membership preview activates, the price number cross-fades from old to new in 120ms `ease-standard` — no bouncing digits, no rolling odometer. Tabular numerals make the swap pixel-stable.
504
- 3. **Bottom-sheet presentation.** Sheets rise from `y+24px` (shorter than Karrot's 40px) with `motion-slow / ease-enter` and a backdrop fade to `rgba(17,17,17,0.6)`. Dismissal uses `motion-fast / ease-exit`.
505
- 4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant` except the add-to-cart fly, which becomes a single 80ms opacity flash on the cart icon — the confirmation must remain perceptible because it's transactional, not decorative.
506
-
507
- <!--
508
- OmD v0.1 Sources — Philosophy Layer (sections 10–15)
509
-
510
- Tier 1 — Direct verification:
511
- - coupang.com home — UNREACHABLE (Akamai bot protection blocks Playwright + WebFetch with 403; site requires interactive browsing context that the headless harness was unable to maintain due to ad-tab redirects in the live environment).
512
- - news.coupang.com — Tier 1 partial via WebFetch (extracted Korean copy: "쿠팡 뉴스레터 구독 신청", "신청하기", and editorial headlines including "과일 쇼핑의 불안을 지우는 사람들, 쿠팡 로켓프레시 품질관리팀").
513
- - coupang.jobs/kr — Tier 1 verified via WebFetch (extracted: tagline "쿠팡 없이 어떻게 살았을까?", mission "우리의 미션은 고객과 직원, 파트너의 일상을 혁신하는 것입니다", hero "쿠팡은 커머스의 미래를 만들어 가고 있습니다", nav taxonomy, position counts).
514
-
515
- Tier 2a — getdesign.md/coupang:
516
- - "No designs found for 'coupang'." — no record.
517
-
518
- Tier 2b — brandcolorcode.com:
519
- - Coupang Red (Primary): #E94B22
520
- - Coupang Brown: #894F24
521
- - Coupang Yellow: #FAC000
522
- - Coupang Green: #80BC27
523
- - Coupang Blue: #3DACDC
524
- - Source notes the values are "the closest numbers based on official color codes provided" — Coupang has not published a public brand-guideline color spec, so #E94B22 is treated as the de-facto primary across the design community.
525
-
526
- Tier 2 (Philosophy/founders):
527
- - CNBC 2019: Bom Kim profile, Harvard dropout narrative.
528
- - Wikipedia — Bom Kim: 1978-10-07 birth, Korean-American, Harvard College + Harvard Business School (dropped 2nd semester), founded Coupang 2010.
529
- - Wikipedia — Coupang: 2010 founding, Rocket Delivery 2014, sub-brand timeline.
530
- - Speedwell Research / Korea Times: Sequoia $100M May 2014, BlackRock $300M, SoftBank $1B June 2015.
531
- - CNBC IPO 2021-03-11: NYSE listing, ticker CPNG, first-day close $49.25, market cap ~$84.47B, $4.6B raised, "largest US IPO by foreign company since Alibaba 2014".
532
- - Kim & Chang legal note — IPO confirmation.
533
- - Korea Herald: Coupang Play / Paramount+ Korea bundle, FAST service launch.
534
- - Korea Times: Wow membership 7,890 KRW/month, two-thirds of Korean households penetration.
535
- - Namu Wiki — Coupang Eats (May 2019), Coupang Play (December 2020).
536
-
537
- Re-verification status:
538
- - Coupang Red #E94B22 is the strongest publicly-cited value but has NOT been verified against a live Coupang.com computed style due to bot-protection. Re-verify in a non-headless browser before quoting publicly.
539
- - WOW Magenta #A50034 is editorial — derived from observed WOW badge usage in screenshots and brand-resource collections; not measured live in this pass.
540
- - Sub-brand color attributions (Eats / Play / Fresh) are interpretive, drawn from public marketing materials.
541
-
542
- Personas (§13) are fictional archetypes informed by publicly described Coupang user segments (KR working-parent Wow subscriber, mid-career Wow household, expat user, KR senior late-adopter).
543
-
544
- Interpretive claims (editorial, not documented Coupang statements):
545
- - "Density is the brand" (§12 #1) — editorial reading of the catalog grid, not a sourced brand statement.
546
- - "Sharp corners read as catalog" (§7 Don'ts, §12 #3) — design-language framing, not a Coupang publication.
547
- - The spring-forbidden motion stance (§15) — derived from the brand's logistics-utility posture, not a published motion spec.
548
- -->
276
+ | Category | Evidence status |
277
+ |----------|-----------------|
278
+ | Empty | [FILL IN: no observed state] |
279
+ | Loading | [FILL IN: no observed state] |
280
+ | Error | [FILL IN: no observed state] |
281
+ | Success | [FILL IN: no observed state] |
282
+ | Skeleton | [FILL IN: no observed state] |
283
+ | Disabled | [FILL IN: no observed state] |
549
284
 
550
- ---
285
+ ## 15. Motion & Easing
551
286
 
552
- **Verified:** 2026-05-08 (omd:add-reference)
553
- **Tier 1 sources:** coupang.jobs/kr (corporate careers — voice + tagline + mission verified via WebFetch); news.coupang.com (Korean editorial copy verified). **Note:** coupang.com main consumer surface unreachable due to Akamai bot-protection; geometry tokens (radii, paddings, heights) carried from public design-community references and pattern observation, flagged for live re-verification.
554
- **Tier 2 sources:** brandcolorcode.com/coupang (Coupang Red `#E94B22`, brown `#894F24`, yellow `#FAC000`, green `#80BC27`, blue `#3DACDC`); getdesign.md/coupang — no record.
555
- **Tier 2 (Philosophy/founders):** Wikipedia (Bom Kim + Coupang), CNBC (2019 profile + 2021 IPO), Korea Times, Korea Herald, Speedwell Research, Kim & Chang.
556
- **Style ref:** none (fresh entry).
557
- **Conflicts unresolved:** Coupang Red exact hex pending live computed-style verification — `#E94B22` adopted from public design-community consensus.
287
+ No motion, transition, or interaction state was captured. [FILL IN: product-specific motion evidence]