oh-my-design-cli 1.8.6 → 1.9.0

package/web/references/29cm/DESIGN.md

@@ -8,488 +8,392 @@ primary_color: "#000000"
 logo:
   type: favicon
   slug: "https://asset.29cm.co.kr/icon/apple-icon-144x144.png"
-verified: "2026-05-15"
+verified: "2026-07-11"
+omd: "0.1"
+verification_v2:
+  schema: 2
+  checked: "2026-07-11"
+  surfaces:
+    - { id: home, kind: storefront, url: "https://www.29cm.co.kr/", inspected: "2026-07-11" }
+    - { id: best, kind: catalog, url: "https://www.29cm.co.kr/best-products?period=HOURLY&ranking=POPULARITY&gender=F&age=30", inspected: "2026-07-11" }
+    - { id: magazine, kind: editorial, url: "https://www.29cm.co.kr/content/29magazine", inspected: "2026-07-11" }
+    - { id: showcase, kind: editorial, url: "https://www.29cm.co.kr/store/showcase", inspected: "2026-07-11" }
+    - { id: product, kind: product-detail, url: "https://www.29cm.co.kr/products/3970725", inspected: "2026-07-11" }
+  sources:
+    - { id: home-live, kind: product-surface, url: "https://www.29cm.co.kr/", captured: "2026-07-11" }
+    - { id: best-live, kind: product-surface, url: "https://www.29cm.co.kr/best-products?period=HOURLY&ranking=POPULARITY&gender=F&age=30", captured: "2026-07-11" }
+    - { id: magazine-live, kind: product-surface, url: "https://www.29cm.co.kr/content/29magazine", captured: "2026-07-11" }
+    - { id: showcase-live, kind: product-surface, url: "https://www.29cm.co.kr/store/showcase", captured: "2026-07-11" }
+    - { id: product-live, kind: product-surface, url: "https://www.29cm.co.kr/products/3970725", captured: "2026-07-11" }
+  claims:
+    "tokens.colors.accent": &best_evidence { surface_id: best, source_id: best-live, method: live-inspect, captured: "2026-07-11" }
+    "tokens.colors.border": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-11" }
+    "tokens.colors.canvas": *home_evidence
+    "tokens.colors.foreground": *home_evidence
+    "tokens.colors.ink-secondary": &magazine_evidence { surface_id: magazine, source_id: magazine-live, method: live-inspect, captured: "2026-07-11" }
+    "tokens.colors.ink-tertiary": *best_evidence
+    "tokens.colors.muted": *home_evidence
+    "tokens.colors.primary": *home_evidence
+    "tokens.components.carousel-control.bg": &product_evidence { surface_id: product, source_id: product-live, method: live-inspect, captured: "2026-07-11" }
+    "tokens.components.carousel-control.fg": *product_evidence
+    "tokens.components.carousel-control.font": *product_evidence
+    "tokens.components.carousel-control.height": *product_evidence
+    "tokens.components.carousel-control.padding": *product_evidence
+    "tokens.components.carousel-control.radius": *product_evidence
+    "tokens.components.carousel-control.states": *product_evidence
+    "tokens.components.carousel-control.type": *product_evidence
+    "tokens.components.carousel-control.use": *product_evidence
+    "tokens.components.editorial-story-item.bg": &showcase_evidence { surface_id: showcase, source_id: showcase-live, method: live-inspect, captured: "2026-07-11" }
+    "tokens.components.editorial-story-item.radius": *showcase_evidence
+    "tokens.components.editorial-story-item.type": *showcase_evidence
+    "tokens.components.editorial-story-item.use": *showcase_evidence
+    "tokens.components.ghost-outline.bg": *home_evidence
+    "tokens.components.ghost-outline.border": *home_evidence
+    "tokens.components.ghost-outline.fg": *home_evidence
+    "tokens.components.ghost-outline.font": *home_evidence
+    "tokens.components.ghost-outline.height": *home_evidence
+    "tokens.components.ghost-outline.padding": *home_evidence
+    "tokens.components.ghost-outline.radius": *home_evidence
+    "tokens.components.ghost-outline.states": *home_evidence
+    "tokens.components.ghost-outline.type": *home_evidence
+    "tokens.components.ghost-outline.use": *home_evidence
+    "tokens.components.product-grid-item.bg": *best_evidence
+    "tokens.components.product-grid-item.radius": *best_evidence
+    "tokens.components.product-grid-item.type": *best_evidence
+    "tokens.components.product-grid-item.use": *best_evidence
+    "tokens.components.quantity-input.bg": *product_evidence
+    "tokens.components.quantity-input.border": *product_evidence
+    "tokens.components.quantity-input.fg": *product_evidence
+    "tokens.components.quantity-input.font": *product_evidence
+    "tokens.components.quantity-input.height": *product_evidence
+    "tokens.components.quantity-input.radius": *product_evidence
+    "tokens.components.quantity-input.states": *product_evidence
+    "tokens.components.quantity-input.type": *product_evidence
+    "tokens.components.quantity-input.use": *product_evidence
+    "tokens.rounded.chip": *product_evidence
+    "tokens.rounded.full": *product_evidence
+    "tokens.rounded.md": *home_evidence
+    "tokens.rounded.sm": *home_evidence
+    "tokens.shadow.flat": *home_evidence
+    "tokens.spacing.base": *home_evidence
+    "tokens.spacing.lg": *home_evidence
+    "tokens.spacing.md": *home_evidence
+    "tokens.spacing.sm": *home_evidence
+    "tokens.spacing.xl": *home_evidence
+    "tokens.spacing.xs": *home_evidence
+    "tokens.typography.body.lineHeight": *home_evidence
+    "tokens.typography.body.size": *home_evidence
+    "tokens.typography.body.use": *home_evidence
+    "tokens.typography.body.weight": *home_evidence
+    "tokens.typography.caption.lineHeight": *best_evidence
+    "tokens.typography.caption.size": *best_evidence
+    "tokens.typography.caption.use": *best_evidence
+    "tokens.typography.caption.weight": *best_evidence
+    "tokens.typography.editorial-title.lineHeight": *magazine_evidence
+    "tokens.typography.editorial-title.size": *magazine_evidence
+    "tokens.typography.editorial-title.use": *magazine_evidence
+    "tokens.typography.editorial-title.weight": *magazine_evidence
+    "tokens.typography.family.sans": *home_evidence
+    "tokens.typography.nav-display.lineHeight": *home_evidence
+    "tokens.typography.nav-display.size": *home_evidence
+    "tokens.typography.nav-display.use": *home_evidence
+    "tokens.typography.nav-display.weight": *home_evidence
+    "tokens.typography.product-brand.lineHeight": *best_evidence
+    "tokens.typography.product-brand.size": *best_evidence
+    "tokens.typography.product-brand.use": *best_evidence
+    "tokens.typography.product-brand.weight": *best_evidence
+    "tokens.typography.product-name.lineHeight": *best_evidence
+    "tokens.typography.product-name.size": *best_evidence
+    "tokens.typography.product-name.use": *best_evidence
+    "tokens.typography.product-name.weight": *best_evidence
+    "tokens.typography.product-price.lineHeight": *best_evidence
+    "tokens.typography.product-price.size": *best_evidence
+    "tokens.typography.product-price.use": *best_evidence
+    "tokens.typography.product-price.weight": *best_evidence
+
 tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  note: "monochrome system — brand 'color' is the absence of color; #000 ink on #fff, single muted grey, sale-red badge-only accent"
+  source: reconciled
+  extracted: "2026-07-11"
+  note: "Five current public commerce/editorial surfaces. Pretendard Variable is loaded and used; Campton and swiper-icons are declared-only. Accent is current sale text #ff4800, not the previous #ff0066/#ff003c guess."
   colors:
     primary: "#000000"
     foreground: "#000000"
-    body: "#000000"
     canvas: "#ffffff"
