oh-my-design-cli 1.6.1 → 1.6.3

package/web/references/lezhin/DESIGN.md

@@ -0,0 +1,301 @@
+---
+id: lezhin
+name: "Lezhin Comics"
+country: KR
+category: consumer-tech
+homepage: "https://www.lezhin.com"
+primary_color: "#eb0014"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=lezhin.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Lezhin Comics
+
+Korea's first premium webtoon platform — bold, content-first, and unapologetically direct.
+
+## 1. Visual Theme & Atmosphere
+
+Lezhin Comics presents a dark, immersive canvas that keeps the spotlight firmly on cover art and episode thumbnails. The interface uses a deep near-black base (`#111115`) punctuated by a single vivid crimson (`#eb0014`) that signals every interactive action — from primary buttons to the switch-selected state and the badge on adult content. Grey neutrals (`#e9e9ec` border-muted through `#09090b` ink-black) form a tight tonal ladder, producing clean hierarchy without decorative flourish. Content grids are tight and image-led; typography is set in Pretendard for sharp legibility in Korean and Latin. The overall atmosphere is premium but unadorned — a platform confident that its 8,000+ titles speak louder than chrome.
+
+## 2. Color Palette & Roles
+
+- **Brand Red:** `#eb0014` — primary CTA buttons, state-switch-selected, state-form-bg-selected, badge
+- **Red Hover:** `#ff5254` — primary button hover state
+- **Red Focus/Dark:** `#c40017` — badge background, button focus/active state
+- **Ink Black:** `#111115` — inverted background, text-default, icon-default
+- **Deep Dark:** `#09090b` — dark-strong surface
+- **Dark Charcoal:** `#222225` — secondary button background, border-default
+- **Soft Black:** `#36363a` — text-soft, icon-soft
+- **Mid Grey:** `#6f6f77` — text-subtle, icon-subtle
+- **Muted Grey:** `#a1a1a9` — text-muted, icon-muted, placeholder
+- **Border Muted:** `#e9e9ec` — card borders, dividers
+- **Surface Muted:** `#f4f4f5` — background muted, disabled button, skeleton base
+- **White:** `#ffffff` — default background (light), text-inverted
+
+## 3. Typography Rules
+
+- **Primary typeface:** Pretendard Variable → Pretendard → -apple-system → Noto Sans KR → Malgun Gothic → sans-serif
+- **Scale:** 10 / 12 / 13 / 14 / 15 / 16 / 17 / 18 / 20 / 24 / 28 / 32 / 36 / 40 / 56 / 80px (mapped via `--size-3xs` through `--size-10xl`)
+- **Body default:** 16px / weight 400 (regular)
+- **Caption / metadata:** 12–13px / weight 400
+- **Label / UI text:** 14px / weight 500 (medium) or 600 (semibold)
+- **Button labels:** 14px (small/medium) or 16px (large) / weight 600
+- **Section headers:** 18–24px / weight 700
+- **Font weights available:** 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
+- **Line height:** 1.5 for body; 1.35–1.4 for compact UI labels; `line-height: 100%` for buttons
+- **Letter spacing:** −0.28px to −0.36px for tighter display text in Korean
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (lzButtonPrimary / lzBtn--filled_red)**
+- Background: `#eb0014`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 12px
+- Font: 14px / 600
+
+**Primary Large**
+- Background: `#eb0014`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Height: 56px
+- Padding: 0 16px
+- Font: 16px / 600
+
+**Secondary (lzButtonSecondary / lzBtn--filled_bw)**
+- Background: `#222225`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 12px
+- Font: 14px / 600
+
+**Tertiary (lzButtonTertiary / lzBtn--filled_grey)**
+- Background: `#f4f4f5`
+- Text: `#36363a`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 12px
+- Font: 14px / 600
+
+**Outlined (lzBtn--outlined)**
+- Background: transparent
+- Text: `#36363a`
+- Border: 1px solid `#a1a1a9`
+- Radius: 4px
+- Height: 40px
+- Padding: 0 20px
+- Font: 14px / 600
+
+### Cards
+
+**Comic Thumbnail Card (lzCard)**
+- Background: `#f4f4f5`
+- Border: 1px solid `rgba(17,17,21,0.1)`
+- Radius: 4px
+- Aspect ratio: 2/3 (portrait)
+
+**Circle Thumb Card (lzCardCircleThumb)**
+- Radius: 9999px
+- Border: tracked ring at 3px stroke
+
+### Chips (lzChip)
+
+**Default Chip**
+- Background: transparent
+- Text: `#6f6f77`
+- Border: 1px solid `#e9e9ec`
+- Radius: 999px
+- Padding: 0 12px
+- Height: 32px
+
+**Selected Chip**
+- Background: `rgba(255,82,84,0.15)`
+- Text: `#c40017`
+- Border: 1px solid transparent
+- Radius: 999px
+
+### Tabs (lzTab)
+
+**Default Tab**
+- Background: `rgba(17,17,21,0.04)`
+- Text: `#111115`
+- Border: 1px solid `rgba(17,17,21,0.04)`
+- Radius: 4px
+- Padding: 0 12px
+- Height: 36px
+
+**Selected Tab**
+- Background: `rgba(17,17,21,0.95)`
+- Text: `#ffffff`
+- Radius: 4px
+
+### Dropdown / Select (lzSelectPaper)
+
+**Dropdown Container**
+- Background: `#ffffff`
+- Border: 1px solid `#f4f4f5`
+- Radius: 4px
+- Padding: 12px 0
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.lezhin.com (homepage HTML + 5 CSS bundles: 035ea059869bfd89.css, 9161416b11db8c9e.css, 06e1ad77298be69d.css, 0427f27bd4442fbd.css, 895581ecc829564e.css), https://about.lezhin.com/en (corporate brand/about page)
+**Tier 2 sources:** getdesign.md/lezhin — NOT LISTED (no data). refero — not checked (KR brand, typically no result).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+Lezhin uses a fluid column-grid whose gutter and column count adapt per viewport: 7 columns on desktop (≥ 961px), 4 columns on tablet (640–960px), 3–4 columns on mobile (≤ 639px). Card widths are computed via `calc((100% - (col-1) × gap) / col)` with 4px or 8px gutters on dense grids and 12–16px gutters on sparser layouts. The horizontal page max-widths are 1036px at 961–1280px breakpoint and 1212px at 1281px+. Horizontal scroll snap is used for compact-carousel sections (snap-scroll list) on mobile. All interactive regions maintain at minimum 36px touch targets.
+
+## 6. Depth & Elevation
+
+Elevation is expressed through the shadow token ladder:
+
+- **Level 1 – Subtle:** `rgba(17,17,21,0.06)` — hero banner ambient, near-flat cards
+- **Level 2 – Soft:** `rgba(17,17,21,0.08)` — dropdown menus (lzSelectPaper: `0 2px 12px 0 rgba(17,17,21,.08)`)
+- **Level 3 – Medium:** `rgba(17,17,21,0.25)` — drawers, floating elements
+- **Level 4 – Strong:** `rgba(17,17,21,0.30)` — modals
+- **Level 5 – Bold:** `rgba(17,17,21,0.50)` — overlay scrim base
+- **Thumbnail shadow:** `rgba(17,17,21,0.20)` inset on cover art
+- **Dark overlay (full scrim):** `rgba(17,17,21,0.85)` — background-overlay-bold
+
+Dark mode uses the same numeric scale but on the dark surface (`#111115`), so card depth reads via subtle border differences (`--border-muted: #222225`) rather than box-shadow contrast.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#eb0014` exclusively for the single highest-priority CTA per screen
+- Apply Pretendard (or Noto Sans KR fallback) — never substitute decorative display fonts
+- Follow the exact button-height ladder: 28px (xs) / 40px (sm) / 48px (md) / 56px (lg)
+- Use the pill chip (`border-radius: 999px`) for filterable genre or tag selectors
+- Maintain 4px radius on cards and rectanglular buttons for the characteristic sharp-yet-soft look
+- Use the skeleton shimmer (`lzSkeleton` — 1.8s ease-in-out infinite) during async content loads
+- Reserve the AI gradient (`#4CECBE → #00BFE2 → #007EE0`) only for AI-feature UI accents
+
+### Don't
+- Don't use red for destructive warnings — Lezhin's red is a brand/action signal, not a danger signal
+- Don't mix primary and secondary CTAs at equal visual weight on the same card or row
+- Don't apply `border-radius` larger than 12px on rectangular interactive components (chips and avatars are exempt)
+- Don't place light-mode text (`#111115`) directly on the dark surface (`#111115`) — toggle to inverted tokens
+- Don't hard-code pixel color values — always reference the semantic CSS variable so dark-mode tokens apply correctly
+- Don't add decorative illustration or icon embellishments inside buttons
+
+## 8. Responsive Behavior
+
+Lezhin uses three primary breakpoints:
+
+- **Mobile** `max-width: 960px` — single-column flow, horizontal-scroll carousels, paddings collapse to 8–16px, card grids shift to 3–4 columns
+- **Tablet** `min-width: 640px and max-width: 960px` — 4–6 column grids, moderate gutters (12–16px), nav bar adjusts to compact mode
+- **Desktop** `min-width: 961px` — 7-column grids, 24–32px gutters, full GNB nav, fixed sidebar elements appear
+
+Additional breakpoints handle edge cases: `max-width: 639px` (small mobile, 3-col grids), `max-width: 320px` (reduced padding to 8px), `min-width: 1281px` (max-width: 1212px container). Components observe `prefers-color-scheme: dark` via 53 scoped media queries, switching semantic tokens to their dark-palette counterparts without changing the component markup.
+
+## 9. Agent Prompt Guide
+
+When building Lezhin-styled UI:
+
+- **Color:** Treat `#eb0014` as the single brand accent; use it on the primary button and selected-state only. All other UI operates on the grey ladder (#111115 → #e9e9ec → #ffffff).
+- **Typography:** Set the font stack to `Pretendard Variable, Pretendard, -apple-system, Noto Sans KR, sans-serif`. Use 14px/600 for buttons, 16px/400 for body copy, 12px/400 for metadata.
+- **Radius:** Default to 4px on buttons and cards. Use 999px for pills (chips, avatars). Avoid values above 12px on rectangular elements.
+- **Spacing:** Prefer 4/8/12/16/20/24px spacing increments. Card gutters are 4px (dense) or 8–12px (standard).
+- **Dark mode:** Swap `--bg-default` to `#111115`, `--text-default` to `#ffffff`, border tokens adjust automatically when referencing CSS variables.
+- **Animation:** Transitions are `0.2s ease-in-out` for background-color and borders; `0.25s linear` for transforms. Skeleton is `1.8s ease-in-out infinite`.
+- **States:** Disabled buttons carry `rgba(255,82,84,0.2)` background. Focus states use `#9e0018` for primary.
+
+## 10. Voice & Tone
+
+**Brand voice:** Direct, confident, candid
+
+The Lezhin voice is **솔직한** (honest/frank) — it does not hedge or oversell. Copy leans toward short declarative punches rather than elaborate prose. It speaks to adult readers who know what they want and appreciate the platform getting out of the way.
+
+| Do | Don't |
+|----|-------|
+| Use short, punchy sentences | Use vague or corporate euphemisms |
+| Be direct about content types | Sanitize mature topics with excessive euphemism |
+| Address readers as adults who make their own choices | Be paternalistic or add unsolicited warnings |
+| Use Korean naturally (informal register is fine) | Over-translate Korean idioms into stiff English equivalents |
+| Let the content title and art do the heavy lifting | Over-describe what readers can see for themselves |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "솔직한 재미 대폭발 — 당신이 찾던 진짜 웹툰." (Honest fun explosion — the real webtoon you've been looking for.)
+- *Illustrative:* "매일 업데이트. 오늘 뭐 읽을까?" (Updated every day. What are you reading today?)
+- *Illustrative:* "재미있는 만화를, 쉽게 결제해서, 편하게 보게 하자." (Let's make great comics easy to buy and comfortable to read.)
+
+## 11. Brand Narrative
+
+Lezhin Entertainment was founded in April 2012 by Han Hee-sung (the blogger known as "lezhin") and developer Kwon Jung-hyuk, launching its Android app on June 7, 2013. The company was acquired by Seoul-listed KidariStudio in December 2020. The platform was built on a simple conviction: great comics deserve frictionless commerce. By introducing a coin-based micro-payment system at a time when most Korean webtoon platforms relied on ad revenue, Lezhin created South Korea's first premium webtoon marketplace — positioning itself as the platform for creators who wanted to earn and readers who wanted more.
+
+The company's governing mission is that "stories can make the world a better place." Lezhin Entertainment operates as a global content company, running the Lezhin Comics platform across Korea, the United States, and Japan. Its catalogue spans over 8,000 titles, and beyond reading, Lezhin Studio adapts webtoon IPs into films, dramas, and games while the Lezhin Shop brings physical merchandise to fans who want to hold their favourite stories in their hands.
+
+The brand's tagline — "솔직한 재미 대폭발" (honest fun explosion) — encapsulates the operating philosophy: candid about content, direct about pricing, and unapologetically focused on reader satisfaction. Lezhin's four stated values — duty and self-reliance, mutual respect, customer satisfaction, and innovation — underpin both its creator relationships and its product decisions, from daily episode release schedules to the coin economy.
+
+## 12. Principles
+
+1. **Reader first, always.** Every service decision begins with the question of how readers discover and enjoy content. *UI implication:* Thumbnail art is the dominant visual element; interface chrome is minimal so it never competes with the cover image.
+
+2. **Honest commerce.** Lezhin pioneered transparent paid webtoons. The pricing model is explicit — coins, costs, and episode counts are surfaced without dark patterns. *UI implication:* Coin balances and episode prices are always visible in context before purchase; no hidden upsells.
+
+3. **Candid about content.** The platform serves adult audiences without euphemism. *UI implication:* Genre and content-type badges (including adult tags) are shown directly on thumbnail cards rather than hidden behind additional taps.
+
+4. **Data and intuition in balance.** The founding team values "2% crazy" creative instinct alongside clear analytical thinking. *UI implication:* The platform ships experimental features (AI search, Snack short-drama) as clearly-labelled distinct experiences rather than silently folding them into the main flow.
+
+5. **Global through localisation.** Lezhin operates dedicated services for KR, US, and JP markets with locale-specific content curation rather than a one-size-fits-all approach. *UI implication:* Typography stacks, locale date formats, and content catalogues adapt per region rather than defaulting to a single language baseline.
+
+## 13. Personas
+
+*Illustrative — for design scenario use only:*
+
+**The Weekend Binge Reader** — A Korean professional in their late 20s who subscribes to Lezhin Premium. They open the app on Friday night, scan the "New Updates" carousel, and burn through three episodes of their favourite romance series back-to-back. They top up coins proactively rather than per-episode. For them, friction = bad; they want zero loading states and instant next-episode transitions.
+
+*Illustrative — for design scenario use only:*
+
+**The Genre Explorer** — A 32-year-old who discovered Lezhin through a recommendation for a specific genre (BL, thriller, or isekai). They use the tag-filter chip system heavily and bookmark titles for later. They read on both mobile and desktop and expect the reading experience to be consistent across devices.
+
+*Illustrative — for design scenario use only:*
+
+**The Loyal Creator Fan** — A college student who follows a specific artist and gets notified for every update. They comment frequently using the page-stamp system and engage with the creator's social feeds. Price sensitivity is moderate; they will spend coins on a title they love but are cautious about new unfamiliar series.
+
+*Illustrative — for design scenario use only:*
+
+**The International Reader** — An English-speaking reader in the US or Japan accessing Lezhin via lezhinus.com or the JP equivalent. They tend toward licensed titles with professional translation. They are brand-new to the coin system and need clear onboarding. The UI's Korean-first defaults (label copy, currency display) can create friction if not properly localised.
+
+## 14. States
+
+- **Empty (no content):** Shows the `lzEmpty` component with an illustrated book image (96×140px from `ccdn.lezhin.com/files/assets/img/empty-book-lt.png`); title in `#36363a` at 18px / weight 500; subtitle in `#6f6f77` at default size / weight 400
+- **Loading (skeleton):** `lzSkeleton` — background `#f4f4f5`; shimmer overlay `hsla(0,0%,100%,0.6)` animated via `linear-gradient(120deg, transparent 35%, shimmer 50%, transparent 65%)` at 1.8s ease-in-out infinite; dark-mode variant uses `#3a3b3d` base and `hsla(0,0%,100%,0.08)` shimmer
+- **Error (network/500):** `lzError` component centered at max-width 640px; title `#111115` at 34px / weight 500 (desktop) or 24px (mobile); error illustration displayed at `width: auto; height: 180px`; home button uses primary red CTA
+- **Error (expired/access denied):** Same `lzError` structure; uses specific expired-state illustration (132px wide); body text in `#6f6f77` at 14px; action CTA in red primary button
+- **Success:** State-form-bg-selected `#eb0014` applied to radio/checkbox fill; switch tracks when selected use `#eb0014`; snackbar uses dark `#2f353e` background with `#ffffff` text and blue-tinted link `#2992d6`
+- **Skeleton (card-specific):** Comic card background holds `#f4f4f5` while image lazy-loads; once loaded, image covers the background fully with `object-fit: cover`
+- **Disabled:** Primary button background `rgba(255,82,84,0.2)` with `#ffffff` text; tertiary button background `#fafafa` with `#dadadd` text; pointer-events none applied via attribute `[disabled]`
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- **Fast (micro-interactions):** 125ms — sort-arrow expand/collapse
+- **Standard:** 200ms — button background/border transitions, tab color, opacity fades (snackbar)
+- **Deliberate:** 250ms — slide-in/slide-out transforms (drawer, sheet transitions), switch track background, skeleton reveal height
+
+**Easing:**
+- `ease-in-out` — background-color and border transitions on buttons and tabs
+- `linear` — switch thumb position and track color
+- `ease-in-out` — skeleton shimmer sweep (1.8s)
+
+**Rules:**
+- Button hover/focus: 200ms ease-in-out on `background-color` and `border`
+- Drawer / bottom-sheet: `transform 250ms ease-in-out, opacity 250ms ease-in-out` — enters from below or from the left
+- Snackbar: `opacity 200ms` fade-in / fade-out; no transform movement
+- Skeleton: `translateX(-100% → 100%)` over 1.8s ease-in-out infinite; never use shorter durations as it feels cheap against dense content grids
+- Switch: `250ms linear` for track background, `250ms linear` for circle position — simultaneous, never staggered
+- AI gradient divider (search bar): `translateX` at 3s ease-in-out infinite — slower to feel ambient, not urgent

package/web/references/momoshop/DESIGN.md

@@ -0,0 +1,279 @@
+---
+id: momoshop
+name: "momo購物網"
+country: TW
+category: ecommerce
+homepage: "https://www.momoshop.com.tw"
+primary_color: "#D62872"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=momoshop.com.tw&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# momo購物網
+
+Taiwan's largest television and digital shopping platform, operated by Fubon Media Technology (富邦媒體科技), combining TV commerce heritage with a modern mobile-first marketplace offering millions of products across beauty, fashion, electronics, and daily essentials.
+
+## 1. Visual Theme & Atmosphere
+
+momo's digital product design radiates warm, confident energy rooted in its signature magenta-pink — a hue that traces back to its television shopping roots and reads instantly as "deal in progress." The overall atmosphere is dense but purposeful: a grid-forward layout packed with product imagery, price badges, and countdown timers communicates urgency and abundance simultaneously. Backgrounds stay cool-neutral (#F2F2F2 page canvas, #FAFAFA card surfaces) so that the hot pink accent and vivid product photography always pop. The typography follows a practical hierarchy — Microsoft JhengHei UI and PingFang TC for body readability in Traditional Chinese, with Century Gothic / Oxygen reserved exclusively for price numerals, which are the true focal stars on every product tile. Depth is achieved through subtle card shadows (0 1px 3px rgba(0,0,0,.1)) rather than heavy borders, keeping the eye moving across the catalogue grid rather than stopping at structural chrome.
+
+## 2. Color Palette & Roles
+
+- **Momo Pink (Primary):** `#D62872` — header background, primary CTA buttons, active nav indicators, brand logos, price accent, search-suggest titles
+- **Momo Pink Dark (Hover/Active):** `#D9006C` — hover state of primary buttons, selected tab underlines
+- **Shopping Cart Badge Pink:** `#E5047E` — notification badge background on cart icon
+- **Momo Blue (Link/Secondary Action):** `#027BFF` — hyperlinks, filter chips, restriction-text color, secondary interactive elements
+- **Sale Red (Price Alert):** `#DD2222` — discount labels, urgent sale badges, delete-confirm actions
+- **Alert Red (Delete):** `#EA3323` — destructive actions (delete-all browse-history button)
+- **Orange Gradient (Rank Badge):** `#FFAA3B` to `#FF9203` — top-ranked product number badges (linear-gradient)
+- **Page Background:** `#F2F2F2` — global page canvas and footer zone
+- **Card Surface:** `#FAFAFA` — product card and panel backgrounds
+- **Search Chip Background:** `#F2F2F2` — recent-search pill chips
+- **Text Primary:** `#404040` / `#454545` — body text, product titles
+- **Text Secondary:** `#727272` / `#999999` — captions, metadata, placeholder text
+- **Border Default:** `#EDEDED` — dividers, card borders
+- **Border Medium:** `#B3B3B3` — input outlines, rules buttons
+
+## 3. Typography Rules
+
+- **Primary typeface:** `"Microsoft JhengHei UI", "SF Pro TC", "SF Pro Text", "PingFang TC", Helvetica, Arial, sans-serif` — used for all body, navigation, product titles, and UI labels (defined in `--primary-font-family` CSS variable)
+- **Price typeface:** `"Oxygen", "Century Gothic", sans-serif` — used exclusively for price numerals (defined in `--price-font-family` CSS variable)
+- **Base size:** 15px — search suggest titles (`font: 700 17px/24px var(--main-font)`), product list items 15px, captions 13px, badges 12px–11px
+- **Weight scale:** 400 regular body, 700 bold for section headings, product names, price labels, search-trend titles
+- **Line-height:** 1.5 base (defined on `:root`); 20px for 15px UI text; 18px for 13px caption text; 24px for 17px headings
+- **Minimum size:** 11px (heat/rank metadata labels); no text below 11px in the search surface
+
+## 4. Component Stylings
+
+### Header Navigation
+
+**Primary Header Bar**
+- Background: `#D62872`
+- Text: `#FFFFFF`
+- Height: 44px
+- Font: 26px / 700
+
+**Cart Badge**
+- Background: `#E5047E`
+- Text: `#FFFFFF`
+- Radius: 8px
+- Width: 17px
+- Height: 17px
+- Font: 12px / 400
+
+### Search Bar
+
+**Search Input (Desktop)**
+- Background: `#FFFFFF`
+- Border: 1px solid `#B3B3B3`
+- Height: 36px
+- Padding: 8px 8px 8px 10px
+- Radius: 4px
+- Font: 15px / 400
+
+**Search Chip Tag (Recent/Suggest)**
+- Background: `#F2F2F2`
+- Text: `#404040`
+- Height: 32px
+- Radius: 16px
+- Padding: 6px 8px
+- Font: 13px / 400
+
+### Buttons
+
+**Primary CTA Button (Error-page / Home)**
+- Background: `#D62872`
+- Text: `#FFFFFF`
+- Height: 38px
+- Radius: 4px
+- Font: 16px / 700
+
+**Destructive Button (Delete All)**
+- Background: `#EA3323`
+- Text: `#FFFFFF`
+- Height: 44px
+- Radius: 22px
+- Width: 118px
+- Font: 17px / 400
+
+**Secondary Rules Button**
+- Background: `#FFFFFF`
+- Text: `#999999`
+- Border: 1px solid `#B3B3B3`
+- Radius: 13px
+- Padding: 3px 5px 3px 8px
+- Font: 13px / 400
+
+### Trend / Product Cards
+
+**Search Trend Card**
+- Border: 1px solid `#FBE9F1`
+- Radius: 15px
+- Background: linear-gradient(180deg, `#FFF5F9`, `#F9F9F9`)
+
+**Trend Item (Top 3 highlight)**
+- Background: linear-gradient(90deg, `#FFE4F0`, `#FCF6F9`)
+- Radius: 8px
+- Padding: 6px 8px
+
+**Trend Item (Standard)**
+- Background: linear-gradient(90deg, `#F3F3F3`, `#FEF5F9`)
+- Radius: 8px
+- Padding: 6px 8px
+
+### Rank Badge
+
+**Rank Number (Top Orange)**
+- Background: linear-gradient(0.34deg, `#FFAA3B` 0.29%, `#FF9203` 99.69%)
+- Text: `#FFFFFF`
+- Radius: 4px
+- Width: 25px
+- Height: 25px
+- Font: 15px / 400
+
+### Tooltip / Dialog
+
+**Search Dialog Tooltip**
+- Background: `rgba(0,0,0,.8)`
+- Text: `#FFFFFF`
+- Radius: 8px
+- Padding: 12px
+- Font: 15px / 700 (title), 13px / 400 (body)
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.momoshop.com.tw/brand (HTML + inline CSS), https://www.momoshop.com.tw/about (HTML + inline CSS), https://image.momoshop.com.tw/ecm/font/theme-main.css (CSS custom properties), https://www.momoshop.com.tw/search/_next/static/css/93e50030b97ac6a5.css (Tailwind utility bundle), https://www.momoshop.com.tw/search/_next/static/css/a40c6c07c5abf802.css (component CSS)
+**Tier 2 sources:** getdesign.md/momoshop — NOT LISTED ("No designs found for 'momoshop'"). refero ?q=momo — no result (TW brand, not indexed).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+- Fluid grid with horizontal product card lanes; mobile collapses to 2-column, desktop expands to 4–6 columns
+- Header fixed at 44px height; body starts immediately beneath with no gutter
+- Page canvas background always `#F2F2F2`; white (#FFFFFF) card surfaces float above canvas with 1px subtle shadow
+- Search and filter controls anchored to a 36px tall persistent bar below the 44px header on mobile
+- Categories use icon-label vertical stack in horizontal scrollable row; no wrapping
+- Countdown timers, sale badges, and rank numbers overlay the top-left corner of product thumbnails
+- Footer zone uses `#EEEEEE` background with `#484848` text at 13px for legal and service links
+
+## 6. Depth & Elevation
+
+- **Level 0 — Canvas:** `#F2F2F2` background, no shadow
+- **Level 1 — Cards:** `#FFFFFF` / `#FAFAFA` surface, box-shadow `0 1px 2px 0 rgba(0,0,0,.05)`
+- **Level 2 — Dropdowns/Panels:** box-shadow `0 1px 3px rgba(0,0,0,.1)`, z-index ~10
+- **Level 3 — Modals/Side Drawers:** box-shadow `0 4px 6px -1px rgba(0,0,0,.1)`, z-index 1000
+- **Level 4 — Toast/Tooltip overlays:** `rgba(0,0,0,.8)` background, z-index 1000+
+- **Level 5 — Login modal overlay:** `rgba(0,0,0,.5)` scrim + container z-index 999999
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#D62872` for all primary interactive elements — buttons, active states, brand signifiers
+- Pair hot-pink backgrounds with pure white (`#FFFFFF`) text for maximum legibility
+- Reserve `#DD2222` exclusively for price/discount signals and destructive confirmation actions
+- Use pill chips (border-radius: 16px) for search tags and filter selections — keeps them distinct from rectangular buttons
+- Apply the 44px touch-target minimum for all mobile interactive rows (header elements, list items)
+- Use the Oxygen / Century Gothic price font for all numeric price displays to maintain the premium-meets-value visual signal
+- Keep card backgrounds white or near-white (#FAFAFA) so product photography remains the visual hero
+
+### Don't
+- Do not use `#D62872` for error states — use `#DD2222` or `#EA3323` to avoid confusion with brand CTA
+- Do not mix the price font (Oxygen/Century Gothic) into body copy — it is reserved solely for numerals
+- Do not place text smaller than 11px (absolute minimum is the rank/heat metadata size)
+- Do not use shadows heavier than `0 10px 15px -3px rgba(0,0,0,.1)` inside product cards — heavy shadows compete with product images
+- Do not apply border-radius greater than 22px on action buttons — pill shapes above that threshold break the functional/brand balance
+- Do not leave the page canvas as pure white — the `#F2F2F2` canvas is essential for making white card surfaces appear elevated
+
+## 8. Responsive Behavior
+
+- **Mobile (≤768px):** Single or 2-column product grid; header collapses to 44px icon-bar; search triggers full-screen overlay (100vh); category icons in horizontal scroll lane; bottom navigation bar fixed at ~44px
+- **Tablet (768–1024px):** 3-column product grid; inline search bar at 36px height; category row with text labels visible
+- **Desktop (≥1024px):** 4–6 column grid; full header with logo + search bar (440px wide) + nav links; browsing-history side drawer (137px) docks to right edge; hover states active (`hover:text-[#D62872]`, `group-hover:bg-[#D62872]`)
+- Touch targets: minimum 44px height across all mobile interactive elements (header buttons, list rows, bottom bar)
+- Images: all set `h-auto` to maintain aspect ratio across breakpoints; product thumbnails use fixed-ratio containers
+
+## 9. Agent Prompt Guide
+
+To replicate momo's visual language in a UI component or prototype:
+
+- Set global background to `#F2F2F2`; use `#FFFFFF` card surfaces with `box-shadow: 0 1px 3px rgba(0,0,0,.1)`
+- Primary brand color: `#D62872`; hover/pressed: `#D9006C`; never tint or desaturate it
+- Font stack: `"Microsoft JhengHei UI", "PingFang TC", Helvetica, Arial, sans-serif`; price numerals: `"Oxygen", "Century Gothic", sans-serif` in bold
+- Header: 44px tall, `#D62872` fill, white text/icons
+- CTA buttons: `height 38–44px`, `border-radius 4–8px`, `background #D62872`, `color #FFFFFF`, `font-weight 700`
+- Search chips: `height 32px`, `border-radius 16px`, `background #F2F2F2`, `color #404040`
+- Rank badges top 1-3: orange gradient `#FFAA3B → #FF9203`, white text, `border-radius 4px`, `25×25px`
+- Price/discount labels: `#DD2222`, bold, Oxygen/Century Gothic numerals
+- Error/delete actions: `#EA3323`
+- Dividers: 1px solid `#EDEDED`; placeholder text: `#999999`
+
+## 10. Voice & Tone
+
+momo's copy is **direct, warm, and deal-forward**. Every word either confirms a saving or removes friction from the purchase decision. The register is colloquial Mandarin Chinese with light excitement — not corporate, never cold.
+
+**3 adjectives:** Energetic, trustworthy, deal-focused.
+
+| Do | Don't |
+|----|-------|
+| Lead with the saving: "限時下殺" (time-limited flash sale) | Use vague superlatives without anchoring to a number |
+| Use short active sentences: "立刻搶購" (grab it now) | Write multi-clause sentences that bury the price |
+| Address the user directly: "你找到更多更多" | Use passive or impersonal framing |
+| Emphasize concrete logistics: "24H快速到貨" | Promise without specifying the timeframe |
+| Blend trust signals naturally: "十天猶豫期" | Relegate return policies to fine-print footnotes |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "讓你找到更多更多 — 數十萬件商品，24小時快速到貨，讓購物更輕鬆。"
+- *Illustrative:* "今日限時下殺！錯過等一年，快搶！"
+- *Illustrative:* "新會員首購禮金，馬上領，立刻用，不花冤枉錢。"
+
+## 11. Brand Narrative
+
+momo購物網 was established by Fubon Media Technology Co., Ltd. (富邦媒體科技股份有限公司), a joint venture under Fubon Financial Holdings and Taiwan Mobile (台灣大哥大). What began as a television shopping channel evolved into Taiwan's largest integrated shopping platform, extending the immediacy and excitement of live TV commerce into an always-on digital experience. The company's Apple App ID (861796017) and the long-running tagline "讓你找到更多更多" — "helping you find more and more" — encapsulate the brand's core promise: an endlessly expanding catalogue that surfaces exactly what each shopper needs.
+
+The platform distinguishes itself through operational excellence: 24-hour rapid delivery, convenience-store pickup, a 10-day no-questions return window, and 16 payment methods that meet users wherever they bank. This operational depth is the bedrock of the brand's trust — not aesthetic polish, but a demonstrated commitment to removing every barrier between desire and delivery. With over 730,000 App Store reviews averaging 4.9 stars, momo's reputation rests on the reliability of that promise.
+
+Today momo positions itself beyond pure retail, hosting flagship brand stores (Apple, Dyson, MUJI, Estée Lauder), travel and dining e-tickets, insurance products, and a points-based affiliate program. The brand's visual identity — that unmistakable magenta-pink — functions as a permanent signal of value in motion, readable at a glance across television, mobile, and web surfaces.
+
+## 12. Principles
+
+1. **Value Visibility First.** Price, discount depth, and delivery speed are the headline. No UI element should compete with or obscure these signals. *UI implication:* Price numerals use a dedicated typeface (Oxygen/Century Gothic), appear in `#DD2222` for discounts, and occupy the most prominent position on every product tile.
+
+2. **Friction Removal at Every Step.** From 16 payment methods to convenience-store pickup, the brand obsesses over eliminating barriers. *UI implication:* Search must offer instant suggestions, filter chips must be one-tap, and cart actions must never require a page reload on mobile.
+
+3. **Warm Urgency Without Panic.** Countdown timers and "flash sale" badges create excitement without manufactured anxiety. The brand's magenta is energetic, not alarming. *UI implication:* Use `#D62872` for urgency signals, never pure red; reserve `#DD2222` only for confirmed discounts and destructive confirmations.
+
+4. **Trust Through Transparency.** Anti-fraud notices, return policy emphasis, and clear logistics specs reflect a brand that treats trust as a product feature. *UI implication:* Trust badges and policy links must appear at checkout-adjacent surfaces, styled with equal visual weight to promotional copy.
+
+5. **Consistent Brand Recognition Across Surfaces.** The brand spans TV, web, iOS, and Android. The magenta header and pink accent must be identical across all surfaces. *UI implication:* `#D62872` is non-negotiable — no tints, no gradients on the primary header; gradient use is limited to decorative accents (rank badges, trending cards).
+
+## 13. Personas
+
+*Illustrative Busy Mom (Lin, 38, Taichung):* She shops on her phone between school pickups. She filters by fastest delivery and uses the convenience-store pickup for anything she needs to control the schedule of. She trusts momo because the 10-day return window means she can buy without overthinking. Her price sensitivity is moderate — she watches flash-sales but always checks reviews.
+
+*Illustrative College Student (Jerry, 21, Taipei):* He discovered momo through an app-exclusive discount alert. He primarily buys electronics, headphones, and K-beauty skincare. He uses the image-search feature and relies on the official brand flagship stores (Apple, Dyson) as trust signals. He pays via Apple Pay.
+
+*Illustrative Home Manager (Mrs. Chen, 55, Kaohsiung):* She came from the TV shopping channel and feels comfortable with momo's familiar visual rhythm — lots of products, clear prices, reassuring customer service. She calls the hotline when uncertain, values the anti-fraud messaging, and prefers credit card installment payments.
+
+*Illustrative Deal Seeker (Tom, 29, Hsinchu):* He opens the momo app daily to check the 5-fold group-buy and daily flash sale sections. He is motivated entirely by price and delivery speed. He has accumulated significant loyalty points and routes almost all household purchases through momo.
+
+## 14. States
+
+- **Empty (No results):** Full-page illustration with brand-pink accent, short encouragement copy ("找不到？試試其他關鍵字"), and a secondary suggestion chip row in `#F2F2F2` pills
+- **Loading (Skeleton):** `border-radius: 4px` grey `#EDEDED` shimmer blocks replacing product thumbnails and title text; column layout preserved to prevent reflow
+- **Error (Network failure):** Centered error message with `#D62872` home-return button (`height 38px`, `border-radius 4px`), redirecting to `Main.jsp`
+- **Error (Destructive confirm):** Alert dialog with `#EDEDED` divider, cancel left, confirm-delete right in `#DD2726` (red) — `font: 17px Helvetica`
+- **Success (Order placed):** Toast or overlay with `#D62872` accent color, brief confirmation copy, auto-dismisses after ~2s
+- **Skeleton (Browse history panel):** Side drawer (`width 137px`) shows `#FAFAFA` card placeholders; spinner absent; position is preserved
+- **Disabled (OOS product):** CTA button muted to `#B3B3B3` fill with `#FFFFFF` text; price label remains visible; "補貨通知" (restock alert) secondary link in `#027BFF`
+- **Hover (Desktop link/card):** Text and borders shift to `#D62872` via `.hover:text-[#D62872]` and `.group-hover:bg-[#D62872]` utility classes; transition implicit (no explicit duration in source)
+
+## 15. Motion & Easing
+
+- **Short interactions (badge, tooltip appear):** ~150ms
+- **Panel / overlay transitions (login modal, browsing history drawer):** `transition: opacity .3s, background-color .3s` — confirmed from `browsing-history` CSS
+- **Search overlay:** `height: 0` → `auto` (no explicit duration; instant DOM swap via `.show` class toggle)
+- **Easing:** Default browser easing (no custom cubic-bezier defined in inspected source); overlays use linear or ease for opacity fades
+- **Rules:** Motion is functional, not decorative. No parallax, no scroll animations. Transitions serve only to soften state changes (modal appear/disappear, drawer open/close). Product grid items do not animate on scroll.