zugzbot 1.0.21 → 1.0.22

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

@@ -1,26 +0,0 @@
-# velog — 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://velog.io
-- https://github.com/velog-io/velog
-- https://github.com/velopert/velog-client
-- https://raw.githubusercontent.com/velopert/velog-client/master/src/lib/styles/themes.ts
-- https://raw.githubusercontent.com/velopert/velog-client/master/src/lib/styles/palette.ts
-
-### Raw samples
-- themes.ts: themedPalette primary1 #12B886 — https://raw.githubusercontent.com/velopert/velog-client/master/src/lib/styles/themes.ts
-- themes.ts: themedPalette primary2 #20C997, destructive1 #FF6B6B, text1 #212529, bg_page1 #F8F9FA — https://raw.githubusercontent.com/velopert/velog-client/master/src/lib/styles/themes.ts
-- palette.ts: teal scale teal0 #F3FFFB → teal9 #087F5B, with teal6 #12B886 (brand/primary) — https://raw.githubusercontent.com/velopert/velog-client/master/src/lib/styles/palette.ts
-- palette.ts: gray scale gray0 #F8F9FA → gray9 #212529, red5 #ff6b6b — https://raw.githubusercontent.com/velopert/velog-client/master/src/lib/styles/palette.ts
-- live velog.io: body background rgb(248,249,250) = #F8F9FA; -apple-system / system-ui at 16px — https://velog.io
-- live velog.io: login button background rgb(33,37,41) = #212529, text #FFFFFF, border-radius 16px, height 32px, font 16px/700 (dark pill) — https://velog.io
-- live velog.io: brand teal #12B886 is the primary-action / write-button color (buttonColorMap) — https://velog.io
-
-## Tier 2 — cross-check
-- getdesign.md/velog — NOT LISTED. refero — not listed (dev-blog SaaS absent). No Tier 2 catalog entry available; all values sourced from Tier 1 live inspect + open-source token files.
-
-## Country + regional sources
-- country KR; brand-owned / first-party regional sources (>=2 non-Western): https://velog.io (live KR developer-blogging platform, brand surface), https://github.com/velog-io/velog (velog's own open-source production frontend, MIT, tokens in src/lib/styles), https://github.com/velopert/velog-client (velopert / Minjun Kim's source repo — palette.ts + themes.ts token scales).

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