-    background: "#ffffff"
-    on-primary: "#ffffff"
-    hairline: "#c4c4c4"
-    border: "#c4c4c4"
-    sale: "#ff0066"
-    error: "#ff003c"
-    skeleton: "#f5f5f5"
+    muted: "#5d5d5d"
+    ink-secondary: "#303033"
+    ink-tertiary: "#474747"
+    accent: "#ff4800"
+    border: "#dddddd"
   typography:
     family: { sans: "Pretendard Variable" }
-    section-headline: { size: 30, weight: 700, lineHeight: 1.13, use: "Special-Order / 29Magazine section headlines, lowercase-English / mixed Korean editorial" }
-    sub-headline:     { size: 24, weight: 700, lineHeight: 1.21, use: "Smaller category nav items" }
-    card-title:       { size: 22, weight: 700, lineHeight: 1.36, use: "Signature editorial card title — PT subjects, themed collections" }
-    card-body:        { size: 15, weight: 400, lineHeight: 1.50, use: "Card descriptions, editorial blurbs" }
-    nav-link:         { size: 16, weight: 200, use: "Primary nav link — 200 inactive, 800 active BEST/current section" }
-    floating-cta:     { size: 15, weight: 400, use: "FAQ / 1:1 문의 — black bg, white text, 2px radius" }
-    ghost-cta:        { size: 14, weight: 700, use: "더보기 — white bg, 1px #c4c4c4 border" }
-    footer-heading:   { size: 13, weight: 700, lineHeight: 1.40, use: "Caps Latin section labels — NOTICE, ABOUT US, MY ORDER, HELP" }
-    product-name:     { size: 12, weight: 400, lineHeight: 1.36, use: "Card product name, restrained, under the image" }
-    product-price:    { size: 12, weight: 700, lineHeight: 1.36, use: "Card price — same size as name, never dominates" }
-    price-caption:    { size: 12, weight: 400, lineHeight: 1.36, use: "옵션비 별도 in muted grey" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, page: 20, lg: 24, xl: 32, margin: 48 }
-  rounded: { sm: 2, md: 4 }
+    nav-display: { size: 40, weight: 700, lineHeight: 1.5, use: "Desktop editorial navigation" }
+    editorial-title: { size: 23, weight: 600, lineHeight: 1.3, use: "29Magazine lead story title" }
+    body: { size: 16, weight: 400, lineHeight: 1.5, use: "Shared commerce and editorial body" }
+    product-brand: { size: 11, weight: 700, lineHeight: 1.36, use: "Product-grid brand link" }
+    product-name: { size: 12, weight: 400, lineHeight: 1.36, use: "Product-grid item name" }
+    product-price: { size: 13, weight: 700, lineHeight: 1.4, use: "Price and discount percentage row" }
+    caption: { size: 10, weight: 500, lineHeight: 1.2, use: "Shipping and product flags" }
+  spacing: { xs: 2, sm: 4, md: 8, base: 16, lg: 24, xl: 28 }
+  rounded: { sm: 2, md: 4, chip: 10, full: 9999 }
   shadow:
-    flat: "none — depth comes from photography on white, not box-shadow"
-    inverted: "#000000 background on #ffffff page — elevation by colour inversion"
+    flat: "none"
   components_harvested: true
   components:
-    ghost-outline: { type: button, bg: "#ffffff", fg: "#000000", radius: 4, padding: "52px height", font: "14px/700", use: "workhorse 더보기 CTA, 1px solid #c4c4c4 border" }
-    inverted-solid: { type: button, bg: "#000000", fg: "#ffffff", radius: 2, padding: "31px height", font: "15px/400", use: "floating FAQ / 1:1 문의 help control" }
-    editorial-tile: { type: card, bg: "#ffffff", radius: 0, font: "22px/700 title + 15px/400 body", use: "full-bleed editorial image, no border, no shadow" }
-    product-card: { type: card, bg: "#ffffff", radius: 0, font: "12px/400 name, 12px/700 price", use: "card name then price (#ff0066 if on sale); caption in muted grey" }
-    sale-pill: { type: badge, fg: "#ff0066", radius: 0, font: "12px/700", use: "percent-off badge only" }
-omd: "0.1"
+    ghost-outline: { type: button, bg: "#ffffff", fg: "#000000", border: "1px solid #dddddd", radius: "4px", padding: "16px 16px 16px 20px", height: "52px", font: "14px / 700", states: "default on home and magazine; pressed observed on product outline CTA", use: "Editorial more and brand-home action" }
+    carousel-control: { type: button, bg: "rgba(0,0,0,0.5)", fg: "#ffffff", radius: "9999px", padding: "14px", height: "52px", font: "16px / 400", states: "disabled, focus, hover, pressed", use: "Product-image previous/next control" }
+    product-grid-item: { type: listItem, bg: "transparent", radius: "4px", use: "BEST product result with image, brand, name, discount, price, and shipping caption" }
+    editorial-story-item: { type: listItem, bg: "transparent", radius: "0px", use: "29Magazine and Showcase story/list entry" }
+    quantity-input: { type: input, bg: "#ffffff", fg: "#000000", border: "1px solid #dddddd", radius: "0px", height: "36px", font: "16px / 500", states: "default captured; no changed focus style observed", use: "Product-detail quantity field" }
 ---
 
 # Design System Inspiration of 29CM
 
 ## 1. Visual Theme & Atmosphere
 
-29CM is the editorial select-shop of Korean e-commerce — a curated department store that happens to live online, whose homepage reads more like the cover of a printed lookbook than the landing page of a retailer. The signature surface is pure white (`#ffffff`) carrying pure black (`#000000`) display type and quietly minimal chrome: no shadows, no gradients, no decorative iconography. The composition leans on the photography to do the heavy lifting and on typography to do the directing. Where Musinsa is street-utility and Ohouse is interior-lifestyle, 29CM is the magazine — generous margins, oversized image columns, captions that read like editorial blurbs, and an unmistakable belief that white space is the most expensive material in the room.
+Across the current homepage, BEST catalog, 29Magazine, Showcase, and a public product-detail page, 29CM presents itself as a taste-led select shop and turns commerce into an editorial browsing experience. Large photography and oversized black navigation lead; product metadata is deliberately compact so curation and shopping efficiency coexist. The common canvas is `#ffffff`, the dominant ink is `#000000`, and the recurring neutral text colors are `#5d5d5d`, `#303033`, and `#474747`. The only repeated chromatic accent found in the captured commerce surfaces is the orange-red sale text `#ff4800`.
 
-The defining typographic move is **Pretendard Variable** running across the entire surface in a tight three-step hierarchy: 30px/700 category headlines, 22px/700 editorial card titles, 12-15px body. There is no display-only face, no decorative weight; the same Korean sans does the magazine title, the product price, and the footer note. Buttons are unornamented — the workhorse CTA is a 1px `#C4C4C4` outlined pill on white with 4px corners ("더보기"), and the floating help affordances ("FAQ", "1:1 문의") are solid `#000000` rectangles with white text and 2px radius, treated like editorial captions rather than UI controls. There is no "primary blue", no accent purple, no brand red. The brand color is the absence of color.
+The desktop home navigation is materially larger than the previous reference described: the captured link is `40px` at weight `700` with a `60px` line height. 29Magazine lead titles use `23px/600`, while BEST product metadata compresses to an `11px/700` brand, `12px/400` name, `13px/700` discount and price, and `10px/500` flags. This scale contrast—not a single three-step type ramp—is the current signature.
 
-Image presentation is the second signature: full-bleed editorial photography sets the rhythm, each PT (Presentation) or Showcase tile leads with one large image and one Korean sentence underneath as caption. Prices are demoted — set at 12px/700, sitting under a 12px/400 product title in muted `rgba(93,93,93,0.64)` (a soft grey nearly invisible until you look for it). The visual order is: photo first, story second, product third, price last. That ordering is the brand's whole thesis.
+Pretendard Variable was both declared and loaded, and the collector observed it on 1,562 elements across all five surfaces. `campton` and `swiper-icons` appeared in font declarations but had zero observed usage, so neither is promoted to a canonical family. The captured surfaces remain mostly flat, but they are not radius-free: an editorial outline action uses 4px corners, product cards use 4px, a 10px chip radius exists, and product-gallery controls are fully round at 9999px.
 
