W컨셉 DESIGN.md

Design System Inspiration of W Concept (W컨셉)

Overview

Visual Theme & Atmosphere

W Concept's interface is a curated fashion gallery rendered in absolute monochrome -- the digital equivalent of a Seoul concept-store window where the clothing is lit and everything else recedes into shadow or white. The page opens on a pure white canvas (#ffffff) with absolute black type and chrome (#000000), and a deliberately starved color budget: black, white, three grays, and a single hot orange-red (#ff4600) that flashes only on sale percentages and time-limited drops. There is no brand pastel, no friendly accent, no warm illustration tone. The lookbook photograph -- a studio-shot designer piece, usually on a clean wall or a model against neutral seamless -- is the only thing on screen permitted to carry color.

This is premium positioning expressed through subtraction. Where mass-market Korean commerce (Coupang, Gmarket, 11st) screams with rainbow banners and red urgency, W Concept whispers. The platform built its identity around discovering emerging Korean designers, and the design system reflects that editorial-curator posture: the chrome is a frame, never the picture. Type runs in Pretendard Variable at a comfortable 16px base with disciplined weight contrast -- product titles in regular, brand names and prices carrying the emphasis through 600/700 weight rather than size. Corners are sharp (0px on cards and tiles), borders are hairline, and the grid is a clean magazine layout that lets each garment breathe in its own rectangle. The aesthetic says: this is not a marketplace, it is a selection.

What defines W Concept visually is the tension between the severe black-and-white frame and the single permission of #ff4600 -- a saturated orange-red that, used scarcely on discount labels, reads as decisive rather than desperate. The absence of a second brand hue is itself the brand statement: confidence enough to let the photography and the typography do all the work.

Key Characteristics:

