배달의민족 DESIGN.md

Design System Inspiration of Baemin (배달의민족)

Overview

Visual Theme & Atmosphere

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.

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.

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.

Key Characteristics:

• Bright Baemin 2.0 mint: official direction, measured live on baemin.com as #0cefd3
• WORK (BAEMINWORK): the official current Baemin app typeface, designed for simple and clear digital reading
• A long-running public font program rooted in Korean storefront lettering and freely shared brand culture
• Playful warmth in brand expression, paired with clearer and more direct product communication
• Surface-local metrics: app identity, baemin.com, Woowa corporate UI, and the font catalog are not flattened into one false system

Primary tasks

• Order food for delivery in the app instead of phoning a restaurant
• Pay for an order and follow its delivery status
• Sort out what went wrong with an order and what to do next
• Improve a restaurant's store operations and reach online demand

Brand Narrative

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.

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.

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.

Principles

These are evidence-derived implementation principles:

1. Warmth must survive speed. Fast delivery and clear interaction should still feel human.
2. Culture is a system asset. Typography, language, goods, and music can carry the brand beyond the transaction.
3. Playfulness needs a straight man. Let campaigns and brand moments bend expectations; keep ordering and recovery flows explicit.
4. Current clarity beats nostalgia. WORK and the brighter mint define the product-facing Baemin 2.0 layer; heritage fonts remain purposeful brand assets.
5. Keep evidence surface-local. App, marketing web, corporate web, and the font catalog may belong to one brand without sharing every token.

Personas

These are official stakeholder contexts from Woowa Brothers reporting, not invented demographic personas.

• Customers: want an efficient app, accessible service, and a differentiated delivery experience.
• Restaurant owners: need practical tools that improve store operations, capability building, and access to online demand.
• Riders: need safe working conditions, useful operational support, and confidence in the delivery ecosystem.

Colors

baemin.com

