oh-my-design-cli 1.8.7 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/hooks/lib/preferences-parser.cjs +1 -0
- package/.claude/hooks/lib/preferences-writer.cjs +1 -0
- package/.claude/hooks/post-edit-watch.cjs +1 -0
- package/.claude/hooks/session-end-foldin.cjs +1 -0
- package/.claude/hooks/session-state-loader.cjs +1 -0
- package/.claude/hooks/skill-activation.cjs +1 -0
- package/.claude/settings.json +10 -1
- package/.github/assets/logo-bg.png +0 -0
- package/AGENTS.md +20 -1
- package/CHANGELOG.md +482 -0
- package/MIGRATION.md +103 -0
- package/README.ja.md +56 -19
- package/README.ko.md +47 -30
- package/README.md +48 -30
- package/README.zh-TW.md +59 -22
- package/agents/AGENT.md +8 -7
- package/agents/omd-codex-image.md +1 -1
- package/agents/omd-critic.md +6 -7
- package/agents/omd-designer-review.md +1 -1
- package/agents/omd-final-qa.md +1 -1
- package/agents/omd-humanizer.md +38 -0
- package/agents/omd-kr-writer.md +3 -4
- package/agents/omd-locale-adapter.md +12 -16
- package/agents/omd-master.md +24 -19
- package/agents/omd-microcopy.md +1 -1
- package/agents/omd-orchestrator.md +7 -8
- package/agents/omd-slop-auditor.md +31 -0
- package/agents/omd-ux-researcher.md +1 -1
- package/data/reference-fingerprints.json +1995 -38
- package/dist/bin/oh-my-design.js +16 -8
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/chunk-UJIHCEYF.js +99 -0
- package/dist/chunk-UJIHCEYF.js.map +1 -0
- package/dist/doctor-LDWSFM3I.js +763 -0
- package/dist/doctor-LDWSFM3I.js.map +1 -0
- package/dist/install-skills-ZZFNJ2II.js +1120 -0
- package/dist/install-skills-ZZFNJ2II.js.map +1 -0
- package/docs/CLI_QUICKSTART.md +157 -0
- package/package.json +25 -4
- package/scripts/postinstall.cjs +5 -4
- package/skills/claude-design/SKILL.md +38 -14
- package/skills/claude-design/references/claude-design-flow.md +11 -11
- package/skills/claude-design/references/codebase-analysis.md +5 -4
- package/skills/omd-final-qa/SKILL.md +1 -1
- package/skills/omd-harness/SKILL.md +51 -50
- package/skills/omd-humanize/SKILL.md +116 -0
- package/skills/omd-humanize/agents/openai.yaml +4 -0
- package/skills/omd-humanize/references/locale-playbooks.md +102 -0
- package/skills/omd-humanize/references/sources.md +11 -0
- package/skills/omd-init/SKILL.md +18 -12
- package/skills/omd-locale-adapter/SKILL.md +58 -91
- package/skills/omd-orchestrator/SKILL.md +11 -5
- package/skills/omd-reference-capture/SKILL.md +80 -26
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
- package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
- package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
- package/skills/omd-slop-audit/SKILL.md +110 -0
- package/skills/omd-slop-audit/agents/openai.yaml +4 -0
- package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
- package/skills/omd-slop-audit/references/sources.md +24 -0
- package/web/references/104/DESIGN.md +354 -0
- package/web/references/11st/DESIGN.md +197 -316
- package/web/references/29cm/DESIGN.md +297 -393
- package/web/references/42dot/DESIGN.md +390 -0
- package/web/references/8percent/DESIGN.md +438 -0
- package/web/references/ably/DESIGN.md +267 -572
- package/web/references/acer/DESIGN.md +329 -0
- package/web/references/airbnb/DESIGN.md +219 -557
- package/web/references/alipay/DESIGN.md +179 -420
- package/web/references/apple/DESIGN.md +224 -498
- package/web/references/asleep/DESIGN.md +402 -0
- package/web/references/au/DESIGN.md +334 -0
- package/web/references/autopedia/DESIGN.md +382 -0
- package/web/references/aws-cloudscape/DESIGN.md +241 -0
- package/web/references/baemin/DESIGN.md +332 -491
- package/web/references/banksalad/DESIGN.md +269 -180
- package/web/references/barogo/DESIGN.md +416 -0
- package/web/references/beusable/DESIGN.md +464 -0
- package/web/references/bilibili/DESIGN.md +206 -374
- package/web/references/bmw/DESIGN.md +162 -276
- package/web/references/brandi/DESIGN.md +184 -325
- package/web/references/catchtable/DESIGN.md +219 -264
- package/web/references/cgv/DESIGN.md +317 -0
- package/web/references/channeltalk/DESIGN.md +210 -336
- package/web/references/china-airlines/DESIGN.md +291 -0
- package/web/references/cjonstyle/DESIGN.md +453 -0
- package/web/references/class101/DESIGN.md +168 -387
- package/web/references/classum/DESIGN.md +228 -203
- package/web/references/claude/DESIGN.md +242 -479
- package/web/references/clay/DESIGN.md +179 -377
- package/web/references/clickhouse/DESIGN.md +254 -343
- package/web/references/cohere/DESIGN.md +214 -324
- package/web/references/coinone/DESIGN.md +199 -179
- package/web/references/corca/DESIGN.md +414 -0
- package/web/references/coupang/DESIGN.md +205 -475
- package/web/references/cursor/DESIGN.md +240 -381
- package/web/references/dabang/DESIGN.md +248 -213
- package/web/references/dable/DESIGN.md +431 -0
- package/web/references/datarize/DESIGN.md +217 -330
- package/web/references/dealicious/DESIGN.md +402 -0
- package/web/references/drdiary/DESIGN.md +404 -0
- package/web/references/elastic/DESIGN.md +238 -0
- package/web/references/elevenlabs/DESIGN.md +183 -321
- package/web/references/eslite/DESIGN.md +257 -0
- package/web/references/evaair/DESIGN.md +338 -0
- package/web/references/expo/DESIGN.md +238 -331
- package/web/references/familymart-tw/DESIGN.md +254 -0
- package/web/references/ferrari/DESIGN.md +160 -377
- package/web/references/figma/DESIGN.md +197 -451
- package/web/references/fitpet/DESIGN.md +445 -0
- package/web/references/flex/DESIGN.md +170 -253
- package/web/references/framer/DESIGN.md +197 -340
- package/web/references/freee/DESIGN.md +211 -533
- package/web/references/friendliai/DESIGN.md +431 -0
- package/web/references/frip/DESIGN.md +440 -0
- package/web/references/gangnamunni/DESIGN.md +154 -591
- package/web/references/gaudiolab/DESIGN.md +414 -0
- package/web/references/google/DESIGN.md +290 -398
- package/web/references/hashicorp/DESIGN.md +273 -318
- package/web/references/heydealer/DESIGN.md +429 -0
- package/web/references/humanscape/DESIGN.md +433 -0
- package/web/references/hyundai/DESIGN.md +158 -368
- package/web/references/hyundaicard/DESIGN.md +171 -121
- package/web/references/ibm/DESIGN.md +227 -378
- package/web/references/idus/DESIGN.md +450 -0
- package/web/references/igaworks/DESIGN.md +437 -0
- package/web/references/inflearn/DESIGN.md +221 -366
- package/web/references/intuit/DESIGN.md +244 -0
- package/web/references/jandi/DESIGN.md +191 -291
- package/web/references/jobplanet/DESIGN.md +415 -0
- package/web/references/kakao/DESIGN.md +287 -475
- package/web/references/kakaobank/DESIGN.md +220 -521
- package/web/references/kakaogames/DESIGN.md +220 -0
- package/web/references/kakaopay/DESIGN.md +207 -526
- package/web/references/karrot/DESIGN.md +227 -251
- package/web/references/kb-kookmin/DESIGN.md +308 -0
- package/web/references/kbank/DESIGN.md +220 -175
- package/web/references/kmong/DESIGN.md +281 -356
- package/web/references/krds/DESIGN.md +245 -19
- package/web/references/kream/DESIGN.md +224 -359
- package/web/references/kurly/DESIGN.md +211 -533
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lguplus/DESIGN.md +259 -0
- package/web/references/likelion/DESIGN.md +283 -0
- package/web/references/line/DESIGN.md +396 -355
- package/web/references/linear.app/DESIGN.md +209 -562
- package/web/references/lotteon/DESIGN.md +386 -0
- package/web/references/lovable/DESIGN.md +255 -349
- package/web/references/makinarocks/DESIGN.md +149 -349
- package/web/references/maum-ai/DESIGN.md +423 -0
- package/web/references/medibloc/DESIGN.md +425 -0
- package/web/references/megabox/DESIGN.md +232 -0
- package/web/references/mercari/DESIGN.md +217 -434
- package/web/references/microsoft/DESIGN.md +234 -388
- package/web/references/mildang/DESIGN.md +411 -0
- package/web/references/millie/DESIGN.md +183 -504
- package/web/references/minimax/DESIGN.md +264 -322
- package/web/references/miricanvas/DESIGN.md +182 -355
- package/web/references/miro/DESIGN.md +234 -232
- package/web/references/mistral.ai/DESIGN.md +231 -314
- package/web/references/mixi/DESIGN.md +234 -0
- package/web/references/moin/DESIGN.md +445 -0
- package/web/references/mongodb/DESIGN.md +219 -316
- package/web/references/musinsa/DESIGN.md +184 -510
- package/web/references/mynavi/DESIGN.md +242 -0
- package/web/references/myrealtrip/DESIGN.md +169 -406
- package/web/references/naver/DESIGN.md +328 -499
- package/web/references/naverwebtoon/DESIGN.md +172 -395
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/notion/DESIGN.md +271 -475
- package/web/references/nrise/DESIGN.md +417 -0
- package/web/references/ohouse/DESIGN.md +210 -549
- package/web/references/oliveyoung/DESIGN.md +217 -326
- package/web/references/ollama/DESIGN.md +241 -308
- package/web/references/onestore/DESIGN.md +248 -0
- package/web/references/palantir/DESIGN.md +256 -0
- package/web/references/panasonic/DESIGN.md +276 -0
- package/web/references/patternfly/DESIGN.md +259 -0
- package/web/references/payhere/DESIGN.md +438 -0
- package/web/references/pega/DESIGN.md +262 -0
- package/web/references/peoplefund/DESIGN.md +431 -0
- package/web/references/petfriends/DESIGN.md +428 -0
- package/web/references/pinkfong/DESIGN.md +199 -367
- package/web/references/pinterest/DESIGN.md +258 -308
- package/web/references/poya/DESIGN.md +286 -0
- package/web/references/pozalabs/DESIGN.md +438 -0
- package/web/references/protopie/DESIGN.md +419 -0
- package/web/references/qraft/DESIGN.md +448 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/recruit/DESIGN.md +247 -0
- package/web/references/remember/DESIGN.md +202 -396
- package/web/references/resend/DESIGN.md +274 -348
- package/web/references/sakura-internet/DESIGN.md +269 -0
- package/web/references/samsung/DESIGN.md +157 -359
- package/web/references/sandoll/DESIGN.md +445 -0
- package/web/references/sanity/DESIGN.md +241 -375
- package/web/references/scatterlab/DESIGN.md +412 -0
- package/web/references/selectstar/DESIGN.md +439 -0
- package/web/references/servicenow/DESIGN.md +289 -0
- package/web/references/shinhanbank/DESIGN.md +161 -341
- package/web/references/shinhancard/DESIGN.md +208 -319
- package/web/references/sionic/DESIGN.md +454 -0
- package/web/references/sktelecom/DESIGN.md +310 -0
- package/web/references/socar/DESIGN.md +125 -32
- package/web/references/softbank/DESIGN.md +231 -0
- package/web/references/sony/DESIGN.md +234 -0
- package/web/references/soop/DESIGN.md +261 -0
- package/web/references/spacex/DESIGN.md +184 -323
- package/web/references/spotify/DESIGN.md +253 -394
- package/web/references/squeezebits/DESIGN.md +441 -0
- package/web/references/stayfolio/DESIGN.md +422 -0
- package/web/references/stripe/DESIGN.md +212 -491
- package/web/references/supabase/DESIGN.md +244 -316
- package/web/references/tabling/DESIGN.md +415 -0
- package/web/references/taishinbank/DESIGN.md +243 -0
- package/web/references/teamlab/DESIGN.md +240 -0
- package/web/references/teamsparta/DESIGN.md +472 -0
- package/web/references/tellingme/DESIGN.md +392 -0
- package/web/references/tesla/DESIGN.md +244 -427
- package/web/references/thsr/DESIGN.md +284 -0
- package/web/references/thumbtack/DESIGN.md +302 -0
- package/web/references/together.ai/DESIGN.md +257 -304
- package/web/references/toss/DESIGN.md +251 -593
- package/web/references/toss-securities/DESIGN.md +255 -178
- package/web/references/tossbank/DESIGN.md +195 -491
- package/web/references/toyota/DESIGN.md +238 -0
- package/web/references/tving/DESIGN.md +197 -245
- package/web/references/typed/DESIGN.md +413 -0
- package/web/references/uber/DESIGN.md +256 -333
- package/web/references/udn/DESIGN.md +250 -0
- package/web/references/upbit/DESIGN.md +145 -256
- package/web/references/upstage/DESIGN.md +211 -204
- package/web/references/uswds/DESIGN.md +287 -0
- package/web/references/vercel/DESIGN.md +236 -440
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/wise/DESIGN.md +223 -231
- package/web/references/wisetracker/DESIGN.md +462 -0
- package/web/references/wooribank/DESIGN.md +245 -0
- package/web/references/yanolja/DESIGN.md +250 -419
- package/web/references/yeogiotte/DESIGN.md +235 -418
- package/web/references/zapier/DESIGN.md +256 -377
- package/web/references/zendesk/DESIGN.md +288 -0
- package/web/references/zigzag/DESIGN.md +200 -621
- package/dist/install-skills-7UUDOLG2.js +0 -734
- package/dist/install-skills-7UUDOLG2.js.map +0 -1
|
@@ -8,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-
|
|
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:
|
|
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:
|
|
21
|
-
extracted: "2026-
|
|
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
|
-
|
|
28
|
-
foreground: "#
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
62
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
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
|
-
###
|
|
97
|
-
|
|
98
|
-
- **
|
|
99
|
-
- **
|
|
100
|
-
- **
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
- **
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
-
###
|
|
133
|
-
|
|
134
|
-
- **
|
|
135
|
-
- **
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
|
142
|
-
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
148
|
-
|
|
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
|
-
###
|
|
164
|
-
|
|
165
|
-
**
|
|
166
|
-
- Background:
|
|
167
|
-
- Text:
|
|
168
|
-
- Radius:
|
|
169
|
-
-
|
|
170
|
-
-
|
|
171
|
-
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
-
|
|
186
|
-
-
|
|
187
|
-
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
**
|
|
192
|
-
-
|
|
193
|
-
-
|
|
194
|
-
-
|
|
195
|
-
- Use:
|
|
196
|
-
|
|
197
|
-
**
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
-
|
|
201
|
-
- Use:
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
317
|
-
- Keep
|
|
318
|
-
-
|
|
319
|
-
-
|
|
320
|
-
-
|
|
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
|
-
|
|
327
|
-
-
|
|
328
|
-
-
|
|
329
|
-
-
|
|
330
|
-
-
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
|
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
|
-
|
|
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
|
-
-
|
|
417
|
-
-
|
|
418
|
-
-
|
|
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
|
|
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
|
|
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. **
|
|
439
|
-
2. **
|
|
440
|
-
3. **
|
|
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
|
-
*
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
|
483
|
-
|
|
484
|
-
|
|
|
485
|
-
|
|
|
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
|
-
|
|
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]
|