Design System Inspiration of Gmarket (지마켓)

1. Visual Theme & Atmosphere

Gmarket is what a quarter-century-old Korean open-market looks like after Shinsegae's 2021 acquisition: a department-store conglomerate has bought a Y2K-era trading floor and is mid-renovation, but the floor is still open and the deals are still moving. The home page is unapologetically dense — a 1200px fixed canvas (--minWidth: 1200px), white surface, ink-near-black text (#222222), and a single, surgical brand asset: Gmarket Red #da120d, deployed almost exclusively on price (쿠폰적용가, 52%, the final-card-discount line). There is no gradient, no hero video, no marketing flourish. The atmosphere is "전단지가 잘 정돈된 백화점 1층" — a leaflet, organized — where every pixel of vertical real estate is a chance to surface another deal, and the visual job of design is to keep that density legible.

The page reads as a vertical stack of category modules, each anchored by an H2 in 28px/700 (or 24px/700 in the compact module variant), beneath which 2-up or 4-up product cards repeat indefinitely. The product card itself is a Korean-marketplace classic: thumbnail (mostly 1:1 square, occasionally 16:9 banner), title in body weight, price in 16–18px Gmarket Red and bold, then a delivery chip (스마일배송 / 무료배송), a few badges (쿠폰적용가 / 카드혜택가), and a heart. Cards never carry box-shadow — depth, in Gmarket's chrome, is borders and color tints, not elevation. Pills, however, are everywhere: navigation chips, filter strips, "Smile Club" loyalty rails, all radius 20–27px.