• Monochrome discipline: #000000 type and chrome on #ffffff canvas, no brand pastel
• Single hot accent (#ff4600 orange-red) reserved for sale percentages and time-limited drops
• Pretendard Variable as the system face -- no bespoke wordmark webfont on product surfaces
• Sharp 0px corners on product cards and editorial tiles; hairline #eeeeee separation
• 16px comfortable base type (more generous than a fast-fashion grid) -- premium spacing
• Light gray #f6f6f6 surface fills for nested sections and image placeholders
• Photograph-first composition: the designer piece dominates, chrome yields
• Black solid as primary CTA -- never blue, never branded color

Primary tasks

• Find emerging Korean designer labels before they get popular
• Search for a brand or product by name
• Narrow a category with size and color filters
• Save a piece to the wishlist for later
• Buy a designer piece and review the completed order

Brand Narrative

W Concept (W컨셉) launched in 2008 as an online platform built around a single editorial idea: surface emerging Korean designers to a fashion-literate audience that legacy department stores ignored. Where the big Korean malls (Lotte, Shinsegae) gatekept shelf space for established labels, W Concept's premise was curatorial -- a concept store online, hence the name. It grew into one of Korea's leading designer-fashion e-commerce platforms, described as a home for thousands of Korean designers and brands, predominantly aimed at fashion-conscious shoppers in their 20s and 30s (Krendly — W Concept overview, us.wconcept.com/brands.html).

The platform was acquired by SSG.COM (Shinsegae) in 2021, anchoring it inside one of Korea's largest retail groups while keeping its independent-designer identity intact, and has since pushed a global expansion (a US site and a "W Concept Global — K-Fashion" app) to export Korean designer fashion abroad (Korean Buddies — W Concept platform, App Store — W Concept Global). The app relaunch refreshed the brand identity, updating the wordmark and splash-page treatment while holding to the monochrome editorial system.

What W Concept refuses: the rainbow-banner urgency of nationwide marketplaces (Coupang, Gmarket, 11st), the lifestyle-blog warmth of Western boutique e-com, and the algorithmic-feed social-commerce UX. The catalog stays the homepage; the designer photograph leads; black wordmark on white canvas; sharp corners; one hot orange-red used only when something is actually on sale. The monochrome is not minimalism for its own sake -- it is the visual expression of a curator's confidence: a selection worth showing doesn't need decoration to sell it.

Principles

1. Black is the brand, not the accent. #000000 is the primary CTA fill, the wordmark, the chrome -- not a hover state. Concept-store premium earns trust through absolute contrast, not softened grays. UI implication: never substitute #222 for a primary CTA fill; reserve grays for body text only.
2. One accent, scarcely used. Orange-red #ff4600 exists almost exclusively on discount percentages and time-limited drops. It is never decoration, never a brand color, never on navigation. UI implication: if a designer adds the accent to anything that is not a sale or an error, reject — there is no second brand color.
3. Photograph first, chrome second. Every product card's job is to deliver the designer's image. Borders, shadows, and radii are subtractive — anything that competes with the photograph loses. UI implication: default product cards have no border, no shadow, no radius.
4. Zero radius is the concept. Sharp corners read as gallery / editorial; rounded reads as casual mass-market. UI implication: if a card or button grows an 8px radius, it has drifted toward fast-fashion and should be flattened to 0px.
5. Emphasis through weight, never a second hue. Pretendard 400 / 600 / 700 build the entire hierarchy. UI implication: if a layout reaches for a colored label to create rank, restate with weight=700 instead.
6. Premium breathes wider. Section gaps run 56-80px on the home feed — more generous than a fast-fashion grid. UI implication: never compress editorial sections to fit more above the fold; the spacing is the premium signal.
7. Letter-spacing is the editorial whisper. All Korean type carries -0.2px to -0.4px. Invisible individually, unmistakable in aggregate. UI implication: every Korean type token specifies negative tracking; positive tracking reads as foreign / corporate.

Personas

Personas are fictional archetypes informed by W Concept's publicly described user base (Korean Gen Z / millennial fashion-conscious shoppers in their 20s–30s), not individual people.

유진 (Yujin), 27, Seoul. Works in advertising in 성수동. Opens W Concept to discover small Korean designer labels before they blow up — treats the home feed like a fashion magazine, scrolls for the "주목해야 할 브랜드들" section first. Will pay full price for a 단독 drop; waits for a sale on basics. Cares about the lookbook photography as much as the garment.

도현 (Dohyun), 31, Seoul. Product designer, lives in 한남동. Buys minimal-wardrobe pieces — neutral knitwear, well-cut trousers. Finds the monochrome interface calming next to the rainbow chaos of mass marketplaces. Reads the brand story before adding to cart; values that W Concept curates rather than dumps inventory.

소연 (Soyeon), 24, Busan. University student. Discovered W Concept through Instagram designer features. Browses on mobile, mostly for inspiration, buys 2-3 times a season when a sale percentage in orange-red catches her eye. Trusts that the discount is real because the rest of the site never shouts.

Hana, 29, Los Angeles. Korean-American, shops the W Concept Global app for K-fashion brands unavailable in the US. Expects the same severe monochrome editorial layout in English — a global site that looked like a generic Western boutique would read as a knockoff to her.

Colors

Primary

• Pure Black (#000000): Primary CTA fill, headings, product titles, wordmark, nav. The non-negotiable foundation -- observed ~7,000 times on the live women's display surface.
• Pure White (#ffffff): Page canvas, card surfaces, button text on black, navigation background.
• Sale Orange-Red (#ff4600): Discount percentages, "단독", time-limited promotion accents, sale-price highlight. The system's only saturated hue. Used scarcely.

Neutral Scale

• Gray 900 (#222222): Strong secondary text, sub-headings on light surfaces.
• Gray 700 (#555555): Default body / secondary copy color (observed rgb(85,85,85)).
• Gray 500 (#777777): Metadata, brand descriptors, review counts (observed rgb(119,119,119)).
• Gray 400 (#999999): Disabled text, inactive captions.
• Gray 300 (#bababa): Placeholder text, inactive icons.
• Gray 200 (#e2e2e2): Input borders, divider lines.
• Gray 100 (#eeeeee): Hairline grid separators, card outlines.
• Gray 50 (#f6f6f6): Surface fill for nested sections, image placeholder background.

Semantic

• Sale / Critical (#ff4600): Sale percentage and error states share this hot orange-red.
• Soft Scrim (rgba(0,0,0,0.3)): Image overlays, gradient veils on hero photography.
• Hairline Veil (rgba(0,0,0,0.1)): Subtle dividers over imagery.

Borders

• Hairline Border (#eeeeee): Grid separator, card outline -- the system's most-used non-text non-canvas value.
• Border Mid (#e2e2e2): Input outline default.
• Border Strong (#000000): Selected filter chip, focused input, active tab underline.

Typography

Font Family

• Primary (Korean + Latin): "Pretendard Variable", Pretendard, -apple-system, "system-ui", "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", sans-serif (observed on live display.wconcept.co.kr, 2026-05)
• Design Principle: No custom display typeface. The editorial weight comes from the lookbook photograph and from disciplined weight contrast in Pretendard -- not from a branded webfont. Latin and Korean render co-equally in the same line.

Hierarchy

Principles

• Emphasis via weight, not color: A brand name in 14px/700 outranks the product title in 14px/400 on the same card -- the hierarchy is built in black, never in a second hue.
• Comfortable, not dense: Base body sits at 14-16px -- more generous than a fast-fashion catalog. Premium positioning earns the extra leading.
• Two-and-a-half weights: Regular (400) and Bold (700) do the heavy lifting; SemiBold (600) handles titles and brand names. Light is avoided -- it reads as cheap on Korean glyphs.
• Tight Korean tracking: Korean type carries -0.2px to -0.4px letter-spacing for editorial compactness without crowding.
• No italics: Korean type doesn't carry italic stress; the system avoids it even on Latin substrings.

Layout

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 80px
• Global gutter (mobile): 16px each side
• Global gutter (desktop): 20-24px each side, max content width ~1280px
• Inter-product vertical spacing: 24-32px between rows on the catalog grid
• Inter-section vertical spacing: 56-80px between editorial blocks on the home feed (premium breathing room)

Grid & Container

• Mobile: 2-column product grid
• Tablet: 3-column product grid
• Desktop: 4-column product grid (premium catalogs rarely go to 5 -- larger images carry the editorial mood)
• Editorial / lookbook banner: full-bleed (edge-to-edge) on mobile, max 1280px on desktop
• The grid is the selection. Avoid masonry -- each designer piece gets the same rectangle.

Whitespace Philosophy

• The frame breathes: White space around imagery is the system's primary breathing room. Premium positioning earns wider section gaps than a fast-fashion grid.
• Section breaks earn their space: 56-80px vertical gaps mark editorial shifts; within a section 16-24px is enough.
• Don't crowd the garment: Image padding stays minimal so the photograph touches its frame, but the surrounding catalog never feels cramped.

Border Radius Scale

• Sharp (0px): Product cards, editorial tiles, buttons, inputs, badges -- the system default
• Note: W Concept is a zero-radius system. Rounded corners read as casual / mass-market -- anything over 4px breaks the concept-store mood.

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA buttons: 48-52px height
• Filter chips: 36px height
• Bottom tab bar items: 56px height
• Product card tap area: full card (image + metadata)

Collapsing Strategy

• Desktop side-rail filters → mobile bottom-sheet filter (필터 opens full-height sheet)
• Desktop 4-column grid → mobile 2-column grid
• Editorial banners stay full-bleed at every breakpoint -- they never get gutters

Image Behavior

• Product images: 3:4 portrait, 0px radius, lazy-loaded with #f6f6f6 placeholder
• Brand logos: square 1:1, 0px radius
• Editorial covers: 3:4 or 16:9 depending on placement, full-bleed at the breakpoint

Elevation & Depth

Shadow Philosophy: W Concept is allergic to elevation. The default product card has no shadow and no border -- its boundary is the photograph's edge. Shadows appear only when an element must visibly detach (sticky bar, modal). The system never uses tinted shadows, and drop-shadows on product imagery are forbidden -- they read as cheap e-commerce, not concept-store editorial.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.soft: 0px 2px 8px rgba(0,0,0,0.06)
• shadow.floating: 0px 4px 16px rgba(0,0,0,0.10)

Motion & Easing

Durations (named, not raw milliseconds):

Easings:

Spring stance. Spring and overshoot easings are forbidden on W Concept product surfaces. The brand is concept-store editorial; bouncy motion reads as toy-like or as a social-shopping app, neither of which W Concept wants to be. The catalog grid should feel like a magazine page turning — controlled, predictable, never elastic. The single licensed exception is the native pull-to-refresh, which inherits the OS default spring because overriding it feels worse than accepting it.

Signature motions.

1. Product card tap. Image dims to 92% opacity on press (motion-fast / ease-standard), releases on tap-up before navigation. The card does not scale — scale on a gallery grid breaks the editorial metaphor.
2. Filter sheet presentation. Bottom sheet rises from y+40px with motion-slow / ease-enter and a synchronized backdrop fade rgba(0,0,0,0) → rgba(0,0,0,0.5). Dismissal uses motion-fast / ease-exit — leaving is lighter than entering.
3. Add-to-cart snackbar. Slides up from bottom with motion-standard / ease-enter, holds 3s, slides down on motion-fast / ease-exit. No bounce.
4. Tab switch (home → category → wishlist). Cross-fade only, motion-standard — sliding would imply an axial relationship between modes that doesn't exist.
5. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. Cross-fades replace slides. The catalog stays fully usable; just less kinetic.

---

Verified: 2026-05-27 (omd:add-reference initial create — Tier 1 live inspect / Tier 2 press confirmed) Tier 1 sources: https://display.wconcept.co.kr/rn/women (live playwright inspect — Pretendard Variable, body #000 on #fff, base 16px, dominant #000000, single accent #ff4600, surface #f6f6f6, hairline #eeeeee, 0px radius). Tier 2 sources: getdesign.md/wconcept — not checked. styles.refero.design — not checked. Krendly + us.wconcept.com + Korean Buddies + App Store (2008 founding, designer-curation positioning, SSG.COM acquisition, global app). Style ref: musinsa (KR monochrome commerce neighbor format retained for tone scaffolding). Conflicts unresolved: none. Assumed primary #000000 confirmed by live inspect. Live accent verified as #ff4600 (orange-red), documented as the single sale hue. Component-internal geometry reconciled from surface treatment; re-run Tier 2 (getdesign/refero) to lock token values.

Components

Buttons

Primary (Black Solid)

• Background: #000000
• Text: #ffffff
• Border: none
• Radius: 0px
• Padding: 16px 24px
• Font: 16px / 700 / Pretendard
• Hover: #222222
• Pressed: #000000 with 0.85 opacity overlay
• Disabled: #bababa background, #ffffff text
• Use: Primary CTA -- 구매하기, 장바구니, 로그인, 브랜드 팔로우

Outline (Black Border)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Radius: 0px
• Padding: 16px 24px
• Font: 16px / 600 / Pretendard
• Hover: #f6f6f6 background
• Use: Secondary CTA -- 사이즈 가이드, 브랜드 홈, 위시리스트 추가

Neutral (Gray Fill)

• Background: #f6f6f6
• Text: #222222
• Border: 1px solid #eeeeee
• Radius: 0px
• Padding: 12px 16px
• Font: 14px / 500 / Pretendard
• Hover: #eeeeee background
• Use: Tertiary actions -- filter open, sort toggle, share

Sale (Promotion)

• Background: #ff4600
• Text: #ffffff
• Border: none
• Radius: 0px
• Padding: 12px 18px
• Font: 14px / 700 / Pretendard
• Use: Time-limited sale CTA -- 단독 특가 보기, 오늘의 딜. Used scarcely.

Inputs

Default

• Background: #ffffff
• Text: #000000
• Border: 1px solid #e2e2e2
• Radius: 0px
• Padding: 12px 14px
• Font: 14px / 400 / Pretendard
• Placeholder: #999999
• Focus: 1px solid #000000 (border darkens, no glow ring)
• Use: Default text input -- login, sign-up, address forms

Search

• Background: #f6f6f6
• Text: #000000
• Border: none
• Radius: 0px
• Padding: 12px 16px 12px 40px (left-pad for inline magnifier)
• Font: 14px / 400 / Pretendard
• Placeholder: #999999 ("브랜드, 상품 검색")
• Focus: #ffffff background, 1px solid #000000 border
• Use: Header search bar across surfaces

Error

• Background: #ffffff
• Text: #000000
• Border: 1px solid #ff4600
• Radius: 0px
• Padding: 12px 14px
• Font: 14px / 400 / Pretendard
• Use: Form validation failure -- helper text 13px/400 #ff4600 below

Cards

Product Card

• Background: #ffffff
• Border: none (only #eeeeee hairline at grid-cell boundary)
• Radius: 0px (sharp -- the catalog is a print grid)
• Padding: 0px on container; 8-10px between image and metadata
• Image: 3:4 portrait, no radius, #f6f6f6 placeholder
• Shadow: none
• Use: Default product listing card -- the grid cell, not a floating object

Editorial Tile

• Background: #f6f6f6 (or full-bleed image)
• Border: none
• Radius: 0px
• Padding: 0px
• Use: Curated sections ("주목해야 할 브랜드들", lookbook banners) -- full-bleed photographs as the card surface itself

Brand Card

• Background: #ffffff
• Border: 1px solid #eeeeee
• Radius: 0px
• Padding: 16px
• Use: Brand-of-the-day, designer-spotlight entry on the home feed

Badges

Sale Percentage

• Background: transparent
• Text: #ff4600
• Border: none
• Radius: 0px
• Padding: 0px
• Font: 14px / 700 / Pretendard
• Use: Inline sale percentage on product cards (-30%, -50%). Most common badge in the system.

Exclusive Flag

• Background: #000000
• Text: #ffffff
• Border: none
• Radius: 0px
• Padding: 3px 6px
• Font: 11px / 700 / Pretendard
• Use: "단독", "선론칭" exclusive flags on product imagery

New / Coupon

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Radius: 0px
• Padding: 3px 6px
• Font: 11px / 700 / Pretendard
• Use: "NEW", "쿠폰" minor flags. Outline keeps the photograph dominant.

Filter Chip (Default)

• Background: #ffffff
• Text: #222222
• Border: 1px solid #e2e2e2
• Radius: 0px
• Padding: 8px 14px
• Font: 13px / 500 / Pretendard
• Use: Category / size / color filter pills

Filter Chip (Selected)

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Radius: 0px
• Padding: 8px 14px
• Font: 13px / 700 / Pretendard
• Use: Active filter state

Navigation

• Top header: #ffffff background, ~60px height, 1px bottom border #eeeeee. Wordmark left (W CONCEPT, 700, black), search center, account/wishlist/cart right.
• Category nav: horizontal items (여성/남성/뷰티/라이프/럭셔리), 16px/600, active item gets a 2px black underline.
• Bottom tab bar (mobile): 5 items -- 홈, 카테고리, 좋아요, 마이, 장바구니. Active label #000000, inactive #999999. Weight does the work; no color differentiation.

States

Do's and Don'ts

Do

• Use #000000 for primary CTAs -- black is the brand's saturation
• Keep border-radius at 0px on product surfaces and chrome
• Use weight 700 to create emphasis, not larger sizes or a second color
• Apply negative letter-spacing (-0.2px to -0.4px) on Korean type
• Let the designer photograph be the only color in the layout
• Use #ff4600 for sale percentages and time-limited drops only
• Default to 2-column mobile / 4-column desktop grid -- the selection is the page
• Give the home feed generous 56-80px section gaps -- premium breathing room

Don't

• Don't introduce a brand blue, green, or pastel -- the palette is mono plus one orange-red
• Don't round corners -- 0px is the brand; rounded reads as mass-market
• Don't add drop-shadows to product imagery
• Don't crowd the catalog with red urgency banners -- W Concept is curatorial, not a flash-sale site
• Don't use #ff4600 for navigation, decoration, or non-sale CTAs
• Don't switch to a custom display typeface -- Pretendard at 700 is the headline voice
• Don't soften the black -- #000000, not #1a1c20. Concept-store contrast requires it.

Voice & Tone

W Concept speaks like a fashion editor curating a selection, not a marketer pushing inventory. The voice is restrained, declarative, and trusts the photograph to do the persuading. Korean copy favors clean editorial endings (-요, bare-stem imperatives like 구매하기, 더 보기) over both the overly formal -ㅂ니다 and the breathless hype of mass-market commerce. Sentences are short. A drop reads 단독 발매, not 놓치면 후회할 단독 특가 대박 찬스!. English surfaces (the W Concept global site / app) inherit the same compactness -- "Seoul-fully created", "Designer fashion" -- never "Premium luxury experiences".

Forbidden phrases. 초특가, 대박 세일, 놓치면 후회, 지금 바로 클릭!!!, 데이터가 없습니다, 오류가 발생했습니다, 불편을 드려 죄송합니다. English bans: amazing deals, must-have, luxury lifestyle, limited time only!!!. Emoji are allowed in community / styling posts, never in CTAs, sale flags, error messages, or chrome.

Voice samples.

• Seoul-fully created — global positioning line.
• Designer fashion — global surface tagline pattern.
• 주목해야 할 브랜드들 — home-feed editorial section header.
• 구매하기 / 장바구니 — primary CTA pair on product detail page.
• 단독 발매 — exclusive-drop flag.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Pure Black (#000000)
• CTA Hover: Soft Black (#222222)
• Background: Pure White (#ffffff)
• Heading text: Pure Black (#000000)
• Body text: Gray 700 (#555555)
• Metadata: Gray 500 (#777777)
• Placeholder: Gray 400 (#999999)
• Hairline border: Gray 100 (#eeeeee)
• Input border: Gray 200 (#e2e2e2)
• Disabled: Gray 300 (#bababa)
• Sale / accent: Orange-Red (#ff4600)
• Surface fill: Gray 50 (#f6f6f6)

Example Component Prompts

• "Create a W Concept product card: white background, no border, no shadow, 0px radius. Image is 3:4 portrait at top, no radius, #f6f6f6 placeholder. Below: 8px gap, brand name 14px Pretendard 700 #000000, product title 14px 400 #555555 (2 lines, ellipsis), 4px gap, price line: sale percentage 14px 700 #ff4600 inline before final price 14px 700 #000000, original price strikethrough 13px 400 #999999. Letter-spacing -0.2px."
• "Build a primary CTA: #000000 background, white text, 16px weight 700 Pretendard, padding 16px 24px, 0px radius, full-width on mobile. Hover #222222. No icon."
• "Design a filter chip bar: horizontal scroll, 8px gap. Default: white bg, 1px solid #e2e2e2, 13px/500 #222222, 0px radius, 8px 14px padding. Selected: #000000 bg, white text, 13px/700."
• "Create a W Concept header: white bg, 60px height, 1px bottom border #eeeeee. Left: W CONCEPT wordmark 700 #000000. Center: search bar #f6f6f6 bg, 0px radius, 14px placeholder #999999. Right: heart, cart, profile icons 24px stroke #000000."
• "Design a sale badge: text-only, no background, no border. '-40%' in 14px Pretendard 700 #ff4600, inline with the product price."

Iteration Guide

1. Default surface is #ffffff, default text is #000000 -- never #1a1c20
2. Orange-red #ff4600 is the only chromatic accent -- only for sale / promotion
3. Border-radius is 0px everywhere on product surfaces and chrome
4. Body 14-16px, emphasis via 700 weight not larger size
5. Korean letter-spacing -0.2px to -0.4px for editorial compactness
6. No shadows on product cards -- hairline #eeeeee is the boundary
7. The photograph is always the brightest thing on screen -- chrome yields

---

Governance

Known Gaps

• Contrast, button-sale. Text #ffffff on #ff4600 measures 3.43:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.