zugzbot 1.0.21 → 1.0.22

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

@@ -1,289 +0,0 @@
----
-id: grip
-name: "Grip"
-country: KR
-category: ecommerce
-homepage: "https://www.grip.show"
-primary_color: "#eb2b51"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=grip.show&sz=256"
-verified: "2026-06-03"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#eb2b51"
-    hot-pink: "#ff3c78"
-    purple: "#6456dc"
-    canvas: "#0e1011"
-    surface-1: "#17181a"
-    surface-2: "#222327"
-    surface-3: "#404149"
-    surface-light: "#ffffff"
-    surface-subtle: "#f3f3f3"
-    text-primary: "#eff0f4"
-    text-body: "#323232"
-    text-muted: "#999999"
-    text-subdued: "#666666"
-    border: "#e5e5e5"
-    border-subtle: "#d5d5d5"
-    error: "#ef4343"
-  typography:
-    family: { sans: "Pretendard", mono: "Pretendard" }
-    discount: { size: 27, weight: 700, lineHeight: 1.35, use: "Discount price, coupon amount" }
-    confirm:  { size: 18, weight: 500, lineHeight: 1.4, use: "Full-width confirm button" }
-    button:   { size: 16, weight: 600, lineHeight: 1.4, use: "Primary button label" }
-    body:     { size: 15, weight: 400, lineHeight: 1.4, use: "Body, product name" }
-    caption:  { size: 13, weight: 400, lineHeight: 1.4, use: "Caption, meta" }
-    badge:    { size: 12, weight: 500, lineHeight: 1.4, use: "Badge, tag" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, section: 56 }
-  rounded: { sm: 4, md: 6, lg: 8, full: 9999 }
-  components:
-    button-primary: { type: button, bg: "#eb2b51", fg: "#ffffff", radius: "8px", font: "16px / 600", use: "Primary CTA / cart checkout, 50px height" }
-    button-confirm: { type: button, bg: "#eb2b51", fg: "#ffffff", radius: "8px", font: "18px / 500", use: "Full-width drawer-bottom confirm, 56px height" }
-    button-secondary: { type: button, bg: "#323232", fg: "#ffffff", radius: "4px", font: "14px / 500", use: "Dark secondary buy-now inline, 34px height" }
-    button-outline: { type: button, bg: "#ffffff", fg: "#323232", radius: "4px", font: "14px / 500", use: "Outline delete / cancel, 1px #e5e5e5 border, 34px height" }
-    button-discovery: { type: button, bg: "#17181a", fg: "#ffffff", radius: "6px", font: "15px / 600", use: "Shorts / discovery CTA, 40px height" }
-    card-coupon: { type: card, bg: "#fff5f8", fg: "#eb2b51", font: "27px / 700", use: "Active coupon card, rose-red amount" }
-    nudge-urgency: { type: toast, bg: "rgba(47,23,253,0.05)", fg: "#6456dc", radius: "4px", font: "14px / 500", use: "Urgency countdown nudge bar, 38px height" }
-  components_harvested: true
----
-
-# Grip
-
-Korea's first live commerce platform — a mobile-first video shopping app where sellers and buyers connect in real time through livestreams, chat, and exclusive in-broadcast deals.
-
-## 1. Visual Theme & Atmosphere
-
-Grip presents a dark-first, energy-charged visual world tuned for live video commerce. The primary canvas is near-black (#0e1011) — a deliberate cinema-mode choice that keeps product thumbnails and live video feeds visually dominant. Against this dark ground, the brand's signature rose-red (#eb2b51) fires as a call-to-action signal: checkout buttons, coupon highlights, discount badges, and active selection states all pulse in the same hue, creating an unambiguous buy-now urgency. A secondary hot-pink (#ff3c78) appears in borders and icon fills for interactive affordances just below the critical-action tier. The live-streaming avatar ring introduces a vivid gradient (hot-pink to coral #fe0189→#ff583c) that animates with a pulse or ripple when a seller is live — the single most kinetically distinctive element in the UI. A deep purple (#6456dc) serves as a secondary accent for purchase nudges, urgency countdowns, and seller badges, adding a premium-yet-playful counter-note to the red-dominant palette. Typography is set entirely in Pretendard, a Korean variable typeface that reads cleanly at 13–18 px in both dark and light contexts. Component radii cluster at 4–8 px — tight enough to feel structured, not clinical.
-
-## 2. Color Palette & Roles
-
-- **Primary Rose-Red:** `#eb2b51` — primary CTA buttons, checkout actions, coupon card accents, checkbox fill, discount rate text
-- **Primary Hot-Pink:** `#ff3c78` — lighter interactive affordance, border accents, icon fills, secondary interactive states
-- **Secondary Purple:** `#6456dc` — purchase nudge bar background, timer text, seller badge accent
-- **App Background:** `#0e1011` — root app canvas (dark mode default)
-- **Surface Dark-1:** `#17181a` — bottom navigation bar background
-- **Surface Dark-2:** `#222327` — elevated card surfaces in dark context
-- **Surface Dark-3:** `#404149` — tertiary panel fills
-- **Surface Light:** `#ffffff` — light-mode cart, coupon, and checkout pages
-- **Surface Subtle:** `#f3f3f3` — empty state icon containers, light dividers
-- **Text Primary (dark):** `#eff0f4` — body copy on dark backgrounds
-- **Text Body (light):** `#323232` — product name, price, UI text on white
-- **Text Muted:** `#999999` — secondary labels, conditions, disabled states
-- **Text Subdued:** `#666666` — meta info, timestamps
-- **Border Default:** `#e5e5e5` — card outlines, dividers
-- **Border Subtle:** `#d5d5d5` — light separators, outline button strokes
-- **Error / Danger:** `#ef4343` — toast error, out-of-stock labels
-- **Live avatar ring:** `conic-gradient(from -68deg, #ff2b51, #ffae8e)` — broadcaster live ring
-- **Creator avatar ring:** `conic-gradient(from -68deg, #1ec7be, #1dc3ff)` — creator/seller avatar ring
-
-## 3. Typography Rules
-
-- **Typeface:** Pretendard (woff2, variable weight 45–920), with Pretendard Fallback (Arial-based) for system fallback
-- **Body / Product name:** 15px / weight 400–500
-- **Price / Emphasis:** 15px / weight 700; discount price 27px / weight 700
-- **Button primary:** 16px / weight 600
-- **Button confirm full-width:** 18px / weight 500
-- **Caption / Meta:** 13px / weight 400–500
-- **Badge / Tag:** 11–12px / weight 500
-- **Page header height:** 56px (CSS export constant)
-- **Letter spacing:** −0.2 px to −0.5 px on headings and price figures; Korean text benefits from tight negative tracking
-- **Line height:** 135–145% for readable body, tabular-nums variant for prices and timers
-
-## 4. Component Stylings
-
-### Purchase Buttons
-
-**Primary CTA (cart checkout)**
-- Background: `#eb2b51`
-- Text: `#ffffff`
-- Radius: 8px
-- Height: 50px
-- Font: 16px / 600
-
-**Full-Width Confirm (drawer bottom)**
-- Background: `#eb2b51`
-- Text: `#ffffff`
-- Height: 56px
-- Font: 18px / 500
-
-**Dark Secondary (buy now inline)**
-- Background: `#323232`
-- Text: `#ffffff`
-- Radius: 4px
-- Height: 34px
-- Font: 14px / 500
-
-**Outline Delete / Cancel**
-- Background: `#ffffff`
-- Text: `#323232`
-- Border: 1px solid `#e5e5e5`
-- Radius: 4px
-- Height: 34px
-- Font: 14px / 500
-
-**Shorts / Discovery CTA**
-- Background: `#17181a`
-- Text: `#ffffff`
-- Radius: 6px
-- Height: 40px
-- Font: 15px / 600
-
----
-
-### Coupon Card
-
-**Active Coupon**
-- Background: `#ffffff`
-- Background: `#fff5f8`
-- Text (price): `#eb2b51`
-- Font: 27px / 700
-
-**Claimed / Used Coupon**
-- Background: `#ffffff`
-- Border: 5px solid `#f3f3f3`
-- Text: `#999999`
-- Font: 13px / 500
-
----
-
-### Purchase Nudge Bar
-
-**Urgency Countdown**
-- Background: `rgba(47, 23, 253, 0.05)`
-- Text: `#6456dc`
-- Radius: 4px
-- Height: 38px
-- Font: 14px / 500–600
-
----
-**Verified:** 2026-06-03
-**Tier 1 sources:** https://www.grip.show (homepage HTML + CSS bundles via webapp-resource.grip.show/202606020502/_next/static/css/), https://webapp-resource.grip.show/202606020502/_next/static/css/2caceb3098ae7b02.css (main Tailwind utility CSS, 86 KB), https://webapp-resource.grip.show/202606020502/_next/static/css/1f9e9658ee2b291a.css (cart page CSS with button tokens), https://webapp-resource.grip.show/202606020502/_next/static/css/c2bfe78c6e53a384.css (coupon drawer CSS with full-width confirm button), https://gripcorp.co (brand/corp homepage with gradient slogan and propose-button), https://webapp-resource.grip.show/202606020502/_next/static/css/4299887bf9e53336.css (avatar + live ring CSS)
-**Tier 2 sources:** getdesign.md/grip — 0 DESIGN.md files (NOT LISTED). refero — no result found for Grip KR.
-**Conflicts unresolved:** none
-
-## 5. Layout Principles
-
-Grip is a single-column, mobile-only app (max-width 420px on desktop, 100% on mobile). The root `.main` container is fixed to 420px wide on desktop and stacks vertically: page header (56px fixed top), scrollable content, bottom nav (52px + safe-area bottom). The live video view occupies full viewport height (100dvh) with content layered via absolute positioning. Card grids use gap-based flex rows; product thumbnail grids use 109px fixed-width scroll containers. Horizontal scroll (Indiana Scroll) is used for curation rows, avoiding pagination friction.
-
-## 6. Depth & Elevation
-
-The UI relies on background-color contrast rather than drop shadows for layering. Bottom nav (`#17181a`) sits above the dark app canvas (`#0e1011`). Drawers and modals emerge from below (vaul-drawer, bottom-sheet pattern) using the Radix animation system. An `rgba(0,0,0,0.1)` scrim is applied to floating overlays. The live avatar ring uses `z-index:-1` on the after-pseudo for the gradient ring to sit behind the avatar circle, giving a halo effect without a shadow. Product thumbnail borders use `outline: 1px solid rgba(0,0,0,0.05)` with `outline-offset:-1px` to avoid layout shift at 8px radius.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use `#eb2b51` for every primary purchase action — checkout, confirm, coupon claim
-- Present live status with the `#fe0189→#ff583c` animated ring gradient, not a static badge
-- Set prices in 700 weight with tabular-nums to prevent width jitter during countdowns
-- Keep body copy at 15px / 400 on light surfaces for readability at arm's length
-- Use `#6456dc` exclusively for urgency/countdown nudges; don't repurpose it as a general brand color
-- Maintain the 420px max-width constraint in desktop contexts to preserve mobile layout fidelity
-
-### Don't
-- Don't use `#ff3c78` as the primary CTA color — it is the lighter interactive affordance, not the checkout signal
-- Don't add shadows to buttons; elevation is communicated through background contrast alone
-- Don't place live-ring gradients on non-live seller avatars — the animation signals active broadcast
-- Don't exceed 8px border-radius on purchase buttons; 24–31px is reserved for pill tags and avatar-adjacent elements
-- Don't use font weight below 500 for interactive UI text; 400 is reserved for body copy and meta descriptions
-
-## 8. Responsive Behavior
-
-Grip is deliberately non-responsive in the traditional sense — it is a mobile web app. The root `.main` container is fixed at 420px wide and centered on desktop, with `max-width:100%` applied only on actual mobile viewports. At ≤460px the container becomes fluid. The bottom nav respects `env(safe-area-inset-bottom)` for notched devices. The video view layout enforces `min-width:360px` and `min-height:568px` to support older small-screen devices. Desktop visitors receive the 420px centered column; there is no tablet breakpoint.
-
-## 9. Agent Prompt Guide
-
-To produce Grip-consistent UI:
-- Dark canvas: `background #0e1011`, body text `#eff0f4`, Pretendard 15px/400
-- Primary CTA: `background #eb2b51`, white text, 8px radius, 50px height, 16px/600
-- Secondary action: `background #323232`, white text, 4px radius, 34px height, 14px/500
-- Live indicator: animated gradient ring `#fe0189→#ff583c` on circular avatars, 0.81s cubic-bezier(0.167, 0.166, 1, 1)
-- Price display: 700 weight, tabular-nums, discount rate in `#eb2b51`
-- Urgency nudge bar: `rgba(47,23,253,0.05)` background, `#6456dc` text, 4px radius, 38px height
-- Coupon card: `#fff5f8` tint interior, primary amount in `#eb2b51` 27px/700
-- Section dividers: 1px solid `#f3f3f3` (light) or background-color switch on dark
-- No box-shadow on action elements; rely on background contrast for layering
-
-## 10. Voice & Tone
-
-**Tone adjectives:** energetic, direct, community-warm
-
-| Do | Don't |
-|----|-------|
-| Use short imperative phrases ("지금 바로", "한정 특가") | Write formal or legalistic copy |
-| Address the viewer as a participant in a live event | Address them as a faceless online shopper |
-| Create urgency around the live moment ("지금 방송 중") | Use generic marketing hyperbole unrelated to real-time |
-| Celebrate the seller-buyer relationship by name (Gripper) | Depersonalize the seller as "vendor" or "merchant" |
-
-**Voice samples (illustrative):**
-- *"지금 라이브 중! 방송에서만 만나는 특가를 놓치지 마세요."* — live broadcast nudge copy
-- *"그리퍼가 직접 쓰고 추천하는 아이템, 지금 채팅으로 물어보세요."* — seller trust prompt
-- *"1,000만이 선택한 영상 쇼핑, 그립."* — official slogan from og:title meta tag
-
-## 11. Brand Narrative
-
-Grip was founded in July 2018 by Kim Han-na, a former Naver marketer who had worked on video products including Jam Live and Snow. Along with six co-founders also from Naver and Kakao, she set out to build Korea's first mobile live commerce platform with a single animating belief: anyone with a smartphone should be able to sell anything, anytime, to anyone. The company (GripCompany, 주식회사 그립컴퍼니) is headquartered in Pangyo, Seongnam — the heart of Korea's tech ecosystem. In December 2021 Kakao became Grip’s largest shareholder (~50% stake, ₩180B), anchoring its live-commerce expansion.
-
-Rather than replicating home shopping television or social media, Grip defined a third category: personal media commerce. Sellers — called Grippers — broadcast from wherever they are, answer questions live via chat, run in-stream auctions and games, and build loyal fan communities around their product expertise. The platform's patent portfolio reflects this: interactive mechanics like rolling dice, quiz games, and flash-sale countdowns are proprietary differentiators, not commodities.
-
-By 2024 the app had surpassed 10 million downloads and runs approximately 1,300 live shows daily. Grip has expanded internationally (US via gripcorp.co, Japan in planning), and operates a B2B arm — Grip Cloud — that powers branded live commerce for third-party retailers. The mission remains unchanged: collapse the distance between the person who made or curated a product and the person who wants it.
-
-## 12. Principles
-
-1. **Anyone can sell.** The platform is designed so that a single creator with a smartphone has the same surface area as a large retailer. UI implication: seller onboarding, stream tooling, and product listing all default to zero-equipment, zero-staff flows.
-
-2. **The live moment is the product.** Urgency is honest, not manufactured — it comes from the real-time nature of the broadcast. UI implication: live badges, countdown timers, and flash prices must always reflect actual live status; never show live signals on recorded or inactive streams.
-
-3. **Community over catalogue.** Grip's retention mechanism is the seller-fan relationship, not a product recommendation algorithm. UI implication: seller avatars, follow states, and chat surfaces are given equal or greater prominence than product grids.
-
-4. **Mobile-first, always.** The app was born on smartphone screens; desktop is a secondary, framed experience. UI implication: the 420px max-width is a design constraint, not a limitation — all interaction models (swipe, scroll, tap) are thumb-native.
-
-5. **Trust through transparency.** Buyers can ask questions live and see the product in real context. UI implication: product info, seller credentials, and review surfaces should never be buried; the chat overlay must remain accessible throughout a broadcast.
-
-## 13. Personas
-
-*Illustrative Gripper (Seller) — "Minjung, 34, Busan"*
-Runs a small handmade cosmetics business. She goes live three times a week from her kitchen studio, always engaging with regulars by name. She values the chat widget above everything else — it is her storefront window and her customer service desk simultaneously.
-
-*Illustrative Buyer / Fan — "Soyeon, 28, Seoul"*
-Follows 12 Grippers in beauty and fashion. She watches live shows on her commute and keeps the app's push notifications on for her favourite sellers. Price is secondary to trust — she buys because she knows the person selling.
-
-*Illustrative Discovery Shopper — "Junho, 41, Daejeon"*
-Opens Grip from a search ad for a specific product category. He swipes the home feed without following anyone, attracted by the HOT ranking and the real-time viewer count as a social-proof signal. He rarely revisits without a compelling deal.
-
-*Illustrative B2B Brand Manager — "Hyeji, 30, Seoul"*
-Uses Grip Cloud to run branded live events for an apparel label. She cares about the OBS integration, analytics dashboard, and the coupon issuance system — the consumer-facing design language is largely transparent to her.
-
-## 14. States
-
-- **Empty (Cart):** `#f3f3f3` circle container (64px) with a cart icon in `#c2c2c2`; text "담긴 상품이 없어요" in `#999` 15px/400; CTA to browse shorts in `#17181a` background
-- **Loading (Live video):** full-viewport dark canvas `#111` with centered spinner; video cover div with `background-size:contain` for thumbnail placeholder
-- **Error (Video stream):** gradient fallback `linear-gradient(180deg, #111 49.95%, #29235e)`; error text surfaced in white on the gradient
-- **Error (Cart item — sold out / ended):** text label "품절" in `#e83c3b` 15px/700; product thumbnail at 50% opacity via `.disabled`
-- **Success (Coupon claimed):** action panel switches to `#f8f8f8`; icon color moves from `#eb2b51` to `#999`; label reads "사용 완료"
-- **Skeleton (Product thumbnail):** `border-radius:8px; outline:1px solid rgba(0,0,0,0.05)` on the wrapper; image `aspect-ratio:1/1` prevents layout shift
-- **Disabled (Coupon card):** `opacity:0.5` applied to all child elements inside `.coupon > *`
-- **Timer / Urgency:** `font-variant-numeric:tabular-nums; font-feature-settings:"tnum"` on all countdown displays; color `#6456dc`
-
-## 15. Motion & Easing
-
-**Duration scale:**
-- Micro (state feedback): 80ms — bottom nav slide (`transition: all 0.08s linear`)
-- Short (UI transitions): 150ms — Tailwind default (`cubic-bezier(0.4, 0, 0.2, 1)`)
-- Medium (drawer open/close): 200–300ms — Radix accordion/drawer (`ease-out`)
-- Long (avatar live animation): 810ms — pulse-border, ripple-border (`cubic-bezier(0.167, 0.166, 1, 1)`)
-
-**Easing tokens:**
-- Standard: `cubic-bezier(0.4, 0, 0.2, 1)` (ease-in-out, Material-derived)
-- Decelerate (drawer enter): `ease-out`
-- Live avatar: `cubic-bezier(0.167, 0.167, 0.833, 0.833)` for ripple ring
-- Pulse entry: `cubic-bezier(0.167, 0.166, 1, 1)` for avatar scale pulse (4 iterations then infinite on live)
-
-**Rules:**
-- The live-ring animation (ripple-sm: scale 1.02→1.2, opacity 1→0) runs 4× then loops only when `repeat-live-animation` class is applied — indicating an active live session
-- Bottom nav slides out (`translateY(100%)`) with 80ms linear — fast enough to feel native, not abrupt
-- Drawer content uses Vaul/Radix `data-[state=open]` animate-in at 150ms; `data-[state=closed]` at 300ms (asymmetric: opens fast, closes deliberately)
-- No spring physics; all motion is CSS cubic-bezier

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

@@ -1,31 +0,0 @@
-# Hahow — Verification Notes (2026-06-01)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-01
-**Method:** playwright getComputedStyle (live DOM) + raw source-file fetch
-**Sources:**
-- https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- https://hahow.in
-- https://business.hahow.in
-- https://github.com/hahow
-
-### Raw samples
-- Token Primary 500 = #00ccb4 (brand teal) — source: https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- Token Primary 100 = #a3ffe8 — source: https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- Token Primary 400 = #23d9bd — source: https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- Token Primary 800 = #006166 — source: https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- Token Primary 900 = #00444d — source: https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- Token Secondary 500 = #ffb940 — source: https://raw.githubusercontent.com/hahow/hahow-design/master/src/theme.js
-- Live page background rgb(245,247,249) = #F5F7F9 — source: https://hahow.in
-- Live brand teal text rgb(0,204,180) = #00CCB4 — source: https://hahow.in
-- Live teal outline button: 2px #DCF9F3 border, border-radius 8px, height 42px, font 16px/600 — source: https://hahow.in
-- Live tag chip: border-radius 20px, height 33px, font 14px/400 — source: https://hahow.in
-- Live typeface PingFang TC; body 16px; heading 24px/600; primary text #262626 (secondary rgba(0,0,0,0.65)) — source: https://hahow.in
-- Live white card-button: bg #FFFFFF, text #595959, border-radius 8px — source: https://hahow.in
-- Live promotional accents: orange #FA8C16, coral #F65F55 — source: https://hahow.in
-
-## Tier 2 — cross-check
-- getdesign.md/hahow — NOT LISTED. refero — not listed. No Tier 2 corroboration available; all values rest on Tier 1 live inspect + open-source token file.
-
-## Country + regional sources
-- country TW; brand-owned regional sources (≥2 non-Western): https://hahow.in (primary Traditional-Chinese marketplace), https://business.hahow.in (brand-owned business surface), https://github.com/hahow (brand-owned org hosting the hahow-design open-source tokens). These satisfy the TW ≥2 non-Western regional-source requirement.

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

@@ -1,184 +0,0 @@
----
-id: hahow
-name: "Hahow"
-country: TW
-category: education
-homepage: "https://hahow.in"
-primary_color: "#00CCB4"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=hahow.in&sz=128"
-verified: "2026-06-01"
-omd: "0.1"
-ds:
-  name: "hahow-design"
-  url: "https://github.com/hahow/hahow-design"
-  type: system
-  description: "Hahow's open-source design-system theme — Primary/Secondary token scales (Primary 500 #00ccb4)."
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#00ccb4"
-    primary-100: "#a3ffe8"
-    primary-400: "#23d9bd"
-    primary-800: "#006166"
-    primary-900: "#00444d"
-    secondary: "#ffb940"
-    canvas: "#f5f7f9"
-    text: "#262626"
-    promo-orange: "#fa8c16"
-    coral: "#f65f55"
-  typography:
-    family: { sans: "PingFang TC", mono: "PingFang TC" }
-    heading: { size: 24, weight: 600, lineHeight: 1.3, use: "Section headings" }
-    body:    { size: 16, weight: 400, lineHeight: 1.5, use: "Primary body text" }
-    chip:    { size: 14, weight: 400, lineHeight: 1.4, use: "Tag / chip labels" }
-  spacing: { xs: 4, sm: 8, base: 16, lg: 24, xl: 32, section: 48 }
-  rounded: { sm: 8, md: 8, lg: 20, full: 9999 }
-  components:
-    button-primary: { type: button, bg: "transparent", fg: "#00ccb4", radius: "8px", font: "16px / 600", use: "Teal outline primary CTA, 2px #dcf9f3 border, 42px height" }
-    button-card: { type: button, bg: "#ffffff", fg: "#595959", radius: "8px", use: "Neutral white card-level action" }
-    chip-tag: { type: badge, bg: "rgba(0,0,0,0.04)", fg: "rgba(0,0,0,0.65)", radius: "20px", font: "14px / 400", use: "Metadata, category, filter tags, 33px height" }
-  components_harvested: true
----
-
-# Design System Inspiration of Hahow
-
-## 1. Visual Theme & Atmosphere
-
-Hahow (好學校) is Taiwan's leading EdTech course marketplace, and its interface carries the warmth of a place that wants you to keep learning rather than the polish of a place that wants to close a sale. The atmosphere is friendly, approachable, and unmistakably human: a soft gray-blue page canvas of #F5F7F9 lets bright content breathe, while a vivid brand teal of #00CCB4 — drawn directly from Hahow's own open-source design tokens — signals interactivity and energy without ever shouting. Cards and buttons settle on a gentle 8px radius that rounds every hard edge into something inviting, and text sits in calm near-black #262626 for comfortable, sustained reading. Warm promotional accents in orange #FA8C16 and coral #F65F55 punctuate the surface where excitement is earned — a sale, a featured course, a moment worth noticing. Set throughout in PingFang TC, the typography feels native and legible to a Traditional-Chinese audience. The overall effect is encouraging and personable, the opposite of corporate sterility — a learning surface that feels like a good teacher: clear, warm, and on your side.
-
-## 2. Color Palette & Roles
-
-Hahow's color system is anchored by a teal Primary scale published in its open-source `hahow-design` theme, layered over a quiet neutral canvas and lifted by warm promotional accents.
-
-- **Brand / Primary 500** — #00CCB4. The signature teal; interactive emphasis, brand identity, primary action text.
-- **Primary 100** — #A3FFE8. Lightest teal tint for subtle fills and soft backgrounds.
-- **Primary 400** — #23D9BD. A slightly deeper teal step for hover and gradient transitions.
-- **Primary 800** — #006166. Deep teal for high-contrast text or pressed states on teal surfaces.
-- **Primary 900** — #00444D. Darkest teal anchor for the scale.
-- **Secondary 500** — #FFB940. Warm amber accent; complementary highlight to the teal.
-- **Page background** — #F5F7F9. Soft gray-blue canvas behind all content.
-- **Body text** — #262626 (near-black), with secondary text at rgba(0,0,0,0.65).
-- **Promotional orange** — #FA8C16. Energetic accent for sales and featured callouts.
-- **Coral** — #F65F55. Warm secondary promotional accent.
-- **Chip fill** — rgba(0,0,0,0.04). Faint neutral wash for tags and metadata chips.
-
-## 3. Typography Rules
-
-- **Typeface:** PingFang TC across the interface — native, legible Traditional-Chinese rendering.
-- **Body:** 16px, primary text color #262626.
-- **Heading:** 24px at weight 600.
-- **Secondary text:** rgba(0,0,0,0.65) for de-emphasized labels and metadata.
-- **Hierarchy principle:** lean on size and the near-black body color for contrast; reserve teal #00CCB4 for interactive text rather than headings, keeping reading surfaces calm.
-
-## 4. Component Stylings
-
-### Button
-
-**Teal Outline (primary action)**
-- Background: transparent
-- Text: #00CCB4
-- Border: 2px solid #DCF9F3
-- Radius: 8px
-- Padding: not separately verified
-- Height: 42px
-- Font: 16px / 600
-- Use: primary call-to-action on the live hahow.in surface
-
-**White Card Button**
-- Background: #FFFFFF
-- Text: #595959
-- Border: not separately verified
-- Radius: 8px
-- Padding: not separately verified
-- Height: not separately verified
-- Font: not separately verified
-- Use: neutral card-level action sitting on the gray-blue canvas
-
-### Tag Chip
-
-**Default**
-- Background: rgba(0,0,0,0.04)
-- Text: rgba(0,0,0,0.65)
-- Border: none
-- Radius: 20px
-- Padding: not separately verified
-- Height: 33px
-- Font: 14px / 400
-- Use: metadata, category, and filter tags
-
-## 5. Layout Principles
-
-- Content sits on a soft gray-blue #F5F7F9 canvas, letting white cards and bright accents read as the foreground.
-- Rounded geometry is consistent: 8px on cards and buttons, 20px (fully rounded) on tag chips.
-- Generous, calm spacing keeps the marketplace browsable rather than dense — the surface invites scanning across many courses.
-- Teal is used sparingly as an interactive signal, never as a flood, preserving the quiet neutral base.
-
-## 6. Depth & Elevation
-
-Hahow's elevation language is restrained and soft rather than dramatic. White cards (#FFFFFF) lift off the gray-blue #F5F7F9 canvas largely through tonal contrast and rounded 8px corners rather than heavy shadow. The teal outline button uses a 2px solid #DCF9F3 border — a pale teal ring — to define its edge instead of a drop shadow, reinforcing a flat, friendly aesthetic. Depth here is implied by layering light surfaces over the muted background, keeping the interface airy and approachable. (Exact shadow values were not captured in the blob and are intentionally not specified.)
-
-## 7. Do's and Don'ts
-
-### Do
-- Anchor interactive emphasis in the brand teal #00CCB4 from the official tokens.
-- Keep body text in near-black #262626 and secondary text in rgba(0,0,0,0.65) for calm, readable hierarchy.
-- Use the soft #F5F7F9 canvas to let white cards and bright accents stand out.
-- Reserve warm orange #FA8C16 and coral #F65F55 for genuinely promotional moments.
-
-### Don't
-- Flood surfaces with teal — it is a signal, not a background.
-- Sharpen the corners; the 8px (and 20px chip) radii are core to the friendly feel.
-- Introduce a heavy, corporate shadow language that contradicts the flat, warm aesthetic.
-- Substitute a non-native typeface for PingFang TC in Traditional-Chinese contexts.
-
-## 8. Responsive Behavior
-
-The live hahow.in marketplace is a course-browsing surface built to scale from desktop grids to mobile stacks. Cards keep their 8px radius and white #FFFFFF fill across breakpoints, and tag chips stay fully rounded at 20px so metadata remains legible when reflowed. Touch targets hold comfortable heights — the teal outline button at 42px and tag chips at 33px — that translate naturally to mobile tapping. (Specific breakpoint widths were not captured in the blob and are not specified here; the verified pattern is consistent rounding, consistent color roles, and generous tap-friendly sizing across viewports.)
-
-## 9. Agent Prompt Guide
-
-When generating UI in Hahow's style, instruct the agent: "Use a soft gray-blue page background (#F5F7F9) with white (#FFFFFF) content cards at 8px radius. Make the primary action a teal outline button — transparent background, #00CCB4 text, 2px solid #DCF9F3 border, 8px radius, 42px height, 16px/600 PingFang TC. Render tags as fully-rounded chips (20px radius, 33px height) with a rgba(0,0,0,0.04) fill and rgba(0,0,0,0.65) text at 14px/400. Keep body text near-black (#262626) at 16px and headings at 24px/600. Use teal #00CCB4 only for interactive emphasis. Reserve orange #FA8C16 and coral #F65F55 strictly for promotional callouts. Aim for a warm, encouraging, human EdTech tone — friendly, never corporate."
-
-## 10. Voice & Tone
-
-Hahow's voice is encouraging and human — the tone of a supportive teacher and a welcoming community of learners (好學校 literally means "good school"). It is warm and approachable rather than corporate or transactional, celebrating curiosity and the act of learning itself. Microcopy should feel like gentle encouragement: inviting people to start, to keep going, to share what they know. Even promotional moments, signaled by the warm orange and coral accents, carry friendliness over hard-sell urgency.
-
-## 11. Brand Narrative
-
-Hahow built Taiwan's leading EdTech course marketplace on a simple, human premise: everyone has something to learn and something to teach. As 好學校 — "the good school" — it positions itself as an open, encouraging place where knowledge moves between people rather than being handed down from an institution. The visual identity reinforces that story: a bright, friendly teal pulled from its own open-source design system, a soft and unintimidating canvas, rounded approachable shapes, and native Traditional-Chinese typography. Every choice tells the same narrative — learning here is warm, accessible, and on your side.
-
-## 12. Principles
-
-- **Warmth over polish** — feel like a good teacher, not a sales funnel.
-- **Calm canvas, bright signals** — let the soft #F5F7F9 base carry quiet content while teal and warm accents earn attention.
-- **Rounded and approachable** — consistent 8px / 20px radii keep every surface inviting.
-- **Native and legible** — PingFang TC and near-black #262626 text serve a Traditional-Chinese audience comfortably.
-- **Restraint with the brand color** — teal #00CCB4 marks interaction; it is never wallpaper.
-
-## 13. Personas
-
-- **The Curious Learner** — browsing the marketplace for a new skill; needs a calm, scannable surface where featured courses (orange/coral accents) stand out and primary actions (teal outline button) are obvious and inviting.
-- **The Knowledge-Sharing Instructor** — creating and publishing courses; needs the platform to feel encouraging and credible, with friendly rounded components and warm tone that lower the barrier to teaching.
-- **The Returning Member** — coming back to continue learning; relies on consistent color roles and tap-friendly components across devices to pick up quickly.
-
-## 14. States
-
-- **Default action:** teal outline button — transparent background, #00CCB4 text, 2px solid #DCF9F3 border, 8px radius, 42px height.
-- **Neutral / card action:** white card button — #FFFFFF background, #595959 text, 8px radius.
-- **Metadata / tag:** chip — rgba(0,0,0,0.04) fill, rgba(0,0,0,0.65) text, 20px radius, 33px height, 14px/400.
-- **Promotional emphasis:** warm orange #FA8C16 and coral #F65F55 accents for sales and featured callouts.
-- (Hover, pressed, focus, and disabled state values were not captured in the blob and are intentionally not specified; the teal token scale — Primary 400 #23D9BD, Primary 800 #006166 — provides the natural darker steps for any hover/pressed treatment.)
-
-## 15. Motion & Easing
-
-Hahow's motion language was not captured with specific values in the blob, so no durations or easing curves are specified here. In keeping with the brand's warm, approachable, flat aesthetic, transitions should read as gentle and encouraging rather than abrupt — soft enough to match the rounded geometry and calm canvas, with the teal token scale (Primary 400 #23D9BD into Primary 500 #00CCB4) available for smooth interactive color transitions.
-
----
-**Verified:** 2026-06-01
-**Tier 1 sources:** https://hahow.in (live homepage live-DOM inspect), https://business.hahow.in (brand-owned regional business surface), https://github.com/hahow (brand-owned org hosting the open-source design tokens)
-**Tier 2 sources:** getdesign.md/hahow — NOT LISTED. refero — not listed.
-**Conflicts unresolved:** none
-**Proof:** see .verification.md (## Proof block)

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

@@ -1,142 +0,0 @@
-# HashiCorp — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `hashicorp.com/en` (corporate home — IBM Company chrome, Infrastructure Cloud positioning)
-- `hashicorp.com/en/products/terraform` (Terraform product page — product-specific accent)
-
-### Raw observations
-
-**Get started — Hero/Header Primary (HC Blue)**
-- bg `rgb(16, 96, 255)` = **`#1060ff`** (HashiCorp Blue)
-- color `#ffffff`
-- radius **5px**
-- padding 9×15
-- 36px / 16px·500
-- Use: shared Primary CTA across home + Terraform
-
-**Sign up / Sign up for free — Terraform Page Primary (Terraform Purple)**
-- bg `rgb(123, 66, 188)` = **`#7b42bc`** (Terraform Purple — product-specific accent)
-- color `#fff`
-- radius 5px
-- padding 11×19
-- 48px / 16px·500
-- Use: hero Primary on Terraform product page; **Each HashiCorp product has its own accent color**
-
-**Contact us / Talk to us / Meet The Infrastructure Cloud / Learn more — Light Secondary**
-- bg `rgb(250, 250, 250)` = `#fafafa` (Near-White Surface)
-- color `rgb(59, 61, 69)` = `#3b3d45` (HC Charcoal)
-- radius 5px
-- padding 9×15 (compact) / 11×19 (hero)
-- 36px / 48px / 16px·500
-- Use: Secondary CTAs across all surfaces
-
-**Nav Items — Solutions/Products/Pricing/Developers/Resources/Company**
-- bg `#ffffff`
-- color `#3b3d45` (HC Charcoal)
-- radius **4px**
-- padding 8×12
-- 40px / 15.008px·500
-- Use: top-level nav (note 4px vs 5px CTAs — intentional sub-nav distinction)
-
-**Log in — Header Ghost (HC Blue Text)**
-- bg transparent
-- color `rgb(16, 96, 255)` = `#1060ff`
-- radius 0px
-- padding 4×0
-- 34px / 16px·500
-- Use: header utility ghost
-
-### Single-system: 5px CTA / 4px nav + per-product accent
-
-HashiCorp uses **one button geometry with per-product accent**:
-- Shared chrome: `#1060ff` HC Blue Primary, `#fafafa`/`#3b3d45` Light Secondary, all **5px** radius / **500** weight
-- Product-page Primary swaps to product-specific accent: **Terraform `#7b42bc` Purple** (others to verify per product)
-- Two height tiers: 36px (header/inline) / 48px (hero/page-CTA)
-- Nav items use **4px** (1px less than CTAs) for intentional sub-hierarchy distinction
-- Padding: 9×15 (compact) / 11×19 (hero) — proportional
-
-This is a sophisticated multi-product DS pattern — shared chrome with per-product accents, all rooted in the same 5px / 500-weight / Charcoal-text discipline.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/hashicorp` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=HashiCorp` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (hashicorp.com home + terraform) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 terraform | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Shared Primary bg | `#1060ff` HC Blue | `#1060ff` ✓ | n/a | ✓ canonical |
-| Product Primary bg | n/a | `#7b42bc` Terraform Purple | n/a | ✓ per-product accent |
-| Primary radius | 5px | 5px ✓ | n/a | ✓ |
-| Primary padding | 9×15 / 11×19 | 11×19 ✓ | n/a | ✓ contextual |
-| Primary height | 36 / 48 | 48 ✓ | n/a | ✓ |
-| Primary font | 16px·500 | 16px·500 ✓ | n/a | ✓ |
-| Light Secondary | `#fafafa` w/ `#3b3d45` text | `#fafafa` w/ `#3b3d45` ✓ | n/a | ✓ |
-| Nav radius | 4px | 4px ✓ | n/a | ✓ sub-nav distinction |
-
-### Unresolved
-- **None.** Single-system canonical with documented per-product accent system.
-
-### Earlier mistakes reverted
-- Prior footer claimed only "nav `#3b3d45` 4-5px / 15px·500" — captured the navigation chrome but missed the canonical Primary CTA `#1060ff` HC Blue and the per-product accent pattern (Terraform Purple `#7b42bc`). §4 should document both shared CTA + per-product accent system.
-
----
-
-## Components in §4
-
-§4 (prior B3 batch) — needs:
-1. Shared Primary `#1060ff` HC Blue 5px / 36-48px / 500
-2. Light Secondary `#fafafa` / `#3b3d45` text
-3. Per-product accent variants (Terraform Purple `#7b42bc` confirmed; Vault Yellow / Consul Pink / Nomad Green / Boundary Salmon / Packer Blue per HC brand history — to be verified per product surface)
-4. Nav 4px sub-distinction
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- **HashiCorp founded 2012** in San Francisco
-  - Source: [HashiCorp — Wikipedia](https://en.wikipedia.org/wiki/HashiCorp)
-  - Source: [HashiCorp — Origin Story](https://www.hashicorp.com/en/about/origin-story)
-- Founders: **Mitchell Hashimoto** + **Armon Dadgar**
-- **Met 2008 at University of Washington Paul G. Allen School of CS** working on a research project bringing AWS/Azure cloud tech to scientific computing
-  - Source: [Mayfield — HashiCorp Journey](https://www.mayfield.com/founder-stories/the-hashicorp-journey-the-rise-of-a-cloud-powerhouse/)
-- **Hashimoto created Vagrant + Terraform** before/during HashiCorp founding
-- **NASDAQ IPO December 9 2021** ticker **HCP** at **$80/share** (above $68-72 range), **~$13B valuation**
-- **IBM acquisition announced April 24 2024 for $6.4B**; **closed February 27 2025** after regulatory clearance
-  - Source: [HashiCorp — Officially joins IBM family](https://www.hashicorp.com/en/blog/hashicorp-officially-joins-the-ibm-family)
-- **Hashimoto resigned December 2023** ahead of IBM deal
-- Post-HashiCorp: **Ghostty** GPU-accelerated terminal (Dec 2024) + **Vercel board** (March 2026)
-  - Source: [BusinessWire — Vercel + Hashimoto board](https://www.businesswire.com/news/home/20260318957008/en/Vercel-Appoints-Mitchell-Hashimoto-Co-Founder-of-HashiCorp-and-Creator-of-Terraform-to-Board-of-Directors)
-- **Dadgar interview 48hrs after IBM sale** — Logan Bartlett Show ep 102
-
-### Voice samples (live-verified)
-- *"Get started"* — shared Primary <!-- verified: hashicorp.com/en 2026-05 -->
-- *"Sign up"* / *"Sign up for free"* — Terraform Primary (Purple) <!-- verified: hashicorp.com/en/products/terraform -->
-- *"Contact us"* / *"Talk to us"* — Light Secondary <!-- verified: hashicorp.com/en -->
-- *"Meet The Infrastructure Cloud"* — hero secondary <!-- verified: hashicorp.com/en -->
-- *"Learn more"* — feature card CTA <!-- verified: hashicorp.com/en -->
-
-### Existing §10-15 retained from prior augmentation (B3 batch)
-- Voice & Tone — open-source-first / platform-engineering register
-- §11 narrative — UW Allen School origin / IBM acquisition
-- §15 Standard cubic-bezier; focus rings never animate (a11y)
-
----
-
-**Verified-against:**
-- Tier 1: hashicorp.com/en, hashicorp.com/en/products/terraform (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/IPO/IBM: Wikipedia (HashiCorp), HashiCorp Origin Story, Mayfield, BusinessWire, Logan Bartlett Show, HashiCorp blog