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
|
@@ -4,334 +4,223 @@ name: Upbit
|
|
|
4
4
|
country: KR
|
|
5
5
|
category: fintech
|
|
6
6
|
homepage: "https://upbit.com"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#0062df"
|
|
8
8
|
logo:
|
|
9
9
|
type: favicon
|
|
10
10
|
slug: "https://www.google.com/s2/favicons?domain=upbit.com&sz=256"
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-13"
|
|
12
12
|
omd: "0.1"
|
|
13
|
+
verification_v2:
|
|
14
|
+
schema: 2
|
|
15
|
+
checked: "2026-07-13"
|
|
16
|
+
surfaces:
|
|
17
|
+
- { id: marketing-home, kind: marketing, url: "https://www.upbit.com/home", inspected: "2026-07-13" }
|
|
18
|
+
- { id: exchange, kind: product, url: "https://www.upbit.com/exchange?code=CRIX.UPBIT.KRW-BTC", inspected: "2026-07-13" }
|
|
19
|
+
- { id: support-notice, kind: support, url: "https://www.upbit.com/service_center/notice", inspected: "2026-07-13" }
|
|
20
|
+
sources:
|
|
21
|
+
- { id: home-live, kind: product-surface, url: "https://www.upbit.com/home", captured: "2026-07-13" }
|
|
22
|
+
- { id: exchange-live, kind: product-surface, url: "https://www.upbit.com/exchange?code=CRIX.UPBIT.KRW-BTC", captured: "2026-07-13" }
|
|
23
|
+
- { id: notice-live, kind: product-surface, url: "https://www.upbit.com/service_center/notice", captured: "2026-07-13" }
|
|
24
|
+
- { id: developer-center, kind: official-doc, url: "https://global-docs.upbit.com/", captured: "2026-07-13" }
|
|
25
|
+
- { id: sdk-license, kind: license, url: "https://docs.upbit.com/kr/page/upbit_developer_sdk_license", captured: "2026-07-13" }
|
|
26
|
+
- { id: roboto-license, kind: license, url: "https://github.com/googlefonts/roboto-2/blob/main/LICENSE", captured: "2026-07-13" }
|
|
27
|
+
- { id: noto-license, kind: license, url: "https://notofonts.github.io/noto-docs/website/use/", captured: "2026-07-13" }
|
|
28
|
+
claims:
|
|
29
|
+
"tokens.colors.accent": &exchange { surface_id: exchange, source_id: exchange-live, method: computed-style, captured: "2026-07-13" }
|
|
30
|
+
"tokens.colors.accent-deep": &home { surface_id: marketing-home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
|
|
31
|
+
"tokens.colors.rise": *exchange
|
|
32
|
+
"tokens.colors.fall": *exchange
|
|
33
|
+
"tokens.colors.ink": *exchange
|
|
34
|
+
"tokens.colors.body": *home
|
|
35
|
+
"tokens.colors.muted": *home
|
|
36
|
+
"tokens.colors.border": *exchange
|
|
37
|
+
"tokens.colors.surface": *exchange
|
|
38
|
+
"tokens.colors.canvas": *home
|
|
39
|
+
"tokens.colors.control": *exchange
|
|
40
|
+
"tokens.colors.disabled": ¬ice { surface_id: support-notice, source_id: notice-live, method: computed-style, captured: "2026-07-13" }
|
|
41
|
+
"tokens.typography.body.size": *home
|
|
42
|
+
"tokens.typography.body.weight": *home
|
|
43
|
+
"tokens.typography.body.lineHeight": *home
|
|
44
|
+
"tokens.typography.body.use": *home
|
|
45
|
+
"tokens.typography.dense.size": *exchange
|
|
46
|
+
"tokens.typography.dense.weight": *exchange
|
|
47
|
+
"tokens.typography.dense.lineHeight": *exchange
|
|
48
|
+
"tokens.typography.dense.use": *exchange
|
|
49
|
+
"tokens.spacing.control-inline": *exchange
|
|
50
|
+
"tokens.rounded.square": *exchange
|
|
51
|
+
"tokens.rounded.control": *exchange
|
|
52
|
+
"tokens.components.quick-fill.type": *exchange
|
|
53
|
+
"tokens.components.quick-fill.bg": *exchange
|
|
54
|
+
"tokens.components.quick-fill.fg": *exchange
|
|
55
|
+
"tokens.components.quick-fill.border": *exchange
|
|
56
|
+
"tokens.components.quick-fill.radius": *exchange
|
|
57
|
+
"tokens.components.quick-fill.padding": *exchange
|
|
58
|
+
"tokens.components.quick-fill.height": *exchange
|
|
59
|
+
"tokens.components.quick-fill.font": *exchange
|
|
60
|
+
"tokens.components.quick-fill.use": *exchange
|
|
61
|
+
conflicts: []
|
|
13
62
|
tokens:
|
|
14
|
-
source:
|
|
15
|
-
extracted: "2026-
|
|
63
|
+
source: live-extract
|
|
64
|
+
extracted: "2026-07-13"
|
|
65
|
+
note: "Observed public marketing, exchange, and service-center surfaces only; no authenticated application or documentation-chrome token is inferred."
|
|
16
66
|
colors:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
primary-darker: "#003597"
|
|
67
|
+
accent: "#0062df"
|
|
68
|
+
accent-deep: "#003597"
|
|
20
69
|
rise: "#dd3c44"
|
|
21
70
|
fall: "#1375ec"
|
|
22
|
-
|
|
71
|
+
ink: "#1a2434"
|
|
23
72
|
body: "#333333"
|
|
24
|
-
muted: "#
|
|
25
|
-
|
|
73
|
+
muted: "#565d6a"
|
|
74
|
+
border: "#d6d8db"
|
|
75
|
+
surface: "#ffffff"
|
|
76
|
+
canvas: "#e9ecf1"
|
|
77
|
+
control: "#f4f5f7"
|
|
26
78
|
disabled: "#8e929b"
|
|
27
|
-
surface-body: "#e9ecf1"
|
|
28
|
-
surface-card: "#ffffff"
|
|
29
|
-
table-header: "#f9fafc"
|
|
30
|
-
table-alt: "#f4f5f7"
|
|
31
|
-
neutral: "#edeef1"
|
|
32
|
-
border: "#bec1c6"
|
|
33
|
-
on-primary: "#ffffff"
|
|
34
79
|
typography:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
header: { size: 11, weight: 400, use: "Table column headers" }
|
|
40
|
-
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 32, xxl: 48, section: 64 }
|
|
41
|
-
rounded: { sm: 4, md: 4, lg: 4, full: 9999 }
|
|
42
|
-
shadow:
|
|
43
|
-
none: "none"
|
|
44
|
-
components:
|
|
45
|
-
button-primary: { type: button, bg: "#0062df", fg: "#ffffff", radius: 4, padding: "0 10px", font: "14px/400", use: "로그인/회원가입 in compact nav, h36" }
|
|
46
|
-
button-hero: { type: button, bg: "#003597", fg: "#ffffff", radius: 4, padding: "0 12px", font: "15px/400", use: "Hero CTA, h44" }
|
|
47
|
-
button-secondary: { type: button, bg: "#edeef1", fg: "#1a2434", radius: 4, padding: "0 10px", font: "14px/400", use: "Paired secondary action, h36" }
|
|
48
|
-
tag-percent: { type: badge, bg: "#ffffff", fg: "#1a2434", radius: 4, padding: "0 8px 1px", font: "12px/400", use: "Quick-fill 10/25/50/100%; 1px #bec1c6 border" }
|
|
49
|
-
cell-rise: { type: card, bg: "#ffffff", fg: "#dd3c44", radius: 0, padding: "4.5px 4px", font: "12px/400", use: "상승 가격 셀 / 매수호가 tint" }
|
|
50
|
-
cell-fall: { type: card, bg: "#ffffff", fg: "#1375ec", radius: 0, padding: "4.5px 4px", font: "12px/400", use: "하락 가격 셀 / 매도호가 tint" }
|
|
51
|
-
header-row: { type: card, bg: "#f9fafc", fg: "#666666", radius: 0, padding: "0 14px", font: "11px/400", use: "Column heads, h30, bottom 1px #edeef1" }
|
|
52
|
-
segment: { type: tab, bg: "#ffffff", fg: "#333333", radius: 0, padding: "0", font: "12px/400", use: "KO/EN locale switch; 1px #bec1c6 border", active: "selected bg #f4f5f7" }
|
|
53
|
-
nav: { type: tab, bg: "#ffffff", fg: "#1a2434", radius: 0, padding: "0 20px", font: "15px/400", use: "Persistent top-bar, h80, bottom 1px #edeef1" }
|
|
80
|
+
body: { size: 14, weight: 400, lineHeight: "21px", use: "Observed public home/list body text" }
|
|
81
|
+
dense: { size: 12, weight: 400, lineHeight: "normal", use: "Observed exchange labels and quick-fill control text" }
|
|
82
|
+
spacing: { control-inline: 8 }
|
|
83
|
+
rounded: { square: 0, control: 4 }
|
|
54
84
|
components_harvested: true
|
|
85
|
+
components:
|
|
86
|
+
quick-fill: { type: badge, bg: "#ffffff", fg: "#1a2434", border: "1px solid #d6d8db", radius: "4px", padding: "0px 8px 1px", height: "28px", font: "12px / 400", use: "Exchange percentage quick-fill link; surface-2::[data-omd-capture=\"139\"]" }
|
|
55
87
|
---
|
|
56
88
|
|
|
57
|
-
# Upbit —
|
|
58
|
-
|
|
59
|
-
> Note: brand assets and tokens captured here are documented **reference-only** for design pedagogy under the OmD project. No taglines are reproduced verbatim. Voice characterization in §10–11 is a fresh synthesis of observable surface behavior and public corporate sources; it is not lifted from Upbit/Dunamu copy.
|
|
89
|
+
# Upbit — Design Reference
|
|
60
90
|
|
|
61
91
|
## 1. Visual Theme & Atmosphere
|
|
62
92
|
|
|
63
|
-
Upbit is
|
|
93
|
+
Upbit is a digital-asset service operated by Dunamu. Its public web surface makes market information the visual priority: the reverified exchange page exposes trading-oriented controls and dense data regions, while the home and service-center notice pages retain the same light, low-radius treatment around them. The current Developer Center describes APIs for prices, order books, trading, balances, deposits, withdrawals, and real-time streaming; that public product framing helps explain why compact numeric controls and restrained surface colors dominate the captured pages. The observable identity is not a universal visual system: it is a disciplined public-web layer in which blue is used for actions and down-market data, red for up-market data, and white panels sit on a pale gray canvas. This record keeps that exchange, marketing, support, documentation, and authenticated-product boundary explicit.
|
|
64
94
|
|
|
65
|
-
|
|
95
|
+
- **Public-source boundary:** the supplied capture contains `https://www.upbit.com/home`, the public exchange URL, and `https://www.upbit.com/service_center/notice`. It contains no authenticated application screen and no Developer Center chrome.
|
|
96
|
+
- **Geometry:** the repeated raw radii are 0px and 4px; the captured quick-fill control is the only retained component pattern.
|
|
97
|
+
- **No state inference:** the bundle has `interactionCount: 0` and no observed interaction kind. Hover, focus, pressed, disabled, validation, menu, modal, toast, and transition claims are omitted.
|
|
66
98
|
|
|
67
|
-
## 2.
|
|
99
|
+
## 2. Color & surface roles
|
|
68
100
|
|
|
69
|
-
|
|
70
|
-
- **Exchange surface**: information-dense grid — left market list, center chart + orderbook, right order panel — all driven by tables, not cards.
|
|
71
|
-
- **Marketing surface (`/home`)**: hero band → market-summary table → product modules (스테이킹, 코인모으기) → CTA band. Light surface (`#E9ECF1` page bg, white panels).
|
|
72
|
-
- **Density rule**: row height 45px on tradable lists, 30px on column headers. Vertical rhythm in 4–8px increments.
|
|
73
|
-
- **Color is structural, not decorative**: tinted row backgrounds (rgba 8% alpha of rise/fall hue) communicate direction without competing with the numerals.
|
|
101
|
+
The following values are live computed observations, not a published Upbit token set.
|
|
74
102
|
|
|
75
|
-
|
|
103
|
+
| Observed role | Value | Evidence boundary |
|
|
104
|
+
|---|---:|---|
|
|
105
|
+
| Action/accent | `#0062DF` | visible text, border, and background on captured public surfaces; not assigned a universal semantic role |
|
|
106
|
+
| Deeper public-blue fill | `#003597` | background on home and exchange; no reusable CTA component is inferred |
|
|
107
|
+
| Rise market value | `#DD3C44` | exchange-only visible text/border observation |
|
|
108
|
+
| Fall market value | `#1375EC` | exchange-only visible text/border observation |
|
|
109
|
+
| Primary ink | `#1A2434` | public controls and text |
|
|
110
|
+
| Body / muted text | `#333333` / `#565D6A` | repeated public text observations |
|
|
111
|
+
| Hairline control border | `#D6D8DB` | quick-fill and service-center controls |
|
|
112
|
+
| White surface / pale canvas | `#FFFFFF` / `#E9ECF1` | repeated public panel and page surfaces |
|
|
113
|
+
| Control fill / disabled text | `#F4F5F7` / `#8E929B` | observed public values; neither establishes a behavior state |
|
|
76
114
|
|
|
77
|
-
|
|
115
|
+
The exchange-only red/blue pair is documented as a local market display observation. It is not generalized into an accessibility, locale, or cross-market rule without a first-party specification.
|
|
78
116
|
|
|
79
|
-
|
|
80
|
-
|---|---|---|
|
|
81
|
-
| `brand.primary` | `#1375EC` | Primary brand blue — nav highlight, KRW pair tint |
|
|
82
|
-
| `brand.primaryDeep` | `#0062DF` | Primary CTA bg (Login / 회원가입) |
|
|
83
|
-
| `brand.primaryDarker` | `#003597` | Hero CTA bg (large) |
|
|
84
|
-
| `semantic.rise` | `#DD3C44` | ▲ 상승 / 매수호가 (KR: red = up) |
|
|
85
|
-
| `semantic.riseSoft` | `rgba(221,60,68,0.08)` | rise row tint |
|
|
86
|
-
| `semantic.fall` | `#1375EC` | ▼ 하락 / 매도호가 (KR: blue = down) |
|
|
87
|
-
| `semantic.fallSoft` | `rgba(19,117,236,0.08)` | fall row tint |
|
|
88
|
-
| `text.primary` | `#1A2434` | headings, nav |
|
|
89
|
-
| `text.body` | `#333333` | default body |
|
|
90
|
-
| `text.muted` | `#666666` | table header / labels |
|
|
91
|
-
| `text.subtle` | `#565D6A` | footer / utility |
|
|
92
|
-
| `text.disabled` | `#8E929B` | placeholder |
|
|
93
|
-
| `surface.body` | `#E9ECF1` | page background |
|
|
94
|
-
| `surface.card` | `#FFFFFF` | card / panel |
|
|
95
|
-
| `surface.tableHeader` | `#F9FAFC` | table header / alt row |
|
|
96
|
-
| `surface.tableAlt` | `#F4F5F7` | alt row / segment unselected |
|
|
97
|
-
| `surface.neutral` | `#EDEEF1` | secondary button |
|
|
117
|
+
## 3. Typography & font evidence
|
|
98
118
|
|
|
99
|
-
|
|
119
|
+
### Evidence classes
|
|
100
120
|
|
|
101
|
-
|
|
121
|
+
- **Live computed system use:** visible public text resolves most often to `Roboto, "Noto Sans KR", sans-serif, AppleSDGothicNeo-Regular, "Malgun Gothic", Dotum, sans-serif`; the collector classifies `Roboto` as a **system** family with high confidence and 744 visible uses. Its `FontFaceSet` record also lists Google-hosted Roboto sources. This verifies a current resolved public runtime family, not an Upbit-owned brand typeface, so no `tokens.typography.family` is promoted.
|
|
122
|
+
- **Declared-only assets:** `Noto Sans KR` has 128 listed source URLs but zero visible uses in the supplied bundle; `Droid Sans`, `Roboto Condensed`, and the TradingView-bundled `EuclidCircular` are likewise declared with zero visible uses. They are not UI-family tokens and must not be substituted into specimens.
|
|
123
|
+
- **Other system results:** `Arial` and `Helvetica` occur only a handful of times and are classified system; neither is a brand claim.
|
|
124
|
+
- **Official font/licence context:** the Google Fonts Roboto repository carries Apache License 2.0; Noto’s official documentation says Noto fonts use SIL OFL 1.1. These third-party font licences do not grant rights to Upbit marks, UI assets, or an Upbit brand font.
|
|
125
|
+
- **Upbit licence boundary:** the Upbit Developer SDK licence applies to the SDK materials, says it is not an open-source licence, and expressly does not grant rights to Dunamu trademarks, logos, names, or brands. It is not a font licence or a public design-system specification.
|
|
102
126
|
|
|
103
|
-
###
|
|
127
|
+
### Measured public text roles
|
|
104
128
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
- Radius: 4px
|
|
110
|
-
- Padding: 0 10px
|
|
111
|
-
- Height: 36px
|
|
112
|
-
- Font: 14px / 400 / Roboto+Noto Sans KR
|
|
113
|
-
- Use: 로그인 / 회원가입 in compact nav
|
|
114
|
-
|
|
115
|
-
**Primary — Hero**
|
|
116
|
-
- Background: `#003597`
|
|
117
|
-
- Text: `#FFFFFF`
|
|
118
|
-
- Border: none
|
|
119
|
-
- Radius: 4px
|
|
120
|
-
- Padding: 0 12px
|
|
121
|
-
- Height: 44px
|
|
122
|
-
- Font: 15px / 400 / Roboto+Noto Sans KR
|
|
123
|
-
- Use: 거래소 둘러보기 / 회원가입 (hero CTA)
|
|
129
|
+
| Role | Resolved family | Size | Weight | Line height | Surface |
|
|
130
|
+
|---|---|---:|---:|---:|---|
|
|
131
|
+
| Public list body | Roboto system stack | 14px | 400 | 21px | home, exchange, notice |
|
|
132
|
+
| Dense exchange/control text | Roboto system stack | 12px | 400 | normal | exchange |
|
|
124
133
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
-
|
|
128
|
-
- Border: none
|
|
129
|
-
- Radius: 4px
|
|
130
|
-
- Padding: 0 10px
|
|
131
|
-
- Height: 36px
|
|
132
|
-
- Font: 14px / 400 / Roboto+Noto Sans KR
|
|
133
|
-
- Use: paired secondary action (회원가입 small variant)
|
|
134
|
+
## 4. Components
|
|
135
|
+
|
|
136
|
+
### Exchange quick-fill control
|
|
134
137
|
|
|
135
|
-
**
|
|
138
|
+
**Observed default**
|
|
136
139
|
- Background: `#FFFFFF`
|
|
137
140
|
- Text: `#1A2434`
|
|
138
|
-
- Border: 1px solid
|
|
141
|
+
- Border: `1px solid #D6D8DB`
|
|
139
142
|
- Radius: 4px
|
|
140
|
-
- Padding:
|
|
143
|
+
- Padding: 0px 8px 1px
|
|
141
144
|
- Height: 28px
|
|
142
|
-
- Font: 12px / 400
|
|
143
|
-
- Use:
|
|
144
|
-
|
|
145
|
-
### Table cell — price / change
|
|
146
|
-
|
|
147
|
-
**Rise (▲ up)**
|
|
148
|
-
- Background: `rgba(221, 60, 68, 0.08)`
|
|
149
|
-
- Text: `#DD3C44`
|
|
150
|
-
- Border: none
|
|
151
|
-
- Radius: 0
|
|
152
|
-
- Padding: 4.5px 4px
|
|
153
|
-
- Height: 45px
|
|
154
|
-
- Font: 12px / 400
|
|
155
|
-
- Use: 상승 가격 셀 / 매수호가 cell tint
|
|
156
|
-
|
|
157
|
-
**Fall (▼ down)**
|
|
158
|
-
- Background: `rgba(19, 117, 236, 0.08)`
|
|
159
|
-
- Text: `#1375EC`
|
|
160
|
-
- Border: none
|
|
161
|
-
- Radius: 0
|
|
162
|
-
- Padding: 4.5px 4px
|
|
163
|
-
- Height: 45px
|
|
164
|
-
- Font: 12px / 400
|
|
165
|
-
- Use: 하락 가격 셀 / 매도호가 cell tint
|
|
166
|
-
|
|
167
|
-
**Header row**
|
|
168
|
-
- Background: `#F9FAFC`
|
|
169
|
-
- Text: `#666666`
|
|
170
|
-
- Border: bottom 1px `#EDEEF1`
|
|
171
|
-
- Radius: 0
|
|
172
|
-
- Padding: 0 14px
|
|
173
|
-
- Height: 30px
|
|
174
|
-
- Font: 11px / 400
|
|
175
|
-
- Use: 체결가 / 현재가 / 전일대비 / 거래대금 column heads
|
|
176
|
-
|
|
177
|
-
### Segment switch
|
|
178
|
-
|
|
179
|
-
**Locale segment (KO / EN)**
|
|
180
|
-
- Background (selected): `#F4F5F7`
|
|
181
|
-
- Background (unselected): `#FFFFFF`
|
|
182
|
-
- Text: `#333333`
|
|
183
|
-
- Border: 1px solid `#BEC1C6`
|
|
184
|
-
- Radius: 0
|
|
185
|
-
- Padding: 0
|
|
186
|
-
- Height: 28px
|
|
187
|
-
- Font: 12px / 400
|
|
188
|
-
- Use: top-right utility row
|
|
145
|
+
- Font: 12px / 400 / resolved Roboto system stack
|
|
146
|
+
- Use: percentage quick-fill link on the public exchange; evidence `surface-2::[data-omd-capture="139"]`, class `percentage-button css-1vvi88j`
|
|
189
147
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
**Top nav**
|
|
193
|
-
- Background: `#FFFFFF`
|
|
194
|
-
- Text: `#1A2434`
|
|
195
|
-
- Border: bottom 1px `#EDEEF1`
|
|
196
|
-
- Radius: 0
|
|
197
|
-
- Padding: 0 20px
|
|
198
|
-
- Height: 80px (60px primary + 20px utility)
|
|
199
|
-
- Font: 15px / 400 (primary items)
|
|
200
|
-
- Use: persistent top-bar, fixed 1400px inner width
|
|
148
|
+
The collector reports this as five medium-confidence occurrences on the exchange page. It captures a static default only. No hover, focus, pressed, disabled, validation, or size variant is documented because the top-level interaction record is empty.
|
|
201
149
|
|
|
202
150
|
---
|
|
203
|
-
**Verified:** 2026-
|
|
204
|
-
**Tier 1 sources:**
|
|
205
|
-
**Tier 2 sources:** `getdesign.md/upbit`
|
|
206
|
-
**
|
|
207
|
-
**Conflicts unresolved:** none.
|
|
208
|
-
|
|
209
|
-
## 5. Iconography
|
|
151
|
+
**Verified:** 2026-07-13
|
|
152
|
+
**Tier 1 sources:** `https://www.upbit.com/home` (public marketing), `https://www.upbit.com/exchange?code=CRIX.UPBIT.KRW-BTC` (public exchange), `https://www.upbit.com/service_center/notice` (public support/notice), `https://global-docs.upbit.com/` (official Developer Center), `https://docs.upbit.com/kr/page/upbit_developer_sdk_license` (official SDK licence)
|
|
153
|
+
**Tier 2 sources:** `https://getdesign.md/upbit` (attempted; built-in web open returned an internal/safe-open failure), `https://styles.refero.design/?q=upbit` (attempted; built-in web open returned an internal/safe-open failure); no Upbit record was returned by built-in web search for either catalog.
|
|
154
|
+
**Conflicts unresolved:** none
|
|
210
155
|
|
|
211
|
-
|
|
212
|
-
- **Coin marks** — third-party brand glyphs (BTC, ETH, XRP, …) shown at 16–20px monochrome or color, ID-only role; never decorative.
|
|
213
|
-
- **UI glyphs** — flat 1.5px stroke, 16px frame, sparse: chevron, sort, favorite (★ outline → solid), info (i), close (×). No bespoke icon family; the visual contract is "stay invisible until needed."
|
|
156
|
+
The prior prose-derived token block, 2025 date stamp, broad navigation/hero/table component inventory, motion timings, contrast results, persona profiles, and behavioral state catalogue were not supported by the supplied 2026 collector and are removed rather than refreshed by assumption.
|
|
214
157
|
|
|
215
|
-
|
|
158
|
+
## 5. Elevation
|
|
216
159
|
|
|
217
|
-
|
|
160
|
+
The retained exchange quick-fill sample has `box-shadow: none`. No general elevation scale is claimed from one control or from unqualified article containers.
|
|
218
161
|
|
|
219
|
-
|
|
162
|
+
## 6. Imagery & illustration
|
|
220
163
|
|
|
221
|
-
|
|
164
|
+
The supplied evidence is a computed-style/component capture and does not establish a reusable image, illustration, crop, overlay, or asset-licence rule. The public marketing surface remains separate from the exchange UI; neither is used to infer an authenticated-product image system.
|
|
222
165
|
|
|
223
|
-
|
|
224
|
-
- Row blink (≈150ms ease-out) when a new trade prints — opacity 0 → 1 on the rise/fall tint.
|
|
225
|
-
- Hover affordance on rows: tint shift to `#F4F5F7` ≈100ms linear.
|
|
226
|
-
- Nav highlight underline: 200ms ease-out.
|
|
166
|
+
## 7. Iconography
|
|
227
167
|
|
|
228
|
-
No
|
|
168
|
+
No named icon family, stroke specification, icon-size scale, or reusable icon component is established in the retained evidence. Coin symbols, glyphs, and asset files are intentionally not promoted from incidental page content.
|
|
229
169
|
|
|
230
|
-
## 8.
|
|
170
|
+
## 8. Motion
|
|
231
171
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
CTA labels are nouns or noun-phrases, not imperatives: 로그인 · 회원가입 · 거래소 둘러보기 · 직접입력. No exclamation marks. No emoji.
|
|
172
|
+
No duration, easing, transition, data-update animation, scroll behavior, or interactive sequence was captured. Static CSS classes and one rendered default do not establish a motion contract.
|
|
235
173
|
|
|
236
174
|
## 9. Accessibility & locale
|
|
237
175
|
|
|
238
|
-
-
|
|
239
|
-
-
|
|
240
|
-
-
|
|
241
|
-
- Korean font stack falls back through legacy IE-era families (Dotum / 돋움) — chain not pruned.
|
|
242
|
-
|
|
243
|
-
---
|
|
176
|
+
- The public capture supplies color and geometry values, not an accessibility audit; contrast, keyboard support, focus indication, and target-size conformance are not claimed here.
|
|
177
|
+
- The current public text stack includes Korean-capable fallback families, but the capture does not establish a locale typography policy or cross-market color convention.
|
|
178
|
+
- Implementations should provide accessible states without presenting those states as observed Upbit behavior.
|
|
244
179
|
|
|
245
180
|
## 10. Voice & Tone
|
|
246
181
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
| Do | Don't |
|
|
250
|
-
|---|---|
|
|
251
|
-
| Use nouns for CTAs (`로그인`, `회원가입`) | Use imperatives or exclamation (`지금 시작하세요!`) |
|
|
252
|
-
| State the rule before the action ("최소 5,000원부터 매수") | Inflate ("쉽고 빠르게!") |
|
|
253
|
-
| Show the number first, label second | Lead with brand voice on a trading screen |
|
|
254
|
-
| Mix `~합니다` (notice) and `~해요` (product) by surface | Use casual emoji-laden tone on price surfaces |
|
|
255
|
-
|
|
256
|
-
**Voice samples** (illustrative — characterizing the observed register, not lifting copy):
|
|
257
|
-
1. (notice) "5월 15일 00:00부터 해당 마켓 거래 지원이 종료됩니다." — straight declarative, time-first.
|
|
258
|
-
2. (product) "코인모으기로 매주 정해진 금액만큼 자동 매수해요." — `~해요` form, mechanism named.
|
|
259
|
-
3. (CTA) "거래소 둘러보기" — noun phrase, no urgency word.
|
|
182
|
+
No first-party voice or editorial guideline was collected. The public Korean product, support, and Developer Center surfaces show different functional registers, but this evidence is insufficient to prescribe a reusable brand voice. Avoid inventing customer promises, urgency claims, or copied copy under the Upbit name.
|
|
260
183
|
|
|
261
184
|
## 11. Brand Narrative
|
|
262
185
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
Dunamu's broader portfolio (StockPlus for KOSPI/KOSDAQ retail, Quotation Corp for B2B market data) signals the company's center of gravity — they are a **market-data company first**, an exchange operator second. That shows in the UI: the table is canon, the brand is wallpaper.
|
|
186
|
+
The official Developer Center identifies Upbit as a Dunamu service and presents market-data, exchange, and real-time APIs for strategic trading. Its Korean reference footer identifies Dunamu and a registered virtual-asset-business number. A 2022 Dunamu/Upbit conference report records the then-current statement that Upbit would focus on regulation compliance and investor protections; it is retained as dated corporate context, not as proof of a present visual token or product workflow.
|
|
266
187
|
|
|
267
|
-
|
|
188
|
+
No first-party history, rebrand, or public brand-system source was found in the supplied collector evidence. This reference therefore does not create an origin story or infer a private product strategy.
|
|
268
189
|
|
|
269
190
|
## 12. Principles
|
|
270
191
|
|
|
271
|
-
|
|
272
|
-
*UI implication:* table primitives outrank card primitives. Never wrap a price in a decorative container.
|
|
273
|
-
|
|
274
|
-
2. **Direction must be readable at a glance — and in the local convention.**
|
|
275
|
-
*UI implication:* red = up, blue = down (KR/JP/TW). Tint at 8% alpha so hue communicates without overpowering the numeral.
|
|
192
|
+
The following are evidence-bounded reference implications, not quoted Upbit principles.
|
|
276
193
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
4. **Procedural before persuasive.**
|
|
281
|
-
*UI implication:* CTAs name what happens (`로그인`, `직접입력`), they don't sell it. Reserve persuasive copy for marketing surfaces only.
|
|
282
|
-
|
|
283
|
-
5. **Locale-correct or wrong.**
|
|
284
|
-
*UI implication:* Korean stack ships first, English is a sibling segment — not a translation layer. Sentence-final forms by surface (`~합니다` notice / `~해요` product) are non-negotiable.
|
|
194
|
+
1. **Keep market data local to its surface.** The red `#DD3C44` and blue `#1375EC` observations come from the exchange only. *UI implication:* do not reuse them as universal marketing, error, or success tokens.
|
|
195
|
+
2. **Keep controls compact only where measured.** The retained quick-fill control is 28px high with a 4px radius. *UI implication:* do not extrapolate that geometry into navigation, forms, or authenticated trading flows.
|
|
196
|
+
3. **Keep domains separate.** Marketing home, exchange, support notice, Developer Center, SDK licence, and unobserved authenticated product each have different evidence roles. *UI implication:* do not combine them into a fictional public design system.
|
|
285
197
|
|
|
286
198
|
## 13. Personas
|
|
287
199
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
- **혜진, 34, 직장인 (서울)** — KOSPI 5년 차, 2024 비트코인 ETF 뉴스 후 입문. KRW 마켓 위주, 매수는 코인모으기 자동, 매도는 수동. UI 신뢰가 입문 결정의 80%였다고 말함.
|
|
291
|
-
- **준호, 28, 개발자 (판교)** — 알트 트레이더, 호가창 + 차트 +체결창 3 패널 항상 띄움. 화면 정보 밀도가 만족도의 1순위. 모바일은 보조.
|
|
292
|
-
- **선영, 41, 자영업 (대구)** — 보유 종목 5개 이하, 주 1회 진입. 푸시 알림 + 알기 쉬운 표가 핵심. 신용카드 결제 없이 은행 연동만 사용.
|
|
200
|
+
[FILL IN] No first-party user research, audience segmentation, or persona material was collected for this update. No fictional names, demographics, jobs, or motivations are supplied.
|
|
293
201
|
|
|
294
202
|
## 14. States
|
|
295
203
|
|
|
296
|
-
|
|
297
|
-
|---|---|
|
|
298
|
-
| Empty | 보유 자산 없을 때: 좌측 정렬 안내문 + 입금 안내 link. 일러스트 없음. |
|
|
299
|
-
| Loading | 표 셀 단위 skeleton bar (h≈14, bg `#EDEEF1`); 페이지 단위 spinner 없음. |
|
|
300
|
-
| Error — recoverable | inline 빨간 helper text `#DD3C44` 12px under input; CTA disabled. |
|
|
301
|
-
| Error — network | top sticky bar `#FFE7E8` bg, `#DD3C44` text, 재시도 link. |
|
|
302
|
-
| Success | toast 하단 우측, h≈40, bg `#FFFFFF`, border 1px `#BEC1C6`, 3s auto-dismiss. |
|
|
303
|
-
| Skeleton | row-level only on tables (price/volume cells), 1.2s shimmer linear-gradient. |
|
|
304
|
-
| Disabled | `#8E929B` text on `#F4F5F7` bg; button opacity unchanged (color-only signal). |
|
|
204
|
+
No loading, empty, success, error, disabled, focus, validation, menu, dialog, toast, or tab-transition state is documented. The supplied collector has zero interaction records; adding a behavior table would fabricate unobserved variants.
|
|
305
205
|
|
|
306
206
|
## 15. Motion & Easing
|
|
307
207
|
|
|
308
|
-
|
|
309
|
-
- **Easing**: `ease-out` for entrances and value changes; `linear` for shimmer; no spring.
|
|
310
|
-
- **Motion rules**:
|
|
311
|
-
1. Never animate a price field's own typography — only its background tint.
|
|
312
|
-
2. No page transitions on the exchange surface; navigation is instantaneous (state-driven).
|
|
313
|
-
3. Modal enter from `translateY(8px) opacity:0` → identity over 200ms ease-out. Exit reverses, 250ms.
|
|
314
|
-
4. Row-print blink: tint fades in 150ms then holds for 800ms before easing out 400ms. The 800ms hold is what makes a moving market legible.
|
|
315
|
-
|
|
208
|
+
No motion or easing values were captured. Preserve this absence instead of assigning default durations or curves.
|
|
316
209
|
|
|
317
210
|
## 16. Do's and Don'ts
|
|
318
211
|
|
|
319
212
|
### Do
|
|
320
|
-
- Lead with tables, not cards — make the data the hero and the chrome the frame, with row heights of 45px on tradable lists and 30px on column headers
|
|
321
|
-
- Encode direction in the Korean convention: red `#DD3C44` for 상승 (up) and blue `#1375EC` for 하락 (down), and invert to green-up/red-down only when porting to US/EU markets
|
|
322
|
-
- Communicate row direction with an 8% alpha tint (`rgba(221,60,68,0.08)` rise / `rgba(19,117,236,0.08)` fall) so the hue supports rather than overpowers the numeral
|
|
323
|
-
- Keep buttons flat and tight — 4px radius, no border, white text, scaling the blue by stakes: `#0062DF` for nav CTAs, `#003597` for the 44px hero CTA
|
|
324
|
-
- Label CTAs as nouns or noun-phrases (로그인, 회원가입, 거래소 둘러보기, 직접입력) and split sentence-final forms by surface — `~합니다` on notices, `~해요` on product modules
|
|
325
|
-
- Hold motion to the duration scale (100ms hover / 150ms row blink / 200ms nav / 250ms modal out) and animate only a price cell's background tint, never its typography
|
|
326
213
|
|
|
327
|
-
|
|
328
|
-
-
|
|
329
|
-
-
|
|
330
|
-
-
|
|
331
|
-
-
|
|
332
|
-
- Use emoji, exclamation marks, or a startup-slang tone on price surfaces — the register stays composed and procedural
|
|
333
|
-
- Treat English as a translation layer — ship the Korean stack first with EN as a sibling KO/EN segment, and don't prune the Korean fallback chain to legacy families like Dotum / 돋움
|
|
214
|
+
- Use the observed public exchange quick-fill treatment only with its recorded `#FFFFFF`, `#1A2434`, `#D6D8DB`, 4px-radius, and 28px-height provenance.
|
|
215
|
+
- Keep `#DD3C44` and `#1375EC` bounded to their captured exchange-market context.
|
|
216
|
+
- Treat Roboto as an observed system-resolved runtime family, not an Upbit-owned brand font.
|
|
217
|
+
- Keep marketing, exchange, support, Developer Center, and unobserved authenticated-product claims separated.
|
|
218
|
+
- Record only static defaults when the interaction capture is empty.
|
|
334
219
|
|
|
335
|
-
|
|
220
|
+
### Don't
|
|
336
221
|
|
|
337
|
-
|
|
222
|
+
- Reintroduce the former prose-derived semantic palette or unsupported broad component inventory as current evidence.
|
|
223
|
+
- Render Noto Sans KR, EuclidCircular, Droid Sans, Roboto Condensed, Arial, or Helvetica as a verified Upbit UI-family substitute.
|
|
224
|
+
- Invent hover, focus, pressed, disabled, validation, menu, dialog, toast, state-transition, motion, or accessibility behavior from static markup.
|
|
225
|
+
- Treat the Upbit Developer SDK licence as a licence for UI assets, fonts, logos, or brand use.
|
|
226
|
+
- Infer a documented public design system from the absence of a discovered design-system URL.
|