The token system, captured live from :root, is enormous — 247 CSS custom properties — and unusually formal for a legacy marketplace. Ten hues (gray, red, orange, yellow, green, teal, blue, indigo, purple, pink), each in a clean 10-stop ladder (50→900), plus three sub-systems that map directly to revenue programs: Club Smile (Shinsegae Universe loyalty — navy/blue/gray, each in 5 stops), Event (BF / BS / BSD sub-brand event accents), and three single-token service accents (Smile-Yellow #ffd200, StarDelivery-Purple #7130f3, Green-Connect-Blue #00c3a0). The display face is the brand's own Gmarket Sans — distributed at corp.gmarket.com/fonts/ under the SIL Open Font License in three weights (Light 300 / Medium 500 / Bold 700) — used for section H2s, banner copy, and the (image-replacement) wordmark. The body, in contrast, rides the Apple-SD-Gothic-Neo / Noto Sans CJK KR system stack, which is the conventional choice when you cannot guarantee the user has downloaded the brand font.

Key Characteristics:

• Gmarket Red #da120d as the price-discount asset — almost exclusively used on numerical price/discount strings, not as a generic primary CTA fill
• Gmarket Sans as the official display typeface (SIL OFL, 3 weights) — one of the rare Korean DSes with a first-party distributed brand font
• Ten-hue × 10-stop formal color ladder + three named sub-systems (Club Smile / Event / Service-accent) — atypical token-system maturity for a legacy 2000-era marketplace
• 1200px fixed desktop canvas — Gmarket has not committed to fluid responsive on its web flagship; mobile lives at m.gmarket.co.kr
• No box-shadow in sampled production — depth is borders + tints, identical to Bunjang
• Sprite-driven icons (sprite__common--before / sprite__common--after) — legacy CSS sprites, deliberately not migrated to SVG
• BEM-flavored naming — button__category-all, text__title, box__layer-title, list-item--recent — the production code is more disciplined than the rendered density suggests
• Density over hierarchy — page is 10+ stacked category modules deep; users scan visual rhythm (red price + thumbnail), not headings

2. Color Palette & Roles

All values captured 2026-05-15 from production :root CSS custom properties via getComputedStyle(document.documentElement) on https://www.gmarket.co.kr/ and https://corners.gmarket.co.kr/Bestsellers. Token names preserve Gmarket's own casing (PascalCase-Hyphen, e.g. --Red-600, --Club-Navy-Main).

Primary Brand

• Gmarket Red (#da120d) — --Red-600. The brand-level red. Observed exclusively on price-discount text, percentage-off chips, and the occasional CTA edge — not used as a flooded button fill in sampled chrome.
• Pure White (#ffffff) — --White. Page background, card surface.
• Near-Black Ink (#222222) — --Gray-900. Primary text, headings, prices co-anchor with --Red-600.

Service-line Accents

• Smile Yellow (#ffd200) — --Smile-Yellow. Loyalty / SmilePay / SmileClub program color.
• StarDelivery Purple (#7130f3) — --StarDelivery-Purple. Same-day premium delivery service color.
• Green-Connect-Blue (#00c3a0) — --Green-Connect-Blue. Cross-app continuity / Shinsegae connect program teal.

Event Sub-brands (promotional surfaces only)

• BF main (#f1266d) — --Event-bf-main. Black Friday / large promo pink-red.
• BS main (#fd4e28) — --Event-bs-main. Big-sale orange-red.
• BSD main (#7b00e7) — --Event-bsd-main. Specialty promotion violet.

Club Smile (Shinsegae Universe loyalty)

A separate sub-system, with its own Navy / Blue / Gray ladders — used on members-only Club rails and the Smile Universe surface.

• Navy — --Club-Navy-Main #002041 / -80 #334d67 / -60 #66798d / -40 #99a6b3 / -20 #ccd2d9
• Blue — --Club-Blue-Main #497cff / -80 #6d96ff / -60 #92b0ff / -40 #b6cbff / -20 #dbe5ff
• Gray — --Club-Gray-Main #c8c8c8 / -80 #d3d3d3 / -60 #dedede / -40 #e9e9e9 / -20 #f4f4f4

Neutral Scale (--Gray-*)

A 10-stop ladder, semantically aligned with Material's named stops but with Gmarket's own observed text-color discipline.

• --Gray-900 #222222 — primary text, prices (when not red), headings
• --Gray-800 #424242 — strong secondary text
• --Gray-700 #616161 — secondary text
• --Gray-600 #757575 — tertiary text, footer
• --Gray-500 #9e9e9e — disabled text, placeholder
• --Gray-400 #bdbdbd — disabled-icon, divider-strong
• --Gray-300 #e0e0e0 — divider, input border
• --Gray-200 #eeeeee — light divider, card edge
• --Gray-100 #f5f5f5 — section tint, row hover
• --Gray-50 #fafafa — barely-tinted alternate row

Semantic / Utility Hues (each as a 10-stop ladder; -600 is the most-deployed default)

• Red — 50→900 (#fff5f5 → #7d0800); brand & price use -600 #da120d, destructive/error typically -500 #ef2b2a
• Orange — 50→900 (#fff6f2 → #5e2700); time-pressure / countdown / "마감임박" badges use -500 #f9560e and -600 #da4000
• Yellow — 50→900 (#fffce5 → #592500); warning + the Smile-program family
• Green — 50→900 (#e5fce3 → #013600); availability / success — -500 #00c400 observed for delivery-confirmed and stock-ok states
• Teal — 50→900 (#eaf9fa → #0a3545); informational secondary, connect-program accent
• Blue — 50→900 (#eef7ff → #072182); information, link, secondary CTA; --swiper-theme-color: #007aff is Swiper.js default, separately
• Indigo — 50→900 (#f5f5ff → #2d2587); intentionally-cool informational, used on tab strips
• Purple — 50→900 (#fbf5ff → #37188c); brand-extension, premium feature surfaces
• Pink — 50→900 (#fff2fc → #64009a); promotional surfaces, often paired with --Event-bf-main

Default Page Surfaces

• Page background: #ffffff
• Card / surface: #ffffff
• Footer / footer-area tint: --Gray-100 #f5f5f5
• Section-divider tint: --Gray-50 #fafafa

3. Typography

Gmarket runs a two-tier typography model: a first-party display face for set-piece moments and a conventional Korean system stack for body density.

Type Stack

• Display — --gmarketFont: "Gmarket Sans", sans-serif. Used on section H2s (28px / 700 in hero modules, 24px / 700 in compact modules), the H1 wordmark (image-replacement, font-size: 0), and promotional banner copy.
• Body / system — -apple-system, system-ui, "Apple SD Gothic Neo", Roboto, "Noto Sans CJK KR", Tahoma, "Noto Sans Korean", "Noto Sans KR", "Gmarket Sans", sans-serif. Used on 146 / 272 sampled elements — the conventional Korean Apple-first → Noto-fallback chain, with Gmarket Sans as the final fallback before generic sans.

Gmarket Sans (first-party)

Distributed at corp.gmarket.com/fonts/ under the SIL Open Font License (free commercial + non-commercial), released in TTF and OTF, in three weights:

• Light (300)
• Medium (500)
• Bold (700)

Character set: 11,172 Korean syllables · 95 Latin · 986 special. Design intent (per the distribution page): geometric forms within square boundaries, aligned for accessibility across print/web/mobile. The font is the strongest single Tier-1 design-system artifact Gmarket publishes — no token JSON, no Storybook, no Figma library is publicly available, but the brand font is fully open and free to vendor.

Observed Size Scale (px)

• 28px / 700 — Section H2 (hero modules: "지금 제일 잘 나가는 상품")
• 28px / 400 — Subpage H2 (베스트 page: "G마켓 베스트" — note the lighter weight, used when the page itself is the title)
• 24px / 700 — Compact module H2 ("전체카테고리", "프로모션 배너")
• 18.72px / 700 — Card H3 ("하나더 상품", "베스트 상품")
• 16px / 400-700 — Body, primary card title, primary nav anchor, price emphasis
• 14px / 400 — Secondary nav, GNB language switcher ("Global"), filter/utility text
• 13.3333px / 400 — Utility text, tooltip, swiper-button label, layer-close
• 12px / 400-500 — Meta text, footer notices, micro-badges
• 11px / 500 — Price-modifier labels ("쿠폰적용가"), the smallest legible price-context tag

Weight Discipline

Two production weights dominate: 400 (body / nav / meta) and 700 (headings / prices / strong emphasis). Gmarket Sans's available 500 (Medium) is less frequently observed in sampled production CSS — primarily reserved for the rendered logotype and certain banner overlays. The marketing surfaces lean on the 400/700 binary because the body system stack (Apple SD Gothic Neo, Noto Sans KR) is most stable at those two weights.

Line-height

Largely default-browser (1.2–1.5 depending on element). Gmarket does not enforce a strict line-height token system on the home/bestsellers surfaces.

4. Components

All values from live CDP inspect on 2026-05-15. Where a state was not directly observed (hover / pressed / focus / disabled), the value is marked (Inferred). Schema: one field per bullet.

Buttons

Primary CTA (price-anchor / "쇼핑하러 가기")

• Background: #da120d (Inferred — observed as text color, also matches --Red-600; some commerce-detail CTAs ship as red flood fills)
• Text: #ffffff
• Border: none
• Radius: 4px (matches observed --radius level)
• Padding: 14px 24px (Inferred from observed nav padding scale)
• Font: 16px / 700 / system stack
• Use: highest-intent purchase action; restricted to one per surface

Secondary / Outlined

• Background: #ffffff
• Text: #222222
• Border: 1px solid #e0e0e0 (--Gray-300)
• Radius: 3px
• Padding: 0px (observed on button__sellermenu — chrome-utility variant; commerce-page secondary buttons inflate to 10px 16px)
• Font: 14px / 400 / system stack
• Use: chrome-utility actions, "판매자서비스" footer button

Pill / Filter (nav anchor + category chips)

• Background: transparent or #ffffff
• Text: #222222 (active) / #666666 (default)
• Border: 1px solid #e0e0e0 (default, Inferred from card edge token)
• Radius: 20px
• Padding: variable (8–12)px (16–20)px
• Font: 16px / 400 / system stack
• Use: home-page module entry pills, GNB sub-category chips

Pill / Promo banner ("하나더")

• Background: transparent
• Text: #666666
• Radius: 20px
• Font: 16px / 400 / system stack
• Use: in-card promo link with rounded pill affordance, observed live

Sprite / Icon Button

• Background: transparent
• Text: transparent (icon-only — text hidden via sprite)
• Border: none
• Radius: 0px
• Padding: 0–5px
• Use: layer-close (×), swiper-next/prev, tooltip-info, search-clear; legacy CSS-sprite-driven (sprite__common)

Inputs

Search Field (header)

• Background: #ffffff
• Text: #222222
• Border: 2px solid #222222 (Inferred — Gmarket's signature dark-stroked search input)
• Radius: 0px
• Height: 42–48px
• Font: 16px / 400 / system stack
• Inner button: button__search sprite icon-only
• Placeholder: #9e9e9e (--Gray-500)

Filter / Sort Input (refinement strip)

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Radius: 3px (observed)
• Padding: 0
• Font: 14px / 400

Cards

Product Card (home / bestsellers)

• Background: #ffffff
• Border: none (separation via 8–16px gutter)
• Radius: 0–6px on thumbnail container; card itself: 0px
• Shadow: none
• Padding: thumbnail flush, content padding 8px 0
• Thumbnail aspect: 1:1 (square) — dominant; 16:9 for banner-card variants
• Title: 14–16px / 400 / #222222
• Price (current): 16–18px / 700 / #da120d
• Price (original / strike): 12–13px / 400 / #9e9e9e with text-decoration: line-through
• Discount %: 12–18px / 700 / #da120d
• Delivery chip: 11–12px / 500 / chip-background tied to service (스마일배송 yellow / 무료배송 gray)

Ranking Card (bestsellers)

• Adds: numeric rank badge (1, 2, 3 ...) top-left, 18–24px / 700, no fill
• Top-3 ranks: #da120d text
• Ranks 4+: #222222 text

Badges / Chips

Discount-rate Badge

• Background: transparent (text-only) or --Red-50 #fff5f5
• Text: #da120d
• Radius: 0px or 3px
• Font: 12–14px / 700

Smile Club / Loyalty Badge

• Background: --Club-Navy-Main #002041
• Text: #ffd200 (Smile-Yellow)
• Radius: 3–4px
• Font: 11–12px / 700

Delivery Chip (스마일배송 / 무료배송 / 도착보장)

• Background: --Smile-Yellow #ffd200 (스마일배송) / --Gray-100 #f5f5f5 (무료배송) / --StarDelivery-Purple #7130f3 (StarDelivery)
• Text: #222222 on yellow / #616161 on gray / #ffffff on purple
• Radius: 2–3px
• Padding: 2px 6px
• Font: 11px / 500

Navigation

GNB Anchor (top primary)

• Background: transparent (default) → #222222 underline 2px (hover)
• Text: #222222 (default) / #da120d (current)
• Padding: 17px 0px 20px (observed live on button__category-all)
• Font: 16px / 400 / system stack

Utility Nav (top-bar mypage / cart / global)

• Text: #777777 (--Gray-medium)
• Font: 14px / 400 / system stack
• Padding: minimal — text-only with sprite icon

Layers / Modals

Recent-products Layer (box__layer-title)

• Background: #ffffff
• Border: 1px solid #e0e0e0 (Inferred)
• Shadow: none observed
• Title: 16px / 700 / #222222 ("최근 본 상품")
• Tab inactive: #666666 (--Gray-medium)

Service Banners (event-system surfaces)

BF / BS / BSD promotional fills

• Background: --Event-bf-main #f1266d (BF) / --Event-bs-main #fd4e28 (BS) / --Event-bsd-main #7b00e7 (BSD)
• Text: #ffffff
• Use: full-bleed event-week landing modules — these are not part of the everyday chrome; they swap in for event-period campaigns and revert

---

Verified: 2026-05-15 Tier 1 sources:

• Live CDP :9222 inspect — https://www.gmarket.co.kr/ (182 samples, 247 :root CSS vars)
• Live CDP :9222 inspect — https://corners.gmarket.co.kr/Bestsellers (90 samples, 246 :root CSS vars)
• corp.gmarket.com/fonts/ — Gmarket Sans SIL OFL distribution page (typeface = Tier-1-positive) Tier 2 sources:
• getdesign.md/gmarket — "No designs found for 'gmarket'" (verified 2026-05-15)
• styles.refero.design/?q=gmarket — no result cards in SSR DOM (verified 2026-05-15) Conflicts unresolved:
• Primary CTA flooded-red variant inferred (not observed in 272 sampled chrome elements; commerce-detail-page surfaces not captured this pass — flagged for UPDATE)
• Hover / pressed / focus / disabled states not directly captured — single-pass CDP only

5. Layout & Spacing

Gmarket's flagship runs a fixed-1200px desktop canvas (--minWidth: 1200px). This is a deliberate legacy decision — the 2000-founded marketplace has not committed to fluid responsive on www.; the mobile flagship lives at m.gmarket.co.kr as a separate surface. Below 1200px, the desktop site horizontal-scrolls rather than reflowing.

Grid

• Outer max-width: 1200px, centered, no bleed
• Module spacing: ~48–64px vertical between category modules (H2 → first card row → repeat)
• Card grid: 2-up on narrow modules, 4-up on standard modules, 5-up on bestsellers-page rank grid
• Card gutter: 8–16px horizontal, 16–24px vertical
• Inner card padding: 8px around content, thumbnail flush
• GNB strip height: ~50–60px sticky, white background

Spacing Scale (inferred from observed padding/margin frequencies)

Gmarket does not expose --space-* tokens. Observed paddings cluster at:

• 4px — micro (chip vertical)
• 8px — small (card inner)
• 12–16px — medium (button horizontal, list-item padding)
• 20–24px — large (section internal gap)
• 48–64px — module vertical break

Page Anatomy (home, top-to-bottom)

1. Top utility bar — mypage / cart / global / lang (12–13px utility text)
2. Main header — wordmark + search + cart icon
3. GNB — 전체카테고리 / 베스트 / 신상마켓 / 슈퍼딜 / 알뜰쇼핑 / 브랜드데이 / G마켓Pay / 골프 / 라이브
4. Hero swiper banner (Swiper.js, --swiper-theme-color: #007aff)
5. Vertical category modules ×10 (each = H2 + grid)
6. Footer — seller-services + legal + corp links + 신세계그룹 family-site row

6. Iconography & Imagery

• CSS Sprites — Gmarket has not migrated to SVG / icon-font for chrome icons. Production class system: sprite, sprite__common, sprite__common--before, sprite__common--after. Icons are positioned slivers of a master PNG, sized via --spriteSize: 100% 100%. This is a legacy choice — performance-fine, but inaccessible to recoloring at runtime.
• Product thumbnails — 1:1 square dominant; 16:9 banner cards for category-feature modules
• Banner imagery — promotional photography, large-typography overlays in Gmarket Sans, typically text + product + offer; brand stays out of the way
• No illustration system observed in chrome — Gmarket is a photo-first marketplace; illustrations appear only in onboarding / empty-states (not captured this pass)

7. Motion & Interaction

Motion tokens not directly captured in single-pass CDP. Observed motion patterns:

• Swiper.js carousel on hero banner — paged horizontal swipe (default Swiper timing, ~300ms)
• Sticky GNB — fixed on scroll, no transform animation
• Hover affordances — primarily underline + color shift on text-link; observed cursor: pointer on most clickable elements without elaborate transition
• No view-transition / scroll-driven animation observed in chrome

Flagged for UPDATE: capture explicit transition and animation shorthand frequencies, capture hover/focus states.

8. Accessibility & States

Gmarket's flagship has observable a11y debt — surfaced here factually, not editorialized.

• H1 image-replacement — the wordmark <h1> carries font-size: 0px; logo is a sprite background-image. Screen readers receive the text "G마켓" via inner span, but visually-rendered alt-text is absent. Acceptable pattern, but text-color falls back to --Gray-500 #9e9e9e in some sampled cases (image hides this).
• Color contrast on price-red on white — #da120d on #ffffff = 5.5:1 — passes WCAG AA for normal text (4.5:1) and AAA for large text (7:1+). Strong.
• --Smile-Yellow #ffd200 on #ffffff — 1.6:1 — fails WCAG AA. Used as background fill with dark text, not on white as foreground. Risk only if reused inverted.
• Fixed-1200px canvas — fails WCAG 1.4.10 Reflow (320px reflow requirement). Mitigated only by the separate m.gmarket.co.kr mobile surface.
• Sprite-driven icons — no aria-label consistently observed on button__layer-close, button__tooltip, swiper next/prev. Mixed: <button> carries text "닫기" in some cases, sprite-only in others.
• State coverage — visible focus rings inconsistent; default-browser focus outline observed on <a>, custom focus rarely surfaced. Disabled state not directly captured.

Captured floor: focus rings + disabled states are an UPDATE-pass target.

9. Content Voice (analyst paraphrase — no verbatim Gmarket copy)

Gmarket's chrome voice is transactional and time-pressured. It speaks in numeric specificity (price, discount %, time-remaining) and in service-naming (스마일배송 / 안전결제 / 도착보장 / 카드혜택가). It does not advertise brand personality from the chrome — the chrome is the deal. Brand voice lives in event-week landing banners and in the corporate site (corp.gmarket.com), where positioning copy reads aspirational ("Korea's e-commerce benchmark", "We Connect", "지금부터의 마켓").

Voice traits (analyst paraphrase, not lifted):

• Specific over evocative — "쿠폰적용가 7,840원" beats "Great deal"
• Compound service nouns — "스마일배송", "최종카드혜택가", "감정완료" — Korean marketplace argot, dense
• Numeric urgency — countdown, stock-low, "마감임박" are first-class typographic citizens
• Brand restraint — "G마켓" rarely speaks in first-person; the user does the verb

Do: lead with price, name the service plainly, let the number do the work Don't: invent a brand voice from chrome — Gmarket's chrome is a venue, not a personality

10. Voice & Tone (illustrative — OmD fresh derivations, not Gmarket copy)

Three voice samples illustrating the analyst paraphrase above. These are fresh derivations for ports — not Gmarket marketing copy. Verify before adoption.

• "오늘 가격, 오늘 도착." — six syllables, two facts, no adjective
• "쿠폰 적용 시 22% 더." — price-context as headline; the verb is invisible
• "이 가격, 이번 주만." — temporal scarcity without exclamation

Do: specificity, service-name accuracy, price-first Don't: emotional adjectives ("amazing", "최고의"), abstract brand-claims, hero-tagline gestures in card chrome

11. Brand Narrative

Gmarket (지마켓) was founded as 2000 as an open-market predecessor of Korean e-commerce — among the first generations of platforms that let any individual seller post a product to a national catalog. eBay acquired the platform in 2009 and ran it as eBay Korea, alongside Auction (founded 1998, the older sibling). In 2021, Shinsegae Group (신세계그룹) — the conglomerate behind E-Mart, the Shinsegae Department Store, and Starbucks Korea — acquired the eBay Korea business unit, bringing Gmarket and Auction under the Shinsegae Universe umbrella, alongside SSG.com and E-Mart Mall. The 2024–2026 chrome reflects this transition: the home page now surfaces "신세계 유니버스 클럽 전용" modules, the Club Smile color sub-system maps to Shinsegae's loyalty programme, and an "이마트몰" (E-Mart Mall) section ships fresh groceries inside the Gmarket interface.

Gmarket's positioning slogan, observed on the corporate site as factual context: "지금부터의 마켓" ("the market from-now-onward"). The narrative argues that 25 years of marketplace experience is being relaunched as a Shinsegae-integrated commerce floor — Auction for the auction-hunters, Gmarket for the open-market regulars, SSG.com for the premium-vertical, all stitched together with SmilePay (single wallet), StarDelivery (premium delivery), and Smile Club (loyalty + members-only pricing).

Service portfolio (per corp.gmarket.com, captured 2026-05-15): Gmarket (open market, since 2000), Auction (since 1998), SmilePay (wallet), StarDelivery (premium delivery), Smile Club (Shinsegae Universe loyalty), G마켓Pay (payment integration). HQ city, current CEO, headcount, and total funding not captured this pass (corporate site does not surface them on the analyzed page) — flagged for UPDATE.

(Founder name and 1999/2000 founding-team specifics from earlier eBay-Korea era have evolved through three ownership transitions — eBay Korea → Shinsegae acquisition 2021 — and any "founder quote" attribution must verify against multiple ownership-era sources. Not included here without that verification.)

12. Design Principles (analyst-derived from observed patterns)

1. Density is the service. Gmarket users come to scan, not to read. The chrome optimizes scroll efficiency — vertical stacks of category modules, repeating thumbnail-price-chip rhythm — because finding the deal you didn't know you wanted is the value proposition. UI implication: do not introduce hierarchy that breaks scan rhythm; do not pad sections to "breathe" at the expense of card count per fold.

2. Red is for price, not personality. Gmarket Red #da120d is reserved almost exclusively for numerical price-discount tokens. The brand does not flood it as a generic primary fill in observed chrome. UI implication: when porting Gmarket's palette to a new surface, treat red as a semantic-price asset (like Bunjang's), not a brand-button color.

3. Service-name accuracy over copy-craft. "스마일배송" / "안전결제" / "도착보장" / "쿠폰적용가" are first-class typographic citizens. The brand does not abbreviate or rebrand them for casual surfaces. UI implication: in any localized port, render Korean service-names exactly; do not translate "스마일배송" to "Smile Delivery" in Korean chrome.

4. Sub-brand color systems beat a flat palette. Club Smile (5×3 navy/blue/gray), Event (BF/BS/BSD), and three single-token service accents map color directly to revenue programs. UI implication: when extending Gmarket's palette, add named sub-systems for each commercial program, not generic "tertiary" tokens.

5. Legacy is not debt — it's discipline. CSS sprites, fixed-1200px canvas, BEM naming — these are deliberate (cost / stability / muscle-memory for the seller community), not unmaintained. UI implication: do not propose "modernization" without surfacing the operational cost of breaking 25-year-old seller workflows. The mobile flagship at m.gmarket.co.kr is where modern responsive lives.

13. Personas (analyst inference — illustrative, verify before adoption)

Disclaimer: Gmarket does not publish official user personas. The four archetypes below are inferred from observed surface design and Korean-marketplace context. Treat as illustrative analyst fiction for porting decisions, not as ground-truth.

1. The 40-something household manager — primary buyer for the family. Comes for staples (생필품 / 식품 / 세제), comes back for the Smile Club coupon. Scans the home grid by category, opens 4–6 product cards per visit, completes one purchase per session. Values: price accuracy, delivery reliability (스마일배송), coupon-stack legibility.

2. The deal-hunting 30-something — knows the platform inside out. Bookmarks the bestsellers page, sorts by 가격 / 인기 / 신상품, uses keyboard shortcuts. Comes daily during 슈퍼딜 / 빅스마일데이 events. Values: countdown timers, "마감임박" badges, transparent card-discount math.

3. The 50+ open-market regular — Gmarket-since-Y2K. Trusts the brand because it predates current Korean e-commerce. Less mobile-fluent — uses www.gmarket.co.kr on desktop, prefers the fixed-1200px canvas because it's predictable. Values: large enough text (won't tolerate < 14px), Korean service-names (won't tolerate Latin abbreviations), call-center hotline visibility.

4. The Shinsegae Universe loyalty member — newer cohort, post-2021 acquisition. Discovered Gmarket through SSG.com cross-sell or E-Mart. Engages with the Club Smile modules, uses SmilePay as the default wallet. Values: members-only pricing, cross-app continuity (Green-Connect-Blue program), unified loyalty across Shinsegae brands.

14. States

15. Motion & Easing

Motion tokens partially captured — the chrome relies on Swiper.js defaults and CSS-transition shorthand rather than a public token system.

Observed

• Swiper carousel — --swiper-theme-color: #007aff (Swiper.js library color, not a Gmarket brand token), default ~300ms slide duration
• Sticky GNB — position: sticky with no transform animation
• Sprite-icon hover — typically transition: background-position 0.1s (inferred from sprite pattern)

Not Captured (UPDATE targets)

• Modal / layer open-close timing
• Toast / snackbar duration
• Scroll-driven animation
• Reduced-motion handling

Motion Rules (analyst recommendation for ports, not lifted)

• Carousels should default ~300ms
• Hover responses should be ≤150ms
• Layer / modal transitions should be 200–250ms with ease-out
• Respect prefers-reduced-motion: reduce — disable swiper auto-advance, eliminate non-essential transitions

16. Do's and Don'ts

Do

• Reserve Gmarket Red #da120d (--Red-600) for numeric price-discount strings, percentage-off, and strike-through context — treat it as a semantic-price asset, not a generic CTA fill
• Set section H2s in Gmarket Sans at 28px/700 for hero modules and 24px/700 for compact modules, keeping the body on the Apple SD Gothic Neo / Noto Sans CJK KR system stack
• Stack 10+ category modules vertically with ~48-64px breaks and repeating thumbnail-price-chip card rhythm so users scan the grid, not headings
• Convey depth through borders and Gray-ladder tints (--Gray-200 #eeeeee card edge, --Gray-100 #f5f5f5 row/section tint) instead of box-shadow, which is absent in production chrome
• Map color to revenue programs via named sub-systems — Smile-Yellow #ffd200 for loyalty/SmilePay, StarDelivery-Purple #7130f3 for premium delivery, Club-Navy-Main #002041 for Smile Club rails
• Render Korean service-names exactly as-is (스마일배송 / 안전결제 / 도착보장 / 쿠폰적용가) and lead card copy with the price, letting the number do the work

Don't

• Flood Gmarket Red #da120d as a primary button fill across large surfaces — in 272 sampled chrome elements it appears on price text, not as a button background
• Place Smile-Yellow #ffd200 as a foreground on white (1.6:1 contrast, fails WCAG AA) — use it only as a background fill behind #222222 dark text
• Add box-shadow or elevation to product cards; separation comes from the 8-16px gutter and color tints, never drop shadows
• Pad sections to 'breathe' or introduce hierarchy that breaks the dense scan rhythm at the expense of card count per fold
• Translate or rebrand Korean service-names (e.g. 스마일배송 to 'Smile Delivery') in Korean chrome, and avoid emotional adjectives or hero-tagline gestures inside card chrome
• Collapse the type scale onto Medium 500 — production leans on the 400/700 binary, with 500 reserved mainly for the rendered logotype and banner overlays

---

Verified: 2026-05-15 Tier 1 sources:

• Live CDP :9222 inspect: https://www.gmarket.co.kr/ (182 samples, 247 :root CSS vars)
• Live CDP :9222 inspect: https://corners.gmarket.co.kr/Bestsellers (90 samples, 246 :root CSS vars)
• https://corp.gmarket.com/ — corporate-narrative source (founding year, parent company, service portfolio)
• https://corp.gmarket.com/fonts/ — Tier-1-positive Gmarket Sans SIL OFL distribution Tier 2 sources:
• https://getdesign.md/gmarket — "No designs found for 'gmarket'" (negative, verified 2026-05-15)
• https://styles.refero.design/?q=gmarket — no result cards in SSR DOM (negative, verified 2026-05-15) Tier 1 official DS:
• Partial positive — Gmarket Sans typeface (SIL OFL) is a first-party distributed brand-font artifact. No public Storybook / Figma library / token JSON / design.gmarket.* surface exists; design.gmarket.co.kr, tech.gmarket.co.kr, brand.gmarket.co.kr, ui.gmarket.co.kr, gmarket.design all DNS-no-resolve as of 2026-05-15. Production :root token system (247 CSS vars) is the de-facto public artifact, captured directly. Conflicts unresolved:
• Primary CTA flooded-red variant inferred only — not directly observed in 272 sampled chrome elements; commerce-detail-page surface not captured this pass
• Hover / pressed / focus / disabled / error / loading states largely not captured in single-pass CDP
• Founder / CEO / HQ / headcount not captured from corp.gmarket.com analyzed page
• Smile Club / SSG cross-app surfaces not directly inspected — Club Smile colors confirmed from :root but on-surface usage not sampled IP guardrails:
• Gmarket logo / wordmark: reference-only, not redistributed
• Gmarket Sans font files: NOT vendored in this repo (SIL OFL permits redistribution, but we link to first-party distribution at corp.gmarket.com/fonts/)
• No verbatim Gmarket marketing copy reproduced; "지금부터의 마켓" quoted once as factual brand-narrative context in §11
• Service-feature names (스마일배송 / 안전결제 / 도착보장 / Club Smile / SmilePay / StarDelivery) used descriptively
• §10 voice samples are OmD-original illustrative reconstructions; explicitly marked "fresh derivations for ports — not Gmarket marketing copy"
• §13 personas explicitly marked analyst inference, with disclaimer
• Token CSS values reproduced under analytical fair-use as factual public-CSS observations