zugzbot 1.0.20 → 1.0.22

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

@@ -1,182 +0,0 @@
----
-id: "91app"
-name: "91APP"
-country: TW
-category: ecommerce
-homepage: "https://www.91app.com"
-primary_color: "#061C3D"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=91app.com&sz=128"
-verified: "2026-06-01"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  note: "navy #061C3D is the structural primary (text + headings + primary button); coral #E85040 is the lone action accent, kept rare"
-  colors:
-    primary: "#061C3D"
-    brand: "#061C3D"
-    foreground: "#061C3D"
-    body: "#061C3D"
-    heading: "#061C3D"
-    accent: "#E85040"
-    error: "#CB200E"
-    muted: "#F7F6FB"
-    canvas: "#FFFFFF"
-    on-primary: "#FFFFFF"
-  typography:
-    family: { sans: "Noto Sans TC", fallback: "Helvetica" }
-    hero:   { size: 44, weight: 700, use: "Top-of-page hero heading in structural navy, carries brand authority" }
-    body:   { size: 16, weight: 400, use: "Standard reading text, calm and scannable" }
-    button: { size: 16, weight: 600, use: "Primary / neutral button label" }
-    button-accent: { size: 16, weight: 500, use: "Coral CTA label" }
-  spacing: { sm: 8, base: 16, lg: 24, xl: 32 }
-  rounded: { sm: 3, lg: 16 }
-  shadow:
-    flat: "none — separation via color/fill contrast, no literal shadow stacking"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#061C3D", fg: "#FFFFFF", radius: 16, padding: "48px height", font: "16px/600", use: "dominant action" }
-    button-coral: { type: button, bg: "#E85040", fg: "#FFFFFF", radius: 16, padding: "40px height", font: "16px/500", use: "lone decisive accent, kept rare" }
-    button-neutral: { type: button, bg: "#F7F6FB", fg: "#061C3D", radius: 3, padding: "48px height", font: "16px/600", use: "secondary action" }
-    hero-heading: { type: card, fg: "#061C3D", font: "44px/700 Noto Sans TC", use: "top-of-page authority heading" }
-omd: "0.1"
----
-# Design System Inspiration of 91APP
-
-## 1. Visual Theme & Atmosphere
-
-91APP carries the composure of retail infrastructure built to be trusted at scale — the brand of Taiwan's leading omnichannel OMO (online-merge-offline) commerce SaaS. Its identity rests on a deep structural navy (#061C3D) that anchors text, headings, and the primary call-to-action, giving every screen the gravity of a B2B platform that merchants stake their storefronts on. Against a clean white ground (#FFFFFF), that navy reads as steady and engineered rather than playful. A coral-red accent (#E85040) provides the single point of energy — the action color reserved for moments that should feel decisive. Traditional-Chinese Noto Sans TC sets the type with neutral, legible clarity suited to a Taiwanese merchant audience. The overall atmosphere is one of confident retail infrastructure: orderly, generously rounded at the touch points, and quietly serious.
-
-## 2. Color Palette & Roles
-
-The palette is disciplined and role-driven, with navy as the dominant structural color and coral as the lone action accent.
-
-| Token | Value | Role |
-|-------|-------|------|
-| Structural navy | #061C3D | Body text, headings, primary button background |
-| Action coral | #E85040 | Coral CTA background — the action accent |
-| Red emphasis | #CB200E | Emphasis text, highlight callouts |
-| Neutral fill | #F7F6FB | Neutral / secondary button fill |
-| Ground | #FFFFFF | Page background, text on filled buttons |
-
-Navy (#061C3D, rgb 6,28,61) does the heavy lifting: it is the text color, the heading color, and the fill of the primary button — chosen as the brand's primary color precisely because it carries so much of the interface. Coral (#E85040, rgb 232,80,64) is the deliberate counterpoint, an action accent that should stay rare to keep its decisiveness. Red emphasis (#CB200E) is a hotter red reserved for emphasis text. The neutral fill (#F7F6FB) gives secondary surfaces a soft, near-white lift off the pure-white ground.
-
-## 3. Typography Rules
-
-Type is set in Noto Sans TC (Traditional Chinese), with Helvetica as the fallback — a neutral, highly legible pairing appropriate for a Taiwanese merchant audience. Body copy runs at 16px. Hero headings step up to 44px at weight 700 in structural navy (#061C3D), giving the top of the page clear authority without ornament. The hierarchy is straightforward: large bold navy headings over calm 16px body, letting the content of a commerce platform stay scannable.
-
-- Body: 16px, Noto Sans TC / Helvetica
-- Hero heading: 44px / 700, #061C3D, Noto Sans TC
-
-## 4. Component Stylings
-
-### Primary Button
-
-**Default (navy)**
-- Background: #061C3D
-- Text: #FFFFFF
-- Border: none
-- Radius: 16px
-- Height: 48px
-- Font: 16px / 600
-- Use: Primary call-to-action — the dominant navy action on white ground
-
-### Coral CTA Button
-
-**Default (coral accent)**
-- Background: #E85040
-- Text: #FFFFFF
-- Border: none
-- Radius: 16px
-- Height: 40px
-- Font: 16px / 500
-- Use: The single energetic action accent — reserve for decisive, attention-drawing moments
-
-### Neutral Button
-
-**Default (secondary)**
-- Background: #F7F6FB
-- Text: #061C3D
-- Border: none
-- Radius: 3px
-- Height: 48px
-- Font: 16px / 600
-- Use: Secondary / neutral action on a soft near-white fill
-
-### Hero Heading
-
-**Default**
-- Background: transparent
-- Text: #061C3D
-- Border: none
-- Font: 44px / 700
-- Use: Top-of-page heading in Noto Sans TC carrying brand authority
-
-## 5. Layout Principles
-
-The layout reads as clean retail infrastructure: a white ground (#FFFFFF) gives content room to breathe, navy structure organizes the hierarchy, and the coral accent is placed sparingly so the eye knows exactly where the action is. Generously rounded primary buttons (16px radius) sit as confident, tappable anchors. Secondary surfaces use the neutral fill (#F7F6FB) to separate without hard borders, keeping the page calm and uncluttered. The composition favors order and legibility over decoration — the look of a platform whose job is to make merchants feel secure.
-
-## 6. Depth & Elevation
-
-Depth is handled with restraint. Rather than heavy shadows, separation comes from color and fill: the neutral #F7F6FB surfaces lift gently off the pure-white ground, and the saturated navy and coral buttons stand forward through contrast alone. The generous 16px corner radius on primary actions softens the interface and signals approachability, while the tighter 3px radius on the neutral button reads as a more utilitarian, grounded surface. The overall sense of elevation is flat and modern, leaning on contrast and rounding instead of literal shadow stacking.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use navy #061C3D as the structural backbone — text, headings, and the primary button.
-- Keep coral #E85040 rare, reserved for the single most important action.
-- Set type in Noto Sans TC with Helvetica fallback; body at 16px.
-- Give primary actions the generous 16px radius for an approachable, tappable feel.
-- Lift secondary surfaces with the soft #F7F6FB neutral fill instead of hard borders.
-
-### Don't
-- Spread coral #E85040 across many elements — it loses its decisive force.
-- Put navy text on navy fill or otherwise compromise the navy/white contrast.
-- Mix the red emphasis #CB200E into general body copy; keep it for emphasis.
-- Invent ornament or heavy shadows — the brand reads engineered and calm.
-
-## 8. Responsive Behavior
-
-The brand's button system is sized for touch and scale: a 48px-tall primary button and 48px neutral button give comfortable tap targets, while the 40px coral CTA reads as a slightly more compact accent. With a 16px body size and large 44px hero headings, the hierarchy holds up from desktop down to mobile merchant views. The white ground and soft neutral fills keep content legible across viewport sizes without relying on layout-specific decoration. (Specific breakpoint values are not provided in the source; size and contrast carry the responsive behavior.)
-
-## 9. Agent Prompt Guide
-
-When generating UI in the 91APP style, instruct the agent: build on a white ground (#FFFFFF) with deep navy (#061C3D) as the structural color for body text, headings, and the primary button. Make the primary button navy with white text, 16px radius, 48px height, 16px/600 type. Reserve a single coral (#E85040) action accent — white text, 16px radius, 40px height, 16px/500 — for the most decisive call-to-action only. For secondary actions, use the neutral fill #F7F6FB with navy text, 3px radius, 48px height, 16px/600. Set hero headings at 44px/700 in navy. Use Noto Sans TC (Helvetica fallback), 16px body. Keep the feel calm, engineered, and trustworthy — retail infrastructure, not decoration. Use red emphasis #CB200E only for emphasized text.
-
-## 10. Voice & Tone
-
-The voice is that of trustworthy retail infrastructure — confident, clear, and B2B-grade. It speaks to merchants who are betting their storefronts on the platform, so it favors steadiness and competence over hype. Like the navy-dominant palette, the tone is structural and dependable, with energy reserved for the moments that matter. It is professional Traditional-Chinese-first, addressing a Taiwanese commerce audience directly and practically.
-
-## 11. Brand Narrative
-
-91APP is Taiwan's leading omnichannel retail-commerce SaaS, built around OMO — online-merge-offline. Its visual identity tells that story: a deep-navy structural brand conveys the reliability of infrastructure merchants depend on, while a coral-red action accent on a clean white ground signals the decisive moments of commerce. The Traditional-Chinese Noto Sans typography and generously rounded primary buttons round out a brand that reads as confident, approachable retail infrastructure — serious where it counts, welcoming at the point of action.
-
-## 12. Principles
-
-- Structure first: navy carries text, headings, and the primary action — the brand's backbone.
-- One point of energy: coral is the lone action accent, kept rare to stay decisive.
-- Clarity over ornament: white ground, legible 16px Noto Sans TC, no unnecessary decoration.
-- Approachable touch points: generous 16px rounding on primary actions invites interaction.
-- Trust through restraint: soft neutral fills and flat depth keep the platform calm and credible.
-
-## 13. Personas
-
-- **The Taiwanese merchant** — runs an omnichannel store and needs a platform that feels dependable; reassured by the navy structural brand and clear, legible interface.
-- **The operations lead** — manages day-to-day commerce flows and values the unambiguous hierarchy where coral marks exactly where to act.
-- **The decision-maker evaluating SaaS** — reads the engineered, confident aesthetic as a signal of trustworthy retail infrastructure worth staking a business on.
-
-## 14. States
-
-State styling is expressed through the documented button variants. The primary navy button (#061C3D background, white text, 16px radius, 48px height, 16px/600) is the default decisive action. The coral CTA (#E85040 background, white text, 16px radius, 40px height, 16px/500) marks the single high-energy action state. The neutral button (#F7F6FB fill, navy text, 3px radius, 48px height, 16px/600) covers the calm secondary state. Red emphasis (#CB200E) signals an emphasized or highlighted text state. (Hover, pressed, focus, and disabled values are not provided in the source; derive them by darkening or lightening these base colors while preserving the navy/coral roles.)
-
-## 15. Motion & Easing
-
-Specific motion and easing values are not provided in the source. In keeping with the brand's engineered, trustworthy character, any motion should be restrained and purposeful — calm transitions that reinforce stability rather than draw attention to themselves, with the coral action accent reserved for the moments worth animating.
-
----
-**Verified:** 2026-06-01
-**Tier 1 sources:** https://www.91app.com (live DOM — body text, primary/coral/neutral buttons, hero heading, all hex/px values), https://91app.tech (brand-owned regional engineering/tech source), https://github.com/91APP (brand-owned regional org)
-**Tier 2 sources:** getdesign.md/91app — NOT LISTED. refero — not listed. Note: navy #061C3D is structural/dominant; coral #E85040 is the action accent (brand-color choice: navy chosen as primary as it carries text+headings+primary button).
-**Conflicts unresolved:** none
-**Proof:** see .verification.md (## Proof block)

package/.opencode/oh-my-design/web/references/abema/.verification.md

@@ -1,64 +0,0 @@
-# ABEMA — Verification Notes (2026-06-10)
-
-## Proof — Tier 1 live inspect
-
-**Inspected:** 2026-06-10
-**Method:** playwright getComputedStyle (live DOM) on abema.tv and times.abema.tv, plus token mining of ABEMA's own shipped web-app CSS bundle (`abema.tv/assets/registry.1bbd6d267a32e228541e6.css`, 734,378 bytes, retrieved via web.archive.org snapshot 20251231211016 — see "Outage circumstance" below).
-**Sources:**
-- https://abema.tv/ — live computed style 2026-06-10 (outage-day shell, brand-token dark UI)
-- https://abema.tv/assets/registry.1bbd6d267a32e228541e6.css — ABEMA web app registry CSS (brand-shipped artifact; via web.archive.org/web/20251231211016cs_/)
-- https://times.abema.tv/ — ABEMA TIMES, brand-owned media surface, live computed style 2026-06-10
-
-### Raw samples
-- `https://abema.tv/` (live 2026-06-10) · body · `background-color: rgb(0, 0, 0)` (#000000) · `font-family: CopyRight, Emoji, "Hiragino Sans", "BIZ UDPGothic Alphabet", "BIZ UDGothic", Meiryo, sans-serif` · `font-size: 14px` · `line-height: 21px`
-- `https://abema.tv/` (live) · player mute button "クリックでミュートを解除" · bg `rgba(23, 23, 23, 0.8)` (= --dark-strong-80) · color `rgb(255, 255, 255)` · radius 4px · padding 16px 32px · height 56px
-- `https://abema.tv/` (live) · status links (x.com/ABEMA, help.abema.tv) · color `rgb(221, 170, 0)` = #ddaa00 (--color-primary) · radius 4px · 14px
-- `https://abema.tv/` (live) · surface panels · bg `rgb(33, 33, 33)` (#212121, --dark-basic) ×4 in bg frequency scan; circular controls `rgba(0, 0, 0, 0.6)` radius 48px
-- `https://abema.tv/` (live) · fg frequency: `rgb(255,255,255)` ×35, `rgb(230,230,230)` (#e6e6e6) ×4, `rgb(221,170,0)` ×3
-- archived app SorryPage (web.archive.org/web/20260101005216/https://abema.tv/) · h1 "ABEMAの表示に失敗しました" · color `rgb(230, 230, 230)` (#e6e6e6) · `font-size: 24px` · `font-weight: 700` · information links `rgb(221, 170, 0)` (#ddaa00) 16px
-- registry CSS `:root` (verbatim): `--abema-yellow:#da0; --abema-green:#16deb5; --abema-purple:#a873ff; --payperview-blue:#02d1d6; --dark-strong:#171717; --dark-basic:#212121; --dark-basic-hover:#373737; --light-basic:#e6e6e6; --smoke-basic:#999; --smoke-strong:#767676; --dark-stronger:#0b0b0b`
-- registry CSS `:root` (verbatim): `--color-primary:var(--abema-yellow); --color-primary-hover:#dfb015; --color-accent:#f0163a; --color-accent-hover:#f34461; --color-accent-hover-legacy:#bb122e; --color-coin:#ffc400; --color-green-hover:#44e5c5; --abema-purple-hover:#af7eff; --font-color-link:var(--color-primary); --font-color-link-hover:#c5c5c5; --border-color:#333; --border-color-sub:#555`
-- registry CSS `:root` (verbatim): `--radius:4px; --space:4px; --duration:0.5s; --easing:linear; --fading-duration:0.1s; --button-opacity-hover:0.9; --button-opacity-active:0.7; --button-opacity-disabled:0.4; --content-min-width:724px; --content-max-width:1024px; --content-max-width-for-vod:1280px; --bg-card-placeholder:#1c1c1c; --onload-bg-placeholder:#0b0b0b; --bg-text-box-background:#f5f5f5`
-- registry CSS `:root` font scale (verbatim): `--font-size-title-l:32px; --font-size-title-m:27px; --font-size-title-s:22px; --font-size-xxxxl:28px; --font-size-xxxl:24px; --font-size-l:16px; --font-size-m:14px; --font-size-xs:12px; --font-size-xxs:10px; --font-size-mb-title-l:27px; --font-size-mb-title-m:20px`
-- registry CSS `.com-a-Button` (verbatim): `border-radius:4px; font-size:14px; font-weight:700; height:44px` · `--primary{background-color:#da0;color:#212121}` · `--secondary{background-color:#e6e6e6;color:#212121}` · `--danger{background-color:#f0163a;color:#fff}` · `--dark{background-color:#212121;color:#e6e6e6}` · `--primary-dark{background-color:#212121;color:#da0}` · sizes `--small{font-size:12px;height:32px}` `--large{font-size:16px;height:52px}` `--extra-large{font-size:20px;height:56px}`
-- registry CSS `.com-BroadcastingTag` (verbatim): `background-color:#f0163a; border-radius:4px; height:20px; padding:0 4px; width:60px` · `__text{color:#fff;font-size:12px;font-weight:700}` · `.com-PreBroadcastTag{background-color:hsla(0,0%,9%,.8)}` · `.com-m-NewestLabelOnThumbnail{background-color:#f0163a;font-size:10px;font-weight:700;height:16px}`
-- registry CSS `.com-search-SearchSuggestList` (verbatim): `background-color:#212121; border-radius:4px; box-shadow:0 2px 16px rgba(0,0,0,.2)` · `.com-InputText{height:44px}` `--small{height:36px}` `--search{height:46px}`
-- registry CSS `.com-m-TabList__tab` (verbatim): `border-radius:4px 4px 0 0; height:44px` · `--active{background-color:#212121}` · `.com-RoundTabItem__outline--mobile{border-radius:16px}` · `--focus{background:#e6e6e6;color:#212121}`
-- registry CSS `.com-m-NotificationBlock` (verbatim): `border-radius:4px` · `__notification{background-color:#212121;padding:12px 16px}` · `__label{color:#da0;font-size:16px;font-weight:700}` · `__text{color:#e6e6e6;font-size:16px;font-weight:700}` · `.com-a-Modal__background{background-color:rgba(0,0,0,.7)}` · `.com-a-Checkbox__border{border:1px solid #999;border-radius:2px}` checked `{background-color:#da0;border-color:#da0}`
-- registry CSS frequency: `#e6e6e6` ×491, `#212121` ×203, `#f0163a` ×76, `#171717` ×71, `#da0` (#ddaa00) ×155, `#999` ×297, `border-radius:4px` ×278, `border-radius:50%` ×52, `font-weight:700` ×361 vs `font-weight:400` ×24, `line-height:1.5` ×246
-- `https://times.abema.tv/` (live 2026-06-10) · body bg `rgb(0, 0, 0)` · text `rgb(51, 51, 51)`/white sections · active nav tab bg `rgb(0, 0, 0)` color `rgb(255, 255, 255)` 14px/700 radius `2px 2px 0 0` · search input bg `rgb(245, 245, 245)` (#f5f5f5) radius 6px height 32px · category chips bg `rgb(88, 88, 88)` 14px/700
-
-## Outage circumstance (method note — honesty)
-
-On the inspect date (2026-06-10, evening JST) ABEMA had a publicly reported large-scale outage starting ~18:16 JST (help.abema.tv announcement 「【お詫び】ただいまABEMAにおいて不安定な状況が発生しています」; covered by nlab.itmedia.co.jp). abema.tv served its dark maintenance/SorryPage shell on all routes (`メンテナンス中 | ABEMA`), and the current asset bundles 404'd at origin. Therefore:
-
-- Live inspect was performed on the outage shell (which runs the brand's real token CSS — values matched the registry tokens exactly: #000 canvas, #212121 surfaces, #ddaa00 links, 4px radius, CopyRight font stack).
-- The full app token/component CSS was retrieved from the brand's own shipped artifact `abema.tv/assets/registry.1bbd6d267a32e228541e6.css` via the web.archive.org capture of 2025-12-31 (snapshot of the then-live homepage HTML referenced this exact bundle). All §4 component values and the tokens: block are quoted from this file, not invented.
-- times.abema.tv (brand-owned, unaffected) was live-inspected as the second surface.
-- abema.tv is additionally geo-sensitive for playback outside Japan; the catalog UI could not be re-rendered from this egress during the outage window.
-
-## Conflict matrix
-
-| Field | Tier 1 (live shell + shipped CSS) | getdesign | refero | Resolution |
-|---|---|---|---|---|
-| primary color | #ddaa00 (`--color-primary`, observed live on links) | n/a (NOT_FOUND) | n/a (not listed) | Tier 1 |
-| accent | #f0163a (`--color-accent`, BroadcastingTag) | n/a | n/a | Tier 1 |
-| canvas/surfaces | #000000 / #171717 / #212121 / #373737 | n/a | n/a | Tier 1 |
-| radius | 4px universal (`--radius`, 278 decls) | n/a | n/a | Tier 1 |
-| button primary | bg #ddaa00 / fg #212121 / 44px / 14px 700 | n/a | n/a | Tier 1 |
-
-Tier 2 attempted and unavailable: WebFetch getdesign.md/abema → "No designs found"; getdesign.md/abematv → "No designs found"; playwright styles.refero.design/?q=abema → only fuzzy non-ABEMA results (Abel, Metalab, …), no ABEMA style page. No conflicts to resolve; noted in §4 footer.
-
-## Brand-owned sources
-
-1. **https://abema.tv** — official service (live inspect, outage shell; archived app HTML/CSS bundle is the same brand-shipped artifact).
-2. **https://times.abema.tv** — ABEMA TIMES, official brand-owned media surface (live inspect).
-3. **https://help.abema.tv/hc/ja** — official help center (outage announcement source; Cloudflare-challenged for full computed-style inspect in headless).
-4. **https://cadc.cyberagent.co.jp/2022/program/abema-service-branding-and-creativity/** — operator CyberAgent's developer-conference session on ABEMA branding (「テレビの再発明」, ABEMA BRAND GUIDELINES).
-
-## Philosophy sources (§10–15)
-
-- CADC 2022 ABEMA service-branding session (fetched 2026-06-10): brand concept 「テレビの再発明」, internal brand guidelines, "意思" framing, speakers 佐藤洋介 / 遠藤直人.
-- highlights.jp/project/abematv-branding/ (fetched 2026-06-10): VI design + brand experience design, 「テレビをもう一度発明する」.
-- Voice samples verbatim from: archived document title 「無料動画・話題の作品が楽しめる新しい未来のテレビ」, live player button 「クリックでミュートを解除」, SorryPage 「ABEMAの表示に失敗しました」「申し訳ありません」.
-- Widely documented public facts used without same-turn re-verification: April 2016 AbemaTV launch (CyberAgent × TV Asahi), Susumu Fujita leadership, 2020 ABEMA rebrand, free FIFA World Cup 2022 streaming.