Design System Inspiration of 29CM

1. Visual Theme & Atmosphere

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 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.

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.

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

Primary tasks

• Read an editorial story that builds context around a product
• Scan ranked products by brand, discount, price, and shipping
• Look through a product's photos on its detail page
• Compare product details before deciding what to buy

2. Color Palette & Roles

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.
• Focus outline — #375fff: authored 1px keyboard-focus outline on the ghost outline action (offset 2px) and the BEST period chips (offset 1px), measured 2026-09-29. Nav links, product image links and the quantity input show the browser's default ring instead, so this is not a site-wide focus rule.

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.

3. Typography Rules

Font evidence

Specimen availability is separate from family truth and follows a loadable, licensed source.

• 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

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.

4. Component Stylings

Ghost Outline

• Type: button
• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Radius: 4px
• Padding: 16px 16px 16px 20px
• Height: 52px
• Font: 14px at weight 700
• Hover: no visible change (measured 2026-09-29)
• Pressed: background #f4f4f4, text #474747 (first seen on the product outline action in July; measured on the home 더보기 itself on 2026-09-17 and 2026-09-29)
• Focus: authored outline 1px #375fff, offset 2px (measured 2026-09-29)
• Use: editorial more action and brand-home action

Carousel Control

• Type: button
• Background: rgba(0,0,0,0.5)
• Text: #ffffff
• Border: none observed
• Radius: 9999px
• Padding: 14px
• Height: 52px
• Font: 16px at weight 400
• Hover: background darkens to rgba(0,0,0,0.9) (measured 2026-09-29 on the enabled next button)
• Pressed: background #27272a (measured 2026-09-29)
• Disabled: background rgba(93,93,93,0.4), icon rgba(255,255,255,0.5), cursor not-allowed
• Keyboard focus was not read: in the runs with a keyboard walk the gallery moved and the button was disabled when reached
• Use: product-image previous and next controls

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 Story Item

• Type: listItem
• Background: transparent
• Radius: 0px
• Content: large editorial media with story metadata
• Use: 29Magazine and Showcase lists

Quantity Input

• Type: input
• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Radius: 0px
• Height: 36px
• Font: 16px at weight 500
• Hover: no visible change (measured 2026-09-29)
• Focus: the browser's default ring (not brand); the border stays #dddddd. A mouse press focuses the field and shows the same ring. No authored focus or pressed style (measured 2026-09-29)
• Use: product-detail quantity field

Desktop Navigation Link

• Type: navigation link
• Text: #000000, 40px at weight 700, 48px link box, no fill
• Hover and pressed: the parent's ::before draws a 6px #000000 bar under the link; the text colour does not change. Read on 2026-09-29 in the scrolled header, where the same link renders 24px / 700 and the bar is 116px wide
• Focus: the browser's default ring (not brand), measured 2026-09-29; the bar is not drawn on focus
• Use: BEST, Showcase, 29Magazine and the other desktop navigation entries

Period Chip

• Type: button
• Background: rgba(93,93,93,0.08); label #474747, 13px at weight 400
• Radius: 10px; 32px tall with 0 10px padding on 2026-09-29 (30px tall with 6px 10px padding in the July capture)
• Selected: background #000000, text #ffffff — the chip of the period in the URL (실시간 for period=HOURLY)
• Hover: no visible change. Pressed: the label turns #5d5d5d. Focus: authored outline 1px #375fff, offset 1px (all measured 2026-09-29)
• Use: BEST ranking period chips (실시간, 일간, 주간, 월간)

Product Image Link

• Type: card
• Transparent, 251px square image link inside a BEST product item; the rank badge is its label
• Hover and pressed: no visible change. Focus: the browser's default ring, not brand (all measured 2026-09-29)

Buy CTA

• Type: button
• Background: #000000; Text: #ffffff; Radius: 4px; Padding: 12px 18px; Height: 44px; Font: 14px at weight 700
• States: default only. It is a purchase action and was never pressed
• Use: 바로 구매하기 on the product page, beside the 44px outline 장바구니 담기

Quantity Stepper

• Type: button
• Background: #ffffff; 1px #dddddd border with no inner edge; 36px square; radius 4px on the outer corners only
• Use: the minus and plus buttons either side of the quantity input

Option Thumbnail

• Type: button
• 74px square, transparent, 1px #dddddd border, 2px radius; the selected option's border is #000000
• Use: product option thumbnails

Editorial Tag

• Type: button
• Transparent, 1px #d4d4d4 border, 2px radius, 0 9px padding, 25px tall
• Use: tag chips on 29Magazine stories

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. Its only carousel state frames sit on surface-5::[data-omd-capture="17"], the previous button while disabled (rgba(93,93,93,0.4)), so they are not used as values; the hover, pressed and focus values above come from the 2026-09-29 live probe, which reads real :hover, :active and keyboard :focus-visible.

---

Verified: 2026-07-11 (five-surface live recapture and deterministic reconciliation) · states re-measured 2026-09-29 (live probe of the home, BEST and product pages) 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

Current live evidence supersedes the prior pink accent, #c4c4c4 outline, 22px/700 editorial title, and radius-ceiling assumptions.

5. Layout Principles

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.

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.

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

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 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 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

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 unestablished until a controlled multi-viewport capture is made.

9. Agent Prompt Guide

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 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. Hover darkens it to rgba(0,0,0,0.9), pressed is #27272a, and disabled is rgba(93,93,93,0.4) with a half-transparent white icon; no focus style was measured.”
• “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

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.

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 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 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.

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

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:

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

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

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

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.