coupang

name

Coupang

country

Custom Design System (based on Coupang)

1. Visual Theme & Atmosphere

Coupang's interface is the digital equivalent of a hyper-efficient Korean discount warehouse — every pixel earns its rent by surfacing a price, a delivery promise, or a deal. The page opens on a clean white canvas (#ffffff) with near-black text (#111111) and the unmistakable Coupang Red (#d42931) — a warm, slightly orange-leaning red that reads less "alarm" and more "rocket exhaust." This isn't the deep crimson of luxury commerce; it's the saturated red of a price tag, a delivery truck, a 로켓배송 (Rocket Delivery) badge.

The aesthetic is unapologetically information-dense. Where Apple uses whitespace to elevate a single object, Coupang uses tight grids to fit four products per row above the fold — because the brand's defining promise (쿠팡 없이 어떻게 살았을까? — "How did we live without Coupang?") is that every search returns a faster, cheaper, in-stock answer than the user expected. The product card is the atomic unit of the brand: a square thumbnail, a discount percentage in red, a 로켓배송 rocket icon, a price in heavy weight, a delivery date promise — sometimes nine pieces of information in 200 pixels of height. Pretendard carries the Korean text; the system stack carries everything else; a small palette of accent reds, a WOW magenta-pink for membership moments, and warm neutrals do the rest.

Key Characteristics:

