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
|
@@ -4,575 +4,416 @@ name: Baemin
|
|
|
4
4
|
country: KR
|
|
5
5
|
category: consumer-tech
|
|
6
6
|
homepage: "https://www.baemin.com"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#0cefd3"
|
|
8
8
|
logo:
|
|
9
9
|
type: favicon
|
|
10
10
|
slug: "https://www.baemin.com/favicon.ico"
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-12"
|
|
12
|
+
omd: "0.1"
|
|
13
|
+
ds:
|
|
14
|
+
name: Woowa Font Catalog
|
|
15
|
+
url: "https://www.woowahan.com/fonts"
|
|
16
|
+
type: brand
|
|
17
|
+
description: Official Baemin brand-font distribution; current web UI use is verified separately from declared brand assets.
|
|
18
|
+
verification_v2:
|
|
19
|
+
schema: 2
|
|
20
|
+
checked: "2026-07-12"
|
|
21
|
+
surfaces:
|
|
22
|
+
- { id: baemin-home, kind: marketing, url: "https://www.baemin.com/", inspected: "2026-07-11" }
|
|
23
|
+
- { id: woowa-home, kind: corporate, url: "https://www.woowahan.com/", inspected: "2026-07-11" }
|
|
24
|
+
- { id: font-catalog, kind: design-system, url: "https://www.woowahan.com/fonts", inspected: "2026-07-11" }
|
|
25
|
+
- { id: font-license, kind: design-system, url: "https://www.woowahan.com/fonts/license", inspected: "2026-07-11" }
|
|
26
|
+
- { id: baemin-app-rebrand, kind: product, url: "https://www.woowahan.com/report/detail/975?page=1", inspected: "2026-07-12" }
|
|
27
|
+
sources:
|
|
28
|
+
- { id: baemin-live, kind: product-surface, url: "https://www.baemin.com/", captured: "2026-07-11" }
|
|
29
|
+
- { id: woowa-live, kind: product-surface, url: "https://www.woowahan.com/", captured: "2026-07-11" }
|
|
30
|
+
- { id: font-catalog-live, kind: official-doc, url: "https://www.woowahan.com/fonts", captured: "2026-07-11" }
|
|
31
|
+
- { id: font-license-live, kind: license, url: "https://www.woowahan.com/fonts/license", captured: "2026-07-11" }
|
|
32
|
+
- { id: baemin-rebrand-official, kind: official-doc, url: "https://www.woowahan.com/report/detail/975?page=1", captured: "2026-07-12" }
|
|
33
|
+
claims:
|
|
34
|
+
"tokens.colors.primary": &baemin_live { surface_id: baemin-home, source_id: baemin-live, method: computed-style, captured: "2026-07-11" }
|
|
35
|
+
"tokens.colors.canvas": *baemin_live
|
|
36
|
+
"tokens.colors.foreground": *baemin_live
|
|
37
|
+
"tokens.colors.baemin-dark": *baemin_live
|
|
38
|
+
"tokens.colors.baemin-panel": *baemin_live
|
|
39
|
+
"tokens.colors.corporate-foreground": &woowa_live { surface_id: woowa-home, source_id: woowa-live, method: computed-style, captured: "2026-07-11" }
|
|
40
|
+
"tokens.colors.corporate-muted": *woowa_live
|
|
41
|
+
"tokens.colors.corporate-surface": *woowa_live
|
|
42
|
+
"tokens.colors.corporate-disabled": *woowa_live
|
|
43
|
+
"tokens.colors.corporate-border": *woowa_live
|
|
44
|
+
"tokens.colors.on-dark": *woowa_live
|
|
45
|
+
"tokens.typography.family.ui": { surface_id: baemin-app-rebrand, source_id: baemin-rebrand-official, method: official-doc, captured: "2026-07-12" }
|
|
46
|
+
"tokens.typography.baemin-hero.size": *baemin_live
|
|
47
|
+
"tokens.typography.baemin-hero.weight": *baemin_live
|
|
48
|
+
"tokens.typography.baemin-hero.lineHeight": *baemin_live
|
|
49
|
+
"tokens.typography.baemin-heading.size": *baemin_live
|
|
50
|
+
"tokens.typography.baemin-heading.weight": *baemin_live
|
|
51
|
+
"tokens.typography.baemin-heading.lineHeight": *baemin_live
|
|
52
|
+
"tokens.typography.baemin-button.size": *baemin_live
|
|
53
|
+
"tokens.typography.baemin-button.weight": *baemin_live
|
|
54
|
+
"tokens.typography.baemin-button.lineHeight": *baemin_live
|
|
55
|
+
"tokens.typography.corporate-heading.size": *woowa_live
|
|
56
|
+
"tokens.typography.corporate-heading.weight": *woowa_live
|
|
57
|
+
"tokens.typography.corporate-heading.lineHeight": *woowa_live
|
|
58
|
+
"tokens.typography.corporate-heading.tracking": *woowa_live
|
|
59
|
+
"tokens.typography.corporate-card-title.size": *woowa_live
|
|
60
|
+
"tokens.typography.corporate-card-title.weight": *woowa_live
|
|
61
|
+
"tokens.typography.corporate-card-title.lineHeight": *woowa_live
|
|
62
|
+
"tokens.typography.corporate-card-title.tracking": *woowa_live
|
|
63
|
+
"tokens.typography.corporate-body.size": *woowa_live
|
|
64
|
+
"tokens.typography.corporate-body.weight": *woowa_live
|
|
65
|
+
"tokens.typography.corporate-body.lineHeight": *woowa_live
|
|
66
|
+
"tokens.typography.corporate-body.tracking": *woowa_live
|
|
67
|
+
"tokens.typography.corporate-label.size": *woowa_live
|
|
68
|
+
"tokens.typography.corporate-label.weight": *woowa_live
|
|
69
|
+
"tokens.typography.corporate-label.lineHeight": *woowa_live
|
|
70
|
+
"tokens.typography.corporate-label.tracking": *woowa_live
|
|
71
|
+
"tokens.typography.catalog-title.size": &catalog_live { surface_id: font-catalog, source_id: font-catalog-live, method: computed-style, captured: "2026-07-11" }
|
|
72
|
+
"tokens.typography.catalog-title.weight": *catalog_live
|
|
73
|
+
"tokens.typography.catalog-title.lineHeight": *catalog_live
|
|
74
|
+
"tokens.typography.catalog-title.tracking": *catalog_live
|
|
75
|
+
"tokens.spacing.xs": *baemin_live
|
|
76
|
+
"tokens.spacing.sm": *woowa_live
|
|
77
|
+
"tokens.spacing.md": *woowa_live
|
|
78
|
+
"tokens.spacing.lg": *woowa_live
|
|
79
|
+
"tokens.spacing.xl": *woowa_live
|
|
80
|
+
"tokens.spacing.xxl": *woowa_live
|
|
81
|
+
"tokens.spacing.section": *woowa_live
|
|
82
|
+
"tokens.rounded.corporate-control": *woowa_live
|
|
83
|
+
"tokens.rounded.download-card": *baemin_live
|
|
84
|
+
"tokens.rounded.media-control": *woowa_live
|
|
85
|
+
"tokens.rounded.circle": *woowa_live
|
|
86
|
+
"tokens.components.app-download-card.type": *baemin_live
|
|
87
|
+
"tokens.components.app-download-card.bg": *baemin_live
|
|
88
|
+
"tokens.components.app-download-card.fg": *baemin_live
|
|
89
|
+
"tokens.components.app-download-card.radius": *baemin_live
|
|
90
|
+
"tokens.components.app-download-card.height": *baemin_live
|
|
91
|
+
"tokens.components.app-download-card.padding": *baemin_live
|
|
92
|
+
"tokens.components.app-download-card.font": *baemin_live
|
|
93
|
+
"tokens.components.app-download-card.states": *baemin_live
|
|
94
|
+
"tokens.components.app-download-card.use": *baemin_live
|
|
95
|
+
"tokens.components.baemin-nav-link.type": *baemin_live
|
|
96
|
+
"tokens.components.baemin-nav-link.bg": *baemin_live
|
|
97
|
+
"tokens.components.baemin-nav-link.fg": *baemin_live
|
|
98
|
+
"tokens.components.baemin-nav-link.height": *baemin_live
|
|
99
|
+
"tokens.components.baemin-nav-link.font": *baemin_live
|
|
100
|
+
"tokens.components.baemin-nav-link.states": *baemin_live
|
|
101
|
+
"tokens.components.baemin-nav-link.use": *baemin_live
|
|
102
|
+
"tokens.components.woowa-more-light.type": *woowa_live
|
|
103
|
+
"tokens.components.woowa-more-light.bg": *woowa_live
|
|
104
|
+
"tokens.components.woowa-more-light.fg": *woowa_live
|
|
105
|
+
"tokens.components.woowa-more-light.radius": *woowa_live
|
|
106
|
+
"tokens.components.woowa-more-light.height": *woowa_live
|
|
107
|
+
"tokens.components.woowa-more-light.padding": *woowa_live
|
|
108
|
+
"tokens.components.woowa-more-light.font": *woowa_live
|
|
109
|
+
"tokens.components.woowa-more-light.states": *woowa_live
|
|
110
|
+
"tokens.components.woowa-more-light.use": *woowa_live
|
|
111
|
+
"tokens.components.woowa-more-overlay.type": *woowa_live
|
|
112
|
+
"tokens.components.woowa-more-overlay.bg": *woowa_live
|
|
113
|
+
"tokens.components.woowa-more-overlay.fg": *woowa_live
|
|
114
|
+
"tokens.components.woowa-more-overlay.border": *woowa_live
|
|
115
|
+
"tokens.components.woowa-more-overlay.radius": *woowa_live
|
|
116
|
+
"tokens.components.woowa-more-overlay.height": *woowa_live
|
|
117
|
+
"tokens.components.woowa-more-overlay.padding": *woowa_live
|
|
118
|
+
"tokens.components.woowa-more-overlay.font": *woowa_live
|
|
119
|
+
"tokens.components.woowa-more-overlay.states": *woowa_live
|
|
120
|
+
"tokens.components.woowa-more-overlay.use": *woowa_live
|
|
121
|
+
"tokens.components.woowa-site-selector.type": *woowa_live
|
|
122
|
+
"tokens.components.woowa-site-selector.bg": *woowa_live
|
|
123
|
+
"tokens.components.woowa-site-selector.fg": *woowa_live
|
|
124
|
+
"tokens.components.woowa-site-selector.border": *woowa_live
|
|
125
|
+
"tokens.components.woowa-site-selector.radius": *woowa_live
|
|
126
|
+
"tokens.components.woowa-site-selector.height": *woowa_live
|
|
127
|
+
"tokens.components.woowa-site-selector.padding": *woowa_live
|
|
128
|
+
"tokens.components.woowa-site-selector.font": *woowa_live
|
|
129
|
+
"tokens.components.woowa-site-selector.states": *woowa_live
|
|
130
|
+
"tokens.components.woowa-site-selector.use": *woowa_live
|
|
131
|
+
"tokens.components.woowa-carousel-control.type": *woowa_live
|
|
132
|
+
"tokens.components.woowa-carousel-control.bg": *woowa_live
|
|
133
|
+
"tokens.components.woowa-carousel-control.fg": *woowa_live
|
|
134
|
+
"tokens.components.woowa-carousel-control.radius": *woowa_live
|
|
135
|
+
"tokens.components.woowa-carousel-control.height": *woowa_live
|
|
136
|
+
"tokens.components.woowa-carousel-control.states": *woowa_live
|
|
137
|
+
"tokens.components.woowa-carousel-control.use": *woowa_live
|
|
138
|
+
"tokens.components.font-download.type": *catalog_live
|
|
139
|
+
"tokens.components.font-download.bg": *catalog_live
|
|
140
|
+
"tokens.components.font-download.fg": *catalog_live
|
|
141
|
+
"tokens.components.font-download.height": *catalog_live
|
|
142
|
+
"tokens.components.font-download.font": *catalog_live
|
|
143
|
+
"tokens.components.font-download.states": *catalog_live
|
|
144
|
+
"tokens.components.font-download.use": *catalog_live
|
|
145
|
+
conflicts: []
|
|
12
146
|
tokens:
|
|
13
|
-
source:
|
|
14
|
-
extracted: "2026-
|
|
15
|
-
|
|
16
|
-
note: "app-first KR delivery brand — capped at 16 components. App surface (Mint #2AC1BC, 8px) documented from Baemin public brand/color guide + app-store screenshots; web marketing surface (Black Pill #000000 / 9999px, app-download card, carousel dots) measured live via playwright on baemin.com. primary = Baemin Mint #2AC1BC (app surface accent); teal #12B886 is the secondary UI green for confirmation fills"
|
|
147
|
+
source: reconciled
|
|
148
|
+
extracted: "2026-07-11"
|
|
149
|
+
note: "Baemin 2.0 officially confirms BAEMINWORK/WORK as the app typeface. Exact type metrics remain surface-local: baemin.com, Woowa corporate UI, and the official font catalog are measured separately."
|
|
17
150
|
colors:
|
|
18
|
-
primary: "#
|
|
19
|
-
brand: "#2AC1BC"
|
|
151
|
+
primary: "#0cefd3"
|
|
20
152
|
canvas: "#ffffff"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
muted: "#
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
error: "#FF6B6B"
|
|
31
|
-
warning: "#FFB347"
|
|
32
|
-
info: "#74C0FC"
|
|
33
|
-
promo: "#FF0000"
|
|
34
|
-
hairline: "#DEE2E6"
|
|
35
|
-
border-strong: "#343A40"
|
|
153
|
+
foreground: "#222222"
|
|
154
|
+
baemin-dark: "#000000"
|
|
155
|
+
baemin-panel: "#f6f6f6"
|
|
156
|
+
corporate-foreground: "#232324"
|
|
157
|
+
corporate-muted: "#6c6d6f"
|
|
158
|
+
corporate-surface: "#f3f4f5"
|
|
159
|
+
corporate-disabled: "#cccccc"
|
|
160
|
+
corporate-border: "#a6a7a9"
|
|
161
|
+
on-dark: "#ffffff"
|
|
36
162
|
typography:
|
|
37
|
-
family: { ui: "
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
heading:
|
|
42
|
-
title:
|
|
43
|
-
body
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
rounded: { sm: 4, md: 8, lg: 12, search: 20, full: 9999 }
|
|
50
|
-
shadow:
|
|
51
|
-
natural: "0px 1px 3px rgba(0,0,0,0.04)"
|
|
52
|
-
deep: "0px 2px 8px rgba(0,0,0,0.08)"
|
|
53
|
-
sharp: "0px 4px 12px rgba(0,0,0,0.10)"
|
|
54
|
-
outlined: "0px 4px 16px rgba(0,0,0,0.12)"
|
|
55
|
-
crisp: "0px 8px 24px rgba(0,0,0,0.16)"
|
|
163
|
+
family: { ui: "BAEMINWORK" }
|
|
164
|
+
baemin-hero: { size: 60, weight: 800, lineHeight: "84px" }
|
|
165
|
+
baemin-heading: { size: 24, weight: 700, lineHeight: "normal" }
|
|
166
|
+
baemin-button: { size: 16, weight: 700, lineHeight: "22.4px" }
|
|
167
|
+
corporate-heading: { size: 40, weight: 700, lineHeight: "52px", tracking: "-1.2px" }
|
|
168
|
+
corporate-card-title: { size: 24, weight: 700, lineHeight: "36px", tracking: "-0.4px" }
|
|
169
|
+
corporate-body: { size: 16, weight: 400, lineHeight: "24px", tracking: "-0.32px" }
|
|
170
|
+
corporate-label: { size: 14, weight: 700, lineHeight: "21px", tracking: "-0.32px" }
|
|
171
|
+
catalog-title: { size: 48, weight: 700, lineHeight: "64.8px", tracking: "-0.32px" }
|
|
172
|
+
spacing: { xs: 6, sm: 8, md: 12, lg: 16, xl: 20, xxl: 24, section: 32 }
|
|
173
|
+
rounded: { corporate-control: 8, download-card: 12, media-control: 16, circle: 9999 }
|
|
174
|
+
components_harvested: true
|
|
56
175
|
components:
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
restaurant-card: { type: card, bg: "#ffffff", radius: "12px", padding: "16px", font: "name 18px / 700 #212529 · delivery 13px / 400 #868e96", states: "rating star #ffb347 · 16:9 photo 12px top radius", use: "Restaurant listing card" }
|
|
65
|
-
tag: { type: badge, bg: "#f1f3f5", fg: "#495057", radius: "9999px", font: "12px / 500", use: "Restaurant attribute tags" }
|
|
66
|
-
search-bar: { type: input, bg: "#f8f9fa", fg: "#212529", radius: "20px", height: "44px", states: "left search icon #868e96 · placeholder #adb5bd", use: "Restaurant search (맛집을 검색해보세요)" }
|
|
67
|
-
input: { type: input, bg: "#ffffff", fg: "#212529", border: "1px solid #dee2e6", radius: "8px", focus: "2px solid #2ac1bc", states: "placeholder #adb5bd · error 2px solid #ff6b6b", use: "Text fields" }
|
|
68
|
-
bottom-tab-bar: { type: tab, bg: "#ffffff", border: "1px solid #dee2e6 top", active: "icon+label #2ac1bc", disabled: "#868e96 inactive", use: "Primary app navigation" }
|
|
69
|
-
top-app-bar: { type: tab, bg: "#ffffff", fg: "#212529", font: "18px / 700 centered title", use: "Screen header" }
|
|
70
|
-
floating-cart-button: { type: button, bg: "#2ac1bc", fg: "#ffffff", radius: "9999px", height: "56px", shadow: "0px 4px 12px rgba(0,0,0,0.10)", states: "count badge #ff6b6b white 11px / 700", use: "Floating cart access" }
|
|
71
|
-
badge: { type: badge, bg: "#ff6b6b", fg: "#ffffff", radius: "4px", font: "11px / 700", states: "promo #ff6b6b / #ffb347 · delivery #2ac1bc", use: "Promo / delivery status" }
|
|
72
|
-
toast: { type: toast, bg: "#212529", fg: "#ffffff", font: "14px / 400", states: "2.5s auto-dismiss", use: "Transient confirmation (장바구니에 담겼어요)" }
|
|
73
|
-
omd: "0.1"
|
|
176
|
+
app-download-card: { type: button, bg: "#ffffff", fg: "#222222", radius: "12px", height: "54px", padding: "14px 19px", font: "13.3333px / 400", states: "default and hover captured across store/QR variants", use: "baemin.com app-store and QR download action" }
|
|
177
|
+
baemin-nav-link: { type: button, bg: "transparent", fg: "#ffffff", height: "22px", font: "16px / 700", states: "default captured; hover not retained", use: "baemin.com top navigation action" }
|
|
178
|
+
woowa-more-light: { type: button, bg: "#f3f4f5", fg: "#232324", radius: "8px", height: "52px", padding: "0 22px", font: "16px / 700", states: "default captured; hover not retained", use: "Woowa corporate light read-more action" }
|
|
179
|
+
woowa-more-overlay: { type: button, bg: "rgba(0, 0, 0, 0.3)", fg: "#ffffff", border: "1px solid #ffffff", radius: "8px", height: "52px", padding: "0 22px", font: "16px / 700", states: "default on image overlay; hover not retained", use: "Woowa corporate overlay read-more action" }
|
|
180
|
+
woowa-site-selector: { type: button, bg: "#ffffff", fg: "#6c6d6f", border: "1px solid #a6a7a9", radius: "8px", height: "50px", padding: "13px 16px", font: "14px / 400", states: "default captured; expanded state not retained", use: "Woowa footer family-site selector" }
|
|
181
|
+
woowa-carousel-control: { type: button, bg: "rgba(0, 0, 0, 0.4)", fg: "#000000", radius: "50%", height: "40px", states: "default and disabled navigation states observed", use: "Woowa media carousel navigation" }
|
|
182
|
+
font-download: { type: button, bg: "transparent", fg: "#232324", height: "28px", font: "16px / 700", states: "available download and unavailable/disabled controls observed on the catalog", use: "official font catalog download action" }
|
|
74
183
|
---
|
|
75
184
|
|
|
76
185
|
# Design System Inspiration of Baemin (배달의민족)
|
|
77
186
|
|
|
78
187
|
## 1. Visual Theme & Atmosphere
|
|
79
188
|
|
|
80
|
-
Baemin is
|
|
189
|
+
Baemin is the Korean delivery platform that turned ordering food into a recognizable popular-culture brand through mint color, everyday wit, and an unusually sustained investment in Korean type. Launched in 2010 to move delivery from phone calls into an app, Baemin now describes its mission as keeping what people need from going cold—connecting speed with warmth across customers, restaurant owners, and riders. Its identity expects operational immediacy and familiar neighborhood culture to coexist, rather than forcing efficiency to look anonymous or institutional.
|
|
81
190
|
|
|
82
|
-
Typography
|
|
191
|
+
Typography is part of that identity, not decorative garnish. The official Baemin font program began with Hanna, modeled on the uneven acrylic-cut storefront lettering of 1960s–70s Korea, then expanded through Jua, Dohyeon, Euljiro, Kkubulim, and other faces that reinterpret hand-painted signs and vernacular lettering. The same cultural instinct appears in Baemin goods and writing: familiar objects, slightly unexpected forms, and short lines that feel conversational rather than institutional.
|
|
83
192
|
|
|
84
|
-
|
|
193
|
+
Baemin 2.0 adds a clearer digital layer to that playful heritage. In July 2025, Woowa Brothers officially introduced a brighter mint and the new WORK typeface in the Baemin app, describing both as a more vivid, modern, simple, and legible customer-centered identity. This reference therefore combines the current `#0cefd3` live color measurement with the official WORK product-font claim, while keeping exact web, corporate, catalog, and app measurements attached to their own surfaces.
|
|
85
194
|
|
|
86
195
|
**Key Characteristics:**
|
|
87
|
-
- Baemin
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
91
|
-
-
|
|
92
|
-
- Conversational UX writing ("배민다움") -- witty, warm, human
|
|
93
|
-
- Five-variant shadow system (Natural through Crisp) for nuanced elevation
|
|
196
|
+
- Bright Baemin 2.0 mint: official direction, measured live on baemin.com as `#0cefd3`
|
|
197
|
+
- WORK (`BAEMINWORK`): the official current Baemin app typeface, designed for simple and clear digital reading
|
|
198
|
+
- A long-running public font program rooted in Korean storefront lettering and freely shared brand culture
|
|
199
|
+
- Playful warmth in brand expression, paired with clearer and more direct product communication
|
|
200
|
+
- Surface-local metrics: app identity, baemin.com, Woowa corporate UI, and the font catalog are not flattened into one false system
|
|
94
201
|
|
|
95
202
|
## 2. Color Palette & Roles
|
|
96
203
|
|
|
97
|
-
###
|
|
98
|
-
- **
|
|
99
|
-
- **
|
|
100
|
-
- **
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
- **
|
|
106
|
-
- **
|
|
107
|
-
- **
|
|
108
|
-
- **
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
- **Text Primary** (`#212529`): Headings, menu item names, strong labels.
|
|
112
|
-
- **Text Secondary** (`#495057`): Body text, descriptions, ingredient lists.
|
|
113
|
-
- **Text Tertiary** (`#868E96`): Captions, timestamps, secondary metadata.
|
|
114
|
-
- **Text Disabled** (`#ADB5BD`): Placeholder text, disabled labels.
|
|
115
|
-
- **Border Light** (`#DEE2E6`): Standard card borders, dividers, input borders.
|
|
116
|
-
- **Surface Fill** (`#F8F9FA`): Background fill, secondary canvas.
|
|
117
|
-
- **Surface Subtle** (`#F1F3F5`): Tertiary background, input fills.
|
|
118
|
-
|
|
119
|
-
### Surface & Borders
|
|
120
|
-
- **Border Default**: `#DEE2E6`. Card borders, list dividers.
|
|
121
|
-
- **Border Strong**: `#343A40`. High-contrast borders for emphasis.
|
|
122
|
-
- **Overlay**: `rgba(0,0,0,0.5)`. Modal/sheet backdrops.
|
|
123
|
-
- **Overlay Dark**: `rgba(0,0,0,0.7)`. Full-screen image viewers.
|
|
204
|
+
### baemin.com
|
|
205
|
+
- **Accent** (`#0cefd3`): current bright public-web accent text/border observation.
|
|
206
|
+
- **Canvas** (`#ffffff`): app-download card and page surfaces.
|
|
207
|
+
- **Foreground** (`#222222`): download-card text.
|
|
208
|
+
- **Dark** (`#000000`): strongest current text/border observation.
|
|
209
|
+
- **Panel** (`#f6f6f6`): quiet current background surface.
|
|
210
|
+
|
|
211
|
+
### woowahan.com and official font pages
|
|
212
|
+
- **Corporate Foreground** (`#232324`): dominant text and control color.
|
|
213
|
+
- **Corporate Muted** (`#6c6d6f`): footer and secondary control text.
|
|
214
|
+
- **Corporate Surface** (`#f3f4f5`): light read-more and catalog control background.
|
|
215
|
+
- **Corporate Disabled** (`#cccccc`): disabled control text.
|
|
216
|
+
- **Corporate Border** (`#a6a7a9`): current selector/catalog border.
|
|
217
|
+
- **On Dark** (`#ffffff`): text/border on overlay actions.
|
|
124
218
|
|
|
125
219
|
## 3. Typography Rules
|
|
126
220
|
|
|
127
|
-
###
|
|
128
|
-
- **UI Primary**: `-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif`
|
|
129
|
-
- **Monospace**: `"SF Mono", SFMono-Regular, Menlo, Consolas, monospace`
|
|
130
|
-
- **Brand Display**: `"BMHANNA Pro"` -- signature Baemin font for brand headings and promotional banners
|
|
131
|
-
- **Brand Playful**: `"BMJua"` -- rounded, friendly, for casual brand copy
|
|
132
|
-
|
|
133
|
-
All 12 Baemin fonts are free under OFL license. Four are on Google Fonts (Jua, Do Hyeon, Kirang Haerang, Yeon Sung). Hanna variants available via direct download from woowahan.com.
|
|
134
|
-
|
|
135
|
-
### Hierarchy
|
|
136
|
-
|
|
137
|
-
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
|
138
|
-
|------|------|------|--------|-------------|----------------|-------|
|
|
139
|
-
| Display Hero | BMHANNA Pro | 42px | 700 | 1.20 | normal | Splash screens, brand moments |
|
|
140
|
-
| Display Large | System | 36px | 700 | 1.25 | normal | Campaign titles, section heroes |
|
|
141
|
-
| Heading Large | System | 24px | 700 | 1.33 | normal | Feature section titles |
|
|
142
|
-
| Heading | System | 20px | 700 | 1.40 | normal | Card headings, menu categories |
|
|
143
|
-
| Title | System | 18px | 600 | 1.44 | normal | Restaurant names, item titles |
|
|
144
|
-
| Body Large | System | 16px | 400 | 1.50 | normal | Descriptions, menu details |
|
|
145
|
-
| Body | System | 14px | 400 | 1.57 | normal | Standard reading, reviews |
|
|
146
|
-
| Body Small | System | 13px | 400 | 1.54 | normal | Secondary info, ingredients |
|
|
147
|
-
| Caption | System | 12px | 400 | 1.50 | normal | Timestamps, delivery times |
|
|
148
|
-
| Price Display | System | 20px | 700 | 1.30 | normal | Menu item prices, order totals |
|
|
149
|
-
|
|
150
|
-
### Principles
|
|
151
|
-
- **Dual personality**: System fonts for functional UI (ordering, tracking, payments), brand fonts for the experiential layer (banners, promotions, splash). The separation keeps the app professional while the brand stays playful.
|
|
152
|
-
- **Bold for clarity**: In food ordering, weight 700 is used liberally for menu names, prices, and CTAs. Users scan quickly through many options.
|
|
153
|
-
- **All fonts are free**: Every Baemin typeface is available under OFL license for personal and commercial use.
|
|
154
|
-
|
|
155
|
-
## 4. Component Patterns
|
|
156
|
-
|
|
157
|
-
Baemin runs **two parallel component systems**, and this section is honest about which surface each component comes from. The **app surface** (배달의민족 mobile app — Mint `#2AC1BC` primary, 8px radius, system fonts for chrome) is the brand's real product; its specs are grounded in Baemin's public color/brand guide and app-store screenshots. The **web marketing surface** (baemin.com) is a thin corporate/landing site with a *separate* Black Pill primary — its specs below are measured live via playwright `getComputedStyle`. The app is not web-inspectable (login-gated, native), so this is an honest TIER 3 cap of the components actually documentable, not an exhaustive design-system index.
|
|
158
|
-
|
|
159
|
-
### Actions
|
|
160
|
-
|
|
161
|
-
**Button — Primary (Brand Mint)** `[app]`
|
|
162
|
-
- Background: `#2AC1BC`, Text: `#ffffff`
|
|
163
|
-
- Padding: 12px 24px, Radius: 8px, Height: 48px min
|
|
164
|
-
- Font: 16px system weight 700
|
|
165
|
-
- Pressed: `#20A8A4` (darkened mint); Disabled: `#DEE2E6` bg, `#ADB5BD` text
|
|
166
|
-
- Use: Primary CTAs ("주문하기", "배달 주문")
|
|
167
|
-
|
|
168
|
-
**Button — Ghost (Secondary)** `[app]`
|
|
169
|
-
- Background: transparent, Text: `#2AC1BC`, Border: 1px solid `#2AC1BC`, Radius: 8px
|
|
170
|
-
- Pressed: `rgba(42,193,188,0.08)` background
|
|
171
|
-
- Use: Secondary actions ("장바구니", "찜하기")
|
|
172
|
-
|
|
173
|
-
**Button — Neutral** `[app]`
|
|
174
|
-
- Background: `#F8F9FA`, Text: `#212529`, Radius: 8px
|
|
175
|
-
- Use: Tertiary actions, filter toggles
|
|
176
|
-
|
|
177
|
-
**Button — Destructive** `[app]`
|
|
178
|
-
- Background: `#FF6B6B`, Text: `#ffffff`, Radius: 8px
|
|
179
|
-
- Use: Cancel order, remove item
|
|
221
|
+
### Current Product Typeface — WORK
|
|
180
222
|
|
|
181
|
-
**
|
|
182
|
-
- Background: `#000000`, Text: `#ffffff`
|
|
183
|
-
- Radius: 9999px (full pill), Padding: 16px 32px, Height: 58px
|
|
184
|
-
- Font: 18px weight 700
|
|
185
|
-
- Measured on baemin.com ("기업용 상품권 구매하기"). The marketing web deliberately uses high-contrast black, **not** mint, for its highest-impact corporate CTAs — the two systems are intentionally distinct.
|
|
223
|
+
**WORK** (captured family name: `BAEMINWORK`) is the current official Baemin app typeface introduced with Baemin 2.0 in July 2025. Woowa Brothers describes it as simpler and clearer than the earlier Hanna-led identity, with diagonal Hangeul strokes reduced into block-like forms. The family is a verified product-font fact; its binary is not publicly loaded by this preview, so the builder shows metadata without substituting another face.
|
|
186
224
|
|
|
187
|
-
|
|
188
|
-
- 56px circle, `#2AC1BC` fill, white cart icon
|
|
189
|
-
- Count badge: `#FF6B6B` circle, white text 11px weight 700, top-right
|
|
190
|
-
- Shadow: `0px 4px 12px rgba(0,0,0,0.10)` (Sharp / Level 3)
|
|
225
|
+
### Official Baemin Font Program
|
|
191
226
|
|
|
192
|
-
|
|
227
|
+
The downloadable font catalog is a separate but essential brand layer. These faces are official Baemin assets and cultural references; they are not automatically the current functional UI font.
|
|
193
228
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
**Carousel Dots / Progress** `[web — measured]`
|
|
202
|
-
- Inactive indicator `rgba(0,0,0,0.2)`, active `#000000` track
|
|
203
|
-
- Promo banner carousels on baemin.com use a thin progress-bar segment rather than circular dots.
|
|
204
|
-
|
|
205
|
-
### Forms
|
|
206
|
-
|
|
207
|
-
**Search Bar** `[app]`
|
|
208
|
-
- Background: `#F8F9FA`, Radius: 20px, Height: 44px
|
|
209
|
-
- Left search icon (`#868E96`), placeholder `#ADB5BD`, text `#212529`
|
|
210
|
-
- Full-width with 16px margin ("맛집을 검색해보세요")
|
|
211
|
-
|
|
212
|
-
**Text Input** `[app]`
|
|
213
|
-
- Border: 1px solid `#DEE2E6`, Radius: 8px
|
|
214
|
-
- Text: `#212529`, Placeholder: `#ADB5BD`
|
|
215
|
-
- Focus: 2px solid `#2AC1BC`; Error: 2px solid `#FF6B6B` + 13px/400 red error text below
|
|
216
|
-
|
|
217
|
-
### Data display
|
|
218
|
-
|
|
219
|
-
**Card / Container** `[app]`
|
|
220
|
-
- Background: `#ffffff`, Border: 1px solid `#DEE2E6` or no border with shadow
|
|
221
|
-
- Radius: 8px (standard), 12px (featured); Shadow: `0px 2px 8px rgba(0,0,0,0.08)` (Deep / Level 2)
|
|
222
|
-
|
|
223
|
-
**Restaurant Card** `[app]` — key component
|
|
224
|
-
- Image: full-width, 16:9, 12px top radius
|
|
225
|
-
- Name: 18px weight 700, `#212529`
|
|
226
|
-
- Rating: star icon (`#FFB347`) + score 14px weight 600
|
|
227
|
-
- Delivery info: 13px weight 400, `#868E96`
|
|
228
|
-
- Tags: pill (9999px radius), `#F1F3F5` bg, `#495057` text, 12px
|
|
229
|
-
- Internal padding: 16px
|
|
230
|
-
|
|
231
|
-
**App-Download Card** `[web — measured]`
|
|
232
|
-
- Background: `#ffffff`, Radius: 12px, Height: 54px, Padding: 14px 19px, no shadow
|
|
233
|
-
- Store-badge cards on the marketing site (App Store / Google Play links).
|
|
234
|
-
|
|
235
|
-
**Tag** `[app]`
|
|
236
|
-
- `#F1F3F5` bg, `#495057` text, pill radius, 12px font weight 500
|
|
229
|
+
| Family | Official origin / character | Evidence boundary |
|
|
230
|
+
|---|---|---|
|
|
231
|
+
| Hanna | Uneven acrylic-cut lettering from Korean storefront signs of the 1960s–70s | First Baemin font and a historical brand symbol |
|
|
232
|
+
| Jua | Rounded, non-uniform strokes inspired by hand-painted storefront signs | Warm display/brand asset, not asserted as app UI |
|
|
233
|
+
| Dohyeon | More methodically cut acrylic-sign lettering with connected Hangeul strokes | Display/brand asset, not asserted as app UI |
|
|
234
|
+
| Euljiro series | Weathered neighborhood sign lettering imagined across the passage of time | Expressive display/brand asset |
|
|
235
|
+
| Kkubulim | Bent rather than simply rounded edges, giving stiff text a free-spirited character | Current catalog asset |
|
|
237
236
|
|
|
238
|
-
|
|
237
|
+
The official license permits personal and corporate commercial/non-commercial use and modification under its stated terms; selling the font files by themselves is prohibited. Bundling or redistribution must retain the license text and reserved-name conditions.
|
|
239
238
|
|
|
240
|
-
|
|
241
|
-
- Rises from bottom, Outlined shadow `0px 4px 16px rgba(0,0,0,0.12)` (Level 4)
|
|
242
|
-
- Backdrop overlay `rgba(0,0,0,0.5)`; payment-declined uses a centered modal with 18px/700 `#212529` headline + two CTAs (primary mint, neutral cancel)
|
|
239
|
+
### Verified Surface Metrics
|
|
243
240
|
|
|
244
|
-
|
|
241
|
+
The table below keeps measurements tied to the surfaces where they were observed. The baemin.com and Woowa rows describe current public web rendering, not a fallback stack for the Baemin app.
|
|
245
242
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
-
|
|
243
|
+
| Evidence class | Baemin status |
|
|
244
|
+
|---|---|
|
|
245
|
+
| **Official product-use** | WORK / `BAEMINWORK`, confirmed as applied to the Baemin app in the official Baemin 2.0 announcement |
|
|
246
|
+
| **Live surface-use** | System on baemin.com; Pretendard Variable on Woowa corporate and font-catalog surfaces |
|
|
247
|
+
| **Official distributed asset** | Hanna, Jua, Dohyeon, Euljiro, Kkubulim, and the wider downloadable Baemin font program |
|
|
248
|
+
| **Declared-only** | Heritage BM FontFace assets declared on public pages but not observed as first-family page chrome |
|
|
249
|
+
| **Unresolved** | Exact native-app type scale/weights and an authorized browser-loadable WORK specimen |
|
|
250
|
+
|
|
251
|
+
| Role | Size | Weight | Line Height | Tracking |
|
|
252
|
+
|---|---:|---:|---:|---:|
|
|
253
|
+
| Baemin Web Hero | 60px | 800 | 84px | normal |
|
|
254
|
+
| Baemin Web Heading | 24px | 700 | normal | normal |
|
|
255
|
+
| Baemin Web Button | 16px | 700 | 22.4px | normal |
|
|
256
|
+
| Corporate Heading | 40px | 700 | 52px | -1.2px |
|
|
257
|
+
| Corporate Card Title | 24px | 700 | 36px | -0.4px |
|
|
258
|
+
| Corporate Body | 16px | 400 | 24px | -0.32px |
|
|
259
|
+
| Corporate Label | 14px | 700 | 21px | -0.32px |
|
|
260
|
+
| Font Catalog Title | 48px | 700 | 64.8px | -0.32px |
|
|
249
261
|
|
|
250
|
-
|
|
251
|
-
- `#212529` bg, white 14px weight 400 text, 2.5s auto-dismiss ("장바구니에 담겼어요"); floating cart badge increments simultaneously
|
|
262
|
+
## 4. Component Patterns
|
|
252
263
|
|
|
253
|
-
|
|
254
|
-
-
|
|
264
|
+
### baemin.com App Download Card
|
|
265
|
+
- Background: `#ffffff`
|
|
266
|
+
- Text: `#222222`
|
|
267
|
+
- Radius: 12px
|
|
268
|
+
- Height: 54px
|
|
269
|
+
- Padding: 14px 19px
|
|
270
|
+
- Text style: 13.3333px / 400
|
|
271
|
+
- States: default and hover captured across store/QR variants
|
|
272
|
+
- Use: app-store and QR download action
|
|
273
|
+
|
|
274
|
+
### baemin.com Navigation Action
|
|
275
|
+
- Background: transparent
|
|
276
|
+
- Text: `#ffffff`
|
|
277
|
+
- Height: 22px
|
|
278
|
+
- Text style: 16px / 700
|
|
279
|
+
- States: default captured; hover not retained
|
|
280
|
+
|
|
281
|
+
### Woowa Light Read-More
|
|
282
|
+
- Background: `#f3f4f5`
|
|
283
|
+
- Text: `#232324`
|
|
284
|
+
- Radius: 8px
|
|
285
|
+
- Height: 52px
|
|
286
|
+
- Padding: 0 22px
|
|
287
|
+
- Text style: 16px / 700
|
|
288
|
+
- States: default captured; hover not retained
|
|
289
|
+
|
|
290
|
+
### Woowa Overlay Read-More
|
|
291
|
+
- Background: `rgba(0, 0, 0, 0.3)`
|
|
292
|
+
- Text: `#ffffff`
|
|
293
|
+
- Border: 1px solid `#ffffff`
|
|
294
|
+
- Radius: 8px
|
|
295
|
+
- Height: 52px
|
|
296
|
+
- Padding: 0 22px
|
|
297
|
+
- Text style: 16px / 700
|
|
298
|
+
- States: default on image overlay; hover not retained
|
|
299
|
+
|
|
300
|
+
### Woowa Family-Site Selector
|
|
301
|
+
- Background: `#ffffff`
|
|
302
|
+
- Text: `#6c6d6f`
|
|
303
|
+
- Border: 1px solid `#a6a7a9`
|
|
304
|
+
- Radius: 8px
|
|
305
|
+
- Height: 50px
|
|
306
|
+
- Padding: 13px 16px
|
|
307
|
+
- Text style: 14px / 400
|
|
308
|
+
- States: default captured; expanded state not retained
|
|
309
|
+
|
|
310
|
+
### Woowa Carousel Control
|
|
311
|
+
- Background: `rgba(0, 0, 0, 0.4)`
|
|
312
|
+
- Text/Icon context: `#000000`
|
|
313
|
+
- Radius: 50%
|
|
314
|
+
- Height: 40px
|
|
315
|
+
- States: default and disabled navigation states observed
|
|
316
|
+
|
|
317
|
+
### Official Font Download
|
|
318
|
+
- Background: transparent
|
|
319
|
+
- Text: `#232324`
|
|
320
|
+
- Height: 28px
|
|
321
|
+
- Text style: 16px / 700
|
|
322
|
+
- States: available download and unavailable/disabled catalog controls observed
|
|
255
323
|
|
|
256
324
|
---
|
|
257
325
|
|
|
258
|
-
**Verified:** 2026-
|
|
259
|
-
**
|
|
260
|
-
**Tier
|
|
261
|
-
**
|
|
262
|
-
**
|
|
263
|
-
**Surface split:** §4 above documents the **app surface** (배달의민족 mobile app — Mint `#2AC1BC` primary, 8px radius, system fonts for chrome). The marketing web (baemin.com) uses a **separate Black Pill** primary at 9999px / 18px·700 (verified above) for high-impact corporate CTAs. Both retained as parallel systems.
|
|
264
|
-
**Conflicts unresolved:** none. Mint primary inferred from prior brand documentation (Baemin 공식 색 가이드, app store screenshots) — not contradicted by web inspect.
|
|
326
|
+
**Verified:** 2026-07-12 (verification v2, four live first-party web surfaces + official Baemin 2.0 product source)
|
|
327
|
+
**Tier 1 sources:** https://www.baemin.com/ https://www.woowahan.com/ https://www.woowahan.com/fonts https://www.woowahan.com/fonts/license https://www.woowahan.com/report/detail/975?page=1
|
|
328
|
+
**Tier 2 sources:** https://getdesign.md/baemin and https://styles.refero.design/?q=Baemin did not provide importable current records.
|
|
329
|
+
**Surface split:** WORK is promoted only as the officially confirmed app family; baemin.com, Woowa corporate, and the asset catalog retain their separately measured metrics and roles.
|
|
330
|
+
**Conflicts unresolved:** none
|
|
265
331
|
|
|
266
332
|
## 5. Layout Principles
|
|
267
333
|
|
|
268
|
-
|
|
269
|
-
-
|
|
270
|
-
-
|
|
271
|
-
- Card internal padding: 16px
|
|
272
|
-
- Section gaps: 24px-32px
|
|
273
|
-
|
|
274
|
-
### Grid & Container
|
|
275
|
-
- Mobile: full-width, 16px horizontal padding
|
|
276
|
-
- Content max-width: 768px for tablet/web
|
|
277
|
-
- Restaurant list: single-column on mobile, 2-column on tablet
|
|
278
|
-
- Category grid: horizontal scroll with equal-width items
|
|
279
|
-
|
|
280
|
-
### Whitespace Philosophy
|
|
281
|
-
- **Appetizing spacing**: Food photos get generous whitespace to feel premium. A cramped photo kills appetite; a well-spaced one invites exploration.
|
|
282
|
-
- **Scan-friendly density**: Restaurant lists balance showing 3-4 options per viewport with enough detail per card to decide without tapping.
|
|
283
|
-
- **Card-format composition**: All service information is composed of card-format combinations that auto-transform based on device.
|
|
284
|
-
|
|
285
|
-
### Border Radius Scale
|
|
286
|
-
- Standard (4px): Small badges, promotional tags
|
|
287
|
-
- Comfortable (8px): Buttons, inputs, standard cards
|
|
288
|
-
- Featured (12px): Restaurant cards, image containers
|
|
289
|
-
- Search (20px): Search bar, large rounded containers
|
|
290
|
-
- Pill (9999px): Category tags, filter chips
|
|
334
|
+
- baemin.com current control spacing clusters around 6px and 20px.
|
|
335
|
+
- Woowa corporate composition repeatedly uses 8px, 12px, 16px, 20px, 24px, and 32px.
|
|
336
|
+
- These are public-web values; no native ordering-app grid, breakpoint, or touch-target scale is claimed.
|
|
291
337
|
|
|
292
338
|
## 6. Depth & Elevation
|
|
293
339
|
|
|
294
|
-
|
|
295
|
-
|-------|-----------|-----|
|
|
296
|
-
| Flat (Level 0) | No shadow | Page background, inline elements |
|
|
297
|
-
| Natural (Level 1) | `0px 1px 3px rgba(0,0,0,0.04)` | Subtle card separation, list items |
|
|
298
|
-
| Deep (Level 2) | `0px 2px 8px rgba(0,0,0,0.08)` | Standard restaurant cards |
|
|
299
|
-
| Sharp (Level 3) | `0px 4px 12px rgba(0,0,0,0.10)` | Floating cart button, active overlays |
|
|
300
|
-
| Outlined (Level 4) | `0px 4px 16px rgba(0,0,0,0.12)` | Bottom sheets, modal dialogs |
|
|
301
|
-
| Crisp (Level 5) | `0px 8px 24px rgba(0,0,0,0.16)` | Full-screen overlays, floating menus |
|
|
302
|
-
|
|
303
|
-
**Shadow Philosophy**: Baemin uses five tiers -- richer than most mobile apps, reflecting the layered nature of a delivery platform where maps, restaurant lists, order sheets, and cart overlays compete for attention. The naming (Natural, Deep, Sharp, Outlined, Crisp) reflects Baemin's design culture of using evocative, human language rather than cold technical terms.
|
|
340
|
+
No canonical shadow token is promoted. Current retained controls use flat fills, borders, or translucent overlays. Earlier five-tier app-shadow claims were not grounded by inspectable native evidence and were removed.
|
|
304
341
|
|
|
305
342
|
## 7. Do's and Don'ts
|
|
306
343
|
|
|
307
344
|
### Do
|
|
308
|
-
- Use Baemin
|
|
309
|
-
-
|
|
310
|
-
-
|
|
311
|
-
-
|
|
312
|
-
- Keep border-radius between 4px-12px for standard UI elements
|
|
313
|
-
- Use the conversational, warm tone for UX writing (Baemin voice)
|
|
314
|
-
- Use illustration-based icons for food categories -- appetizing over geometric
|
|
345
|
+
- Use WORK as the current Baemin app identity when a typeface name is required, while marking live preview availability honestly.
|
|
346
|
+
- Keep public-web and corporate type metrics attached to their measured surfaces.
|
|
347
|
+
- Treat Hanna, Jua, Dohyeon, Euljiro, and Kkubulim as official brand assets with their own historical character.
|
|
348
|
+
- Name each component by its source surface.
|
|
315
349
|
|
|
316
350
|
### Don't
|
|
317
|
-
- Don't
|
|
318
|
-
- Don't
|
|
319
|
-
- Don't
|
|
320
|
-
- Don't
|
|
321
|
-
- Don't
|
|
322
|
-
- Don't
|
|
323
|
-
- Don't make checkout/payment "fun" -- ordering should be clear and trustworthy
|
|
351
|
+
- Don't replace WORK with System, Arial, Pretendard, or a catalog display face in an app-facing design.
|
|
352
|
+
- Don't treat every official Baemin font as a functional product UI family.
|
|
353
|
+
- Don't treat `#2ac1bc` as a verified current web token; this run observed `#0cefd3` on baemin.com.
|
|
354
|
+
- Don't retain the old black pill CTA after it disappeared from the current capture.
|
|
355
|
+
- Don't fabricate restaurant cards, app tabs, inputs, badges, toasts, native motion, or semantic colors from remembered Baemin patterns.
|
|
356
|
+
- Don't infer license permissions from a font file alone; keep the official license page with any redistribution workflow.
|
|
324
357
|
|
|
325
358
|
## 8. Responsive Behavior
|
|
326
359
|
|
|
327
|
-
|
|
328
|
-
| Name | Width | Key Changes |
|
|
329
|
-
|------|-------|-------------|
|
|
330
|
-
| Mobile (Primary) | <480px | Full design, single column, 16px gutter |
|
|
331
|
-
| Tablet | 480-768px | 2-column restaurant grid, expanded cards |
|
|
332
|
-
| Desktop (Web) | >768px | Centered content, max-width 768px |
|
|
333
|
-
|
|
334
|
-
### Touch Targets
|
|
335
|
-
- CTA buttons: minimum 48px height, full-width on mobile
|
|
336
|
-
- Restaurant cards: entire card tappable, min 120px height
|
|
337
|
-
- Category scrollers: 44px minimum touch height
|
|
338
|
-
- Cart floating button: 56px circular, fixed bottom-right
|
|
339
|
-
- Quantity steppers: 36px minimum
|
|
340
|
-
|
|
341
|
-
### Collapsing Strategy
|
|
342
|
-
- Restaurant grid: 2-column → single column below 480px
|
|
343
|
-
- Category bar: horizontal scroll on all sizes, no wrapping
|
|
344
|
-
- Order summary: full-width sheet on mobile, side panel on tablet+
|
|
345
|
-
- Search: full-screen overlay on mobile, inline on desktop
|
|
346
|
-
|
|
347
|
-
### Image Behavior
|
|
348
|
-
- Restaurant photos: 16:9 aspect ratio, full card width, 12px top radius
|
|
349
|
-
- Menu thumbnails: 1:1 square, 8px radius, 80-100px on mobile
|
|
350
|
-
- Promotional banners: full-width, swipeable carousel
|
|
360
|
+
The public web surfaces are responsive, but this pass does not promote universal breakpoints. Preserve the captured component geometry at the relevant web surface and treat native-app responsive/touch behavior as unresolved until a device-inspectable evidence source exists.
|
|
351
361
|
|
|
352
362
|
## 9. Agent Prompt Guide
|
|
353
363
|
|
|
354
|
-
|
|
355
|
-
-
|
|
356
|
-
-
|
|
357
|
-
-
|
|
358
|
-
- Background: Pure White (`#ffffff`)
|
|
359
|
-
- Background Surface: Light Gray (`#F8F9FA`)
|
|
360
|
-
- Heading text: Dark Charcoal (`#212529`)
|
|
361
|
-
- Body text: Dark Gray (`#495057`)
|
|
362
|
-
- Caption text: Medium Gray (`#868E96`)
|
|
363
|
-
- Placeholder: Soft Gray (`#ADB5BD`)
|
|
364
|
-
- Border: Light Gray (`#DEE2E6`)
|
|
365
|
-
- Error: Warm Red (`#FF6B6B`)
|
|
366
|
-
- Rating: Warm Orange (`#FFB347`)
|
|
367
|
-
|
|
368
|
-
### Example Component Prompts
|
|
369
|
-
- "Create a restaurant card: white bg, 12px radius. Full-width photo (16:9, 12px top radius). Name 18px weight 700, #212529. Star icon (#FFB347) + rating 14px weight 600. Delivery time + fee 13px weight 400, #868E96. Tags as pills (#F1F3F5 bg, #495057 text). 16px padding."
|
|
370
|
-
- "Build a primary button: #2AC1BC bg, white text, 16px weight 700, 48px height, 8px radius, full-width. Pressed: #20A8A4."
|
|
371
|
-
- "Design a menu item row: 16px padding. Left: name (16px weight 600, #212529) + description (13px weight 400, #868E96, 2-line max) + price (16px weight 700). Right: 80px square thumbnail, 8px radius. Divider: 1px solid #DEE2E6."
|
|
372
|
-
- "Build a floating cart button: 56px circle, #2AC1BC bg, white cart icon. Badge: 18px circle, #FF6B6B bg, white text 11px weight 700, top-right. Shadow: 0px 4px 12px rgba(0,0,0,0.10)."
|
|
373
|
-
- "Design a search bar: #F8F9FA bg, 20px radius, 44px height. Left: 16px padding + #868E96 search icon. Placeholder '맛집을 검색해보세요' in #ADB5BD. Text: #212529. Full-width with 16px margin."
|
|
374
|
-
|
|
375
|
-
### Iteration Guide
|
|
376
|
-
1. System fonts for UI, BMHANNA for brand display moments only
|
|
377
|
-
2. Primary accent is `#2AC1BC` (Baemin Mint) -- warm, not cold
|
|
378
|
-
3. Food photography is centerpiece: 16:9 for restaurants, 1:1 for menu items
|
|
379
|
-
4. Bold (700) used liberally for names, prices, CTAs -- food ordering needs scannable bold
|
|
380
|
-
5. Border-radius: 8px buttons/inputs, 12px restaurant cards, pill for tags
|
|
381
|
-
6. Five shadow levels: use Deep (Level 2) as default card shadow
|
|
382
|
-
7. Warm neutrals: #212529 headings, #F8F9FA backgrounds
|
|
383
|
-
|
|
384
|
-
---
|
|
364
|
+
- “Reproduce the current baemin.com download action as a 54px white card with 12px radius, 14px 19px padding, `#222222` text, and 13.3333px/400 type.”
|
|
365
|
+
- “Use WORK as the Baemin 2.0 product typeface, but leave the live specimen unavailable unless an authorized browser-loadable source is present.”
|
|
366
|
+
- “Use the verified Woowa corporate geometry with `#232324` foreground and 8px control radius only for Woowa corporate surfaces.”
|
|
367
|
+
- “Pair Baemin's playful cultural character with the clearer, more direct customer experience of Baemin 2.0.”
|
|
385
368
|
|
|
386
369
|
## 10. Voice & Tone
|
|
387
370
|
|
|
388
|
-
Baemin's voice is
|
|
371
|
+
Baemin's brand voice is warm, concise, and unexpectedly playful. The humor usually comes from observing an ordinary situation closely—a meal, a neighborhood sign, a familiar household object—then turning it slightly rather than performing a joke for its own sake. Product communication should stay clearer than campaign or merchandise copy: Baemin 2.0 explicitly prioritizes a clear customer experience and confidence in the service.
|
|
389
372
|
|
|
390
373
|
| Context | Tone |
|
|
391
374
|
|---|---|
|
|
392
|
-
|
|
|
393
|
-
|
|
|
394
|
-
|
|
|
395
|
-
|
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
| Delivery tracking | Matter-of-fact, present tense (`가게에서 음식을 준비하고 있어요`, `라이더가 픽업했어요`). Progression is the drama; copy stays calm. |
|
|
399
|
-
| Promotional banners / push | Wordplay + rhyme licensed here. "지금 배민됩니다", "시켜도 시켜도 배달팁 무료 배민클럽!". <!-- verified: baemin.com, 2026-04 --> |
|
|
400
|
-
| Payment / refund / dispute | Formal 합니다 endings. Humor forbidden. The only surface where Baemin stops being funny. |
|
|
401
|
-
|
|
402
|
-
**Forbidden phrases.** `불편을 드려 죄송합니다` as a boilerplate opener (be specific instead), `Oops`, English `Sorry` on Korean UI, generic `데이터가 없습니다` / `오류가 발생했습니다`. On payment, refund, or delivery-dispute screens: rhyme, puns, and B급 감성 humor are all forbidden — the brand's playfulness is a marketing-surface privilege, not a universal voice. Never use Baemin Mint (`#2AC1BC`) as a decorative tone cue in text ("<span style="color:mint">재밌게</span>") — color is not voice.
|
|
403
|
-
|
|
404
|
-
**Representative voice samples.** Baemin's most quoted Korean copy (e.g., *"치킨은 살 안 쪄요, 살은 내가 쪄요"*) comes from the annual **배민신춘문예** user-submitted poetry contest — that string is a 2017 grand-prize entry by a Baemin user, [not a Baemin product string](https://www.ajunews.com/view/20170411135156182). When agents generate "Baemin-style" copy they should emulate the *register* (wordplay, rhyme, retro B급 감성) on marketing surfaces only, not quote the contest entries as if they were live UI.
|
|
405
|
-
|
|
406
|
-
- Hero campaign slogan (verified): *"세상 모든 것이 식지 않도록"* <!-- verified: baemin.com hero, 2026-04 --> — evocative, metaphorical; sets the tone for marketing headlines.
|
|
407
|
-
- Membership banner (verified): *"시켜도 시켜도 배달팁 무료 배민클럽!"* <!-- verified: baemin.com, 2026-04 --> — rhyme + repetition, classic Baemin marketing register.
|
|
408
|
-
- Gift service tagline (verified): *"마음을 배달해드려요"* <!-- verified: baemin.com 선물하기 section, 2026-04 --> — polite 요 ending, sentiment-forward.
|
|
409
|
-
- Payment speed claim (verified): *"10초 만에 결제 완료"* <!-- verified: baemin.com 배민페이, 2026-04 --> — matter-of-fact on functional surface; no humor.
|
|
410
|
-
- Empty state (cart): *"장바구니에 담긴 메뉴가 없어요. 드시고 싶은 메뉴를 담아보세요."* <!-- illustrative: not verified as live Baemin copy -->
|
|
411
|
-
- Error (payment failed): *"결제가 완료되지 않았어요. 카드 정보를 다시 확인해주세요."* <!-- illustrative: not verified as live Baemin copy -->
|
|
412
|
-
- Success (order placed): *"주문이 접수됐어요. 가게에서 확인 중이에요."* <!-- illustrative: not verified as live Baemin copy -->
|
|
375
|
+
| Ordering, payment, delivery status | Direct, reassuring, immediately understandable |
|
|
376
|
+
| Help and error recovery | Specific about what happened and what the user can do next |
|
|
377
|
+
| Campaigns, goods, cultural content | Short, conversational, observant, allowed one surprising turn |
|
|
378
|
+
| Restaurant-owner and rider communication | Respectful, practical, partnership-oriented |
|
|
379
|
+
|
|
380
|
+
Verified brand expressions include the current mission around keeping things from going cold, the long-running use of ordinary-life wordplay in Baemin goods, and the official framing of Baemin fonts as freely shared cultural assets. Do not reuse slogans verbatim as generic UI filler.
|
|
413
381
|
|
|
414
382
|
## 11. Brand Narrative
|
|
415
383
|
|
|
416
|
-
Baemin
|
|
384
|
+
Baemin launched in 2010 with the aim of advancing food delivery through information technology, moving a phone-call habit into an app experience. Its identity grew beyond utility: the official company history describes Hanna—the first freely shared Baemin font—as an integral brand symbol that helped widen the landscape of Hangeul type.
|
|
417
385
|
|
|
418
|
-
|
|
386
|
+
That public type program became a durable expression of how Baemin sees culture. Hanna preserved the charming imprecision of hand-cut acrylic signs; later faces explored hand-painted storefronts, connected strokes, weathering, and bent forms. Fonts, goods, and music are presented by Woowa Brothers as original Baemin cultural assets intended to be used and enjoyed beyond the product itself.
|
|
419
387
|
|
|
420
|
-
|
|
388
|
+
Baemin 2.0 marks a deliberate evolution rather than a rejection of that history. The 2025 rebrand introduced a brighter mint and WORK in the app, alongside a mission centered on delivering immediate satisfaction without letting value “go cold.” The design implication is a dual character: cultural expression can remain witty and tactile, while product interactions become clearer, more legible, and more dependable.
|
|
421
389
|
|
|
422
390
|
## 12. Principles
|
|
423
391
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
2. **Typography is heritage, not infrastructure.** Baemin's custom fonts (한나체, 주아체, 도현체, 을지로체, 기랑해랑체) exist to preserve Korean signboard vocabulary that would otherwise disappear. They are brand-presence fonts, not UI-text fonts. *UI implication:* system sans-serif for functional UI (menu lists, prices, forms, tracking); BMHANNA / BMJua for hero banners, splash screens, and promotional moments only. Never set body text in a Baemin custom font — the quirks that make it beautiful kill readability at 14px.
|
|
427
|
-
|
|
428
|
-
3. **Mint is the counter-industry signal.** `#2AC1BC` was chosen specifically because the food-delivery category defaults to warm reds and oranges. Mint is the brand's "we are not a logistics company" flag. *UI implication:* mint is an accent, not a canvas — use it for CTAs, active tab states, selection highlights, and the app-icon. Flooding a screen with mint (full-width mint hero backgrounds, mint card fills) erases the signal it was meant to carry.
|
|
429
|
-
|
|
430
|
-
4. **Food is the star; UI is the frame.** A restaurant card's job is to make the food photo appetizing. Chrome that crowds, overlays, or desaturates the photography fails the brief. *UI implication:* 16:9 photo at card-top, no text overlays on photos, no mint badges pinned inside the image area. Promo badges sit in the padding, not on the food.
|
|
431
|
-
|
|
432
|
-
5. **Scannable bold for decision screens.** Food ordering is a high-choice low-value decision (30+ options per list, tap in 1–2 seconds each). Users scan, not read. *UI implication:* 700-weight for restaurant names, prices, primary CTAs, and delivery ETAs. Reserve 400 for descriptions and metadata. Mid-weight 500/600 is allowed on titles and subtitles but not on scan-value items (names, prices).
|
|
433
|
-
|
|
434
|
-
6. **Progressive density, spacious summaries.** The home screen and category screens are spacious; the menu page and cart page are denser. *UI implication:* as the user commits (home → restaurant → menu → cart → checkout), horizontal padding tightens (16px → 12px) and row heights compress. The shallower the context, the more whitespace; the deeper, the more information per pixel.
|
|
392
|
+
These are evidence-derived implementation principles:
|
|
435
393
|
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
394
|
+
1. **Warmth must survive speed.** Fast delivery and clear interaction should still feel human.
|
|
395
|
+
2. **Culture is a system asset.** Typography, language, goods, and music can carry the brand beyond the transaction.
|
|
396
|
+
3. **Playfulness needs a straight man.** Let campaigns and brand moments bend expectations; keep ordering and recovery flows explicit.
|
|
397
|
+
4. **Current clarity beats nostalgia.** WORK and the brighter mint define the product-facing Baemin 2.0 layer; heritage fonts remain purposeful brand assets.
|
|
398
|
+
5. **Keep evidence surface-local.** App, marketing web, corporate web, and the font catalog may belong to one brand without sharing every token.
|
|
439
399
|
|
|
440
400
|
## 13. Personas
|
|
441
401
|
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
**지현 (Jihyun), 29, Seoul.** Marketing manager, lives in a Gangnam officetel. Opens Baemin 4–6 times a week — late-lunch when she skipped the office canteen, post-work dinner, late-night chicken with roommates. Taps the same 5–6 restaurants on repeat; the "Recent orders" row is her actual home screen. Refuses to wait more than 40 minutes for food — anything over 40 and she filters out the restaurant regardless of rating.
|
|
445
|
-
|
|
446
|
-
**대호 (Daeho), 38, Busan.** Runs a small ad agency with 4 employees. Uses Baemin for team lunches 2–3 times a week and for the occasional client dinner order. Cares about delivery tip transparency more than food price — a ₩1,000 tip variance matters when ordering for 5 people. Skeptical of promoted banners; actively scrolls past the hero carousel to reach the category row.
|
|
402
|
+
These are official stakeholder contexts from Woowa Brothers reporting, not invented demographic personas.
|
|
447
403
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
404
|
+
- **Customers:** want an efficient app, accessible service, and a differentiated delivery experience.
|
|
405
|
+
- **Restaurant owners:** need practical tools that improve store operations, capability building, and access to online demand.
|
|
406
|
+
- **Riders:** need safe working conditions, useful operational support, and confidence in the delivery ecosystem.
|
|
451
407
|
|
|
452
408
|
## 14. States
|
|
453
409
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
| State | Treatment |
|
|
410
|
+
| Component | Verified state evidence |
|
|
457
411
|
|---|---|
|
|
458
|
-
|
|
|
459
|
-
|
|
|
460
|
-
|
|
|
461
|
-
|
|
|
462
|
-
| **Loading (map-tracking)** | Map renders first; rider icon pulses between two opacity values over 1.5s while position resolves. ETA text shows `--` until server returns, never a placeholder minute count. |
|
|
463
|
-
| **Loading (checkout / payment)** | Full-width button shows a 3-dot white animation replacing the label text. Button width does not change. User cannot double-tap; the press is committed. |
|
|
464
|
-
| **Error (inline field)** | 2px `#FF6B6B` border on the input. Error text below in red500 (13px weight 400). One actionable sentence (*"주소를 다시 확인해주세요"* <!-- illustrative -->). |
|
|
465
|
-
| **Error (payment declined)** | Modal (this is not a transient error). Headline 18px weight 700 `#212529`: *"결제가 완료되지 않았어요"* <!-- illustrative -->. Body 14px weight 400 explaining the cause (insufficient funds / card expired / 3DS failed). Two CTAs: *"다른 카드로 결제"* (primary mint) and *"취소"* (neutral). No humor on this surface. |
|
|
466
|
-
| **Error (network / service down)** | Top banner, `#343A40` bg, white text, one sentence (*"일시적으로 연결이 불안정해요"* <!-- illustrative -->) + retry pill. Banner auto-dismisses when connectivity returns. |
|
|
467
|
-
| **Success (order placed)** | Dedicated confirmation screen — not a toast. Mint checkmark icon top-center, order number in 16px weight 600 `#495057`, restaurant name in 20px weight 700 `#212529`, estimated delivery time in 14px weight 400. Single primary CTA *"주문 내역 보기"*. Ordering is ceremonial here — receipts matter. |
|
|
468
|
-
| **Success (item added to cart)** | Bottom toast, `#212529` bg, white 14px 400 text, 2.5s auto-dismiss (*"장바구니에 담겼어요"* <!-- illustrative -->). Floating cart button badge increments simultaneously. |
|
|
469
|
-
| **Skeleton** | `#F1F3F5` blocks at exact final card dimensions (16:9 photo slot, name row, meta row). Shimmer 1.2s. Ratings render as an 80px-wide block, never a placeholder star that could read as 0. Prices render as `---원` until resolved — never `0원`, which reads as "free" and misleads. |
|
|
470
|
-
| **Disabled** | Button background drops to `#DEE2E6`, text to `#ADB5BD`. Corner radius stays at 8px — never flattens or rounds to a different shape. Disabled state on the "주문하기" CTA shows *why* inline above the button (e.g., "최소 주문 금액 ₩12,000에 ₩3,000 부족해요" <!-- illustrative -->), not as a separate toast. |
|
|
412
|
+
| App download card | default, hover |
|
|
413
|
+
| Woowa carousel | default, disabled |
|
|
414
|
+
| Font catalog download | available, unavailable/disabled controls |
|
|
415
|
+
| Other retained buttons | default only; missing states remain explicitly unclaimed |
|
|
471
416
|
|
|
472
417
|
## 15. Motion & Easing
|
|
473
418
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
**Durations** (named, not raw milliseconds):
|
|
477
|
-
|
|
478
|
-
| Token | Value | Use |
|
|
479
|
-
|---|---|---|
|
|
480
|
-
| `motion-instant` | 0ms | Toggle commits, checkbox state changes |
|
|
481
|
-
| `motion-fast` | 150ms | Hover, focus, button press overlay, image thumbnail tap |
|
|
482
|
-
| `motion-standard` | 250ms | The default — sheet opens, card expands, tab switches, toast appear |
|
|
483
|
-
| `motion-slow` | 400ms | Order-confirmation reveal, success checkmark stroke |
|
|
484
|
-
| `motion-page` | 300ms | Route transitions between top-level tabs |
|
|
485
|
-
|
|
486
|
-
**Easings:**
|
|
487
|
-
|
|
488
|
-
| Token | Curve | Use |
|
|
489
|
-
|---|---|---|
|
|
490
|
-
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — sheets, toasts, screen pushes |
|
|
491
|
-
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals, pops |
|
|
492
|
-
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — card expand/collapse, tab content |
|
|
493
|
-
| `ease-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | **Licensed only for:** category icon tap feedback and favorite heart toggle. Overshoot on CTAs, payment confirmation, or checkout transitions is forbidden — commerce precision outranks kinetic delight on money surfaces. |
|
|
494
|
-
|
|
495
|
-
**Signature motions.**
|
|
496
|
-
|
|
497
|
-
1. **Restaurant card tap feedback.** Card scales `1.0` → `0.98` over `motion-fast / ease-standard` on press, returns on release. Tactile but not bouncy.
|
|
498
|
-
2. **Category icon tap.** Icon scales `1.0` → `1.1` → `1.0` over `motion-standard` with `ease-bounce`. This is one of two places overshoot is allowed — the category row is where Baemin's warmth lives most visibly.
|
|
499
|
-
3. **Favorite heart toggle.** Heart icon fills over `motion-fast` with a brief scale pulse (`1.0` → `1.15` → `1.0`) using `ease-bounce`. Second and final licensed overshoot location.
|
|
500
|
-
4. **Bottom sheet presentation.** Sheets rise from `y+40px` with `motion-standard / ease-enter`, synchronized with backdrop fade from `rgba(0,0,0,0)` to `rgba(0,0,0,0.5)`. Dismissal uses `motion-fast / ease-exit` — leaving is lighter than arriving.
|
|
501
|
-
5. **Order confirmation success.** Mint checkmark draws over `motion-slow` with `ease-standard` (not `ease-bounce` — money-related completions stay precise). Card contents reveal below with a 100ms staggered fade.
|
|
502
|
-
6. **Floating cart button emerge.** When the cart transitions from empty to non-empty, the floating cart button rises from `y+20px` with a subtle scale-in (`0.9` → `1.0`) over `motion-standard / ease-enter`. Disappearance is a reversed fade, not a slide-out — the empty cart state shouldn't draw attention.
|
|
503
|
-
7. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. `ease-bounce` is suppressed entirely — category taps and favorite toggles swap to a crossfade. The app stays fully usable; motion is never load-bearing for comprehension.
|
|
504
|
-
|
|
505
|
-
<!--
|
|
506
|
-
OmD v0.1 Sources — Philosophy Layer (sections 10–15)
|
|
507
|
-
|
|
508
|
-
Extracted 2026-04-20 via omd:add-reference AUGMENT mode.
|
|
509
|
-
Style reference: toss/DESIGN.md (auto-picked — 🇰🇷 KR region matrix).
|
|
510
|
-
|
|
511
|
-
Direct verification via WebFetch (2026-04-20):
|
|
512
|
-
- https://www.baemin.com/ — confirms hero campaign slogan "세상 모든 것이
|
|
513
|
-
식지 않도록", 배민클럽 membership banner "시켜도 시켜도 배달팁 무료
|
|
514
|
-
배민클럽!", 선물하기 tagline "마음을 배달해드려요", 배민페이 tagline
|
|
515
|
-
"10초 만에 결제 완료", and the seven service verticals (음식배달, 배민클럽,
|
|
516
|
-
B마트, 장보기・쇼핑, 선물하기, 전국특가, 배민페이). Used for §10 Voice & Tone
|
|
517
|
-
verified samples and §11 Narrative service list.
|
|
518
|
-
- https://en.sandoll.co.kr/Story/?bmode=view&idx=19495712 — confirms the Baemin
|
|
519
|
-
Hanna font origin story (1960s–70s acrylic-cut Korean signboard inspiration,
|
|
520
|
-
named after Kim Bong-jin's eldest daughter Hanna, Sandoll renewal preserving
|
|
521
|
-
"kitsch charm"), and references Kim's 2015 Master's thesis "Font design
|
|
522
|
-
reflecting Korea's indigenous visual culture". Used for §11 Narrative.
|
|
523
|
-
- https://en.wikipedia.org/wiki/Baedal_Minjok — confirms 2010 founding by Kim
|
|
524
|
-
Bong-jin, the flyer-scanning origin story from Gangnam streets, 2020 revenue
|
|
525
|
-
~₩1.09T (~US$960M), Delivery Hero acquisition announced Dec 2019 and
|
|
526
|
-
completed Dec 2020 conditional on Yogiyo divestiture. Used for §11.
|
|
527
|
-
- https://www.ajunews.com/view/20170411135156182 — confirms "치킨은 살 안 쪄요,
|
|
528
|
-
살은 내가 쪄요" is the 2017 배민신춘문예 grand-prize USER-SUBMITTED entry,
|
|
529
|
-
not Baemin product UI copy. Used for §10 voice-samples framing paragraph.
|
|
530
|
-
|
|
531
|
-
KOREAN-SOURCE-ONLY (not bilingual — Korean blog / press only):
|
|
532
|
-
- https://jiwon.app/blog/baemin-hiring-branding-culture — Korean recruitment-
|
|
533
|
-
culture analysis blog citing Woowa Brothers' four core values
|
|
534
|
-
(규율위의 자율, 스타보다 팀웍, 진지함과 위트, 열심만큼 성과). English
|
|
535
|
-
rendering in this file ("autonomy over discipline, teamwork over stars,
|
|
536
|
-
seriousness with wit, results matched to effort") is a translation, not a
|
|
537
|
-
citation of an English-language Woowa source — Woowa does not publish the
|
|
538
|
-
four values on an English surface this augmentation verified. If a reader
|
|
539
|
-
needs an English-official source, it must come from a future Woowa English
|
|
540
|
-
culture page or a translated press release.
|
|
541
|
-
|
|
542
|
-
Base DESIGN.md (sections 1–9) is the source for all token-level claims:
|
|
543
|
-
Baemin Mint #2AC1BC, five-tier shadow system (Natural / Deep / Sharp /
|
|
544
|
-
Outlined / Crisp), the 13+ open-source OFL fonts, the 8px spacing base,
|
|
545
|
-
and the card-radius scale (4/8/12/20/pill).
|
|
546
|
-
|
|
547
|
-
Not independently verified in this session — widely documented public facts:
|
|
548
|
-
- Woowa Brothers (우아한형제들) was founded in 2010 by Kim Bong-jin.
|
|
549
|
-
- Baemin's custom font family includes 한나체, 주아체, 도현체, 을지로체,
|
|
550
|
-
기랑해랑체, 연성체 (13 total free fonts under SIL OFL license).
|
|
551
|
-
- Delivery Hero acquisition: announced December 2019, regulatory approval
|
|
552
|
-
granted December 2020 conditional on Yogiyo divestiture. Instructions
|
|
553
|
-
cited 2019 as the acquisition year; per Wikipedia the announcement was
|
|
554
|
-
Dec 2019 and the deal closed Dec 2020 — both dates are reflected here.
|
|
555
|
-
|
|
556
|
-
⚠️ THIN SOURCING WARNING (honored from instructions):
|
|
557
|
-
- 배민다움 is Korean-culture-famous but English-language documentation is
|
|
558
|
-
thin. Voice register characterization ("warm, witty, unmistakably Korean-
|
|
559
|
-
vernacular", "B급 감성") is a reasoned synthesis from Korean press, not
|
|
560
|
-
a direct citation of an English Baemin brand guideline. A Baemin-published
|
|
561
|
-
English voice & tone book would strengthen §10.
|
|
562
|
-
- Famous playful strings associated with Baemin in Korean media (e.g.,
|
|
563
|
-
"치킨은 살 안 쪄요, 살은 내가 쪄요") are 배민신춘문예 CONTEST entries from
|
|
564
|
-
users, not Baemin product copy. This file explicitly frames them that way
|
|
565
|
-
in §10 to avoid fabricating a false provenance.
|
|
566
|
-
- Illustrative voice samples in §10 (empty cart, payment-failed, order-placed)
|
|
567
|
-
and all illustrative state copy in §14 are written in Baemin's register but
|
|
568
|
-
not verified as live baemin.com strings. A production team with access to
|
|
569
|
-
the logged-in app should replace them with observed copy before shipping.
|
|
570
|
-
|
|
571
|
-
Personas (§13) are fictional archetypes informed by publicly described
|
|
572
|
-
Korean food-delivery user segments. Any resemblance to specific individuals
|
|
573
|
-
is unintended.
|
|
574
|
-
|
|
575
|
-
Interpretive claims (e.g., "Mint was chosen specifically because the food-
|
|
576
|
-
delivery category defaults to warm reds and oranges") are editorial readings
|
|
577
|
-
of the visual system, not direct Baemin brand-guideline statements.
|
|
578
|
-
-->
|
|
419
|
+
No exact motion duration or easing token is promoted. The native-app motion system remains unresolved; web transitions should be treated as local implementation details until explicitly captured.
|