oh-my-design-cli 1.8.7 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (247) hide show
  1. package/.claude/hooks/lib/preferences-parser.cjs +1 -0
  2. package/.claude/hooks/lib/preferences-writer.cjs +1 -0
  3. package/.claude/hooks/post-edit-watch.cjs +1 -0
  4. package/.claude/hooks/session-end-foldin.cjs +1 -0
  5. package/.claude/hooks/session-state-loader.cjs +1 -0
  6. package/.claude/hooks/skill-activation.cjs +1 -0
  7. package/.claude/settings.json +10 -1
  8. package/.github/assets/logo-bg.png +0 -0
  9. package/AGENTS.md +20 -1
  10. package/CHANGELOG.md +482 -0
  11. package/MIGRATION.md +103 -0
  12. package/README.ja.md +56 -19
  13. package/README.ko.md +47 -30
  14. package/README.md +48 -30
  15. package/README.zh-TW.md +59 -22
  16. package/agents/AGENT.md +8 -7
  17. package/agents/omd-codex-image.md +1 -1
  18. package/agents/omd-critic.md +6 -7
  19. package/agents/omd-designer-review.md +1 -1
  20. package/agents/omd-final-qa.md +1 -1
  21. package/agents/omd-humanizer.md +38 -0
  22. package/agents/omd-kr-writer.md +3 -4
  23. package/agents/omd-locale-adapter.md +12 -16
  24. package/agents/omd-master.md +24 -19
  25. package/agents/omd-microcopy.md +1 -1
  26. package/agents/omd-orchestrator.md +7 -8
  27. package/agents/omd-slop-auditor.md +31 -0
  28. package/agents/omd-ux-researcher.md +1 -1
  29. package/data/reference-fingerprints.json +1995 -38
  30. package/dist/bin/oh-my-design.js +16 -8
  31. package/dist/bin/oh-my-design.js.map +1 -1
  32. package/dist/chunk-UJIHCEYF.js +99 -0
  33. package/dist/chunk-UJIHCEYF.js.map +1 -0
  34. package/dist/doctor-LDWSFM3I.js +763 -0
  35. package/dist/doctor-LDWSFM3I.js.map +1 -0
  36. package/dist/install-skills-ZZFNJ2II.js +1120 -0
  37. package/dist/install-skills-ZZFNJ2II.js.map +1 -0
  38. package/docs/CLI_QUICKSTART.md +157 -0
  39. package/package.json +25 -4
  40. package/scripts/postinstall.cjs +5 -4
  41. package/skills/claude-design/SKILL.md +38 -14
  42. package/skills/claude-design/references/claude-design-flow.md +11 -11
  43. package/skills/claude-design/references/codebase-analysis.md +5 -4
  44. package/skills/omd-final-qa/SKILL.md +1 -1
  45. package/skills/omd-harness/SKILL.md +51 -50
  46. package/skills/omd-humanize/SKILL.md +116 -0
  47. package/skills/omd-humanize/agents/openai.yaml +4 -0
  48. package/skills/omd-humanize/references/locale-playbooks.md +102 -0
  49. package/skills/omd-humanize/references/sources.md +11 -0
  50. package/skills/omd-init/SKILL.md +18 -12
  51. package/skills/omd-locale-adapter/SKILL.md +58 -91
  52. package/skills/omd-orchestrator/SKILL.md +11 -5
  53. package/skills/omd-reference-capture/SKILL.md +80 -26
  54. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
  55. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
  56. package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
  57. package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
  58. package/skills/omd-slop-audit/SKILL.md +110 -0
  59. package/skills/omd-slop-audit/agents/openai.yaml +4 -0
  60. package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
  61. package/skills/omd-slop-audit/references/sources.md +24 -0
  62. package/web/references/104/DESIGN.md +354 -0
  63. package/web/references/11st/DESIGN.md +197 -316
  64. package/web/references/29cm/DESIGN.md +297 -393
  65. package/web/references/42dot/DESIGN.md +390 -0
  66. package/web/references/8percent/DESIGN.md +438 -0
  67. package/web/references/ably/DESIGN.md +267 -572
  68. package/web/references/acer/DESIGN.md +329 -0
  69. package/web/references/airbnb/DESIGN.md +219 -557
  70. package/web/references/alipay/DESIGN.md +179 -420
  71. package/web/references/apple/DESIGN.md +224 -498
  72. package/web/references/asleep/DESIGN.md +402 -0
  73. package/web/references/au/DESIGN.md +334 -0
  74. package/web/references/autopedia/DESIGN.md +382 -0
  75. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  76. package/web/references/baemin/DESIGN.md +332 -491
  77. package/web/references/banksalad/DESIGN.md +269 -180
  78. package/web/references/barogo/DESIGN.md +416 -0
  79. package/web/references/beusable/DESIGN.md +464 -0
  80. package/web/references/bilibili/DESIGN.md +206 -374
  81. package/web/references/bmw/DESIGN.md +162 -276
  82. package/web/references/brandi/DESIGN.md +184 -325
  83. package/web/references/catchtable/DESIGN.md +219 -264
  84. package/web/references/cgv/DESIGN.md +317 -0
  85. package/web/references/channeltalk/DESIGN.md +210 -336
  86. package/web/references/china-airlines/DESIGN.md +291 -0
  87. package/web/references/cjonstyle/DESIGN.md +453 -0
  88. package/web/references/class101/DESIGN.md +168 -387
  89. package/web/references/classum/DESIGN.md +228 -203
  90. package/web/references/claude/DESIGN.md +242 -479
  91. package/web/references/clay/DESIGN.md +179 -377
  92. package/web/references/clickhouse/DESIGN.md +254 -343
  93. package/web/references/cohere/DESIGN.md +214 -324
  94. package/web/references/coinone/DESIGN.md +199 -179
  95. package/web/references/corca/DESIGN.md +414 -0
  96. package/web/references/coupang/DESIGN.md +205 -475
  97. package/web/references/cursor/DESIGN.md +240 -381
  98. package/web/references/dabang/DESIGN.md +248 -213
  99. package/web/references/dable/DESIGN.md +431 -0
  100. package/web/references/datarize/DESIGN.md +217 -330
  101. package/web/references/dealicious/DESIGN.md +402 -0
  102. package/web/references/drdiary/DESIGN.md +404 -0
  103. package/web/references/elastic/DESIGN.md +238 -0
  104. package/web/references/elevenlabs/DESIGN.md +183 -321
  105. package/web/references/eslite/DESIGN.md +257 -0
  106. package/web/references/evaair/DESIGN.md +338 -0
  107. package/web/references/expo/DESIGN.md +238 -331
  108. package/web/references/familymart-tw/DESIGN.md +254 -0
  109. package/web/references/ferrari/DESIGN.md +160 -377
  110. package/web/references/figma/DESIGN.md +197 -451
  111. package/web/references/fitpet/DESIGN.md +445 -0
  112. package/web/references/flex/DESIGN.md +170 -253
  113. package/web/references/framer/DESIGN.md +197 -340
  114. package/web/references/freee/DESIGN.md +211 -533
  115. package/web/references/friendliai/DESIGN.md +431 -0
  116. package/web/references/frip/DESIGN.md +440 -0
  117. package/web/references/gangnamunni/DESIGN.md +154 -591
  118. package/web/references/gaudiolab/DESIGN.md +414 -0
  119. package/web/references/google/DESIGN.md +290 -398
  120. package/web/references/hashicorp/DESIGN.md +273 -318
  121. package/web/references/heydealer/DESIGN.md +429 -0
  122. package/web/references/humanscape/DESIGN.md +433 -0
  123. package/web/references/hyundai/DESIGN.md +158 -368
  124. package/web/references/hyundaicard/DESIGN.md +171 -121
  125. package/web/references/ibm/DESIGN.md +227 -378
  126. package/web/references/idus/DESIGN.md +450 -0
  127. package/web/references/igaworks/DESIGN.md +437 -0
  128. package/web/references/inflearn/DESIGN.md +221 -366
  129. package/web/references/intuit/DESIGN.md +244 -0
  130. package/web/references/jandi/DESIGN.md +191 -291
  131. package/web/references/jobplanet/DESIGN.md +415 -0
  132. package/web/references/kakao/DESIGN.md +287 -475
  133. package/web/references/kakaobank/DESIGN.md +220 -521
  134. package/web/references/kakaogames/DESIGN.md +220 -0
  135. package/web/references/kakaopay/DESIGN.md +207 -526
  136. package/web/references/karrot/DESIGN.md +227 -251
  137. package/web/references/kb-kookmin/DESIGN.md +308 -0
  138. package/web/references/kbank/DESIGN.md +220 -175
  139. package/web/references/kmong/DESIGN.md +281 -356
  140. package/web/references/krds/DESIGN.md +245 -19
  141. package/web/references/kream/DESIGN.md +224 -359
  142. package/web/references/kurly/DESIGN.md +211 -533
  143. package/web/references/lamborghini/DESIGN.md +198 -360
  144. package/web/references/lguplus/DESIGN.md +259 -0
  145. package/web/references/likelion/DESIGN.md +283 -0
  146. package/web/references/line/DESIGN.md +396 -355
  147. package/web/references/linear.app/DESIGN.md +209 -562
  148. package/web/references/lotteon/DESIGN.md +386 -0
  149. package/web/references/lovable/DESIGN.md +255 -349
  150. package/web/references/makinarocks/DESIGN.md +149 -349
  151. package/web/references/maum-ai/DESIGN.md +423 -0
  152. package/web/references/medibloc/DESIGN.md +425 -0
  153. package/web/references/megabox/DESIGN.md +232 -0
  154. package/web/references/mercari/DESIGN.md +217 -434
  155. package/web/references/microsoft/DESIGN.md +234 -388
  156. package/web/references/mildang/DESIGN.md +411 -0
  157. package/web/references/millie/DESIGN.md +183 -504
  158. package/web/references/minimax/DESIGN.md +264 -322
  159. package/web/references/miricanvas/DESIGN.md +182 -355
  160. package/web/references/miro/DESIGN.md +234 -232
  161. package/web/references/mistral.ai/DESIGN.md +231 -314
  162. package/web/references/mixi/DESIGN.md +234 -0
  163. package/web/references/moin/DESIGN.md +445 -0
  164. package/web/references/mongodb/DESIGN.md +219 -316
  165. package/web/references/musinsa/DESIGN.md +184 -510
  166. package/web/references/mynavi/DESIGN.md +242 -0
  167. package/web/references/myrealtrip/DESIGN.md +169 -406
  168. package/web/references/naver/DESIGN.md +328 -499
  169. package/web/references/naverwebtoon/DESIGN.md +172 -395
  170. package/web/references/nhn/DESIGN.md +169 -346
  171. package/web/references/nhncloud/DESIGN.md +185 -123
  172. package/web/references/notion/DESIGN.md +271 -475
  173. package/web/references/nrise/DESIGN.md +417 -0
  174. package/web/references/ohouse/DESIGN.md +210 -549
  175. package/web/references/oliveyoung/DESIGN.md +217 -326
  176. package/web/references/ollama/DESIGN.md +241 -308
  177. package/web/references/onestore/DESIGN.md +248 -0
  178. package/web/references/palantir/DESIGN.md +256 -0
  179. package/web/references/panasonic/DESIGN.md +276 -0
  180. package/web/references/patternfly/DESIGN.md +259 -0
  181. package/web/references/payhere/DESIGN.md +438 -0
  182. package/web/references/pega/DESIGN.md +262 -0
  183. package/web/references/peoplefund/DESIGN.md +431 -0
  184. package/web/references/petfriends/DESIGN.md +428 -0
  185. package/web/references/pinkfong/DESIGN.md +199 -367
  186. package/web/references/pinterest/DESIGN.md +258 -308
  187. package/web/references/poya/DESIGN.md +286 -0
  188. package/web/references/pozalabs/DESIGN.md +438 -0
  189. package/web/references/protopie/DESIGN.md +419 -0
  190. package/web/references/qraft/DESIGN.md +448 -0
  191. package/web/references/quotabook/DESIGN.md +449 -0
  192. package/web/references/recruit/DESIGN.md +247 -0
  193. package/web/references/remember/DESIGN.md +202 -396
  194. package/web/references/resend/DESIGN.md +274 -348
  195. package/web/references/sakura-internet/DESIGN.md +269 -0
  196. package/web/references/samsung/DESIGN.md +157 -359
  197. package/web/references/sandoll/DESIGN.md +445 -0
  198. package/web/references/sanity/DESIGN.md +241 -375
  199. package/web/references/scatterlab/DESIGN.md +412 -0
  200. package/web/references/selectstar/DESIGN.md +439 -0
  201. package/web/references/servicenow/DESIGN.md +289 -0
  202. package/web/references/shinhanbank/DESIGN.md +161 -341
  203. package/web/references/shinhancard/DESIGN.md +208 -319
  204. package/web/references/sionic/DESIGN.md +454 -0
  205. package/web/references/sktelecom/DESIGN.md +310 -0
  206. package/web/references/socar/DESIGN.md +125 -32
  207. package/web/references/softbank/DESIGN.md +231 -0
  208. package/web/references/sony/DESIGN.md +234 -0
  209. package/web/references/soop/DESIGN.md +261 -0
  210. package/web/references/spacex/DESIGN.md +184 -323
  211. package/web/references/spotify/DESIGN.md +253 -394
  212. package/web/references/squeezebits/DESIGN.md +441 -0
  213. package/web/references/stayfolio/DESIGN.md +422 -0
  214. package/web/references/stripe/DESIGN.md +212 -491
  215. package/web/references/supabase/DESIGN.md +244 -316
  216. package/web/references/tabling/DESIGN.md +415 -0
  217. package/web/references/taishinbank/DESIGN.md +243 -0
  218. package/web/references/teamlab/DESIGN.md +240 -0
  219. package/web/references/teamsparta/DESIGN.md +472 -0
  220. package/web/references/tellingme/DESIGN.md +392 -0
  221. package/web/references/tesla/DESIGN.md +244 -427
  222. package/web/references/thsr/DESIGN.md +284 -0
  223. package/web/references/thumbtack/DESIGN.md +302 -0
  224. package/web/references/together.ai/DESIGN.md +257 -304
  225. package/web/references/toss/DESIGN.md +251 -593
  226. package/web/references/toss-securities/DESIGN.md +255 -178
  227. package/web/references/tossbank/DESIGN.md +195 -491
  228. package/web/references/toyota/DESIGN.md +238 -0
  229. package/web/references/tving/DESIGN.md +197 -245
  230. package/web/references/typed/DESIGN.md +413 -0
  231. package/web/references/uber/DESIGN.md +256 -333
  232. package/web/references/udn/DESIGN.md +250 -0
  233. package/web/references/upbit/DESIGN.md +145 -256
  234. package/web/references/upstage/DESIGN.md +211 -204
  235. package/web/references/uswds/DESIGN.md +287 -0
  236. package/web/references/vercel/DESIGN.md +236 -440
  237. package/web/references/wanted/DESIGN.md +215 -487
  238. package/web/references/wise/DESIGN.md +223 -231
  239. package/web/references/wisetracker/DESIGN.md +462 -0
  240. package/web/references/wooribank/DESIGN.md +245 -0
  241. package/web/references/yanolja/DESIGN.md +250 -419
  242. package/web/references/yeogiotte/DESIGN.md +235 -418
  243. package/web/references/zapier/DESIGN.md +256 -377
  244. package/web/references/zendesk/DESIGN.md +288 -0
  245. package/web/references/zigzag/DESIGN.md +200 -621
  246. package/dist/install-skills-7UUDOLG2.js +0 -734
  247. package/dist/install-skills-7UUDOLG2.js.map +0 -1
