Coupang Media Assets
Coupang Media Assets
coupang

Coupang's design system uses #E94B22 as its primary color and "Pretendard Variable" for typography, with 12px corner radius. 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.

Primary
#E94B22
Typography
"Pretendard Variable"
Radius
12px
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
buttons12px
inputs12px
cards12px
dialogs12px
badges8px
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

button-primary
Background#E94B22
Text#ffffff
Radius4px
Padding12px 20px
Font16/700
Use: Primary checkout CTA — 구매하기, 장바구니 담기; pressed #C73D17
button-secondary
Background#ffffff
Text#E94B22
Radius4px
Use: Outlined, 1px #E94B22 border; pressed #FFEEE8 fill
button-tertiary
Background#F2F4F6
Text#333D4B
Radius4px
Use: Neutral filter toggle, 전체보기, low-emphasis
button-wow
Background#A50034
Text#ffffff
Radius4px
Use: WOW membership upsell — distinct from primary red
button-critical
Background#ffffff
Text#D60404
Radius4px
Use: Destructive — 주문 취소, 삭제; 1px #D60404 border

Cards

product-card
product-card
Background#ffffff
Radius4px
Padding12px
Use: Atomic unit — 1:1 thumbnail, badge, name, rating, price block, delivery promise; hover border #111111
promo-card
promo-card
Background#FFEEE8
Radius8px
Padding16px
Use: Brand-tinted promo container

Badges

filter
filter-chip
Background#ffffff
Radius4px
Font13/500
Use: 32px height, 1px #E5E8EB border; selected = #111111 fill + white text
rocket
rocket-badge
Background#ffffff
Text#E94B22
Font11/700
Use: 로켓배송 — icon + label, no border/radius
discount
discount-badge
Text#E94B22
Font14/700
Use: Standalone red percentage; or #E94B22 fill pill for 특가/BEST

Inputs

search-input
Background#ffffff
Text#111111
Radius4px
Padding0 16px
Use: Hero chrome — 2px #E94B22 branded border, 48px height, red search button
standard-input
Background#ffffff
Text#111111
Radius4px
Use: 1px #E5E8EB border, 44px height; focus 1px #E94B22

Tabs

TabTabTab
category-nav
Text#333D4B
Font14/700
Active#E94B22 text + 2px bottom underline
Use: Sticky horizontal bar

Related design systems