• Accent (#0cefd3): current bright public-web accent text/border observation.
• Canvas (#ffffff): app-download card and page surfaces.
• Foreground (#222222): download-card text.
• Dark (#000000): strongest current text/border observation.
• Panel (#f6f6f6): quiet current background surface.

woowahan.com and official font pages

• Corporate Foreground (#232324): dominant text and control color.
• Corporate Muted (#6c6d6f): footer and secondary control text.
• Corporate Surface (#f3f4f5): light read-more and catalog control background.
• Corporate Disabled (#cccccc): disabled control text.
• Corporate Border (#a6a7a9): current selector/catalog border.
• On Dark (#ffffff): text/border on overlay actions.

Typography

Current Product Typeface — WORK

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.

Official Baemin Font Program

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.

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.

Verified Surface Metrics

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• typography.baemin-heading.lineHeight: normal

Layout

• baemin.com current control spacing clusters around 6px and 20px.
• Woowa corporate composition repeatedly uses 8px, 12px, 16px, 20px, 24px, and 32px.
• These are public-web values; no native ordering-app grid, breakpoint, or touch-target scale is claimed.

Responsive Behavior

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.

Elevation & Depth

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.

Motion & Easing

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.

Components

baemin.com App Download Buttons

• Background: #ffffff
• Text: #222222
• Radius: 12px
• Height: 54px
• Padding: 14px 19px
• Text style: 13.3333px / 400
• States: on the App Store button, hover and pressed were measured on 2026-09-29 with :hover and :active confirmed, and nothing changes (a 2026-09-17 run found the same). Google Play shares the geometry; its states are unmeasured.
• Correction (2026-09-29): this block used to say hover was "captured across store/QR variants". The #f7f7f7 fill belongs to the QR button alone, in the 2026-07-11 capture and in the 2026-09-29 probe; the capture holds no state frame for either store button.
• Use: App Store and Google Play download actions

baemin.com QR Download Button

• Background: #ffffff; hover and pressed #f7f7f7
• Text: #222222
• Radius: 12px
• Size: 54px × 54px, padding 13px
• Text style: 13.3333px / 400
• States: hover and pressed fill #f7f7f7 in the 2026-07-11 capture and again on 2026-09-29
• Use: QR-code download action beside the store buttons

baemin.com Navigation Action

• Background: transparent, on the mint #0cefd3 navigation bar
• Text: #ffffff
• Height: 22px (22.4px measured)
• Text style: 16px / 700
• States: hover and pressed add a 1px solid #ffffff bottom border, so the link grows from 22.4px to 23.4px (a 1px layout shift). All three header links show it in the 2026-07-11 capture, and the 2026-09-29 probe reproduces it. The earlier "hover not retained" was wrong against the July capture itself.

Woowa Light Read-More

• Background: #f3f4f5
• Text: #232324
• Radius: 8px
• Height: 52px
• Padding: 0 22px
• Text style: 16px / 700
• States: default captured; hover not retained

Woowa Overlay Read-More

• Background: rgba(0, 0, 0, 0.3)
• Text: #ffffff
• Border: 1px solid #ffffff
• Radius: 8px
• Height: 52px
• Padding: 0 22px
• Text style: 16px / 700
• States: default on image overlay; hover not retained

Woowa Family-Site Selector

• Background: #ffffff
• Text: #6c6d6f
• Border: 1px solid #a6a7a9
• Radius: 8px
• Height: 50px
• Padding: 13px 16px
• Text style: 14px / 400
• States: default captured; expanded state not retained

Woowa Carousel Control

• Background: rgba(0, 0, 0, 0.4)
• Text/Icon context: #000000
• Radius: 50%
• Height: 40px
• States: default and disabled navigation states observed

Official Font Download

• Background: transparent
• Text: #232324
• Height: 28px
• Text style: 16px / 700
• States: available download and unavailable/disabled catalog controls observed

baemin.com Gift-Certificate Pill

• Background: #000000
• Text: #ffffff
• Radius: 9999px
• Height: 58px
• Padding: 16px 32px
• Text style: 18px / 700 / 25.2px
• States: none. Hover and pressed were measured on 2026-09-29 and nothing changes.
• Use: B2B gift-certificate purchase link (기업용 상품권 구매하기) in the bottom section. It is in the 2026-09-29 DOM; the 2026-07-11 capture did not record it.

baemin.com Footer Links

• Service link (배민외식업광장): transparent on the #000000 footer, text #ffffff, 30px / 700 / 39px; hover and pressed add a #ffffff underline
• Legal link (개인정보처리방침): transparent on the #000000 footer, text #b1b3b5, 14px / 400 / 19.6px; hover and pressed change nothing
• Measured 2026-09-29

Woowa Font Catalog Buttons

• Filled link button (.btn-fill): #232324 fill, #ffffff text, 8px radius, 52px tall, padding 0 22px, 14px / 700 / 28px, tracking -0.3px. Its hover and pressed frames change only the border colour, #d6d7da to #0cefd3, on a 0px border, so nothing visible changes and no state value is declared.
• Pill button (.btn, ten instances): #f3f4f5 fill, #a6a7a9 text, 20px radius, 40px tall, padding 0 22px, 14px / 400 / 28px; rest only
• Captured 2026-07-11 on the font catalog

Keyboard focus on baemin.com (measured 2026-09-29)

A real Tab walk reached six baemin.com controls: the App Store and QR buttons, the gift-certificate pill, both footer link styles and a header link. On every one :focus-visible matched, the outline stayed none, and background, text, border and shadow did not change. baemin.com shows no keyboard focus indicator, neither an authored one nor the browser's ring. This is a measured accessibility gap (WCAG 2.4.7), not a Baemin focus style, so no focus token is declared.

---

Verified: 2026-07-12 (verification v2, four live first-party web surfaces + official Baemin 2.0 product source) 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 Tier 2 sources: https://getdesign.md/baemin and https://styles.refero.design/?q=Baemin did not provide importable current records. 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. Conflicts unresolved: none

States

Live state probe, 2026-10-16 (https://www.woowahan.com/fonts), catalog-fill-button: pressed — no visible change (measured 2026-10-16); focus — no visible change (measured 2026-10-16).

Do's and Don'ts

Do

• Use WORK as the current Baemin app identity when a typeface name is required, while marking live preview availability honestly.
• Keep public-web and corporate type metrics attached to their measured surfaces.
• Treat Hanna, Jua, Dohyeon, Euljiro, and Kkubulim as official brand assets with their own historical character.
• Name each component by its source surface.

Don't

• Don't replace WORK with System, Arial, Pretendard, or a catalog display face in an app-facing design.
• Don't treat every official Baemin font as a functional product UI family.
• Don't treat #2ac1bc as a verified current web token; this run observed #0cefd3 on baemin.com.
• Don't treat the black pill as retired: the #000000 9999px gift-certificate link (기업용 상품권 구매하기) is in the 2026-09-29 DOM, though the 2026-07-11 capture did not record it.
• Don't copy baemin.com's missing keyboard focus indicator; it is a measured gap (2026-09-29), not a style.
• Don't fabricate restaurant cards, app tabs, inputs, badges, toasts, native motion, or semantic colors from remembered Baemin patterns.
• Don't infer license permissions from a font file alone; keep the official license page with any redistribution workflow.

Voice & Tone

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.

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.

Agent Prompt Guide

• “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.”
• “Use WORK as the Baemin 2.0 product typeface, but leave the live specimen unavailable unless an authorized browser-loadable source is present.”
• “Use the verified Woowa corporate geometry with #232324 foreground and 8px control radius only for Woowa corporate surfaces.”
• “Pair Baemin's playful cultural character with the clearer, more direct customer experience of Baemin 2.0.”

Governance

Known Gaps

• Contrast, woowa-carousel-control. Text #000000 on #00000066 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, font-download. Text #232324 on #00000000 measures 1.34:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, catalog-pill-button. Text #a6a7a9 on #f3f4f5 measures 2.19:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.