oh-my-design-cli 0.1.0

package/references/mercari/DESIGN.md

@@ -0,0 +1,294 @@
+# Design System Inspiration of Mercari
+
+## 1. Visual Theme & Atmosphere
+
+Mercari is Japan's largest C2C marketplace (50M+ downloads, 350K daily listings) and its design system is a textbook example of **mature semantic token architecture**. The production site at `jp.mercari.com` exposes **681 CSS custom properties on `:root`**, organized into the well-named `--alias-color-*` namespace: `--alias-color-background-{role}-{state}`, `--alias-color-text-{role}-{state}`, `--alias-color-border-{role}-{state}`, `--alias-color-icon-{role}-{state}`, `--alias-color-overlay-*`. This isn't internal documentation — it's the actual design system surfaced at runtime, ready to read directly from any production page.
+
+The brand color is the famous **Mercari Red** (`#ff333f`) — vivid, attention-grabbing, used as the `attention` semantic role for badges, error states, danger actions, and the iconic price-tag aesthetic. Around it sits a balanced palette: accent blue (`#0095ee`), success green (`#0aa466`), decorative yellow (`#ffb818`). Text hierarchy uses dark gray (`#333333` primary, `#666666` secondary) on a pure white surface (`#ffffff`), with a soft secondary background (`#f5f5f5`) for grouped sections.
+
+Typography is **system-stack with Japanese-first fallbacks**: `Helvetica Neue, Arial, Hiragino Kaku Gothic ProN Custom, Hiragino Sans Custom, Meiryo Custom, sans-serif`. The "Custom" suffix on the Hiragino/Meiryo fonts indicates Mercari's deployment of optically-tuned variants for their production app — same font families, but adjusted spacing/hinting for marketplace UI. Buttons use **weight 700** for primary CTAs at a tight `4px` radius, while body text holds at weight 400.
+
+**Key Characteristics:**
+- **681 semantic CSS custom properties** exposed on `:root` — the public design system surface
+- **Mercari Red** (`#ff333f`) as the `attention` semantic — used for badges, error/danger states, sale prices, the brand mark
+- Japanese-first font stack: `Helvetica Neue → Arial → Hiragino Kaku Gothic ProN Custom → Hiragino Sans Custom → Meiryo Custom`
+- Fixed `4px border-radius` on buttons and cards — sharp, commerce-functional
+- Weight 700 for primary CTAs; weight 400 for body and secondary controls
+- Three-tier color naming: `alias-color-{property}-{role}-{state}` (e.g., `--alias-color-background-attention-default`)
+- 1440px max page width with `--grid-layout-gutter: 24px` and `--grid-layout-page-padding-horizontal: 36px`
+- 4dp spacing micro-scale (`--bnfXaU: 6px`, `--exLgvR: 8px`, `--fwPfWM: 8px`, etc.) with named alias tokens
+- High-density product grid with circular brand thumbnails (`border-radius: 50%`) for category navigation
+- Multi-tier z-index system: dialog 1400, modal 1400, snackbar 1500, tooltip 1600
+
+## 2. Color Palette & Roles
+
+All values verified live from `:root` CSS custom properties on `jp.mercari.com`.
+
+### Brand / Attention (the Mercari Red family)
+- **Mercari Red** (`#ff333f`): `--alias-color-background-attention-default`, `--alias-color-text-attention-default`. The signature brand red. Used for danger actions, sale price emphasis, the brand mark.
+- **Red Highlight** (`#ff6574`): `--alias-color-background-attention-highlight`, `--alias-color-border-attention-highlight`. Lighter variant for hover states.
+- **Red Active** (`#e32b36`): `--alias-color-background-attention-active`, `--alias-color-border-attention-active`. Pressed state.
+- **Red Thin** (`#fdf1f3`): `--alias-color-background-attentionThin-default`. Very light pink for subtle background emphasis (e.g., error message bg).
+- **Red Thin Highlight** (`#ffdcdf`): `--alias-color-background-attentionThin-highlight`.
+
+### Accent (Mercari Blue)
+- **Accent Blue** (`#0095ee`): `--alias-color-background-accent-default`, `--alias-color-text-accent-default`, `--alias-color-icon-accent-default`. Links, info badges, accent CTAs.
+- **Accent Blue Highlight** (`#63c5ff`): `--alias-color-background-accent-highlight`.
+- **Accent Blue Active** (`#0073cc`): `--alias-color-background-accent-active`, `--alias-color-text-accent-active`.
+- **Link Default** (`#0073cc`): `--alias-color-text-link-default`, `--alias-color-icon-link-default`.
+- **Link Highlight** (`#30b2ff`): `--alias-color-text-link-highlight`.
+- **Link Active** (`#0056ab`): `--alias-color-text-link-active`.
+- **Accent Thin** (`#e8f8ff`): `--alias-color-background-accentThin-default`. Light blue notification bg.
+
+### Success
+- **Success Green** (`#0aa466`): `--alias-color-text-success-default`, `--alias-color-icon-success-default`, `--alias-color-border-success-default`.
+- **Success Highlight** (`#0fbf67`): `--alias-color-text-success-highlight`, `--alias-color-icon-success-highlight`.
+- **Success Active** (`#078962`): `--alias-color-text-success-active`, `--alias-color-icon-success-active`.
+- **Success Thin** (`#e4ffec`): `--alias-color-background-success-default`.
+- **Success Thin Highlight** (`#cdfbd2`): `--alias-color-background-success-highlight`.
+
+### Decorative (Yellow)
+- **Decorative Yellow** (`#ffb818`): `--alias-color-icon-decorativeYellow-default`. Reviews, ratings, premium markers.
+- **Decorative Yellow Highlight** (`#ffdc74`): Lighter yellow for hover.
+- **Decorative Yellow Active** (`#db9611`): Darker amber for pressed.
+
+### Text (5-tier scale)
+- **Primary** (`#333333`): `--alias-color-text-primary-default`. Default body text and headlines.
+- **Primary Highlight** (`#999999`): `--alias-color-text-primary-highlight`.
+- **Primary Active** (`#222222`): `--alias-color-text-primary-active`.
+- **Secondary** (`#666666`): `--alias-color-text-secondary-default`. Captions, metadata.
+- **Secondary Highlight** (`#999999`): `--alias-color-text-secondary-highlight`.
+- **Secondary Active** (`#4c4c4c`): `--alias-color-text-secondary-active`.
+- **Disabled** (`#cccccc`): `--alias-color-text-disabled-default`.
+- **Placeholder** (`#999999`): `--alias-color-text-placeholder-default`.
+- **Inverse** (`#ffffff`): `--alias-color-text-inverse-default`. White text on dark surfaces.
+
+### Background / Surface (5-tier scale)
+- **Primary** (`#ffffff`): `--alias-color-background-primary-default`. Default page bg.
+- **Primary Active** (`#f5f5f5`): `--alias-color-background-primary-active`. Pressed/hover state for white-bg controls.
+- **Primary Highlight** (`#f5f5f5`): `--alias-color-background-primary-highlight`.
+- **Secondary** (`#f5f5f5`): `--alias-color-background-secondary-default`. Grouped section bg.
+- **Secondary Highlight** (`#e5e5e5`): `--alias-color-background-secondary-highlight`.
+- **Tertiary** (`#333333`): `--alias-color-background-tertiary-default`. Dark surfaces (e.g., snackbar contrast).
+- **Disabled** (`#cccccc`): `--alias-color-background-disabled-default`.
+
+### Border / Separator
+- **Primary** (`#cccccc`): `--alias-color-border-primary-default`. Standard component border.
+- **Primary Highlight** (`#e5e5e5`): `--alias-color-border-primary-highlight`.
+- **Primary Active** (`#999999`): `--alias-color-border-primary-active`.
+- **Secondary** (`#333333`): `--alias-color-border-secondary-default`. Strong dividers.
+- **Disabled** (`#cccccc`): `--alias-color-border-disabled-default`.
+
+### Overlay (modal backdrops)
+- **Weak** (`rgba(34,34,34,0.2)`): `--alias-color-overlay-weak`.
+- **Middle** (`rgba(34,34,34,0.4)`): `--alias-color-overlay-middle`.
+- **Mid Strong** (`rgba(34,34,34,0.6)`): `--alias-color-overlay-midStrong`.
+- **Strong** (`rgba(34,34,34,0.8)`): `--alias-color-overlay-strong`.
+- **Inverse Weak** (`rgba(255,255,255,0.2)`): `--alias-color-overlay-inverseWeak`. White overlay on dark surface.
+
+### Icon (separate role from text — important for accessibility)
+- **Primary** (`#333333`): `--alias-color-icon-primary-default`.
+- **Secondary** (`#cccccc`): `--alias-color-icon-secondary-default`.
+- **Tertiary** (`#666666`): `--alias-color-icon-tertiary-default`.
+- **Inverse** (`#ffffff`): `--alias-color-icon-inverse-default`.
+
+### System (static)
+- **Static White** (`#ffffff`): `--alias-color-system-staticWhite-default`.
+- **Static Black** (`#000000`): `--alias-color-system-staticBlack-default`.
+- **Static Clear** (`rgba(255,255,255,0)`): `--alias-color-system-staticClear-default`.
+
+## 3. Typography Rules
+
+### Font Stack (verified live)
+```
+"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN Custom", "Hiragino Sans Custom", "Meiryo Custom", sans-serif
+```
+
+For non-Japanese locales the secondary stack adds Traditional Chinese support:
+```
+Helvetica Neue, Arial, "PingFang TC Custom", "Noto Sans TC Custom", "Microsoft JhengHei", "Hiragino Kaku Gothic ProN Custom", "Hiragino Sans Custom", "Meiryo Custom", sans-serif
+```
+
+The "Custom" suffix indicates Mercari runs optically-tuned variants of these system fonts in production — same families, adjusted spacing for marketplace UI density.
+
+### Weights
+- **700**: Primary CTAs, prices, badges, "Shop Now" hero CTAs, language toggles.
+- **400**: Default body, login/signup buttons, navigation links, secondary CTAs.
+
+Verified: primary attention CTAs (e.g., "コンテンツにスキップ" skip link) use weight 700 with bg `#ff333f` and `4px` radius. Secondary actions (login, signup, language) use weight 400.
+
+### Size Scale
+- **Base body**: `15px` (verified `bodySize`)
+- **Heading scale** is application-defined (homepage uses `15-20px` for H1/H2 with weight 700)
+- Mobile sizes step down via `--typography-*-font-size-mobile` tokens
+
+### Conventions
+- **No letter-spacing tweaks** — system defaults trusted.
+- **Default line-height ~1.4** (estimated from rendered metrics).
+- **Uppercase reserved for the "MERCARI" wordmark only.**
+
+## 4. Component Stylings
+
+### Buttons (verified across variants)
+**Primary attention CTA (red)**:
+- bg `#ff333f`, text `#ffffff`, `border-radius: 4px`, `padding: 11px 15px`, `font-weight: 700`
+
+**Accent CTA (blue, e.g., "Shop Now")**:
+- bg `#ffffff`, text `#0095ee`, `border-radius: 4px`, `padding: 8px 12px`, `font-weight: 700`
+
+**Login / Signup (secondary, neutral)**:
+- bg `#ffffff`, text `#333333`, `border-radius: 4px`, `padding: 8px`, `font-weight: 400`
+
+**Icon button**:
+- bg `transparent`, color `#000000` or `#333333`, `border-radius: 4px`, `padding: 4px`, `font-weight: 400`
+
+**Language toggle**:
+- bg `transparent`, text `#333333`, `border-radius: 4px`, `padding: 8px 16px`, `font-weight: 700`
+
+### Cards (Product Card, Brand Card)
+- White bg (`--alias-color-background-primary-default`)
+- Subtle `1px solid #e0e0e0` border or no border (image-led cards)
+- Brand thumbnails: `border-radius: 50%` (circular) — distinctive Mercari pattern for category navigation
+- Image fills top, title + price below
+- Price emphasis: weight 700, often in `#ff333f` (Mercari Red) for sale prices
+
+### Search Input
+- Full-width bar at top of page, `bg: #f5f5f5` (secondary surface), `border-radius: 4px`, dark gray placeholder `#999999`
+- Camera search icon + magnifier icon inside the input on right
+
+### Navigation (top header)
+- White sticky bg, height ~50-64px
+- Mercari wordmark + heart logo on left
+- Search bar centered
+- ログイン (Login), 会員登録 (Signup), notification bell, language toggle (日本語) on right
+- Tabs row below: おすすめ, マイリスト, ゲーム, etc. — horizontal scroll on mobile
+
+### Chips / Tabs
+- Underline-driven active indicator (red underline `#ff333f` for active tab)
+- Inactive tabs: text `#333333` weight 400
+- Active tab: text `#ff333f` (or `#222222`) weight 700 with `2px` red underline
+
+### Snackbar / Toast
+- Dark bg (`--alias-color-background-tertiary-default: #333333`)
+- White text (`--alias-color-text-inverse-default: #ffffff`)
+- Z-index `--mer-z-index-snackbar: 1500`
+
+### Modal / Dialog
+- White surface, `border-radius: 8px`
+- Backdrop: `--alias-color-overlay-strong: rgba(34,34,34,0.8)`
+- Z-index `--mer-z-index-modal: 1400`
+
+## 5. Layout Principles
+
+### Page Structure
+- Max width: `1440px` (`--bqHLTv`, `--gIsGsE`)
+- Grid layout page padding: top `40px` (`--grid-layout-page-padding-top`), bottom `64px` (`--grid-layout-page-padding-bottom`), horizontal `36px` (`--grid-layout-page-padding-horizontal`)
+- Grid gutter: `24px` (`--grid-layout-gutter`)
+- Inner inset: `16px` (`--grid-layout-inset`)
+
+### Spacing Tokens (semantic aliases)
+Mercari uses Panda CSS-generated hashed token names alongside semantic aliases. Common values from CSS:
+- `4px`, `6px`, `8px`, `12px`, `16px`, `20px`, `24px`, `28px`, `32px`, `36px`, `40px`, `44px`, `48px`, `56px`, `64px`, `80px`, `96px`, `128px`, `164px`
+
+This is a 4dp baseline scale extended with named tokens.
+
+### Density
+Mercari is **commerce-density** — tight product grids with minimal card chrome, image-led visual hierarchy. The 6-column product grid on homepage uses `~190-240px` card widths with `12-16px` gutters.
+
+## 6. Depth & Elevation
+
+Mercari has explicit shadow tokens for floating UI:
+
+- **Card lift** (subtle): `0px 2px 4px 0px rgba(0,0,0,.2)` (`--ljPKsT`)
+- **Tooltip / popover**: `0px 4px 8px 0px rgba(0,0,0,.2)` (`--coocrY`)
+- **Modal / dropdown**: `0px 8px 10px 0px rgba(0,0,0,.2)` (`--jcKRRc`)
+- **Strong overlay**: `0px 0px 16px 0px rgba(0,0,0,.2)` (`--gQVqIQ`)
+
+### Z-Index Hierarchy (explicit named tokens)
+- Menu: `1100` (`--mer-z-index-menu`)
+- Navigation top: `1200` (`--mer-z-index-navigation-top`)
+- Navigation bottom: `1200` (`--mer-z-index-navigation-bottom`)
+- Autocomplete: `1300` (`--mer-z-index-autocomplete`)
+- Dialog: `1400` (`--mer-z-index-dialog`)
+- Modal: `1400` (`--mer-z-index-modal`)
+- Side sheet: `1400` (`--mer-z-index-side-sheet`)
+- Information popup: `1400` (`--mer-z-index-information-popup`)
+- Action sheet: `1400` (`--mer-z-index-action-sheet`)
+- Snackbar: `1500` (`--mer-z-index-snackbar`)
+- Tooltip: `1600` (`--mer-z-index-tooltip`)
+
+### Animation
+- Easing curves: `cubic-bezier(0.65, 0, 0.35, 1)` (sheets), `cubic-bezier(0.33, 1, 0.68, 1)` (snackbars/dialogs)
+- Standard duration: `0.25s`
+- Loading spinner: `1.25s` 8-step rotation
+
+## 7. Do's and Don'ts
+
+- **DO** use the `--alias-color-*` semantic tokens. The 681 variables cover virtually every UI surface — never hardcode hex values when an alias exists.
+- **DON'T** invent new color values. Mercari's palette is exhaustive; if you can't find an alias, use the closest one.
+- **DO** reserve **Mercari Red** (`#ff333f`) for the `attention` semantic — sale prices, danger actions, the brand mark, error states.
+- **DON'T** use red for general "primary" CTAs that aren't attention-grabbing. Mercari's primary actions are often blue-accent (`#0095ee`) or neutral, not red.
+- **DO** use weight 700 for primary CTAs and prices. Weight 400 for navigation, secondary actions, body.
+- **DON'T** use weight 500 or 600 — they're not part of Mercari's typography rhythm.
+- **DO** keep `border-radius: 4px` on buttons and cards. Mercari's commerce voice is sharp and functional.
+- **DON'T** use pill-shaped or large-radius buttons — that breaks the marketplace density aesthetic.
+- **DO** apply circular thumbnails (`border-radius: 50%`) to brand/category icons in navigation. It's a distinctive Mercari pattern.
+- **DON'T** use shadows on flat product cards — let the white card on `#f5f5f5` secondary bg provide separation.
+- **DO** use the locale-aware font stack with Hiragino/Meiryo "Custom" variants. The optical tuning matters for Japanese readability.
+- **DON'T** load custom web fonts. Mercari's audience is mobile-first across slow connections; system fonts respect that.
+- **DO** use the explicit named z-index tokens (`--mer-z-index-*`) — Mercari's stacking order is deliberate.
+- **DON'T** use arbitrary z-index values like `9999` — that breaks the layered system.
+
+## 8. Responsive Behavior
+
+### Breakpoints (inferred from `--typography-*-font-size-mobile` tokens and `--vbMobileBoundaryWidth`-style patterns)
+| Width | Behavior |
+|---|---|
+| Desktop `>1440px` | Centered max-width container, full grid |
+| Desktop `1024–1440px` | 6-column product grid, full nav |
+| Tablet `768–1024px` | 4-column product grid, condensed nav |
+| Mobile `<768px` | 2-column grid, hamburger nav, sticky bottom navigation |
+
+### Touch & Mobile
+- Mobile bottom navigation: tab bar with icon + label
+- Form heights: small `36px`, medium ~`48px`, large ~`56px` (estimated from spacing tokens)
+- Touch targets: minimum `44px` per Apple HIG conventions
+
+### Image Behavior
+- Product images: square aspect ratio, `4px` corner radius (matches button/card scheme)
+- Brand thumbnails: circular (`50%` radius)
+- Lazy-load via Next.js Image equivalent
+- Placeholder skeleton uses `--color-shimmer-bg` / `--color-shimmer-fg` pattern
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- **Mercari Red** (attention, sale, brand): `#ff333f` (`--alias-color-background-attention-default`)
+- Accent Blue (links, info): `#0095ee`
+- Success Green: `#0aa466`
+- Decorative Yellow (ratings): `#ffb818`
+- Primary text: `#333333`
+- Secondary text: `#666666`
+- Page bg: `#ffffff`
+- Secondary bg: `#f5f5f5`
+- Border default: `#cccccc`
+- Inverse text: `#ffffff` (on dark surfaces)
+
+### Example Component Prompts
+- "Create a Mercari-style attention CTA: bg `#ff333f`, white text, `border-radius: 4px`, `padding: 11px 15px`, `font-weight: 700`. Hover: bg darkens to `#ff6574`. Active: `#e32b36`. Use this for danger actions, sale CTAs, the brand-mark button — never for generic 'primary' actions (those use accent blue)."
+- "Build a Mercari product card: white bg, no border or `1px solid #e0e0e0`, `4px` radius. Image fills top 70% in `4px` rounded square. Title in 14px weight 400 `#333333` (2-line clamp), price below in 16px weight 700 `#333333` for normal price OR `#ff333f` for sale price. Optional sale badge in top-left corner using `#ff333f` bg + white text + 2px radius."
+- "Design a Mercari brand thumbnail (category icon): circular `border-radius: 50%`, ~64-80px diameter, white bg with `1px solid #f5f5f5` border, brand image centered. Below: brand name in 12px weight 400 `#333333`, max 1 line ellipsis."
+- "Create a Mercari search bar: full-width, bg `#f5f5f5` (secondary surface), `border-radius: 4px`, padding 12-16px, placeholder `#999999`. Right side: camera icon + magnifier icon, both `#666666`. On focus: bg shifts to white, border becomes `1px solid #cccccc`."
+- "Build a Mercari snackbar: bg `#333333` (`--alias-color-background-tertiary-default`), white text, `border-radius: 4px`, `padding: 12px 16px`, fixed at bottom with z-index 1500. Slides in via `cubic-bezier(0.33, 1, 0.68, 1)` over `0.25s`. Auto-dismiss after 3-4s."
+
+### Iteration Guide
+1. **Always reference `--alias-color-*` tokens, not raw hex**. Mercari's 681 vars are the canonical source.
+2. **Mercari Red (`#ff333f`) is the `attention` role** — destructive, sale-emphasis, brand mark. Not a default primary.
+3. **`border-radius: 4px`** is the workhorse. Cards, buttons, badges. Brand thumbnails get `50%` (circular).
+4. **Weight 700 for prices and primary CTAs**, weight 400 for everything else. No middle weights.
+5. **Use the locale-aware font stack with Hiragino/Meiryo "Custom" variants**. Optical tuning matters.
+6. **Z-index uses named tokens** (`--mer-z-index-*`) — never arbitrary numbers.
+7. **Animation easing `cubic-bezier(0.65, 0, 0.35, 1)` for sheets**, `cubic-bezier(0.33, 1, 0.68, 1)` for snackbars/dialogs. Duration `0.25s`.
+8. **Surface contrast** (`#ffffff` cards on `#f5f5f5` page bg) handles separation — minimal shadow needed on flat layouts.
+9. **Body text `#333333`, secondary `#666666`, tertiary `#999999`** — three-tier text hierarchy across the entire system.
+10. **Page padding 36px horizontal, 40px top, 64px bottom**, with `24px` gutter — the layout grid is explicit.

