Coupang Media Assets
Coupang Media Assets
coupang
Design System
Coupang logo

Coupang

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 (#E94B22) — a warm, slightly orange-leaning red that reads les

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 700 · 1.25
Design at scale
32px32px · 700 · 1.25
Section heading
heading-lg24px · 700 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
Pretendard Variable
Open · OFL
Modern Korean variable font with full Latin coverage.
Install via GitHub · orioncactus/pretendard
Primary
Apple System
Systemno install needed
macOS/iOS default — uses SF Pro automatically.
Not publicly distributed.
Primary
Apple System (Blink)
Systemno install needed
Chrome alias for Apple system font on macOS.
Not publicly distributed.
Primary
Apple SD Gothic Neo
Systemno install needed
Apple system font for Korean.
Not publicly distributed.
Primary
Malgun Gothic
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
Primary
Roboto
Open · Apache 2.0
Install via Google Fonts
Primary
Noto Sans KR
Open · OFL
Install via Google Fonts
Primary
BEST
Brand-only
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycompact
Base unit4px
Section gap16px
Card padding12px
Element gap8px

Border Radius

ElementValuePreview
buttons4px
inputs4px
cards4px
dialogs4px
badges4px
pillPill9999px

Elevation

Shadow 1
Shadow 2
Shadow 3
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • Use Coupang Red (#E94B22) 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

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

Components

Buttons

Primary (Coupang Red)
Background`#E94B22` (Coupang Red)
Text`#ffffff`
Radius**4px** (sharp, utilitarian — not a pill, not soft)
Padding12px 20px (medium)
Font16px weight 700 (large), 14px weight 700 (medium)
Active`#C73D17`
Disabled`#F2F4F6` bg, `#B0B8C1` text
Min-height**48px** (large), **40px** (medium), **32px** (small)
Use: "구매하기", "장바구니 담기", "로그인", primary checkout flow CTAs
Secondary (Outlined)
Background`#ffffff`
Text`#E94B22` (Coupang Red)
Border1px solid `#E94B22`
Radius4px
Active`#FFEEE8` background fill
Use: "위시리스트 추가", "쿠폰 받기", paired with primary button
Tertiary (Neutral)
Background`#F2F4F6` (Gray 100)
Text`#333D4B` (Gray 800)
Radius4px
Active`#E5E8EB`
Use: Filter toggles, "전체보기", low-emphasis actions
WOW Magenta (Membership)
Background`#A50034` (WOW Magenta)
Text`#ffffff`
Radius4px
Use: "Wow 멤버십 가입하기", subscription upsells — distinct from primary red to flag the membership context
Critical (Destructive)
Background`#ffffff`
Text`#D60404`
Border1px solid `#D60404`
Use: "주문 취소", "삭제"

Cards & Containers

Product Card (the atomic unit)
Product Card (the atomic unit)
Background`#ffffff`
Border1px 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
Padding12px (compact), 16px (standard)
Hover1px border shifts to `#111111`, no shadow lift
Layout1:1 thumbnail top, then in order — rocket badge row, product name (2 lines), star+reviews, price block (discount %, original, current), delivery promise
Promo Card
Promo Card
Background`#ffffff` or brand-tinted `#FFEEE8`
Radius8px
Padding16px-20px

Chips & Badges

Filter
Filter Chip
Background`#ffffff` with rocket icon `#E94B22`
Text`로켓배송` in `#E94B22` weight 700, 11px
Border1px solid `#E5E8EB`, Selected: `#111111`
Radius4px (not pill — Coupang's sharp register)
Height32px, Padding: 0 12px, Font: 13px weight 500
spec only
Discount Badge
Standalone red percentage`#E94B22` text, no bg, weight 700, 14-18px
WOW
WOW Badge
Background`#A50034`, white text, "WOW only" or "Wow 회원가"

Inputs & Forms

Standard Input
Background`#ffffff`
Border1px solid `#E5E8EB`
Radius4px
Focus1px solid `#E94B22`
Height44px