@@ -9,457 +9,255 @@ primary_color: "#000000"
9
9
  logo:
10
10
  type: simpleicons
11
11
  slug: samsung
12
- verified: "2026-06-22"
12
+ verified: "2026-07-13"
13
13
  omd: "0.1"
14
+ ds:
15
+ name: Samsung One UI Design System
16
+ url: "https://developer.samsung.com/one-ui"
17
+ type: system
18
+ description: Samsung's official platform design guidance. Its component and color rules are a separate evidence domain from the captured Samsung Korea public web surfaces.
19
+ verification_v2:
20
+ schema: 2
21
+ checked: "2026-07-13"
22
+ surfaces:
23
+ - { id: home, kind: marketing, url: "https://www.samsung.com/sec/", inspected: "2026-07-13" }
24
+ - { id: ai-products, kind: public-product, url: "https://www.samsung.com/sec/ai-products/", inspected: "2026-07-13" }
25
+ - { id: brand-identity, kind: official-doc, url: "https://www.samsung.com/sec/about-us/brand-identity/", inspected: "2026-07-13" }
26
+ sources:
27
+ - { id: home-live, kind: product-surface, url: "https://www.samsung.com/sec/", captured: "2026-07-13" }
28
+ - { id: ai-live, kind: product-surface, url: "https://www.samsung.com/sec/ai-products/", captured: "2026-07-13" }
29
+ - { id: brand-live, kind: product-surface, url: "https://www.samsung.com/sec/about-us/brand-identity/", captured: "2026-07-13" }
30
+ - { id: one-ui-color, kind: official-doc, url: "https://developer.samsung.com/one-ui/color/system.html", captured: "2026-07-13" }
31
+ - { id: samsungone-font, kind: official-doc, url: "https://developer.samsung.com/design-system/font", captured: "2026-07-13" }
32
+ - { id: sharp-sans-brand, kind: official-doc, url: "https://www.samsung.com/bd/about-us/brand-identity/color-and-typo/", captured: "2026-07-13" }
33
+ - { id: brand-story, kind: official-doc, url: "https://www.samsung.com/sec/about-us/brand-identity/brand-story/", captured: "2026-07-13" }
34
+ conflicts: []
35
+ claims:
36
+ "tokens.colors.primary": &home { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
37
+ "tokens.colors.canvas": *home
38
+ "tokens.colors.surface": &ai { surface_id: ai-products, source_id: ai-live, method: live-inspect, captured: "2026-07-13" }
39
+ "tokens.colors.foreground": *ai
40
+ "tokens.colors.muted": *home
41
+ "tokens.colors.border": *home
42
+ "tokens.colors.link": *home
43
+ "tokens.colors.one-ui-primary": &oneui { surface_id: brand-identity, source_id: one-ui-color, method: official-doc, captured: "2026-07-13" }
44
+ "tokens.typography.family.display": &sharp { surface_id: home, source_id: home-live, method: fontfaceset-and-computed-style, captured: "2026-07-13" }
45
+ "tokens.typography.family.ui": &ui { surface_id: home, source_id: home-live, method: fontfaceset-and-computed-style, captured: "2026-07-13" }
46
+ "tokens.typography.display.size": *sharp
47
+ "tokens.typography.display.weight": *sharp
48
+ "tokens.typography.display.lineHeight": *sharp
49
+ "tokens.typography.display.use": *sharp
50
+ "tokens.typography.body.size": *ai
51
+ "tokens.typography.body.weight": *ai
52
+ "tokens.typography.body.lineHeight": *ai
53
+ "tokens.typography.body.use": *ai
54
+ "tokens.typography.action.size": *home
55
+ "tokens.typography.action.weight": *home
56
+ "tokens.typography.action.lineHeight": *home
57
+ "tokens.typography.action.use": *home
58
+ "tokens.spacing.nav-inline": *home
59
+ "tokens.spacing.action-inline": *home
60
+ "tokens.spacing.card-inset": *ai
61
+ "tokens.rounded.sharp": *ai
62
+ "tokens.rounded.pill": *home
63
+ "tokens.rounded.chip": *ai
64
+ "tokens.shadow.flat": *ai
65
+ "tokens.components.ai-product-tabs.type": *ai
66
+ "tokens.components.ai-product-tabs.fg": *ai
67
+ "tokens.components.ai-product-tabs.radius": *ai
68
+ "tokens.components.ai-product-tabs.padding": *ai
69
+ "tokens.components.ai-product-tabs.font": *ai
70
+ "tokens.components.ai-product-tabs.states": *ai
71
+ "tokens.components.ai-product-tabs.use": *ai
14
72
  tokens:
15
73
  source: live-extract
16
- extracted: "2026-06-22"
17
- note: "primary = live e-commerce CTA black (#000000) — Samsung.com KR uses pure black pill buttons as the dominant action color across all product pages. One UI primary blue (#0381fe) governs the mobile OS layer, not the web commerce surface."
74
+ extracted: "2026-07-13"
18
75
  colors:
19
76
  primary: "#000000"
20
- primary-alt: "#212425"
21
77
  canvas: "#ffffff"
22
78
  surface: "#f7f7f7"
23
79
  foreground: "#000000"
24
80
  muted: "#707070"
25
- muted-alt: "#555555"
26
- on-primary: "#ffffff"
27
- hairline: "#dddddd"
28
- interactive-blue: "#0381fe"
29
- interactive-blue-dark: "#0072de"
30
- link-blue: "#007aff"
31
- link-blue-alt: "#2189ff"
32
- error: "#ef3434"
33
- error-alt: "#fa2337"
34
- badge-red: "#ef3434"
81
+ border: "#dddddd"
82
+ link: "#007aff"
83
+ one-ui-primary: "#0381fe"
35
84
  typography:
36
- family: { display: "Samsung Sharp Sans", body: "SamsungOneKorean", fallback: "Dotum, 돋움, sans-serif" }
37
- display-hero: { size: 56, weight: 700, lineHeight: 1.2, use: "Hero section headline, Samsung Sharp Sans Bold" }
38
- display-section: { size: 40, weight: 700, lineHeight: 1.2, use: "Section hero headline, Samsung Sharp Sans" }
39
- card-heading: { size: 24, weight: 700, lineHeight: 1.3, use: "Product card heading, Samsung Sharp Sans" }
40
- nav-primary: { size: 16, weight: 700, lineHeight: 1.5, use: "Top nav category links, SamsungOneKorean Bold" }
41
- nav-secondary: { size: 14, weight: 700, lineHeight: 1.5, use: "Sub-nav links, SamsungOneKorean" }
42
- body: { size: 16, weight: 400, lineHeight: 1.5, use: "Body copy, SamsungOneKorean Regular" }
43
- caption: { size: 14, weight: 400, lineHeight: 1.5, use: "Captions, labels, metadata" }
44
- button: { size: 14, weight: 700, lineHeight: 1.0, use: "Button label, SamsungOneKorean Bold" }
45
- spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
46
- rounded: { sm: 8, md: 20, lg: 40, full: 9999 }
85
+ family: { display: "Samsung Sharp Sans", ui: "SamsungOneKorean" }
86
+ display: { size: 24, weight: 700, lineHeight: 32, use: "Observed product-card heading on the AI products surface" }
87
+ body: { size: 16, weight: 400, lineHeight: 21.2798, use: "Observed product-card body on the AI products surface" }
88
+ action: { size: 14, weight: 700, lineHeight: 19, use: "Observed contained CTA label on the Samsung Korea homepage" }
89
+ spacing: { nav-inline: 12, action-inline: 24, card-inset: 32 }
90
+ rounded: { sharp: 0, pill: 20, chip: 40 }
47
91
  shadow:
48
- card: "0 2px 8px rgba(0,0,0,0.08)"
49
- elevated: "0 4px 16px rgba(0,0,0,0.12)"
92
+ flat: "none"
50
93
  components:
51
- button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: "20px", padding: "0px 24px", height: "40px", font: "14px / 700 SamsungOneKorean", border: "1px solid #000000", states: "hover bg #212425", use: "Primary CTA: 구매하기, 알아보기, 제품 모두 보기" }
52
- button-outline: { type: button, bg: "#ffffff", fg: "#000000", radius: "20px", padding: "0px 24px", height: "40px", font: "14px / 700 SamsungOneKorean", border: "1px solid #000000", use: "Secondary outline CTA on light backgrounds" }
53
- button-chip: { type: button, bg: "#f7f7f7", fg: "#000000", radius: "40px", padding: "9px 16px", height: "36px", font: "16px / 400 SamsungOneKorean", border: "1px solid #f7f7f7", use: "Product series filter chip (갤럭시 S26 울트라, etc.)" }
54
- filter-button: { type: button, bg: "#ffffff", fg: "#000000", radius: "8px", padding: "1px 15px", height: "40px", font: "14px / 700 SamsungOneKorean", border: "1px solid #dddddd", use: "Filter/facet button on product listing pages" }
55
- product-card: { type: card, bg: "#ffffff", radius: "0px", use: "Product listing card — frameless, image-led, no border or shadow on standard listing" }
56
- input-default: { type: input, bg: "#ffffff", fg: "#000000", border: "1px solid #dddddd", radius: "0px", font: "16px / 400 SamsungOneKorean", use: "Search and form input on e-commerce pages" }
57
- badge-error: { type: badge, bg: "#ef3434", fg: "#ffffff", radius: "9999px", font: "12px / 700 SamsungOneKorean", use: "Notification badge, error indicator" }
58
- nav-tab: { type: tab, fg: "#000000", font: "16px / 700 SamsungOneKorean", active: "text #000000 + 2px bottom border #000000", use: "Top horizontal nav category tab" }
94
+ ai-product-tabs: { type: tab, fg: "#000000", radius: 0, padding: "4px 0px", font: "18px/700 SamsungOneKorean", states: "selected / tab-selected observed", use: "AI products `tab__item-title`; selector surface-2::[data-omd-capture=\"25\"]" }
59
95
  components_harvested: true
