zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/melon/DESIGN.md

@@ -1,179 +0,0 @@
----
-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"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    signature-green: "#00cd3c"
-    green-dark: "#00b523"
-    green-login: "#00d344"
-    text-primary: "#1a1a1a"
-    text-body: "#666666"
-    text-muted: "#999999"
-    red-accent: "#df2607"
-    canvas: "#ffffff"
-  typography:
-    family: { sans: "Pretendard", mono: "Pretendard" }
-    heading: { size: 14, weight: 400, use: "Headings/primary text, near-black #1a1a1a" }
-    control: { size: 13, weight: 400, use: "Interactive controls and inputs" }
-    body:    { size: 12, weight: 400, use: "Dense list rows and metadata, muted gray" }
-  spacing: { xs: 2, sm: 4, md: 8, base: 12, lg: 16, xl: 24, xxl: 32, section: 48 }
-  rounded: { sm: 0, md: 0, lg: 0, full: 9999 }
-  shadow:
-    none: "none"
-  components:
-    login-button: { type: button, bg: "#00d344", fg: "#ffffff", radius: 0, font: "14px/400", use: "Primary login, sharp-cornered green" }
-    search-input: { type: input, bg: "#ffffff", fg: "#999999", radius: 0, font: "13px/400", use: "Search field, light-gray text" }
-    list-row: { type: listItem, bg: "#ffffff", fg: "#666666", radius: 0, font: "12px/400", use: "Dense chart/list row text" }
-  components_harvested: true
----
-
-# 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/.opencode/oh-my-design/web/references/mercari/.verification.md

@@ -1,155 +0,0 @@
-# Mercari — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `jp.mercari.com/` (consumer JP marketplace home — メルカリ 日本最大のフリマサービス)
-- `jp.mercari.com/search?keyword=iphone` (search results — filter chip toolbar revealed)
-
-### Raw observations
-
-**コンテンツにスキップ — Skip-Nav A11y (Mercari Red Primary)**
-- bg `rgb(255, 51, 63)` = **`#ff333f`** (Mercari Red — official brand red)
-- color `#ffffff`
-- radius **4px**
-- padding 11×15
-- 45px / 15px·**700** (BOLD)
-- Use: A11y skip-link, also documents the canonical Primary geometry
-
-**Shop Now — Banner CTA (US Promo)**
-- bg `#ffffff`
-- color `rgb(0, 149, 238)` = `#0095ee` (Bright Blue — US-locale accent for cross-border promo)
-- radius 4px
-- padding 8×12
-- 33px / 12px·700
-- Use: cross-border US promo banner CTA
-
-**ログイン / 会員登録 — Header Outline**
-- bg `#ffffff`
-- color `rgb(51, 51, 51)` = **`#333333`** (Mercari Charcoal)
-- radius 4px
-- padding 8px (square)
-- 36px / 14px·400
-- Use: header utility (login/signup)
-
-**おすすめ — Active Category Tab**
-- bg `#ffffff`
-- color `#ff333f` Mercari Red
-- radius 0px
-- padding 0×24
-- 43px / 14px·**700**
-- Use: active category tab in browse rail
-
-**マイリスト / 本・雑誌・漫画 / etc — Inactive Category Tabs**
-- bg `#ffffff`
-- color `rgb(102, 102, 102)` = `#666666` (Charcoal Mid)
-- radius 0px
-- padding 0×24
-- 43px / 14px·700
-- Use: inactive category tabs
-
-**本体 / 14 — Search Filter Chips (search page)**
-- bg `#ffffff`
-- color `#333333` Mercari Charcoal
-- radius **18px** (full pill — half of 36px height)
-- padding 4×8
-- 36px / 14px·400
-- Use: search filter chips on /search
-
-### Single-system: 4px Mercari Red Primary + 18px filter pills
-
-Mercari uses a **disciplined three-tier radius system**:
-- **Primary CTA**: `#ff333f` Mercari Red 4px / 11×15 / 45px / 15px·**700** (BOLD register matching karrot/freee East-Asian convention)
-- **Outline + Header utility**: white 4px / 36px / 14px·400 + Charcoal text `#333333`
-- **Search filter chips**: 18px full pill / 4×8 / 36px / 14px·400 (lighter weight, sub-CTA hierarchy)
-- **Category tabs**: 0px text-only / 14px·**700** (active-tab indicator color shift to Mercari Red)
-- US-locale promo banner uses **Bright Blue `#0095ee`** as a contextual accent (cross-border surfaces only — not the canonical brand red)
-
-This dual-color usage (Mercari Red for JP, Bright Blue for US-promo) reflects Mercari's bicultural positioning: Japan-first brand identity + dedicated US-locale accent for the 2014-launched US arm.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/mercari` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Mercari` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (jp.mercari.com home + /search) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 /search | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | `#ff333f` Mercari Red | `#ff333f` ✓ | n/a | ✓ canonical |
-| Primary radius | 4px | 4px ✓ | n/a | ✓ |
-| Primary padding | 11×15 | 11×15 ✓ | n/a | ✓ |
-| Primary height | 45px | 45px ✓ | n/a | ✓ |
-| Primary font | 15px·**700** | 15px·700 ✓ | n/a | ✓ BOLD |
-| Outline | `#fff` 4px / `#333` text | `#fff` ✓ | n/a | ✓ |
-| Filter pill | n/a | 18px / 4×8 / 36px / 14px·400 | n/a | ✓ |
-| Category tab | 0px / 14px·700 + active `#ff333f` | n/a | n/a | ✓ |
-| US promo accent | `#0095ee` (cross-border) | n/a | n/a | ✓ contextual |
-
-### Unresolved
-- **None.** Single-system canonical (4px Mercari Red Primary + 18px filter pills + 0px category tabs).
-
-### Earlier mistakes reverted
-- Prior footer was already accurate ("Mercari Red `#ff333f` 4px / 11×15 / 45px / 15px·700"). This pass adds:
-  1. **18px filter chip** on search surface (sub-tier)
-  2. **Bright Blue `#0095ee`** US-locale promo accent (was missing)
-  3. Category tab pattern with active-tab Red color shift
-
----
-
-## Components in §4
-
-§4 (prior B4 batch) — needs:
-1. Mercari Red Primary `#ff333f` 4px / 45px / 15px·**700** (already documented but should add weight emphasis)
-2. **Search filter chip** 18px / 36px / 14px·400 white-on-Charcoal-text
-3. **Category tab** 0px / 14px·700 with active-state color shift
-4. **US-locale promo accent** Bright Blue `#0095ee` (cross-border-only)
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts (already cited in §11)
-- **Mercari founded February 2013** in Tokyo
-  - Source: [Mercari — Wikipedia](https://en.wikipedia.org/wiki/Mercari)
-- Founder: **Shintaro Yamada (山田進太郎)** — born **Seto, Aichi Prefecture**; **Waseda University** mathematics graduate
-  - Source: [Shintaro Yamada — Wikipedia](https://en.wikipedia.org/wiki/Shintaro_Yamada_(businessman))
-- **Pre-Mercari**: founded gaming company **Unoh** 2001 → **acquired by Zynga 2010**
-- **Resale shopping app released July 2013** in Japan after Feb 2013 incorporation
-- **US expansion 2014** + **UK expansion 2016**
-- **Japan's first tech unicorn (>$1B) by 2016**
-- **Tokyo Stock Exchange IPO June 2018** — raised **>$1.2B**, made Yamada **Japan's newest billionaire**
-  - Source: [The Japan Times — Mercari IPO Yamada billionaire 2018-06-11](https://www.japantimes.co.jp/news/2018/06/11/business/corporate-business/mercaris-top-range-ipo-set-make-founder-shintaro-yamada-new-japanese-billionaire/)
-- **U.S. operations first profitable** fiscal-year ending **June 30 2025**
-- **Adjacent divisions**: Merpay (2019 payments), Mercoin (2023 crypto)
-- **Founding premise**: "circulate all forms of value to unleash the potential in all people" — *circulate* is the consistent verb across all divisions
-  - Source: [About Mercari — corporate](https://about.mercari.com/en/about/)
-- 50M+ downloads, 350K daily listings (claim in base DESIGN.md §1, retained from 2026-04 extraction)
-
-### Voice samples (live-verified)
-- *"コンテンツにスキップ"* — A11y skip-link / canonical Primary <!-- verified: jp.mercari.com 2026-05 -->
-- *"ログイン"* / *"会員登録"* — header utility <!-- verified: jp.mercari.com -->
-- *"Shop Now"* — US-locale promo Banner <!-- verified: jp.mercari.com -->
-- *"おすすめ"* / *"マイリスト"* / *"ゲーム・おもちゃ・グッズ"* / *"本・雑誌・漫画"* — category tabs <!-- verified: jp.mercari.com -->
-- *"本体"* / *"14"* — search filter chips <!-- verified: jp.mercari.com/search -->
-
-### Existing §10-15 retained from prior augmentation (B4 batch)
-- Voice & Tone — *circulate*-first verb, finite Mercari Red signal
-- §11 narrative — Yamada/Unoh/Zynga lineage + 2018 IPO + US/UK expansion
-- §12 Principles — semantic-token-first DS (681 `:root` vars), Mercari Red as finite attention, mobile-first listing flow
-
----
-
-**Verified-against:**
-- Tier 1: jp.mercari.com/, jp.mercari.com/search?keyword=iphone (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/IPO: Wikipedia (Shintaro Yamada, Mercari), Japan Times (2018-06 IPO), Bloomberg, Crunchbase, BoF 500, Mercari Leadership page