package/references/mercari/README.md

@@ -0,0 +1,12 @@
+# Mercari Inspired Design System
+
+[DESIGN.md](./DESIGN.md) extracted from the public [Mercari](https://jp.mercari.com) production site, which **exposes 681 semantic CSS custom properties on `:root`** (the `--alias-color-*` namespace). Tokens were extracted directly via Playwright MCP at 1440px viewport on 2026-04-17. Mercari Engineering also publishes extensive design system writeups on Medium and their tech blog. See [_research.md](./_research.md) for source detail and confidence per item.
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `DESIGN.md` | Complete design system documentation (9 sections) |
+| `_research.md` | Sources used, extraction methodology, and confidence per item |
+
+Use [DESIGN.md](./DESIGN.md) as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mercari design language — Japan's largest C2C marketplace with Mercari Red (`#ff333f`) as the `attention` semantic, comprehensive `--alias-color-*` token system, Japanese-first font stack with Hiragino "Custom" variants, sharp `4px` button radii, and explicit z-index hierarchy (1100-1600 named layers).

package/references/mercari/_research.md

@@ -0,0 +1,77 @@
+# Research Sources for Mercari
+
+추출 일자: 2026-04-17
+스킬: `omd:add-reference` (5-tier methodology)
+입력 URL: `https://jp.mercari.com`
+
+## Tier 1 — Official Design System
+
+**Status: EFFECTIVELY FOUND via runtime token exposure (681 CSS variables on `:root`)**
+
+Mercari does not host a public documentation site comparable to Material Design, but the production app **exposes 681 semantic CSS custom properties on `:root`**, organized into a consistent `--alias-color-{property}-{role}-{state}` namespace. Extracted via `getComputedStyle(document.documentElement)` using Playwright MCP. This is functionally equivalent to a published design tokens file.
+
+Token namespaces discovered:
+- `--alias-color-background-{role}-{state}` — surface tokens (primary, secondary, tertiary, attention, attentionThin, accent, accentThin, success, disabled)
+- `--alias-color-text-{role}-{state}` — foreground tokens (primary, secondary, accent, attention, success, disabled, placeholder, link, inverse, hint)
+- `--alias-color-border-{role}-{state}` — divider system
+- `--alias-color-icon-{role}-{state}` — icon foreground
+- `--alias-color-overlay-{strength}` — modal backdrops (weak/middle/midStrong/strong + inverse variants)
+- `--alias-color-system-static{Tone}-default` — fixed white/black/clear (theme-independent)
+- `--mer-z-index-{layer}` — explicit z-index hierarchy (1100-1600)
+- `--grid-layout-*` — page padding, gutter, inset
+- `--component-*` — per-component overrides (button, radio, avatar, skeleton, etc.)
+- `--typography-{role}-{property}` and `--fonts-{role}-{property}` — type scale (mostly hashed token names from Panda CSS, but semantic aliases also present)
+
+Additional public sources:
+- [Mercari Engineering blog — design system tag](https://engineering.mercari.com/en/blog/tag/design-system/) — multiple posts on DS architecture
+- [GitHub: mercari/fractal](https://github.com/mercari/fractal) — open-source UI patterns library
+- [Building Mercari's Design System (Medium)](https://medium.com/mercari-engineering/building-mercaris-design-system-b6789043053d)
+- [The Story Behind Mercari Design System Rebuild (2025)](https://engineering.mercari.com/en/blog/entry/20250624-the-story-behind-mercari-design-system-rebuild/)
+
+## Tier 2 — Brand / Press Kit
+
+Not investigated separately; runtime tokens were sufficient.
+
+## Tier 3 — Engineering / Design Blog
+
+[engineering.mercari.com/en/blog/tag/design-system](https://engineering.mercari.com/en/blog/tag/design-system/) — extensive English-language coverage of Mercari Design System architecture and rebuild rationale. Pulled context but not specific token values.
+
+## Tier 4 — Live Site Recon
+
+**Method**: Playwright MCP at viewport 1440×900 on `https://jp.mercari.com/`.
+
+### Verified at runtime
+- Body bg: `rgb(255, 255, 255)` = `#ffffff` (matches `--alias-color-background-primary-default`)
+- Body text: `rgb(51, 51, 51)` = `#333333` (matches `--alias-color-text-primary-default`)
+- Body font: `Helvetica Neue, Arial, "Hiragino Kaku Gothic ProN Custom", "Hiragino Sans Custom", "Meiryo Custom", sans-serif`
+- Body size: `15px`
+- 681 `:root` CSS custom properties enumerated
+- Sample buttons confirm:
+  - Attention CTA: bg `#ff333f`, white text, `4px` radius, padding `11px 15px`, weight 700
+  - Accent CTA (Shop Now): bg `#ffffff`, text `#0095ee`, `4px` radius, weight 700
+  - Login/Signup: bg `#ffffff`, text `#333333`, `4px` radius, weight 400
+
+Screenshot saved: `_research/home-1440px.png`
+
+## Confidence
+
+### High Confidence (extracted directly from `:root` CSS variables)
+- All `--alias-color-*` values in §2
+- Z-index hierarchy (`--mer-z-index-*`) in §6
+- Grid layout values (`--grid-layout-*`) in §5
+- Verified live: body bg/text/font, button variants
+
+### Medium Confidence
+- Hue family interpretations (e.g., "yellow is for ratings/reviews") — inferred from token names, not verified per-component
+- Animation easing curves — extracted from CSS but specific component bindings not enumerated
+- Spacing scale tokens — extracted as values but specific semantic uses inferred
+
+### Inferred (verify before relying on)
+- "Mercari Red is exclusively for attention/danger" — token naming supports this; product-level usage not exhaustively verified
+- Mobile breakpoints — inferred from presence of `--typography-*-font-size-mobile` tokens; exact px values not extracted
+
+## Notes
+- Mercari's design system uses **Panda CSS** (the `--made-with-panda: "🐼"` token confirms it). Token names are hashed in production but semantic aliases (`--alias-color-*`) provide a stable layer.
+- The "Custom" suffix on Hiragino/Meiryo fonts indicates Mercari deploys optically-tuned variants — same families, adjusted spacing.
+- Mercari is a textbook example of mature semantic token architecture for a Japanese-market commerce platform; the system is internal but exposed on `:root` for direct consumption.
+- This reference may drift if Mercari ships a token rename. Re-running `omd:add-reference https://jp.mercari.com` periodically captures updates.

package/references/minimax/DESIGN.md

@@ -0,0 +1,257 @@
+# Design System Inspiration of MiniMax
+
+## 1. Visual Theme & Atmosphere
+
+MiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.
+
+The typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.
+
+What makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a "gallery of AI capabilities" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.
+
+**Key Characteristics:**
+- White-dominant layout with colorful product card accents
+- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)
+- Pill buttons (9999px radius) for primary navigation and CTAs
+- Generous rounded cards (20px–24px radius) for product showcases
+- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light)
+- Brand pink (`#ea5ec1`) as secondary accent
+- Near-black text (`#222222`, `#18181b`) on white backgrounds
+- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth
+- Dark footer section (`#181e25`) with product/company links
+
+## 2. Color Palette & Roles
+
+### Brand Primary
+- **Brand Blue** (`#1456f0`): `--brand-6`, primary brand identity color
+- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents
+- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent
+
+### Blue Scale (Primary)
+- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds
+- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights
+- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions
+- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states
+- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states
+- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis
+
+### Text Colors
+- **Near Black** (`#222222`): `--col-text00`, primary text
+- **Dark** (`#18181b`): Button text, headings
+- **Charcoal** (`#181e25`): Dark surface text, footer background
+- **Dark Gray** (`#45515e`): `--col-text04`, secondary text
+- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels
+- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text
+
+### Surface & Background
+- **Pure White** (`#ffffff`): `--col-bg13`, primary background
+- **Light Gray** (`#f0f0f0`): Secondary button backgrounds
+- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay
+- **Border Light** (`#f2f3f5`): Subtle section dividers
+- **Border Gray** (`#e5e7eb`): Component borders
+
+### Semantic
+- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds
+
+### Shadows
+- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow
+- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow
+- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow
+- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow
+- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
+- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
+- **Mid-tier**: `Poppins`
+- **Data/Technical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |
+| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |
+| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |
+| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |
+| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |
+| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |
+| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |
+| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |
+| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |
+| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |
+| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |
+| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |
+| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |
+| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |
+
+### Principles
+- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.
+- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).
+- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.
+- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Pill Primary Dark**
+- Background: `#181e25`
+- Text: `#ffffff`
+- Padding: 11px 20px
+- Radius: 8px
+- Use: Primary CTA ("Get Started", "Learn More")
+
+**Pill Nav**
+- Background: `rgba(0, 0, 0, 0.05)` (subtle tint)
+- Text: `#18181b`
+- Radius: 9999px (full pill)
+- Use: Navigation tabs, filter toggles
+
+**Pill White**
+- Background: `#ffffff`
+- Text: `rgba(24, 30, 37, 0.8)`
+- Radius: 9999px
+- Opacity: 0.5 (default state)
+- Use: Secondary nav, inactive tabs
+
+**Secondary Light**
+- Background: `#f0f0f0`
+- Text: `#333333`
+- Padding: 11px 20px
+- Radius: 8px
+- Use: Secondary actions
+
+### Product Cards
+- Background: Vibrant gradients (pink/purple/orange/blue)
+- Radius: 20px–24px (generous rounding)
+- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)
+- Content: Product name, model version, descriptive text
+- Each card has its own color palette matching the product identity
+
+### AI Product Cards (Matrix)
+- Background: white with subtle shadow
+- Radius: 13px–16px
+- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`
+- Icon/illustration centered above product name
+- Product name in DM Sans 14–16px weight 500
+
+### Links
+- **Primary**: `#18181b` or `#181e25`, underline on dark text
+- **Secondary**: `#8e8e93`, muted for less emphasis
+- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections
+
+### Navigation
+- Clean horizontal nav on white background
+- MiniMax logo left-aligned (red accent in logo)
+- DM Sans 14px weight 500 for nav items
+- Pill-shaped active indicators (9999px radius)
+- "Login" text link, minimal right-side actions
+- Sticky header behavior
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px
+
+### Grid & Container
+- Max content width centered on page
+- Product card grids: horizontal scroll or 3–4 column layout
+- Full-width white sections with contained content
+- Dark footer at full-width
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, stacked cards |
+| Tablet | 768–1024px | 2-column grids |
+| Desktop | >1024px | Full layout, horizontal card scrolls |
+
+### Whitespace Philosophy
+- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.
+- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct "chapters" of content.
+- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.
+
+### Border Radius Scale
+- Minimal (4px): Small tags, micro badges
+- Standard (8px): Buttons, small cards
+- Comfortable (11px–13px): Medium cards, panels
+- Generous (16px–20px): Large product cards
+- Large (22px–24px): Hero product cards, major containers
+- Pill (30px–32px): Badge pills, rounded panels
+- Full (9999px): Buttons, nav tabs
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | White background, text blocks |
+| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers |
+| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |
+| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |
+| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |
+
+**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use white as the dominant background — let product cards provide the color
+- Apply pill radius (9999px) for navigation tabs and toggle buttons
+- Use generous border radius (20px–24px) for product showcase cards
+- Employ the purple-tinted shadow for featured/hero product cards
+- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only
+- Use Outfit for display headings, DM Sans for everything functional
+- Maintain the universal 1.50 line-height across body text
+- Let colorful product illustrations/gradients serve as the primary visual interest
+
+### Don't
+- Don't add colored backgrounds to main content sections — white is structural
+- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core
+- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only
+- Don't mix more than one display font per section (Outfit OR Poppins, not both)
+- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text
+- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint
+- Don't use Roboto for headings — it's the data/technical context font only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, stacked product cards, hamburger nav |
+| Tablet | 768–1024px | 2-column product grids, condensed spacing |
+| Desktop | >1024px | Full horizontal card layouts, expanded spacing |
+
+### Collapsing Strategy
+- Hero: 80px → responsive scaling to ~40px on mobile
+- Product card grid: horizontal scroll → 2-column → single column stacked
+- Navigation: horizontal → hamburger menu
+- Footer: multi-column → stacked sections
+- Spacing: 64–80px gaps → 32–40px on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: `#ffffff` (primary), `#181e25` (dark/footer)
+- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)
+- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)
+- Brand Pink: `#ea5ec1` (accent only)
+- Borders: `#e5e7eb`, `#f2f3f5`
+
+### Example Component Prompts
+- "Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text)."
+- "Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area."
+- "Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned."
+- "Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500."
+- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout."
+
+### Iteration Guide
+1. Start with white — color comes from product cards and illustrations only
+2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons
+3. Purple-tinted shadows for featured cards, neutral shadows for everything else
+4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only
+5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable
+6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements