oh-my-design-cli 1.3.9 → 1.5.1

package/web/references/wconcept/DESIGN.md

@@ -0,0 +1,511 @@
+---
+id: wconcept
+name: W Concept
+country: KR
+category: ecommerce
+homepage: "https://www.wconcept.co.kr"
+primary_color: "#000000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=wconcept.co.kr&sz=128"
+verified: "2026-05-27"
+omd: "0.1"
+---
+
+# Design System Inspiration of W Concept (W컨셉)
+
+## 1. 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
+
+## 2. Color Palette & Roles
+
+### 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.
+
+## 3. Typography Rules
+
+### 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
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Pretendard | 32px | 700 | 42px | -0.4px | Editorial campaign / event title |
+| Heading Large | Pretendard | 24px | 700 | 32px | -0.4px | Category page title, section banner |
+| Heading | Pretendard | 20px | 700 | 28px | -0.3px | Section header ("주목해야 할 브랜드들") |
+| Title | Pretendard | 16px | 600 | 24px | -0.3px | Product detail title, brand name |
+| Body Large | Pretendard | 16px | 400 | 24px | -0.2px | Standard body, product card title |
+| Body | Pretendard | 14px | 400 | 22px | -0.2px | Listings text, descriptions |
+| Body Bold | Pretendard | 14px | 700 | 22px | -0.2px | Price emphasis, brand name on card |
+| Caption | Pretendard | 13px | 400 | 18px | -0.2px | Metadata, review counts, timestamps |
+| Caption Bold | Pretendard | 13px | 700 | 18px | -0.2px | Sale percentage labels |
+| Micro | Pretendard | 12px | 500 | 16px | -0.2px | Badge text, fine print |
+
+### 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.
+
+## 4. Component Stylings
+
+### 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.
+
+## 5. Layout Principles
+
+### 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.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, product images, default state |
+| Hairline (Level 1) | 1px solid `#eeeeee` | Card boundary, grid separator, header bottom border |
+| Soft (Level 2) | `0px 2px 8px rgba(0,0,0,0.06)` | Sticky header on scroll, dropdown menus |
+| Floating (Level 3) | `0px 4px 16px rgba(0,0,0,0.10)` | Bottom sheets, modal dialogs, snackbar |
+
+**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.
+
+## 7. 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.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | 2-column grid, full-bleed editorial, bottom tab bar |
+| Tablet | 768-1024px | 3-column grid, side-rail filters appear |
+| Desktop | >1024px | 4-column grid, max content width ~1280px, persistent category nav |
+
+### 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
+
+## 9. 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
+
+---
+
+## 10. 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"*.
+
+| Context | Tone |
+|---|---|
+| CTAs | Bare-stem Korean (`구매하기`, `장바구니`, `팔로우`, `더 보기`) / clipped English (`Shop`, `Buy`, `Follow`) |
+| Sale flags | One phrase + percentage (`단독 ~40%`, `오늘의 딜`). Never `초특가 폭탄 세일!!!`. |
+| Product titles | Brand name on its own line in bold, then the literal product name. No marketing adjectives. |
+| Empty states | One editorial line + one neutral suggestion (`아직 좋아한 상품이 없어요` + `상품 둘러보기`). Never `데이터가 없습니다`. |
+| Error messages | Specific, actionable, blameless (`주소를 다시 확인해 주세요`). No `죄송합니다` boilerplate. |
+| Editorial / lookbook | Magazine-style headline + 1-line dek (`주목해야 할 브랜드들`). Korean-English mix allowed. |
+| Sign-up / onboarding | Short -- one screen, one input, one CTA. No onboarding tour. |
+
+**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. <!-- cited: us.wconcept.com/brands.html, 2026-05 -->
+- `Designer fashion` — global surface tagline pattern. <!-- cited: us.wconcept.com/brands.html, 2026-05 -->
+- `주목해야 할 브랜드들` — home-feed editorial section header. <!-- cited: live display.wconcept.co.kr, 2026-05 -->
+- `구매하기` / `장바구니` — primary CTA pair on product detail page. <!-- illustrative: standard W Concept CTA pattern -->
+- `단독 발매` — exclusive-drop flag. <!-- illustrative: standard W Concept promo pattern -->
+
+## 11. 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](https://krendly.com/w-concept/), [us.wconcept.com/brands.html](https://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](https://www.koreanbuddies.com/shopping-guides/w-concept), [App Store — W Concept Global](https://apps.apple.com/us/app/w-concept-global-k-fashion/id6458788225)). 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.
+
+## 12. 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.
+
+## 13. 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.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no liked items)** | Single editorial line (`아직 좋아한 상품이 없어요`) in 14px/400 `#555555`, 12px gap, secondary CTA `상품 둘러보기` in outline-black-button style. No illustration, no mascot. |
+| **Empty (search no results)** | One line `'{검색어}'에 대한 결과가 없어요` in 14px/400 `#555555`, then 8px gap, recommended-brands grid below. Never a full-screen empty illustration. |
+| **Empty (filter cleared)** | `조건에 맞는 상품이 없어요` in 14px/400 `#999999`. No CTA — user resets filters. |
+| **Loading (catalog grid)** | Skeleton blocks at `#f6f6f6` matching the card layout: 3:4 image rectangle, two short text lines, one price line. Shimmer 1.2s, 6% white highlight. No spinner overlay. |
+| **Loading (infinite scroll)** | 2-4 skeleton cards appended at the grid bottom. Existing cards stay fully rendered. No spinner. |
+| **Loading (cart action)** | Inline button text swaps to a 24px `#ffffff` spinner on the existing `#000000` button — geometry stays identical for frame-stability. |
+| **Error (inline form)** | Input border becomes `#ff4600` 1px, helper text 13px/400 `#ff4600` 6px below. One actionable sentence (`주소를 다시 확인해 주세요`). |
+| **Error (toast)** | `#000000` background, white 14px/500 text, 0px radius, 3s auto-dismiss. Bottom of screen, 16px above bottom tab bar. One sentence. No icon. |
+| **Error (network / blocking)** | Full-screen centered: 16px/700 `#000000` headline, 14px/400 `#777777` subline, retry button in primary-black style. No illustration. |
+| **Success (added to cart)** | Bottom-edge slide-up snackbar: `#000000` bg, white 14px/500 text `장바구니에 담겼어요`, white-outline `장바구니 보기` text-button on the right. 3s auto-dismiss. |
+| **Success (purchase complete)** | Dedicated confirmation screen, not a toast. 24px/700 `#000000` `주문이 완료되었어요`, order summary block (white bg, hairline `#eeeeee` border), primary-black `주문 내역 보기` CTA. No celebratory animation. |
+| **Skeleton** | `#f6f6f6` blocks at exact card dimensions. Shimmer 1.2s. Brand name and price slots stay blank until resolved — never inferred placeholders. |
+| **Disabled** | Button bg drops to `#bababa`, text stays `#ffffff`. No outline change, no opacity tricks. |
+
+## 15. Motion & Easing
+
+**Durations** (named, not raw milliseconds):
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, checkbox states |
+| `motion-fast` | 150ms | Button press dim, hover transitions, inline focus |
+| `motion-standard` | 220ms | Default — card taps, tab switches, dropdown reveals |
+| `motion-slow` | 320ms | Sheet presentations, success-screen entries |
+| `motion-page` | 280ms | Native push/pop between routes |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Sheets, snackbars, route entries |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, snackbar auto-close |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — expandable cards, tab content |
+
+**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.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Tier 1 — Direct verification (MCP playwright, 2026-05-27):
+- https://display.wconcept.co.kr/rn/women (live women's display surface;
+  redirected from www.wconcept.co.kr). Confirmed: body font-family
+  "Pretendard Variable", Pretendard, ... sans-serif; body color
+  rgb(0,0,0); base size 16px; dominant chrome color #000000 (~7,058
+  occurrences); single saturated accent rgb(255,70,0) = #ff4600
+  (~886 occurrences) on sale/promo; surface fill #f6f6f6; hairline
+  #eeeeee; editorial tiles 0px radius. Note: www.wconcept.co.kr returns
+  403 to WebFetch but loads via browser, redirecting to the RN display
+  host.
+
+Tier 2 — Press / secondary (WebSearch, 2026-05):
+- https://krendly.com/w-concept/ — 2008 founding, Korean-designer
+  curation platform, 20s–30s target, premium positioning.
+- https://us.wconcept.com/brands.html — global "Seoul-fully created /
+  Designer fashion" positioning lines.
+- https://www.koreanbuddies.com/shopping-guides/w-concept — multinational
+  platform, SSG.COM (Shinsegae) acquisition (2021) context.
+- https://apps.apple.com/us/app/w-concept-global-k-fashion/id6458788225
+  — W Concept Global app, refreshed brand identity / new wordmark.
+
+Personas (§13) are fictional archetypes informed by W Concept's publicly
+described user base (Korean Gen Z / millennial designer-fashion shoppers).
+Any resemblance to specific individuals is unintended.
+
+Interpretive claims (editorial, not documented W Concept statements):
+- "The monochrome is not minimalism for its own sake … a curator's
+  confidence" (§11 closing) — editorial reading of the design.
+- The spring-forbidden stance (§15) — derived from the overall editorial
+  brand posture, not a documented W Concept motion rule.
+- The 7 numbered principles (§12) — synthesized from observed surface
+  behavior + the platform's curatorial positioning; not a published list.
+- Token-level component geometry (button padding, badge radius) is
+  reconciled from the live monochrome surface treatment + Pretendard
+  base; re-verify component internals in a stable session before
+  treating as authoritative DS specs.
+-->
+
+---
+
+**Verified:** 2026-05-27 (omd:add-reference initial create — Tier 1 live inspect / Tier 2 press confirmed)
+**Tier 1 sources:** 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.

