cdragon 0.1.0

package/skills/to-html/designs/gmarket.DESIGN.md

@@ -0,0 +1,483 @@
+---
+id: gmarket
+name: Gmarket
+display_name_kr: 지마켓
+country: KR
+category: ecommerce
+homepage: "https://www.gmarket.co.kr"
+primary_color: "#ffd200"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=gmarket.co.kr&sz=256"
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Gmarket Sans
+  url: "https://corp.gmarket.com/fonts/"
+  type: brand
+  description: "Gmarket's SIL OFL brand typeface — 3 weights, TTF/OTF, 11,172 KR glyphs. First-party font artifact from a 25-year-old open marketplace; backing 247 :root CSS vars + Smile Yellow #ffd200 + Club/Event/Service sub-systems on the storefront."
+---
+
+# 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
+
+| State | Surface | Token / pattern |
+|---|---|---|
+| **Default** | All chrome | Page bg `#ffffff`, text `--Gray-900 #222222`, accents per palette |
+| **Hover (link)** | Underline + color shift to `--Red-600 #da120d` *(Inferred — common Korean marketplace pattern, not directly captured)* |
+| **Hover (card)** | Subtle border highlight, no shadow added *(Inferred)* |
+| **Pressed** | `0.96` scale or no visual feedback *(Inferred, low-confidence)* |
+| **Focus** | Browser-default outline on `<a>` and `<input>`; custom focus ring not consistently observed |
+| **Disabled** | Text `--Gray-400 #bdbdbd`, background `--Gray-100 #f5f5f5` *(Inferred)* |
+| **Empty (recent-products layer)** | "최근 본 상품이 없습니다." — observed verbatim in layer; analyst note only, not adopted |
+| **Loading** | Skeleton not observed in chrome (page is server-rendered) |
+| **Error (search no-result)** | Not captured this pass — flagged for UPDATE |
+| **Success (purchase / cart-add)** | Toast / layer — not captured this pass |
+| **Promotional / Event-week** | Surface swaps to `--Event-bf-main` / `--Event-bs-main` / `--Event-bsd-main` fills with `#ffffff` text |
+| **Loyalty (Smile Club)** | Module backgrounds shift to `--Club-Navy-Main #002041`, accent `#ffd200` text |
+
+## 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

package/skills/to-html/designs/gogolook.DESIGN.md