60
- ds:
61
- name: Samsung One UI Design System
62
- url: "https://developer.samsung.com/one-ui"
63
- type: system
64
- description: "Samsung's official mobile OS design language for Galaxy devices — principles, color system, motion, typography, and component specs for One UI apps."
65
96
  ---
66
97
 
67
98
  # Design System Inspiration of Samsung
68
99
 
69
100
  ## 1. Visual Theme & Atmosphere
70
101
 
71
- Samsung's web commerce and device branding operate under a single, unwavering visual principle: black leads. The Samsung Korea e-commerce surface (`samsung.com/sec`) is built on a pure white canvas (`#ffffff`) intersected with a light cool-grey surface (`#f7f7f7`), with virtually every headline, body copy, and interactive element anchored in pure black (`#000000`). This is not minimalism for minimalism's sake it is a deliberate assertion of premium hardware confidence. Samsung's products are the hero; the UI frame must be neutral enough to disappear.
72
-
73
- Two typefaces carry the entire brand's voice. **Samsung Sharp Sans** — Samsung's proprietary display typeface — handles all headlines and section titles at weights 700 and sizes from 24px to 56px, its geometric, architectural letterforms lending the product catalog a crisp, engineered quality. For body text, navigation labels, and button copy, **SamsungOneKorean** (part of the SamsungOne global typeface family) takes over, delivering clean, legible Korean Hangul at 14–16px weights 400–700. Together they create a typographic voice that is simultaneously global and deeply Korean.
102
+ Samsung Electronics presents consumer devices, services, and its Galaxy ecosystem across a broad public web estate. Its Korean public commerce and AI-product pages use a quiet product frame: white or pale-gray surfaces, black typography, contained black calls to action, and large device imagery. Samsung’s official brand story frames this product work within human-driven innovation and describes its expression as bold, genuine, contemporary, and playful; the captured commerce treatment is one restrained application of that wider identity rather than a substitute for it. The official One UI system is a separate platform domain, designed for comfortable and responsive experiences across Galaxy devices. This reference therefore preserves the observed public-web grammar while keeping One UI’s documented blue and component guidance separate from web-commerce claims. [Samsung brand story](https://www.samsung.com/sec/about-us/brand-identity/brand-story/) · [One UI overview](https://developer.samsung.com/one-ui/index.html)
74
103
 
75
- The CTA system is strikingly economical. The primary purchase button ("구매하기") is a 40px-tall black pill — `#000000` background, white text, `20px` radius, `0px 24px` padding — applied identically across every product listing and category page. There is no secondary brand color for action; black is the action color. A lighter outline variant (white bg, 1px black border, matching 20px radius) serves secondary calls. This duality black vs. white pill is the entire button grammar. Filter chips and facet selectors switch to a `#f7f7f7` light-grey pill at 40px radius, visually distinguishing selection from action.
104
+ The supplied 2026-07-13 evidence covers a Korean homepage, an AI-products page, and the Korean brand-identity page at one desktop viewport. The homepage provides the measured contained and outlined CTA patterns; the AI page provides the product-card and selected-tab patterns; the brand-identity page is retained as an official brand/documentation surface. It does not cover checkout, sign-in, native Galaxy apps, or a general Samsung component library.
76
105
 
77
- **Key Characteristics:**
78
- - Samsung Sharp Sans Bold at large display sizes geometric, Korean-premium, hardware-confident
79
- - SamsungOneKorean for all body, nav, and UI copy dense Hangul legibility at scale
80
- - Pure black (`#000000`) as the sole primary action color no colorful CTA
81
- - 20px radius on primary pill buttons restrained rounding for a premium feel
82
- - White (`#ffffff`) and cool-grey (`#f7f7f7`) canvas product photography as the only decoration
83
- - Interactive blue (`#0381fe`) reserved for One UI mobile OS and link text on commerce pages
84
- - Error/notification red (`#ef3434`) for badges and error states
85
- - Link blue (`#007aff`) for informational links and highlights, inherited from iOS-adjacent patterns on Korean market pages
106
+ **Key characteristics:**
107
+ - Black `#000000` contained CTA and primary text on the captured Korean public web surfaces
108
+ - White `#ffffff` canvas and `#f7f7f7` product/search surface, with no representative box shadow
109
+ - Samsung Sharp Sans for observed display headings and SamsungOneKorean for observed Korean UI/body text
110
+ - 20px contained-CTA and AI-product media-card corners; 0px selected-tab title treatment
111
+ - One UI blue `#0381fe` is an official mobile-system token, not a substitute for the captured commerce CTA
86
112
 
87
113
  ## 2. Color Palette & Roles
88
114
 
89
- ### Primary
90
- - **Primary Black** (`#000000`): The dominant action color. All primary CTA buttons, navigation text, headings. Samsung's e-commerce color philosophy is monochrome: black on white, white on black.
91
- - **Primary Alt** (`#212425`): Near-black for hover states and dark UI surfaces (error page CTAs, dark overlays).
92
- - **Pure White** (`#ffffff`): Page background, button text on dark. The default canvas.
115
+ ### Captured Korean public web surfaces
116
+ - **Primary action and foreground** (`#000000`): observed on the homepage contained CTA and across the AI-product card/title treatments.
117
+ - **Canvas** (`#ffffff`): observed homepage and product-card background.
118
+ - **Product/search surface** (`#f7f7f7`): observed on the AI page’s pressed search control and on official/commerce surface treatments.
119
+ - **Muted text** (`#707070`): repeated computed text color in the supplied capture; retain for secondary content only.
120
+ - **Border** (`#dddddd`): observed on homepage carousel-control chrome; not promoted as a universal product-card border.
121
+ - **Link** (`#007aff`): observed homepage text/link color; it is separate from the black contained CTA.
93
122
 
94
- ### Surface & Borders
95
- - **Surface Grey** (`#f7f7f7`): Secondary surface for tinted sections, filter chip backgrounds, alternating content zones.
96
- - **Hairline** (`#dddddd`): Border color for filter buttons, input fields, and UI dividers.
123
+ ### One UI documentation boundary
124
+ - **One UI primary** (`#0381fe`): Samsung’s official One UI color guidance assigns it to floating action buttons and sliders. It belongs to the platform design-system source, not to the captured Korean commerce CTA. [Color system and usage](https://developer.samsung.com/one-ui/color/system.html)
97
125
 
98
- ### Text Hierarchy
99
- - **Foreground** (`#000000`): All headings and primary body text.
100
- - **Muted** (`#707070`): Secondary text, captions, metadata below product prices.
101
- - **Muted Alt** (`#555555`): Tertiary text, fine print.
102
-
103
- ### Interactive / Brand Blue (One UI & links)
104
- - **Interactive Blue** (`#0381fe`): Samsung One UI primary — used for floating action buttons, sliders, and key interactive elements in the Galaxy mobile OS. Also appears as link/accent blue on web.
105
- - **Interactive Blue Dark** (`#0072de`): One UI primary button background in light mode.
106
- - **Link Blue** (`#007aff`): Hyperlinks and highlighted text on Samsung Korea commerce pages.
107
- - **Link Blue Alt** (`#2189ff`): Stronger blue accent for hover or emphasis.
126
+ ## 3. Typography Rules
108
127
 
109
- ### Semantic
110
- - **Error / Badge Red** (`#ef3434`): Notification badges, error states, "sale" indicators. A saturated warm red.
111
- - **Error Alt** (`#fa2337`): Secondary error/warning accent.
128
+ ### Evidence classes
112
129
 
113
- ## 3. Typography Rules
130
+ **Official product-use and brand context.** Samsung’s design-system font page describes SamsungOne as the family that gives its products a consistent voice, with localized fonts supporting a universal Samsung experience. Samsung’s official brand-identity typography page separately identifies Samsung Sharp Sans Bold and Medium as brand type specimens. Those pages establish family and brand context; they do not turn every official face into a public-web UI token. [Samsung fonts](https://developer.samsung.com/design-system/font) · [Samsung Sharp Sans specimens](https://www.samsung.com/bd/about-us/brand-identity/color-and-typo/)
114
131
 
115
- ### Font Family
116
- - **Display**: `Samsung Sharp Sans` — Samsung's proprietary geometric typeface, with `SamsungOneKorean` as Korean companion.
117
- - **Body/UI**: `SamsungOneKorean, Dotum, 돋움, sans-serif` — the primary Korean web typeface for all navigation, body, and button text.
132
+ **Live computed surface-use.** The supplied capture records `SamsungOneKorean` as loaded/high with 1,297 visible uses across body, button, menu, tab, card, and heading roles, with `@font-face` sources on Samsung domains. `SamsungSharpSans` is likewise loaded/high with 76 visible heading/text uses and Samsung-hosted FontFace sources. On the AI-products page, a repeated heading is 24px/700/32px Samsung Sharp Sans; a repeated product-card body is approximately 16px/400/21.2798px SamsungOneKorean. The homepage contained CTA is 14px/700/19px SamsungOneKorean.
118
133
 
119
- ### Hierarchy
134
+ **Official distributed brand asset / license boundary.** Samsung Design publishes SamsungOne specimens and a PDF download, but the first-party sources reviewed here do not provide a transferable public font-license grant. Keep official specimen and history material as context; do not infer permission to redistribute the webfont files or substitute a system font. [SamsungOne](https://design.samsung.com/global/contents/samsungone/index.html)
120
135
 
121
- | Role | Font | Size | Weight | Line Height | Notes |
122
- |------|------|------|--------|-------------|-------|
123
- | Display Hero | Samsung Sharp Sans | 56px | 700 | 1.2 | Main hero headline |
124
- | Display Section | Samsung Sharp Sans | 40px | 700 | 1.2 | Section hero or promo headline |
125
- | Card Heading | Samsung Sharp Sans | 24px | 700 | 1.3 | Product card title (e.g. "Galaxy S26 \| S26+") |
126
- | Nav Primary | SamsungOneKorean | 16px | 700 | 1.5 | Category nav (모바일, TV/영상∙음향) |
127
- | Nav Secondary | SamsungOneKorean | 14px | 700 | 1.5 | Sub-nav, utility links (고객지원, 비즈니스) |
128
- | Body | SamsungOneKorean | 16px | 400 | 1.5 | Body copy |
129
- | Caption / Button | SamsungOneKorean | 14px | 700 | 1.0–1.5 | Button labels, captions, metadata |
136
+ **Declared-only.** The artifact found Samsung Korea Sans, SamsungOne, SamsungSharpGraphic, SamsungSSBody, SamsungSSHead, Samsung Sharp Sans mixed/normal, NanumBarunBold, and several icon faces declared with `@font-face` but without visible computed use. They remain declared assets, not UI-family tokens.
130
137
 
131
- ### Principles
132
- - **Two typefaces, two registers**: Samsung Sharp Sans for product and brand identity; SamsungOneKorean for UI and reading. They never swap roles.
133
- - **Bold everywhere at display sizes**: Weight 700 is the default for all headlines and nav labels — Samsung's voice is confident and direct.
134
- - **Korean-first sizing**: 14–16px body size provides generous Hangul legibility in dense product listing contexts.
135
- - **Zero decorative typefaces**: The system uses no italic, condensed, or script styles. Samsung communicates through geometry and weight alone.
138
+ **System/unresolved.** Dotum, Apple SD Gothic Neo, Arial, and `sans-serif` occur only as fallbacks in the captured computed stacks. No runtime availability authorizes their use as Samsung substitutes. Additional locales, native One UI font behavior, and all uncaptured pages remain unresolved.
136
139
 
137
140
  ## 4. Component Stylings
138
141
 
139
- ### Buttons
142
+ ### Homepage calls to action
140
143
 
141
- **Primary (구매하기 / 알아보기)**
144
+ **Contained CTA Korean homepage**
142
145
  - Background: `#000000`
143
146
  - Text: `#ffffff`
147
+ - Border: 1px solid `#000000`
144
148
  - Radius: 20px
145
- - Padding: 0px 24px
149
+ - Padding: 10px 24px 9px
146
150
  - Height: 40px
147
- - Font: 14px SamsungOneKorean weight 700
148
- - Border: 1px solid `#000000`
149
- - Hover: background shifts to `#212425`
150
- - Use: All primary purchase and learn-more CTAs on product and listing pages
151
+ - Font: 14px / 700 / SamsungOneKorean
152
+ - Use: `home::[data-omd-capture="26"]`, class `cta cta-ntrns-fild`; 36 occurrences on the captured homepage.
151
153
 
152
- **Outline (Secondary)**
153
- - Background: `#ffffff`
154
+ **Outlined CTA — Korean homepage**
154
155
  - Text: `#000000`
156
+ - Border: 1px solid `#000000`
155
157
  - Radius: 20px
156
- - Padding: 0px 24px
158
+ - Padding: 10px 24px 9px
157
159
  - Height: 40px
158
- - Font: 14px SamsungOneKorean weight 700
159
- - Border: 1px solid `#000000`
160
- - Use: Secondary CTA on dark backgrounds or alongside a primary button
161
-
162
- **Filter Chip**
163
- - Background: `#f7f7f7`
164
- - Text: `#000000`
165
- - Radius: 40px
166
- - Padding: 9px 16px
167
- - Height: 36px
168
- - Font: 16px SamsungOneKorean weight 400
169
- - Border: 1px solid `#f7f7f7`
170
- - Use: Product series selector (갤럭시 S26 울트라, 갤럭시 Z, 갤럭시 A 등)
160
+ - Font: 14px / 700 / SamsungOneKorean
161
+ - Use: `home::[data-omd-capture="20"]`, class `cta cta-outl`; six homepage occurrences. Its computed background is transparent, so no white fill is asserted.
171
162
 
172
- ### Inputs
163
+ ### AI-product content
173
164
 
174
- **Default Form Input**
165
+ **Product media card — AI products**
175
166
  - Background: `#ffffff`
176
- - Text: `#000000`
177
- - Border: 1px solid `#dddddd`
178
- - Radius: 0px
179
- - Font: 16px SamsungOneKorean weight 400
180
- - Use: Search field and form inputs on e-commerce and support pages
167
+ - Radius: 20px
168
+ - Use: `surface-2::div`, class `showcase-card-tab-card__img-wrap`; a 330px-square observed media wrapper. The surrounding card is not asserted as a universal commerce-card pattern.
181
169
 
182
- **Filter Button (faceted search)**
183
- - Background: `#ffffff`
170
+ **Selected product tab title — AI products**
184
171
  - Text: `#000000`
185
- - Border: 1px solid `#dddddd`
186
- - Radius: 8px
187
- - Padding: 1px 15px
188
- - Height: 40px
189
- - Font: 14px SamsungOneKorean weight 700
190
- - Use: Category filter dropdowns on all-products listing (배송 유형, 유형, 스토리지 등)
191
-
192
- ### Cards & Containers
193
-
194
- **Product Listing Card**
195
- - Background: `#ffffff`
196
172
  - Radius: 0px
197
- - Use: Standard product card on listing pages — frameless, photography-led, no border or shadow; product image bleeds to card edge
198
-
199
- **Tinted Section Card**
200
- - Background: `#f7f7f7`
201
- - Radius: 0px
202
- - Use: Feature/promotional content zones on the homepage alternating with white sections
203
-
204
- ### Badges
173
+ - Padding: 4px 0px
174
+ - Font: 18px / 700 / SamsungOneKorean
175
+ - Use: `surface-2::[data-omd-capture="25"]`, class `tab__item-title`.
176
+ - Selected: `selected` and `tab-selected` were observed by three collector tab interactions. No selected underline, panel geometry, or unmeasured color is inferred.
205
177
 
206
- **Error / Notification Badge**
207
- - Background: `#ef3434`
208
- - Text: `#ffffff`
209
- - Radius: 9999px
210
- - Font: 12px SamsungOneKorean weight 700
211
- - Use: Red notification dot, badge count, error indicators
212
-
213
- ### Navigation
178
+ ### Observed state boundaries
214
179
 
215
- **Top Category Tab**
216
- - Text: `#000000`
217
- - Font: 16px SamsungOneKorean weight 700
218
- - Active: text `#000000` with 2px bottom border `#000000`
219
- - Height: 47px header
220
- - Background: `#ffffff`
221
- - Use: Top horizontal nav (AI 구독클럽, 모바일, TV/영상∙음향, 주방가전, 리빙가전, PC/주변기기)
180
+ The capture records a pressed underlined CTA on the homepage, pressed search controls on the AI and brand-identity surfaces, disabled carousel arrows on the homepage, three selected-tab interactions on the AI-products surface, and an expanded/menu-open brand-identity menu. Only the selected product-tab state has enough matching component provenance to be represented in the machine-readable component token. No generic hover, focus, error, dialog, toast, or checkout state is asserted.
222
181
 
223
182
  ---
224
-
225
- **Verified:** 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect)
226
- **Tier 1 sources:** https://www.samsung.com/sec/, https://www.samsung.com/sec/smartphones/, https://developer.samsung.com/one-ui/color/system.html
227
- **Tier 2 sources:** getdesign.md/samsung 404 (not in catalog); styles.refero.design/?q=samsung no Samsung style found
183
+ **Verified:** 2026-07-13
184
+ **Tier 1 sources:** https://www.samsung.com/sec/, https://www.samsung.com/sec/ai-products/, https://www.samsung.com/sec/about-us/brand-identity/, https://developer.samsung.com/one-ui/color/system.html, https://developer.samsung.com/design-system/font
185
+ **Tier 2 sources:** https://getdesign.md/samsung and https://styles.refero.design/?q=samsung were both attempted through built-in web retrieval; both returned an internal error, so neither supplied a value or an absence determination.
186
+ **Resolution note:** The prior universal e-commerce filter/input/card/shadow/state rules were removed because this packet did not observe their matching current component provenance. One UI blue remains documentation-only rather than a commerce CTA token.
228
187
  **Conflicts unresolved:** none
229
188
 
230
189
  ## 5. Layout Principles
231
190
 
232
- ### Spacing System
233
- - Base unit: 8px
234
- - Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
235
- - Notable: Product listing cards use generous 48–64px vertical section gaps; horizontal padding at content edges is typically 24–32px
236
-
237
- ### Grid & Container
238
- - Max content width: approximately 1440px on desktop (full-bleed hero images)
239
- - Hero sections: full-bleed photography with text overlay; headline and CTA in the lower-left or centered
240
- - Product listing: 3–4 column grid on desktop, collapsing to 2 then 1 on mobile
241
- - Category nav is sticky below the top utility bar
242
-
243
- ### Whitespace Philosophy
244
- - **Product as hero**: extreme whitespace around product photography — the UI disappears, the device shines
245
- - **Flat segmentation**: white and `#f7f7f7` alternating sections divide content without elevation or shadow
246
- - **Dense nav, spacious content**: the 47px header is functionally dense (bold 16px labels at 14px 12px padding each side), while main content areas breathe
247
-
248
- ### Border Radius Scale
249
- - Sharp (0px): Product cards, image containers, section backgrounds
250
- - Soft (8px): Filter dropdowns, utility UI elements
251
- - Pill-moderate (20px): Primary and outline CTA buttons — the signature rounding
252
- - Pill-generous (40px): Filter chip selectors
253
- - Full pill (9999px): Notification badges, color swatches
191
+ The one captured desktop viewport repeatedly exposes 12px navigation insets, 24px horizontal CTA padding, and a 32px product-card text inset. Treat these as local, observed spacing values rather than a complete Samsung grid scale. The capture does not compare breakpoints, measure a checkout layout, or establish a universal product-listing grid.
254
192
 
255
193
  ## 6. Depth & Elevation
256
194
 
257
- | Level | Treatment | Use |
258
- |-------|-----------|-----|
259
- | Flat (Level 0) | No shadow | Product cards, page background, nav |
260
- | Surface (Level 1) | `#f7f7f7` background shift | Section separation without elevation |
261
- | Ambient (Level 2) | `0 2px 8px rgba(0,0,0,0.08)` | Dropdowns, floating search panels |
262
- | Standard (Level 3) | `0 4px 16px rgba(0,0,0,0.12)` | Modals, expanded menus |
263
-
264
- **Shadow Philosophy**: Samsung's commerce surface is near-shadowless. Depth and content grouping come from alternating flat backgrounds (`#ffffff` vs `#f7f7f7`) and thin `#dddddd` hairlines. This keeps the visual focus on product hardware photography. When elevation does appear — dropdowns, quick-view panels — it uses a neutral grey shadow without any brand-colored tinting.
195
+ Representative contained CTAs, AI-product cards, tabs, and menu structures in the artifact report `box-shadow: none`. Hierarchy in these observed surfaces comes from product imagery, white versus `#f7f7f7` planes, typography, and borders. No modal, tooltip, or floating-panel elevation is claimed.
265
196
 
266
197
  ## 7. Do's and Don'ts
267
198
 
268
199
  ### Do
269
- - Use Samsung Sharp Sans Bold (weight 700) for all product headings and display text
270
- - Use SamsungOneKorean for all body, UI, and button label text
271
- - Use pure black (`#000000`) pill buttons (20px radius) for all primary purchase CTAs
272
- - Apply `#f7f7f7` surface grey to alternate section backgrounds for flat separation
273
- - Use `#0381fe` interactive blue only for One UI mobile contexts and hyperlinks
274
- - Use `#ef3434` red for error badges and notification indicators
275
- - Let product photography fill the card — frame it with minimal chrome
276
- - Maintain the 20px radius pill shape for all primary buttons across platforms
200
+ - Use the contained homepage CTA only with the measured black/white, 20px-corner, 40px-high treatment.
201
+ - Keep SamsungOneKorean and Samsung Sharp Sans tied to their recorded live-use roles and loaded FontFace evidence.
202
+ - Treat the AI-product selected tab as its own 18px/700, 0px-radius pattern with the observed selected state.
203
+ - Keep One UI documentation values visibly separate from Korean public-commerce measurements.
277
204
 
278
205
  ### Don't
279
- - Use a colorful brand CTA Samsung's action color is black, not a brand hue
280
- - Apply drop shadows to product cards the system is flat; shadows cheapen the premium feel
281
- - Use Samsung Sharp Sans for body copy it belongs exclusively to display and headlines
282
- - Break the black-and-white CTA duality with a third button color
283
- - Apply large, decorative border-radius (60px+) to primary CTAs — 20px is the upper bound for e-commerce
284
- - Mix `#0381fe` blue into e-commerce buttons — blue is for links and the mobile OS layer only
285
- - Use weight 400 for nav labels — Samsung navigation is always bold (weight 700)
286
- - Introduce competing accent colors — the system's palette is intentionally near-monochrome
206
+ - Do not promote declared-only faces or system fallbacks as loaded Samsung UI fonts.
207
+ - Do not apply One UI `#0381fe` as a replacement for the captured black public-web CTA.
208
+ - Do not infer a product-card shadow, checkout field, generic filter control, or error state from unobserved variants.
209
+ - Do not treat the brand-identity documentation page as native Galaxy-app evidence.
287
210
 
288
211
  ## 8. Responsive Behavior
289
212
 
290
- ### Breakpoints
291
- | Name | Width | Key Changes |
292
- |------|-------|-------------|
293
- | Mobile | <640px | Single-column product grid, hamburger nav, stacked hero text |
294
- | Tablet | 640–1024px | 2-column product grid, condensed nav labels |
295
- | Desktop | 1024–1440px | 3–4 column grid, sticky full horizontal nav |
296
- | Wide | >1440px | Centered content with generous lateral margins |
297
-
298
- ### Touch Targets
299
- - Primary buttons at 40px height — comfortably tappable
300
- - Category nav at 47px header — full-width tap area per nav item
301
- - Filter chips at 36px — adequate touch target on mobile
302
- - Color swatch buttons at 24px with 2px outer ring indicator
303
-
304
- ### Collapsing Strategy
305
- - Hero: 56px Sharp Sans headline → compresses proportionally on mobile
306
- - Nav: full horizontal category row → hamburger toggle
307
- - Product grid: 4-column → 2-column → single-column stacked
308
- - CTA: button pill maintained at 40px height across all breakpoints
309
-
310
- ### Image Behavior
311
- - Product images maintain aspect ratio at all sizes; no shadow added at any breakpoint
312
- - Hero full-bleed images crop from center on narrow viewports
313
- - Samsung maintains `alt` text in Korean for all product imagery
213
+ No viewport comparison was included in the supplied artifact. The values above describe the captured desktop surfaces only; no Samsung-specific mobile navigation, grid collapse, touch target, or breakpoint geometry is asserted.
314
214
 
315
215
  ## 9. Agent Prompt Guide
316
216
 
317
- ### Quick Color Reference
318
- - Primary CTA: Black (`#000000`)
319
- - CTA Hover: Near-black (`#212425`)
320
- - Background: White (`#ffffff`)
321
- - Surface grey: `#f7f7f7`
322
- - Text: Black (`#000000`)
323
- - Muted text: `#707070`
324
- - Hairline borders: `#dddddd`
325
- - Link / One UI blue: `#0381fe`
326
- - Error / badge red: `#ef3434`
327
-
328
- ### Example Component Prompts
329
- - "Create a Samsung-style product hero: white background, full-bleed device image. Headline at 56px Samsung Sharp Sans weight 700, color #000000. Black pill CTA button — #000000 bg, white text, 20px radius, 0px 24px padding, 40px height, 14px SamsungOneKorean weight 700. Link text 'AI 구독클럽' in #000000."
330
- - "Design a product listing card: white background, no border, no shadow. Product heading at 24px Samsung Sharp Sans weight 700, color #000000. Price in SamsungOneKorean 16px weight 400. Black purchase button at bottom."
331
- - "Build a top nav: white background, 47px height. Category tabs in 16px SamsungOneKorean weight 700, color #000000, active tab with 2px solid #000000 bottom border."
332
- - "Create a filter bar: #f7f7f7 background filter chips with 40px radius, 36px height, 16px SamsungOneKorean weight 400. Separate facet filter buttons with 8px radius, #dddddd border."
333
-
334
- ### Iteration Guide
335
- 1. Black pill buttons are always the primary action — never color them blue or any brand hue
336
- 2. Samsung Sharp Sans is display-only; SamsungOneKorean handles all UI text
337
- 3. Separate sections with flat `#f7f7f7` backgrounds, not shadows or borders
338
- 4. 20px radius on buttons, 40px on filter chips, 0px on cards — consistent scale
339
- 5. Interactive blue (`#0381fe`) is for mobile OS (One UI) and links only, not e-commerce CTAs
340
- 6. Error/badge states use `#ef3434` red
341
- 7. Weight 700 dominates — Samsung is bold, direct, confident
217
+ ### Quick reference
218
+ - Homepage contained CTA: `#000000` background, `#ffffff` text, 1px black border, 20px radius, 10px 24px 9px padding, 40px height, SamsungOneKorean 14px/700.
219
+ - AI-product selected tab: black 18px/700 SamsungOneKorean text, 4px 0px padding, sharp corners; selected/tab-selected is observed.
220
+ - AI-product media wrapper: white, 20px radius, no observed shadow.
342
221
 
343
- ---
222
+ ### Boundary-aware prompt
223
+ - "Create a Korean public-web CTA using Samsung’s captured homepage treatment: black background, white text, 20px radius, 40px height, 10px 24px 9px padding, and SamsungOneKorean 14px/700. Do not use One UI blue or infer hover/focus values."
344
224
 
345
225
  ## 10. Voice & Tone
346
226
 
347
- Samsung's brand voice is **confident, efficient, and aspirational** the voice of a company that has defined global consumer electronics for decades and knows it. Copy on Samsung Korea's e-commerce surface is declarative and product-forward: "갤럭시 S26 | S26+" is the headline, not a tagline. Navigation labels are functional (모바일, TV/영상∙음향, PC/주변기기), never whimsical. CTAs are direct imperatives ("구매하기", "더 알아보기") that respect the user's time without urgency tricks.
348
-
349
- The brand shifts register by channel. The `design.samsung.com` editorial surface uses English and a more expansive, philosophical voice — "Where Design Meets Reality," "Samsung Design Vision," "Designed to Be Seen" — positioning Samsung as a cultural and aesthetic force, not just a hardware company. The One UI design system documentation speaks in precise, developer-respecting technical prose. These three voices (commerce = direct Korean, design editorial = expansive English, OS documentation = technical) coexist without contradiction because each serves a distinct audience.
350
-
351
- | Context | Tone |
352
- |---|---|
353
- | E-commerce nav / CTAs | Direct, Korean, zero decoration. "구매하기", "더 알아보기". |
354
- | Product headlines | Bold brand + model names as the headline. No superlatives. |
355
- | Design editorial (design.samsung.com) | Visionary, philosophical, English-primary. "Where Design Meets Reality." |
356
- | One UI documentation | Technical, precise, developer-respecting. Principles before pixel specs. |
357
- | Sustainability / CSR | Earnest, global-citizen register. Data-backed claims. |
358
- | Galaxy AI features | Forward-looking, benefit-first. "AI 구독클럽" as a product category, not a description. |
359
-
360
- **Voice samples (verbatim from live www.samsung.com/sec, 2026-06-22):**
361
- - "AI 구독클럽" — nav category label for AI subscription services *(verified live 2026-06-22)*
362
- - "구매하기" — universal primary CTA across all product pages *(verified live 2026-06-22)*
363
- - "삼닷 Live 보기" — live-commerce CTA on homepage featured products *(verified live 2026-06-22)*
364
-
365
- **Forbidden register**: vague superlatives ("world's most innovative"), fear-based urgency, emoji in e-commerce CTAs, informal Korean honorifics (반말) on any branded surface.
227
+ Samsungs official brand story calls its expression bold, genuine, contemporary, and playful. On the captured Korean public surfaces, that broader tone becomes direct category and action language rather than a claim about every channel or locale. Use concise, specific labels that name the product or action; do not invent marketing superlatives, price claims, or product benefits. [Samsung brand story](https://www.samsung.com/sec/about-us/brand-identity/brand-story/)
366
228
 
367
229
  ## 11. Brand Narrative
368
230
 
369
- Samsung Electronics was established in **1969** as Samsung-Sanyo Electronics (renamed Samsung Electronics in 1974), emerging from the Samsung Group founded by **이병철 (Lee Byung-chul)** in 1938. Headquartered in **Suwon, South Korea** (with global HQ functions in Seoul), Samsung Electronics became the world's largest producer of memory chips, smartphones, and televisions a position held continuously since the 2010s. The flagship **Galaxy** mobile line, launched in 2009 with the original Galaxy smartphone, grew into the world's best-selling Android device family, anchoring Samsung's identity as a consumer-facing premium brand.
231
+ Samsung’s official Korean brand story dates the company’s story to 1969 and states a purpose of creating human-driven innovations that overcome barriers for a better world. It also describes people and their concerns as central to what Samsung creates, and names values around people, excellence, change, integrity, and co-prosperity. This provides context for the consumer-device and service ecosystem; it does not prove a specific public-web token. [Samsung brand story](https://www.samsung.com/sec/about-us/brand-identity/brand-story/)
370
232
 
371
- Samsung's design philosophy crystallized in the **One UI** design language, introduced with One UI 1.0 in 2018. One UI's founding premise "Focus on the task at hand, interact naturally, be visibly comfortable, make things responsive" represented Samsung's explicit rejection of feature-packed, visually busy interfaces in favor of content-forward, thumb-friendly layouts. The design team's stated rationale: "simple, intuitive designs to help users focus on content" rather than chrome. This principle extended to the visual language: calm backgrounds, a primary blue that "symbolizes trust, hope, and stability" drawn from Samsung's heritage, and dark mode support as a first-class feature rather than an afterthought.
372
-
373
- What Samsung's e-commerce design refuses: brand-colored CTA buttons (Samsung runs pure black purchase buttons, not blue), decorative shadows, and any visual element that competes with the hardware being sold. What it embraces: Samsung Sharp Sans as a proprietary display font that signals ownership of the premium display space, the Galaxy brand name as the sole hero element in product headlines, and a near-monochrome palette that makes product photography the only color in the room. The result is a design system that defers to the product at every turn — a confidence move that only a brand with genuinely iconic hardware can afford.
233
+ The current design expression spans more than the captured commerce pages. Samsung’s brand material treats color, typography, logo, and sound as distinct visual/experiential assets, while One UI documents a platform system for phones, tablets, wearables, earbuds, and PCs. This reference retains those domains separately so a marketplace CTA is not presented as a native One UI control. [Brand identity](https://www.samsung.com/sec/about-us/brand-identity/) · [One UI overview](https://developer.samsung.com/one-ui/index.html)
374
234
 
375
235
  ## 12. Principles
376
236
 
377
- 1. **Product is the hero.** Every design decision on samsung.com defers to product photography. White canvas, no shadows, minimal chrome — the device fills the frame. *UI implication:* product cards are frameless and shadowless; the only decor is the hardware.
378
- 2. **Black is the action color.** Unlike most consumer-tech brands that reach for a colorful primary CTA, Samsung's purchase buttons are pure black. This signals premium confidence: the product sells itself, the CTA doesn't need to shout. *UI implication:* all primary buttons are the black pill system no exceptions.
379
- 3. **Bold type, calm palette.** Samsung Sharp Sans at weight 700 declares the headline; the surrounding space is white silence. *UI implication:* reserve Samsung Sharp Sans for product names and section titles; let white space amplify the typography.
380
- 4. **Design comfort at scale.** One UI's foundational principle "be visibly comfortable" — extends to all Samsung surfaces. Dark mode, variable font sizes, high contrast: accessibility is baked in, not bolted on. *UI implication:* all interactive states must support high-contrast mode and the full font-size range.
381
- 5. **Global identity, Korean at heart.** SamsungOneKorean is the UI typeface because the Korean market is Samsung's home market and the standard bearer for Galaxy design quality. *UI implication:* Hangul legibility at 14–16px is non-negotiable; Korean copy drives spacing and rhythm decisions.
237
+ 1. **Put people and tasks first.** Samsung’s brand story and One UI guidance both center human experience and focused tasks. *UI implication:* state the action clearly and avoid decorative flow interruptions.
238
+ 2. **Use a connected typographic voice.** Samsung positions SamsungOne as a localized, universal family. *UI implication:* preserve the observed SamsungOneKorean UI role; do not substitute a system face as if it were SamsungOne.
239
+ 3. **Keep surface domains distinct.** The public Korean web and One UI are both official but have different evidence and component contexts. *UI implication:* use `#0381fe` only when implementing the documented One UI platform context, not as a generic Samsung-commerce action color.
240
+ 4. **Retain observed component boundaries.** The packet has exact evidence for CTA, media-card, and selected-tab treatments only. *UI implication:* leave unobserved variants absent instead of filling them from a generic Samsung pattern.
382
241
 
383
242
  ## 13. Personas
384
243
 
385
- *Personas below are fictional archetypes informed by publicly observable Samsung user segments (Galaxy device owners, Korean premium electronics buyers, Galaxy AI early adopters), not individual people.*
386
-
387
- **김민준, 33, 서울 강남.** A tech-forward software engineer upgrading to Galaxy S26 Ultra. Visits samsung.com/sec directly, comparing camera specs. Values the clean product listing — he doesn't want marketing noise, just specs, price, and a clear "구매하기." Trusts the black CTA as a signal of seriousness, not as persuasion.
388
-
389
- **박지현, 47, 부산.** A homeowner replacing a QLED TV and pairing it with a Bespoke AI refrigerator. Navigates the "주방가전" and "TV/영상∙음향" categories. Appreciates that the Samsung.com KR e-commerce experience doesn't feel different from a premium department store — clean, authoritative, product-first.
244
+ No first-party audience research suitable for named personas was collected in this packet. Do not invent demographic personas.
390
245
 
391
- **이수아, 26, 서울 종로.** A Galaxy Z Fold early adopter who follows samsung.com/design for design vision content. Reads "Where Design Meets Reality" editorials and follows Samsung Design's Instagram. Connects the hardware design to the One UI software aesthetic — she experiences them as the same brand promise.
392
-
393
- **George Whitmore, 38, London.** An IT procurement manager choosing Galaxy smartphones for a 500-seat enterprise deployment. Uses Samsung's business portal. Values the consistency between One UI and Samsung's global brand presence — the same confident, low-decoration design language in every market signals enterprise-grade reliability.
246
+ - **[FILL IN: validated Samsung Korea public-web audience]** add only with a Samsung first-party audience or product-research source.
247
+ - **[FILL IN: validated Galaxy platform audience]** — add only with a Samsung first-party audience or product-research source.
394
248
 
395
249
  ## 14. States
396
250
 
397
- | State | Treatment |
251
+ | State | Captured evidence boundary |
398
252
  |---|---|
399
- | **Empty (no search results)** | White canvas. Single line in black `#000000` at 16px SamsungOneKorean: "검색 결과가 없습니다." One black pill CTA to return home or adjust filters. No illustration, no decorative element. |
400
- | **Empty (comparison, no products added)** | `#f7f7f7` surface card with a neutral message in `#707070` muted text. Thin `#dddddd` hairline card outline. |
401
- | **Loading (product listing)** | `#f7f7f7` skeleton blocks at exact final dimensions for product image, title, price areas. No shimmer animation — static flat grey consistent with shadowless system. |
402
- | **Loading (page navigation)** | Thin black progress bar at top of viewport. Samsung's commerce pages use native browser load with no custom loader overlay. |
403
- | **Error (form validation)** | Field-level red text in `#ef3434` below the input. Plain Korean description of what is invalid. No inline icon — text is the signal. |
404
- | **Error (API / add to cart fail)** | Inline banner below the action button. `#ef3434`-tinted background, `#000000` text. Message states the issue concretely (재고 없음, 결제 오류 등). |
405
- | **Success (order placed)** | Dedicated confirmation page with order number. Clean white layout, black typography. No animation or confetti — the confirmation is the hero, presented directly. |
406
- | **Skeleton** | `#f7f7f7` flat rectangle at content dimensions, no pulse shimmer. Consistent with the near-shadowless, flat visual language. |
407
- | **Disabled** | Opacity 0.4 on button surface and text together. Black CTA fades to `rgba(0,0,0,0.4)` rather than switching to grey — preserves brand read. |
408
- | **Out of stock** | Product card retains image and title; "구매하기" button replaced by `#707070` muted text "일시품절" (temporary out of stock). No color change to the card itself. |
253
+ | Selected tab | AI-products `tab__item-title` records `selected` and `tab-selected`; color/padding/type are retained in §4. |
254
+ | Pressed text CTA | Homepage underlined CTA records `pressed`; it is a distinct text-link treatment, not a primary-CTA state value. |
255
+ | Pressed search control | AI-products and brand-identity search controls record `pressed`; their values are not promoted into a generic search component. |
256
+ | Disabled carousel arrow | Homepage carousel arrows record `disabled`; no opacity or disabled-button rule is asserted. |
257
+ | Expanded menu | Brand-identity navigation records `expanded` / `menu-open`; panel geometry and shadow were not promoted. |
258
+
259
+ No current capture evidence supports universal loading, empty, form-error, success, skeleton, or modal-state rules.
409
260
 
410
261
  ## 15. Motion & Easing
411
262
 
412
- **Durations**:
413
-
414
- | Token | Value | Use |
415
- |---|---|---|
416
- | `motion-instant` | 0ms | State commits, selection ticks, radio/checkbox |
417
- | `motion-fast` | 150ms | Button press, hover, focus ring |
418
- | `motion-standard` | 250ms | Dropdown open, tab switch, modal |
419
- | `motion-slow` | 400ms | Page-level hero reveal, carousel slide |
420
-
421
- **Easings**:
422
-
423
- | Token | Curve | Use |
424
- |---|---|---|
425
- | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — dropdowns, menus, panels |
426
- | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
427
- | `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Hover, two-way transitions |
428
-
429
- **Signature motions**:
430
-
431
- 1. **Hero carousel**: Full-bleed product images slide horizontally at `motion-slow / ease-standard`. The image is always in motion (auto-advancing at 5s intervals); text overlay fades rather than slides to reduce cognitive noise.
432
- 2. **Button press**: Black CTA shifts background to `#212425` in `motion-fast` with no scale transform — Samsung's press state is color-only, not kinetic. Consumer electronics gravity demands steadiness.
433
- 3. **Product card hover**: A subtle shadow lift (`0 4px 16px rgba(0,0,0,0.12)`) emerges at `motion-standard / ease-enter` on desktop product listing hover states — the only elevation in an otherwise flat system.
434
- 4. **One UI transitions**: On the mobile OS layer, Samsung uses `ease-enter` curves at 300ms for screen transitions, consistent with Android Material principles but calibrated to Samsung's more restrained tempo.
435
- 5. **Reduce motion**: Under `prefers-reduced-motion: reduce`, hero carousel pauses auto-advance, button hover is instant, and all transitions collapse to `motion-instant`. The commerce surface remains fully navigable without motion.
436
-
437
- <!--
438
- OmD v0.1 Sources — Philosophy Layer (sections 10–15)
439
-
440
- Tier 1 live inspect (2026-06-22) via playwright getComputedStyle on:
441
- - https://www.samsung.com/sec/ (homepage, primary surface)
442
- - https://www.samsung.com/sec/smartphones/ (smartphones listing page)
443
-
444
- Key raw measurements:
445
- - body: font-family SamsungOneKorean, Dotum, 돋움, sans-serif; color rgb(0,0,0); font-size 16px
446
- - nav links (모바일, TV/영상∙음향): 16px / 700 / SamsungOneKorean; color #000000; padding 14px 12px; height 47px
447
- - H2 hero headline: 56px / 700 / "Samsung Sharp Sans", SamsungOneKorean; color #000000
448
- - H2 product card (Galaxy S26 | S26+): 24px / 700 / "Samsung Sharp Sans"; color #000000
449
- - Primary CTA "구매하기": bg rgb(0,0,0) / color rgb(255,255,255) / radius 20px / padding 0px 24px / height 40px / 14px/700 SamsungOneKorean
450
- - "삼닷 Live 보기" button: same spec as 구매하기 (black pill)
451
- - "더 알아보기" link: 14px / 700 / transparent bg / underline on hover
452
- - Filter chips: bg #f7f7f7 / radius 40px / height 36px / 16px/400
453
- - Filter buttons: bg #ffffff / border 1px #dddddd / radius 8px / height 40px / 14px/700
454
-
455
- From developer.samsung.com/one-ui/color/system.html:
456
- - Primary Dark (light theme): #0072de
457
- - Primary (interactive): #0381fe
458
- - Color Control Activated: #3e91ff
459
- - Quote: "Blue symbolizes trust, hope, and stability, and it's also a key part of Samsung's heritage and brand identity."
460
-
461
- Brand narrative: Samsung Electronics founded 1969 (publicly documented); Galaxy line launched 2009; One UI introduced 2018; HQ Suwon/Seoul Korea — widely documented public facts.
462
-
463
- Voice samples (§10) verbatim from live homepage 2026-06-22.
464
- Personas (§13) are fictional archetypes informed by publicly observable Samsung user segments. Names are illustrative; they do not refer to real people.
465
- -->
263
+ The artifact records state and interaction kinds, not timing curves or transition durations. One UI documentation includes a separate motion section, but no motion token is promoted here without a matching captured surface/value. Preserve reduced-motion and accessibility requirements in an implementation without presenting them as measured Samsung commerce motion.