CJ온스타일 DESIGN.md

Design System Inspiration of CJ ONSTYLE

Overview

Visual Theme & Atmosphere

CJ ONSTYLE (CJ온스타일) is the commerce division of CJ ENM, legally (주)씨제이이엔엠 커머스부문 and headquartered in Seoul. By its own history page it opened Korea's first TV home-shopping channel in 1995 and joined CJ Group in 2000. It opened the CJmall internet store in 2001, shipped the industry's first smartphone app in 2010, and in 2012 became the first in the industry to pass 1 trillion won in sales. It launched the industry's first mobile live commerce in 2017, became part of CJ ENM in the 2018 merger, and unified its channels under the single brand CJ온스타일 in 2021. A very large mobile live show followed in 2024, and a global own-brand mall in 2026. The company calls itself "트렌드 PICK 라이브 편집샵" and describes shopping that you "discover through content and complete with taste" (콘텐츠로 발견하고, 취향으로 완성하는 쇼핑). It reports 1조 5,180억 won in 2025 sales and 20,000 brands in the app.

The storefront on display.cjonstyle.com reads like its heritage: a dense, white, black-on-white retail grid built for scanning. One deep violet, #640faf, carries commitment. It fills 바로구매, outlines 장바구니 and 선물하기, fills the 카테고리 toggle when a pointer rests on it, and marks the current page and the active view on brand pages. Everything else is neutral: #000000 and #111111 text, #333333 for the selected tab, greys #767676 and #929292 for secondary copy, and a ladder of light greys for borders. The shell is square (0px corners on navigation, tabs and inputs), purchase buttons take 4px corners, and the newer home modules add pill chips at 18px. Two type systems coexist. The home tab's modules are set in Pretendard, served by CJ ONSTYLE itself. The product and brand pages ask for 나눔바른고딕 first, a family the browser never loads from the site, so the rendered face there is unresolved.

Key Characteristics:

• One violet #640faf for buy, cart and gift actions, the category-toggle hover, the current page and the active view
• Black-on-white density: #000000 and #111111 text, grey #767676 and #929292 secondary copy
• Square shell (0px) with 4px purchase buttons, 14px and 18px pill chips on the home tab, 2px on banners
• Pretendard on the home tab; the product and brand pages declare 나눔바른고딕 first
• Borders in steps of grey: #b2b2b2, #c5c5c5, #d1d1d1, #d9d9d9, #e6e6e6
• A dark #26292a skip-link bar hidden above the page

Primary tasks

• Buy a product once its price and benefits add up
• Scan the home grid for the best discounts of the day
• Shop from a TV home-shopping broadcast inside the app
• Browse curated fashion and living categories on the storefront
• Place an order and follow its delivery afterwards

Brand Narrative

CJ온스타일's history page calls its story "쇼핑의 방식을 바꿔온 30여년의 여정": a multichannel business spanning TV and mobile that moved to a one-platform, one-brand strategy. The milestones it lists are:

• 1995: Korea's first TV home-shopping channel
• 2000: acquired by CJ Group
• 2001: the CJmall internet store
• 2010: the industry's first smartphone shopping app, mobile CJmall
• 2012: the first in the industry to pass 1 trillion won in sales
• 2017: the industry's first mobile live commerce
• 2018: the CJ E&M merger and the birth of CJ ENM
• 2021: the unified brand CJ온스타일
• 2024: a very large mobile live show
• 2026: a global own-brand mall

By the numbers it publishes, CJ ONSTYLE had 1조 5,180억 won in sales in 2025, 66% growth in mobile live that year, 80 million annual mobile-live visitors, 20,000 brands in the app and 54 live IPs, which it calls the most in the industry. It describes itself as Korea's first video-commerce operator, a live pioneer from TV in 1995 to mobile in 2017.

Its mission page says CJ온스타일 expresses CJ Group's ONLYONE philosophy in the language of commerce. It aims to understand customers' lifestyles deeply, suggest tastes and needs they have not yet discovered, and connect products and content naturally. It calls "authentic recommendations and sensory products for the best lifestyle shopping experience" the direction of ONLYONE commerce. The business pages frame content commerce from TV to mobile, SNS and OTT, celebrity and influencer IP, trend-led curation and global expansion of K-lifestyle.