Coupang Red (#d42931) as the singular brand engine — used on CTAs, price emphasis, the rocket badge, and the logo
Pretendard / Apple SD Gothic Neo system stack — no custom typeface, because density rules over typography
4-column product grid as the dominant layout primitive (mobile: 2-col, tablet: 3-col, desktop: 4-5 col)
Information density: 6-9 data points per product card (image, badge, name, rating, review count, price, original price, discount %, delivery promise)
Sub-brand color extensions: WOW (magenta-pink), Eats (red-tinted), Play (red-on-dark) all share the Red parent
Heavy use of badges (로켓배송, 로켓프레시, WOW only, 최저가) as inline signals
Mobile-first at 360px baseline — most Korean e-commerce traffic is mobile
Yellow highlight (#FAC000) reserved for star ratings and promotional badges only

2. Color Palette & Roles

Primary

Coupang Red (#d42931): Primary brand color. CTAs, price emphasis, rocket badge, logo wordmark, active tab indicator. The defining warm-red that anchors every Coupang surface. RGB(233, 75, 34).
Deep Coupang Red (#C73D17): Pressed / hover state for primary buttons and active price indicators.
Near Black (#111111): Primary text — heavier than Karrot's #1a1c20, because product names need maximum read-density.
Pure White (#ffffff): Page and card background.

Brand Tints & Sub-brands

Red Tint (#FFEEE8): Soft red wash behind WOW pricing rows, deal banners.
Coupang Brown (#894F24): Secondary brand accent — used sparingly on legacy chrome and Rocket Fresh produce indicators.
WOW Magenta (#A50034): Coupang Wow membership badge, WOW only price labels — distinct from Red but in the same warm family.
Coupang Yellow (#FAC000): Star ratings, promotional BEST / HOT badges. Never a CTA color.
Coupang Green (#80BC27): Stock-in / availability indicators, Rocket Fresh subscribe state.
Coupang Blue (#3DACDC): Informational links and Coupang Play accent on dark surfaces.

Semantic

Critical Red (#D60404): Out-of-stock, error states. Distinct from brand red — colder, closer to alarm red.
Discount Red (#d42931): Discount percentage labels — same as brand red, used as a price-emphasis tool.
Positive Green (#03AC0E): "도착 보장" arrival-guarantee badges, success confirmations.
Informative Blue (#0074E9): Standard hyperlinks, "더보기" expansion links.

Neutral Scale

Gray 50 (#F7F8FA): Page-section dividers, card hover fill.
Gray 100 (#F2F4F6): Disabled bg, secondary surface.
Gray 200 (#E5E8EB): Standard border, divider lines.
Gray 400 (#B0B8C1): Muted icons, placeholder.
Gray 600 (#6B7684): Secondary metadata (review count, seller name).
Gray 800 (#333D4B): Body text, secondary headings.
Gray 900 (#111111): Headings, product names, prices.

Surface & Borders

Border Subtle (#E5E8EB): Card outlines on category grid.
Border Strong (#111111): Selected filter chips, active tab underline.
Overlay (rgba(17,17,17,0.6)): Modal backdrop, image-zoom scrim.

3. Typography Rules

Font Family

Primary: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", Roboto, "Noto Sans KR", sans-serif
Numeric (prices): Pretendard tabular variant or tabular-nums — prices must align by digit, especially in compare-by-price grids.
Design Principle: No custom typeface. The brand is a price catalog; legibility at 12-14px under fluorescent grocery-store conditions matters more than typographic identity.

Hierarchy

Role	Font	Size	Weight	Line Height	Notes
Display	Pretendard	28px	700	36px	Hero promo banners, splash takeovers
Headline	Pretendard	22px	700	30px	Section headers ("로켓배송 신상품")
Subheadline	Pretendard	18px	700	26px	Card cluster headings
Title	Pretendard	16px	600	22px	Product name (truncated 2 lines)
Body	Pretendard	14px	400	20px	Standard reading, descriptions
Body Small	Pretendard	13px	400	18px	Review count, seller info
Caption	Pretendard	12px	400	16px	Timestamps, fine print
Price Large	Pretendard	18px	700	24px tabular	Primary product price
Price	Pretendard	16px	700	22px tabular	Card price
Strikethrough	Pretendard	13px	400 line-through	18px	Original price before discount
Discount %	Pretendard	14px	700	18px	`#d42931` red, e.g. "37%"
Badge	Pretendard	11px	700	14px	`로켓배송`, `BEST`, ALL CAPS Korean

Principles

Three weights only: Regular (400), Semibold (600), Bold (700). No light, no extra-bold.
Tabular numerals on every price: Currency figures must left-align by digit so users compare by glance, not by reading.
Truncation is mandatory: Product names truncate at 2 lines with ellipsis — never wrap to 3, never single-line. The 2-line ceiling is a card-grid contract.
Korean-first letter-spacing: Default letter-spacing: -0.02em on Korean headings to tighten Pretendard's natural metrics.
Discount percentage is visually dominant: A 37% discount label is bigger and bolder than the product name beside it — price psychology is the brand.

4. Component Stylings

Buttons

Style: Sharp & Precise -- minimal rounding, decisive geometric edges
Radius: 4px across primary, secondary, and ghost variants
Padding: 8px 16px (default), 6px 12px (compact), 12px 20px (comfortable)
Primary: solid primary background, foreground contrast text, 1px solid primary border
Secondary: transparent/neutral background, foreground text, 1px solid border color
Ghost: transparent background, primary text, no border until hover
Hover: primary darkens ~10%, secondary gains subtle border-color bump
Font weight: 500-600 for CTA text clarity

Cards & Containers

Product Card (the atomic unit)

Background: #ffffff
Border: 1px solid #E5E8EB (Gray 200) OR no border + 8px gap-based separation
Radius: 0px for grid cards (sharp edges maximize density), 8px for featured promo cards
Padding: 12px (compact), 12px (customized)
Hover: 1px border shifts to #111111, no shadow lift
Layout: 1:1 thumbnail top, then in order — rocket badge row, product name (2 lines), star+reviews, price block (discount %, original, current), delivery promise

Promo Card

Background: #ffffff or brand-tinted #FFEEE8
Radius: 12px
Padding: 16px-20px
Optional 1px border or shadow 0px 2px 8px rgba(17,17,17,0.06)
Shadow: multi-layer elevation -- 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06) for default cards; intensify on hover

Chips & Badges

Filter Chip

Background: #ffffff, Selected: #111111 with white text
Border: 1px solid #E5E8EB, Selected: #111111
Radius: 12px (not pill — Coupang's sharp register)
Height: 32px, Padding: 0 12px, Font: 13px weight 500

Rocket Badge (the iconic element)

Background: #ffffff with rocket icon #d42931
Text: 로켓배송 in #d42931 weight 700, 11px
Compact horizontal layout, 16-20px tall
No border, no radius — the icon does the work

Discount Badge

Standalone red percentage: #d42931 text, no bg, weight 700, 14-18px
"특가" / "BEST" pill: #d42931 bg, white text, 4px radius, 11px weight 700

WOW Badge

Background: #A50034, white text, "WOW only" or "Wow 회원가"
4px radius, 11px weight 700

Inputs & Forms

Style: Bordered Box -- full 1px border, contained field, structured rectangle

Search Input (the hero of the chrome)

Background: #ffffff
Border: 2px solid #d42931 (the search bar IS branded — red-bordered by default)
Radius: 12px
Height: 48px, Padding: 0 16px
Right-side red search button (square, #d42931, white magnifier icon)

Standard Input

Background: #ffffff
Border: 1px solid #E5E8EB
Radius: 12px
Focus: 1px solid #d42931
Height: 44px

Navigation

Style: Solid & Bold -- solid dark background (foreground color), high contrast
Light text on dark header surface, clear visual separation from content
CTA button uses primary color or inverted colors
Mobile: hamburger menu collapse

5. Layout Principles

Spacing System

Base unit: 4px
Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
Gutter: 16px mobile, 24px tablet, 32px desktop
Card grid gap: 8px (compact) or 12px (customized) — tight, because density is the brand

Grid & Container

Mobile: 2-column product grid, 360-414px viewport
Tablet: 3-column, 768px breakpoint
Desktop: 4-5 column at >1024px, max content width 1280px
Header search bar: max 600px wide, centered
Promo banners: full-bleed edge-to-edge

Whitespace Philosophy

Compact & dense: Optimize for information density and scanning speed. Tight padding (8-12px), small gaps (4-8px between related items).
Reduced section spacing: Use ~70% of the reference spacing values for a data-focused, efficient layout.
Screen real estate: Maximize visible content per viewport -- users should see more items without scrolling.

Border Radius Scale

Sharp (0-4px): Product cards, filter chips, buttons, inputs — Coupang's default. The sharp corner reads as catalog/utility/efficient.
Soft (8px): Promo cards, modals, bottom sheets.
Pill (9999px): Avatars only — never on chips, never on buttons.

6. Depth & Elevation

Level	Treatment	Use
Flat (0)	No shadow	Page background, product card grid (gap-only separation)
Subtle (s1)	`0px 1px 4px rgba(17,17,17,0.06)`	Card hover, dropdown
Standard (s2)	`0px 2px 8px rgba(17,17,17,0.10)`	Promo cards, sticky CTAs, modals
Prominent (s3)	`0px 4px 16px rgba(17,17,17,0.16)`	Bottom sheets, image zoom, full-screen overlays

Shadow Philosophy: Coupang uses shadows sparingly — the grid's information density already creates depth through sheer visual weight. Shadows appear at hover, on sticky elements, and on overlays — never as decorative card-lifting on the main grid. The dominant separation tool is the 1px gray border (#E5E8EB) and the 8-12px gap, not elevation.

7. Do's and Don'ts

Do

Use Coupang Red (#d42931) for CTAs, price emphasis, rocket badges, and the logo — these four roles only
Keep border-radius at 0-4px for grid elements — sharp corners read as catalog efficiency
Use tabular numerals on every price, every count, every quantity
Pack 6-9 data points per product card — that's the brand's contract with the user
Truncate product names at 2 lines with ellipsis — never wrap to 3
Use Pretendard with letter-spacing: -0.02em on Korean headings
Reserve WOW Magenta (#A50034) exclusively for membership-context buttons and badges
Use the 4px grid for all spacing — same as Karrot, but applied to denser layouts

Don't

Don't use pill-shaped (9999px) buttons or chips — that's a Toss/Karrot register, not Coupang's
Don't add ambient shadows to product cards on the main grid — gap + 1px border carries the load
Don't use yellow (#FAC000) for buttons — it's exclusively for stars and BEST badges
Don't introduce dramatic whitespace that drops grid density below the device's max-card-count
Don't replace the red-bordered search bar with a neutral gray version — the red border is brand chrome
Don't pair Coupang Red with a secondary brand red — the WOW Magenta is the only sibling, and it's membership-scoped
Don't use serif typography or display faces — Pretendard does every weight Coupang needs
Don't single-line product names — the 2-line ceiling is what makes the grid scannable

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	<480px	2-column product grid, 16px gutter, bottom tab bar
Tablet	480-1024px	3-column grid, 24px gutter, top nav unchanged
Desktop	>1024px	4-5 column grid, 32px gutter, max content 1280px

Touch Targets

Buttons: 48px (large), 40px (medium), 32px (small)
Filter chips: 32px height
Bottom tab: 56px height
Product card thumbnail: minimum 156x156px on mobile

Collapsing Strategy

Search bar: full-width on mobile, max 600px on desktop, sticky on scroll
Category nav: horizontal scroll on mobile, full row on desktop
Product grid: 2 → 3 → 4 → 5 columns by viewport
Add-to-cart CTA: sticky bottom bar on mobile product detail, inline on desktop

Image Behavior

Product thumbnails: 1:1 aspect ratio, 0px or 4px radius
Hero banners: 16:9 desktop, 4:3 mobile
Avatar (review author): circular 9999px, 32-40px

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Coupang Red (#d42931)
CTA Pressed: Deep Red (#C73D17)
Background: White (#ffffff)
Heading: Near Black (#111111)
Body: Gray 800 (#333D4B)
Caption: Gray 600 (#6B7684)
Border: Gray 200 (#E5E8EB)
Disabled: Gray 100 (#F2F4F6)
Critical: Red (#D60404)
Success: Green (#03AC0E)
Info: Blue (#0074E9)
Star/Best: Yellow (#FAC000)
WOW: Magenta (#A50034)

Example Component Prompts

"Build a Coupang product card: white bg, 1px solid #E5E8EB border, 0px radius, 12px padding. 1:1 thumbnail top. Below: 로켓배송 badge (#d42931 rocket icon, 11px weight 700). Product name 14px weight 600 #111111, truncate 2 lines. Star rating row: yellow #FAC000 stars + gray review count. Price block: discount % 14px weight 700 #d42931 + strikethrough original 13px #6B7684 + current price 16px weight 700 #111111 tabular-nums. Delivery promise '내일 도착' 12px #03AC0E."
"Design the Coupang search bar: white bg, 2px solid #d42931 border, 4px radius, 48px height. Right-side square button: #d42931 bg, white magnifier icon, 48x48px, 0px radius, attached to right edge."
"Create a primary CTA: #d42931 bg, white text 16px weight 700, 48px min-height, 4px radius, 12px×20px padding. Pressed: #C73D17. Disabled: #F2F4F6 bg #B0B8C1 text. Use for '구매하기', '장바구니 담기'."
"Build a WOW membership upsell: #A50034 bg, white text 'Wow 멤버십 가입하기' 14px weight 700, 4px radius, 40px height. Above the button: WOW logo + benefit list with #03AC0E checkmarks."
"Design a discount badge: standalone '37%' label, #d42931 text, 18px weight 700, no background. Position top-left of product image, 8px inset."

Iteration Guide

Coupang Red #d42931 is the only true brand color — WOW Magenta is the membership-scoped sibling
Border-radius defaults: 0-4px buttons/inputs/cards, 8px modals, 9999px avatars only
Density is non-negotiable — 4-5 cards per row desktop, 2-3 mobile, never sparse
Every price uses tabular numerals — alignment matters more than aesthetics
The red-bordered search bar is brand chrome — don't neutralize it
Sharp corners read as catalog/utility — soft corners read as lifestyle, which is off-brand
Pretendard, three weights (400/600/700), Korean-tightened with letter-spacing: -0.02em

10. Voice & Tone

Coupang speaks like a highly competent Korean discount-store ajumma — direct, deal-driven, results-first, allergic to florid marketing. The voice assumes a working parent on a phone at 11pm trying to get diapers delivered before 7am, and treats their time as scarce. Sentences are short, verb-first, and load-bearing. The signature catchphrase — 쿠팡 없이 어떻게 살았을까? ("How did we live without Coupang?") — is the entire brand thesis distilled to seven words: utility so deep it becomes infrastructure. English surfaces (Coupang Inc. corporate, US headquarters) carry the same posture in plain American English — "We bring Wow to every customer," not "Discover the future of e-commerce."

Context	Tone
CTAs	Verb-first Korean (`구매하기`, `장바구니 담기`, `로그인`, `지금 구독하기`) / plain English (`Buy now`, `Add to cart`, `Apply`)
Price labels	Numeric-dominant. `최저가`, `WOW 회원가`, `로켓와우 회원가`, `즉시할인` — short noun phrases that name the price type
Delivery promise	Time-specific, never vague. `내일(목) 도착 보장`, `오늘 7시까지 주문 시 새벽 도착`. Not "fast shipping."
Rocket badges	Single-word power: `로켓배송`, `로켓프레시`, `로켓직구`, `로켓설치` — each names a specific logistics product, not a feeling
Empty states	Practical reframe. Never `데이터가 없습니다`. Prefer `검색 결과가 없어요. 다른 키워드로 검색해보세요.`
Error messages	Specific + actionable. `네트워크 연결을 확인하고 다시 시도해 주세요`, not `오류가 발생했습니다`.
Success toasts	Past-tense, transactional. `장바구니에 담겼어요`, `주문이 완료되었어요`. No celebration, no exclamation marks.
Membership upsells	Benefit-stack, not aspiration. Lists concrete perks (`무료배송`, `무료반품`, `쿠팡플레이 무료`) over lifestyle promises.
Coupang Eats / Play	Sub-brands borrow the parent register but slightly warmer — Eats uses food-craving copy (`30분 안에 도착`), Play uses content-hook copy (`SNL 코리아 시즌 6 독점 공개`).

Forbidden phrases. 불편을 드려 죄송합니다, 데이터가 없습니다, 오류가 발생했습니다, 놀라운, 혁신적인, 세계 최고의. English boilerplate bans: Oops, something went wrong, amazing deals, unbeatable prices, revolutionary. Marketing inflation is anti-Coupang — the brand lets the price tag and the delivery date do the persuading. Emoji are permitted in promotional banners and chat-with-seller flows, but never in error messages, never in payment confirmations, never in delivery-status notifications.

Voice samples.

쿠팡 없이 어떻게 살았을까? — corporate brand tagline, the defining catchphrase.
우리의 미션은 고객과 직원, 파트너의 일상을 혁신하는 것입니다 — corporate mission.
쿠팡은 커머스의 미래를 만들어 가고 있습니다 — careers hero copy.
로켓배송 — flagship logistics sub-brand mark.
WOW 회원가 — membership-scoped price label.
오늘 7시까지 주문 시 새벽 도착 — Dawn Delivery promise pattern.
장바구니에 담겼어요 — illustrative success-toast pattern.

11. Brand Narrative

Coupang was founded in 2010 in Seoul by Bom Kim (김범석) — a Korean-American who moved from Seoul to the US at age 7, graduated Harvard College, then dropped out of Harvard Business School in his second semester to start the company. The first version was a Groupon-clone daily-deals site. By 2014, Kim had bet the company on a thesis no Korean e-commerce incumbent believed: that the bottleneck wasn't catalog or price, it was logistics control. Coupang would not be a marketplace that referred orders to third-party shippers; it would own the warehouses, the trucks, the drivers (the "로켓맨" / Rocketmen), and the delivery promise end-to-end (CNBC, Wikipedia — Bom Kim).

Rocket Delivery (로켓배송) launched March 2014. Same-day or next-day on millions of items, eventually expanded to Dawn Delivery (order by midnight, arrives by 7am). The capital that made it possible: $100M from Sequoia Capital May 2014, $300M from BlackRock months later, then the bet that changed everything — SoftBank $1B in June 2015, followed by SoftBank Vision Fund $2B in November 2018 at a $9B valuation, making Bom Kim the second-youngest billionaire in South Korea (Korea Times, Speedwell Research).

The IPO. Coupang listed on the NYSE on March 11, 2021, ticker CPNG. First-day close: $49.25. Day-one market cap: ~$84.47 billion — the largest US IPO by a foreign company since Alibaba in 2014, and the largest US listing ever by a Korean company. The company raised $4.6 billion in the offering (CNBC IPO coverage, Kim & Chang legal note).

The product family extended into a super-app: Coupang Eats (쿠팡이츠) launched May 2019 promising 30-minute "cheetah" delivery; Coupang Play (쿠팡플레이) launched December 2020 as a Wow-membership-bundled streaming service (now home to SNL Korea, Premier League rights, and Paramount+ Korea); Rocket Fresh for groceries; Rocket Direct for cross-border imports. The unifying thread: every sub-brand is a perk inside the WOW (로켓와우) membership — a 7,890 KRW/month subscription embraced by two-thirds of Korean households (Korea Herald, Wikipedia — Coupang).

What Coupang refuses: the marketplace-only model of 11번가 / 옥션 (no logistics ownership, slow delivery), the lifestyle aesthetic of 무신사 / 29CM (curated, white-glove, slow), the boutique register of luxury commerce. Coupang's design language follows that refusal — a warm-red price-tag accent, sharp 0-4px corners, dense product grids, tabular price stacks, and a singular promise that hangs over every screen: 쿠팡 없이 어떻게 살았을까?

12. Principles

Density is the brand. Coupang's product grid is engineered to surface more catalog per viewport than any Korean competitor. UI implication: never reduce a 4-column desktop grid to 3 for "breathing room"; never single-column a mobile listing. Density is what users came for.
Red is for price and rocket — nothing else. Coupang Red (#d42931) carries four jobs: CTA, discount %, rocket badge, logo. It does not decorate, does not tint backgrounds, does not paint borders ambient. UI implication: if a design uses red for an info card or a status pill that isn't a discount or a rocket, demote to gray or to a semantic color.
Sharp corners read as catalog; soft corners read as lifestyle. Coupang lives at 0-4px radii on grid elements. UI implication: if a card or chip is rendering at 12px+ radius, it has drifted toward Toss/Karrot register and is off-brand for utility surfaces.
Tabular numerals on every price. Korean shoppers compare by digit-alignment, not by reading. UI implication: every <price> element gets font-variant-numeric: tabular-nums or a tabular Pretendard variant. Misaligned columns of 19,800원 / 24,500원 / 8,900원 destroy the scan.
The delivery promise is a first-class data point. "내일(목) 도착 보장" is on the same hierarchy as the price — sometimes higher. UI implication: a product card without a visible delivery date or a rocket badge is incomplete; the date must render before the page is "done."
Sub-brands inherit the parent palette. Coupang Eats, Play, Fresh, Direct, and Wow all use the same red parent — Wow's magenta is the only documented sibling. UI implication: don't introduce a "Coupang Eats yellow" or "Play purple" — every sub-brand is a context tag, not a separate visual identity.
Every screen earns its keep. The brand is utility. A screen with no price, no promise, no action is suspect. UI implication: hero banners must surface a CTA + a price/promise within the first viewport; "splash"-style content-only takeovers are a Toss move, not a Coupang move.
Membership is the loyalty engine — surface it, but scope it. WOW perks (로켓배송 무료, 쿠팡플레이 무료, 새벽배송) appear in cart, checkout, product detail, and onboarding — but with WOW Magenta, never with Coupang Red, so the user can tell brand from membership at a glance.

13. Personas

Personas are fictional archetypes informed by publicly described Coupang user segments, not individual people.

민지 (Minji), 34, 위례신도시. Working mother of two, engineer at an IT company. WOW member since 2018. Orders diapers, formula, 새벽배송 groceries 4-5x per week. Treats Coupang as critical household infrastructure — power, water, Coupang. Will switch Coupang Eats to a competitor if a single order is late, then switch back the next week because nothing else delivers a forgotten ingredient by 7am.

준호 (Junho), 41, 분당. Mid-career manager, two kids in elementary school. The household's primary Coupang account holder. Uses 로켓배송 for everything from printer ink to weekend hiking gear. Watches SNL Korea on Coupang Play after the kids are in bed. The 7,890 won monthly Wow fee feels like the cheapest line item on his budget — "한 달에 7,990원이 아까운 적이 없다" (never once felt the monthly fee was wasteful).

Sarah, 29, Hannam-dong. American expat working at a multinational in Seoul. Discovered Coupang because Korean colleagues said it was the only e-commerce site that worked the way she expected things to work in NYC. Orders English-language books via 로켓직구, groceries via 로켓프레시, and uses Coupang Eats more than any other delivery app because the in-app English support is the cleanest among Korean platforms.

박여사 (Mrs. Park), 62, 대구. Retired, lives alone, learned Coupang from her daughter during COVID. The first online shopping platform she ever trusted, because the Rocketmen leave packages where she asked, never ring the bell, and the return process is a single tap. Uses voice search to type Korean — relies on the mobile UI being big enough at the default font size that she doesn't need glasses for the price.

14. States

State	Treatment
Empty (no search results)	One-line factual reframe (`'키워드'에 대한 검색 결과가 없어요`) + suggested broader keywords as chips + bottom CTA `카테고리 둘러보기`. Never an illustration.
Empty (empty cart)	Single line `장바구니가 비어 있어요` + 12px caption suggestion + primary CTA `로켓배송 구경하기`. No illustration.
Loading (first paint)	Skeleton blocks at `#F2F4F6` matching final product-card geometry — 1:1 thumbnail box, two text lines (name), one line (price). Shimmer 1.4s with 6% white highlight.
Loading (infinite scroll)	Bottom-of-list spinner in Coupang Red, 24px diameter. No overlay. Existing cards stay visible.
Loading (price recalc / coupon apply)	Inline 16px spinner in `#d42931` next to the price line — never a full-screen overlay for a price update.
Error (inline field)	Input border `#D60404` 1px, helper text below `#D60404` 13px. One actionable sentence.
Error (toast)	`#111111` background, white 14px weight 400 text, 3s auto-dismiss. Bottom of screen, 16px above tab bar. No icon, no emoji.
Error (network blocking)	Full-screen centered: `#111111` 18px weight 700 message, `#6B7684` 14px subline, retry button in Coupang Red. No illustration.
Out of stock	Product card: 50% grayscale image overlay, `품절` badge `#6B7684` bg over image bottom-left, price stays visible but `#B0B8C1` text. Add-to-cart button replaced with `재입고 알림 신청` outlined-red.
Success (added to cart)	Toast: `장바구니에 담겼어요` + secondary text `장바구니 보기 ›`. 3s auto-dismiss. White text on `#111111`.
Success (order complete)	Dedicated full-screen page — not a toast. Green checkmark `#03AC0E`, `주문이 완료되었어요`, summary card with delivery date in red, primary CTA `주문 상세보기`.
Skeleton	`#F2F4F6` blocks matching exact card layout. Never animate the price slot brighter than other slots — equal-weight shimmer across all data points.
Disabled	Button `#F2F4F6` bg, `#B0B8C1` text. No color shift. Geometry stays identical so re-enable is frame-stable.
WOW-gated	A non-Wow user sees the Wow price label in `#A50034` magenta with a small lock icon and `WOW 회원가입 시 적용` 12px caption. The regular price stays visible — Coupang never hides info, it labels access.

15. Motion & Easing

Durations (named, not raw milliseconds):

Token	Value	Use
`motion-instant`	0ms	Toggles, checkbox state, filter chip on/off
`motion-fast`	120ms	Hover, focus, button press, inline price flash
`motion-standard`	200ms	Card taps, tab switches, dropdown reveals — the catalog default
`motion-slow`	300ms	Bottom-sheet presentations, modal opens
`motion-page`	280ms	Route transitions, native push/pop

Easings:

Token	Curve	Use
`ease-enter`	`cubic-bezier(0.0, 0.0, 0.2, 1)`	Sheets, toasts, screens appearing
`ease-exit`	`cubic-bezier(0.4, 0.0, 1, 1)`	Dismissals, toast auto-close
`ease-standard`	`cubic-bezier(0.4, 0.0, 0.2, 1)`	Two-way transitions

Spring stance. Coupang motion is fast, short, and never bouncy. The brand is a logistics platform — when a button presses, it commits; when a card opens, it opens. Spring physics, overshoot, and elastic bounces are forbidden because they imply deliberation — a quality the brand explicitly does not want users to associate with Coupang. A user who clicks "구매하기" should feel the order has already shipped. Durations skew shorter than Karrot's (motion-standard 200ms vs Karrot's 250ms) to enforce that mental model.

Signature motions.

Add-to-cart fly. When a user taps "장바구니 담기" on a product card, the thumbnail performs a tiny scaled translate (~8% scale, 200ms ease-standard) toward the cart icon in the header, ending with a +1 badge increment. The motion is brief enough that a fast scroller will miss it — that's intentional; it confirms without blocking.
Price-recalc flash. When a coupon applies or a Wow membership preview activates, the price number cross-fades from old to new in 120ms ease-standard — no bouncing digits, no rolling odometer. Tabular numerals make the swap pixel-stable.
Bottom-sheet presentation. Sheets rise from y+24px (shorter than Karrot's 40px) with motion-slow / ease-enter and a backdrop fade to rgba(17,17,17,0.6). Dismissal uses motion-fast / ease-exit.
Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant except the add-to-cart fly, which becomes a single 80ms opacity flash on the cart icon — the confirmation must remain perceptible because it's transactional, not decorative.

Verified: 2026-05-08 (omd:add-reference) Tier 1 sources: coupang.jobs/kr (corporate careers — voice + tagline + mission verified via WebFetch); news.coupang.com (Korean editorial copy verified). Note: coupang.com main consumer surface unreachable due to Akamai bot-protection; geometry tokens (radii, paddings, heights) carried from public design-community references and pattern observation, flagged for live re-verification. Tier 2 sources: brandcolorcode.com/coupang (Coupang Red #d42931, brown #894F24, yellow #FAC000, green #80BC27, blue #3DACDC); getdesign.md/coupang — no record. Tier 2 (Philosophy/founders): Wikipedia (Bom Kim + Coupang), CNBC (2019 profile + 2021 IPO), Korea Times, Korea Herald, Speedwell Research, Kim & Chang. Style ref: none (fresh entry). Conflicts unresolved: Coupang Red exact hex pending live computed-style verification — #d42931 adopted from public design-community consensus.

Included Components

The following components are part of this design system:

Button
Input
Table
Card
Badge
Tabs
Dialog

Iconography & SVG Guidelines

Icon Library

Use a single, consistent icon library throughout the project. Recommended options:

Lucide React (lucide-react): Default for shadcn/ui projects. 1,400+ icons, tree-shakeable, consistent 24x24 grid.
Radix Icons (@radix-ui/react-icons): 300+ icons, 15x15 grid, minimal and geometric.
Heroicons (@heroicons/react): 300+ icons by Tailwind team, outline and solid variants.

Pick ONE library and use it everywhere. Do not mix icon libraries within the same project.

SVG Usage Rules

All icons must be inline SVG components (not <img> tags) for color and size control.
Icon size follows the type scale: 16px (inline), 20px (buttons), 24px (standalone).
Icon color inherits from currentColor -- never hard-code fill/stroke colors.
For custom/brand icons, export as SVG components with currentColor fills.
Stroke width: 1.5px-2px for outline icons. Keep consistent across the project.

Icon Sizing Scale

Context	Size	Usage
Inline text	16px (1rem)	Badges, labels, breadcrumbs
Button icon	18px (1.125rem)	Icon buttons, CTA icons
Standalone	24px (1.5rem)	Navigation, card icons
Feature	32-48px	Hero sections, empty states

SVG Optimization

Run all custom SVGs through SVGO before committing.
Remove unnecessary attributes: xmlns, xml:space, editor metadata.
Use viewBox instead of fixed width/height for scalability.

Document Policies

No Emojis

This design system must not use emojis in any UI element, component, label, status indicator, or documentation. Use SVG icons from the chosen icon library instead. Emojis render inconsistently across platforms and break visual coherence.

Status indicators: use colored dots or icon components, not emoji.
Section markers: use text prefixes ("DO:" / "DON'T:") or icons, not checkmark/cross emojis.
Navigation: use icon components, not emoji.

Format Compliance

This document follows the Google Stitch DESIGN.md 9-section format:

Visual Theme & Atmosphere
Color Palette & Roles
Typography Rules
Component Stylings
Layout Principles
Depth & Elevation
Do's and Don'ts
Responsive Behavior
Agent Prompt Guide

Extended with:

Iconography & SVG Guidelines
Document Policies

Total target length: 250-400 lines. Keep sections concise and actionable.

FilesExpand file tree

DESIGN.md

Latest commit

History