oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/melon/DESIGN.md

@@ -0,0 +1,153 @@
+---
+id: melon
+name: "Melon"
+country: KR
+category: entertainment
+homepage: "https://www.melon.com"
+primary_color: "#00CD3C"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=melon.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+
+# Design System Inspiration of Melon
+
+## 1. Visual Theme & Atmosphere
+
+Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment, and its interface wears that scale on its sleeve: a dense, white, content-first surface where charts, lists, and player controls are packed tightly together and the music is always the point. The atmosphere is utilitarian and high-density — small type at 12px for body and 13-14px for controls, near-black #1A1A1A headings, and sharp 0px corners everywhere — so the screen reads like a tightly ruled spreadsheet of songs rather than a soft consumer app. Against that white #FFFFFF ground, the signature Melon green (#00CD3C in the source CSS, rendering as a near-twin #00D344 on the live login button) is rationed carefully, lighting up only active navigation, selected tabs, player buttons, and primary actions. Everything else is a quiet grayscale hierarchy — #666666 for muted text, #999999 for the lightest labels and placeholders — that lets the green do all the signaling. The result is unmistakably brand-green-on-white: grid-like, efficient, and built for browsing thousands of tracks without visual fatigue. It is the look of a tool that expects you to scan, tap, and keep listening.
+
+## 2. Color Palette & Roles
+
+- **Signature green #00CD3C** — the brand-defining Melon green; primary actions, active nav, selected tabs, player buttons (appears ~11x in the live CSS).
+- **Darker green #00B523** — a deeper green variant used as a companion to the signature green.
+- **Login button green #00D344** — the live-rendered green on the primary login button; a near-twin of #00CD3C.
+- **Near-black #1A1A1A** — heading and primary text color against the white ground.
+- **Muted gray #666666** — default body text color (live body renders rgb(102,102,102)).
+- **Light gray #999999** — the lightest text tier; secondary labels and input placeholder text.
+- **Red accent #DF2607** — a sharp red accent used sparingly.
+- **Ground #FFFFFF** — the white canvas the entire dense layout sits on.
+
+The green is the only saturated color allowed to carry meaning; the reds appear as rare accents, and the rest of the palette is a disciplined grayscale ladder from #1A1A1A down through #666666 to #999999 on white.
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard, with 맑은 고딕 (Malgun Gothic) as the fallback.
+- **Body text:** 12px — the dense default for list rows and metadata; renders in muted gray #666666.
+- **Controls:** 13-14px — interactive controls and inputs sit slightly larger than body for tap targets.
+- **Headings / primary text:** near-black #1A1A1A.
+- **Weights observed:** 400 (regular) on buttons and inputs.
+
+The type system is deliberately small and dense, suiting a content-first streaming UI that must show many rows at once. Color, not size, does most of the hierarchy work — near-black #1A1A1A for what matters, #666666 for supporting text, #999999 for the quietest labels.
+
+## 4. Component Stylings
+
+### Login Button
+
+**Primary (live-rendered green)**
+- Background: #00D344
+- Text: #FFFFFF
+- Border: none
+- Radius: 0px
+- Height: 42px
+- Font: 14px / 400
+- Use: primary login / sign-in action; the sharp-cornered green button that anchors account entry
+
+### Search Input
+
+**Default**
+- Background: transparent
+- Text: #999999
+- Radius: 0px
+- Height: 40px
+- Font: 13px / 400
+- Use: search field; placeholder and text both render in light gray #999999
+
+### Body / List Text
+
+**Default row text**
+- Background: #FFFFFF
+- Text: #666666
+- Border: none
+- Radius: 0px
+- Font: 12px / 400
+- Use: dense chart and list rows; the workhorse text style across the streaming grid
+
+Across components the corners are uniformly square (0px radius), reinforcing the dense, grid-like streaming layout rather than a soft, rounded consumer feel.
+
+## 5. Layout Principles
+
+Melon is built around density. The layout is a content-first grid of packed charts and lists where many rows are visible at once, and the square 0px corners on buttons and inputs make the whole surface read like ruled cells rather than floating cards. White #FFFFFF is the dominant ground, giving the small 12px body text and #666666 metadata room to breathe inside an otherwise tightly packed screen. The green is placed structurally — on active nav, selected tabs, and primary actions — so wayfinding rides on color, not on heavy chrome. The overall principle is utilitarian: maximize the number of songs and controls in view, keep the framing minimal, and let the brand green mark the live, actionable elements.
+
+## 6. Depth & Elevation
+
+Melon's surface is flat by design. With 0px radius on its buttons and inputs and a uniform white #FFFFFF ground, the UI avoids rounded cards and soft floating layers in favor of a dense, grid-like plane. There is no measured shadow or elevation token in the verified data, so depth here is communicated through color and contrast — near-black #1A1A1A and the signature green #00CD3C advancing against the white field — rather than through drop shadows or layered surfaces. The aesthetic is sharp, square, and screen-efficient, treating the page as a single tightly organized sheet.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the ground white (#FFFFFF) and let dense lists and charts fill the screen.
+- Ration the signature green (#00CD3C / live #00D344) for active states and primary actions only.
+- Use square 0px corners on buttons and inputs to preserve the grid-like, streaming-tool feel.
+- Build the text hierarchy from color — #1A1A1A for primary, #666666 for body, #999999 for the quietest labels.
+- Use Pretendard (with 맑은 고딕 fallback) and keep type small: 12px body, 13-14px controls.
+
+### Don't
+- Invent rounded corners or soft cards — the corners are sharp (0px) throughout.
+- Spread the green across large surfaces; it loses its signaling power if it stops being rare.
+- Inflate type sizes; the density depends on small 12-14px text.
+- Introduce the red accent (#DF2607) broadly — keep it as a sparing accent.
+
+## 8. Responsive Behavior
+
+The verified inspection covers the desktop web surface of melon.com, where the design is a dense, multi-column grid of charts and lists with small 12px body text and 40-42px control heights. No mobile breakpoint measurements are present in the verified data, so responsive specifics are described qualitatively: the density-first philosophy — many rows visible, square corners, color-driven wayfinding — is the constant, and any narrower layout would be expected to preserve the small type scale and the rationed green rather than redesign around them. Control heights in the 40-42px range (search input 40px, login button 42px) suggest comfortable tap targets even within the dense frame.
+
+## 9. Agent Prompt Guide
+
+When generating UI in the Melon style, instruct the agent: build on a white #FFFFFF ground with a dense, content-first grid of lists and charts. Use Pretendard (fallback 맑은 고딕) at small sizes — 12px body, 13-14px controls. Set text color by tier: #1A1A1A for headings and primary text, #666666 for body, #999999 for placeholders and the quietest labels. Make all buttons and inputs square (border-radius 0px). Use the signature Melon green only for primary actions and active states — primary button background #00D344 (or source green #00CD3C), white #FFFFFF text, 42px height, 14px/400 font. Search inputs: transparent background, #999999 text and placeholder, 40px height, 13px/400. Keep the red #DF2607 as a rare accent. Avoid rounded cards, drop shadows, and large type — the whole point is a sharp, high-density, green-on-white streaming tool.
+
+## 10. Voice & Tone
+
+Melon's voice is utilitarian and unfussy, matching a tool that exists to get you to the music fast. It is content-first: the product trusts the charts, lists, and track metadata to carry the experience, so the surrounding language stays brief, functional, and direct. Where the brand asserts itself, it does so through the green, not through chatty copy — the tone is efficient and confident, the voice of Korea's dominant streaming service that assumes you came to listen, not to read.
+
+## 11. Brand Narrative
+
+Melon is Korea's dominant music-streaming service, operated by Kakao Entertainment. Its identity is anchored by the signature Melon green — #00CD3C in the source CSS, rendering as a near-twin #00D344 on the live login button — set against an almost entirely white, high-density interface. The narrative is one of utility at scale: thousands of tracks, packed charts, and player controls organized into a sharp, square, grid-like surface where the brand green is rationed to mark the live and actionable. It is a design that says streaming is a daily utility, and that the brand's job is to be fast, dense, and unmistakably green-on-white.
+
+## 12. Principles
+
+- **Density over decoration** — pack charts and lists; show many rows; keep framing minimal.
+- **Green is precious** — reserve the signature green (#00CD3C / #00D344) for active states and primary actions.
+- **Sharp corners** — square 0px radius across components; no soft, rounded consumer look.
+- **Color-driven hierarchy** — #1A1A1A / #666666 / #999999 do the structural work; type stays small.
+- **White ground always** — #FFFFFF is the canvas that makes the green and the dense lists legible.
+- **Content first** — the music and its metadata are the interface; chrome stays out of the way.
+
+## 13. Personas
+
+- **The daily listener** — opens Melon to scan charts and queue tracks; rewarded by density, fast browsing, and clear green active states that show where they are.
+- **The chart watcher** — comes for the rankings and lists; the small 12px rows and #666666 metadata let many entries sit on screen at once.
+- **The quick searcher** — taps the search input (40px, #999999 placeholder) to jump straight to a song; the utilitarian, square UI gets out of the way.
+
+## 14. States
+
+- **Default text:** #666666 body at 12px on white #FFFFFF.
+- **Primary text / headings:** near-black #1A1A1A.
+- **Placeholder / quiet label:** #999999 (search input text and placeholder).
+- **Active / selected (nav, tabs, player):** signature green #00CD3C.
+- **Primary action (login button):** background #00D344, white #FFFFFF text, 42px height.
+- **Accent:** red #DF2607, used sparingly.
+
+Hover, pressed, focus, and disabled state values were not captured in the verified data and are intentionally left undocumented rather than invented.
+
+## 15. Motion & Easing
+
+No motion, transition, or easing values were captured in the verified inspection of melon.com, so none are specified here. Qualitatively, the design's character is static and efficiency-driven — a dense, square, grid-like streaming surface — which implies restrained, functional motion (if any) rather than expressive animation. Any motion added in this style should stay subtle and quick, in keeping with the utilitarian, content-first feel, but no specific durations or curves are claimed because none were measured.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.melon.com (official Melon service homepage, live CSS source), https://tech.kakaoent.com (Kakao Entertainment tech, Melon's operator), https://www.kakaocorp.com/page/service/service/Melon (Kakao Corp official Melon service page)
+**Tier 2 sources:** getdesign.md/melon — NOT LISTED. refero — not listed. Note: live login button renders #00D344, a near-twin of the CSS signature green #00CD3C.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

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.