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

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

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

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.

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

15. Motion & Easing

Durations:

Easings:

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.