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
|
@@ -9,457 +9,255 @@ primary_color: "#000000"
|
|
|
9
9
|
logo:
|
|
10
10
|
type: simpleicons
|
|
11
11
|
slug: samsung
|
|
12
|
-
verified: "2026-
|
|
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-
|
|
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
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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",
|
|
37
|
-
display
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
-
|
|
49
|
-
elevated: "0 4px 16px rgba(0,0,0,0.12)"
|
|
92
|
+
flat: "none"
|
|
50
93
|
components:
|
|
51
|
-
|
|
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
|
|
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
|
|
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
|
|
78
|
-
-
|
|
79
|
-
-
|
|
80
|
-
-
|
|
81
|
-
- 20px
|
|
82
|
-
-
|
|
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
|
-
###
|
|
90
|
-
- **Primary
|
|
91
|
-
- **
|
|
92
|
-
- **
|
|
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
|
-
###
|
|
95
|
-
- **
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
142
|
+
### Homepage calls to action
|
|
140
143
|
|
|
141
|
-
**
|
|
144
|
+
**Contained CTA — Korean homepage**
|
|
142
145
|
- Background: `#000000`
|
|
143
146
|
- Text: `#ffffff`
|
|
147
|
+
- Border: 1px solid `#000000`
|
|
144
148
|
- Radius: 20px
|
|
145
|
-
- Padding:
|
|
149
|
+
- Padding: 10px 24px 9px
|
|
146
150
|
- Height: 40px
|
|
147
|
-
- Font: 14px
|
|
148
|
-
-
|
|
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
|
-
**
|
|
153
|
-
- Background: `#ffffff`
|
|
154
|
+
**Outlined CTA — Korean homepage**
|
|
154
155
|
- Text: `#000000`
|
|
156
|
+
- Border: 1px solid `#000000`
|
|
155
157
|
- Radius: 20px
|
|
156
|
-
- Padding:
|
|
158
|
+
- Padding: 10px 24px 9px
|
|
157
159
|
- Height: 40px
|
|
158
|
-
- Font: 14px
|
|
159
|
-
-
|
|
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
|
-
###
|
|
163
|
+
### AI-product content
|
|
173
164
|
|
|
174
|
-
**
|
|
165
|
+
**Product media card — AI products**
|
|
175
166
|
- Background: `#ffffff`
|
|
176
|
-
-
|
|
177
|
-
-
|
|
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
|
-
**
|
|
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
|
-
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
**
|
|
226
|
-
**Tier
|
|
227
|
-
**
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
270
|
-
-
|
|
271
|
-
-
|
|
272
|
-
-
|
|
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
|
-
-
|
|
280
|
-
-
|
|
281
|
-
-
|
|
282
|
-
-
|
|
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
|
-
|
|
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
|
|
318
|
-
-
|
|
319
|
-
-
|
|
320
|
-
-
|
|
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
|
|
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
|
+
Samsung’s 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
|
|
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
|
-
|
|
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. **
|
|
378
|
-
2. **
|
|
379
|
-
3. **
|
|
380
|
-
4. **
|
|
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
|
-
|
|
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
|
-
|
|
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 |
|
|
251
|
+
| State | Captured evidence boundary |
|
|
398
252
|
|---|---|
|
|
399
|
-
|
|
|
400
|
-
|
|
|
401
|
-
|
|
|
402
|
-
|
|
|
403
|
-
|
|
|
404
|
-
|
|
405
|
-
|
|
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
|
-
|
|
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.
|