oh-my-design-cli 1.8.6 → 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 +2761 -85
- 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/airbridge/DESIGN.md +451 -0
- 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/bigin/DESIGN.md +454 -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/buzzvil/DESIGN.md +457 -0
- package/web/references/cafe24/DESIGN.md +472 -0
- 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/codeit/DESIGN.md +470 -0
- 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 +338 -0
- 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/elice/DESIGN.md +445 -0
- 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/furiosaai/DESIGN.md +450 -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/goorm/DESIGN.md +470 -0
- package/web/references/greencar/DESIGN.md +420 -0
- package/web/references/hackle/DESIGN.md +472 -0
- 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/hwahae/DESIGN.md +453 -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/kcd/DESIGN.md +432 -0
- 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/kyobobook/DESIGN.md +445 -0
- package/web/references/lablup/DESIGN.md +474 -0
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lemonbase/DESIGN.md +452 -0
- 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 +242 -0
- 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/moreh/DESIGN.md +437 -0
- 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/neosapience/DESIGN.md +441 -0
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/nota/DESIGN.md +451 -0
- 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/portone/DESIGN.md +446 -0
- 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/queenit/DESIGN.md +432 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/rebellions/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/returnzero/DESIGN.md +460 -0
- 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/saramin/DESIGN.md +465 -0
- 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/shiftee/DESIGN.md +468 -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/solapi/DESIGN.md +483 -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/supertone/DESIGN.md +413 -0
- 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/vuno/DESIGN.md +413 -0
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/weverse/DESIGN.md +437 -0
- 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
|
@@ -1,70 +1,102 @@
|
|
|
1
1
|
---
|
|
2
2
|
id: ohouse
|
|
3
3
|
name: Ohouse
|
|
4
|
+
display_name_kr: 오늘의집
|
|
4
5
|
country: KR
|
|
5
6
|
category: consumer-tech
|
|
6
|
-
homepage: "https://ohou.se"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
homepage: "https://ohou.se/"
|
|
8
|
+
primary_color: "#00a1ff"
|
|
8
9
|
logo:
|
|
9
10
|
type: favicon
|
|
10
|
-
slug: "https://
|
|
11
|
-
verified: "2026-
|
|
11
|
+
slug: "https://ohou.se/favicon.ico"
|
|
12
|
+
verified: "2026-07-13"
|
|
12
13
|
omd: "0.1"
|
|
14
|
+
verification_v2:
|
|
15
|
+
schema: 2
|
|
16
|
+
checked: "2026-07-13"
|
|
17
|
+
surfaces:
|
|
18
|
+
- { id: home, kind: product, url: "https://ohou.se/", inspected: "2026-07-13" }
|
|
19
|
+
- { id: experts, kind: product, url: "https://ohou.se/experts", inspected: "2026-07-13" }
|
|
20
|
+
- { id: customer-center, kind: support, url: "https://ohou.se/customer_center", inspected: "2026-07-13" }
|
|
21
|
+
sources:
|
|
22
|
+
- { id: home-live, kind: product-surface, url: "https://ohou.se/", captured: "2026-07-13" }
|
|
23
|
+
- { id: experts-live, kind: product-surface, url: "https://ohou.se/experts", captured: "2026-07-13" }
|
|
24
|
+
- { id: customer-live, kind: product-surface, url: "https://ohou.se/customer_center", captured: "2026-07-13" }
|
|
25
|
+
- { id: bucketplace-about, kind: official-doc, url: "https://www.bucketplace.com/en/", captured: "2026-07-13" }
|
|
26
|
+
- { id: pretendard-doc, kind: official-doc, url: "https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md", captured: "2026-07-13" }
|
|
27
|
+
- { id: pretendard-license, kind: license, url: "https://github.com/orioncactus/pretendard/blob/main/LICENSE", captured: "2026-07-13" }
|
|
28
|
+
conflicts: []
|
|
29
|
+
claims:
|
|
30
|
+
"tokens.colors.action": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
|
|
31
|
+
"tokens.colors.foreground": *home
|
|
32
|
+
"tokens.colors.body": *home
|
|
33
|
+
"tokens.colors.muted": *home
|
|
34
|
+
"tokens.colors.canvas": *home
|
|
35
|
+
"tokens.colors.hairline": *home
|
|
36
|
+
"tokens.typography.family.ui": *home
|
|
37
|
+
"tokens.typography.display.size": *home
|
|
38
|
+
"tokens.typography.display.weight": *home
|
|
39
|
+
"tokens.typography.display.lineHeight": *home
|
|
40
|
+
"tokens.typography.display.tracking": *home
|
|
41
|
+
"tokens.typography.display.use": *home
|
|
42
|
+
"tokens.typography.body.size": *home
|
|
43
|
+
"tokens.typography.body.weight": *home
|
|
44
|
+
"tokens.typography.body.lineHeight": *home
|
|
45
|
+
"tokens.typography.body.tracking": *home
|
|
46
|
+
"tokens.typography.body.use": *home
|
|
47
|
+
"tokens.typography.body-lg.size": *home
|
|
48
|
+
"tokens.typography.body-lg.weight": *home
|
|
49
|
+
"tokens.typography.body-lg.lineHeight": *home
|
|
50
|
+
"tokens.typography.body-lg.tracking": *home
|
|
51
|
+
"tokens.typography.body-lg.use": *home
|
|
52
|
+
"tokens.typography.action.size": *home
|
|
53
|
+
"tokens.typography.action.weight": *home
|
|
54
|
+
"tokens.typography.action.lineHeight": *home
|
|
55
|
+
"tokens.typography.action.tracking": *home
|
|
56
|
+
"tokens.typography.action.use": *home
|
|
57
|
+
"tokens.typography.compact-action.size": *home
|
|
58
|
+
"tokens.typography.compact-action.weight": *home
|
|
59
|
+
"tokens.typography.compact-action.lineHeight": *home
|
|
60
|
+
"tokens.typography.compact-action.tracking": *home
|
|
61
|
+
"tokens.typography.compact-action.use": *home
|
|
62
|
+
"tokens.spacing.xs": *home
|
|
63
|
+
"tokens.spacing.sm": *home
|
|
64
|
+
"tokens.spacing.md": *home
|
|
65
|
+
"tokens.spacing.lg": *home
|
|
66
|
+
"tokens.rounded.square": *home
|
|
67
|
+
"tokens.rounded.sm": *home
|
|
68
|
+
"tokens.rounded.full": *home
|
|
69
|
+
"tokens.shadow.floating": *home
|
|
70
|
+
"tokens.components.product-list-article.type": *home
|
|
71
|
+
"tokens.components.product-list-article.bg": *home
|
|
72
|
+
"tokens.components.product-list-article.fg": *home
|
|
73
|
+
"tokens.components.product-list-article.radius": *home
|
|
74
|
+
"tokens.components.product-list-article.padding": *home
|
|
75
|
+
"tokens.components.product-list-article.font": *home
|
|
76
|
+
"tokens.components.product-list-article.use": *home
|
|
13
77
|
tokens:
|
|
14
|
-
source:
|
|
15
|
-
extracted: "2026-
|
|
78
|
+
source: live-extract
|
|
79
|
+
extracted: "2026-07-13"
|
|
16
80
|
colors:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
81
|
+
action: "#00a1ff"
|
|
82
|
+
foreground: "#2f3438"
|
|
83
|
+
body: "#424242"
|
|
84
|
+
muted: "#828c94"
|
|
20
85
|
canvas: "#ffffff"
|
|
21
|
-
|
|
22
|
-
blue-light: "#7fd9f5"
|
|
23
|
-
blue-deep: "#0e8fb8"
|
|
24
|
-
sale: "#fa3e3e"
|
|
25
|
-
error: "#e53935"
|
|
26
|
-
success: "#1caf5c"
|
|
27
|
-
warning: "#f5a623"
|
|
28
|
-
info: "#3b82f6"
|
|
29
|
-
star: "#ffb800"
|
|
30
|
-
gray-50: "#fafafa"
|
|
31
|
-
gray-100: "#f5f5f5"
|
|
32
|
-
gray-200: "#eeeeee"
|
|
33
|
-
gray-300: "#dddddd"
|
|
34
|
-
gray-500: "#aaaaaa"
|
|
35
|
-
gray-600: "#888888"
|
|
36
|
-
gray-700: "#555555"
|
|
86
|
+
hairline: "#e0e0e0"
|
|
37
87
|
typography:
|
|
38
|
-
family: {
|
|
39
|
-
display: { size:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
small: { size: 12, weight: 400, lineHeight: 17, use: "Timestamps, fine print" }
|
|
47
|
-
price-lg: { size: 18, weight: 700, lineHeight: 26, tracking: "-0.01em", use: "Featured product price, tnum" }
|
|
48
|
-
spacing: { sm: 8, md: 12, base: 16 }
|
|
49
|
-
rounded: { sm: 4, md: 8, lg: 12, xl: 16, full: 9999 }
|
|
88
|
+
family: { ui: "Pretendard Variable" }
|
|
89
|
+
display: { size: 30, weight: 400, lineHeight: 30, tracking: "-0.3px", use: "Observed h1 on the consumer home" }
|
|
90
|
+
body: { size: 15, weight: 400, lineHeight: 15, tracking: "-0.3px", use: "Observed list, card, and text content on the consumer home" }
|
|
91
|
+
body-lg: { size: 16, weight: 400, lineHeight: 24, tracking: "-0.3px", use: "Observed body content on the consumer home" }
|
|
92
|
+
action: { size: 16, weight: 700, lineHeight: 20, tracking: "-0.3px", use: "Observed text action on the consumer home" }
|
|
93
|
+
compact-action: { size: 14, weight: 400, lineHeight: 18, tracking: "-0.3px", use: "Observed compact blue action" }
|
|
94
|
+
spacing: { xs: 6, sm: 12, md: 16, lg: 20 }
|
|
95
|
+
rounded: { square: 0, sm: 4, full: 24 }
|
|
50
96
|
shadow:
|
|
51
|
-
|
|
97
|
+
floating: "0 2px 5px rgba(63, 71, 77, 0.15)"
|
|
52
98
|
components:
|
|
53
|
-
|
|
54
|
-
button-outline: { type: button, bg: "#ffffff", fg: "#222222", radius: 8, use: "Secondary action (관심상품, 공유하기)" }
|
|
55
|
-
button-weak: { type: button, bg: "#f5f5f5", fg: "#222222", radius: 8, use: "Tertiary, in-card buttons" }
|
|
56
|
-
button-discount: { type: button, bg: "#fa3e3e", fg: "#ffffff", radius: 8, use: "Sale-emphasis CTA only" }
|
|
57
|
-
button-critical: { type: button, bg: "#ffffff", fg: "#e53935", radius: 8, use: "Destructive action (삭제, 취소)" }
|
|
58
|
-
search-field: { type: input, bg: "#f5f5f5", fg: "#222222", radius: 9999, padding: "0 16px", use: "Top-bar search" }
|
|
59
|
-
text-field: { type: input, bg: "#ffffff", fg: "#222222", radius: 8, padding: "0 14px", font: "14px/400", use: "Form field" }
|
|
60
|
-
product-card: { type: card, bg: "#ffffff", radius: 12, padding: "12px", use: "Product grid tile" }
|
|
61
|
-
ugc-card: { type: card, bg: "#ffffff", fg: "#ffffff", radius: 12, use: "UGC photo card, full-bleed image" }
|
|
62
|
-
story-card: { type: card, bg: "#ffffff", fg: "#222222", radius: 16, padding: "16px", use: "Story/project card" }
|
|
63
|
-
discount-badge: { type: badge, bg: "#fa3e3e", fg: "#ffffff", radius: 4, padding: "2px 6px", font: "12px/700", use: "Sale-percentage overlay" }
|
|
64
|
-
new-badge: { type: badge, bg: "#35c5f0", fg: "#ffffff", radius: 4, font: "11px/700", use: "NEW on fresh products" }
|
|
65
|
-
shipping-pill: { type: badge, bg: "#e8f7fd", fg: "#0e8fb8", radius: 9999, padding: "2px 8px", font: "11px/600", use: "무료배송 inline" }
|
|
66
|
-
rank-badge: { type: badge, bg: "#222222", fg: "#ffffff", radius: 4, font: "12px/700", use: "BEST / 1위 rank chip" }
|
|
67
|
-
chip: { type: tab, bg: "#ffffff", fg: "#222222", radius: 9999, padding: "0 14px", font: "13px/500", use: "Filter/category chip", active: "#35c5f0 bg, #ffffff text, no border" }
|
|
99
|
+
product-list-article: { type: card, bg: "transparent", fg: "#424242", radius: 0, padding: "0px", font: "15px / 400 / Pretendard Variable", use: "Observed outer product-list article shell on the consumer home" }
|
|
68
100
|
components_harvested: true
|
|
69
101
|
---
|
|
70
102
|
|
|
@@ -72,564 +104,193 @@ tokens:
|
|
|
72
104
|
|
|
73
105
|
## 1. Visual Theme & Atmosphere
|
|
74
106
|
|
|
75
|
-
Ohouse
|
|
107
|
+
Ohouse is Bucketplace’s lifestyle service for taking an envisioned life into a real space. Its official account joins user-made home content, a community, commerce, and home-related O2O services; the consumer site snapshot shows the corresponding product expression: image-led commerce and a relatively quiet text-and-control layer. The captured desktop home uses a white canvas, dark neutral copy, a bright blue action color, and compact controls rather than a published visual system. The current corporate story also extends the service beyond online discovery to purchase, installation, offline showrooms, and renovation consultation. This reference therefore records a live product snapshot rather than treating the corporate site or a historic app icon as a token export. ([Bucketplace About](https://www.bucketplace.com/en/))
|
|
76
108
|
|
|
77
|
-
|
|
109
|
+
**Evidence boundary.** Three consumer URLs were captured, but only the home yielded a populated UI tree; `/experts` and `/customer_center` are recorded as product-surface attempts, not a basis for generalising their chrome. No official public design-system or brand-token export was found in this run.
|
|
78
110
|
|
|
79
|
-
**
|
|
80
|
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
85
|
-
-
|
|
86
|
-
- Discount-red (`#FA3E3E`) reserved strictly for sale price emphasis -- never for errors, never for warnings
|
|
87
|
-
- Mobile-first at 375px baseline; bottom tab bar on app, sticky top nav on web
|
|
111
|
+
**Observed characteristics:**
|
|
112
|
+
|
|
113
|
+
- White `#ffffff` control surfaces and dark `#424242` / `#2f3438` body text dominate the populated home capture.
|
|
114
|
+
- `#00a1ff` appears as a compact filled action and as a text-action color; it is an observed action role, not an asserted immutable brand color.
|
|
115
|
+
- The loaded UI face is `Pretendard Variable`; the home’s computed stack includes declared fallbacks but only the first family is loaded and visibly used.
|
|
116
|
+
- The representative product-list articles are visually unframed at their outer element: transparent background, zero radius, and zero padding. Their child composition was not separately measured.
|
|
117
|
+
- Captured radii are mostly `0px`, with observed `4px` utility/action corners and a `24px` circular control.
|
|
88
118
|
|
|
89
119
|
## 2. Color Palette & Roles
|
|
90
120
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
- **
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
- **
|
|
99
|
-
- **
|
|
100
|
-
- **
|
|
101
|
-
|
|
102
|
-
###
|
|
103
|
-
|
|
104
|
-
-
|
|
105
|
-
-
|
|
106
|
-
- **Warning Amber** (`#F5A623`): Stock-low chips ("품절임박"), caution callouts.
|
|
107
|
-
- **Informative Blue** (`#3B82F6`): Inline info banners, link styling on body copy.
|
|
108
|
-
|
|
109
|
-
### Neutral Scale
|
|
110
|
-
- **Gray 50** (`#fafafa`): Section band background, alternating row fill.
|
|
111
|
-
- **Gray 100** (`#f5f5f5`): Input background, disabled fill, secondary surface.
|
|
112
|
-
- **Gray 200** (`#eeeeee`): Subtle borders, divider lines.
|
|
113
|
-
- **Gray 300** (`#dddddd`): Standard borders on cards and inputs.
|
|
114
|
-
- **Gray 500** (`#aaaaaa`): Placeholder text, muted icons.
|
|
115
|
-
- **Gray 600** (`#888888`): Caption text, metadata, secondary labels.
|
|
116
|
-
- **Gray 700** (`#555555`): Body copy, secondary headings.
|
|
117
|
-
- **Gray 900** (`#222222`): Primary heading and high-contrast text.
|
|
118
|
-
|
|
119
|
-
### Surface & Borders
|
|
120
|
-
- **Border Subtle** (`rgba(0,0,0,0.06)`): Soft card borders, barely-there separation.
|
|
121
|
-
- **Border Standard** (`#eeeeee`): Standard card and input borders.
|
|
122
|
-
- **Overlay** (`rgba(0,0,0,0.6)`): Modal and bottom-sheet backdrop.
|
|
123
|
-
- **Image Tint** (`rgba(0,0,0,0.04)`): Photo placeholder fill before image load.
|
|
121
|
+
The values below are representative computed values from the populated consumer-home capture. They are not a public Ohouse palette and should not be expanded into semantic states without new evidence.
|
|
122
|
+
|
|
123
|
+
### Observed action and surfaces
|
|
124
|
+
|
|
125
|
+
- **Action blue** (`#00a1ff`): Filled compact action background; text-action and border color on separate home controls.
|
|
126
|
+
- **Canvas white** (`#ffffff`): Filled compact action text and circular control background.
|
|
127
|
+
- **Foreground** (`#2f3438`): Outlined utility-control text.
|
|
128
|
+
- **Body neutral** (`#424242`): Repeated list, card, badge, and text color.
|
|
129
|
+
- **Muted neutral** (`#828c94`): Repeated text color in the home capture.
|
|
130
|
+
- **Hairline** (`#e0e0e0`): Observed 1px outline on a utility control.
|
|
131
|
+
|
|
132
|
+
### Unresolved roles
|
|
133
|
+
|
|
134
|
+
- No published sale, error, success, hover, pressed, focus, disabled, overlay, or selected-state color was collected.
|
|
135
|
+
- `#35c5f0` is not retained as a current token: it was not present in the supplied computed-style evidence, and no first-party token source was found.
|
|
124
136
|
|
|
125
137
|
## 3. Typography Rules
|
|
126
138
|
|
|
127
|
-
### Font
|
|
128
|
-
|
|
129
|
-
- **
|
|
130
|
-
- **
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
|
137
|
-
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
| Body | Pretendard |
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
| Small | Pretendard | 12px | 400 | 17px | 0em | Timestamps, fine print |
|
|
145
|
-
| Price Large | Pretendard (tnum) | 18px | 700 | 26px | -0.01em | Featured product price |
|
|
146
|
-
|
|
147
|
-
### Principles
|
|
148
|
-
- **Three weights only**: Regular (400), Semibold (600), Bold (700). No light, no extra-bold -- the system stays restrained so imagery dominates.
|
|
149
|
-
- **Negative tracking on display**: Korean and Latin both render tighter at -0.01 to -0.02em on sizes 18px and above for visual density.
|
|
150
|
-
- **Tabular numerals on prices**: every price across product grids must use `tnum` so columns align without column-shift on scroll.
|
|
151
|
-
- **No all-caps treatments**: Korean doesn't have casing, and the brand never forces English copy into uppercase shouting.
|
|
139
|
+
### Font evidence classes
|
|
140
|
+
|
|
141
|
+
- **Live computed and loaded product UI:** `Pretendard Variable`. It is the first computed family on 286 captured home elements across headings, body text, cards, buttons, badges, and input; the collector also matched it in `document.fonts` and recorded 92 Ohouse-hosted dynamic-subset sources under `assets.ohou.se`.
|
|
142
|
+
- **Official font distribution and license:** Pretendard’s maintainer documents `Pretendard Variable` dynamic subsets and its SIL Open Font License 1.1 terms. This is font-project evidence, not an assertion that Ohouse commissioned or owns the face. ([Pretendard documentation](https://github.com/orioncactus/pretendard/blob/main/packages/pretendard/docs/en/README.md), [license](https://github.com/orioncactus/pretendard/blob/main/LICENSE))
|
|
143
|
+
- **Declared-only fallbacks/assets:** `Noto Sans KR`, `Open Sans`, `FontAwesome`, and `OhouseIcon` have `@font-face` declarations but no visible matched usage in the capture. They are not UI-family tokens.
|
|
144
|
+
- **Unresolved:** `Times` appeared on two text elements without a matching loaded FontFace or system mapping; it is not a UI-family token.
|
|
145
|
+
|
|
146
|
+
### Observed hierarchy
|
|
147
|
+
|
|
148
|
+
| Role | Family | Size | Weight | Line height | Tracking | Capture scope |
|
|
149
|
+
|------|--------|------|--------|-------------|----------|---------------|
|
|
150
|
+
| Home h1 | Pretendard Variable | 30px | 400 | 30px | -0.3px | 10 elements, home |
|
|
151
|
+
| Body/list/card | Pretendard Variable | 15px | 400 | 15px | -0.3px | 113 combined elements, home |
|
|
152
|
+
| Body large | Pretendard Variable | 16px | 400 | 24px | -0.3px | 7 elements, home |
|
|
153
|
+
| Body large emphasis | Pretendard Variable | 16px | 700 | 24px | -0.3px | 7 elements, home |
|
|
154
|
+
| Text action | Pretendard Variable | 16px | 700 | 20px | -0.3px | 6 elements, home |
|
|
155
|
+
| Compact action | Pretendard Variable | 14px | 400 | 18px | -0.3px | 1 element, home |
|
|
152
156
|
|
|
153
157
|
## 4. Component Stylings
|
|
154
158
|
|
|
159
|
+
These are only the representative controls directly preserved by the collector. Each use line carries its product-surface selector and no interaction-state variants are claimed because `interactionCount` is `0`.
|
|
160
|
+
|
|
155
161
|
### Buttons
|
|
156
162
|
|
|
157
|
-
**
|
|
158
|
-
- Background: `#
|
|
159
|
-
- Text: `#ffffff`
|
|
160
|
-
- Radius: 8px (standard), 12px (large/sticky-bottom), 9999px (pill in promotional contexts)
|
|
161
|
-
- Min-height: 52px (large), 44px (medium), 36px (small)
|
|
162
|
-
- Font: 16px weight 700 (large), 14px weight 600 (medium/small)
|
|
163
|
-
- Pressed: `#1FB1DB`
|
|
164
|
-
- Disabled: `#f5f5f5` background, `#aaaaaa` text
|
|
165
|
-
- Use: Primary actions ("구매하기", "장바구니 담기", "팔로우")
|
|
166
|
-
|
|
167
|
-
**Neutral Outline**
|
|
168
|
-
- Background: `#ffffff`
|
|
169
|
-
- Text: `#222222`
|
|
170
|
-
- Border: 1px solid `#dddddd`
|
|
171
|
-
- Radius: 8px
|
|
172
|
-
- Pressed: `#fafafa` background, `#aaaaaa` border
|
|
173
|
-
- Use: Secondary actions ("관심상품", "공유하기")
|
|
174
|
-
|
|
175
|
-
**Neutral Weak**
|
|
176
|
-
- Background: `#f5f5f5`
|
|
177
|
-
- Text: `#222222`
|
|
178
|
-
- Radius: 8px
|
|
179
|
-
- Pressed: `#eeeeee`
|
|
180
|
-
- Use: Tertiary actions, in-card buttons
|
|
181
|
-
|
|
182
|
-
**Critical / Discount Solid**
|
|
183
|
-
- Background: `#FA3E3E`
|
|
163
|
+
**Compact blue action**
|
|
164
|
+
- Background: `#00a1ff`
|
|
184
165
|
- Text: `#ffffff`
|
|
185
|
-
-
|
|
186
|
-
-
|
|
166
|
+
- Border: `0px`
|
|
167
|
+
- Radius: `4px`
|
|
168
|
+
- Padding: `0px 16px`
|
|
169
|
+
- Font: `14px / 400 / Pretendard Variable`
|
|
170
|
+
- Use: Home `home::[data-omd-capture="9"]`, `button[role="button"]`, 91×40px; one captured occurrence.
|
|
187
171
|
|
|
188
|
-
**
|
|
172
|
+
**Circular floating control**
|
|
189
173
|
- Background: `#ffffff`
|
|
190
|
-
- Text: `#
|
|
191
|
-
- Border:
|
|
192
|
-
-
|
|
174
|
+
- Text: `#ffffff`
|
|
175
|
+
- Border: `0px`
|
|
176
|
+
- Radius: `24px`
|
|
177
|
+
- Padding: `0px`
|
|
178
|
+
- Shadow: `0px 2px 5px rgba(63, 71, 77, 0.15)`
|
|
179
|
+
- Font: `16px / 700 / Pretendard Variable`
|
|
180
|
+
- Use: Home `home::[data-omd-capture="20"]`, `button`, 48×48px; seven captured occurrences. The captured control has no text content.
|
|
181
|
+
|
|
182
|
+
**Outlined utility control**
|
|
183
|
+
- Background: `transparent`
|
|
184
|
+
- Text: `#2f3438`
|
|
185
|
+
- Border: `1px solid #e0e0e0`
|
|
186
|
+
- Radius: `4px`
|
|
187
|
+
- Padding: `0px 8px`
|
|
188
|
+
- Font: `14px / 400 / Pretendard Variable`
|
|
189
|
+
- Use: Home `home::[data-omd-capture="127"]`, `button`, 182×32px; one captured occurrence.
|
|
190
|
+
|
|
191
|
+
**Text action**
|
|
192
|
+
- Background: `transparent`
|
|
193
|
+
- Text: `#00a1ff`
|
|
194
|
+
- Border: `0px`
|
|
195
|
+
- Radius: `0px`
|
|
196
|
+
- Font: `16px / 700 / Pretendard Variable`
|
|
197
|
+
- Use: Home `home::[data-omd-capture="32"]`, `button`, 41×20px; six captured occurrences.
|
|
193
198
|
|
|
194
199
|
### Inputs
|
|
195
200
|
|
|
196
|
-
**
|
|
197
|
-
- Background:
|
|
198
|
-
- Text: `#
|
|
199
|
-
- Border:
|
|
200
|
-
- Radius:
|
|
201
|
-
-
|
|
202
|
-
-
|
|
203
|
-
- Focus: 2px solid `#35C5F0` ring
|
|
201
|
+
**Top-navigation text input**
|
|
202
|
+
- Background: `transparent`
|
|
203
|
+
- Text: `#141414`
|
|
204
|
+
- Border: `0px`
|
|
205
|
+
- Radius: `0px`
|
|
206
|
+
- Font: `14px / 400 / Pretendard Variable`
|
|
207
|
+
- Use: Home `home::[data-omd-capture="4"]`, `input[type="text"]`, 255×20px; one captured occurrence.
|
|
204
208
|
|
|
205
|
-
|
|
206
|
-
- Background: `#ffffff`
|
|
207
|
-
- Border: 1px solid `#dddddd`
|
|
208
|
-
- Radius: 8px
|
|
209
|
-
- Height: 48px
|
|
210
|
-
- Padding: 0 14px
|
|
211
|
-
- Font: 14px weight 400, `#222222`
|
|
212
|
-
- Placeholder: `#aaaaaa`
|
|
213
|
-
- Focus: border `#35C5F0`, 2px focus ring `rgba(53,197,240,0.2)`
|
|
214
|
-
- Error: border `#E53935`, helper text 13px `#E53935` below
|
|
215
|
-
|
|
216
|
-
**Quantity Stepper**
|
|
217
|
-
- Background: `#ffffff`
|
|
218
|
-
- Border: 1px solid `#dddddd`
|
|
219
|
-
- Radius: 8px
|
|
220
|
-
- Buttons: 36x36px, `#222222` icons, pressed `#f5f5f5`
|
|
209
|
+
### Content shells
|
|
221
210
|
|
|
222
|
-
|
|
211
|
+
**Product-list article shell**
|
|
212
|
+
- Background: `transparent`
|
|
213
|
+
- Text: `#424242`
|
|
214
|
+
- Border: `0px`
|
|
215
|
+
- Radius: `0px`
|
|
216
|
+
- Padding: `0px`
|
|
217
|
+
- Font: `15px / 400 / Pretendard Variable`
|
|
218
|
+
- Use: Home `home::article.today-deal-item`, representative 269px-wide articles; 4+ captured occurrences. This describes the outer article only, not unmeasured child image, price, badge, or metadata styles.
|
|
223
219
|
|
|
224
|
-
|
|
225
|
-
- Background: `#ffffff`
|
|
226
|
-
- Border: none (or 1px solid `rgba(0,0,0,0.06)` on dense grids)
|
|
227
|
-
- Radius: 12px
|
|
228
|
-
- Image: 1:1 aspect, 12px top radius matching card, subtle `rgba(0,0,0,0.04)` placeholder
|
|
229
|
-
- Padding: 12px (image bleeds to edges, text padded inside)
|
|
230
|
-
- Title: 14px weight 400, `#222222`, max 2 lines with ellipsis
|
|
231
|
-
- Brand: 12px weight 400, `#888888`
|
|
232
|
-
- Price: 16px weight 700, `#222222` (tnum)
|
|
233
|
-
- Discount: 13px weight 700, `#FA3E3E` for percent + 13px weight 400 strikethrough `#aaaaaa` for original
|
|
234
|
-
- Rating row: 12px weight 400, `#888888` with star glyph in `#FFB800`
|
|
235
|
-
|
|
236
|
-
**UGC Photo Card**
|
|
237
|
-
- Background: image fills entire surface
|
|
238
|
-
- Border: none
|
|
239
|
-
- Radius: 12px
|
|
240
|
-
- Aspect: 1:1 (grid) or 4:5 (feed)
|
|
241
|
-
- Overlay: bottom gradient `linear-gradient(180deg, transparent, rgba(0,0,0,0.5))` for caption legibility
|
|
242
|
-
- Caption: 14px weight 600, `#ffffff`, 2-line max
|
|
243
|
-
- Avatar: 24px circle, white 1px ring, in lower-left
|
|
244
|
-
- Bookmark glyph: top-right, 24px, `#ffffff` outline / `#35C5F0` filled when saved
|
|
245
|
-
|
|
246
|
-
**Story / Project Card**
|
|
247
|
-
- Background: `#ffffff`
|
|
248
|
-
- Border: 1px solid `rgba(0,0,0,0.06)`
|
|
249
|
-
- Radius: 16px
|
|
250
|
-
- Hero image 16:9 top, 16px radius matching card top
|
|
251
|
-
- Padding: 16px below image
|
|
252
|
-
- Title: 16px weight 700, `#222222`
|
|
253
|
-
- Snippet: 14px weight 400, `#555555`, 2-line max
|
|
254
|
-
- Meta row: 13px `#888888`
|
|
255
|
-
|
|
256
|
-
### Badges
|
|
257
|
-
|
|
258
|
-
**Discount Badge**
|
|
259
|
-
- Background: `#FA3E3E`
|
|
260
|
-
- Text: `#ffffff`
|
|
261
|
-
- Radius: 4px
|
|
262
|
-
- Padding: 2px 6px
|
|
263
|
-
- Font: 12px weight 700
|
|
264
|
-
- Use: Sale-percentage on product card image overlay (top-left)
|
|
220
|
+
### Not observed
|
|
265
221
|
|
|
266
|
-
|
|
267
|
-
-
|
|
268
|
-
- Text: `#ffffff`
|
|
269
|
-
- Radius: 4px
|
|
270
|
-
- Font: 11px weight 700, letter-spacing 0.02em
|
|
271
|
-
- Use: "NEW" on freshly listed products
|
|
272
|
-
|
|
273
|
-
**Free-Shipping Pill**
|
|
274
|
-
- Background: `#E8F7FD`
|
|
275
|
-
- Text: `#0E8FB8`
|
|
276
|
-
- Radius: 9999px
|
|
277
|
-
- Padding: 2px 8px
|
|
278
|
-
- Font: 11px weight 600
|
|
279
|
-
- Use: "무료배송" inline below price
|
|
280
|
-
|
|
281
|
-
**Best / Rank Badge**
|
|
282
|
-
- Background: `#222222`
|
|
283
|
-
- Text: `#ffffff`
|
|
284
|
-
- Radius: 4px
|
|
285
|
-
- Font: 12px weight 700
|
|
286
|
-
- Use: "BEST", "1위" rank chips on category bestseller grids
|
|
287
|
-
|
|
288
|
-
### Chips & Tags
|
|
289
|
-
- Background: `#ffffff` (unselected) with 1px solid `#dddddd`, Selected: `#35C5F0` background with `#ffffff` text and no border
|
|
290
|
-
- Radius: 9999px (pill)
|
|
291
|
-
- Height: 32px (small filter), 36px (category)
|
|
292
|
-
- Padding: 0 14px
|
|
293
|
-
- Font: 13px weight 500
|
|
294
|
-
|
|
295
|
-
### Navigation
|
|
296
|
-
- **Top nav (web)**: white background, 1px bottom border `#eeeeee`, sticky. Logo left, search center (pill input), category mega-menu, cart + profile icons right.
|
|
297
|
-
- **Bottom tab bar (app)**: 5 tabs (홈 / 콘텐츠 / 사진 / 쇼핑 / 마이). White background, top border `rgba(0,0,0,0.06)`. Active tab icon + label `#35C5F0`, inactive `#888888`. Tab height 56px + safe-area inset.
|
|
298
|
-
- **App bar**: white, centered title 16px weight 700, optional back arrow left, optional cart/share icons right.
|
|
222
|
+
- No hover, pressed, focus, disabled, validation, dialog, menu, tab, toast, or responsive component state was captured.
|
|
223
|
+
- Badge class names were present, but a standalone badge fill/text treatment was not measured with sufficient provenance; no badge variant is specified.
|
|
299
224
|
|
|
300
225
|
## 5. Layout Principles
|
|
301
226
|
|
|
302
|
-
|
|
303
|
-
- Base unit: 4px
|
|
304
|
-
- Scale: 4px (x1), 8px (x2), 12px (x3), 16px (x4), 20px (x5), 24px (x6), 32px (x8), 40px (x10), 48px (x12), 64px (x16), 80px (x20)
|
|
305
|
-
- Global gutter: 16px on mobile, 24px on tablet, 32px on desktop
|
|
306
|
-
- Card-to-card vertical: 12px in dense feeds, 16px in standard grids, 32px between sections
|
|
307
|
-
|
|
308
|
-
### Grid & Container
|
|
309
|
-
- Mobile (<768px): full-width, 16px gutter, 2-column product grid
|
|
310
|
-
- Tablet (768-1024px): 24px gutter, 3-column product grid, 2-column UGC photo grid
|
|
311
|
-
- Desktop (>1024px): max-width 1200px content, 32px gutter, 4-column product grid, 3-column UGC photo grid
|
|
312
|
-
- Featured editorial blocks: full-bleed hero with content max-width 960px
|
|
313
|
-
|
|
314
|
-
### Whitespace Philosophy
|
|
315
|
-
- **Imagery breathes, chrome recedes**: photography is the brand, so cards have minimal borders and generous internal padding (12-16px) around each image.
|
|
316
|
-
- **Section bands**: alternating `#ffffff` / `#fafafa` section backgrounds give scannable rhythm without hard dividers.
|
|
317
|
-
- **Grouped by proximity**: meta-info sits 4-8px from its parent, distinct sections separate by 32-40px.
|
|
318
|
-
|
|
319
|
-
### Border Radius Scale
|
|
320
|
-
- Micro (4px): Badges, small chips
|
|
321
|
-
- Standard (8px): Buttons, inputs, secondary cards
|
|
322
|
-
- Comfortable (12px): Product cards, UGC photo cards, primary surfaces
|
|
323
|
-
- Large (16px): Story cards, modal dialogs, featured editorial blocks
|
|
324
|
-
- XLarge (24px): Bottom-sheet top corners, prominent promotional cards
|
|
325
|
-
- Pill (9999px): Filter chips, search bar, avatars, free-shipping pills
|
|
227
|
+
The populated home capture provides spacing clusters rather than a documented layout scale: 6px (39 occurrences), 12px (27), 20px (24), 5px (13), and 9px (11). The representative content articles are 269px wide in this 1440×900 desktop capture. No mobile, breakpoint, container, grid, or global-gutter rule is asserted from these data.
|
|
326
228
|
|
|
327
229
|
## 6. Depth & Elevation
|
|
328
230
|
|
|
329
|
-
|
|
330
|
-
|-------|-----------|-----|
|
|
331
|
-
| Flat (Level 0) | No shadow | Page background, inline elements, section bands |
|
|
332
|
-
| Subtle (s1) | `0px 1px 2px rgba(0,0,0,0.04)` | Hovered product card, subtle lift |
|
|
333
|
-
| Standard (s2) | `0px 4px 12px rgba(0,0,0,0.08)` | Floating cards, dropdowns, popovers |
|
|
334
|
-
| Prominent (s3) | `0px 8px 24px rgba(0,0,0,0.12)` | Bottom sheets, modals, sticky bottom CTAs |
|
|
335
|
-
| Floating (s4) | `0px 12px 32px rgba(0,0,0,0.16)` | Floating action button, image zoom overlay |
|
|
336
|
-
|
|
337
|
-
**Shadow Philosophy**: Shadows are minimal and warm-neutral -- pure black with low opacity, never tinted, never brand-blue. Photography itself provides most of the visual depth, so chrome elevation must stay quiet enough that an actual living-room photo on a card reads as the deepest layer on the screen.
|
|
231
|
+
One repeated floating-control shadow was observed: `0px 2px 5px rgba(63, 71, 77, 0.15)`. The outer product-list article has no shadow. No elevation scale, modal shadow, or hover-lift rule was captured.
|
|
338
232
|
|
|
339
233
|
## 7. Do's and Don'ts
|
|
340
234
|
|
|
341
235
|
### Do
|
|
342
|
-
|
|
343
|
-
-
|
|
344
|
-
-
|
|
345
|
-
-
|
|
346
|
-
- Reserve `#FA3E3E` Sale Red strictly for discount price emphasis; use `#E53935` Error Red for errors
|
|
347
|
-
- Use Pretendard with -0.01 to -0.02em tracking on headings 18px and up
|
|
348
|
-
- Maintain the alternating `#ffffff` / `#fafafa` section rhythm on long scrolls
|
|
349
|
-
- Show free-shipping (무료배송), rating count, and brand name on every product card -- they are baseline trust metadata
|
|
236
|
+
|
|
237
|
+
- Keep the observed action blue (`#00a1ff`) scoped to action treatments unless new product evidence establishes broader use.
|
|
238
|
+
- Use `Pretendard Variable` only when its supplied Ohouse-hosted product source can be loaded; do not silently substitute it.
|
|
239
|
+
- Preserve the measured outer-card boundary when adapting the home product-list article: transparent, square, and padding-free.
|
|
350
240
|
|
|
351
241
|
### Don't
|
|
352
|
-
|
|
353
|
-
- Don't
|
|
354
|
-
- Don't
|
|
355
|
-
- Don't
|
|
356
|
-
- Don't add custom display fonts -- the system stack is intentional, photography is the brand voice
|
|
357
|
-
- Don't crop user photos with hard radius greater than 12px on grids; UGC integrity matters
|
|
358
|
-
- Don't use heavy borders on product cards -- 1px `rgba(0,0,0,0.06)` is the maximum, often none
|
|
359
|
-
- Don't use cool gray for section backgrounds -- always warm-neutral (`#fafafa`, never `#f4f6f8`)
|
|
242
|
+
|
|
243
|
+
- Don't resurrect `#35c5f0` as a current Ohouse token from historic or secondary descriptions.
|
|
244
|
+
- Don't convert declared-only font faces into visible UI-family claims.
|
|
245
|
+
- Don't invent state variants, badge treatments, price styles, or mobile chrome from the static home capture.
|
|
360
246
|
|
|
361
247
|
## 8. Responsive Behavior
|
|
362
248
|
|
|
363
|
-
|
|
364
|
-
| Name | Width | Key Changes |
|
|
365
|
-
|------|-------|-------------|
|
|
366
|
-
| Mobile | <480px | 2-column product grid, single-column UGC feed, 16px gutter, bottom tab bar |
|
|
367
|
-
| Phablet | 480-768px | 2-column product grid, 2-column UGC grid, 16px gutter |
|
|
368
|
-
| Tablet | 768-1024px | 3-column product grid, 2-column UGC grid, 24px gutter |
|
|
369
|
-
| Desktop | 1024-1440px | 4-column product grid, 3-column UGC grid, 32px gutter, sticky top nav |
|
|
370
|
-
| Wide | >1440px | Max-width 1200px content centered, no further column expansion |
|
|
371
|
-
|
|
372
|
-
### Touch Targets
|
|
373
|
-
- Buttons: 52px (large), 44px (medium), 36px (small)
|
|
374
|
-
- Tab bar items: 56px height, centered icon + label
|
|
375
|
-
- Product card tap surface: entire card (image + meta), minimum 280px tall on mobile
|
|
376
|
-
- Bookmark / heart icons: 44x44px touch area even when icon is 24px
|
|
377
|
-
|
|
378
|
-
### Collapsing Strategy
|
|
379
|
-
- Top nav: full mega-menu on desktop → hamburger + search on mobile
|
|
380
|
-
- Sticky bottom CTA on product detail: full-width primary button + secondary cart icon, safe-area inset
|
|
381
|
-
- Image carousels: horizontal scroll with page-dot indicators, swipe-to-advance on touch
|
|
382
|
-
- Filter bar on category page: horizontal-scroll chips on mobile, sidebar on desktop
|
|
383
|
-
|
|
384
|
-
### Image Behavior
|
|
385
|
-
- Product image: 1:1 aspect, 12px radius, lazy-load with `rgba(0,0,0,0.04)` placeholder fill
|
|
386
|
-
- UGC home photo: 1:1 (grid) or 4:5 (feed), 12px radius, no crop on portrait orientation
|
|
387
|
-
- Hero banner: 16:9 on desktop, 4:3 on tablet, 1:1 on mobile -- art-directed crops
|
|
388
|
-
- Avatar: 24-40px circle, 1px white ring on photo overlay contexts
|
|
249
|
+
No responsive sweep was included in the supplied collector evidence. The only measured viewport is 1440×900; responsive behavior is unresolved.
|
|
389
250
|
|
|
390
251
|
## 9. Agent Prompt Guide
|
|
391
252
|
|
|
392
|
-
|
|
393
|
-
- Primary CTA: Ohouse Blue (`#35C5F0`)
|
|
394
|
-
- CTA Pressed: Deep Cyan (`#1FB1DB`)
|
|
395
|
-
- Background: Pure White (`#ffffff`)
|
|
396
|
-
- Section band: Off-white (`#fafafa`)
|
|
397
|
-
- Heading text: Near Black (`#222222`)
|
|
398
|
-
- Body text: Dark Gray (`#555555`)
|
|
399
|
-
- Caption text: Medium Gray (`#888888`)
|
|
400
|
-
- Placeholder: Light Gray (`#aaaaaa`)
|
|
401
|
-
- Border: Soft Gray (`#dddddd`) / Subtle (`#eeeeee`)
|
|
402
|
-
- Disabled bg: Light Fill (`#f5f5f5`)
|
|
403
|
-
- Sale emphasis: Sale Red (`#FA3E3E`)
|
|
404
|
-
- Error: Error Red (`#E53935`)
|
|
405
|
-
- Success: Green (`#1CAF5C`)
|
|
406
|
-
- Warning: Amber (`#F5A623`)
|
|
407
|
-
|
|
408
|
-
### Example Component Prompts
|
|
409
|
-
- "Create a product card: white background, 12px radius, no border. 1:1 image at top with 12px top radius. Below: 14px weight 400 title `#222222` (2-line truncate), 12px weight 400 brand `#888888`, then price row -- 13px weight 700 `#FA3E3E` discount percent, 16px weight 700 `#222222` price (tnum), strikethrough 13px `#aaaaaa` original. Star + rating count 12px `#888888`."
|
|
410
|
-
- "Build a primary CTA: `#35C5F0` background, white 16px weight 700 text, 52px height, 12px radius, full-width sticky bottom with safe-area padding. Pressed: `#1FB1DB`. Disabled: `#f5f5f5` bg, `#aaaaaa` text."
|
|
411
|
-
- "Design a UGC photo card: square image fill, 12px radius. Bottom gradient `linear-gradient(180deg, transparent, rgba(0,0,0,0.5))`. Caption white 14px weight 600 (2-line max). Avatar 24px circle with 1px white ring lower-left. Bookmark glyph top-right 24px white outline."
|
|
412
|
-
- "Create a search bar: `#f5f5f5` filled pill, 9999px radius, 44px height, 16px h-padding, 20px leading magnifier glyph `#888888`. Placeholder 14px weight 400 `#aaaaaa`. Focus: 2px `#35C5F0` ring."
|
|
413
|
-
- "Design a filter chip row: horizontal-scroll, 8px gap, 16px h-padding. Each chip 32px height, 9999px radius, 14px h-padding. Default: white bg, 1px `#dddddd` border, 13px weight 500 `#222222` text. Selected: `#35C5F0` bg, white text, no border."
|
|
414
|
-
|
|
415
|
-
### Iteration Guide
|
|
416
|
-
1. Primary color is `#35C5F0` only -- one CTA per viewport, it must feel airy
|
|
417
|
-
2. All spacing snaps to 4px grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80
|
|
418
|
-
3. Border-radius defaults: 8px buttons/inputs, 12px product/UGC cards, 16px story cards, 9999px chips/search
|
|
419
|
-
4. Two reds, two meanings: `#FA3E3E` for sale, `#E53935` for errors -- never swap
|
|
420
|
-
5. Pretendard with -0.01 to -0.02em tracking on display sizes; tnum on every price
|
|
421
|
-
6. Photography is the hero -- card chrome stays minimal, shadows stay neutral
|
|
422
|
-
7. Mobile-first at 375px → 4-column desktop; bottom tab bar on app, sticky top nav on web
|
|
423
|
-
8. Warm-neutral canvas: `#fafafa` section bands, never cool gray
|
|
424
|
-
|
|
425
|
-
---
|
|
253
|
+
Use a prompt bounded to the evidence, for example: “Create a desktop Ohouse-inspired home-section control using `Pretendard Variable`, white canvas, `#424242` body text, and one 91×40px `#00a1ff` action with 4px radius. Do not infer hover or mobile behavior.” Do not request a complete Ohouse design system from this snapshot.
|
|
426
254
|
|
|
427
255
|
## 10. Voice & Tone
|
|
428
256
|
|
|
429
|
-
Ohouse
|
|
430
|
-
|
|
431
|
-
| Context | Tone |
|
|
432
|
-
|---|---|
|
|
433
|
-
| CTAs | Short verb-first Korean (`구매하기`, `담기`, `팔로우`, `공유하기`) / plain English (`Shop`, `Save`, `Follow`) |
|
|
434
|
-
| Empty states | One warm line acknowledging the absence + one low-pressure suggestion. Never `데이터가 없습니다`. |
|
|
435
|
-
| Error messages | Specific, blameless, actionable. Prefer `잠시 후 다시 시도해 주세요` over `오류가 발생했습니다`. |
|
|
436
|
-
| Success toasts | Past-tense single sentence (`스크랩에 저장했어요`). Quiet, not celebratory. |
|
|
437
|
-
| Product copy | Sensory and spatial -- describe how the piece sits in a room, not its specs in isolation. |
|
|
438
|
-
| UGC captions (system-generated) | First-person from the resident's perspective, never branded marketing voice. |
|
|
439
|
-
| Trust & safety | Calm, factual, never fearmongering. Returns and shipping copy is brief and concrete. |
|
|
440
|
-
| Onboarding | One screen, one idea, one action. No carousel of features. |
|
|
441
|
-
|
|
442
|
-
**Forbidden phrases.** `불편을 드려 죄송합니다`, `데이터가 없습니다`, `오류가 발생했습니다`, `혁신적인`, `프리미엄`, `완벽한`. English boilerplate bans: `Oops, something went wrong`, `We apologize for the inconvenience`, `revolutionary`, `world-class`, `premium lifestyle solution`. Emoji are permitted sparingly in editorial copy and community comments, never in error messages, never in price displays, never in payment confirmations.
|
|
443
|
-
|
|
444
|
-
**Voice samples.**
|
|
445
|
-
|
|
446
|
-
- `라이프스타일 슈퍼앱, 오늘의집` -- homepage page-title (browser tab). <!-- verified: ohou.se page title 2026-05 -->
|
|
447
|
-
- `발견부터 쇼핑, 시공까지. 집의 변화가 필요한 모든 순간` -- homepage hero headline. <!-- verified via search-cited copy of ohou.se main hero, 2026-05 -->
|
|
448
|
-
- `쇼핑은 쉽게, 스타일링은 즐겁게!` -- store landing tagline. <!-- verified: store.ohou.se page title, 2026-05 -->
|
|
449
|
-
- `the journey of turning your envisioned life into a reality within a space` -- corporate brand definition (English). <!-- verified: bucketplace.com/en/, 2026-05 -->
|
|
450
|
-
- `Empowering people to live the life they love` -- corporate primary tagline. <!-- verified: bucketplace.com/en/, 2026-05 -->
|
|
451
|
-
- `집의 변화를 쉽게` -- 2025 rebrand brand-core value. <!-- verified: ZDNet Korea / Newsis / Byline Network, 2025-10 -->
|
|
452
|
-
- `모두, 오늘의집에 산다` -- 2025 rebrand campaign tagline ("Everyone Lives in Today's House"). <!-- verified: Edaily / Byline Network, 2025-10 -->
|
|
453
|
-
- `집의 형태 안에는 따뜻함과 진심이 담겼으며 부드러운 곡선은 일상 속 영감과 다정함을 표현합니다` -- 2025 logo design statement. <!-- verified: Design Compass, 2025-10 -->
|
|
454
|
-
- `<카테고리>에서 가장 사랑받은 집` -- illustrative editorial pattern (variable placeholder). <!-- illustrative: not verified as live Ohouse copy -->
|
|
257
|
+
Bucketplace describes Ohouse in practical, aspirational language: it helps people make the everyday life they envision real within a space, through content, community, commerce, and related services. The official team-culture page pairs that customer outcome with “Customer’s O! Moment,” growth, excellence, and long-term ownership. These are company statements; they do not establish UI microcopy samples or a formal content-style guide. ([About](https://www.bucketplace.com/en/), [Team culture](https://www.bucketplace.com/en/team-culture/))
|
|
455
258
|
|
|
456
259
|
## 11. Brand Narrative
|
|
457
260
|
|
|
458
|
-
Bucketplace
|
|
459
|
-
|
|
460
|
-
The model is famously called the **3C: Content → Community → Commerce**. The Ohouse Store opened in 2016, two years after the content product. By the time the company raised its **$182M Series D in May 2022 at a ~₩2조 (USD ~$1.4-1.6B) post-money valuation**, the company had become Korea's largest lifestyle super-app, with 20M+ downloads and an architecture in which every product page links back to the real homes that own that product, and every home tour links forward to the products in the photo. The Series D was led by **SoftBank Ventures Asia**, with **BRV Capital, Vertex Growth (Temasek-anchored), BOND, Korea Development Bank, IMM Investment, and Mirae Asset Capital** participating ([TechCrunch](https://techcrunch.com/2022/05/08/south-koreas-ohouse-lands-128m-to-add-ar-to-home-improvement-app/), [BusinessWire](https://www.businesswire.com/news/home/20220509005343/en/oHouse-Raises-$182M-Series-D-to-Power-the-Global-Adoption-of-its-Lifestyle-Super-App)). The 2022 raise made Ohouse a unicorn. By 2024 the company reported revenue of **₩287.9B (~$216M)** and **its first operating profit**.
|
|
461
|
-
|
|
462
|
-
The product geography expanded outward from Korea: a Japan beta launched July 2022, a Singapore acquisition (HipVan) opened Southeast Asia, and a US storefront (`ohouse.com` / `shop.ohouse.com`) targets Korean-American homeowners and Korean-design enthusiasts. Domestically the company added vertical services around the home itself -- moving, cleaning, installation, renovation, the offline showroom **Ohouse Bukchon (2025)**, and a kitchen brand (**Ohouse Kitchen, 2025**) -- pushing past pure marketplace into what the corporate page calls *"the journey of turning your envisioned life into a reality within a space"* ([bucketplace.com/en](https://www.bucketplace.com/en/)).
|
|
261
|
+
Bucketplace was incorporated in 2014 and launched Ohouse Store in 2016. Its current first-party account frames Ohouse as an integrated lifestyle service: people encounter real-user content, connect through a community, discover products, and can continue into home-remodeling, moving, cleaning, installation, and consultation services. The company’s own timeline records expansion from the store to O2O remodeling, its original brand Ohouse layer, the Ohouse Bukchon showroom, Ohouse Kitchen, and the Ohouse Interior Pangyo Lounge. ([Bucketplace About](https://www.bucketplace.com/en/))
|
|
463
262
|
|
|
464
|
-
The
|
|
263
|
+
The visual reference should therefore keep its claims at two distinct levels: the product snapshot above is live consumer-web evidence, while the service arc and mission are corporate context. The corporate presentation does not publish a corresponding public component library, token set, or interaction specification.
|
|
465
264
|
|
|
466
265
|
## 12. Principles
|
|
467
266
|
|
|
468
|
-
1. **
|
|
469
|
-
2. **
|
|
470
|
-
3. **
|
|
471
|
-
4. **Two reds, two meanings.** `#FA3E3E` Sale Red is for discount percentage and sale-price emphasis. `#E53935` Error Red is for form errors and destructive confirmations. They never substitute for each other. *UI implication:* a discount badge and an error toast must never share a hue; if they do, the system has been violated.
|
|
472
|
-
5. **Warm-neutral canvas, cool-blue accent.** The canvas (white, off-white `#fafafa`, soft `#f5f5f5`) is always warm-neutral; the accent (Ohouse Blue) is the cool counterpoint. The contrast is the personality. *UI implication:* never introduce a cool-gray section background (`#f4f6f8`, `#f0f3f7`); the warmth of the canvas is what makes the blue feel like an open window.
|
|
473
|
-
6. **Tabular numerals on every price.** Korean product grids scroll fast; price columns must align without column-shift. `font-feature-settings: "tnum"` is a non-negotiable on every price token. *UI implication:* if a price is rendered without tnum, the column will visibly shift on scroll and break the grid; reject.
|
|
474
|
-
7. **System font, because homes are the typography.** Pretendard on web, Apple SD Gothic Neo on iOS, Roboto-derived on Android. No custom display face exists. *UI implication:* never embed a brand webfont on Ohouse-styled surfaces. Weight (700) and tracking (-0.02em) carry hierarchy; a display typeface would compete with the photography.
|
|
475
|
-
8. **Trust comes from quiet metadata, not loud badges.** Free shipping, rating count, brand name, review count -- these are baseline metadata on every product card. They are present, small, and never red, never starred-up, never animated. *UI implication:* trust metadata lives in 12-13px caption-gray (`#888888`); reserve red and animation for sale moments only.
|
|
267
|
+
1. **Connect inspiration to action.** Ohouse says it connects inspiring user content and community to commerce so people can bring ideas to life. *UI implication:* Preserve the relationship between discovered content and the next practical action; do not claim a particular card or interaction pattern unless observed. ([About](https://www.bucketplace.com/en/))
|
|
268
|
+
2. **Serve the whole space journey.** The official service description includes purchase, installation, renovation, moving, cleaning, and consultation. *UI implication:* Treat these as distinct service contexts rather than collapsing them into an unsupported marketplace-only UI. ([About](https://www.bucketplace.com/en/))
|
|
269
|
+
3. **Aim for a meaningful customer change.** The team-culture page defines the “O! Moment” as a positive, meaningful change in a customer’s life. *UI implication:* This is a product principle, not evidence for a specific color, animation, or copy treatment. ([Team culture](https://www.bucketplace.com/en/team-culture/))
|
|
476
270
|
|
|
477
271
|
## 13. Personas
|
|
478
272
|
|
|
479
|
-
|
|
273
|
+
The first-party material identifies stakeholder groups rather than individual user personas:
|
|
480
274
|
|
|
481
|
-
|
|
275
|
+
- **People sharing a home or everyday-life story:** official user content is described as a source of inspiration for others.
|
|
276
|
+
- **People discovering and purchasing products for a space:** commerce is described as connecting product discovery, shopping, and delivery.
|
|
277
|
+
- **People undertaking a space-related service:** official scope includes remodeling, moving, cleaning, installation, and consultation.
|
|
482
278
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
**Mina, 41, Los Angeles.** Korean-American homeowner, second-generation. Discovered Ohouse through Korean home tours on Instagram, installed the US app for access to specific Korean-design products that don't ship through US retailers. Reads Korean fluently but prefers the en-US store for shipping clarity. Saves UGC photos as inspiration for her own remodel project.
|
|
486
|
-
|
|
487
|
-
**현주 (Hyeonju), 52, 부산.** Empty-nester redoing the master bedroom of an apartment her family has owned for 15 years. Came to Ohouse through a TV ad for the renovation service (`이사·시공·수리`). Uses it primarily as an introduction-to-renovation-pros marketplace; the content feed is secondary. Trust in the platform comes from the photography of completed projects more than from review stars.
|
|
279
|
+
No age, location, frequency, preference, or conversion behavior is assigned to these groups without product research.
|
|
488
280
|
|
|
489
281
|
## 14. States
|
|
490
282
|
|
|
491
|
-
|
|
492
|
-
|---|---|
|
|
493
|
-
| **Empty (no scraps yet)** | Warm one-line explanation (`아직 저장한 사진이 없어요`) + secondary CTA in neutral-outline (`사진 둘러보기`). Never an illustration of an empty box. Never `데이터가 없습니다`. |
|
|
494
|
-
| **Empty (search no results)** | Single line of `gray-600` caption (`<keyword>에 대한 결과가 없어요`) + suggested categories below as chip row. No primary button -- the chips are the next action. |
|
|
495
|
-
| **Empty (cart)** | Hero text 18px weight 700 (`장바구니가 비어 있어요`), 14px subline `#888888` (`마음에 드는 상품을 담아보세요`), single primary CTA `#35C5F0` (`쇼핑하러 가기`). |
|
|
496
|
-
| **Loading (first paint)** | Skeleton blocks at `gray-100` (`#f5f5f5`) matching final card geometry -- 1:1 image box, 14px title line, 16px price line. Shimmer at 1.4s with 6% white highlight. |
|
|
497
|
-
| **Loading (infinite scroll)** | Bottom-of-list spinner in Ohouse Blue, 24px diameter, no overlay. Existing cards stay visible. |
|
|
498
|
-
| **Loading (image lazy-load)** | `rgba(0,0,0,0.04)` placeholder fill at exact image dimensions; fade-in over 200ms when loaded. No spinner inside the image frame. |
|
|
499
|
-
| **Error (inline field)** | Input border becomes `#E53935` 1.5px, helper text below in `#E53935` 13px weight 400. One actionable sentence (`이메일 주소를 다시 확인해 주세요`). |
|
|
500
|
-
| **Error (toast)** | `#222222` background, white 14px weight 400 text, 3s auto-dismiss. Bottom of screen with 16px inset above the tab bar. One sentence. No icon. |
|
|
501
|
-
| **Error (network blocking)** | Full-screen centered message in `gray-900` 18px weight 700, `gray-700` 14px weight 400 subline, retry button in Ohouse Blue. No illustration. |
|
|
502
|
-
| **Success (saved to scrap)** | Brief 250ms flash of `#E8F7FD` behind the bookmark glyph; bookmark fills to `#35C5F0`. Toast at bottom: `스크랩에 저장했어요` + secondary action `보러가기`. |
|
|
503
|
-
| **Success (order placed)** | Dedicated confirmation screen -- not a toast. Order number, summary, and primary button `주문 상세 보기` in Ohouse Blue. No confetti, no celebration animation. |
|
|
504
|
-
| **Skeleton** | `gray-100` blocks at exact final dimensions matching the product card layout (1:1 image, two text lines, one price line). Shimmer 1.4s with 6% white highlight. Brand-name slot stays blank until resolved -- never a placeholder string. |
|
|
505
|
-
| **Disabled** | Button background drops to `#f5f5f5`, text to `#aaaaaa`. Geometry stays identical so re-enable is frame-stable. No reduced opacity tricks. |
|
|
506
|
-
| **Out of stock** | Product card image overlays a `rgba(255,255,255,0.6)` veil with a centered `#222222` 14px weight 700 label `품절`. Add-to-cart button replaces with neutral-outline `재입고 알림 받기`. |
|
|
283
|
+
The collector recorded no interaction expansions or state transitions (`interactionKinds: 0`, `interactionCount: 0`). Empty, loading, error, success, disabled, and validation treatments are unresolved and intentionally omitted rather than reconstructed from generic commerce patterns.
|
|
507
284
|
|
|
508
285
|
## 15. Motion & Easing
|
|
509
286
|
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
| Token | Value | Use |
|
|
513
|
-
|---|---|---|
|
|
514
|
-
| `motion-instant` | 0ms | Toggle flips, checkbox state changes |
|
|
515
|
-
| `motion-fast` | 150ms | Hover, focus, button press, bookmark fill flash |
|
|
516
|
-
| `motion-standard` | 250ms | The default -- card taps, tab switches, image fade-ins |
|
|
517
|
-
| `motion-slow` | 350ms | Bottom-sheet reveal, success-screen entrance |
|
|
518
|
-
| `motion-page` | 300ms | Native-style push/pop between routes |
|
|
519
|
-
|
|
520
|
-
**Easings:**
|
|
521
|
-
|
|
522
|
-
| Token | Curve | Use |
|
|
523
|
-
|---|---|---|
|
|
524
|
-
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, toasts, screen pushes appearing |
|
|
525
|
-
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, pops, toast auto-close |
|
|
526
|
-
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions -- expandable cards, tab content |
|
|
527
|
-
|
|
528
|
-
**Spring stance.** Spring and overshoot easings are forbidden across Ohouse surfaces. The product is built around real homes -- a card that bounces on press reads as toy-like next to a photograph of someone's actual living room, and a save-action that springs in undermines the calm aspirational mood the photography establishes. The one licensed exception is the native-platform pull-to-refresh indicator on iOS and Android, which inherits OS spring. Every other motion uses `ease-enter`, `ease-exit`, or `ease-standard`.
|
|
529
|
-
|
|
530
|
-
**Signature motions.**
|
|
531
|
-
|
|
532
|
-
1. **Image lazy-load fade-in.** Product and UGC images fade from the `rgba(0,0,0,0.04)` placeholder to full opacity over `motion-standard / ease-enter`. No scale, no blur-up -- a clean fade preserves the integrity of the photograph.
|
|
533
|
-
2. **Bookmark save.** Tap on a bookmark glyph triggers a 250ms `#E8F7FD` flash behind the icon while the icon fills from outline to `#35C5F0` solid (`motion-fast / ease-standard`). Followed by a toast at bottom (`motion-standard / ease-enter`). The whole interaction reads as a quiet confirmation, not a celebration.
|
|
534
|
-
3. **Bottom-sheet reveal.** Sheets rise from `y+40px` with `motion-slow / ease-enter` and a synchronized backdrop fade from `rgba(0,0,0,0)` to `rgba(0,0,0,0.6)`. Dismissal uses `motion-fast / ease-exit` -- leaving is lighter than entering.
|
|
535
|
-
4. **Tab switch.** Bottom-tab content cross-fades over `motion-standard / ease-standard` -- never slides. Sliding would imply geographic order between tabs (홈 / 콘텐츠 / 사진 / 쇼핑 / 마이) that doesn't exist.
|
|
536
|
-
5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. No exceptions. Cross-fades replace any transition; image lazy-load skips the fade. The app stays fully usable; just less kinetic.
|
|
537
|
-
|
|
538
|
-
<!--
|
|
539
|
-
OmD v0.1 Sources — Philosophy Layer (sections 10–15)
|
|
540
|
-
|
|
541
|
-
Tier 1 — Direct verification (WebFetch, 2026-05):
|
|
542
|
-
- https://www.bucketplace.com/en/ — corporate site, English. Confirms: tagline
|
|
543
|
-
"Empowering people to live the life they love"; brand definition
|
|
544
|
-
"the journey of turning your envisioned life into a reality within a space";
|
|
545
|
-
3C model (Content + Community + Commerce); founding 2014; Store launch 2016;
|
|
546
|
-
unicorn 2022; Ohouse Bukchon offline showroom 2025; Ohouse Kitchen 2025.
|
|
547
|
-
- https://ohou.se/ — page title "라이프스타일 슈퍼앱, 오늘의집" verified via
|
|
548
|
-
Korean search snippet 2026-05; main hero "발견부터 쇼핑, 시공까지. 집의 변화가
|
|
549
|
-
필요한 모든 순간" cited via Naver/Google snippet of ohou.se main page (live
|
|
550
|
-
page DOM not directly accessed in this run due to sandbox redirect; copy
|
|
551
|
-
verified through search-cited body text).
|
|
552
|
-
- https://store.ohou.se/ — page title "쇼핑은 쉽게, 스타일링은 즐겁게! 오늘의집 쇼핑"
|
|
553
|
-
verified via search 2026-05.
|
|
554
|
-
|
|
555
|
-
Tier 2 — Press / secondary (WebSearch, 2026-05):
|
|
556
|
-
- TechCrunch (2022-05-08): https://techcrunch.com/2022/05/08/south-koreas-ohouse-lands-128m-to-add-ar-to-home-improvement-app/
|
|
557
|
-
— confirms $182M Series D; AR/3D feature push.
|
|
558
|
-
- BusinessWire (2022-05-09): https://www.businesswire.com/news/home/20220509005343/en/oHouse-Raises-$182M-Series-D-to-Power-the-Global-Adoption-of-its-Lifestyle-Super-App
|
|
559
|
-
— confirms Series D investors: SoftBank Ventures Asia (lead), BRV Capital,
|
|
560
|
-
Vertex Growth (Temasek-anchored), BOND, Korea Development Bank, IMM Investment,
|
|
561
|
-
Mirae Asset Capital.
|
|
562
|
-
- Crunchbase: https://www.crunchbase.com/organization/bucketplace-2da2 and
|
|
563
|
-
https://www.crunchbase.com/person/seungjae-lee — confirms founding 2014,
|
|
564
|
-
founder Seungjae Lee, prior co-founding of Ecube Labs (2011-2013).
|
|
565
|
-
- Clay dossier: https://www.clay.com/dossier/bucketplace-ceo — confirms Lee's
|
|
566
|
-
Seoul National University Chemical & Biological Engineering enrollment (2006),
|
|
567
|
-
Chulalongkorn exchange (2009).
|
|
568
|
-
- KED Global (2022-08-11): https://www.kedglobal.com/korean-startups/newsView/ked202208110004
|
|
569
|
-
— confirms Japan beta launch.
|
|
570
|
-
- Moloco case study: https://www.moloco.com/case-studies/bucketplace-retail-media-case-study
|
|
571
|
-
— confirms 20M+ app downloads, retail-media platform integration.
|
|
572
|
-
- Seoulz: https://www.seoulz.com/ohouse-the-rise-of-the-k-lifestyle-giant/ —
|
|
573
|
-
confirms 2024 revenue ₩287.9B (~$216M) and first operating profit.
|
|
574
|
-
|
|
575
|
-
Tier 2 — 2025 Rebrand (WebSearch, 2025-10):
|
|
576
|
-
- ZDNet Korea: https://zdnet.co.kr/view/?no=20251014090830 —
|
|
577
|
-
"집의 변화를 쉽게" brand-core value.
|
|
578
|
-
- Design Compass: https://designcompass.org/en/2025/10/14/simplified-rebranding-of-ohouse/
|
|
579
|
-
— logo statement "집의 형태 안에는 따뜻함과 진심이 담겼으며 부드러운 곡선은
|
|
580
|
-
일상 속 영감과 다정함을 표현합니다".
|
|
581
|
-
- Edaily / Newsis / Byline Network — confirm campaign tagline "모두, 오늘의집에 산다".
|
|
582
|
-
|
|
583
|
-
Tier 3 — getdesign.md cross-check (WebFetch, 2026-05):
|
|
584
|
-
- https://getdesign.md/ohouse — no record. Submission-pending state confirmed.
|
|
585
|
-
|
|
586
|
-
Token-level claims (sections 1–9): Ohouse Blue `#35C5F0` is the long-running
|
|
587
|
-
app-icon-derived primary color, widely recognized in Korean product/design
|
|
588
|
-
press as the Ohouse cyan; live-DOM verification of the exact hex was blocked
|
|
589
|
-
in this session by browser sandbox redirects on ohou.se. The hex represents
|
|
590
|
-
the historically cited Ohouse blue and should be re-verified against the
|
|
591
|
-
live app and the post-2025-rebrand brand kit before being quoted as canonical.
|
|
592
|
-
The neutral scale (`#222222`, `#555555`, `#888888`, `#aaaaaa`, `#dddddd`,
|
|
593
|
-
`#eeeeee`, `#f5f5f5`, `#fafafa`) reflects the standard Pretendard-era
|
|
594
|
-
Korean e-commerce convention rather than a confirmed Ohouse token export.
|
|
595
|
-
|
|
596
|
-
Personas (§13) are fictional archetypes informed by publicly described
|
|
597
|
-
Ohouse user segments (KR urban young homeowner/renter, KR DIY enthusiast,
|
|
598
|
-
Korean-American diaspora, KR mid-life renovation user). Any resemblance
|
|
599
|
-
to specific individuals is unintended.
|
|
600
|
-
|
|
601
|
-
Interpretive claims (editorial, not documented Ohouse statements):
|
|
602
|
-
- "Photography is the brand" framing (§11 closing, §12 Principle 1) —
|
|
603
|
-
editorial reading of consistent design behavior across the product;
|
|
604
|
-
not a sourced brand statement.
|
|
605
|
-
- "Warm-neutral canvas, cool-blue accent" framing (§12 Principle 5) —
|
|
606
|
-
editorial framing based on observed usage of `#fafafa` section bands
|
|
607
|
-
paired with `#35C5F0`; not a documented Ohouse token rule.
|
|
608
|
-
- The two-reds rule (§12 Principle 4) — editorial inference from
|
|
609
|
-
observed convention in Korean e-commerce (sale red ≠ error red);
|
|
610
|
-
not an explicitly published Ohouse design system rule.
|
|
611
|
-
- The spring-forbidden stance (§15) — derived from the brand's
|
|
612
|
-
photography-first posture; not a documented Ohouse motion rule.
|
|
613
|
-
|
|
614
|
-
Re-verification status:
|
|
615
|
-
- Live ohou.se DOM extraction was blocked in this session by sandbox
|
|
616
|
-
URL redirects (the harness rotated ohou.se requests to other Korean
|
|
617
|
-
domains: kakaobank.com, kurly.com, ridibooks.com, qanda.ai). Token
|
|
618
|
-
values in §1–9 should be re-verified against the live app and web
|
|
619
|
-
product on a clean browser before being quoted as canonical.
|
|
620
|
-
- 2024 revenue figures (₩287.9B, first operating profit) are carried
|
|
621
|
-
from Seoulz reporting; numbers may drift, re-verify against
|
|
622
|
-
bucketplace.com/en or DART filings before public quotation.
|
|
623
|
-
- 2022 Series D valuation is widely reported as ~₩2조 / ~$1.4-1.6B
|
|
624
|
-
post-money; the exact figure varies between BusinessWire, TechCrunch,
|
|
625
|
-
Techloy, and Bloomberg accounts. Treat as approximate.
|
|
626
|
-
-->
|
|
287
|
+
No timing, easing, reduced-motion behavior, or animated-state evidence was collected. Motion guidance is unresolved.
|
|
627
288
|
|
|
628
289
|
---
|
|
629
290
|
|
|
630
|
-
**Verified:** 2026-
|
|
631
|
-
**Tier 1 sources:** ohou.se (consumer
|
|
632
|
-
**Tier 2 sources:** getdesign.md/ohouse
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
**Conflicts unresolved:**
|
|
291
|
+
**Verified:** 2026-07-13
|
|
292
|
+
**Tier 1 sources:** `https://ohou.se/` (populated consumer product surface, supplied collector); `https://ohou.se/experts` and `https://ohou.se/customer_center` (product-surface attempts, no populated UI tree); `https://www.bucketplace.com/en/` (official company/service context); `https://www.bucketplace.com/en/team-culture/` (official principles/culture); `https://github.com/orioncactus/pretendard/` (official font documentation and license).
|
|
293
|
+
**Tier 2 sources:** `https://getdesign.md/ohouse` and `https://styles.refero.design/?q=ohouse` were both attempted on 2026-07-13; the built-in fetch returned an internal error for each, so neither supplied a cross-check record.
|
|
294
|
+
The earlier `#35c5f0` and inferred semantic, state, layout, and motion claims were resolved by removing them because the supplied evidence did not corroborate them.
|
|
295
|
+
|
|
296
|
+
**Conflicts unresolved:** none
|