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
|
@@ -7,587 +7,261 @@ homepage: "https://www.musinsa.com"
|
|
|
7
7
|
primary_color: "#000000"
|
|
8
8
|
logo:
|
|
9
9
|
type: favicon
|
|
10
|
-
slug: "https://
|
|
11
|
-
verified: "2026-
|
|
10
|
+
slug: "https://image.msscdn.net/static/assets/bi/favicon/favicon.svg"
|
|
11
|
+
verified: "2026-07-13"
|
|
12
12
|
omd: "0.1"
|
|
13
|
+
verification_v2:
|
|
14
|
+
schema: 2
|
|
15
|
+
checked: "2026-07-13"
|
|
16
|
+
surfaces:
|
|
17
|
+
- { id: home, kind: storefront, url: "https://www.musinsa.com/main/musinsa/recommend?gf=A", inspected: "2026-07-12" }
|
|
18
|
+
- { id: standard, kind: brand-storefront, url: "https://www.musinsa.com/brand/musinsastandard?gf=A", inspected: "2026-07-12" }
|
|
19
|
+
sources:
|
|
20
|
+
- { id: home-live, kind: product-surface, url: "https://www.musinsa.com/main/musinsa/recommend?gf=A", captured: "2026-07-12" }
|
|
21
|
+
- { id: standard-live, kind: product-surface, url: "https://www.musinsa.com/brand/musinsastandard?gf=A", captured: "2026-07-12" }
|
|
22
|
+
conflicts: []
|
|
23
|
+
claims:
|
|
24
|
+
"tokens.colors.primary": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-12" }
|
|
25
|
+
"tokens.colors.canvas": *home
|
|
26
|
+
"tokens.colors.foreground": *home
|
|
27
|
+
"tokens.colors.muted": *home
|
|
28
|
+
"tokens.colors.line": *home
|
|
29
|
+
"tokens.typography.family.sans": *home
|
|
30
|
+
"tokens.typography.body.size": *home
|
|
31
|
+
"tokens.typography.body.weight": *home
|
|
32
|
+
"tokens.typography.body.lineHeight": *home
|
|
33
|
+
"tokens.typography.body.tracking": *home
|
|
34
|
+
"tokens.typography.body.use": *home
|
|
35
|
+
"tokens.typography.nav.size": *home
|
|
36
|
+
"tokens.typography.nav.weight": *home
|
|
37
|
+
"tokens.typography.nav.lineHeight": *home
|
|
38
|
+
"tokens.typography.nav.tracking": *home
|
|
39
|
+
"tokens.typography.nav.use": *home
|
|
40
|
+
"tokens.spacing.xs": *home
|
|
41
|
+
"tokens.spacing.sm": *home
|
|
42
|
+
"tokens.spacing.md": *home
|
|
43
|
+
"tokens.spacing.lg": &standard { surface_id: standard, source_id: standard-live, method: computed-style, captured: "2026-07-12" }
|
|
44
|
+
"tokens.rounded.square": *home
|
|
45
|
+
"tokens.rounded.icon": *home
|
|
46
|
+
"tokens.rounded.control": *home
|
|
47
|
+
"tokens.shadow.flat": *home
|
|
48
|
+
"tokens.components.gnb-store-link.type": *home
|
|
49
|
+
"tokens.components.gnb-store-link.fg": *home
|
|
50
|
+
"tokens.components.gnb-store-link.radius": *home
|
|
51
|
+
"tokens.components.gnb-store-link.padding": *home
|
|
52
|
+
"tokens.components.gnb-store-link.height": *home
|
|
53
|
+
"tokens.components.gnb-store-link.font": *home
|
|
54
|
+
"tokens.components.gnb-store-link.states": *home
|
|
55
|
+
"tokens.components.gnb-store-link.use": *home
|
|
56
|
+
"tokens.components.search-input.type": *home
|
|
57
|
+
"tokens.components.search-input.bg": *home
|
|
58
|
+
"tokens.components.search-input.fg": *home
|
|
59
|
+
"tokens.components.search-input.radius": *home
|
|
60
|
+
"tokens.components.search-input.padding": *home
|
|
61
|
+
"tokens.components.search-input.height": *home
|
|
62
|
+
"tokens.components.search-input.font": *home
|
|
63
|
+
"tokens.components.search-input.states": *home
|
|
64
|
+
"tokens.components.search-input.use": *home
|
|
65
|
+
"tokens.components.product-image-link.type": *standard
|
|
66
|
+
"tokens.components.product-image-link.radius": *standard
|
|
67
|
+
"tokens.components.product-image-link.padding": *standard
|
|
68
|
+
"tokens.components.product-image-link.height": *standard
|
|
69
|
+
"tokens.components.product-image-link.font": *standard
|
|
70
|
+
"tokens.components.product-image-link.use": *standard
|
|
71
|
+
"tokens.components.product-utility-button.type": *standard
|
|
72
|
+
"tokens.components.product-utility-button.fg": *standard
|
|
73
|
+
"tokens.components.product-utility-button.radius": *standard
|
|
74
|
+
"tokens.components.product-utility-button.padding": *standard
|
|
75
|
+
"tokens.components.product-utility-button.height": *standard
|
|
76
|
+
"tokens.components.product-utility-button.font": *standard
|
|
77
|
+
"tokens.components.product-utility-button.states": *standard
|
|
78
|
+
"tokens.components.product-utility-button.use": *standard
|
|
13
79
|
tokens:
|
|
14
|
-
source:
|
|
15
|
-
extracted: "2026-
|
|
80
|
+
source: reconciled
|
|
81
|
+
extracted: "2026-07-12"
|
|
82
|
+
note: "Two current first-party storefronts. Pretendard is both computed on visible text and backed by loaded Musinsa CDN FontFace records (657 uses). The capture reported zero interaction expansions; only default component observations are promoted."
|
|
16
83
|
colors:
|
|
17
84
|
primary: "#000000"
|
|
18
|
-
primary-hover: "#222222"
|
|
19
|
-
brand: "#000000"
|
|
20
85
|
canvas: "#ffffff"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
on-primary: "#ffffff"
|
|
25
|
-
hairline: "#eeeeee"
|
|
26
|
-
border-mid: "#dddddd"
|
|
27
|
-
error: "#ff003b"
|
|
28
|
-
accent-star: "#ffb900"
|
|
86
|
+
foreground: "#000000"
|
|
87
|
+
muted: "#666666"
|
|
88
|
+
line: "#ebebeb"
|
|
29
89
|
typography:
|
|
30
|
-
family: { sans: "Pretendard"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
body-lg: { size: 14, weight: 400, lineHeight: 1.43, tracking: -0.3, use: "Standard product card title" }
|
|
36
|
-
body: { size: 13, weight: 400, lineHeight: 1.38, tracking: -0.3, use: "Default body, listings text" }
|
|
37
|
-
body-bold: { size: 13, weight: 700, lineHeight: 1.38, tracking: -0.3, use: "Brand name above product title" }
|
|
38
|
-
caption: { size: 12, weight: 400, lineHeight: 1.33, tracking: -0.3, use: "Metadata, review counts" }
|
|
39
|
-
micro: { size: 11, weight: 500, lineHeight: 1.27, tracking: -0.2, use: "Badge text, fine print" }
|
|
40
|
-
spacing: [2, 4, 8, 12, 16, 20, 24, 32, 40, 56, 80]
|
|
41
|
-
rounded: { sm: 2, md: 4, lg: 4, full: 9999 }
|
|
90
|
+
family: { sans: "Pretendard" }
|
|
91
|
+
body: { size: 14, weight: 400, lineHeight: 1.5, tracking: 0, use: "Repeated storefront body and product text" }
|
|
92
|
+
nav: { size: 16, weight: 500, lineHeight: 1.375, tracking: 0, use: "56px global-navigation store link" }
|
|
93
|
+
spacing: { xs: 4, sm: 6, md: 8, lg: 24 }
|
|
94
|
+
rounded: { square: 0, icon: 2, control: 4 }
|
|
42
95
|
shadow:
|
|
43
|
-
|
|
44
|
-
floating: "0px 4px 16px rgba(0,0,0,0.10)"
|
|
96
|
+
flat: "none"
|
|
45
97
|
components_harvested: true
|
|
46
98
|
components:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
button
|
|
51
|
-
input: { type: input, bg: "#ffffff", fg: "#222222", border: "1px solid #dddddd", radius: "4px", padding: "12px 14px", font: "14px / 400", focus: "1px solid #000000", use: "Default text input" }
|
|
52
|
-
input-search: { type: input, bg: "#f5f5f5", radius: "4px", padding: "12px 16px 12px 40px", font: "14px / 400", focus: "bg #ffffff, 1px solid #000000", use: "Header search bar" }
|
|
53
|
-
card-product: { type: card, bg: "#ffffff", radius: "0px", shadow: "none", use: "Default product listing card, image edge is card edge" }
|
|
54
|
-
card-brand: { type: card, bg: "#fafafa", border: "1px solid #eeeeee", radius: "4px", padding: "16px", use: "Brand-of-the-day entry" }
|
|
55
|
-
badge-sale: { type: badge, bg: "transparent", fg: "#ff003b", font: "13px / 700", radius: "0px", use: "Inline sale percentage on product cards" }
|
|
56
|
-
badge-exclusive: { type: badge, bg: "#000000", fg: "#ffffff", font: "11px / 700", padding: "3px 6px", radius: "2px", use: "무신사 단독 / 선발매 exclusive flags" }
|
|
57
|
-
badge-outline: { type: badge, bg: "#ffffff", fg: "#000000", border: "1px solid #000000", font: "11px / 700", padding: "3px 6px", radius: "2px", use: "NEW, 무료배송 minor flags" }
|
|
58
|
-
chip: { type: badge, bg: "#ffffff", fg: "#222222", border: "1px solid #dddddd", font: "13px / 500", padding: "8px 14px", radius: "999px", active: "bg #000000, fg #ffffff, 13px / 700", use: "Category / size / color filter pills" }
|
|
59
|
-
tab: { type: tab, font: "14px / 700", active: "2px black bottom border, fg #000000", use: "Category nav, active item underline" }
|
|
60
|
-
toast: { type: toast, bg: "#000000", fg: "#ffffff", radius: "4px", font: "14px / 500", use: "Error / add-to-cart snackbar, 3s auto-dismiss" }
|
|
99
|
+
gnb-store-link: { type: button, fg: "rgba(255,255,255,0.8)", radius: "0px", padding: "0px 8px", height: "56px", font: "16px / 500 / Pretendard", states: "default captured only; interaction coverage 0", use: "Global-navigation store link on both captured storefronts" }
|
|
100
|
+
search-input: { type: input, bg: "#ffffff", fg: "#8a8a8a", radius: "4px", padding: "8px 28px 8px 8px", height: "36px", font: "14px / 400 / Pretendard", states: "default captured only; interaction coverage 0", use: "Home storefront search input" }
|
|
101
|
+
product-image-link: { type: card, radius: "0px", padding: "0px", height: "312px", font: "14px / 400 / Pretendard", use: "MUSINSA STANDARD product-image link in the listing grid" }
|
|
102
|
+
product-utility-button: { type: button, fg: "#000000", radius: "0px", padding: "4px", height: "28px", font: "14px / 400 / Pretendard", states: "default captured only; interaction coverage 0", use: "Product-card utility control on the MUSINSA STANDARD storefront" }
|
|
61
103
|
---
|
|
62
104
|
|
|
63
105
|
# Design System Inspiration of Musinsa (무신사)
|
|
64
106
|
|
|
65
107
|
## 1. Visual Theme & Atmosphere
|
|
66
108
|
|
|
67
|
-
Musinsa
|
|
109
|
+
Musinsa is a Korean fashion platform that began with sneaker photographs and street snaps, then grew into a marketplace and content ecosystem for Korean fashion brands. Its current public storefront capture is visually restrained at the interface layer: `#ffffff` canvas, `#000000` text, `#ebebeb` lines, square product imagery, and a loaded Pretendard text system. That restraint serves a catalog whose product photography, brand imagery, and editorial modules carry the visual variety. The official history connects this emphasis on images to the 2001 sneaker community and the later development of MUSINSA.com, Magazine, and Store. In 2025 Musinsa also renewed the MUSINSA STORE BI, making the retail-service identity bolder and separating it from the company CI as its global and offline footprint expanded. [Official history](https://about.musinsa.com/newsroom/about-musinsa) and [BI announcement](https://about.musinsa.com/newsroom/2025-1022) provide the narrative context; they do not by themselves supply interface tokens.
|
|
68
110
|
|
|
69
|
-
The
|
|
111
|
+
The two supplied Tier 1 surfaces are the main Musinsa recommendation storefront and the MUSINSA STANDARD brand storefront. They share a black/white/gray web chrome and dense 14px Pretendard product text. This pass does not treat the brand storefront as a proxy for every commerce, editorial, authenticated, mobile-app, help, or marketing surface.
|
|
70
112
|
|
|
71
|
-
**Key
|
|
72
|
-
|
|
73
|
-
-
|
|
74
|
-
- Pretendard
|
|
75
|
-
-
|
|
76
|
-
-
|
|
77
|
-
-
|
|
78
|
-
- Photograph-first composition: product image dominates, chrome recedes
|
|
79
|
-
- Black solid as primary CTA -- `#000000` filled buttons with white text, never blue, never branded
|
|
113
|
+
**Key characteristics:**
|
|
114
|
+
|
|
115
|
+
- `#ffffff` canvas with `#000000` foreground and `#ebebeb` repeated line color
|
|
116
|
+
- Pretendard loaded from Musinsa’s own `image.msscdn.net` font files and visibly used across 657 captured elements
|
|
117
|
+
- Repeated 14px / 400 text, with a 16px / 500 global-navigation store link
|
|
118
|
+
- Square product imagery and listing controls; 4px search-input corners and 2px small-icon geometry are local defaults, not a universal radius scale
|
|
119
|
+
- No captured hover, focus, pressed, disabled, dialog, toast, or form-error state is promoted
|
|
80
120
|
|
|
81
121
|
## 2. Color Palette & Roles
|
|
82
122
|
|
|
83
|
-
###
|
|
84
|
-
- **Pure Black** (`#000000`): Primary CTA fill, headings, product titles, brand wordmark. The non-negotiable foundation.
|
|
85
|
-
- **Pure White** (`#ffffff`): Page canvas, card surfaces, button text on black, navigation background.
|
|
86
|
-
- **Sale Red** (`#ff003b`): Discount percentage tags, "오늘만 무료배송" sale flags, time-limited promotion accents. Used scarcely.
|
|
87
|
-
|
|
88
|
-
### Neutral Scale
|
|
89
|
-
- **Gray 900** (`#222222`): Body text on light surfaces, secondary headings.
|
|
90
|
-
- **Gray 700** (`#333333`): Default body color (observed `rgb(51,51,51)` on body element).
|
|
91
|
-
- **Gray 500** (`#999999`): Metadata (review counts, brand descriptors, "구매 후기 N개").
|
|
92
|
-
- **Gray 400** (`#bbbbbb`): Disabled text, inactive icons.
|
|
93
|
-
- **Gray 200** (`#eeeeee`): Hairline grid borders, divider lines between product rows.
|
|
94
|
-
- **Gray 100** (`#f5f5f5`): Subtle fill for filter chips, search bar background, secondary CTAs.
|
|
95
|
-
- **Gray 50** (`#fafafa`): Lightest surface fill for nested sections.
|
|
96
|
-
|
|
97
|
-
### Semantic
|
|
98
|
-
- **Sale / Critical Red** (`#ff003b`): Sale percentages, error states. Same hue serves both roles.
|
|
99
|
-
- **Star Yellow** (`#ffb900`): Review star fills (only place yellow appears on the surface).
|
|
100
|
-
- **Members Pink** (`#ff58a0`): "Brand Snap" / "스타일" community tag accent (used sparingly on community surfaces).
|
|
101
|
-
|
|
102
|
-
### Borders
|
|
103
|
-
- **Hairline Border** (`#eeeeee`): Grid cell separator, card outline. The system's most-used non-text color.
|
|
104
|
-
- **Border Mid** (`#dddddd`): Input outline default.
|
|
105
|
-
- **Border Strong** (`#000000`): Selected filter chip, focused input, active tab underline.
|
|
123
|
+
### Current storefront tokens
|
|
106
124
|
|
|
107
|
-
|
|
125
|
+
- **Primary / Foreground** (`#000000`): repeated visible text and product utility-control color on both Tier 1 storefronts.
|
|
126
|
+
- **Canvas** (`#ffffff`): current search-input and page-surface color.
|
|
127
|
+
- **Muted text** (`#666666`): footer and supporting copy on the captured main storefront.
|
|
128
|
+
- **Line** (`#ebebeb`): repeatedly computed border color across both captured surfaces.
|
|
108
129
|
|
|
109
|
-
###
|
|
110
|
-
- **Primary (Korean + Latin)**: `"Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Malgun Gothic", "맑은 고딕", AppleGothic, dotum, sans-serif`
|
|
111
|
-
- **Fallback (legacy surfaces)**: `"Noto Sans KR", "malgun gothic", AppleGothic, dotum, sans-serif` (observed body font-family on category pages, 2026-05)
|
|
112
|
-
- **Design Principle**: No custom display typeface. Editorial weight comes from the photograph and from disciplined use of weight 700 on tight 13-15px sizes — not from a branded webfont.
|
|
113
|
-
|
|
114
|
-
### Hierarchy
|
|
115
|
-
|
|
116
|
-
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
|
117
|
-
|------|------|------|--------|-------------|----------------|-------|
|
|
118
|
-
| Display | Pretendard | 28px | 700 | 36px | -0.4px | Editorial banner / event title |
|
|
119
|
-
| Heading Large | Pretendard | 22px | 700 | 30px | -0.4px | Category page title |
|
|
120
|
-
| Heading | Pretendard | 18px | 700 | 26px | -0.4px | Section header ("랭킹", "스타일") |
|
|
121
|
-
| Title | Pretendard | 15px | 700 | 22px | -0.3px | Product detail page title |
|
|
122
|
-
| Body Large | Pretendard | 14px | 400 | 20px | -0.3px | Standard product card title |
|
|
123
|
-
| Body | Pretendard | 13px | 400 | 18px | -0.3px | Default body, listings text |
|
|
124
|
-
| Body Bold | Pretendard | 13px | 700 | 18px | -0.3px | Brand name above product title |
|
|
125
|
-
| Caption | Pretendard | 12px | 400 | 16px | -0.3px | Metadata, review counts, timestamps |
|
|
126
|
-
| Caption Bold | Pretendard | 12px | 700 | 16px | -0.3px | Sale percentage labels |
|
|
127
|
-
| Micro | Pretendard | 11px | 500 | 14px | -0.2px | Badge text, fine print |
|
|
128
|
-
|
|
129
|
-
### Principles
|
|
130
|
-
- **Tight tracking is the brand**: All Korean type uses negative letter-spacing (`-0.2px` to `-0.4px`). On a 13px line, that's the difference between editorial density and corporate looseness.
|
|
131
|
-
- **Two weights do most of the work**: Regular (400) and Bold (700). Medium (500) is reserved for badges and small labels.
|
|
132
|
-
- **Compact scale, dense baseline**: Body defaults to 13-14px. The grid is built to show *more products per scroll*, not bigger text.
|
|
133
|
-
- **Headline weight via boldness, not size**: A product title at 15px/700 outperforms 20px/400 — the system trusts weight, not scale.
|
|
134
|
-
- **No italics**: Korean type doesn't carry italic stress meaningfully; the system avoids it even on Latin substrings.
|
|
130
|
+
### Boundary
|
|
135
131
|
|
|
136
|
-
|
|
132
|
+
No sale, error, success, selected-filter, promotional, or dark-surface color is canonical in this pass. The older red and yellow claims were not present in the supplied Tier 1 color evidence and are omitted rather than reconstructed from a past snapshot or a different surface.
|
|
137
133
|
|
|
138
|
-
|
|
134
|
+
## 3. Typography Rules
|
|
139
135
|
|
|
140
|
-
|
|
141
|
-
- Background: `#000000`
|
|
142
|
-
- Text: `#ffffff`
|
|
143
|
-
- Radius: 4px
|
|
144
|
-
- Padding: 14px 20px
|
|
145
|
-
- Font: 15px / 700 / Pretendard
|
|
146
|
-
- Hover: `#222222`
|
|
147
|
-
- Pressed: `#333333`
|
|
148
|
-
- Disabled: `#cccccc` background, `#ffffff` text
|
|
149
|
-
- Use: Primary CTA — `장바구니`, `구매하기`, `좋아요`, `로그인`
|
|
150
|
-
|
|
151
|
-
**Outline (Black Border)**
|
|
152
|
-
- Background: `#ffffff`
|
|
153
|
-
- Text: `#000000`
|
|
154
|
-
- Border: 1px solid `#000000`
|
|
155
|
-
- Radius: 4px
|
|
156
|
-
- Padding: 14px 20px
|
|
157
|
-
- Font: 15px / 700 / Pretendard
|
|
158
|
-
- Hover: `#f5f5f5` background
|
|
159
|
-
- Use: Secondary CTA — `브랜드 홈`, `사이즈 가이드`, `리뷰 작성`
|
|
160
|
-
|
|
161
|
-
**Neutral (Gray Fill)**
|
|
162
|
-
- Background: `#f5f5f5`
|
|
163
|
-
- Text: `#222222`
|
|
164
|
-
- Border: 1px solid `#eeeeee`
|
|
165
|
-
- Radius: 4px
|
|
166
|
-
- Padding: 12px 16px
|
|
167
|
-
- Font: 14px / 500 / Pretendard
|
|
168
|
-
- Hover: `#eeeeee` background
|
|
169
|
-
- Use: Tertiary actions — filter open, view-mode toggle, share
|
|
170
|
-
|
|
171
|
-
**Sale Red (Promotion)**
|
|
172
|
-
- Background: `#ff003b`
|
|
173
|
-
- Text: `#ffffff`
|
|
174
|
-
- Radius: 4px
|
|
175
|
-
- Padding: 12px 18px
|
|
176
|
-
- Font: 14px / 700 / Pretendard
|
|
177
|
-
- Use: Time-limited sale CTA — `타임세일 자세히 보기`, `오늘만 특가`. Used scarcely.
|
|
136
|
+
### Font evidence boundary
|
|
178
137
|
|
|
179
|
-
|
|
138
|
+
| Evidence class | Resolution |
|
|
139
|
+
|---|---|
|
|
140
|
+
| Official product-use | The official company newsroom describes Musinsa’s product and retail evolution, but does not publish a universal current typography token. |
|
|
141
|
+
| Live computed surface-use | Both captured storefronts compute visible text as Pretendard; the collector recorded 657 visible uses. |
|
|
142
|
+
| FontFaceSet and source corroboration | Pretendard is loaded, with Musinsa-hosted Regular, Medium, SemiBold, and Bold source files under `image.msscdn.net`. |
|
|
143
|
+
| Official distributed asset | No Musinsa-exclusive distributed type family was verified. |
|
|
144
|
+
| Declared-only | FontAwesome and swiper-icons were declared but had zero observed visible text uses. |
|
|
145
|
+
| License | Pretendard’s upstream project publishes it under SIL Open Font License 1.1; this describes the font asset, not a Musinsa brand asset. [License](https://github.com/orioncactus/pretendard/blob/main/LICENSE) |
|
|
146
|
+
| Unresolved | Native-app, global-store, help-center, campaign, and authenticated-account typography remain outside these two captures. |
|
|
180
147
|
|
|
181
|
-
|
|
182
|
-
- Background: `#ffffff`
|
|
183
|
-
- Border: 1px solid `#dddddd`
|
|
184
|
-
- Radius: 4px
|
|
185
|
-
- Padding: 12px 14px
|
|
186
|
-
- Text: 14px / 400 / `#222222`
|
|
187
|
-
- Placeholder: `#999999`
|
|
188
|
-
- Focus: 1px solid `#000000` (no glow ring; just border darkens)
|
|
189
|
-
- Use: Default text input — login, sign-up, address forms
|
|
190
|
-
|
|
191
|
-
**Search**
|
|
192
|
-
- Background: `#f5f5f5`
|
|
193
|
-
- Border: none
|
|
194
|
-
- Radius: 4px
|
|
195
|
-
- Padding: 12px 16px 12px 40px (left-pad for inline magnifier icon)
|
|
196
|
-
- Text: 14px / 400 / `#222222`
|
|
197
|
-
- Placeholder: `#999999` ("브랜드, 상품, 프로필, 태그 등")
|
|
198
|
-
- Focus: `#ffffff` background, 1px solid `#000000` border
|
|
199
|
-
- Use: Header search bar across all surfaces
|
|
148
|
+
### Font family
|
|
200
149
|
|
|
201
|
-
**
|
|
202
|
-
-
|
|
203
|
-
-
|
|
204
|
-
- Use: Form validation failure
|
|
150
|
+
- **Current visible UI family:** `Pretendard, "Apple SD Gothic Neo", sans-serif`
|
|
151
|
+
- **Loaded source boundary:** the collector observed Pretendard face sources from `https://image.msscdn.net/platform/fonts/`; the family is loadable in these captured storefronts.
|
|
152
|
+
- Do not replace unavailable or unobserved brand type with Pretendard. It is canonical here only because computed visible use and loaded FontFace/source evidence agree.
|
|
205
153
|
|
|
206
|
-
###
|
|
154
|
+
### Observed hierarchy
|
|
207
155
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
-
|
|
212
|
-
|
|
213
|
-
- Image: 4:5 portrait aspect ratio, no radius
|
|
214
|
-
- Shadow: none
|
|
215
|
-
- Use: Default product listing card. The grid cell, not a floating card.
|
|
216
|
-
|
|
217
|
-
**Curation Tile (Editorial Banner)**
|
|
218
|
-
- Background: `#ffffff` (or full-bleed image)
|
|
219
|
-
- Radius: 0px
|
|
220
|
-
- Padding: 0px
|
|
221
|
-
- Use: Editorial sections (`스타일`, `에디터픽`, `오늘의 코디`) — full-bleed photographs as the card surface itself.
|
|
156
|
+
| Role | Font | Size | Weight | Line Height | Tracking | Provenance |
|
|
157
|
+
|---|---|---:|---:|---:|---:|---|
|
|
158
|
+
| Storefront body / product text | Pretendard | 14px | 400 | 21px | normal | Repeated on home and MUSINSA STANDARD capture elements |
|
|
159
|
+
| Global-navigation store link | Pretendard | 16px | 500 | 22px | normal | `home::[data-omd-capture="1"]`, 56px high |
|
|
160
|
+
| Storefront search input | Pretendard | 14px | 400 | 20px | normal | `home::[data-omd-capture="20"]`, 36px high |
|
|
222
161
|
|
|
223
|
-
|
|
224
|
-
- Background: `#fafafa`
|
|
225
|
-
- Border: 1px solid `#eeeeee`
|
|
226
|
-
- Radius: 4px
|
|
227
|
-
- Padding: 16px
|
|
228
|
-
- Use: Brand-of-the-day, brand-snap entry on home feed
|
|
162
|
+
## 4. Component Stylings
|
|
229
163
|
|
|
230
|
-
###
|
|
164
|
+
### Captured storefront components
|
|
231
165
|
|
|
232
|
-
**
|
|
233
|
-
-
|
|
234
|
-
- Text: `#ff003b`
|
|
235
|
-
- Font: 13px / 700 / Pretendard
|
|
236
|
-
- Padding: 0px
|
|
166
|
+
**Global-navigation Store Link**
|
|
167
|
+
- Text: `rgba(255,255,255,0.8)`
|
|
237
168
|
- Radius: 0px
|
|
238
|
-
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
-
|
|
242
|
-
-
|
|
243
|
-
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
- Use: "무신사 단독", "선발매" exclusive flags on product images
|
|
247
|
-
|
|
248
|
-
**New / Free Shipping**
|
|
169
|
+
- Padding: 0px 8px
|
|
170
|
+
- Height: 56px
|
|
171
|
+
- Font: 16px / 500 / Pretendard
|
|
172
|
+
- States: Default captured only; the collector recorded zero interaction expansions.
|
|
173
|
+
- Use: Global-navigation store link on both captured storefronts.
|
|
174
|
+
- Provenance: `home::[data-omd-capture="1"]`, selector class `_gnb__store_102dz_106`; also observed on `standard`.
|
|
175
|
+
|
|
176
|
+
**Home Search Input**
|
|
249
177
|
- Background: `#ffffff`
|
|
178
|
+
- Text: `#8a8a8a`
|
|
179
|
+
- Radius: 4px
|
|
180
|
+
- Padding: 8px 28px 8px 8px
|
|
181
|
+
- Height: 36px
|
|
182
|
+
- Font: 14px / 400 / Pretendard
|
|
183
|
+
- States: Default captured only; the collector recorded zero interaction expansions.
|
|
184
|
+
- Use: Search input on the main recommendation storefront.
|
|
185
|
+
- Provenance: `home::[data-omd-capture="20"]`, `input`, class begins `font-global placeholder-gray-400`.
|
|
186
|
+
|
|
187
|
+
**MUSINSA STANDARD Product-image Link**
|
|
188
|
+
- Radius: 0px
|
|
189
|
+
- Padding: 0px
|
|
190
|
+
- Height: 312px
|
|
191
|
+
- Font: 14px / 400 / Pretendard
|
|
192
|
+
- Use: Product-image link in the visible listing grid.
|
|
193
|
+
- Provenance: `standard::[data-omd-capture="421"]`, `a`, class includes `GoodsItem-BGx5c3Fz__Hr`.
|
|
194
|
+
|
|
195
|
+
**MUSINSA STANDARD Product Utility Button**
|
|
250
196
|
- Text: `#000000`
|
|
251
|
-
- Border: 1px solid `#000000`
|
|
252
|
-
- Font: 11px / 700 / Pretendard
|
|
253
|
-
- Padding: 3px 6px
|
|
254
|
-
- Radius: 2px
|
|
255
|
-
- Use: "NEW", "무료배송" minor flags. Outline keeps the photograph dominant.
|
|
256
|
-
|
|
257
|
-
**Rank Badge**
|
|
258
|
-
- Background: `#000000`
|
|
259
|
-
- Text: `#ffffff`
|
|
260
|
-
- Font: 12px / 700 / Pretendard
|
|
261
|
-
- Padding: 4px 8px
|
|
262
197
|
- Radius: 0px
|
|
263
|
-
-
|
|
198
|
+
- Padding: 4px
|
|
199
|
+
- Height: 28px
|
|
200
|
+
- Font: 14px / 400 / Pretendard
|
|
201
|
+
- States: Default captured only; the collector recorded zero interaction expansions.
|
|
202
|
+
- Use: Product-card utility control on the brand storefront.
|
|
203
|
+
- Provenance: `standard::[data-omd-capture="67"]`, `button`, class includes `GoodsItem-BGx5c3Fz__Br`.
|
|
264
204
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
- Use: Category / size / color filter pills
|
|
273
|
-
|
|
274
|
-
**Filter Chip (Selected)**
|
|
275
|
-
- Background: `#000000`
|
|
276
|
-
- Text: `#ffffff`
|
|
277
|
-
- Border: 1px solid `#000000`
|
|
278
|
-
- Font: 13px / 700 / Pretendard
|
|
279
|
-
- Padding: 8px 14px
|
|
280
|
-
- Radius: 999px
|
|
281
|
-
- Use: Active filter state
|
|
282
|
-
|
|
283
|
-
### Navigation
|
|
284
|
-
- Top header: `#ffffff` background, 56-60px height, 1px bottom border `#eeeeee`. Wordmark left (`MUSINSA`, 700, ~22px black), search center, account/cart right.
|
|
285
|
-
- Category nav: horizontal scroll on mobile (남성/여성/뷰티/스포츠/럭셔리/키즈/플레이어), 14px/700, active item gets a 2px black underline.
|
|
286
|
-
- Bottom tab bar (mobile): 5 items — `홈`, `랭킹`, `스타일`, `좋아요`, `마이`. Active label `#000000`, inactive `#999999`. No color differentiation; weight does the work.
|
|
205
|
+
No primary checkout button, filter-selected chip, sale badge, modal, toast, input focus/error, or hover/pressed state is included because the raw collector did not observe it. The prior generic component inventory is not retained as a current component contract.
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
**Verified:** 2026-07-13
|
|
209
|
+
**Tier 1 sources:** https://www.musinsa.com/main/musinsa/recommend?gf=A (main product storefront); https://www.musinsa.com/brand/musinsastandard?gf=A (MUSINSA STANDARD brand storefront).
|
|
210
|
+
**Tier 2 sources:** https://getdesign.md/musinsa (attempted direct lookup and indexed search; no usable record returned); https://styles.refero.design/?q=musinsa (attempted direct lookup and indexed search; no usable result returned).
|
|
211
|
+
**Conflicts unresolved:** none
|
|
287
212
|
|
|
288
213
|
## 5. Layout Principles
|
|
289
214
|
|
|
290
|
-
|
|
291
|
-
- Base unit: 4px
|
|
292
|
-
- Scale: 2px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 80px
|
|
293
|
-
- Global gutter (mobile): 16px on each side
|
|
294
|
-
- Global gutter (desktop): 20-24px each side, max content width ~1280px
|
|
295
|
-
- Inter-product vertical spacing: 24px between rows on the catalog grid
|
|
296
|
-
- Inter-section vertical spacing: 40-56px between editorial blocks on the home feed
|
|
297
|
-
|
|
298
|
-
### Grid & Container
|
|
299
|
-
- Mobile: 2-column product grid, 1px hairline gutter
|
|
300
|
-
- Tablet: 3-column product grid
|
|
301
|
-
- Desktop: 4-5 column product grid, depending on category
|
|
302
|
-
- Editorial / curation banner: full-bleed (edge-to-edge) on mobile, max 1280px on desktop
|
|
303
|
-
- The grid is the product. Avoid masonry, avoid staggered cells — every product gets the same rectangle.
|
|
304
|
-
|
|
305
|
-
### Whitespace Philosophy
|
|
306
|
-
- **Photographs separate themselves**: White space between product images is the system's primary breathing room — not padding *inside* cards, not margins around text.
|
|
307
|
-
- **Section breaks earn their space**: 40-56px vertical gaps mark real shifts (categories, editorial blocks); within a section, 16-24px is enough.
|
|
308
|
-
- **Don't pad the catalog**: Adding 24px of padding inside a product card pushes one fewer product into the viewport and breaks the magazine-grid feel.
|
|
309
|
-
|
|
310
|
-
### Border Radius Scale
|
|
311
|
-
- Sharp (0px): Product images, product cards, editorial banners, top-tier badges
|
|
312
|
-
- Tight (2px): Small flags ("NEW", "MUSINSA Only")
|
|
313
|
-
- Standard (4px): Buttons, inputs, brand cards
|
|
314
|
-
- Pill (999px): Filter chips, avatar frames
|
|
315
|
-
- Note: Musinsa is a *low-radius* system. Anything over 8px starts feeling like a different brand.
|
|
215
|
+
The captured storefronts repeatedly use 4px, 6px, 8px, and 24px spacing values. Product-image links on the MUSINSA STANDARD listing surface are square, with no observed container padding; section articles on that surface include 24px bottom padding. The two captures do not establish a responsive grid, desktop-to-mobile breakpoints, or a universal content gutter, so those are intentionally omitted.
|
|
316
216
|
|
|
317
217
|
## 6. Depth & Elevation
|
|
318
218
|
|
|
319
|
-
|
|
320
|
-
|-------|-----------|-----|
|
|
321
|
-
| Flat (Level 0) | No shadow, no border | Page background, product images, default state |
|
|
322
|
-
| Hairline (Level 1) | 1px solid `#eeeeee` | Card boundary, grid separator, header bottom border |
|
|
323
|
-
| Soft (Level 2) | `0px 2px 8px rgba(0,0,0,0.06)` | Sticky filter bar when scrolled, dropdown menus |
|
|
324
|
-
| Floating (Level 3) | `0px 4px 16px rgba(0,0,0,0.10)` | Bottom sheets, modal dialogs, snackbar |
|
|
325
|
-
|
|
326
|
-
**Shadow Philosophy**: Musinsa is allergic to elevation. The default card has *no* shadow and *no* border — its boundary is the photograph's edge. Shadows appear only when an element must visibly detach from the page (sticky bar, modal). The system never uses brand-tinted shadows. Drop-shadows on product images are forbidden — they read as cheap e-commerce, not editorial.
|
|
219
|
+
The captured navigation, product-link, and utility-control representatives report `box-shadow: none`. This supports a flat treatment for these observed elements only. No modal, sheet, dropdown, sticky, or promotional elevation token was captured.
|
|
327
220
|
|
|
328
221
|
## 7. Do's and Don'ts
|
|
329
222
|
|
|
330
223
|
### Do
|
|
331
|
-
|
|
332
|
-
-
|
|
333
|
-
-
|
|
334
|
-
-
|
|
335
|
-
- Let product photographs be the color in the layout
|
|
336
|
-
- Use `#ff003b` for sale percentages and time-limited promotions only
|
|
337
|
-
- Default to 2-column grid on mobile, 4-5 on desktop — the catalog is the page
|
|
338
|
-
- Use 13-14px as base body size — denser than Western e-com, intentionally
|
|
224
|
+
|
|
225
|
+
- Use the verified storefront canvas, foreground, line, typography, and component values only in the source domains where they were observed.
|
|
226
|
+
- Keep captured product-image links square and unpadded.
|
|
227
|
+
- Keep Pretendard tied to the verified Musinsa webfont evidence when reproducing the two captured storefront surfaces.
|
|
339
228
|
|
|
340
229
|
### Don't
|
|
341
|
-
|
|
342
|
-
-
|
|
343
|
-
-
|
|
344
|
-
-
|
|
345
|
-
- Don't use red (`#ff003b`) for navigation, decoration, or non-sale CTAs
|
|
346
|
-
- Don't switch to a custom display typeface — Pretendard at 700 is the headline voice
|
|
347
|
-
- Don't use illustration or mascot imagery in chrome — Musinsa's surfaces show clothing, not characters
|
|
348
|
-
- Don't soften the black — `#000000`, not `#1a1c20`. Editorial requires absolute contrast.
|
|
230
|
+
|
|
231
|
+
- Do not infer sale, error, success, selected, hover, focus, pressed, disabled, or authenticated-app styling from this snapshot.
|
|
232
|
+
- Do not present the MUSINSA STANDARD storefront as proof of universal Musinsa product, marketing, docs, or mobile-app behavior.
|
|
233
|
+
- Do not substitute a system font for a different claimed family; only the observed Pretendard family is available here.
|
|
349
234
|
|
|
350
235
|
## 8. Responsive Behavior
|
|
351
236
|
|
|
352
|
-
|
|
353
|
-
| Name | Width | Key Changes |
|
|
354
|
-
|------|-------|-------------|
|
|
355
|
-
| Mobile | <768px | 2-column grid, full-bleed editorial, bottom tab bar |
|
|
356
|
-
| Tablet | 768-1024px | 3-column grid, side-rail filters appear |
|
|
357
|
-
| Desktop | >1024px | 4-5 column grid, max content width ~1280px, persistent left-side category nav |
|
|
358
|
-
|
|
359
|
-
### Touch Targets
|
|
360
|
-
- Primary CTA buttons: 48px height
|
|
361
|
-
- Filter chips: 36px height
|
|
362
|
-
- Bottom tab bar items: 56px height
|
|
363
|
-
- Product card tap area: full card (image + metadata)
|
|
364
|
-
|
|
365
|
-
### Collapsing Strategy
|
|
366
|
-
- Desktop side-rail filters → mobile bottom-sheet filter (`필터` button opens full-height sheet)
|
|
367
|
-
- Desktop 5-column grid → mobile 2-column grid (no transitional 3-column on most catalogs)
|
|
368
|
-
- Editorial banners stay full-bleed at every breakpoint — they never get gutters
|
|
369
|
-
|
|
370
|
-
### Image Behavior
|
|
371
|
-
- Product images: 4:5 portrait, no radius, lazy-loaded with `#fafafa` placeholder
|
|
372
|
-
- Brand logos: square 1:1, 4px radius
|
|
373
|
-
- Editorial covers: 3:4 or 16:9 depending on placement, full-bleed at the breakpoint
|
|
237
|
+
No breakpoint transition, mobile navigation, or interaction expansion was captured in the supplied desktop evidence. The 56px global-navigation link, 36px home search input, 312px product-image link, and 28px product utility control are desktop-capture measurements, not cross-viewport specifications.
|
|
374
238
|
|
|
375
239
|
## 9. Agent Prompt Guide
|
|
376
240
|
|
|
377
|
-
|
|
378
|
-
- Primary CTA: Pure Black (`#000000`)
|
|
379
|
-
- CTA Hover: Soft Black (`#222222`)
|
|
380
|
-
- Background: Pure White (`#ffffff`)
|
|
381
|
-
- Heading text: Pure Black (`#000000`)
|
|
382
|
-
- Body text: Gray 700 (`#333333`)
|
|
383
|
-
- Metadata: Gray 500 (`#999999`)
|
|
384
|
-
- Placeholder: Gray 500 (`#999999`)
|
|
385
|
-
- Hairline border: Gray 200 (`#eeeeee`)
|
|
386
|
-
- Input border: Gray 300 (`#dddddd`)
|
|
387
|
-
- Disabled: Gray 400 (`#bbbbbb`)
|
|
388
|
-
- Sale red: (`#ff003b`)
|
|
389
|
-
- Star yellow: (`#ffb900`)
|
|
390
|
-
|
|
391
|
-
### Example Component Prompts
|
|
392
|
-
- "Create a Musinsa product card: white background, no border, no shadow, no radius. Image is 4:5 portrait at top, no radius. Below image: 8px gap, brand name in 13px Pretendard 700 #000000, product title in 13px 400 #333333 (2 lines max, ellipsis), 4px gap, price line: sale percentage in 13px 700 #ff003b inline before final price in 14px 700 #000000, original price strikethrough in 12px 400 #999999. Tight letter-spacing -0.3px throughout."
|
|
393
|
-
- "Build a primary CTA: #000000 background, white text, 15px weight 700 Pretendard, padding 14px 20px, 4px radius, full-width on mobile. Hover: #222222. Pressed: #333333. No icon."
|
|
394
|
-
- "Design a filter chip bar: horizontal scroll, 8px gap. Default chip: white bg, 1px solid #dddddd border, 13px/500 #222222 text, 999px radius, 8px 14px padding. Selected chip: #000000 bg, white text, 13px/700, same radius."
|
|
395
|
-
- "Create a Musinsa header: white bg, 56px height, 1px bottom border #eeeeee. Left: MUSINSA wordmark 22px/700 #000000. Center: search bar — #f5f5f5 bg, 4px radius, 12px 16px padding, 14px placeholder #999999 '브랜드, 상품, 프로필, 태그 등'. Right: heart icon, cart icon, profile icon — all 24px stroke #000000."
|
|
396
|
-
- "Design a sale badge: text-only, no background, no border. Just '-30%' in 13px Pretendard 700 #ff003b, inline with the product price."
|
|
397
|
-
|
|
398
|
-
### Iteration Guide
|
|
399
|
-
1. Default surface is `#ffffff` and default text is `#000000` — never `#1a1c20` or `#0e0f10`
|
|
400
|
-
2. Sale red `#ff003b` is the only chromatic accent — and only for discount/promotion
|
|
401
|
-
3. Border-radius defaults: 0px product surfaces, 4px buttons/inputs, 999px chips
|
|
402
|
-
4. Body 13-14px, headings via 700 weight not larger size
|
|
403
|
-
5. Korean letter-spacing `-0.3px` to `-0.4px` is non-negotiable for editorial feel
|
|
404
|
-
6. No shadows on product cards — hairline `#eeeeee` is the boundary
|
|
405
|
-
7. Photograph is always the brightest thing on screen — chrome must yield to it
|
|
406
|
-
|
|
407
|
-
---
|
|
241
|
+
Use only the evidence-backed subset: “Create a square MUSINSA STANDARD product-image link with no container padding, 14px/400 Pretendard supporting text, `#000000` foreground, `#ffffff` canvas, and `#ebebeb` line color where a captured border is needed.” Do not add a sale badge, prominent CTA, interaction state, responsive grid, or proprietary display face unless separately verified.
|
|
408
242
|
|
|
409
243
|
## 10. Voice & Tone
|
|
410
244
|
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
| Context | Tone |
|
|
414
|
-
|---|---|
|
|
415
|
-
| CTAs | Bare-stem Korean (`장바구니`, `구매하기`, `좋아요`, `팔로우`) / clipped English (`Shop`, `Buy`, `Save`, `Follow`) |
|
|
416
|
-
| Sale flags | One word + percentage (`최대 -50%`, `오늘만 특가`, `타임세일`). Never `놀라운 할인 혜택!`. |
|
|
417
|
-
| Product titles | Brand name on own line in bold, then literal product name. No marketing adjectives ("amazing", "must-have"). |
|
|
418
|
-
| Empty states | One short editorial line + one neutral suggestion (`아직 좋아한 상품이 없어요` + `상품 둘러보기`). Never `데이터가 없습니다`. |
|
|
419
|
-
| Error messages | Specific, actionable, blameless (`주소를 다시 확인해 주세요`). No `죄송합니다` boilerplate. |
|
|
420
|
-
| Reviews / community | First-person, casual (`-요` endings), no editorial polish — Musinsa lets users sound like users. |
|
|
421
|
-
| Editorial / lookbook | Magazine-style headline + 1-line dek. Korean-English mixed (`This Week's Pick — 이번 주의 코디`). |
|
|
422
|
-
| Sign-up / onboarding | Short. One screen, one input, one CTA. No onboarding tour. |
|
|
423
|
-
|
|
424
|
-
**Forbidden phrases.** `놀라운 할인`, `최저가 보장!!!`, `대박 세일`, `지금 바로 클릭`, `데이터가 없습니다`, `오류가 발생했습니다`, `불편을 드려 죄송합니다`. English bans: `amazing deals`, `best prices guaranteed`, `must-have`, `limited time only!!!`, `exclusive luxury`. Emoji are allowed in user reviews and community posts, but never in CTAs, error messages, sale flags, or chrome microcopy.
|
|
425
|
-
|
|
426
|
-
**Voice samples.**
|
|
427
|
-
|
|
428
|
-
- `대한민국 1등 패션 플랫폼` — corporate brand line, used on about-pages and press. <!-- cited: about.musinsa.com/about-musinsa, 2026-05 -->
|
|
429
|
-
- `Discover K-fashion` — global surface positioning. <!-- cited: about.musinsa.com newsroom, 2026-05 -->
|
|
430
|
-
- `MUSINSA STANDARD — 어디에나 어울리는 기본` — Musinsa Standard PB tagline pattern. <!-- illustrative: paraphrased from MUSINSA STANDARD positioning per The Korea Herald, 2026 -->
|
|
431
|
-
- `장바구니 담기` / `바로 구매하기` — primary CTA pair on product detail page. <!-- illustrative: standard Musinsa CTA pattern -->
|
|
432
|
-
- `오늘만 무료배송` — time-limited shipping flag. <!-- illustrative: standard Musinsa promo pattern -->
|
|
433
|
-
- `좋아요` / `팔로우` — community / brand-follow CTA labels. <!-- illustrative: standard Musinsa community CTA pattern -->
|
|
434
|
-
- `이번 주의 랭킹` — weekly ranking section header. <!-- illustrative: standard Musinsa editorial section pattern -->
|
|
245
|
+
The official company story uses a direct K-fashion platform narrative and the 2025 BI announcement uses the campaign line “Bolder Than Ever: The New MUSINSA.” Those are corporate/newsroom expressions, not a complete product-microcopy guide. Current storefront CTA, error, empty-state, and support-copy rules were not captured, so no synthetic voice samples are promoted.
|
|
435
246
|
|
|
436
247
|
## 11. Brand Narrative
|
|
437
248
|
|
|
438
|
-
Musinsa
|
|
439
|
-
|
|
440
|
-
The investor story tracks the design: in **2019, Sequoia Capital invested ~200B KRW**, valuing Musinsa at ~2.3 trillion won and making it Korea's first fashion-platform unicorn on a single funding round ([KoreaTechDesk](https://koreatechdesk.com/korean-online-fashion-giant-musinsa-secures-157-8-million-in-series-c-funding-led-by-kkr)). **2021** brought a Series B from IMM Investment + Sequoia at ~2.5 trillion won valuation. **2024** brought a **240B KRW round from KKR + Wellington Management at ~3.5 trillion won (~$2.4B+)** ([BoF — Musinsa $6.8B IPO](https://www.businessoffashion.com/news/retail/korean-fashion-retailer-musinsa-seeking-68-billion-valuation-with-ipo/), [Korea Times](http://www.koreatimes.co.kr/www/biz/2023/10/175_361856.html)). The company has since picked **Citigroup and JPMorgan** for a planned IPO targeting north of 3.2 trillion won market cap.
|
|
441
|
-
|
|
442
|
-
The product layered on top of that funding ramp is just as deliberate. **MUSINSA STANDARD**, the in-house PB launched in **2017**, took the curatorial voice of the platform and pointed it inward — affordable basics with a tight, editorial palette. The first physical store opened in **Hongdae in 2021**, and by 2025 the chain had 33 domestic stores and 28M annual visits, with **first overseas store in Shanghai (Huaihai Plaza) in late 2024** and a **MUSINSA Shop launching on ZOZOTOWN in November 2025** ([Korea Herald — Musinsa Standard 1T won](https://www.koreaherald.com/article/10639378), [about.musinsa.com — MUSINSA × ZOZOTOWN](https://about.musinsa.com/newsroom/musinsa-zozo)).
|
|
443
|
-
|
|
444
|
-
What Musinsa refuses: the rainbow-palette aesthetics of nationwide marketplaces (Coupang, 11st, Gmarket), the lifestyle-blog mood of Western e-com (Net-a-Porter, Mr Porter), and the algorithmic-feed UX of social commerce. Musinsa keeps the catalog as the home page. Photographs lead. Black wordmark, white canvas, hairline grid. Sale red is the only saturated thing on the page, used only when something is actually on sale. The mission statement on the corporate site is **"대한민국 1등 패션 플랫폼"** — Korea's number-one fashion platform — and the design system reads as the editorial expression of that claim ([about.musinsa.com](https://about.musinsa.com/newsroom/about-musinsa)).
|
|
445
|
-
|
|
446
|
-
The closing read: Musinsa's monochrome is not minimalism for its own sake. It's the visual descendant of the 2001 sneaker-photo community, where the only thing that mattered was the photograph of the shoe. Twenty-five years and one IPO-track later, the design still gets out of the way of the picture.
|
|
249
|
+
Musinsa began in 2001 as a sneaker-focused community whose name is an abbreviation of “a place with tremendous sneaker photography.” The company says the community evolved into MUSINSA.com in 2003, expanded through fashion content and street snaps, and opened MUSINSA Store in 2009 to connect fashion brands with customers. Its 2025 founder story frames the company’s present role as a bridge for Korean fashion brands to reach international audiences; the company’s 2025 store-BI announcement separately explains that the renewed retail identity is intended to distinguish the store service from the corporate identity as online, offline, and global operations expand. [Official origin and evolution](https://about.musinsa.com/newsroom/musinsa-ceo) · [Official 2025 BI announcement](https://about.musinsa.com/newsroom/2025-1022)
|
|
447
250
|
|
|
448
251
|
## 12. Principles
|
|
449
252
|
|
|
450
|
-
1. **
|
|
451
|
-
2. **
|
|
452
|
-
3. **
|
|
453
|
-
4. **Density is a feature.** Body text at 13-14px and tight `-0.3px` tracking is intentional — Musinsa's user is *scanning* a magazine grid, not reading prose. *UI implication:* never bump body to 16-18px to "feel modern"; the catalog grid breaks at lower density.
|
|
454
|
-
5. **Two weights do most of the work.** Pretendard 400 and 700 — Medium (500) is for badges, Light is forbidden. *UI implication:* if a layout asks for a third weight to hierarchy properly, the size hierarchy is wrong; restate with size + weight=700.
|
|
455
|
-
6. **Sharp corners on product surfaces.** Product cards, editorial banners, and rank badges use 0px radius. The 4px radius is a chrome detail (buttons, inputs), not a content treatment. *UI implication:* if a product card grows a 12px radius, it has drifted toward "lifestyle blog" and should be flattened.
|
|
456
|
-
7. **Letter-spacing is the brand's whisper.** All Korean type carries `-0.2px` to `-0.4px`. This is invisible individually and unmissable in aggregate. *UI implication:* every Korean type token must specify negative tracking; positive or 0 tracking on Korean reads as foreign / corporate.
|
|
457
|
-
8. **The grid is the homepage.** The home feed is curated editorial, but the catalog grid is what the brand *is*. Onboarding ends in the grid. Search ends in the grid. Discovery ends in the grid. *UI implication:* a redesign that buries the catalog under feature-card carousels has lost the plot — the catalog must be at most one tap from any home surface.
|
|
253
|
+
1. **Fashion content and partner brands are central to the platform story.** Musinsa’s official history describes street snaps, lookbooks, editorials, and brand discovery as part of the service. *UI implication:* do not replace verified product and editorial imagery with invented brand-color decoration. [Official history](https://about.musinsa.com/newsroom/about-musinsa)
|
|
254
|
+
2. **Store identity and company identity are intentionally distinct.** The 2025 announcement says the renewed MUSINSA STORE BI separates the retail service from the corporate CI. *UI implication:* do not generalize a store-surface token to corporate, campaign, or offline-signage contexts without evidence. [Official BI announcement](https://about.musinsa.com/newsroom/2025-1022)
|
|
255
|
+
3. **Evidence domains remain separate.** The two live storefront captures verify a small set of web tokens; official company history explains brand context. *UI implication:* leave any unobserved interaction, mobile, authenticated, marketing, or documentation pattern absent rather than filling it with a plausible ecommerce convention.
|
|
458
256
|
|
|
459
257
|
## 13. Personas
|
|
460
258
|
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
**현우 (Hyunwoo), 25, Seoul.** University student in 마포구. Opens Musinsa 4-5 times a week — not always to buy. Treats the weekly ranking page as a fashion magazine, scrolls for inspiration first and purchase second. Owns 3 pairs of sneakers from MUSINSA STANDARD basics. Will pay full price for a 무신사 단독 (Musinsa Only) drop; will wait for a sale on anything else.
|
|
464
|
-
|
|
465
|
-
**서연 (Seoyeon), 28, Seoul.** Marketing associate, lives in 강남구. Uses Musinsa for office-friendly basics and weekend streetwear. Reads brand stories in the editorial sections before adding to cart. Cares about review photos more than star ratings — wants to see how it fits a body close to hers. Has Musinsa app push notifications turned on only for "follow" brand restocks.
|
|
466
|
-
|
|
467
|
-
**지호 (Jiho), 22, Busan.** University student. Discovered Musinsa through 무신사 스탠다드 marketing on Instagram. Buys T-shirts, hoodies, and chinos in 3-color sets when they go on sale. Knows the price-comparison tab exists but rarely uses it — trusts that Musinsa's red sale percentage is the real one.
|
|
468
|
-
|
|
469
|
-
**Mei, 26, Shanghai.** Visited the MUSINSA STANDARD Huaihai Plaza store in late 2024 after seeing it on Xiaohongshu. Now uses the global Musinsa site (in Chinese/English) to buy K-fashion brands not available on Tmall. Expects the same monochrome editorial layout in any market — the global site that doesn't look like the Korean site reads as a knockoff to her.
|
|
259
|
+
No individual personas are promoted. The official material discusses customers, fashion enthusiasts, partner brands, and Korean designers at a group level, but it does not provide evidence for detailed fictional user biographies. Use stakeholder groups only: fashion shoppers seeking K-fashion discovery, and brands seeking a retail and content platform. [Official history](https://about.musinsa.com/newsroom/about-musinsa)
|
|
470
260
|
|
|
471
261
|
## 14. States
|
|
472
262
|
|
|
473
|
-
|
|
474
|
-
|---|---|
|
|
475
|
-
| **Empty (no liked items)** | Single editorial line (`아직 좋아한 상품이 없어요`) in 14px/400 `#333333`, 12px gap, secondary CTA `상품 둘러보기` in outline-black-button style. No illustration, no mascot. |
|
|
476
|
-
| **Empty (search no results)** | One line `'{검색어}'에 대한 결과가 없어요` in 14px/400 `#333333`, then 8px gap, recommended-brands grid below. Never a full-screen empty illustration. |
|
|
477
|
-
| **Empty (filter cleared)** | `조건에 맞는 상품이 없어요` in 14px/400 `#999999`. No CTA — user resets filters themselves. |
|
|
478
|
-
| **Loading (catalog grid)** | Skeleton blocks at `#eeeeee` matching product-card layout: 4:5 image rectangle, two short text lines, one shorter line. Shimmer 1.2s, 6% white highlight. No spinner overlay. |
|
|
479
|
-
| **Loading (infinite scroll)** | 2-3 skeleton cards appended at the bottom of the grid. Existing cards stay fully rendered. No spinner. |
|
|
480
|
-
| **Loading (cart action)** | Inline button text swaps to a small `#ffffff` spinner (24px) on the existing `#000000` button — button geometry stays identical for frame-stability. |
|
|
481
|
-
| **Error (inline form)** | Input border becomes `#ff003b` 1px, helper text 12px/400 `#ff003b` 6px below. One actionable sentence (`주소를 다시 확인해 주세요`). |
|
|
482
|
-
| **Error (toast)** | `#000000` background, white 14px/500 text, 4px radius, 3s auto-dismiss. Bottom of screen, 16px above bottom tab bar. One sentence. No icon. |
|
|
483
|
-
| **Error (network / blocking)** | Full-screen centered: 16px/700 `#000000` headline, 14px/400 `#999999` subline, retry button in primary-black style. No illustration. |
|
|
484
|
-
| **Success (added to cart)** | Bottom-edge slide-up snackbar: `#000000` bg, white 14px/500 text `장바구니에 담겼어요`, white-outline `장바구니 보기` text-button on right. 3s auto-dismiss. |
|
|
485
|
-
| **Success (purchase complete)** | Dedicated confirmation screen, not a toast. 22px/700 `#000000` `주문이 완료되었어요`, then order summary block (white bg, hairline border `#eeeeee`), and a primary-black `주문 내역 보기` CTA. No celebratory animation. |
|
|
486
|
-
| **Skeleton** | `#eeeeee` blocks at exact product-card dimensions. Shimmer 1.2s. Brand name and price slots stay blank until resolved — never inferred placeholders. |
|
|
487
|
-
| **Disabled** | Button bg drops to `#cccccc`, text stays `#ffffff`. No outline change, no opacity tricks. |
|
|
263
|
+
No empty, loading, error, success, skeleton, disabled, focus, or pressed state was captured in the supplied evidence. The collector’s interaction coverage is zero, so these states are intentionally omitted.
|
|
488
264
|
|
|
489
265
|
## 15. Motion & Easing
|
|
490
266
|
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
| Token | Value | Use |
|
|
494
|
-
|---|---|---|
|
|
495
|
-
| `motion-instant` | 0ms | Toggle flips, checkbox states |
|
|
496
|
-
| `motion-fast` | 150ms | Button press dim, hover transitions, inline focus |
|
|
497
|
-
| `motion-standard` | 220ms | Default — card taps, tab switches, dropdown reveals |
|
|
498
|
-
| `motion-slow` | 320ms | Sheet presentations, success-screen entries |
|
|
499
|
-
| `motion-page` | 280ms | Native push/pop between routes |
|
|
500
|
-
|
|
501
|
-
**Easings:**
|
|
502
|
-
|
|
503
|
-
| Token | Curve | Use |
|
|
504
|
-
|---|---|---|
|
|
505
|
-
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, snackbars, route entries |
|
|
506
|
-
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, snackbar auto-close |
|
|
507
|
-
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — expandable cards, tab content |
|
|
508
|
-
|
|
509
|
-
**Spring stance.** **Spring and overshoot easings are forbidden on Musinsa product surfaces.** The brand is editorial e-commerce; bouncy motion reads as toy-like or as a TikTok shopping app, neither of which Musinsa wants to be. The catalog grid is meant to feel like a magazine page turning — controlled, predictable, never elastic. The single licensed exception is the native pull-to-refresh indicator, which inherits the OS's default spring because overriding it feels worse than accepting it. Every other motion uses `ease-enter`, `ease-exit`, or `ease-standard`.
|
|
510
|
-
|
|
511
|
-
**Signature motions.**
|
|
512
|
-
|
|
513
|
-
1. **Product card tap.** Card image dims to 92% opacity on press (`motion-fast / ease-standard`), releases on tap-up before navigation. The card itself does not scale — scale on a magazine grid breaks the print metaphor.
|
|
514
|
-
2. **Filter sheet presentation.** Bottom sheet rises from `y+40px` with `motion-slow / ease-enter` and a synchronized backdrop fade `rgba(0,0,0,0)` → `rgba(0,0,0,0.5)`. Dismissal uses `motion-fast / ease-exit` — leaving is lighter than entering.
|
|
515
|
-
3. **Add-to-cart snackbar.** Slides up from bottom with `motion-standard / ease-enter`, holds 3s, slides down on `motion-fast / ease-exit`. No bounce. No icon spring.
|
|
516
|
-
4. **Tab switch (catalog → editorial → ranking).** Cross-fade only, `motion-standard` — sliding would imply an axial relationship between catalog modes that doesn't exist.
|
|
517
|
-
5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Cross-fades replace any slide. The catalog stays fully usable; just less kinetic.
|
|
518
|
-
|
|
519
|
-
<!--
|
|
520
|
-
OmD v0.1 Sources — Philosophy Layer (sections 10–15)
|
|
521
|
-
|
|
522
|
-
Tier 1 — Direct verification (MCP playwright + WebFetch, 2026-05):
|
|
523
|
-
- https://www.musinsa.com/category/001/goods?gf=A — confirmed page title
|
|
524
|
-
"상의 | 무신사 추천 상품"; body font-family observed as
|
|
525
|
-
`"Noto Sans KR", "malgun gothic", AppleGothic, dotum, sans-serif`;
|
|
526
|
-
body color rgb(51,51,51); body bg rgb(255,255,255); base size 14px.
|
|
527
|
-
Note: live computed-style extraction was partially blocked by an
|
|
528
|
-
unstable browser sandbox that intermittently re-navigated to other
|
|
529
|
-
Korean sites (yeogi.com, ohou.se, kakaobank, naver, qanda.ai).
|
|
530
|
-
The token claims (Pretendard, #000/#fff/#999/#eeeeee, sale red
|
|
531
|
-
#ff003b, 0px radius product cards) are reconciled from public
|
|
532
|
-
knowledge of Musinsa's surfaces and from the partial inspect that
|
|
533
|
-
did succeed. Re-verify in a stable browser before publishing.
|
|
534
|
-
- https://www.musinsa.com/main/musinsa/recommend?gf=A — page title
|
|
535
|
-
confirmed as "무신사".
|
|
536
|
-
|
|
537
|
-
Tier 2 — Press / secondary (WebSearch + WebFetch, 2026-05):
|
|
538
|
-
- https://about.musinsa.com/newsroom/musinsa-ceo — Cho Man-ho (조만호)
|
|
539
|
-
founder profile, 2001 Freechal sneaker community origin
|
|
540
|
-
(무진장 신발 사진이 많은 곳).
|
|
541
|
-
- https://about.musinsa.com/newsroom/about-musinsa — corporate brand
|
|
542
|
-
line "대한민국 1등 패션 플랫폼"; community-to-platform narrative.
|
|
543
|
-
- https://about.musinsa.com/newsroom/musinsa-zozo — MUSINSA × ZOZOTOWN
|
|
544
|
-
partnership (Nov 2025), Japan global expansion via ZOZOTOWN.
|
|
545
|
-
- https://canvasbusinessmodel.com/blogs/brief-history/musinsa-brief-history
|
|
546
|
-
— 2009 Musinsa Store launch confirmation.
|
|
547
|
-
- https://koreatechdesk.com/korean-online-fashion-giant-musinsa-secures-157-8-million-in-series-c-funding-led-by-kkr
|
|
548
|
-
— Sequoia 200B KRW 2019 round; KKR Series C; unicorn status.
|
|
549
|
-
- https://www.businessoffashion.com/news/retail/korean-fashion-retailer-musinsa-seeking-68-billion-valuation-with-ipo/
|
|
550
|
-
— IPO planning, Citigroup + JPMorgan, 6.8B valuation framing.
|
|
551
|
-
- http://www.koreatimes.co.kr/www/biz/2023/10/175_361856.html
|
|
552
|
-
— IPO target threshold (3.2 trillion won market cap).
|
|
553
|
-
- https://www.koreaherald.com/article/10639378 — MUSINSA STANDARD
|
|
554
|
-
1 trillion won annual transaction goal; PB scale.
|
|
555
|
-
- https://www.koreaherald.com/article/10449494 — MUSINSA vs Uniqlo
|
|
556
|
-
Gen Z positioning context.
|
|
557
|
-
- https://getdesign.md/musinsa — confirmed NO record. Tier 2 negative.
|
|
558
|
-
|
|
559
|
-
Re-verification status:
|
|
560
|
-
- Computed-style values for buttons, inputs, badges, and product cards
|
|
561
|
-
were inferred from partial inspect + public Musinsa surface knowledge,
|
|
562
|
-
not fully captured in a stable browser session. Tokens (sale red
|
|
563
|
-
#ff003b, hairline #eeeeee, sharp 0px corners) match standard Musinsa
|
|
564
|
-
surface treatment but should be re-verified before being used as
|
|
565
|
-
authoritative DS specs.
|
|
566
|
-
- The valuations (~2.3T 2019, ~2.5T 2021, ~3.5T 2024, 3.2T+ IPO target)
|
|
567
|
-
are from press; cross-check before public quotation.
|
|
568
|
-
|
|
569
|
-
Personas (§13) are fictional archetypes informed by Musinsa's publicly
|
|
570
|
-
described user segments (Korean Gen Z / millennial fashion shoppers,
|
|
571
|
-
men and women, plus emerging Chinese / Japanese global shoppers via
|
|
572
|
-
MUSINSA STANDARD overseas + ZOZOTOWN). Any resemblance to specific
|
|
573
|
-
individuals is unintended.
|
|
574
|
-
|
|
575
|
-
Interpretive claims (editorial, not documented Musinsa statements):
|
|
576
|
-
- "Musinsa's monochrome is not minimalism for its own sake" (§11
|
|
577
|
-
closing) — editorial reading of the design, not a sourced brand
|
|
578
|
-
statement.
|
|
579
|
-
- The spring-forbidden stance (§15) — derived from the overall
|
|
580
|
-
editorial brand posture, not a documented Musinsa motion rule.
|
|
581
|
-
- The 8 numbered principles (§12) — synthesized from observed surface
|
|
582
|
-
behavior + Musinsa's stated "magazine-first" origin; not a published
|
|
583
|
-
design-principles list.
|
|
584
|
-
-->
|
|
585
|
-
|
|
586
|
-
---
|
|
587
|
-
|
|
588
|
-
**Verified:** 2026-05-08 (omd:add-reference initial create — Tier 1 partial / Tier 2 confirmed)
|
|
589
|
-
**Tier 1 sources:** musinsa.com/category/001/goods (page title `상의 | 무신사 추천 상품`, body font Noto Sans KR stack, body `#333` on `#fff`, base 14px); musinsa.com/main/musinsa/recommend (page title `무신사`).
|
|
590
|
-
**Tier 2 sources:** getdesign.md/musinsa — no record (confirmed). styles.refero.design — not checked (Tier 2 single hit).
|
|
591
|
-
**Tier 2 (Philosophy/founders):** about.musinsa.com (Cho Man-ho founder story, 2001 sneaker community, corporate "대한민국 1등 패션 플랫폼"), CanvasBusinessModel (2009 store launch), KoreaTechDesk + BoF + Korea Times (Sequoia 2019 / KKR 2024 / IPO 3.2T target), Korea Herald (MUSINSA STANDARD 1T target, ZOZOTOWN expansion).
|
|
592
|
-
**Style ref:** `karrot` (KR editorial neighbor format retained for tone scaffolding).
|
|
593
|
-
**Conflicts unresolved:** Tier 1 live-inspect was partially blocked by an unstable browser sandbox; non-page-title computed-style values were reconciled from public knowledge and documented in `.verification.md`. Re-run Tier 1 in a stable browser to lock token values.
|
|
267
|
+
No motion duration, easing curve, or reduced-motion behavior was observed in the supplied raw evidence. No motion token is promoted.
|