-**Key Characteristics:**
-- Pretendard Variable across all surfaces — one font, three weights (400 / 700 / 800), no display companion
-- Pure `#ffffff` page background, pure `#000000` ink — no off-whites, no warm neutrals
-- Three-tier display hierarchy: 30px section headline / 22px card title / 12-15px body & price
-- Border-radius restraint: 2px for inverted CTAs, 4px for ghost buttons, 0px on most editorial chrome
-- Muted secondary text via `rgba(93,93,93,0.64)` — a single transparent grey, not a swatch
-- 1px solid `#C4C4C4` outlines for ghost buttons — never colored, never thicker
-- 12px/700 prices, 12px/400 product names — both subordinate to the image
-- Generous editorial padding: 20-48px page margins, multi-line lh ≈ 1.36-1.5 on Korean body
-- No shadow system on the homepage — elevation reads as "raised image", not "elevated card"
-- Lowercase, English-leaning category labels (`Special-Order`, `Showcase`, `Lookbook`, `29Magazine`) at 24-30px/700 — the brand's editorial register made literal
+**Observed characteristics:**
+- Five public surfaces reconciled in one capture: storefront, BEST, 29Magazine, Showcase, and product detail
+- `#000000` and `#ffffff` dominate; `#ff4800` is sale text, not a filled pill
+- Loaded primary family: Pretendard Variable
+- 40px/700 desktop editorial navigation and 23px/600 magazine story title
+- Compact commerce metadata from 10px to 13px
+- Flat containers with targeted 0px, 2px, 4px, 10px, and full-round geometry
+- Current outline border `#dddddd`; previous `#c4c4c4` claim was not retained
+- Component inventory is based on native buttons, inputs, and list items across multiple routes
 
 ## 2. Color Palette & Roles
 
-### Primary
-- **Pure Black** (`#000000`): Body ink, headings, inverted CTA backgrounds, footer headings. The brand's only "color" in the strictest sense.
-- **Pure White** (`#ffffff`): Page background, ghost-button background, inverted-CTA text. Total white — not `#fafafa`, not `#f5f5f5`.
+### Core
+- **Primary / foreground** — `#000000`: navigation, product text, headings, and primary ink.
+- **Canvas** — `#ffffff`: page and control surfaces.
+- **Muted** — `#5d5d5d`: repeatedly observed secondary copy; some instances render with alpha.
+- **Secondary ink** — `#303033`: magazine and product-detail copy.
+- **Tertiary ink** — `#474747`: catalog and product-detail supporting copy.
+- **Border** — `#dddddd`: live outline-button and quantity-control border.
+- **Accent** — `#ff4800`: current discount percentage text on BEST and product-detail surfaces.
 
-### Greys (functional, not branded)
-- **Muted Grey 64%** (`rgba(93, 93, 93, 0.64)`): Secondary captions, "옵션비 별도" hints, badge counts, inactive nav items. The single most-used non-primary color on the site, and it is a transparency, not a swatch — meaning the actual rendered colour shifts with whatever sits behind it.
-- **Outline Grey** (`#c4c4c4`): The only border colour used for ghost-style buttons and editorial tile dividers. Mid-light, neutral, no warm tint.
+The accent is rendered as text on a transparent background with 0px radius; it should not be reconstructed as the old `#ff0066` or `#ff003c` sale pill. Low-frequency page-specific values such as `#f4f4f4` were captured but remain evidence rather than canonical tokens because they were not sufficiently recurrent.
 
-### Accent / State (sparse)
-- **Sale Red** (`#ff0066` / `#ff003c` family): Appears only on discount badges and percent-off pills on product cards. Never used for UI affordances or CTAs.
-- **Brand Black on Brand Black**: Floating help CTAs ("FAQ", "1:1 문의") use `#000000` background with `#ffffff` text — the inverse of the page, treated as a high-contrast, low-frequency control.
+## 3. Typography Rules
 
-### What 29CM Explicitly Does Not Use
-- No brand blue, brand purple, or brand red. The category buttons that read "FAQ"/"1:1 문의" are not "primary" — they are inverted black, the same as the footer.
-- No tinted neutrals (no `#fafafa`, no warm cream). Backgrounds are `#ffffff`, full stop.
-- No semantic colour system beyond the discount-red badge. There is no success-green, warning-yellow, or info-blue on the marketing surface.
+### Font evidence
 
-## 3. Typography Rules
+| Evidence class | Resolution |
+|---|---|
+| Official product-use | No separate public typography standard was located; product-use comes from inspected first-party surfaces. |
+| Live surface-use | Loaded `Pretendard Variable` appeared on 1,562 elements across five surfaces. |
+| Official distributed asset | No 29CM product font asset is promoted from distribution evidence. |
+| Declared-only | `campton` and `swiper-icons` had zero observed text usage. |
+| Unresolved | Native-app-only or campaign-specific families remain unresolved until inspected. |
 
-### Font Family
-- **Primary**: `Pretendard Variable`, with fallback chain `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
-- **Single-family system**: There is no separate display face, no serif companion, no monospace. Pretendard Variable handles 100% of legible surfaces.
-
-### Hierarchy
-
-| Role | Size | Weight | Line Height | Notes |
-|------|------|--------|-------------|-------|
-| Section Headline (Special-Order / 29Magazine) | 30px | 700 | ~1.13 | Lowercase-English / mixed Korean editorial headlines |
-| Sub-Headline (lower category) | 24px | 700 | ~1.21 | Smaller category nav items |
-| Editorial Card Title | 22px | 700 | 29.92px (1.36) | The signature card title — PT subjects, themed collections |
-| Editorial Body / Description | 15px | 400 | 22.5px (1.50) | Card descriptions, editorial blurbs |
-| Nav Link (primary) | 16px | 200-800 | normal | 200 = inactive secondary, 800 = active "BEST" / current section |
-| Floating CTA ("FAQ", "1:1 문의") | 15px | 400 | normal | Black bg, white text, 2px radius |
-| Ghost CTA ("더보기") | 14px | 700 | normal | White bg, 1px `#c4c4c4` border |
-| Footer Heading | 13px | 700 | 18.2px (1.40) | Caps Latin section labels — `NOTICE`, `ABOUT US`, `MY ORDER`, `HELP` |
-| Product Name (card) | 12px | 400 | 16.32px (1.36) | Black ink, restrained, sits under the image |
-| Product Price | 12px | 700 | 16.32px (1.36) | Same size as the name — price never dominates the card |
-| Price Caption ("옵션비 별도") | 12px | 400 | 16.32px (1.36) | In `rgba(93,93,93,0.64)` grey |
-
-### Principles
-
-- **One family, three weights.** Pretendard Variable at 400 (body, captions), 700 (titles, prices, ghost CTAs), and 800 (active navigation). 200 appears on inactive secondary nav as a quiet hint. There is no italic; emphasis is by weight, never style.
-- **Editorial card title = 22px/700.** This is the unit of voice. Most magazine-style tiles on the homepage carry one 22-29px Korean sentence at weight 700, then a 15px/400 description in the same line-height ratio. The pair is the brand's grammar.
-- **Latin labels at large sizes, Korean at body sizes.** Category navigation uses English (`Special-Order`, `Showcase`, `PT`, `29Magazine`) at display sizes (24-30px), while Korean dominates body and editorial copy. The mixing is intentional — the English serves as a magazine table-of-contents register.
-- **Prices are never the loudest thing on a card.** 12px/700 is by design subordinate to the 22px title and the photo. Where Coupang puts price first, 29CM puts price last.
-- **Letter-spacing is `normal` almost everywhere.** No tight tracking, no display-tracking compensation. The font is well-cut enough to carry display sizes without spacing intervention.
-- **Line-height ≈ 1.36-1.50.** Korean bodies need air; the editorial register needs more. 1.36 on titles, 1.50 on prose — never tighter.
+Specimen availability is separate from family truth and follows a loadable, licensed source.
 