package/web/references/webflow/DESIGN.md

@@ -1,3 +1,17 @@
+---
+id: webflow
+name: Webflow
+country: US
+category: design-tools
+homepage: "https://webflow.com"
+primary_color: "#146ef5"
+logo:
+  type: simpleicons
+  slug: webflow
+verified: "2026-05-15"
+omd: "0.1"
+---
+
 # Design System Inspiration of Webflow
 
 ## 1. Visual Theme & Atmosphere

package/web/references/wise/DESIGN.md

@@ -1,3 +1,22 @@
+---
+id: wise
+name: Wise
+country: UK
+category: fintech
+homepage: "https://wise.com"
+primary_color: "#9fe870"
+logo:
+  type: simpleicons
+  slug: wise
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Wise Design
+  url: "https://wise.design"
+  type: system
+  description: Wise's design system covering foundations, components, patterns, and tone of voice.
+---
+
 # Design System Inspiration of Wise
 
 ## 1. Visual Theme & Atmosphere

package/web/references/x.ai/DESIGN.md

@@ -1,3 +1,17 @@
+---
+id: x.ai
+name: xAI
+country: US
+category: ai
+homepage: "https://x.ai"
+primary_color: "#000000"
+logo:
+  type: simpleicons
+  slug: x
+verified: "2026-05-15"
+omd: "0.1"
+---
+
 # Design System Inspiration of xAI
 
 ## 1. Visual Theme & Atmosphere