@@ -1,196 +0,0 @@
----
-id: "velog"
-name: "velog"
-country: KR
-category: developer-tools
-homepage: "https://velog.io"
-primary_color: "#12B886"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=velog.io&sz=128"
-verified: "2026-06-01"
-omd: "0.1"
-ds:
-  name: velog (open source)
-  url: "https://github.com/velog-io/velog"
-  type: system
-  description: velog's production frontend is fully open-source (MIT); its design tokens live in src/lib/styles (themes.ts + palette.ts), built on the Open Color palette.
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#12b886"
-    primary-alt: "#20c997"
-    destructive: "#ff6b6b"
-    text: "#212529"
-    body: "#495057"
-    muted: "#868e96"
-    canvas: "#f8f9fa"
-    surface: "#ffffff"
-    border: "#e9ecef"
-    border-strong: "#dee2e6"
-  typography:
-    family: { sans: "system-ui", mono: "ui-monospace" }
-    body:  { size: 16, weight: 400, use: "Body copy, reading surface" }
-    login: { size: 16, weight: 700, use: "Login pill label" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
-  shadow:
-    none: "none"
-  components:
-    button-login: { type: button, bg: "#212529", fg: "#ffffff", radius: 16, font: "16px/700", use: "Dark sign-in pill, top-right header, h32" }
-    button-write: { type: button, bg: "#12b886", fg: "#ffffff", use: "Brand teal primary-action — compose a post" }
-    header: { type: card, bg: "#ffffff", fg: "#212529", font: "16px", use: "Top navigation surface" }
-    page: { type: card, bg: "#f8f9fa", fg: "#212529", font: "16px", use: "Soft-gray reading canvas framing white blocks" }
-  components_harvested: true
----
-# Design System Inspiration of velog
-
-## 1. Visual Theme & Atmosphere
-
-velog is a Korean developer-blogging platform built by velopert (Minjun Kim), and its surface is unmistakably reading-first: calm, minimal, and content-forward, with prose given room to breathe rather than competing with chrome. The palette is literally the Open Color system — a clean teal brand scale running from the near-white teal0 #F3FFFB up to the deep teal9 #087F5B, paired with a full neutral gray scale from gray0 #F8F9FA to gray9 #212529. The atmosphere is editorial and quiet: a soft gray page background (#F8F9FA) holds white content surfaces, dark near-black text (#212529) carries the writing, and the brand teal (#12B886) appears sparingly as the signal color for action. Nothing shouts; the teal is a confident accent reserved for the write button and primary moments rather than a wash across the page. The result feels engineered for long-form technical reading — high legibility, generous neutrality, and a single decisive brand hue that tells you exactly where to click.
-
-## 2. Color Palette & Roles
-velog's color system is the Open Color palette, surfaced through velog-client's `palette.ts` (raw scales) and `themes.ts` (semantic `themedPalette` tokens). The teal scale is the brand spine and the gray scale carries structure and text; red appears only for destructive intent.
-
-**Brand / Teal scale**
-- teal0: `#F3FFFB`
-- teal1: `#C3FAE8`
-- teal2: `#96F2D7`
-- teal3: `#63E6BE`
-- teal4: `#38D9A9`
-- teal5: `#20C997` (themedPalette primary2)
-- teal6: `#12B886` (BRAND / primary — themedPalette primary1)
-- teal7: `#0CA678`
-- teal8: `#099268`
-- teal9: `#087F5B`
-
-**Neutral / Gray scale**
-- gray0: `#F8F9FA` (page background — bg_page1)
-- gray1: `#F1F3F5`
-- gray2: `#E9ECEF`
-- gray3: `#DEE2E6`
-- gray4: `#CED4DA`
-- gray5: `#ADB5BD`
-- gray6: `#868E96`
-- gray7: `#495057`
-- gray8: `#343A40`
-- gray9: `#212529` (primary text — text1)
-
-**Semantic roles (themedPalette)**
-- Primary: `#12B886` (primary1)
-- Primary alt: `#20C997` (primary2)
-- Destructive: `#FF6B6B` (destructive1 / red5)
-- Text: `#212529` (text1)
-- Page background: `#F8F9FA` (bg_page1)
-
-Role guidance: teal6 #12B886 is the single primary-action color (the write button); the gray scale does all structural and typographic work (page #F8F9FA, text #212529); red5 #FF6B6B is reserved strictly for destructive actions. The teal is an accent, not a fill — use it where action lives, not as background.
-
-## 3. Typography Rules
-velog uses a native system font stack rather than a custom typeface, which keeps the reading surface fast and OS-consistent. Body copy renders through the system UI stack (-apple-system / system-ui) at a 16px base. The primary text color is gray9 #212529 — a near-black that delivers strong contrast against the gray0 #F8F9FA page and white content surfaces without the harshness of pure #000.
-
-- Font family: system stack (-apple-system / system-ui)
-- Body size: 16px
-- Primary text color: #212529 (gray9 / text1)
-
-The intent is editorial neutrality: let the writer's content set the tone while the system font and a single dark text color hold legibility steady across platforms.
-
-## 4. Component Stylings
-
-### Login button (header)
-
-**Default**
-- Background: #212529
-- Text: #FFFFFF
-- Border: none
-- Radius: 16px
-- Height: 32px
-- Font: 16px / 700
-- Use: dark pill in the top-right of the header for sign-in / sign-up entry
-
-### Write button (primary action)
-
-**Default**
-- Background: #12B886
-- Text: #FFFFFF
-- Border: none
-- Use: the brand teal primary-action button (buttonColorMap) — the single decisive call-to-action for composing a post
-
-### Header bar
-
-**Default**
-- Background: #FFFFFF
-- Text: #212529
-- Font: 16px (system stack)
-- Use: top navigation surface sitting on the gray0 page, holding brand and the dark login pill
-
-### Page surface
-
-**Default**
-- Background: #F8F9FA
-- Text: #212529
-- Font: 16px (system stack)
-- Use: the soft-gray reading canvas (bg_page1) that frames white content blocks
-
-## 5. Layout Principles
-velog is structured as a reading surface first. A soft gray page background (gray0 #F8F9FA) acts as the canvas, white surfaces (the header #FFFFFF and content blocks) sit on top, and near-black text (#212529) carries the writing. The layout logic is qualitative and editorial: maximize legibility and whitespace, keep chrome minimal, and let long-form technical content lead. Action is concentrated rather than scattered — the dark login pill anchors the header's top-right, and the teal write button is the single bright signal in an otherwise neutral field.
-
-## 6. Depth & Elevation
-velog's depth language is restrained and flat — elevation comes from value contrast, not heavy shadow. The gray0 #F8F9FA page sits one step back from the white (#FFFFFF) header and content surfaces, so the layering reads through tone alone. The dark login pill (#212529, radius 16px) is the heaviest visual object in the header, gaining presence from its near-black fill and rounded form rather than from a drop shadow. The overall effect is calm and tactile-but-quiet: surfaces are distinguished by the gray-to-white step, and the teal accent provides the only chromatic lift.
-
-## 7. Do's and Don'ts
-
-### Do
-- Reserve teal #12B886 for the primary action (the write button) — it is a signal, not a background wash.
-- Use the gray scale for all structure and text: page #F8F9FA, surfaces #FFFFFF, text #212529.
-- Keep the dark login pill at radius 16px and height 32px as documented.
-- Default to the system font stack (-apple-system / system-ui) at 16px for body.
-
-### Don't
-- Use red — #FF6B6B (destructive1) is reserved strictly for destructive actions.
-- Introduce pure black for text; the system's near-black is #212529.
-- Spread teal across large fills; it loses its role as the single action color.
-- Add heavy shadows — depth here is carried by the gray-to-white value step.
-
-## 8. Responsive Behavior
-The blob does not carry measured breakpoint, grid, or container values for velog, so responsive behavior is described qualitatively rather than with invented numbers. The surface is content-forward and reading-first, which favors a single legible column of prose that stays comfortable across viewport widths. The header holds the brand and the dark login pill (height 32px, radius 16px); the teal write button remains the primary action target at any size. Maintain the gray0 #F8F9FA page background and #FFFFFF surfaces across breakpoints so the editorial value contrast is preserved on both desktop and mobile.
-
-## 9. Agent Prompt Guide
-When generating UI in velog's style, instruct the agent: "Build a calm, reading-first developer-blog surface. Use a soft gray page background #F8F9FA (gray0) with white #FFFFFF surfaces and near-black text #212529 (gray9). Use the system font stack (-apple-system / system-ui) at 16px for body. Make teal #12B886 the single primary-action color — apply it only to the write/primary button, never as a large fill. Render the sign-in control as a dark pill: background #212529, white text, border-radius 16px, height 32px, font 16px/700. Reserve #FF6B6B strictly for destructive actions. Keep depth flat: layer surfaces by the gray-to-white value step rather than shadows. Lean on the Open Color teal scale (teal0 #F3FFFB through teal9 #087F5B) and gray scale (gray0 #F8F9FA through gray9 #212529) for any tints or states."
-
-## 10. Voice & Tone
-velog's voice is that of a quiet, capable tool that gets out of the writer's way. It is editorial and engineer-minded: plain, precise, and unhurried, trusting the developer's content to lead. There is no marketing flourish in the surface — the tone matches the visual restraint, favoring clarity over persuasion. The single teal accent is the closest thing to an exclamation point, and even that is reserved for the one moment that matters: writing.
-
-## 11. Brand Narrative
-velog was created by velopert (Minjun Kim) as a developer-blogging platform for the Korean developer community, and its character flows directly from that origin. The production frontend is fully open-source (MIT), and the design tokens live transparently in `src/lib/styles` — `themes.ts` and `palette.ts` — built on the Open Color palette. That openness is the narrative: velog is a tool by and for developers, where the teal brand and the gray reading surface aren't decoration but the legible, honest scaffolding around technical writing. The brand reads as calm, minimal, and content-forward — a place where the words come first and the interface is just the quiet teal-and-gray frame around them.
-
-## 12. Principles
-- Reading-first: legibility and whitespace before chrome; long-form content leads.
-- One signal color: teal #12B886 marks action and nothing else.
-- Neutral structure: the gray scale (#F8F9FA → #212529) carries page, surface, and text.
-- Restraint in red: #FF6B6B is destructive-only.
-- Open and honest: tokens are open-source, built on the Open Color palette.
-- Flat depth: layer by value contrast, not shadow.
-
-## 13. Personas
-- The developer-writer: drafting long-form technical posts and wanting an editorial, distraction-free canvas. The system answers with a #F8F9FA reading surface, #212529 text, and a single teal write button as the clear next step.
-- The developer-reader: scanning technical content for signal. The high-contrast near-black text on soft gray, the system font at 16px, and the minimal chrome keep attention on the writing.
-
-## 14. States
-- Default / primary action: teal #12B886 (primary1) — the write button.
-- Primary alt / hover-tier tint: #20C997 (primary2 / teal5) is the documented secondary teal step for primary action.
-- Destructive: #FF6B6B (destructive1 / red5), reserved for destructive actions only.
-- Text (resting): #212529 (text1).
-- Page (resting): #F8F9FA (bg_page1).
-
-The blob does not carry measured per-state hover/pressed/focus values for individual components, so those interaction states are described by the available token roles rather than invented numbers; lean on the teal and gray scales (e.g., adjacent teal steps such as teal5 #20C997 and teal7 #0CA678) for tint progressions when a state shift is needed.
-
-## 15. Motion & Easing
-The blob does not carry measured duration, easing-curve, or transition values for velog, so motion is described qualitatively rather than with invented numbers. In keeping with the calm, reading-first character and flat depth, motion should be minimal and unobtrusive — gentle, quick transitions that never pull focus from the content. The teal accent is the one element worth a subtle emphasis on interaction; everything else should settle quietly so the reading surface stays still.
-
----
-**Verified:** 2026-06-01
-**Tier 1 sources:** https://velog.io (live DOM: page background #F8F9FA, header #FFFFFF, login pill #212529 / white / radius 16px / height 32px / 16px-700, system font 16px, brand teal #12B886 write button), https://github.com/velog-io/velog (open-source DS — tokens in src/lib/styles built on Open Color), https://github.com/velopert/velog-client (source files palette.ts + themes.ts giving the teal/gray/red scales and themedPalette semantic tokens)
-**Tier 2 sources:** getdesign.md/velog — NOT LISTED. refero — not listed (dev-blog SaaS absent).
-**Conflicts unresolved:** none
-**Proof:** see .verification.md (## Proof block)

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

@@ -1,134 +0,0 @@
-# Vercel — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `vercel.com/` (home — Geist DS marketing)
-- `vercel.com/login` (auth flow — different geometry; product surface)
-
-### Raw observations
-
-**Skip Nav**
-- bg `#ffffff`
-- color `rgb(0, 114, 245)` = `#0072f5` (Vercel Blue)
-- radius 6px
-- padding 0×12 / 32px / 16px·400
-
-**Header Nav Anchor Pills (Product / Resources / Customers / Pricing / Now / Contact)**
-- bg transparent
-- color `rgb(138, 143, 152)` ≈ `#8a8f98` Storm Cloud (in dark mode) | `rgb(77, 77, 77)` `#4d4d4d` (in light mode preview)
-- radius **9999px** (pill)
-- padding 0×12 (home) / 8×12 (with dropdown affordance)
-- 30-32px height
-- 13-14px / weight 400 / Geist Sans
-
-**Header Sign Up CTA (home)**
-- bg `rgb(229, 229, 230)` = `#e5e5e6` (Light Stone)
-- color `rgb(8, 9, 10)` = `#08090a` (Pitch Black)
-- radius 9999px
-- padding 0×12 / 32px / 13px·510 / Geist Sans
-
-**Login Primary CTA (`/login`) — `.button-module__QyrFCa__base`**
-- bg `rgb(23, 23, 23)` = `#171717` (Vercel near-black)
-- color `#ffffff`
-- radius **8px**
-- padding 0×14
-- 48px height
-- 16px / weight 500 / Geist Sans
-- "Continue with Email"
-
-**Login Outline OAuth (Google / GitHub / Apple / SAML / Passkey)**
-- bg `#ffffff`
-- color `#171717`
-- radius 8px
-- padding 0×14
-- 48px / 16px·500
-- 1px solid border (subtle)
-
-**Login Header Sign Up button**
-- bg `#ffffff` / `#171717` / 6px / 0×6 / 32px / 14px·500
-
-**Dropdown Menu Items** (product nav dropdown)
-- bg transparent
-- color `#4d4d4d`
-- radius 6px
-- padding 12px
-- 62px height
-- 14px·400
-- with leading icon + `Title<bold>Description<muted>` pattern
-
-### Surface split: home (marketing) vs login/auth (product)
-
-- **Home marketing chrome**: 9999px pill nav + 9999px Light Stone Sign Up + tight 32px height
-- **Product/Auth flow**: 8px Primary `#171717` + 48px tall + 16px·500 — same Geist Sans but different geometry/weight
-
-This split is similar to Apple (marketing pill / commerce compact) and Stripe (HDS / Sessions). For Vercel it's marketing pill 9999px / product 8px sharp.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/vercel` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Vercel` — no Vercel record (verified prior session)
-
-**Tier 2 status: unavailable.** Tier 1 (vercel.com home + login surfaces) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 login | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Sign Up CTA bg | `#e5e5e6` (Light Stone) | n/a | n/a | live home — Light Stone pill 9999px |
-| Primary product bg | n/a | `#171717` (near-black) | n/a | live login — 8px sharp |
-| Nav anchor radius | 9999px | n/a | n/a | ✓ pill |
-| Skip Nav | `#fff` / `#0072f5` text | n/a | n/a | Vercel Blue confirmed for skip-nav signal |
-| Font family | Geist Sans | Geist Sans | n/a | ✓ |
-| Header height | 32px | 32px | n/a | ✓ |
-| Login height | n/a | 48px | n/a | larger product surface buttons |
-
-### Unresolved
-- **None.** Two-surface split (marketing pill / product 8px) documented as intentional.
-
----
-
-## Components in §4
-
-§4 already documents Buttons, Cards, Inputs, Nav. Audit needed:
-1. Add **Header Sign Up CTA** (Light Stone Pill `#e5e5e6` 9999px) as a discrete variant — currently missing.
-2. Add **Skip Nav variant** (`#0072f5` accent on white) — minor signal but Vercel-distinctive.
-3. Confirm Login Primary `#171717` 8px is documented (it is, as Primary CTA).
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- Founded **2015** in San Francisco as **ZEIT** by **Guillermo Rauch (CEO)**, **Tony Kovanen (ex-CTO)**, **Naoyuki Kanezawa**
-  - Source: [Vercel — Wikipedia](https://en.wikipedia.org/wiki/Vercel)
-- Rauch's prior open-source: **Socket.IO** (real-time event-driven communication), **Mongoose**
-  - Source: [About — Guillermo Rauch](https://rauchg.com/about), [WeAreFounders](https://www.wearefounders.uk/guillermo-rauch-founder-vercel/)
-- **Next.js released October 2016** — React framework, became the platform's flagship product
-  - Source: [History of Vercel 2015–2020 (Medium)](https://medium.com/history-of-vercel/history-of-vercel-2015-2020-6-7-zeit-and-next-js-dc480a88e0b8)
-- **Renamed ZEIT → Vercel in April 2020** (kept the triangular logo)
-  - Source: Wikipedia: Vercel
-- **May 2024 funding:** $250M raised at **$3.25B valuation**
-  - Source: [BrandHistories — Vercel](https://brandhistories.com/vercel/company-history)
-- **As of 2026 still private**, no IPO announced
-  - Source: WebSearch consensus
-- v0 (AI UI generation) launched 2023-2024 under Vercel umbrella
-
-### Voice samples (live-verified)
-- *"Sign Up"* — homepage CTA <!-- verified: vercel.com 2026-05 -->
-- *"Continue with Email"* — login Primary <!-- verified: vercel.com/login 2026-05 -->
-- *"Build and deploy the best web experiences with the AI Cloud"* — homepage tagline <!-- verified: vercel.com page title -->
-
----
-
-**Verified-against:**
-- Tier 1: vercel.com/, vercel.com/login (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Wikipedia (Vercel), rauchg.com/about, History of Vercel (Medium series), BrandHistories