-## 4. Component Stylings
+- **Canonical family:** `Pretendard Variable` — loaded and used across all five inspected surfaces.
+- **Declared-only:** `campton` and `swiper-icons` — zero observed element usage; do not use as canonical text families.
+- **Fallbacks:** preserve the product's CSS fallback chain when implementing, but do not infer a separate display face from declarations alone.
+
+### Captured hierarchy
+
+| Role | Size | Weight | Line height | Captured surface |
+|---|---:|---:|---:|---|
+| Desktop editorial navigation | 40px | 700 | 60px | Home |
+| Magazine lead story title | 23px | 600 | 29.9px | 29Magazine |
+| Shared body | 16px | 400 | 24px | Home and editorial |
+| Product-grid brand | 11px | 700 | 15.0px | BEST |
+| Product-grid name | 12px | 400 | 16.3px | BEST |
+| Product price and discount | 13px | 700 | 18.2px | BEST and product detail |
+| Shipping and product flag | 10px | 500 | 12px | BEST and product detail |
 
-### Buttons
+Use the large-to-small contrast intentionally: editorial navigation and stories establish discovery, while dense commerce metadata stays compact. Do not substitute the obsolete 30px/700 and 22px/700 hierarchy as if it were the current live system.
 
-**Ghost Outline (the workhorse — "더보기")**
+## 4. Component Stylings
+
+### Ghost Outline
+- Type: button
 - Background: `#ffffff`
 - Text: `#000000`
-- Border: `1px solid #c4c4c4`
+- Border: `1px solid #dddddd`
 - Radius: 4px
-- Padding: 16px 16px 16px 20px (asymmetric — slightly larger left for trailing-arrow icon)
+- Padding: 16px 16px 16px 20px
 - Height: 52px
-- Font: 14px Pretendard Variable weight 700
-- Use: "더보기 / View more" on every editorial section ending, primary "load more" affordance
+- Font: 14px at weight 700
+- States: default captured on home and magazine; a related product outline action exposed pressed state
+- Use: editorial more action and brand-home action
 
-**Inverted Solid (floating help — "FAQ", "1:1 문의")**
-- Background: `#000000`
+### Carousel Control
+- Type: button
+- Background: `rgba(0,0,0,0.5)`
 - Text: `#ffffff`
-- Border: none
-- Radius: 2px
-- Padding: 4px 8px 4px 14px (asymmetric — leading icon space)
-- Height: 31px
-- Font: 15px Pretendard Variable weight 400
-- Use: Fixed-position floating help controls on the bottom-right; the only persistent solid-fill control on the site
-
-**Category Pill (navigation count badges — "63", "175", "6K")**
-- Background: transparent
-- Text: `rgba(93, 93, 93, 0.64)`
-- Border: none
-- Radius: 4px (inherited from container)
-- Padding: 0
-- Height: 52px (tap target, not visual height)
-- Font: 16px Pretendard Variable weight 400
-- Use: Category nav row count badges — number-only, large tap target, no visual chrome
-
-**Sale Discount Pill** (product card overlay)
-- Background: `#ffffff` or transparent
-- Text: `#ff0066` (sale red)
-- Border: none
-- Radius: 0px
-- Font: 12px weight 700
-- Use: Percent-off badge on product cards, often paired with the price
+- Border: none observed
+- Radius: 9999px
+- Padding: 14px
+- Height: 52px
+- Font: 16px at weight 400
+- States: disabled, focus, hover, and pressed captured
+- Use: product-image previous and next controls
 
-### Cards & Containers
+### Product Grid Item
+- Type: listItem
+- Background: transparent
+- Radius: 4px
+- Content: image, brand, name, `#ff4800` discount text, price, and shipping caption
+- Use: BEST result grid
 
-**Editorial Tile** (PT / Showcase / Magazine)
-- Background: `#ffffff`
-- Border: none
-- Radius: 0px on the outer container; image inherits 0px (square / hard-edged)
-- Padding: image full-bleed; caption block has 16-20px top padding
-- Shadow: none — relies on photography and whitespace for separation
-- Title: 22px / 700 / `#000000` / lh 29.92px sitting directly under the image
-- Body: 15px / 400 / `#000000` / lh 22.5px
-- Use: The dominant homepage unit — themed brand stories, lookbooks, editor curations
-
-**Product Card**
-- Background: `#ffffff`
-- Border: none
+### Editorial Story Item
+- Type: listItem
+- Background: transparent
 - Radius: 0px
-- Image: square or 4:5 portrait, 0px radius
-- Title: 12px / 400 / `#000000` directly under the image
-- Price: 12px / 700 / `#000000` (or red `#ff0066` if on sale)
-- Caption ("옵션비 별도", "무료배송"): 12px / 400 / `rgba(93,93,93,0.64)`
-- Spacing: 8-12px between rows of the card meta block
-- Use: Standard catalog item — image-first, text small, no chrome
-
-### Inputs & Forms
+- Content: large editorial media with story metadata
+- Use: 29Magazine and Showcase lists
 
+### Quantity Input
+- Type: input
 - Background: `#ffffff`
-- Border: none on the homepage search affordance; bottom-rule only on focus
+- Text: `#000000`
+- Border: `1px solid #dddddd`
 - Radius: 0px
-- Font: Pretendard Variable
-- Style: Editorial — search reads as a header-bar input, not a boxed UI control. When boxed elsewhere (PDP, checkout) it uses a 1px `#c4c4c4` border and 4px radius matching the ghost button.
-
-### Navigation
-
-- Header background: `#ffffff` (transparent over hero on scroll)
-- Layout: logo center / utility links left and right at 16px / weight 200
-- Primary category row: 16-30px Latin labels, weight 700-800 active, 200 inactive
-- Logo: 29CM wordmark — see Logo asset
-- Sticky behaviour: header stays, drops the secondary category row after scroll
-- Mobile: hamburger toggle, full-screen sheet with same hierarchy
+- Height: 36px
+- Font: 16px at weight 500
+- States: default captured; no visually distinct changed focus style was observed
+- Use: product-detail quantity field
 
-### Footer
+The collector found 68 component variants across the five routes: 40 button variants, 27 list-item variants, and one input variant. No safe click expansion was executed because the candidate interactions could mutate navigation or commerce state; pseudo-state capture still recorded disabled, focus, hover, and pressed variants where available.
 
-- Background: `#ffffff`
-- Padding: 20px 48px 48px (asymmetric — tight top, generous bottom)
-- Section headings: 13px / weight 700 / `#000000`, all-caps Latin (`NOTICE`, `ABOUT US`, `MY ORDER`, `MY ACCOUNT`, `HELP`)
-- Body links: ~13-14px / weight 400 / `#000000`
-- No background tint, no top border — the footer is just more whitespace with denser type
+---
 
-### Decorative Elements
+**Verified:** 2026-07-11 (five-surface live recapture and deterministic reconciliation)
+**Tier 1 sources:** https://www.29cm.co.kr/ , https://www.29cm.co.kr/best-products?period=HOURLY&ranking=POPULARITY&gender=F&age=30 , https://www.29cm.co.kr/content/29magazine , https://www.29cm.co.kr/store/showcase , https://www.29cm.co.kr/products/3970725
+**Tier 2 sources:** https://getdesign.md/29cm returned “No designs found for 29cm”; https://styles.refero.design/?q=29CM exposed no 29CM-specific style result in the rendered search path inspected on 2026-07-11.
+**Conflicts unresolved:** none
 
-- **No iconography on hero/editorial surfaces.** Decorative graphics are intentionally absent; the image is the decoration.
-- **Trailing-arrow on ghost CTAs.** "더보기" buttons carry a thin `>` chevron at the right — the only systematic icon use on marketing surfaces.
-- **Sale red as the single accent.** When a percent-off ribbon appears on a product, it is the only chromatic moment on that tile. The restraint makes it work.
+Current live evidence supersedes the prior pink accent, `#c4c4c4` outline, 22px/700 editorial title, and radius-ceiling assumptions.
 
----
+## 5. Layout Principles
 