@@ -0,0 +1,131 @@
+---
+id: gogolook
+name: "Gogolook"
+country: TW
+category: consumer-tech
+homepage: "https://whoscall.com"
+primary_color: "#0CD25F"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=whoscall.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: Whoscall Brand Guidelines
+  url: "https://whoscall.com/en/brand"
+  type: brand
+  description: Whoscall's official brand page — logo, the documented brand green #0CD25F, and usage guidelines.
+---
+# Design System Inspiration of Gogolook
+
+## 1. Visual Theme & Atmosphere
+
+Gogolook is the Taiwan TrustTech company behind Whoscall, the caller-ID and anti-scam app, and its design speaks in the language of friendly, reassuring consumer safety rather than cold enterprise security. The world is built on a clean white ground (#FFFFFF) that keeps everything calm and uncluttered, punctuated by a vivid, documented brand green (#0CD25F) that signals "you're protected" without ever feeling alarming. Buttons are fully-rounded pills, soft and tappable, and a big playful rounded display face (Nunito) carries the headlines while Noto Sans handles the body, so the voice reads as approachable and human. The overall feeling is of a trusted neighbor who happens to be excellent at spotting scams: warm, confident, and easy to talk to. Color is used sparingly and purposefully, letting the green do the emotional work of conveying safety against a quiet, bright backdrop. Nothing here shouts; the protection is communicated through friendliness, generous rounding, and a single confident accent rather than through dark, defensive, "security-vendor" visual tropes.
+
+## 2. Color Palette & Roles
+- **Whoscall Green #0CD25F** — primary brand color, documented on whoscall.com/en/brand; the core identity hue and the emotional anchor for "trusted protection."
+- **Download-CTA Green #05F067** — the live, slightly brighter near-twin green used on the primary download pill on whoscall.com; carries the main call-to-action.
+- **Light-Green Tint #E6FAEF** — soft pale-green surface used for the premium button background; a gentle, low-pressure accent fill.
+- **Dark Gray #2C3E50** — documented secondary on the brand page; a softened near-black for structure and contrast that avoids harsh pure black.
+- **Primary Text #262626** — the live body and button text color on whoscall.com; warm dark neutral for readability.
+- **White #FFFFFF** — the dominant ground; keeps the experience bright, clean, and reassuring.
+- **Category accent — Pink #F53F90** — a documented live category accent for differentiation and playful color-coding.
+- **Category accent — Teal #019D91** — a second live category accent, complementing the green family with a cooler tone.
+
+## 3. Typography Rules
+Two faces split the work cleanly. **Nunito** is the rounded display face — its soft, geometric letterforms reinforce the friendly, approachable character, scaling all the way up to a 118px hero at weight 500. **Noto Sans** handles body copy at 16px, providing neutral, highly legible text with broad multilingual coverage suited to a Taiwan-rooted consumer product. Primary text renders in #262626, a warm dark neutral rather than pure black, keeping even dense copy soft on a white ground. The pairing is deliberate: rounded, expressive headlines invite the reader in, while clean, sober body text keeps trust-critical information clear and credible.
+
+## 4. Component Stylings
+
+### Primary Download Pill
+
+**Default**
+- Background: #05F067
+- Text: #262626
+- Border: none
+- Radius: 100px
+- Padding: 16px 32px
+- Height: 56px
+- Font: 16px / 500
+- Use: primary download call-to-action on whoscall.com
+
+### Secondary Demo Pill
+
+**Default**
+- Background: rgba(255,255,255,0.8)
+- Text: #262626
+- Border: none
+- Radius: 100px
+- Padding: 16px 32px
+- Height: 56px
+- Font: 16px / 500
+- Use: secondary "demo" action sitting beside the primary download CTA
+
+### Premium Button
+
+**Default**
+- Background: #E6FAEF
+- Text: #262626
+- Border: none
+- Radius: 40px
+- Padding: 16px 32px
+- Height: 57px
+- Font: 16px / 400
+- Use: premium / upgrade action on a soft light-green surface
+
+## 5. Layout Principles
+The composition rests on a generous white ground that gives each element room to breathe, with the bright green CTA acting as the single visual destination on the page. Content is kept calm and uncluttered, so the eye moves naturally from a large rounded Nunito hero down to a clear, tappable pill button. Spacing is comfortable and the hierarchy is unambiguous: one confident primary action, supported by a quieter secondary pill, rather than a wall of competing buttons. The white-first canvas reinforces the brand's reassuring, non-aggressive posture — safety presented as a clean, open, easy-to-navigate space.
+
+## 6. Depth & Elevation
+Elevation is restrained and quiet. The interface leans on the white ground and soft pale-green tint surfaces (#E6FAEF) to separate planes rather than heavy shadow stacks, keeping the look flat, bright, and friendly. Depth is implied mainly through the fully-rounded pill geometry and gentle background-color shifts between the white canvas and the light-green premium surface. No documented hard borders are used on the primary actions, so contrast comes from color fill rather than outlines or strong drop shadows.
+
+## 7. Do's and Don'ts
+
+### Do
+- Lead with the documented Whoscall Green (#0CD25F) as the brand anchor and reserve the brighter #05F067 for the live download CTA.
+- Keep the ground white (#FFFFFF) and let color carry meaning sparingly.
+- Use fully-rounded pill geometry (100px radius) for primary and secondary actions.
+- Pair rounded Nunito display with clean Noto Sans body, and render text in #262626.
+
+### Don't
+- Invent dark "security-vendor" backgrounds or aggressive red-alert palettes; the brand reads as friendly protection.
+- Square off the buttons or reduce their rounding — the pill language is core to the approachable feel.
+- Overload the page with multiple competing accents; the category pink (#F53F90) and teal (#019D91) are accents, not primaries.
+- Substitute pure black for text where #262626 is specified.
+
+## 8. Responsive Behavior
+The white-first, single-CTA layout is built to stay calm and legible as it scales, with the pill buttons holding their fully-rounded 100px geometry and comfortable 16px 32px padding across contexts. The Nunito display face flexes dramatically — anchored by a 118px hero on large screens — while Noto Sans body stays at a steady 16px for reliable readability on smaller viewports. Because the design depends on color fill rather than fine borders or dense shadow, it degrades gracefully: the green CTA remains the clear focal point regardless of width. (Specific breakpoint values are not documented in the captured data; behavior is described qualitatively.)
+
+## 9. Agent Prompt Guide
+When generating UI in Gogolook's style, instruct the agent to: start from a clean white (#FFFFFF) ground; make the single most important action a fully-rounded pill (radius 100px, height 56px, padding 16px 32px, font 16px/500) filled with the live download green #05F067 and dark text #262626; reserve the documented brand green #0CD25F as the identity anchor; add a quieter secondary pill on a translucent white background (rgba(255,255,255,0.8)) with matching geometry; use a softer premium button on a light-green tint surface (#E6FAEF, radius 40px, height 57px, font 16px/400). Set headlines in rounded Nunito (scaling up to a 118px/500 hero) and body in Noto Sans at 16px, all text in #262626. Keep the mood friendly, reassuring, and consumer-grade — approachable protection, never enterprise security. Use category accents pink #F53F90 and teal #019D91 only for light color-coding, never as the dominant hue.
+
+## 10. Voice & Tone
+The voice is warm, reassuring, and plainly human — the tone of a trusted neighbor who is genuinely good at spotting scams. It reassures without alarming, choosing friendly confidence over fear-based urgency. Copy should feel approachable and protective at once: clear about safety, never preachy or technical for its own sake. Where a security vendor might say "threat detected," Gogolook would rather say "we've got your back."
+
+## 11. Brand Narrative
+Gogolook is a Taiwan TrustTech company, best known for Whoscall, its caller-ID and anti-scam app. Its mission energy is consumer safety made friendly: turning the anxious, technical world of fraud and spam into something approachable, reassuring, and easy to trust. The brand deliberately positions itself as approachable protection rather than enterprise security — a clean white ground, a vivid documented brand green, fully-rounded pill buttons, and a big playful rounded display face together signal that staying safe should feel calm and human, not cold and defensive.
+
+## 12. Principles
+- **Approachable protection, not enterprise security** — safety communicated through warmth, rounding, and a single confident green.
+- **Reassure, don't alarm** — bright white grounds and friendly greens replace dark, defensive security tropes.
+- **One confident action** — a single primary pill CTA carries the page; everything else stays quiet.
+- **Friendly by form** — fully-rounded pills and rounded Nunito display make the interface feel human and tappable.
+- **Color with purpose** — green does the emotional work of "you're protected"; accents are used sparingly.
+
+## 13. Personas
+- **The Cautious Everyday User** — wants to feel safe from scam calls without learning security jargon; reassured by the calm white ground, friendly green, and one obvious tap target.
+- **The Family Protector** — sets up safety tools for parents or kids and needs a product that looks trustworthy and non-intimidating; the approachable, neighborly tone earns confidence.
+- **The Regional Mobile-First User** — a Taiwan-rooted, multilingual audience served by Noto Sans body text and a clean, legible, mobile-friendly layout.
+
+## 14. States
+Documented interactive states beyond the default are not present in the captured data, so additional states (hover, pressed, focus, disabled) should be derived conservatively from the established palette rather than invented. Keep any state treatment within the brand's friendly, low-pressure language: lean on gentle shifts within the green family and the light-green tint (#E6FAEF) for surfaces, and preserve the #262626 text and fully-rounded pill geometry across states. Avoid introducing alarm colors or hard borders that would break the reassuring tone. (No specific hover/pressed/focus values are documented; treat them qualitatively.)
+
+## 15. Motion & Easing
+No motion or easing values are documented in the captured data, so motion should be described qualitatively rather than specified numerically. In keeping with the brand's friendly, reassuring character, any motion should feel soft, calm, and welcoming — gentle transitions that match the rounded pill geometry and the unhurried, neighborly tone, never abrupt or alarming. (Specific durations and easing curves are not in the captured data.)
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.gogolook.com/about (corporate brand / company background), https://whoscall.com/en/brand (documented brand color page — Whoscall Green #0CD25F, Dark Gray #2C3E50, White #FFFFFF), https://medium.com/gogolook-tech (brand-owned engineering/tech blog)
+**Tier 2 sources:** getdesign.md/gogolook — NOT LISTED. refero — not listed. Note: documented brand green #0CD25F is the catalog primary; the live download CTA renders the near-twin #05F067.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)