The storefront shows that lineage: dense, offer-led modules, broadcast times on product tiles, and one violet that means "buy".

Principles

1. The offer leads. UI implication: discount, benefit and broadcast time sit on the tile before secondary detail.
2. One colour means buy. UI implication: #640faf is kept for purchase actions and selection.
3. Density is a feature. UI implication: small type, square cells, thin grey lines.
4. Content drives commerce. UI implication: live and TV labels (라이브쇼, 방송일정) ride on product tiles.
5. Flat and fast. UI implication: no shadows; lines and fills separate.

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 broadcasts; wants the offer, the card benefit and the buy button obvious.

박지훈, 33, 서울. A mobile-first deal-seeker who scans the home modules for the day's discounts and taps 바로구매 once the price adds up.

최은정, 41, 경기. A style-and-home shopper browsing brand pages, who likes the clean black-on-white chrome that lets product photography carry the page.

Colors

Every token below was read on 2026-09-30 by the deterministic collector from three public, logged-out storefront pages: the home tab, a product page (item 2090936982) and a brand page (에르헴, 00034773). The corporate site corp.cjonstyle.com is a separate evidence domain and supplies narrative only.

Primary

• CJ ONSTYLE Violet (#640faf): The fill of 바로구매 (u_btn btn_buy_now, 162 × 60, white label), the product page's primary action. It is also the outline and label of 장바구니 and 선물하기 beside it, and the fill of the 카테고리 toggle in its hover and pressed frames. On the brand page it fills the current pagination dot and outlines the active view toggle. It is the primary because it is the colour of the purchase action and of every selected state the capture recorded.
• On Primary (#ffffff): Labels on the violet fill.

Text

• Ink (#000000): The logo heading, product meta and most running text.
• Ink Strong (#111111): Home module titles, navigation, inputs, chips and outlined buttons.
• Tab Ink (#333333): The selected product-page tab label and its underline.
• Muted (#767676): Unselected product-page tabs and small links.
• Faint (#929292): Fine 11px labels on the product page.

Neutral & Surface

• White (#ffffff): The page, outlined buttons and controls.
• Surface (#f0f0f0): The 760 × 80 entry banner on the product page.
• Chrome (#26292a): The skip-link bar.
• Border Strong (#b2b2b2): The 찜 wishlist toggle.
• Control Line (#c5c5c5): The brand page's filter reset and small "more" links.
• Line (#d1d1d1): Home carousel controls and "more" chips.
• Select Line (#d9d9d9): The product option selector and the inactive view toggle.
• Line Soft (#e6e6e6): Unselected home filter chips and brand-page arrow buttons.

Not tokens

• A red label (#d73535) inside a grey-outlined 방송알림-style button (#a6a6a6) and dark translucent overlays appear on the product page; they are single observations and are not promoted. No logo colour was measured.

Typography

Font Family

• Live surface use: Pretendard, loaded / high, 473 observed uses, mostly on the home tab: module titles, lists, chips, "more" links and the search field. It is self-hosted by CJ ONSTYLE at image.cjonstyle.net/public/confirm/contents/ec-static-contents/design/font/font/Pretendard-Regular.woff2, and the shared font.css declares weights 400, 600 and 700.
• Official distributed font assets: Pretendard is Kil Hyung-jin's open-source family. Its LICENSE (orioncactus/pretendard, opened 2026-09-30) reserves the name 'Pretendard' and states the SIL Open Font License 1.1. The identification rests on the declared family name.
• Official product use: no CJ ONSTYLE page opened this session names its typefaces.
• Declared only (no visible use): Nanum Barun Gothic. The same font.css declares it with NanumBarunGothic.eot and related files, but the face never reported as loaded on any captured page. FontAwesome is also declared.
• Unresolved: 나눔바른고딕 is the first family of the product and brand pages' stack and of the home navigation (723 uses). No loaded font carries that name and the declared web font never loaded, so the face the browser actually drew there cannot be named. 돋움 (82 uses) is in the same position. Their sizes, weights and line heights are kept below; the family is not.
• Corporate site: corp.cjonstyle.com preloads the group's CJ ONLYONE faces (CJ_ONLYONE_400 to 700 WOFF2). That is a different evidence domain, and it is not a storefront token.

Hierarchy

Principles

• Weight, not size, for emphasis: selected tabs and chips switch from 400 to 700 at the same size.
• Dense by default: meta text sits at 12px on an 18px line; titles rarely exceed 26px.
• Two generations: Pretendard modules on the home tab sit beside an older shell that asks for 나눔바른고딕.

Layout

Spacing System

• Observed paddings: 22px 50px 22px 72px on the entry banner, 0 33px 0 15px on the option select, 0 20px 0 26px on skip links, 0 8px 0 12px on "more" chips, 0 12px 0 5px on filter chips.
• Spacing is tuned per module rather than taken from one scale.

Grid & Container

• A fixed-width centred column under a persistent header: logo heading, search, then the global navigation with the 카테고리 toggle at its left.
• The home tab stacks modules, each with a 26px title, filter chips and a "more" link. The product page pairs media with a buy panel (option select, then 찜, 선물하기, 장바구니 and 바로구매 in one 60px row) and section tabs below.

Whitespace Philosophy

• Density over air: many products per viewport, separated by thin grey lines rather than space.

Border Radius Scale

• 0px: navigation, tabs, inputs, page arrows
• 2px: entry banner
• 4px: purchase buttons, filter reset
• 14px: "more" chips
• 18px: filter chips and carousel controls
• 50%: pagination dot and pause control

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport of the PC storefront was captured; its assets are the -pc builds. No breakpoint was measured.

Touch Targets

• Product-page tabs: 62px
• Buy row: 60px
• Category toggle: 54px
• Search field: 46px
• Option select: 45px
• Filter reset and page arrows: 40px
• Filter chips and carousel controls: 36px
• Skip links: 34px
• "More" chips: 28px

Collapsing Strategy

• Not captured; only the PC layout was measured.

Image Behavior

• Product images sit in square frames without shadows.

Elevation & Depth

No captured control draws a shadow; separation is by line and fill.

Motion & Easing

No transition or animation value was measured for any storefront control, and no official source consulted publishes a motion scale. The home hero carousel has previous, next and pause controls, but its timing was not measured. Treat motion as unspecified.

Components

Buttons

Buy button (primary)

• Background: #640faf
• Text: #ffffff
• Border: 1px solid #640faf
• Radius: 4px
• Height: 60px
• Font: 20px 400
• Use: 바로구매 on the product page, 162 × 60; a 205 × 42 copy closes the lower buy panel

Cart button

• Background: #ffffff
• Text: #640faf
• Border: 1px solid #640faf
• Radius: 4px
• Height: 60px
• Use: 장바구니, the outlined partner of 바로구매; 선물하기 (64 × 60) shares the outline

Wishlist button

• Background: #ffffff
• Text: #111111
• Border: 1px solid #b2b2b2
• Radius: 4px
• Size: 64 × 60
• Use: 찜 toggle at the start of the buy row

Category toggle

• Text: #111111
• Height: 54px
• Hover: fill #640faf with #ffffff text (bundle hover and pressed frames agree)
• Use: 카테고리, 181 × 54, at the left of the global navigation

More chip

• Text: #111111
• Border: 1px solid #d1d1d1
• Radius: 14px
• Padding: 0px 8px 0px 12px
• Height: 28px
• Use: Beside home module titles

Carousel control

• Background: #ffffff
• Border: 1px solid #d1d1d1
• Radius: 18px on the outer side (previous and next), 50% (pause)
• Height: 36px
• Use: Home hero carousel

Entry banner

• Background: #f0f0f0
• Text: #000000
• Radius: 2px
• Padding: 22px 50px 22px 72px
• Size: 760 × 80
• Use: Product-page entry banner

Filter reset

• Background: #ffffff
• Text: #111111
• Border: 1px solid #c5c5c5
• Radius: 4px
• Height: 40px
• Use: Brand-page filter panel, 180 × 40

Page dot

• Background: #640faf
• Text: #ffffff
• Radius: 50%
• Size: 30 × 30
• Use: Current page of the brand page's pagination

Skip link

• Background: #26292a
• Text: #ffffff
• Padding: 0px 20px 0px 26px
• Height: 34px
• Use: Skip links above the header, shown on focus

Tabs & Toggles

Product-page tab

• Background: #ffffff
• Text: #767676
• Border: 1px #767676 underline
• Height: 62px
• Selected: #333333 text at 700 with a 1px #333333 underline
• Use: Product-page section tabs, 253 × 62

Home filter chip

• Background: #ffffff
• Text: #111111
• Border: 1px solid #e6e6e6
• Radius: 18px
• Height: 36px
• Selected: #111111 fill, #ffffff text, weight 700
• Use: Under home module titles

View toggle

• Border: 1px solid #d9d9d9
• Size: 30 × 30
• Checked: 1px solid #640faf
• Use: Gallery and list switch on the brand page

Inputs

Option select

• Text: #111111
• Border: 1px solid #d9d9d9
• Padding: 0px 33px 0px 15px
• Height: 45px
• Use: Product option selector, 470 × 45

Search field

• Text: #111111
• Padding: 0px 50px 0px 0px
• Height: 46px
• Font: 18px 400 Pretendard (home)
• Use: Header search, 314 × 46; the input itself draws no border

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out display.cjonstyle.com pages and first-party context from corp.cjonstyle.com) Tier 1 sources: https://display.cjonstyle.com/p/homeTab/main?hmtabMenuId=H00005 ; https://display.cjonstyle.com/p/item/2090936982 ; https://display.cjonstyle.com/p/brand/00034773 ; https://corp.cjonstyle.com/ko/about/history Tier 2 sources: getdesign.md/cjonstyle (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=cjonstyle (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

Error, empty, loading, sold-out and success states were not captured and are not described.

Do's and Don'ts

Do

• Use #640faf for the purchase action, its outlined partners and selected states
• Keep text black or near-black (#000000, #111111) on white
• Mark selection by weight (400 to 700) and, on tabs, a 1px underline
• Use 4px corners on purchase buttons and square corners in the shell
• Separate with 1px grey lines

Don't

• Spread violet into decoration or running text
• Add shadows to cards or buttons
• Round the shell; pills belong to chips and carousel controls
• Name 나눔바른고딕 as the rendered face; it never loaded from the site

Voice & Tone

CJ ONSTYLE sells like a home-shopping host: offer first, then benefit, then the buy path. Its corporate voice adds curation and taste ("트렌드 PICK 라이브 편집샵"). On the storefront, copy is short and concrete: discount rates, benefits and broadcast times.

Voice samples (verbatim from pages opened on 2026-09-30):

• "에르헴 26FW 신상 / 미리주문 쿠폰 10% / ~10%할인" (home tab banner link)
• "지금 1,149명이 이 상품을 보고 있어요" (home tab product link)
• "트렌드 PICK 라이브 편집샵 — 콘텐츠로 발견하고, 취향으로 완성하는 쇼핑" (corp.cjonstyle.com)

Forbidden register: vague lifestyle copy with no offer, hedging on price.

Agent Prompt Guide

Quick Color Reference

• Purchase action and selection: CJ ONSTYLE Violet (#640faf), label #ffffff
• Text: #000000, #111111; selected tab #333333; secondary #767676, #929292
• Lines: #b2b2b2, #c5c5c5, #d1d1d1, #d9d9d9, #e6e6e6
• Surfaces: #ffffff; banner #f0f0f0; skip bar #26292a

Example Component Prompts

• "Build a product buy row: 64 × 60 찜 toggle (white, 1px solid #b2b2b2, radius 4px), 선물하기 and 장바구니 outlined in 1px solid #640faf with #640faf labels, and 바로구매 filled #640faf with a white 20px label, all 60px tall with 4px corners."
• "Create home module filter chips: 36px tall, radius 18px, white with 1px solid #e6e6e6 and #111111 15px Pretendard; the selected chip fills #111111 with white bold text."
• "Add product-page tabs: 253 × 62, white, 18px text in #767676 with a 1px #767676 underline; the selected tab is #333333 bold with a 1px #333333 underline."

Iteration Guide

1. Violet #640faf means buy or selected
2. Black-on-white, dense, square
3. 4px on purchase buttons, 18px pills only on chips
4. Lines, not shadows

---