-**Verified:** 2026-05-13 (omd:add-reference CREATE)
-**Tier 1 sources:** www.29cm.co.kr/ (live DOM inspect, Pretendard Variable + #000/#fff + 22px/700 editorial cards + 1px `#c4c4c4` ghost CTAs + 2px-radius floating black CTAs — confirmed via getComputedStyle on home surface, scroll-loaded editorial tiles, footer, and floating help affordances)
-**Tier 2 sources:** getdesign.md/29cm — *no entry returned* ("No designs found for '29cm'"); styles.refero.design/?q=29cm — *no 29CM-tagged styles found* (search returned generic editorial/gallery references unrelated to 29CM)
-**Conflicts unresolved:** none — Tier 2 was silent on every claim, so Tier 1 live observation is the sole source. Token values in this section come exclusively from live `getComputedStyle()` on www.29cm.co.kr 2026-05-13.
+The observed surfaces alternate between wide editorial storytelling and dense commerce lists. Home and magazine reserve large blocks for imagery and navigation; BEST compresses repeated product metadata; product detail separates gallery controls from the purchase panel. Preserve those surface-specific densities instead of forcing one universal card grid.
 
-## 5. Layout Principles
+The canonical spacing samples are 2px, 4px, 8px, 16px, 24px, and 28px. They are measured reusable values, not a claim that every page follows a strict mathematical scale. Product and story lists should use their native list-item structure so a renderer can preserve image, label, title, price, and flag relationships.
 
-### Spacing System
-- Base unit: 4px (derived from 4-8-12-16-20-24-32-48 cascade observed in padding values)
-- Page horizontal margin: 48px desktop, ~16-20px mobile
-- Editorial tile gap: 24-32px between major sections
-- Card meta gap (image → title → price): 8-12px between rows
-- Footer block padding: 20px top / 48px bottom — asymmetric, generous at the bottom
-
-### Grid & Container
-- Max content width: ~1280px centered, with full-bleed exceptions for hero editorial
-- Editorial grid: 2-column on tablet, 3-4 column on desktop for product tiles, 1-2 column for PT/Magazine stories
-- Hero: typically full-bleed image with 30px/700 caption sitting beneath, not overlaid
-- Category nav row: horizontal scroll on mobile, fully visible on desktop
-
-### Whitespace Philosophy
-- **Whitespace is the brand asset.** 29CM treats empty space the way Apple treats it on iPhone hero pages — as proof that the curation was tight enough to remove rather than add.
-- **Photography is the second voice.** Image columns are oversized relative to text columns; captions stay short and well-set rather than competing with the image.
-- **Price is not the destination.** The vertical rhythm of a product card — image, title, price — keeps price last so the user reads narrative before number.
-
-### Border Radius Scale
-- 0px: Images, editorial tiles, search inputs, category labels — most surfaces
-- 2px: Inverted black CTAs (`FAQ`, `1:1 문의`) — the smallest radius in the system, used on the highest-contrast control
-- 4px: Ghost outline buttons (`더보기`), boxed form inputs on PDP
-- No pill shapes, no >8px radii anywhere on the marketing surface
+The captured radius vocabulary is 2px, 4px, 10px, and 9999px, plus square 0px surfaces. Fully round geometry is valid for image-carousel controls; the earlier rule that prohibited radii above 8px was incorrect.
 
 ## 6. Depth & Elevation
 
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow, no border | Page background, editorial tiles, product cards — the dominant state |
-| Outline (Level 1) | `1px solid #c4c4c4` | Ghost CTAs, boxed form inputs |
-| Inverted (Level 2) | `#000000` background on `#ffffff` page | Floating help CTAs, footer headings — "elevation by colour inversion" |
-| Image-as-elevation | Photography on white | Editorial tiles — the photograph itself reads as the lifted layer, no shadow needed |
-| Focus | 2px black outline offset | Keyboard focus ring on interactive elements |
+| Treatment | Captured use |
+|---|---|
+| Flat, no shadow | Page, editorial story items, and product list items |
+| `1px solid #dddddd` | Ghost outline action and quantity input |
+| `rgba(0,0,0,0.5)` overlay | Product-gallery carousel control |
+| Full-round geometry | 52px carousel controls |
 
-**Shadow Philosophy.** 29CM's marketing surface has no shadow system. The page is flat by design — depth comes from photographic content sitting on white, not from CSS box-shadows. The closest thing to "elevation" is the high-contrast inverted black CTA, which reads as an editorial pull-quote callout rather than a UI button. Adding a `0px 4px 8px rgba(0,0,0,0.1)` shadow to a 29CM tile would immediately look off-brand — it would push the page from "magazine" toward "SaaS dashboard".
+The canonical shadow token is `none`. This does not imply that every transient or uninspected surface lacks elevation; it means no reusable box-shadow could be promoted from the five captured public routes.
 
 ## 7. Do's and Don'ts
 
 ### Do
-- Use Pretendard Variable on every text element — there is no second face.
-- Pair every editorial tile with one photograph and one short Korean caption at 22px/700.
-- Use `#000000` and `#ffffff` as the only structural colours; `rgba(93,93,93,0.64)` for muted captions.
-- Keep border-radius at 0px, 2px, or 4px — nothing above 4px on marketing surfaces.
-- Subordinate price (12px/700) to title and image; never invert this order.
-- Lean on whitespace for separation — 24-48px between sections, not borders or dividers.
-- Use the inverted black CTA (`#000000` bg / `#ffffff` text / 2px radius) sparingly for high-priority, persistent affordances only.
-- Mix Latin labels (Special-Order, Showcase, 29Magazine) at display sizes with Korean body copy at smaller sizes.
+- Use loaded `Pretendard Variable` as the canonical text family.
+- Keep `#000000` and `#ffffff` as structural colors and `#ff4800` for observed sale text.
+- Reproduce the 40px/700 navigation, 23px/600 editorial title, and compact 10–13px product metadata as distinct roles.
+- Use `#dddddd` for the verified outline and quantity borders.
+- Preserve list-item semantics for product grids and editorial story collections.
+- Allow full-round product-gallery controls where the live component uses them.
+- Distinguish loaded fonts from declared-only font resources.
 
 ### Don't
-- Don't add box-shadows to editorial tiles or product cards — the homepage is flat.
-- Don't introduce a brand blue, brand red, or brand purple for CTAs. The brand "colour" is monochrome.
-- Don't use pill-shaped buttons or radii above 8px anywhere on marketing surfaces.
-- Don't promote price to the top of a card or to the largest size — image first, price last.
-- Don't use italic for emphasis; emphasis is by weight (400 → 700).
-- Don't tint backgrounds (`#fafafa`, `#f5f5f5`) — 29CM is pure white.
-- Don't compose hero text overlaid on photography; 29CM almost always sets caption *below* the image, not on top.
-- Don't use decorative iconography on hero — the image is the decoration.
+- Don't restore `#ff0066` or `#ff003c` as the current discount accent.
+- Don't render discount text as a filled pill; the captured treatment is transparent with 0px radius.
+- Don't promote Campton or swiper-icons to a canonical text family without observed usage.
+- Don't assert that 4px is the maximum radius.
+- Don't invent mobile breakpoints, motion timings, semantic state colors, or focus treatments that were not captured.
+- Don't combine editorial and product metadata into a single generic typography style.
+- Don't replace `#dddddd` with the obsolete `#c4c4c4` outline claim.
 
 ## 8. Responsive Behavior
 
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <768px | 1-column editorial tiles, 2-column product grid, hamburger nav, 16-20px page margin |
-| Tablet | 768-1024px | 2-column editorial, 3-column product grid, condensed nav |
-| Desktop | 1024-1440px | 2-3 column editorial, 4-column product grid, full top nav row |
-| Large Desktop | >1440px | 1280px max centered content, generous margins flanking |
-
-### Touch Targets
-- Category badge buttons: 52px tap height even when visually smaller
-- Floating CTAs ("FAQ", "1:1 문의"): 31px height — minimum acceptable on mobile, paired with 8-12px padding
-- Editorial tiles: full tile is tappable, no separate "view" button
-
-### Collapsing Strategy
-- Section headlines: 30px → 22px on mobile, weight 700 maintained
-- Nav row: full horizontal list → hamburger sheet
-- Product grid: 4-column → 2-column on mobile, image-aspect maintained
-- Page margin: 48px → 16-20px on mobile
-- Floating help CTA: stays bottom-right at all viewports — the one consistent control
-
-### Image Behavior
-- Editorial photography: full-bleed at all sizes; aspect ratio held
-- Product cards: square or 4:5 portrait, maintained on mobile
-- No lazy-load skeletons styled as cards — placeholder is a flat grey block, no shimmer
+The July 11 evidence set validates current desktop layouts and component geometry. It does not provide enough controlled multi-viewport samples to canonize breakpoints or mobile transformations.
+
+- Preserve image aspect ratio and metadata order when adapting product and story list items.
+- Keep the full 52px carousel control target when space permits; verify any compact mobile variant separately.
+- Retain semantic list and button structure at every viewport.
+- Treat navigation collapse, mobile column counts, tablet gutters, and fixed-position help behavior as `[FILL IN: controlled multi-viewport capture required]`.
 
 ## 9. Agent Prompt Guide
 
-### Quick Token Reference
-- Page background: `#ffffff`
-- Body text: `#000000`
-- Muted text: `rgba(93,93,93,0.64)` (transparent grey on white = `#5d5d5d` at 64% opacity)
-- Outline grey: `#c4c4c4`
-- Sale red: `#ff0066` family (badge-only)
-- Primary CTA: inverted black — `#000000` bg, `#ffffff` text, 2px radius
-- Secondary CTA: ghost — `#ffffff` bg, `#000000` text, `1px solid #c4c4c4`, 4px radius
-- Font family: `Pretendard Variable, ui-sans-serif, system-ui, sans-serif`
-- Section headline: 30px / 700 / lh 1.13
-- Editorial title: 22px / 700 / lh 29.92px
-- Editorial body: 15px / 400 / lh 22.5px
+### Quick token reference
+- Canvas: `#ffffff`
+- Foreground and primary: `#000000`
+- Muted: `#5d5d5d`
+- Secondary and tertiary ink: `#303033`, `#474747`
+- Sale accent: `#ff4800`
+- Border: `#dddddd`
+- Font: `Pretendard Variable`
+- Navigation: 40px / 700 / 60px
+- Editorial title: 23px / 600 / 29.9px
+- Product brand: 11px / 700
 - Product name: 12px / 400
-- Product price: 12px / 700
-
-### Example Component Prompts
-- "Create an editorial tile: full-bleed photograph on top, then 16px gap, then 22px Pretendard Variable weight 700 Korean headline in `#000000`, then 8px gap, then 15px weight 400 description in `#000000`. No border, no shadow, no radius. White page background."
-- "Build a 'View more' ghost button: white background, 1px solid `#c4c4c4` border, 4px radius, 14px Pretendard Variable weight 700 black text, padding 16px 16px 16px 20px, height 52px. Trailing chevron `>` right-aligned."
-- "Build a product card: square photograph at 0px radius, then 12px Pretendard Variable weight 400 product name in `#000000`, then 12px weight 700 price in `#000000` directly below. Caption row '옵션비 별도' in 12px weight 400 `rgba(93,93,93,0.64)`. No card border, no shadow."
-- "Floating help CTA: `#000000` background, `#ffffff` text, 2px radius, padding 4px 8px 4px 14px, height 31px, 15px Pretendard Variable weight 400. Fixed bottom-right, 24px inset."
-- "Footer: white background, padding 20px 48px 48px. Column headings in 13px Pretendard Variable weight 700 uppercase Latin (`NOTICE`, `ABOUT US`, `HELP`). Link body 13-14px weight 400 black. No background tint, no top border."
-
-### Iteration Guide
-1. Always use Pretendard Variable — it is the brand font; do not substitute Noto Sans KR or Apple SD Gothic Neo unless the runtime cannot load Pretendard.
-2. Default to `#000000` on `#ffffff`. Reach for `rgba(93,93,93,0.64)` only for secondary captions. Reach for any other colour only if you can name a specific brand reason.
-3. Editorial card titles are 22px/700 with 29.92px line-height. This pair is the single most distinctive typographic unit in the system — replicate it precisely.
-4. Product price is 12px/700 and lives under the title, not above. Inverting this order is the most common mistake when adapting other commerce designs to 29CM.
-5. Radius scale is 0 / 2 / 4 — never 8, never pill. The 4px ghost button is the largest radius on the marketing surface.
-6. White space is the brand. If a layout feels "empty", you are probably close to correct. Resist the urge to fill.
-7. The inverted black CTA is high-cost. Use it once or twice per screen at most.
-8. Photography does the visual heavy lifting. If you have weak imagery, no amount of typography will recover the 29CM register.
+- Product price and discount: 13px / 700
+- Product flag: 10px / 500
+
+### Construction prompts
+- “Build a 29CM ghost action with a white background, black 14px/700 text, 1px `#dddddd` border, 4px radius, 52px height, and 16px 16px 16px 20px padding.”
+- “Build a BEST product list item with image, 11px/700 brand, 12px/400 product name, transparent `#ff4800` 13px/700 discount text, 13px/700 price, and 10px/500 shipping flag.”
+- “Build a product-gallery control at 52px square with `rgba(0,0,0,0.5)` background, white icon, 14px padding, and 9999px radius. Include disabled, focus, hover, and pressed variants.”
+- “Build a quantity input at 36px height with white background, black 16px/500 text, 1px `#dddddd` border, and 0px radius.”
+
+Use the exact component evidence before extrapolating. If a requested state, viewport, or pattern is absent, mark it for capture rather than filling it with a generic commerce convention.
 
 ---
 
 ## 10. Voice & Tone
 
-29CM speaks like an editor curating a magazine, not a marketer running a sale — calm, considered, never excited, never urgent. The brand book (`Guide to better 29CM`) defines the voice as personable but quiet: the brand persona is described as "착하지만 엉뚱한" (kind but offbeat), and the tone is treated as a deliberate craft layer that must stay consistent across every product caption, push notification, and email. Korean is the primary voice; English appears only as section labels and category names (`Special-Order`, `Showcase`, `29Magazine`) borrowed from print-magazine convention.
-
-| Context | Tone |
-|---|---|
-| Editorial card titles | Short Korean phrases, often poetic or sensory (`나폴리의 산들바람`, `쿨링 시스템`). No imperatives. |
-| Editorial card body | One sensory sentence + invitation. `스치는 바람처럼 여유로운 여름을 담은 지노키오의 여름 컬렉션을 같이 구경해요.` — the verb endings (`~해요`) are friendly-formal, never `~합니다`. |
-| Product names | Brand-led, restrained — `[29CM 단독] (uni)Breeze 아이보리 솔리드 파자마`. Brackets carry exclusivity markers. |
-| CTAs | `더보기`, `자세히 보기`, `장바구니 담기`. Bare verb-stems with `~기` endings. Never English (`SHOP NOW`), never exclamatory. |
-| Price captions | Bare numerals + `원` later in the line. Modifier captions (`옵션비 별도`, `무료배송`) sit quietly under the price in muted grey. |
-| PT (Presentation) copy | Long-form editorial — opens with a thesis sentence, then product context, then story. Reads like a Brunch essay. |
-| Push / email | Same magazine register — `오늘의 컬렉션을 큐레이션했어요` rather than `세일 시작! 지금 클릭!`. |
-| Empty states | Single Korean line explaining the absence — `아직 찜한 상품이 없어요`. Never `데이터가 없습니다`. |
+The current site title identifies 29CM as “감도 깊은 취향 셀렉트샵 29CM.” Public navigation mixes Korean utility language with English editorial labels such as BEST, Showcase, and 29Magazine. Product grids use concise brand, item, discount, price, and shipping strings; editorial surfaces allow longer story titles.
 
-**Forbidden phrases.** `최저가`, `초특가`, `긴급세일`, `오늘만`, English exclamatory CTAs (`SHOP NOW!`, `BUY!`), emoji of any kind on marketing surfaces, urgency-driven countdowns (`마감 임박!`), and the corporate-formal `~합니다` ending on consumer-facing voice. (`~합니다` is reserved for legal disclosure pages only.) Stacked superlatives on a single product (`프리미엄 럭셔리 시그니처 컬렉션`) read as Coupang-grade promo and are off-brand.
+These observations establish interface examples, not a complete official writing standard. They support one practical boundary: navigation and commerce metadata stay concise, while editorial stories may use longer, curatorial language. A current official voice-and-tone guide was not located, so this reference does not invent forbidden phrases, sentence endings, push copy, or error-copy rules. Future claims in those areas require first-party guidance or a captured product state.
 
 ## 11. Brand Narrative
 
-29CM was founded in **2011** as a media-commerce hybrid — the **C stands for Commerce** and the **M stands for Media** — under the parent operator Cafe24's incubator before passing through several owners. The name itself encodes the thesis: **29 centimeters** is, in the brand's own framing, *"the closest distance at which two people can open their hearts"* — the editorial premise that shopping is less about transaction than about taste, and that 29CM stands at conversational distance from its customer rather than retail distance ([NamuWiki / Asiance](https://blog.asiance.com/2021/03/24/vertical-platform-for-mz-generation/)). The brand's official identity statement is **"Guide to Better Choice"** — a curated selection promise rather than a discount promise.
+29CM presents itself on its current official storefront as “감도 깊은 취향 셀렉트샵.” The five inspected surfaces support an observable editorial-commerce positioning through magazine stories, showcases, catalog ranking, and product purchase flows.
 
-The company was acquired by **Musinsa (무신사)** in **2021** and now operates as the editorial counterweight inside the Musinsa group: where Musinsa is street-utility and scale, 29CM is curation and editorial depth, with a dedicated PT (Presentation) format introduced in 2013 that publishes ~1.5 long-form brand stories per week ([29CM Brunch — likenoothers](https://brunch.co.kr/@likenoothers/11)). The 2023 Seongsu offline store and the [2023 BX renewal](https://designcompass.org/2023/08/21/29cm-seongsu/) reinforced the editorial framing — the wordmark uses dotted "2" and "9" digits to express the brand's *"착하지만 엉뚱한"* (kind-but-offbeat) personality, and the visual identity centres on a ruler-mark motif that frames the wordmark "like a container for the brand".
+The current first-party surfaces describe the product posture but do not establish a name origin, founding mythology, mission, ownership narrative, or unpublished brand-book structure. Those topics remain omitted until a current official source is available. This preserves the useful observable story—editorial discovery leading into purchase—without converting third-party history or plausible interpretation into brand fact.
 
-The internal brand book is titled **`Guide to better 29CM, 더 나은 29CM를 위한 가이드북`** — roughly 180 pages, with four parts: "우리다운 방식" (our way), "우리의 초상" (our portrait — brand persona as a person, complete with imagined clothes and weekend habits), "우리만의 목소리" (our voice — tone-and-manner guide for copy), and "그들의 취향" (their taste — nine taste-based customer personas, explicitly rejecting demographic segmentation) ([29CM Brand Book — Brunch](https://brunch.co.kr/@likenoothers/11)).
-
-What 29CM refuses: discount-led merchandising (no permanent sale banners), demographic segmentation (age/gender bins are replaced by taste-based personas), urgency theatre (no countdowns, no "마감 임박"), and decorative chrome (no gradients, no shadows, no brand colour beyond black-on-white). What it embraces: long-form editorial inside the storefront, photography as the primary voice, Korean as the primary language with English borrowed from magazine convention, and the conviction that the customer is a reader first and a buyer second.
+Across those surfaces, curation is expressed structurally rather than through a large set of brand effects. Magazine and Showcase create context around objects; BEST compresses comparison into a ranked grid; product detail translates that interest into price, option, delivery, and purchase information. The same black-and-white restraint lets imagery and selection do the expressive work. This is the supported narrative boundary: 29CM behaves like an editor inside a store, while claims about internal brand doctrine remain absent until first-party publication.
 
 ## 12. Principles
 
-1. **The image is the headline.** Every editorial tile leads with a photograph at 22px-headline scale of visual weight. The Korean caption sits underneath, never overlaid. If the image cannot carry the tile, the tile is not ready.
-   *UI implication:* Reserve the top 60-70% of every editorial unit for photography. Captions are subordinates, not co-headlines.
-
-2. **Price is the punctuation, not the verb.** Product prices render at 12px/700 — the same size as the product name. Promoting price violates the editorial hierarchy and reframes the page as discount commerce.
-   *UI implication:* Price never exceeds product-name size on a card. Discount red is a single accent, used sparingly on percent badges only.
-
-3. **Whitespace is more expensive than ink.** 29CM's curation is proven by what is removed, not what is added. Page margins of 48px, section gaps of 32px, and an absence of dividers are the brand's structural commitment.
-   *UI implication:* Default to more padding, fewer borders. If a layout reads "spacious", you are likely close to correct.
-
-4. **One face, three weights, no italic.** Pretendard Variable is the entire typographic system. Emphasis is by weight (400 → 700 → 800). Adding a serif companion or a display face dilutes the editorial register.
-   *UI implication:* Reject design contributions that introduce a second family. Bold is the only emphasis primitive.
-
-5. **Korean is the primary voice; English is the section label.** Body copy, captions, error states, and onboarding are Korean. English appears at display sizes for navigation categories — borrowed from print-magazine convention, not adopted as parallel UI language.
-   *UI implication:* Avoid English microcopy in body strings. Reserve English for top-level category names where it functions as decoration.
-
-6. **Restraint is the brand.** The only "colour" is the discount-red badge. The only "elevation" is colour inversion. The only iconography is a trailing chevron. Every additional visual element competes with the photography.
-   *UI implication:* Before adding a shadow, a border, an icon, or a colour — name a specific editorial reason. If there isn't one, remove.
+Official published design or brand principles were not located in this verification pass. The following are clearly labeled implementation inferences from the captured UI, not 29CM-authored principles:
 
-7. **The customer is a reader.** PT, Showcase, and 29Magazine treat brand stories as long-form editorial. The site rewards browsing time, not click-through speed. Conversion follows attention; attention follows curation.
-   *UI implication:* Allow long pages. Don't compress brand stories into "view more" gated cards. The full editorial is the funnel.
+1. **Separate editorial and commerce density.** Large navigation and story titles coexist with compact product metadata.
+2. **Use color sparingly.** Black and white structure the surface; `#ff4800` identifies current sale information.
+3. **Let component geometry follow function.** Story items are square-edged, product items use small corners, and gallery controls are fully round.
+4. **Require observed usage before promoting a resource.** Pretendard Variable is canonical because it loaded and appeared on elements; declared-only fonts are not.
 
 ## 13. Personas
 
-*Personas below are fictional archetypes informed by 29CM's stated taste-based segmentation (9 personas defined in the internal brand book) and publicly described 29CM user profiles. Not individual people.*
-
-**지윤 (Jiyoon), 29, Seoul.** Marketing manager at a small lifestyle startup. Opens 29CM on her phone during the commute and on desktop at lunch. Reads PT pieces front-to-back before adding anything to cart — the editorial is the reason she's there. Owns one item from at least 12 different niche Korean brands, none of which she would have discovered on Musinsa. Resists discount notifications; deletes the app immediately if it starts pushing "오늘만" banners.
-
-**민호 (Minho), 34, Seongsu.** Industrial designer. Treats 29CM as a curated showroom rather than a shop. Goes to the Seongsu offline store on weekends to handle objects in person, then buys online a week later. Will spend ₩280,000 on a single ceramic vase without flinching but considers a ₩9,900 cable organizer beneath consideration. The brand-story PT format is the deciding factor on every purchase above ₩100,000.
-
-**서연 (Seoyeon), 26, Busan.** Recent grad, working her first office job. Uses 29CM as her "taste education" — she follows specific brand collections that 29CM has curated and slowly builds a wardrobe around them. Knows the difference between 29Magazine and Showcase. Reads Lookbook on Sunday evenings like other people read magazines. Has never used a 29CM coupon code.
-
-**현우 (Hyeonwoo), 41, Gangnam.** Senior consultant. Buys gifts on 29CM — for partners, clients, parents. The site's editorial framing solves a problem ordinary commerce can't: it produces gift recommendations that feel "considered" rather than "expensive". Trusts the 29CM curation enough to buy without comparison shopping. Reads PT for vocabulary he can use in the card.
+No current first-party persona definitions were verified. Observable task contexts include browsing a curated story, scanning ranked products, comparing product details, and moving from editorial discovery into purchase. Do not treat fictional demographic profiles as brand facts. If persona work is needed, create a separately labeled research artifact with recruitment data, tasks, and behavioral evidence; keep it outside this canonical reference until 29CM publishes or confirms it.
 
 ## 14. States
 
-| State | Treatment |
+| State | Verified treatment |
 |---|---|
-| **Empty (wishlist / cart)** | Single Korean line of `#000000` 15px weight 400 body text explaining the absence (`아직 찜한 상품이 없어요`, `장바구니가 비어있어요`), plus one ghost outline CTA below (`상품 둘러보기`). Never an illustration, never a mascot. |
-| **Empty (search / filter)** | One line of 14px `rgba(93,93,93,0.64)` caption (`검색 결과가 없어요`). No button — user adjusts filters themselves. |
-| **Loading (first paint)** | Flat grey blocks at `#f5f5f5` (functional, not styled) at the final layout's geometry. No shimmer animation on editorial tiles — would compete with photography. |
-| **Loading (more products)** | Bottom-of-list 3-dot loader in `#000000`. No overlay, no skeleton — the existing list stays visible. |
-| **Error (inline field)** | 1px `#ff003c` border on the input, error text below in `#ff003c` 13px weight 400. One sentence (`이메일 형식이 올바르지 않아요`). Friendly-formal `~요` ending. |
-| **Error (toast)** | `#000000` background, `#ffffff` 14px weight 400 text, 2px radius matching the inverted CTA, bottom-center placement, 3s auto-dismiss. No icon. |
-| **Error (screen-blocking)** | Reserved for server outage. White screen, centered single-line message in `#000000` 16px weight 700, ghost CTA below (`다시 시도하기`). No illustration. |
-| **Success (inline)** | Brief 200ms flash of the `#000000`/`#ffffff` inversion on the affected control — toggle flip, like-button activation. No green checkmark on routine UI. |
-| **Success (purchase confirmation)** | Dedicated confirmation screen. Black-on-white order number in 22px/700, item summary below in 15px/400, single ghost CTA (`주문 내역 보기`). Money figures rendered in 22px/700 with comma separators. |
-| **Skeleton** | `#f5f5f5` blocks at final dimensions, 0px radius (matching the editorial-tile and product-card geometry). 1.0s fade pulse, never shimmer. Never used on prices — those render as `--` until resolved. |
-| **Disabled** | Button opacity drops to 0.4. Border colour does not change — disabled ghost buttons retain `#c4c4c4` border so geometry stays stable when re-enabled. |
-| **Sale badge active** | `#ff0066` text on white tile corner — the single chromatic state on the marketing surface. Used for percent-off only, never for "NEW" or "BEST" (those are weight-only treatments in nav). |
+| Default | Captured for buttons, list items, and the product quantity input |
+| Hover | Captured on eligible button controls |
+| Focus | Captured on eligible button controls |
+| Pressed | Captured on eligible button controls |
+| Disabled | Captured on product-gallery controls |
+| Sale | `#ff4800` text, transparent background, 0px radius |
+| Empty | `[FILL IN: dedicated public empty-state capture required]` |
+| Loading | `[FILL IN: dedicated loading-state capture required]` |
+| Error | `[FILL IN: dedicated public error-state capture required]` |
+| Success | `[FILL IN: dedicated public success-state capture required]` |
+
+Pseudo-state evidence records visual variants available without executing state-changing commerce interactions. It does not prove every control implements every state.
 
 ## 15. Motion & Easing
 
-**Durations** (named, not raw milliseconds):
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Toggle flips, like-button state changes |
-| `motion-quick` | 150ms | Hover state on ghost buttons, focus ring fades |
-| `motion-standard` | 250ms | Default — image hover scale, sheet opens, tile reveal |
-| `motion-editorial` | 400ms | Editorial transitions — hero image cross-fade, PT chapter advance |
-| `motion-page` | 350ms | Full-screen route transitions |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-out` | `cubic-bezier(0.2, 0.0, 0.0, 1.0)` | Appearing — sheets enter, tiles reveal, hovers settle |
-| `ease-in` | `cubic-bezier(0.4, 0.0, 1.0, 1.0)` | Leaving — dismissals, pops |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1.0)` | Two-way transitions — accordion expand, tab content |
-| `linear` | `linear` | Image scrubbing in editorial galleries — preserves perceptual neutrality |
-
-**Signature motions.**
-
-1. **Image hover scale.** Hovering an editorial tile scales the image to 1.04 over `motion-standard` with `ease-out`; the surrounding tile chrome does not move. The motion is photographic, not interface — the photograph leans toward the cursor.
-2. **Tile reveal on scroll.** Editorial tiles fade in from opacity 0 with a 12px upward translate over `motion-editorial` with `ease-out`. The stagger between tiles is 80-120ms, mimicking page-turn rhythm rather than dashboard pop-in.
-3. **CTA hover (ghost outline).** The `#c4c4c4` border darkens to `#000000` over `motion-quick`, no fill change. The change is felt, not announced — typical of editorial restraint.
-4. **CTA hover (inverted black).** Background lightens 4% over `motion-quick`. No transform, no shadow added. The brand never animates depth.
-5. **Reduce motion.** If `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Image hover scale disables. Cross-fades replace translates. The site stays usable; just less kinetic.
-
-<!--
-OmD v0.1 Sources — Philosophy Layer (sections 10-15)
-
-Direct verification via WebFetch / live inspect (2026-05-13):
-- https://www.29cm.co.kr/ — confirmed homepage tagline "감도 깊은 취향 셀렉트샵 29CM",
-  editorial tile structure, Pretendard Variable typography, monochrome palette,
-  inverted-black FAQ/1:1 CTA pattern (live getComputedStyle 2026-05-13).
-- https://brunch.co.kr/@likenoothers/11 — confirmed brand book title
-  "Guide to better 29CM, 더 나은 29CM를 위한 가이드북", 4-part structure (우리다운
-  방식 / 우리의 초상 / 우리만의 목소리 / 그들의 취향), 9 taste-based personas,
-  "착하지만 엉뚱한" persona description.
-- https://designcompass.org/2023/08/21/29cm-seongsu/ — confirmed wordmark dot
-  motif, ruler-mark visual identity, "변하지 않는 본질" framing, "Guide to
-  Better Choice" mission language.
-- https://blog.asiance.com/2021/03/24/vertical-platform-for-mz-generation/ —
-  confirmed "C = Commerce, M = Media" name etymology and editorial commerce
-  positioning, Musinsa acquisition timeline.
-
-Tier 2 (getdesign.md/refero) returned no 29CM-specific entries — §4 token
-values are sourced exclusively from Tier 1 live inspect.
-
-Not independently verified — widely documented public facts used:
-- 29CM founding year (2011), Musinsa acquisition (2021).
-- "29CM = 29 centimeters = closest distance to open hearts" — brand's own
-  framing as referenced in Asiance and NamuWiki; treated as brand-stated
-  mythology rather than externally documented etymology.
-
-Personas (§13) are fictional archetypes informed by 29CM's stated taste-based
-9-persona segmentation. Any resemblance to specific individuals is unintended.
-
-Interpretive claims (e.g., "the image is the headline", "whitespace is more
-expensive than ink") are editorial readings of the live design surface, not
-documented 29CM statements.
--->
+`[FILL IN: no canonical motion duration or easing curve was published or extracted in this verification pass.]`
+
+The evidence set records static default and pseudo-state snapshots only. Do not infer 150ms/250ms durations, cubic-bezier curves, image scaling, scroll reveals, stagger timing, toast dismissal, or reduced-motion substitutions from the visual captures. A future motion pass should record computed transition properties, animation names, durations, easing, and reduced-motion behavior per component.