oh-my-design-cli 1.8.7 → 1.9.0

package/web/references/cjonstyle/DESIGN.md

@@ -0,0 +1,453 @@
+---
+id: cjonstyle
+name: CJ ONSTYLE
+display_name_kr: CJ온스타일
+country: KR
+category: ecommerce
+homepage: "https://www.cjonstyle.com"
+primary_color: "#640faf"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=cjonstyle.com&sz=128"
+verified: "2026-07-02"
+added: "2026-07-02"
+omd: "0.1"
+tokens:
+  source: live-extract
+  extracted: "2026-07-02"
+  note: "primary = live buy-CTA purple (#640faf, rgb 100,15,175) — CJ ONSTYLE signature violet, 52 bg + 143 fg occurrences; sale/price accent magenta (#ec0040); near-flat (box-shadow none). Body font legacy Nanum Barun Gothic; newer promo/PDP modules use Pretendard."
+  colors:
+    primary: "#640faf"
+    sale: "#ec0040"
+    accent-red: "#d53225"
+    accent-orange: "#f26d00"
+    ink: "#000000"
+    ink-nav: "#111111"
+    body: "#2a2a2a"
+    muted: "#666666"
+    muted-alt: "#767676"
+    faint: "#929292"
+    header-dark: "#26292a"
+    canvas: "#ffffff"
+    surface: "#f5f5f5"
+    surface-alt: "#f0f0f0"
+    hairline: "#e5e5e5"
+    border-strong: "#b2b2b2"
+    on-primary: "#ffffff"
+  typography:
+    family: { base: "Nanum Barun Gothic", alt: "Pretendard" }
+    wordmark:      { size: 24, weight: 700, use: "CJ ONSTYLE logotype / page H1, Nanum Barun Gothic" }
+    promo-headline: { size: 26, weight: 700, use: "Banner promo headline, Pretendard, white on imagery" }
+    cta:           { size: 20, weight: 400, use: "PDP 바로구매 buy CTA label" }
+    search:        { size: 18, weight: 400, use: "Header search input, Pretendard" }
+    nav:           { size: 15, weight: 400, lineHeight: 1.4, use: "Global nav menu items, Nanum Barun Gothic" }
+    submenu:       { size: 14, weight: 400, use: "Sub-menu / PDP secondary links" }
+    badge:         { size: 12, weight: 700, use: "Sale / benefit overlay pills, Pretendard" }
+    body:          { size: 12, weight: 400, lineHeight: 1.5, use: "Default body / product meta, Nanum Barun Gothic" }
+    util:          { size: 12, weight: 400, use: "Utility links (로그인/마이존), muted grey" }
+  spacing: { xs: 2, sm: 4, base: 8, md: 12, lg: 20, xl: 26, xxl: 48 }
+  rounded: { xs: 2, sm: 4, md: 11, lg: 18, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    buy-primary: { type: button, bg: "#640faf", fg: "#ffffff", border: "1px solid #640faf", radius: "4px", height: "60px", font: "20px / 400 Nanum Barun Gothic", use: "PDP 바로구매 primary buy CTA — the single saturated action color" }
+    inquiry-button: { type: button, bg: "#640faf", fg: "#ffffff", radius: "4px", height: "40px", font: "14px / 400", use: "PDP 상품문의 secondary purple action" }
+    wishlist-button: { type: button, bg: "#ffffff", fg: "#111111", border: "1px solid #b2b2b2", radius: "4px", height: "60px", font: "20px / 400", use: "PDP 찜 wishlist toggle, outlined neutral" }
+    sale-badge: { type: badge, fg: "#ffffff", radius: "2px", padding: "0px 8px", font: "12px / 700 Pretendard", use: "Discount/benefit overlay pill on product imagery, rgba(0,0,0,0.2) scrim bg" }
+    search-input: { type: input, bg: "#ffffff", fg: "#111111", border: "1px solid #111111", radius: "0px", height: "46px", font: "18px / 400 Pretendard", use: "Header search field, underline style" }
+    gnb-tab: { type: tab, fg: "#111111", font: "15px / 400 Nanum Barun Gothic", active: "text #640faf", use: "Global nav items (홈/혜택/TV쇼핑)" }
+    detail-tab: { type: tab, fg: "#767676", active: "text #111111 + 1px bottom border #e5e5e5", use: "PDP section tabs (상세설명/리뷰/Q&A)" }
+    product-card: { type: card, bg: "#ffffff", border: "1px solid #e5e5e5", radius: "2px", use: "Product grid card on home / listing, near-flat" }
+  components_harvested: true
+---
+
+# Design System Inspiration of CJ ONSTYLE
+
+## 1. Visual Theme & Atmosphere
+
+CJ ONSTYLE (CJ온스타일) is Korea's flagship TV-home-shopping-and-commerce brand, and its storefront reads exactly as that heritage suggests: a dense, information-rich, conversion-first retail grid rather than an airy editorial site. The canvas is pure white (`#ffffff`) segmented by cool-grey bands (`#f5f5f5`, `#f0f0f0`), and the type sits in unadorned black (`#000000`) and near-black navy-grey (`#111111`, `#2a2a2a`) for maximum scan-ability across hundreds of product tiles. The single saturated brand color is an unmistakable deep violet (`#640faf`, rgb 100,15,175) — the CJ ONSTYLE signature purple — which the system reserves almost exclusively for the primary buy action (the PDP `바로구매` button) and active-state accents, so a shopper's eye is trained to read that one hue as "commit to purchase."
+
+The typographic personality is functional and legacy-Korean rather than boutique: body and navigation run in **Nanum Barun Gothic** (나눔바른고딕) — the workhorse hangul UI face — at a dense 12–15px, weight 400, while the wordmark and section heads step up to weight 700. Newer promotional and product-detail modules layer in **Pretendard**, which carries the loud sale copy: banner headlines at 26px/700 and discount badges at 12px/700. This split — quiet Nanum Barun Gothic for the shell, punchy Pretendard for the pitch — is the core tension of the system: calm where it lists, loud where it sells.
+
+What distinguishes CJ ONSTYLE from design-forward fintech peers is its near-total absence of elevation. Live inspection returned `box-shadow: none` across the nav, GNB, buy CTA, and product cards; separation comes from flat tinted surfaces and thin `#e5e5e5` hairlines, not shadow. Geometry is overwhelmingly sharp — 0px corners on nav, inputs, and the main buttons — softened only by a dominant 2px micro-radius on the omnipresent sale/benefit overlay pills and a 4px radius on the purchase buttons. The pricing layer adds the second signal color, a hot magenta (`#ec0040`), with promotional module reds (`#d53225`) and oranges (`#f26d00`) reinforcing urgency. The result is a fast, flat, high-density commerce surface engineered for throughput.
+
+**Key Characteristics:**
+- Signature deep violet (`#640faf`) reserved for the primary buy CTA and active accents — the single "action" color
+- Magenta (`#ec0040`) as the price/sale accent, with promo reds (`#d53225`) and oranges (`#f26d00`) for urgency
+- Nanum Barun Gothic for the dense shell (nav/body 12–15px), Pretendard for loud promo/PDP copy
+- Black (`#000000`) and near-black (`#111111`, `#2a2a2a`) text on white for maximum tile scan-ability
+- Near-flat depth: `box-shadow: none`; separation via `#f5f5f5`/`#f0f0f0` tints and `#e5e5e5` hairlines
+- Sharp geometry — 0px nav/inputs, 2px sale badges, 4px buy buttons; pills (11px/18px) only on carousel controls
+- Dark utility chrome bar (`#26292a`) and grey utility links (`#767676`, `#929292`, `#666666`)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **CJ ONSTYLE Violet** (`#640faf`): The signature deep purple (rgb 100,15,175). Primary buy-CTA background (`바로구매`, `상품문의`), active-state text, and brand accents. The system's single saturated action color — 52 background and 143 text occurrences in the live scan.
+- **On Primary** (`#ffffff`): White text on the violet buy buttons and dark chrome.
+
+### Sale & Promo Accents
+- **Sale Magenta** (`#ec0040`): The hot pink-red used for discount rates and price emphasis (118 text occurrences). The dominant "deal" signal color.
+- **Promo Red** (`#d53225`): Secondary promotional red for campaign badges and urgency modules.
+- **Promo Orange** (`#f26d00`): Tertiary promotional orange for time-limited / benefit highlights.
+
+### Text Hierarchy
+- **Ink Black** (`#000000`): Default body text and product titles — the dominant foreground (2424 occurrences).
+- **Nav Ink** (`#111111`): Global-nav and menu text, input text — a near-black one notch softer than pure black.
+- **Body Grey** (`#2a2a2a`): Dark secondary body copy and descriptions.
+- **Muted Grey** (`#666666`): Tertiary text, product meta, captions.
+- **Utility Grey** (`#767676`): Utility links (로그인/마이존/장바구니), inactive tab labels.
+- **Faint Grey** (`#929292`): Lowest-emphasis labels, fine print, placeholders.
+
+### Neutral & Surface
+- **Pure White** (`#ffffff`): Page background, card surfaces, text on violet/dark.
+- **Surface Grey** (`#f5f5f5`): Cool-grey tinted surface for content bands and section separation.
+- **Surface Alt** (`#f0f0f0`): A secondary grey surface for alternating blocks.
+- **Hairline** (`#e5e5e5`): Thin borders, tab underlines, and dividers — the primary separation device in the shadow-free system.
+- **Border Strong** (`#b2b2b2`): Heavier outline for neutral/outlined buttons (e.g. the 찜 wishlist toggle).
+- **Chrome Dark** (`#26292a`): Near-black background for the top utility/skip-link chrome bar.
+
+## 3. Typography Rules
+
+### Font Family
+- **Base**: `Nanum Barun Gothic` (나눔바른고딕, with `Malgun Gothic` / Arial fallbacks) — the document default, used for nav, body, product meta, and the wordmark.
+- **Alt**: `Pretendard` (with `Malgun Gothic` fallback) — used in newer promotional banners, sale/benefit badges, and the header search input.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Wordmark / H1 | Nanum Barun Gothic | 24px | 700 | — | CJ ONSTYLE logotype / page heading |
+| Promo Headline | Pretendard | 26px | 700 | — | Banner promo copy, white on imagery |
+| Buy CTA | Nanum Barun Gothic | 20px | 400 | — | PDP 바로구매 button label |
+| Search | Pretendard | 18px | 400 | — | Header search input |
+| Nav | Nanum Barun Gothic | 15px | 400 | 1.4 | Global nav menu items |
+| Sub-menu | Nanum Barun Gothic | 14px | 400 | — | Sub-menu / PDP secondary links |
+| Badge | Pretendard | 12px | 700 | — | Sale / benefit overlay pills |
+| Body | Nanum Barun Gothic | 12px | 400 | 1.5 (18px) | Default body / product meta |
+| Utility | Nanum Barun Gothic | 12px | 400 | — | Utility links (로그인/마이존) |
+
+### Principles
+- **Two fonts, two jobs**: Nanum Barun Gothic runs the quiet, dense retail shell; Pretendard carries the loud persuasive promo layer. They do not swap roles.
+- **Weight as the only headline signal**: The system leans on weight 700 (vs 400 body) far more than size — there is little display-scale typography beyond the 24–26px heads.
+- **Dense sizing for throughput**: Body sits at a compact 12px with 18px line-height, optimized for packing many product tiles and price rows above the fold.
+- **Sale copy shouts, product copy whispers**: Discount rates and benefit badges use bold Pretendard and the magenta/violet palette; product titles stay plain black.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Buy Primary (바로구매)**
+- Background: `#640faf`
+- Text: `#ffffff`
+- Border: 1px solid `#640faf`
+- Radius: 4px
+- Height: 60px
+- Font: 20px / 400 / Nanum Barun Gothic
+- Use: Product-detail primary buy CTA — the system's single saturated action color
+
+**Inquiry (상품문의)**
+- Background: `#640faf`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 40px
+- Font: 14px / 400
+- Use: PDP secondary purple action (product inquiry)
+
+**Wishlist (찜)**
+- Background: `#ffffff`
+- Text: `#111111`
+- Border: 1px solid `#b2b2b2`
+- Radius: 4px
+- Height: 60px
+- Font: 20px / 400
+- Use: PDP wishlist toggle — outlined neutral counterpart to the buy CTA
+
+### Inputs
+
+**Header Search**
+- Background: `#ffffff`
+- Text: `#111111`
+- Border: 1px solid `#111111`
+- Radius: 0px
+- Height: 46px
+- Font: 18px / 400 / Pretendard
+- Use: Header search field, underline style (bottom rule)
+
+### Cards & Containers
+
+**Product Card**
+- Background: `#ffffff`
+- Border: 1px solid `#e5e5e5`
+- Radius: 2px
+- Use: Product grid tile on home / listing — near-flat, no shadow
+
+### Badges
+
+**Sale / Benefit Pill**
+- Text: `#ffffff`
+- Radius: 2px
+- Padding: 0px 8px
+- Font: 12px / 700 / Pretendard
+- Use: Discount/benefit overlay on product imagery, sitting on a `rgba(0,0,0,0.2)` scrim with a `rgba(255,255,255,0.3)` hairline
+
+### Tabs
+
+**Global Nav (GNB)**
+- Text: `#111111`
+- Font: 15px / 400 / Nanum Barun Gothic
+- Active: violet `#640faf` text on active item
+- Use: Top navigation (홈, 혜택, TV쇼핑, 카테고리)
+
+**PDP Section Tab**
+- Text: `#767676`
+- Active: `#111111` text + 1px bottom border `#e5e5e5`
+- Use: Product-detail section tabs (상세설명, 리뷰, Q&A)
+
+### Chrome & Carousel
+
+**Utility / Skip-link Bar**
+- Background: `#26292a`
+- Text: `#ffffff`
+- Padding: 0px 20px 0px 26px
+- Height: 34px
+- Use: Top accessibility skip-link / utility chrome bar
+
+**Carousel Control**
+- Background: `#ffffff`
+- Border: 1px solid `#b2b2b2`
+- Radius: 18px (prev/next), 50% (pause)
+- Height: 36px
+- Use: Hero banner carousel prev/next/pause controls
+
+---
+
+**Verified:** 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces)
+**Tier 1 sources:** https://www.cjonstyle.com, https://display.cjonstyle.com/p/item/2086524438, https://medium.com/cj-onstyle
+**Tier 2 sources:** getdesign.md/cjonstyle (app-shell only, no CJ ONSTYLE entry); styles.refero.design/?q=cjonstyle (not listed — generic browse grid)
+**Conflicts unresolved:** none (Tier 2 supplied no CJ ONSTYLE data to conflict)
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: ~8px, dense at the small end (2px, 4px, 8px)
+- Scale: 2px, 4px, 8px, 12px, 20px, 26px, 48px
+- Notable: sale-badge padding lands at `0px 8px`; the utility bar uses asymmetric `0px 20px 0px 26px` — spacing is tuned per-module rather than from a strict global token set (legacy retail grid)
+
+### Grid & Container
+- Fixed-width centered content column with a persistent header: utility chrome bar (`#26292a`), logo + search + GNB, then a dense product grid
+- Home is a stack of full-width promotional banners over multi-column product tile grids
+- PDP is a two-column layout (media left, buy panel right) with a sticky/prominent violet buy CTA
+- Sections alternate white (`#ffffff`) and tinted grey (`#f5f5f5`, `#f0f0f0`) bands
+
+### Whitespace Philosophy
+- **Density over air**: as a high-catalog commerce surface, tiles are packed tightly; whitespace is minimal and purposeful, prioritizing products-per-viewport.
+- **Flat segmentation**: bands separate by background tint and `#e5e5e5` hairlines, never by shadow.
+- **Signal by color, not space**: emphasis is created with the violet CTA and magenta price, not with generous margins.
+
+### Border Radius Scale
+- Micro (2px): sale/benefit badges, product cards — the dominant rounding (×225 in scan)
+- Small (4px): buy / inquiry / wishlist buttons
+- Chip (11px): pill chips and small controls
+- Control (18px): carousel prev/next controls
+- Full (9999px / 50%): circular carousel pause / round controls
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, product tiles, nav, buttons |
+| Tint (Level 1) | `#f5f5f5` / `#f0f0f0` background shift | Card/section separation without elevation |
+| Hairline (Level 2) | `1px solid #e5e5e5` border | Card outlines, tab underlines, dividers |
+| Scrim (Level 3) | `rgba(0,0,0,0.2)` overlay on imagery | Sale badges + text legibility over product photos |
+
+**Shadow Philosophy**: CJ ONSTYLE is a near-shadowless commerce system. Live inspection found `box-shadow: none` across the header, GNB, buy CTA, and product cards. Depth and grouping are communicated through flat tinted surfaces (`#f5f5f5`, `#f0f0f0`) and thin `#e5e5e5` hairlines, with a translucent black scrim (`rgba(0,0,0,0.2)`) used only to keep white badge text legible over product imagery. This flatness is characteristic of high-density Korean retail: it keeps the grid fast, printable-flat, and free of the heavy card-stack look that would slow scanning across hundreds of tiles.
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve violet (`#640faf`) for the primary buy action and active states — keep it the single "commit" color
+- Use magenta (`#ec0040`) for discount rates and price emphasis
+- Set body and nav in Nanum Barun Gothic at a dense 12–15px, weight 400
+- Use Pretendard weight 700 for loud promo headlines and sale/benefit badges
+- Separate sections with flat tint (`#f5f5f5`/`#f0f0f0`) and `#e5e5e5` hairlines, not shadows
+- Keep geometry sharp — 0px on nav/inputs, 2px on badges, 4px on buy buttons
+- Use black (`#000000`) / near-black (`#111111`) for product titles for maximum tile scan-ability
+- Overlay sale badges on a `rgba(0,0,0,0.2)` scrim so white text stays legible on imagery
+
+### Don't
+- Spread violet across many elements — it dilutes the single buy-action signal
+- Use drop shadows for elevation — CJ ONSTYLE is a near-flat system
+- Set the shell in Pretendard — Nanum Barun Gothic owns the dense body/nav
+- Use large pill radii on buttons or cards — buttons are 4px, cards 2px; pills only appear on carousel controls
+- Add generous whitespace at the expense of product density — this is a throughput-first catalog
+- Introduce a second saturated action color — violet is the only "commit" hue
+- Use magenta (`#ec0040`) for navigation or non-price UI — it reads exclusively as "deal/price"
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single/two-up product grid, hamburger nav, sticky bottom buy bar on PDP |
+| Tablet | 768-1024px | Moderate multi-column tile grid, condensed GNB |
+| Desktop | 1024-1440px | Full fixed-width grid, full GNB, two-column PDP |
+
+### Touch Targets
+- Buy CTA at 60px height, full-width on PDP — an unmistakable primary target
+- Wishlist (찜) at 60px square-ish outlined button
+- Nav items spaced within the header for touch; utility links compact at 12px
+
+### Collapsing Strategy
+- Product grid: multi-column → two-up → single column on narrow viewports
+- GNB: horizontal menu → hamburger / drawer
+- PDP: two-column media+buy panel → stacked, with the violet buy CTA pinned to a sticky bottom bar
+- Promotional banners: maintain full-width, crop imagery, scale the 26px headline down
+
+### Image Behavior
+- Product imagery and banners carry no shadow at any size, consistent with the flat system
+- Sale badges overlay imagery on a translucent scrim to preserve legibility
+- Cards keep 2px radius across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary buy CTA: CJ ONSTYLE Violet (`#640faf`)
+- Sale / price accent: Magenta (`#ec0040`)
+- Promo red / orange: `#d53225` / `#f26d00`
+- Product title text: Ink Black (`#000000`)
+- Nav / input text: Nav Ink (`#111111`)
+- Secondary / muted text: `#2a2a2a`, `#666666`, `#767676`
+- Background: Pure White (`#ffffff`)
+- Tinted surface: `#f5f5f5` / `#f0f0f0`
+- Hairline / tab underline: `#e5e5e5`
+- Outlined-button border: `#b2b2b2`
+- Dark chrome bar: `#26292a`
+
+### Example Component Prompts
+- "Create a product-detail buy bar: a full-width `바로구매` button, background #640faf, white text, 1px solid #640faf border, 4px radius, 60px height, 20px Nanum Barun Gothic; beside it a square 찜 wishlist button, white background, #111111 text, 1px solid #b2b2b2 border, 4px radius."
+- "Build a product card: white #ffffff background, 1px solid #e5e5e5 border, 2px radius, no shadow. Title in black #000000 12px Nanum Barun Gothic; price in black; a sale badge overlaying the image — white text, 12px/700 Pretendard, 2px radius, 0px 8px padding, on a rgba(0,0,0,0.2) scrim."
+- "Create a global nav: white header with a dark #26292a utility bar above. Nav items 15px Nanum Barun Gothic #111111, violet #640faf on the active item. Header search input, Pretendard 18px, #111111 text, underline style."
+- "Design a promo banner headline: Pretendard 26px weight 700, white text over imagery, with a magenta #ec0040 discount rate emphasized."
+
+### Iteration Guide
+1. Violet (`#640faf`) is the single buy-action color — don't spread it
+2. Magenta (`#ec0040`) means price/deal only
+3. Nanum Barun Gothic for the dense shell; Pretendard for loud promo copy
+4. No shadows — separate with `#f5f5f5`/`#f0f0f0` tint and `#e5e5e5` hairlines
+5. Sharp geometry — 0px nav/inputs, 2px badges/cards, 4px buttons
+6. Text is black/near-black on white for tile scan-ability
+7. Sale badges sit on a `rgba(0,0,0,0.2)` scrim for legibility over imagery
+
+---
+
+## 10. Voice & Tone
+
+CJ ONSTYLE's voice is **brisk, benefit-forward, and deal-driven** — the register of a trusted home-shopping host translating a live pitch into a scannable screen. Copy leads with the offer ("~50%할인", "5%카드", "적립5%") and the concrete product benefit, in plain, high-energy Korean. It treats the shopper as a value-seeker who wants the discount, the terms, and the "buy" path with minimal friction. Where a fintech might reassure, CJ ONSTYLE motivates.
+
+| Context | Tone |
+|---|---|
+| Promo headlines | High-energy, offer-first. "빕스바우처 ~56%". Numbers and rates lead. |
+| Benefit badges | Terse, factual perks. "적립5%", "카드 5%", "네이버포인트". |
+| Buy CTAs | Direct imperatives. "바로구매", "장바구니", "상품문의". |
+| Product titles | Descriptive, spec-forward, plain black text. |
+| Utility / nav | Neutral and functional. "로그인", "마이존", "카테고리". |
+
+**Voice samples (verbatim from live surfaces):**
+- "바로구매" — PDP primary buy CTA (direct commit imperative). *(verified live 2026-07-02)*
+- "빕스바우처 ~56%" — promo banner headline (offer-first, rate leads). *(verified live 2026-07-02)*
+- "적립5% / 카드 5% / 네이버포인트" — benefit overlay badges (terse perks). *(verified live 2026-07-02)*
+
+**Forbidden register**: vague lifestyle poetry with no offer, undefined jargon, hesitant hedging on price, and low-contrast "quiet luxury" copy that hides the deal. The deal is the message.
+
+## 11. Brand Narrative
+
+CJ ONSTYLE (CJ온스타일) is the commerce arm of Korea's CJ Group, born from the country's pioneering TV home-shopping business (CJ오쇼핑 / CJ홈쇼핑) and relaunched under the **CJ ONSTYLE** brand in **2021** as a converged "live commerce + mobile shopping" platform. The rebrand unified CJ's TV broadcast, mobile app, and web storefront into a single style-and-living destination — the name itself fuses "ON" (always-on, on-air, online) with "STYLE," signaling the shift from a channel you watch to a shopping surface you live in.
+
+The product DNA is unmistakably retail-television: a host's job is to make the value legible in seconds and move the viewer to purchase before the segment ends. That urgency is baked into the digital surface — the offer leads, the benefit badges stack, and the violet buy button is never more than a glance away. CJ ONSTYLE positions itself as a curated style-and-home destination rather than a bargain-bin marketplace, which is why the chrome stays clean and black-on-white while the promotional layer carries the color and noise.
+
+What the design refuses: the heavy, decorative card-stacking of legacy portals (it stays flat and fast) and the cold minimalism of design-boutique commerce (it keeps the deal loud). What it embraces: density that respects a catalog of thousands of SKUs, a single trustworthy violet for the commit action, and a magenta price accent that reads instantly as "here is the deal."
+
+## 12. Principles
+
+1. **The offer leads.** Home shopping sells the value first. *UI implication:* surface discount rate, benefit badges, and price before secondary detail; let the magenta (`#ec0040`) price accent do the pulling.
+2. **One color means "buy."** Violet (`#640faf`) is the commit signal. *UI implication:* reserve the saturated violet for the primary buy CTA and active states — never dilute it across decorative chrome.
+3. **Density is a feature, not a flaw.** A catalog of thousands must be scannable. *UI implication:* pack tiles tightly, keep type dense (12px body), and prefer tint/hairline separation over space-hungry cards.
+4. **Flat and fast.** Elevation slows a high-traffic grid. *UI implication:* no shadows; separate with `#f5f5f5`/`#f0f0f0` tint and `#e5e5e5` hairlines; keep the page quick to paint and scan.
+5. **Quiet shell, loud pitch.** *UI implication:* Nanum Barun Gothic black-on-white for the navigation and product chrome; Pretendard bold plus the violet/magenta palette for the promotional layer.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly observable CJ ONSTYLE user segments (TV-home-shopping loyalists, mobile deal-seekers, style-and-home shoppers), not individual people.*
+
+**이영숙, 54, 대전.** A long-time TV home-shopping viewer who now buys through the app during and after broadcasts. Trusts the CJ ONSTYLE brand and the host's pitch; wants the offer, the card benefit, and the buy button obvious without hunting.
+
+**박지훈, 33, 서울.** A mobile-first deal-seeker who scans the home grid for the day's best discounts. Values density — he wants to compare many tiles and rates fast — and taps the violet 바로구매 the moment the price and points add up.
+
+**최은정, 41, 경기.** A style-and-home shopper browsing curated fashion and living categories. Appreciates the clean black-on-white product chrome that lets the merchandise photography carry the page, with the deal badges layered only where they add value.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no search results)** | White canvas. Single black (`#000000`) line explaining no matching products, with a path back to categories. No decorative illustration. |
+| **Empty (empty cart)** | Muted grey (`#666666`) line: nothing in the cart yet, plus a violet CTA back to shopping. Calm, functional. |
+| **Loading (grid fetch)** | Skeleton tiles on `#f5f5f5` at final card dimensions, 2px radius. Flat pulse — no shadow shimmer, consistent with the shadowless system. |
+| **Loading (buy action)** | Inline spinner within the violet buy button; button stays `#640faf` and disables to prevent double-submit. |
+| **Error (payment/checkout failed)** | Inline message in near-black (`#111111`) with a plain-language cause and a retry path. States what to do next, not just a generic failure. |
+| **Error (form validation)** | Field-level message below the input; describes what is valid (e.g. address, card), not just "필수". |
+| **Success (order placed)** | Confirmation screen with order summary; next-step detail (delivery, tracking) linked immediately. Restrained tone, no confetti. |
+| **Skeleton** | `#f5f5f5` blocks at final tile dimensions, 2px radius, flat pulse. |
+| **Sold out / unavailable** | Buy CTA switches to a disabled grey state; the violet is removed so "buy" is never implied when unavailable. |
+| **Disabled** | Faint grey (`#929292`) text on reduced-opacity surface; violet actions fade rather than switch hue, preserving the brand read. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-fast` | 120ms | Hover, tap feedback, focus |
+| `motion-standard` | 200ms | Tile/section reveal, dropdown, tab switch |
+| `motion-slow` | 400ms | Hero banner carousel auto-advance transition |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — dropdowns, sheets, tiles |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
+| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions, carousel slide |
+
+**Motion rules**: Motion is functional and quiet — consistent with the flat, high-throughput grid. The hero banner carousel auto-advances on a slow cadence with a horizontal slide; tap feedback on buttons and tiles is a subtle opacity/scale shift. Nothing bounces or springs — a commerce grid signals reliability and speed, not playfulness. Under `prefers-reduced-motion: reduce`, the carousel stops auto-advancing and all transitions collapse to instant; the storefront remains fully functional.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 live inspect (2026-07-02) via playwright getComputedStyle on
+https://www.cjonstyle.com (→ display.cjonstyle.com/p/homeTab/main) and
+https://display.cjonstyle.com/p/item/2086524438:
+- Buy CTA "바로구매" — bg rgb(100,15,175) #640faf / white text / 4px radius / 60px height / 20px
+- Sale/benefit badges "적립5%","카드 5%","~50%할인" — white 12px/700 Pretendard on rgba(0,0,0,0.2) scrim / 2px radius
+- Promo banner headline "빕스바우처 ~56%" — Pretendard 26px/700 white
+- GNB nav — Nanum Barun Gothic 15px #111111; body default #000000 12px/18px
+- box-shadow none across nav/GNB/buy CTA/cards (near-flat system)
+- document.title "홈 | CJ온스타일"
+
+Token-level claims (§1-9) are sourced from this live inspection (see .verification.md Proof block).
+
+Voice samples (§10) are verbatim from live surfaces (PDP buy CTA, promo banner headline, benefit badges).
+
+Brand narrative (§11): CJ ONSTYLE is the CJ Group commerce brand relaunched in 2021 from
+CJ오쇼핑/CJ홈쇼핑 (TV home shopping) as a converged live-commerce + mobile platform. These are
+widely documented public facts about the company; specific details beyond the homepage are
+general public knowledge, not directly quoted from a verified CJ ONSTYLE statement in this turn.
+
+Personas (§13) are fictional archetypes informed by publicly observable CJ ONSTYLE user
+segments (TV home-shopping loyalists, mobile deal-seekers, style-and-home shoppers). Names
+are illustrative; they do not refer to real people.
+
+Interpretive claims (e.g., "the offer leads", "one color means buy", "quiet shell, loud pitch")
+are editorial readings connecting CJ ONSTYLE's observed design to its home-shopping heritage,
+not directly sourced CJ ONSTYLE statements.
+-->