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
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: sktelecom
|
|
3
|
+
name: SK텔레콤
|
|
4
|
+
display_name_kr: SK텔레콤
|
|
5
|
+
country: KR
|
|
6
|
+
category: consumer-tech
|
|
7
|
+
homepage: https://www.sktelecom.com/
|
|
8
|
+
primary_color: "#3a46cd"
|
|
9
|
+
logo:
|
|
10
|
+
type: favicon
|
|
11
|
+
slug: "https://www.google.com/s2/favicons?domain=sktelecom.com&sz=128"
|
|
12
|
+
verified: "2026-07-13"
|
|
13
|
+
omd: "0.1"
|
|
14
|
+
verification_v2:
|
|
15
|
+
schema: 2
|
|
16
|
+
checked: "2026-07-13"
|
|
17
|
+
surfaces:
|
|
18
|
+
- { id: home, kind: product-surface, url: "https://www.sktelecom.com/", inspected: "2026-07-13" }
|
|
19
|
+
- { id: brand, kind: official-doc, url: "https://www.sktelecom.com/view/introduce/brand.do", inspected: "2026-07-13" }
|
|
20
|
+
sources:
|
|
21
|
+
- { id: home-live, kind: product-surface, url: "https://www.sktelecom.com/", captured: "2026-07-13" }
|
|
22
|
+
- { id: brand-live, kind: official-doc, url: "https://www.sktelecom.com/view/introduce/brand.do", captured: "2026-07-13" }
|
|
23
|
+
- { id: skt-sans-regular, kind: brand-asset, url: "https://www.sktelecom.com/fonts/SKTSans-Regular.woff2", captured: "2026-07-13" }
|
|
24
|
+
- { id: ai-company-vision, kind: official-doc, url: "https://news.sktelecom.com/182728", captured: "2026-07-13" }
|
|
25
|
+
- { id: t-brand-renewal, kind: official-doc, url: "https://news.sktelecom.com/182844", captured: "2026-07-13" }
|
|
26
|
+
- { id: current-company-facts, kind: official-doc, url: "https://news.sktelecom.com/223776", captured: "2026-07-13" }
|
|
27
|
+
conflicts: []
|
|
28
|
+
claims:
|
|
29
|
+
"tokens.colors.brand-link": &brand { surface_id: brand, source_id: brand-live, method: computed-style, captured: "2026-07-13" }
|
|
30
|
+
"tokens.colors.foreground": *brand
|
|
31
|
+
"tokens.colors.strong": *brand
|
|
32
|
+
"tokens.colors.muted": *brand
|
|
33
|
+
"tokens.colors.hairline": *brand
|
|
34
|
+
"tokens.colors.action-fill": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
|
|
35
|
+
"tokens.colors.on-action": *home
|
|
36
|
+
"tokens.typography.family.ui": &font { surface_id: home, source_id: home-live, method: computed-style-fontfaceset-source, captured: "2026-07-13" }
|
|
37
|
+
"tokens.typography.family.display": *font
|
|
38
|
+
"tokens.typography.body.size": *home
|
|
39
|
+
"tokens.typography.body.weight": *home
|
|
40
|
+
"tokens.typography.body.lineHeight": *home
|
|
41
|
+
"tokens.typography.body.use": *home
|
|
42
|
+
"tokens.typography.navigation.size": *brand
|
|
43
|
+
"tokens.typography.navigation.weight": *brand
|
|
44
|
+
"tokens.typography.navigation.lineHeight": *brand
|
|
45
|
+
"tokens.typography.navigation.use": *brand
|
|
46
|
+
"tokens.typography.display.size": *font
|
|
47
|
+
"tokens.typography.display.weight": *font
|
|
48
|
+
"tokens.typography.display.lineHeight": *font
|
|
49
|
+
"tokens.typography.display.use": *font
|
|
50
|
+
"tokens.spacing.xs": *home
|
|
51
|
+
"tokens.spacing.sm": *brand
|
|
52
|
+
"tokens.spacing.md": *brand
|
|
53
|
+
"tokens.spacing.lg": *brand
|
|
54
|
+
"tokens.spacing.xl": *brand
|
|
55
|
+
"tokens.rounded.square": *brand
|
|
56
|
+
"tokens.rounded.media-tile": *home
|
|
57
|
+
"tokens.shadow.flat": *brand
|
|
58
|
+
"tokens.components.brand-current-link.type": *brand
|
|
59
|
+
"tokens.components.brand-current-link.fg": *brand
|
|
60
|
+
"tokens.components.brand-current-link.padding": *brand
|
|
61
|
+
"tokens.components.brand-current-link.font": *brand
|
|
62
|
+
"tokens.components.brand-current-link.use": *brand
|
|
63
|
+
"tokens.components.resource-download.type": *brand
|
|
64
|
+
"tokens.components.resource-download.bg": *brand
|
|
65
|
+
"tokens.components.resource-download.fg": *brand
|
|
66
|
+
"tokens.components.resource-download.border": *brand
|
|
67
|
+
"tokens.components.resource-download.radius": *brand
|
|
68
|
+
"tokens.components.resource-download.padding": *brand
|
|
69
|
+
"tokens.components.resource-download.font": *brand
|
|
70
|
+
"tokens.components.resource-download.use": *brand
|
|
71
|
+
"tokens.components.outline-title-link.type": *brand
|
|
72
|
+
"tokens.components.outline-title-link.bg": *brand
|
|
73
|
+
"tokens.components.outline-title-link.fg": *brand
|
|
74
|
+
"tokens.components.outline-title-link.border": *brand
|
|
75
|
+
"tokens.components.outline-title-link.radius": *brand
|
|
76
|
+
"tokens.components.outline-title-link.padding": *brand
|
|
77
|
+
"tokens.components.outline-title-link.height": *brand
|
|
78
|
+
"tokens.components.outline-title-link.font": *brand
|
|
79
|
+
"tokens.components.outline-title-link.use": *brand
|
|
80
|
+
"tokens.components.top-action.type": *home
|
|
81
|
+
"tokens.components.top-action.bg": *home
|
|
82
|
+
"tokens.components.top-action.fg": *home
|
|
83
|
+
"tokens.components.top-action.radius": *home
|
|
84
|
+
"tokens.components.top-action.padding": *home
|
|
85
|
+
"tokens.components.top-action.height": *home
|
|
86
|
+
"tokens.components.top-action.font": *home
|
|
87
|
+
"tokens.components.top-action.states": *home
|
|
88
|
+
"tokens.components.top-action.use": *home
|
|
89
|
+
tokens:
|
|
90
|
+
source: live-extract
|
|
91
|
+
extracted: "2026-07-13"
|
|
92
|
+
note: "Only selector-backed values from the supplied SK텔레콤 home and brand page are tokens. Corporate/brand narrative, T brand renewal, font asset delivery, and unobserved interaction behavior remain separate evidence domains."
|
|
93
|
+
colors:
|
|
94
|
+
brand-link: "#3a46cd"
|
|
95
|
+
foreground: "#1a2232"
|
|
96
|
+
strong: "#3a404e"
|
|
97
|
+
muted: "#595e6b"
|
|
98
|
+
hairline: "#d0d1d3"
|
|
99
|
+
action-fill: "#727887"
|
|
100
|
+
on-action: "#ffffff"
|
|
101
|
+
typography:
|
|
102
|
+
family: { ui: "SKT Sans Text", display: "SKT Sans Display" }
|
|
103
|
+
body: { size: 15, weight: 600, lineHeight: 27, use: "Repeated public page body text" }
|
|
104
|
+
navigation: { size: 16, weight: 600, lineHeight: 20, use: "Brand-page navigation links" }
|
|
105
|
+
display: { size: 24, weight: 700, lineHeight: 38.4, use: "Observed SKT Sans Display body-heading treatment; not a complete type scale" }
|
|
106
|
+
spacing: { xs: 6, sm: 12, md: 16, lg: 24, xl: 40 }
|
|
107
|
+
rounded: { square: 0, media-tile: 16 }
|
|
108
|
+
shadow: { flat: "none" }
|
|
109
|
+
components:
|
|
110
|
+
brand-current-link: { type: listItem, fg: "#3a46cd", padding: "0px 12px", font: "16px / 600 / SKT Sans Text", use: "Static current-page link on the public brand navigation" }
|
|
111
|
+
resource-download: { type: listItem, bg: "transparent", fg: "#1a2232", border: "1px solid #727887", radius: 0, padding: "11px 24px", font: "13px / 600 / SKT Sans Text", use: "Public brand-page download link" }
|
|
112
|
+
outline-title-link: { type: listItem, bg: "transparent", fg: "#595e6b", border: "1px solid #d0d1d3", radius: 0, padding: "6px 12px 6px 16px", height: 34, font: "12px / 600 / SKT Sans Text", use: "Public footer/title link" }
|
|
113
|
+
top-action: { type: button, bg: "#727887", fg: "#ffffff", radius: 0, padding: "1px 6px", height: 58, font: "10px / 700 / SKT Sans Text", states: "default observed; interaction count 0, so no hover, focus, pressed, disabled, or error state is retained", use: "Public desktop/tablet top action" }
|
|
114
|
+
components_harvested: true
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
# Design System Inspiration of SK텔레콤
|
|
118
|
+
|
|
119
|
+
## 1. Visual Theme & Atmosphere
|
|
120
|
+
|
|
121
|
+
SK텔레콤 is a Korean connectivity and consumer-technology company whose public ecosystem joins telecommunications with AI services and infrastructure. Its current corporate expression is less about a single consumer-app shell than a clear transition from the legacy meaning of “Telecom” toward Technology, Tomorrow, and Together: the company’s 2022 T-brand renewal describes the T form as an open door to the future, while its AI Company vision frames technology and services around benefiting customers. On the two supplied public surfaces, that forward-looking story resolves into an orderly, typographic corporate interface: loaded SKT Sans families, white or transparent fields, square controls, cool charcoal neutrals, and a saturated blue current-link treatment. The current company facts describe a continuing move toward an AI-infrastructure and full-stack AI-provider role; that strategic evolution is brand context, not a license to turn AI campaign visuals into web tokens.
|
|
122
|
+
|
|
123
|
+
**Key characteristics:**
|
|
124
|
+
|
|
125
|
+
- Public brand navigation uses `#3A46CD` for the current-page treatment, with `#727887` as the observed filled top action.
|
|
126
|
+
- SKT Sans Text and SKT Sans Display are both loaded first-family faces on the supplied public pages.
|
|
127
|
+
- Captured actions are square (`0px` radius); 16px rounding is confined to observed media-tile links.
|
|
128
|
+
- The retained values describe the public home and brand-information page only, not T world, A., native apps, advertising, or a general SK텔레콤 product design system.
|
|
129
|
+
|
|
130
|
+
## 2. Color Palette & Roles
|
|
131
|
+
|
|
132
|
+
| Role | Value | Usage and evidence boundary |
|
|
133
|
+
| --- | --- | --- |
|
|
134
|
+
| Brand current-link | `#3A46CD` | Current-page and focused public brand-navigation links; this is an observed public navigation treatment. |
|
|
135
|
+
| Foreground | `#1A2232` | Public brand-page resource-download text only. |
|
|
136
|
+
| Strong link text | `#3A404E` | Repeated stronger public link text on the supplied pages. |
|
|
137
|
+
| Muted link text | `#595E6B` | Public footer/title link text. |
|
|
138
|
+
| Hairline | `#D0D1D3` | 1px outline on the footer/title link. |
|
|
139
|
+
| Action fill | `#727887` | Observed desktop/tablet top-action fill. |
|
|
140
|
+
| On action | `#FFFFFF` | Text on that `#727887` top action. |
|
|
141
|
+
|
|
142
|
+
T Blue and T Red are named in SK텔레콤’s 2022 renewal story as brand colors, but the supplied computed-style evidence does not establish their official palette values or product roles. This reference therefore does not manufacture a T Blue hex or use a corporate color story to overwrite the measured public-link values above.
|
|
143
|
+
|
|
144
|
+
## 3. Typography Rules
|
|
145
|
+
|
|
146
|
+
### Evidence classes
|
|
147
|
+
|
|
148
|
+
| Evidence class | Family and boundary |
|
|
149
|
+
| --- | --- |
|
|
150
|
+
| Official product-use | No separate first-party announcement in the consulted material states that a named family applies to all SK텔레콤 apps or services. |
|
|
151
|
+
| Live computed surface-use | `SKT Sans Text` is loaded with high confidence and is the visible first family in 291 supplied observations across text, buttons, badges, and list items. `SKT Sans Display` is loaded with high confidence and appears in seven supplied visible observations, including heading/body-heading roles. |
|
|
152
|
+
| Official distributed brand asset | The supplied artifact records SK텔레콤-hosted WOFF/WOFF2 delivery URLs for SKT Sans Text weights and SKT Sans Display weights. This establishes delivery on the captured public pages, not a redistribution grant. |
|
|
153
|
+
| Declared-only | `swiper-icons` has an `@font-face` declaration but no visible use in the supplied capture. It is not a brand typography token. |
|
|
154
|
+
| Unresolved | No first-party public font licence or general re-use permission was found in the consulted sources. Do not treat the hosted files as permission to distribute the faces. |
|
|
155
|
+
|
|
156
|
+
### Captured public hierarchy
|
|
157
|
+
|
|
158
|
+
| Role | Family | Size | Weight | Line height | Evidence boundary |
|
|
159
|
+
| --- | --- | ---: | ---: | ---: | --- |
|
|
160
|
+
| Public body | SKT Sans Text | 15px | 600 | 27px | Repeated public-page body samples; not a complete body scale. |
|
|
161
|
+
| Brand navigation | SKT Sans Text | 16px | 600 | 20px | Public brand-page navigation links. |
|
|
162
|
+
| Display treatment | SKT Sans Display | 24px | 700 | 38.4px | Six visible public body-heading observations only. |
|
|
163
|
+
| Larger display sample | SKT Sans Display | 48px | 700 | 48px | One `h3` observation only; not promoted to a global token. |
|
|
164
|
+
|
|
165
|
+
## 4. Component Stylings
|
|
166
|
+
|
|
167
|
+
### Brand navigation link
|
|
168
|
+
|
|
169
|
+
**Current page**
|
|
170
|
+
- Background: transparent
|
|
171
|
+
- Text: `#3A46CD`
|
|
172
|
+
- Border: none
|
|
173
|
+
- Radius: 0px
|
|
174
|
+
- Padding: 0px 12px
|
|
175
|
+
- Font: 16px / 600 / SKT Sans Text
|
|
176
|
+
- Use: `surface-2::[data-omd-capture="11"]`, static current-page brand navigation
|
|
177
|
+
|
|
178
|
+
### Resource download link
|
|
179
|
+
|
|
180
|
+
**Default**
|
|
181
|
+
- Background: transparent
|
|
182
|
+
- Text: `#1A2232`
|
|
183
|
+
- Border: 1px solid `#727887`
|
|
184
|
+
- Radius: 0px
|
|
185
|
+
- Padding: 11px 24px
|
|
186
|
+
- Font: 13px / 600 / SKT Sans Text
|
|
187
|
+
- Use: `surface-2::[data-omd-capture="13"]` and `"14"`, public brand-page download links
|
|
188
|
+
|
|
189
|
+
### Outline title link
|
|
190
|
+
|
|
191
|
+
**Default**
|
|
192
|
+
- Background: transparent
|
|
193
|
+
- Text: `#595E6B`
|
|
194
|
+
- Border: 1px solid `#D0D1D3`
|
|
195
|
+
- Radius: 0px
|
|
196
|
+
- Padding: 6px 12px 6px 16px
|
|
197
|
+
- Height: 34px
|
|
198
|
+
- Font: 12px / 600 / SKT Sans Text
|
|
199
|
+
- Use: `home::[data-omd-capture="39"]` and `surface-2::[data-omd-capture="70"]`, public footer/title links
|
|
200
|
+
|
|
201
|
+
### Top action
|
|
202
|
+
|
|
203
|
+
**Desktop/tablet default**
|
|
204
|
+
- Background: `#727887`
|
|
205
|
+
- Text: `#FFFFFF`
|
|
206
|
+
- Radius: 0px
|
|
207
|
+
- Padding: 1px 6px
|
|
208
|
+
- Height: 58px
|
|
209
|
+
- Font: 10px / 700 / SKT Sans Text
|
|
210
|
+
- Use: `home::[data-omd-capture="29"]` and `surface-2::[data-omd-capture="60"]`, public desktop/tablet top action
|
|
211
|
+
|
|
212
|
+
The artifact retains static CSS snapshots with `state-hover`, `state-pressed`, and `state-focus` selector suffixes, but its top-level `interactions` array is empty and `interactionCount` is zero. They are recorded as raw proof only, not promoted to interaction-state tokens or a behavior contract.
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
**Verified:** 2026-07-13
|
|
216
|
+
**Tier 1 sources:** https://www.sktelecom.com/ | https://www.sktelecom.com/view/introduce/brand.do
|
|
217
|
+
**Tier 2 sources:** https://getdesign.md/sktelecom (attempted; no usable response) | https://styles.refero.design/?q=SK%20Telecom (attempted; no usable response)
|
|
218
|
+
**Conflicts unresolved:** none
|
|
219
|
+
|
|
220
|
+
## 5. Layout Principles
|
|
221
|
+
|
|
222
|
+
The supplied desktop captures (1440×900) use spacing clusters of 6, 12, 16, 24, and 40px. On the brand page, 24px and 40px recur around content controls and information groups; they are measured spacing values, not proof of a complete modular grid. The current-page navigation uses compact 16px text with 12px inline padding, while resource links expand horizontally through 11px × 24px padding. Preserve this contrast between dense navigation and spacious resource actions rather than inventing a mobile grid or a universal card layout.
|
|
223
|
+
|
|
224
|
+
## 6. Depth & Elevation
|
|
225
|
+
|
|
226
|
+
All retained component representatives report `box-shadow: none`. That supports a flat treatment for these public brand-page links and top action. It does not establish that SK텔레콤 product, marketing, retail, native-app, or campaign interfaces never use shadow, gradients, imagery, or elevation.
|
|
227
|
+
|
|
228
|
+
## 7. Do's and Don'ts
|
|
229
|
+
|
|
230
|
+
### Do
|
|
231
|
+
|
|
232
|
+
- Use SKT Sans Text or SKT Sans Display only when the supplied, SK텔레콤-hosted face is actually available and its deployment is permitted.
|
|
233
|
+
- Keep the measured current-page blue `#3A46CD` in the brand-navigation context from which it was captured.
|
|
234
|
+
- Retain the square, transparent outline treatment for the observed resource and footer/title links.
|
|
235
|
+
- Treat the 16px media-tile rounding as local to the observed tile links, not as a global control radius.
|
|
236
|
+
|
|
237
|
+
### Don't
|
|
238
|
+
|
|
239
|
+
- Substitute a system font and label it SKT Sans.
|
|
240
|
+
- Convert T Blue, T Red, AI campaign art, or brand-story language into a measured UI token without direct evidence.
|
|
241
|
+
- Generalize the 58px desktop/tablet top action into a mobile primary button.
|
|
242
|
+
- Invent responsive breakpoints, input states, dialogs, toast behavior, timing, easing, or component variants from static captures.
|
|
243
|
+
|
|
244
|
+
## 8. Responsive Behavior
|
|
245
|
+
|
|
246
|
+
The only supplied viewport is 1440×900. It establishes the listed desktop public-page values and does not establish a mobile type scale, breakpoints, stacking, touch target, or responsive component contract. Re-measure the actual target surface before assigning those values.
|
|
247
|
+
|
|
248
|
+
## 9. Agent Prompt Guide
|
|
249
|
+
|
|
250
|
+
For a public SK텔레콤 corporate-information composition, use the verified language narrowly: a typographic, flat, square-cornered frame; SKT Sans Text for available compact body/navigation copy; SKT Sans Display for the observed display treatment; dark charcoal links; and a saturated `#3A46CD` current-page navigation cue. Use transparent resource links with 1px neutral outlines and a `#727887`/white top action only in their measured desktop/tablet contexts. Keep the T-brand “open door” and AI Company material as narrative direction rather than color-token instructions. Do not present fallback fonts, unmeasured T Blue/T Red values, or unobserved app controls as SK텔레콤 facts.
|
|
251
|
+
|
|
252
|
+
## 10. Voice & Tone
|
|
253
|
+
|
|
254
|
+
Official material frames SK텔레콤’s current direction around technology and services that benefit customers, an “OPEN” motif, and a transition toward AI infrastructure and services. The usable voice is forward-looking, useful, and direct; it should explain a concrete benefit or next step rather than rely on empty futurism.
|
|
255
|
+
|
|
256
|
+
| Do | Don't |
|
|
257
|
+
| --- | --- |
|
|
258
|
+
| Connect technology to a concrete customer or societal use. | Use “AI” as a standalone promise without explaining what changes. |
|
|
259
|
+
| Use clear, open language for navigation and resource actions. | Turn an unmeasured visual pattern into a brand command. |
|
|
260
|
+
| Keep corporate, service, and brand surfaces named when their evidence differs. | Collapse telecom, AI infrastructure, and every consumer service into one UI claim. |
|
|
261
|
+
|
|
262
|
+
Illustrative tone samples (characterization, not source copy):
|
|
263
|
+
|
|
264
|
+
- “Choose the service that helps you stay connected today.”
|
|
265
|
+
- “Explore the technology and information behind the next step.”
|
|
266
|
+
- “See how this service can make a customer task clearer.”
|
|
267
|
+
|
|
268
|
+
## 11. Brand Narrative
|
|
269
|
+
|
|
270
|
+
SK텔레콤’s current story begins with connectivity but is explicitly moving beyond a telecommunications-only frame. In its 2022 vision announcement, the company described its direction as becoming an AI Company that benefits customers through technology and services. The associated T/B brand renewal gives that turn a visible motif: “OPEN,” represented by an open-door form and a redefinition of T through Technology, Tomorrow, and Together.
|
|
271
|
+
|
|
272
|
+
That shift remains active rather than historical. A 2026 official fact sheet describes SK텔레콤 as advancing toward an AI-infrastructure architect and full-stack AI provider, joining technology, infrastructure, and services while redesigning products around customers. The two captured public pages should be read as corporate and brand-information surfaces within that broader evolution; they do not document the UI systems of each consumer service.
|
|
273
|
+
|
|
274
|
+
## 12. Principles
|
|
275
|
+
|
|
276
|
+
1. **Make technology useful to customers.** SK텔레콤’s AI Company vision explicitly links technology and services with customer benefit.
|
|
277
|
+
*UI implication:* explain the user outcome beside a technical feature; do not let a technical label do all the work.
|
|
278
|
+
|
|
279
|
+
2. **Keep the future open and legible.** The 2022 renewal uses “OPEN” and an open door as its design motif.
|
|
280
|
+
*UI implication:* use clear pathways and named actions, while treating this as narrative guidance rather than a measured layout rule.
|
|
281
|
+
|
|
282
|
+
3. **Connect infrastructure, services, and society without conflating their surfaces.** The current fact sheet spans customer AI, national AI infrastructure, and continued internal transformation.
|
|
283
|
+
*UI implication:* preserve source-domain labels; a corporate infrastructure claim does not supply a consumer-product token.
|
|
284
|
+
|
|
285
|
+
4. **Pair innovation with responsibility.** The current fact sheet places “DO THE GOOD AI” in SK텔레콤’s ESG context.
|
|
286
|
+
*UI implication:* when communicating AI, state the applicable benefit, boundary, or responsibility instead of using generic assurance language.
|
|
287
|
+
|
|
288
|
+
## 13. Personas
|
|
289
|
+
|
|
290
|
+
The following are stakeholder archetypes derived from official strategy descriptions, not research-backed individual personas or claims about a specific app’s users.
|
|
291
|
+
|
|
292
|
+
### Connected customer
|
|
293
|
+
|
|
294
|
+
Someone choosing or using SK텔레콤 services and looking for a clear benefit from connectivity or AI-enabled support. Use direct explanations and avoid making infrastructure terminology the only way to understand a task.
|
|
295
|
+
|
|
296
|
+
### Enterprise or industry collaborator
|
|
297
|
+
|
|
298
|
+
An organization evaluating AI infrastructure, transformation, or service capabilities. Keep product/service claims, architecture information, and partnership context distinct from consumer-interface guidance.
|
|
299
|
+
|
|
300
|
+
### Korean AI ecosystem stakeholder
|
|
301
|
+
|
|
302
|
+
A public, institutional, or industry participant concerned with the wider AI-infrastructure and sovereign-AI agenda described by SK텔레콤. Communicate scope and responsibility precisely; this is not evidence for a consumer-screen persona.
|
|
303
|
+
|
|
304
|
+
## 14. States
|
|
305
|
+
|
|
306
|
+
No component-state matrix is retained. The supplied evidence bundle has zero recorded interaction expansions and no selector-backed loading, empty, error, success, disabled, dialog, toast, or form-validation contract. Static state-like CSS snapshots remain documented in `.verification.md` but are not represented as usable product states.
|
|
307
|
+
|
|
308
|
+
## 15. Motion & Easing
|
|
309
|
+
|
|
310
|
+
No duration, easing, transition, or animation token is retained. The supplied public-page capture has no interaction records, so motion behavior is unresolved at the smallest group boundary rather than approximated with a generic corporate motion scale.
|
|
@@ -4,11 +4,11 @@ name: SOCAR
|
|
|
4
4
|
country: KR
|
|
5
5
|
category: consumer-tech
|
|
6
6
|
homepage: "https://www.socar.kr"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#0078ff"
|
|
8
8
|
logo:
|
|
9
9
|
type: favicon
|
|
10
10
|
slug: "https://www.google.com/s2/favicons?domain=socar.kr&sz=256"
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-12"
|
|
12
12
|
omd: "0.1"
|
|
13
13
|
ds:
|
|
14
14
|
name: SOCAR Design
|
|
@@ -16,41 +16,120 @@ ds:
|
|
|
16
16
|
type: system
|
|
17
17
|
description: SOCAR's design system hub — Space Frame, SOCAR Blue, Sandoll Gothic Neo2 + Avenir typography, and mobility-flow component patterns.
|
|
18
18
|
og_image: "https://design.socar.kr/og.jpg"
|
|
19
|
+
verification_v2:
|
|
20
|
+
schema: 2
|
|
21
|
+
checked: "2026-07-12"
|
|
22
|
+
surfaces:
|
|
23
|
+
- { id: home, kind: marketing-product, url: "https://www.socar.kr/", inspected: "2026-07-12" }
|
|
24
|
+
- { id: service, kind: product-directory, url: "https://www.socar.kr/service", inspected: "2026-07-12" }
|
|
25
|
+
- { id: guide, kind: product-guide, url: "https://www.socar.kr/guide", inspected: "2026-07-12" }
|
|
26
|
+
- { id: brand, kind: brand-center, url: "https://design.socar.kr/", inspected: "2026-07-12" }
|
|
27
|
+
- { id: fare, kind: product-guide, url: "https://www.socar.kr/fare", inspected: "2026-07-12" }
|
|
28
|
+
sources:
|
|
29
|
+
- { id: home-live, kind: product-surface, url: "https://www.socar.kr/", captured: "2026-07-12" }
|
|
30
|
+
- { id: service-live, kind: product-surface, url: "https://www.socar.kr/service", captured: "2026-07-12" }
|
|
31
|
+
- { id: guide-live, kind: product-surface, url: "https://www.socar.kr/guide", captured: "2026-07-12" }
|
|
32
|
+
- { id: brand-live, kind: brand-asset, url: "https://design.socar.kr/", captured: "2026-07-12" }
|
|
33
|
+
- { id: fare-live, kind: product-surface, url: "https://www.socar.kr/fare", captured: "2026-07-12" }
|
|
34
|
+
conflicts: []
|
|
35
|
+
claims:
|
|
36
|
+
"tokens.colors.primary": &guide_evidence { surface_id: guide, source_id: guide-live, method: live-inspect, captured: "2026-07-12" }
|
|
37
|
+
"tokens.colors.canvas": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-12" }
|
|
38
|
+
"tokens.colors.foreground": *home_evidence
|
|
39
|
+
"tokens.colors.secondary": *home_evidence
|
|
40
|
+
"tokens.colors.muted": *home_evidence
|
|
41
|
+
"tokens.colors.on-primary": *guide_evidence
|
|
42
|
+
"tokens.colors.surface": *home_evidence
|
|
43
|
+
"tokens.colors.hairline": *home_evidence
|
|
44
|
+
"tokens.typography.family.product": *home_evidence
|
|
45
|
+
"tokens.typography.family.brand-center": &brand_evidence { surface_id: brand, source_id: brand-live, method: live-inspect, captured: "2026-07-12" }
|
|
46
|
+
"tokens.typography.h1.size": *home_evidence
|
|
47
|
+
"tokens.typography.h1.weight": *home_evidence
|
|
48
|
+
"tokens.typography.h1.lineHeight": *home_evidence
|
|
49
|
+
"tokens.typography.h1.use": *home_evidence
|
|
50
|
+
"tokens.typography.h2.size": *home_evidence
|
|
51
|
+
"tokens.typography.h2.weight": *home_evidence
|
|
52
|
+
"tokens.typography.h2.lineHeight": *home_evidence
|
|
53
|
+
"tokens.typography.h2.use": *home_evidence
|
|
54
|
+
"tokens.typography.body.size": *home_evidence
|
|
55
|
+
"tokens.typography.body.weight": *home_evidence
|
|
56
|
+
"tokens.typography.body.lineHeight": *home_evidence
|
|
57
|
+
"tokens.typography.body.use": *home_evidence
|
|
58
|
+
"tokens.typography.caption.size": *home_evidence
|
|
59
|
+
"tokens.typography.caption.weight": *home_evidence
|
|
60
|
+
"tokens.typography.caption.lineHeight": *home_evidence
|
|
61
|
+
"tokens.typography.caption.use": *home_evidence
|
|
62
|
+
"tokens.spacing.xs": *home_evidence
|
|
63
|
+
"tokens.spacing.sm": *home_evidence
|
|
64
|
+
"tokens.spacing.md": *home_evidence
|
|
65
|
+
"tokens.spacing.base": *home_evidence
|
|
66
|
+
"tokens.spacing.lg": *home_evidence
|
|
67
|
+
"tokens.rounded.sm": *home_evidence
|
|
68
|
+
"tokens.rounded.action": *guide_evidence
|
|
69
|
+
"tokens.rounded.card": *home_evidence
|
|
70
|
+
"tokens.rounded.full": *home_evidence
|
|
71
|
+
"tokens.shadow.flat": *home_evidence
|
|
72
|
+
"tokens.shadow.floating": *home_evidence
|
|
73
|
+
"tokens.components.primary-action.type": *guide_evidence
|
|
74
|
+
"tokens.components.primary-action.bg": *guide_evidence
|
|
75
|
+
"tokens.components.primary-action.fg": *guide_evidence
|
|
76
|
+
"tokens.components.primary-action.radius": *guide_evidence
|
|
77
|
+
"tokens.components.primary-action.padding": *guide_evidence
|
|
78
|
+
"tokens.components.primary-action.font": *guide_evidence
|
|
79
|
+
"tokens.components.primary-action.states": *guide_evidence
|
|
80
|
+
"tokens.components.primary-action.use": *guide_evidence
|
|
81
|
+
"tokens.components.search-action.type": *home_evidence
|
|
82
|
+
"tokens.components.search-action.bg": *home_evidence
|
|
83
|
+
"tokens.components.search-action.fg": *home_evidence
|
|
84
|
+
"tokens.components.search-action.radius": *home_evidence
|
|
85
|
+
"tokens.components.search-action.padding": *home_evidence
|
|
86
|
+
"tokens.components.search-action.font": *home_evidence
|
|
87
|
+
"tokens.components.search-action.states": *home_evidence
|
|
88
|
+
"tokens.components.search-action.use": *home_evidence
|
|
89
|
+
"tokens.components.region-list.type": *home_evidence
|
|
90
|
+
"tokens.components.region-list.bg": *home_evidence
|
|
91
|
+
"tokens.components.region-list.fg": *home_evidence
|
|
92
|
+
"tokens.components.region-list.radius": *home_evidence
|
|
93
|
+
"tokens.components.region-list.padding": *home_evidence
|
|
94
|
+
"tokens.components.region-list.use": *home_evidence
|
|
95
|
+
"tokens.components.floating-control.type": *home_evidence
|
|
96
|
+
"tokens.components.floating-control.bg": *home_evidence
|
|
97
|
+
"tokens.components.floating-control.fg": *home_evidence
|
|
98
|
+
"tokens.components.floating-control.radius": *home_evidence
|
|
99
|
+
"tokens.components.floating-control.padding": *home_evidence
|
|
100
|
+
"tokens.components.floating-control.font": *home_evidence
|
|
101
|
+
"tokens.components.floating-control.states": *home_evidence
|
|
102
|
+
"tokens.components.floating-control.use": *home_evidence
|
|
19
103
|
tokens:
|
|
20
|
-
source:
|
|
21
|
-
extracted: "2026-
|
|
22
|
-
note: "
|
|
104
|
+
source: reconciled
|
|
105
|
+
extracted: "2026-07-12"
|
|
106
|
+
note: "Five current first-party surfaces. Product web uses loaded Pretendard; the brand center separately loads IBM Plex Sans KR. swiper-icons is declared-only."
|
|
23
107
|
colors:
|
|
24
|
-
primary: "#
|
|
108
|
+
primary: "#0078ff"
|
|
25
109
|
canvas: "#ffffff"
|
|
26
110
|
foreground: "#354153"
|
|
27
|
-
|
|
111
|
+
secondary: "#697383"
|
|
28
112
|
muted: "#b4bbcb"
|
|
29
113
|
on-primary: "#ffffff"
|
|
30
114
|
surface: "#f2f3f8"
|
|
31
|
-
surface-footer: "#f5f5f5"
|
|
32
115
|
hairline: "#e5e8ef"
|
|
33
116
|
typography:
|
|
34
|
-
family: {
|
|
35
|
-
h1:
|
|
36
|
-
h2:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
|
|
42
|
-
rounded: { sm: 12, md: 14, lg: 16, full: 9999 }
|
|
117
|
+
family: { product: "Pretendard", brand-center: "IBM Plex Sans KR" }
|
|
118
|
+
h1: { size: 26, weight: 700, lineHeight: 1.38, use: "Large current product heading" }
|
|
119
|
+
h2: { size: 22, weight: 700, lineHeight: 1.36, use: "Section heading" }
|
|
120
|
+
body: { size: 16, weight: 400, lineHeight: 1.5, use: "Product body and list text" }
|
|
121
|
+
caption: { size: 14, weight: 400, lineHeight: 1.57, use: "Supporting product copy" }
|
|
122
|
+
spacing: { xs: 4, sm: 10, md: 14, base: 16, lg: 20 }
|
|
123
|
+
rounded: { sm: 4, action: 14, card: 12, full: 48 }
|
|
43
124
|
shadow:
|
|
44
|
-
|
|
125
|
+
flat: "none"
|
|
126
|
+
floating: "rgba(38,47,60,0.04) 0px 0px 6px, rgba(38,47,60,0.04) 0px 3px 2px, rgba(38,47,60,0.08) 0px 2px 8px"
|
|
45
127
|
components_harvested: true
|
|
46
128
|
components:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
card-region: { type: card, bg: "#ffffff", border: "1px solid #e5e8ef", radius: "14px", padding: "20px", fg: "#354153", use: "Location/region booking entry tile" }
|
|
52
|
-
chip-timerange: { type: badge, bg: "#ffffff", border: "1px solid #e5e8ef", radius: "14px", padding: "0 12px", font: "16px / 400", use: "Date-time range selector chip" }
|
|
53
|
-
input: { type: input, bg: "#ffffff", fg: "#354153", border: "1px solid #e5e8ef", radius: "12px", padding: "0 13px", font: "16px / 400", use: "Search field; placeholder #b4bbcb" }
|
|
129
|
+
primary-action: { type: button, bg: "#0078ff", fg: "#ffffff", radius: "14px", padding: "16px 22px", font: "16px / 600", states: "default captured; no safe active expansion", use: "Prominent guide/product action" }
|
|
130
|
+
search-action: { type: button, bg: "#f2f3f8", fg: "#b4bbcb", radius: "12px", padding: "12px 18px", font: "14px / 600", states: "disabled appearance captured", use: "Home search action before required values are complete" }
|
|
131
|
+
region-list: { type: listItem, bg: "#f9f9fb", fg: "#354153", radius: "12px", padding: "24px 16px", use: "Home region or destination collection item" }
|
|
132
|
+
floating-control: { type: button, bg: "#ffffff", fg: "#354153", radius: "48px", padding: "11px", font: "14px / 600", states: "default and pressed snapshots observed", use: "Floating circular navigation/control button" }
|
|
54
133
|
---
|
|
55
134
|
|
|
56
135
|
# Design System Inspiration of SOCAR
|
|
@@ -59,7 +138,7 @@ tokens:
|
|
|
59
138
|
|
|
60
139
|
SOCAR (쏘카) is Korea's dominant car-sharing platform, and its web surface reads exactly like the product it sells: clean, calm, gently confident — a service that wants to disappear out of the user's way the moment a car has to be reserved. The site opens on pure white, runs body text in **Pretendard** (the de-facto Korean web sans), and keeps the entire chrome in a soft cool-grey palette anchored by `#354153` for body text and `#e5e8ef` for borders. Nothing about the home page asks for attention except the action you came for: pick a time, pick a location, see a car.
|
|
61
140
|
|
|
62
|
-
The
|
|
141
|
+
The current SOCAR brand center frames the company around flexible, clear-and-bold, and expanding mobility, with “Lifetime Mobility” extending the brand beyond a single car-sharing task. Product web surfaces translate that posture into a restrained cool-grey interface and a directly observed action blue `#0078ff`. The brand center is a separate evidence surface: it loaded IBM Plex Sans KR, while the main product web used Pretendard.
|
|
63
142
|
|
|
64
143
|
What distinguishes SOCAR from other Korean transportation apps (Kakao Mobility's yellow, Tada's coral) is the **uniform 12–16px radius scale**. Search inputs round at 12px, search-row chips at 14px, content cards at 14–16px — a consistent, mid-rounded geometry that reads as friendly without tipping into consumer-app cuteness. Cards float on a single light shadow (`rgba(0,0,0,0.1) 0 4px 8px`), never the multi-layer chromatic stacks of fintech-grade UIs. The entire system feels like a thoughtful product page that has been quietly tuned for months.
|
|
65
144
|
|
|
@@ -79,14 +158,16 @@ What distinguishes SOCAR from other Korean transportation apps (Kakao Mobility's
|
|
|
79
158
|
## 2. Color Palette & Roles
|
|
80
159
|
|
|
81
160
|
### Primary (Brand)
|
|
82
|
-
- **SOCAR Blue** (
|
|
161
|
+
- **SOCAR Blue / current action** (`#0078ff`): repeated live text/border color and filled guide action across current product surfaces.
|
|
83
162
|
- **Pure White** (`#ffffff`): Page background, card surface, header background.
|
|
84
163
|
|
|
85
164
|
### Neutral Scale (verified live)
|
|
86
165
|
- **Text Default** (`#354153` / `rgb(53, 65, 83)`): All body text, all heading text, all nav links. Not black. A cool blue-grey that does the work black would do in another system.
|
|
166
|
+
- **Text Secondary** (`#697383` / `rgb(105, 115, 131)`): repeated supporting copy across home, service, guide, and fare.
|
|
87
167
|
- **Footer Grey** (`#f5f5f5`): Footer background — the only sustained off-white on the page.
|
|
88
168
|
- **Border Default** (`#e5e8ef` / `rgb(229, 232, 239)`): Card and tile borders.
|
|
89
169
|
- **Input Fill** (`#f2f3f8` / `rgb(242, 243, 248)`): Search button / filled input background.
|
|
170
|
+
- **Region Surface** (`#f9f9fb`): observed background for home destination/region collection items.
|
|
90
171
|
- **Placeholder / Disabled Text** (`#b4bbcb` / `rgb(180, 187, 203)`): Search-button label, placeholder states.
|
|
91
172
|
|
|
92
173
|
### Supporting (post-rebrand brand system)
|
|
@@ -98,9 +179,21 @@ What distinguishes SOCAR from other Korean transportation apps (Kakao Mobility's
|
|
|
98
179
|
|
|
99
180
|
## 3. Typography Rules
|
|
100
181
|
|
|
182
|
+
### Font evidence boundary
|
|
183
|
+
|
|
184
|
+
| Evidence class | Resolution |
|
|
185
|
+
|---|---|
|
|
186
|
+
| Official product-use | Current brand-center and product surfaces are kept as separate typography domains. |
|
|
187
|
+
| Live surface-use | Product web visibly used loaded Pretendard on 569 elements; the brand center loaded IBM Plex Sans KR. |
|
|
188
|
+
| Official distributed asset | The brand center served IBM Plex Sans KR webfont assets from `design.socar.kr`. |
|
|
189
|
+
| Declared-only | `swiper-icons` was declared with zero visible text usage. |
|
|
190
|
+
| Unresolved | Native app typography remains unresolved until directly inspected. |
|
|
191
|
+
|
|
192
|
+
Specimen availability is evaluated independently for brand and live web surfaces.
|
|
193
|
+
|
|
101
194
|
### Font Family
|
|
102
|
-
- **
|
|
103
|
-
- **
|
|
195
|
+
- **Product web**: `Pretendard`, loaded/high confidence on home, service, guide, and fare.
|
|
196
|
+
- **Brand center**: `IBM Plex Sans KR`, loaded from official brand-center assets. It is not substituted into product web roles.
|
|
104
197
|
|
|
105
198
|
### Hierarchy (verified computed values)
|
|
106
199
|
|
|
@@ -214,8 +307,8 @@ What distinguishes SOCAR from other Korean transportation apps (Kakao Mobility's
|
|
|
214
307
|
|
|
215
308
|
---
|
|
216
309
|
|
|
217
|
-
**Verified:** 2026-
|
|
218
|
-
**Tier 1 sources:**
|
|
310
|
+
**Verified:** 2026-07-12 (omd:migrate)
|
|
311
|
+
**Tier 1 sources:** https://www.socar.kr/ ; https://www.socar.kr/service ; https://www.socar.kr/guide ; https://design.socar.kr/ ; https://www.socar.kr/fare
|
|
219
312
|
- `https://www.socar.kr/` — live computed-style inspect (Pretendard family, `#354153` body, `#e5e8ef` borders, `#f2f3f8` input fill, `#b4bbcb` placeholder, 12/14/16px radii, `rgba(0,0,0,0.1) 0 4px 8px` card shadow, footer `#f5f5f5`, H1 26/700, H2 22/700, H3 16/600, nav 16/600)
|
|
220
313
|
- `https://design.socar.kr/` — SOCAR Brand Center, navigated (SPA shell only via static fetch; live inspect of the booking flow's primary CTA could not be completed in this session because a shared browser session bounced between unrelated tabs after the first inspection)
|
|
221
314
|
|
|
@@ -227,7 +320,7 @@ What distinguishes SOCAR from other Korean transportation apps (Kakao Mobility's
|
|
|
227
320
|
- `https://tech.socarcorp.kr/design/2020/06/23/socar-design-system-01.html` — SOCAR FRAME series #1 (process narrative; no hex specifics)
|
|
228
321
|
- `https://tech.socarcorp.kr/fe/2026/02/23/socar-frame2-web.html` — SOCAR FRAME 2.0 web rollout (system architecture; no token table)
|
|
229
322
|
|
|
230
|
-
**Conflicts unresolved:**
|
|
323
|
+
**Conflicts unresolved:** none
|
|
231
324
|
- Brand-document typefaces (Sandoll Gothic Neo2 / Avenir) vs. actual web fonts (Pretendard / PretendardVariable). Treated as intentional: brand print system uses the licensed faces; the public web substitutes Pretendard. Documented in §3.
|
|
232
325
|
- Exact SOCAR Blue hex not publicly published. §1–§2 reference the color by its brand name; §9 lists it as "SOCAR Blue (brand-published hex pending — use Brand Center reference)" rather than guess.
|
|
233
326
|
- SOCAR FRAME 2.0 component-level tokens (button height variants, dark-mode palette) live behind the internal SOCAR Frame docs and were not extracted in this run.
|