zugzbot 1.0.21 → 1.0.22

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

@@ -1,21 +0,0 @@
-# The Verge — Verification Notes (2026-06-06)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-06
-**Method:** playwright getComputedStyle (live DOM) on the production site
-**Sources:**
-- https://www.theverge.com
-
-### Raw samples
-- live www.theverge.com body text: color #131313, font 16px, family ui-sans-serif — source: live DOM getComputedStyle
-- live www.theverge.com page background: color #ffffff — source: live DOM getComputedStyle
-- live www.theverge.com root background: color #000000 — source: live DOM getComputedStyle
-- live www.theverge.com heading: color #131313, font 24px, / 700, family __polySans_9afc27 — source: live DOM getComputedStyle
-- live www.theverge.com primary button: color #ffffff, background #5200ff, border-radius 24px, height 44px, font 12px, / 600 — source: live DOM getComputedStyle
-- live www.theverge.com link: color #5200ff — source: live DOM getComputedStyle
-
-## Tier 2 — cross-check
-- Live-DOM computed values above are the source of truth for this reference's hex/px tokens. DESIGN.md token roles were reconciled against these measurements.
-
-## Country sources
-- country US; brand-owned live source: https://www.theverge.com (production site, all hex/px captured via live DOM getComputedStyle).

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

@@ -1,500 +0,0 @@
----
-id: theverge
-name: The Verge
-country: US
-category: marketing
-homepage: "https://www.theverge.com"
-primary_color: "#5200ff"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=theverge.com&sz=128"
-verified: "2026-06-06"
-added: "2026-06-06"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#5200ff"
-    accent: "#3cffd0"
-    canvas: "#131313"
-    surface: "#2d2d2d"
-    image-frame: "#313131"
-    border-strong: "#c2c2c2"
-    text-muted: "#e9e9e9"
-    text-secondary: "#949494"
-    on-primary: "#ffffff"
-    link-hover: "#3860be"
-    focus: "#1eaedb"
-  typography:
-    family: { sans: "PolySans", mono: "PolySans Mono" }
-    display-mega:  { size: 107, weight: 900, lineHeight: 0.95, tracking: -0.02, use: "Hero/feature splash headlines" }
-    display-lg:    { size: 72, weight: 900, lineHeight: 1.0, tracking: -0.02, use: "Section/package headlines" }
-    display:       { size: 60, weight: 900, lineHeight: 1.02, tracking: -0.01, use: "Story-tile headlines" }
-    headline:      { size: 32, weight: 700, lineHeight: 1.1, tracking: -0.01, use: "Sub-feature, card titles" }
-    title:         { size: 24, weight: 700, lineHeight: 1.2, use: "List headlines, module titles" }
-    subtitle:      { size: 18, weight: 600, lineHeight: 1.35, use: "Deks, standfirst" }
-    body-lg:       { size: 18, weight: 400, lineHeight: 1.55, use: "Article body lead" }
-    body:          { size: 16, weight: 400, lineHeight: 1.6, use: "Standard article reading text" }
-    body-sm:       { size: 14, weight: 400, lineHeight: 1.5, use: "Secondary text, captions" }
-    kicker:        { size: 12, weight: 600, lineHeight: 1.2, tracking: 0.06, use: "UPPERCASE section tags, kickers" }
-    caption:       { size: 12, weight: 400, lineHeight: 1.4, use: "Bylines, timestamps, credits" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32 }
-  rounded: { sm: 3, md: 3, lg: 3, full: 9999 }
-  shadow:
-    none: "none"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#5200ff", fg: "#ffffff", radius: 3, padding: "12px 20px", font: "14/600", use: "Primary CTA Subscribe, Read more" }
-    button-accent: { type: button, bg: "#3cffd0", fg: "#131313", radius: 3, padding: "12px 20px", font: "14/600", use: "High-energy secondary CTA on dark canvas" }
-    button-outline: { type: button, fg: "#ffffff", radius: 3, padding: "12px 20px", font: "14/600", use: "Secondary action on dark, 1px border #c2c2c2" }
-    badge-pill: { type: badge, fg: "#3cffd0", radius: 9999, padding: "4px 12px", font: "12/600", use: "Section tags, topic chips, UPPERCASE mono, 1px accent border" }
-    input-default: { type: input, bg: "#2d2d2d", fg: "#ffffff", radius: 3, padding: "12px 14px", font: "16/400", use: "Newsletter signup, search, comment box" }
-    input-error: { type: input, bg: "#2d2d2d", fg: "#ffffff", radius: 3, padding: "12px 14px", font: "16/400", use: "Validation error, 1px border #5200ff" }
-    card-tile: { type: card, bg: "#5200ff", fg: "#ffffff", radius: 3, padding: "20px", use: "Signature color-block story tile, Manuka 60/900 headline" }
-    card-standard: { type: card, bg: "#131313", fg: "#ffffff", radius: 3, padding: "16px", use: "StoryStream rows, list modules, mint kicker" }
-    card-inverted: { type: card, bg: "#ffffff", fg: "#131313", radius: 3, padding: "16px", use: "Sponsored / special sections on light" }
-    tab-nav: { type: tab, fg: "#ffffff", use: "Top nav section list on #131313", active: "underline or #5200ff marker" }
----
-
-# Design System Inspiration of The Verge
-
-## 1. Visual Theme & Atmosphere
-
-The Verge is Vox Media's flagship technology publication, and its 2022 in-house redesign is one of the most aggressively opinionated editorial identities on the modern web. Where most tech-news sites default to a polite white canvas with a blue accent, The Verge does the opposite: it opens on an almost-black canvas (`#131313`) and weaponizes two clashing, hyper-saturated accents — an acid "jelly mint" (`#3cffd0`) and an electric "ultraviolet" purple (`#5200ff`) — that behave like hazard tape across the page. The effect is loud, confident, and unmistakably a media brand that wants to feel more like a zine or a feed than a corporate newspaper.
-
-The redesign was a deliberate "back to bloggy basics" move: a chronological StoryStream rail replaces the algorithmic homepage, and editorial voice is foregrounded over SEO-optimized blandness. Visually this is expressed through enormous display type, full-bleed saturated color-block tiles, and a dense, kinetic layout that rewards scrolling. Nothing about it is calm — it is engineered to feel current, irreverent, and slightly chaotic in a curated way.
-
-Typography carries the personality. Three working typefaces anchor the system: **Mānuka** (Klim Type Foundry) for massive display headlines, **PolySans** (Gradient) for body, labels, and UI, and **FK Roman** (Florian Karsten) reserved for rare editorial/print-excerpt moments. Headlines run absurdly large — 60px to 107px — and PolySans Mono shows up in UPPERCASE for timestamps, kickers, and tags, reinforcing the "unfinished interface between present and future" concept the logo was built around.
-
-**Key Characteristics:**
-- Almost-black canvas (`#131313`) — no light mode on the homepage; dark-first by design
-- Dual hazard accents: jelly mint (`#3cffd0`) + ultraviolet (`#5200ff`), used as collision, not harmony
-- Mānuka display headlines at 60–107px, 900 weight — type as the primary brand asset
-- PolySans for everything functional; PolySans Mono UPPERCASE for kickers/metadata
-- Saturated full-bleed color-block tiles (mint, violet, yellow, pink, orange) for story cards
-- Sharp geometry — small 2–4px radii on most UI, occasional large pill radii
-- Editorial, irreverent, feed-like — designed to feel like a zine, not a newspaper
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Verge Ultraviolet** (`#5200ff`): The signature electric purple. Primary brand accent — logo lockups, link emphasis, color-block tiles, key CTAs. The single most "Verge" color.
-- **Jelly Mint** (`#3cffd0`): The acid co-accent. Highlights, hover states, tags, decorative rails, and tiles. Paired with ultraviolet to create the signature high-tension collision.
-- **Canvas Black** (`#131313`): Primary page background. Almost-black, slightly warm — never pure `#000000`.
-- **Pure White** (`#ffffff`): Primary text on the dark canvas, and the fill color for inverted/light tiles.
-
-### Tile / Block Colors
-Story tiles use saturated full-bleed color blocks. The core set:
-- **Mint** `#3cffd0`
-- **Violet** `#5200ff`
-- **White** `#ffffff` (inverted tiles — black text on white)
-- Extended editorial set seen across coverage: **yellow**, **pink**, **orange** (used per-section/per-package, high-saturation)
-
-### Surface & Neutral Scale
-- **Surface Slate** (`#2d2d2d`): Elevated surfaces, secondary panels on the dark canvas.
-- **Image Frame** (`#313131`): Border/frame color around media thumbnails.
-- **Border Strong** (`#c2c2c2`): High-contrast dividers, outlined buttons, form borders.
-- **Text Muted** (`#e9e9e9`): Near-white softened text for dense passages.
-- **Text Secondary** (`#949494`): Captions, metadata, bylines, timestamps.
-- **Text Inverted** (`#131313`): Text on white/mint/light tiles.
-
-### Interactive / Semantic
-- **Link Hover** (`#3860be`): Hover state for inline text links.
-- **Focus Cyan** (`#1eaedb`): Focus-ring / interactive cyan accent for accessibility outlines.
-
-### Role Summary
-- Background: `#131313` (canvas), `#2d2d2d` (surface)
-- Primary text: `#ffffff`; secondary `#949494`; muted `#e9e9e9`
-- Brand accents: `#5200ff` (ultraviolet), `#3cffd0` (mint)
-- Link hover: `#3860be`; focus: `#1eaedb`
-- Borders: `#c2c2c2` (strong), `#313131` (image frame)
-
-## 3. Typography Rules
-
-### Font Family
-- **Display**: `"Manuka", "Mānuka", "PolySans", Helvetica, Arial, sans-serif` — Klim Type Foundry, used at 900 weight for headlines.
-- **Body / UI**: `"PolySans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif` — Gradient, the functional workhorse.
-- **Mono**: `"PolySans Mono", ui-monospace, "SF Mono", Menlo, monospace` — UPPERCASE kickers, timestamps, tags.
-- **Editorial Serif**: `"FK Roman Standard", Georgia, "Times New Roman", serif` — rare pull-quotes / print excerpts only.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Mega | Mānuka | 107px | 900 | 0.95 | -0.02em | Hero/feature splash headlines |
-| Display Large | Mānuka | 72px | 900 | 1.0 | -0.02em | Section/package headlines |
-| Display | Mānuka | 60px | 900 | 1.02 | -0.01em | Story-tile headlines |
-| Headline | PolySans | 32px | 700 | 1.1 | -0.01em | Sub-feature, card titles |
-| Title | PolySans | 24px | 700 | 1.2 | normal | List headlines, module titles |
-| Subtitle | PolySans | 18px | 600 | 1.35 | normal | Deks, standfirst |
-| Body Large | PolySans | 18px | 400 | 1.55 | normal | Article body lead |
-| Body | PolySans | 16px | 400 | 1.6 | normal | Standard article reading text |
-| Body Small | PolySans | 14px | 400 | 1.5 | normal | Secondary text, captions |
-| Label / Kicker | PolySans Mono | 12px | 600 | 1.2 | 0.06em | UPPERCASE section tags, kickers |
-| Caption / Meta | PolySans | 12px | 400 | 1.4 | normal | Bylines, timestamps, credits |
-
-### Principles
-- **Type is the brand.** Mānuka display at 60–107px is the loudest element on any page; it is allowed to dominate.
-- **Mono = metadata.** PolySans Mono appears only in UPPERCASE for kickers, tags, timestamps, and labels — never for reading text.
-- **Negative tracking on display.** Big Mānuka headlines tighten letter-spacing (-0.01 to -0.02em); body PolySans stays neutral.
-- **Serif is a guest.** FK Roman is reserved for occasional pull-quotes and print-evoking moments — never general body.
-- **No timid sizes.** Headlines jump scale dramatically; there is little middle ground between 18px deks and 60px+ display.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Ultraviolet)**
-- Background: `#5200ff`
-- Text: `#ffffff`
-- Border: none
-- Radius: 3px
-- Padding: 12px 20px
-- Font: 14px / 600 / PolySans
-- Hover: brightness +6% / subtle mint outline
-- Use: Primary CTA — "Subscribe", "Read more", newsletter signup
-
-**Accent (Mint)**
-- Background: `#3cffd0`
-- Text: `#131313`
-- Border: none
-- Radius: 3px
-- Padding: 12px 20px
-- Font: 14px / 600 / PolySans
-- Use: High-energy secondary CTA on dark canvas; tags and pills
-
-**Outline (on dark)**
-- Background: transparent
-- Text: `#ffffff`
-- Border: 1px solid `#c2c2c2`
-- Radius: 3px
-- Padding: 12px 20px
-- Font: 14px / 600 / PolySans
-- Hover: border `#3cffd0`, text `#3cffd0`
-- Use: Secondary action, "Comments", "Share"
-
-**Pill / Tag (Mono)**
-- Background: transparent or `#2d2d2d`
-- Text: `#3cffd0` or `#ffffff`
-- Border: 1px solid `#3cffd0`
-- Radius: 20px
-- Padding: 4px 12px
-- Font: 12px / 600 / PolySans Mono, UPPERCASE, +0.06em
-- Use: Section tags, topic chips, StoryStream labels
-
-### Inputs
-
-**Default (dark)**
-- Background: `#2d2d2d`
-- Text: `#ffffff`
-- Border: 1px solid `#313131`
-- Radius: 3px
-- Padding: 12px 14px
-- Font: 16px / 400 / PolySans
-- Placeholder: `#949494`
-- Focus: border `#1eaedb`, 2px focus ring `#1eaedb`
-- Use: Newsletter signup, search, comment box
-
-**Error**
-- Background: `#2d2d2d`
-- Text: `#ffffff`
-- Border: 1px solid `#5200ff`
-- Radius: 3px
-- Padding: 12px 14px
-- Font: 16px / 400 / PolySans
-- Use: Validation error — paired with mono caption below
-
-### Cards / Story Tiles
-
-**Color-Block Tile (signature)**
-- Background: full-bleed saturated color (`#5200ff`, `#3cffd0`, `#ffffff`, yellow, pink, orange)
-- Text: `#ffffff` on dark tiles / `#131313` on mint & white tiles
-- Border: none
-- Radius: 3px (often 0 for full-bleed packages)
-- Padding: 20–24px
-- Headline: Mānuka 60px / 900
-- Use: Hero packages, featured stories — the defining Verge surface
-
-**Standard Story Card (dark)**
-- Background: `#131313` or `#2d2d2d`
-- Text: `#ffffff`
-- Border: none; 1px `#313131` frame on the thumbnail
-- Radius: 3px
-- Padding: 16px
-- Kicker: PolySans Mono 12px UPPERCASE `#3cffd0`
-- Use: StoryStream rows, list modules
-
-**Inverted Card (light)**
-- Background: `#ffffff`
-- Text: `#131313`
-- Border: none
-- Radius: 3px
-- Padding: 16–20px
-- Use: Sponsored / special sections breaking from the dark canvas
-
-### StoryStream Rail
-- Vertical timeline rail down the left of the feed
-- Rail line: `#313131`; node dots: `#3cffd0`
-- Timestamp labels: PolySans Mono 12px UPPERCASE `#949494`
-- Use: The chronological "bloggy basics" backbone of the homepage
-
-### Tags / Badges
-- Background: transparent or tile color
-- Text: `#3cffd0` (default) or contextual tile color
-- Border: 1px solid current accent
-- Radius: 20px (pill)
-- Padding: 4px 12px
-- Font: 12px / 600 / PolySans Mono UPPERCASE
-- Use: Section labels (`TECH`, `SCIENCE`, `REVIEWS`), topic chips
-
-### Navigation
-- Background: `#131313` (sticky)
-- Logo: ultraviolet/mint lockup, sharp geometric mark
-- Link text: PolySans 14px / 600, `#ffffff`; hover `#3cffd0`
-- Active section: underline or `#5200ff` marker
-- Use: Top nav bar — dark, dense, mono-flavored section list
-
-### Links (inline body)
-- Default: `#ffffff` with `#3cffd0` underline, or ultraviolet on light surfaces
-- Hover: `#3860be`
-- Use: In-article links — underline persistent, color shift on hover
-
-
-**Tier 1 sources:** https://www.theverge.com (live production site, verified via live DOM getComputedStyle).
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px
-- Full-bleed packages ignore content padding and run edge-to-edge
-- Dense feed rhythm — tighter vertical gaps than typical editorial sites
-
-### Grid & Container
-- Wide max-width (~1200–1400px) with a prominent left StoryStream rail
-- Asymmetric, modular grid — color blocks of varying spans, not a uniform column grid
-- Mobile collapses to a single stacked feed with the rail flattened
-- Full-bleed hero packages break the container deliberately
-
-### Whitespace Philosophy
-- **Density over calm.** The feed is intentionally packed and kinetic — it should feel alive.
-- **Color blocks ARE the whitespace.** Negative space is often filled with saturated color rather than empty canvas.
-- **Headlines claim space.** Mānuka display is given room to be enormous even in dense layouts.
-
-### Border Radius Scale
-- Sharp (2–3px): Default — buttons, cards, inputs, tiles
-- Comfortable (4px): Slightly softened panels
-- Pill (20px): Tags, mono chips
-- Large (24–40px): Occasional rounded media / feature pills
-- Round (50%): Avatars, node dots
-
-## 6. Depth & Elevation
-
-The Verge is largely **flat** — depth comes from color contrast and saturation collisions, not shadow. On a `#131313` canvas, a `#5200ff` block reads as "elevated" purely through hue, the way fluorescent ink pops on newsprint.
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow; color-block contrast only | Tiles, feed rows, canvas |
-| Surface (Level 1) | `#2d2d2d` fill on `#131313` | Secondary panels, inputs |
-| Frame (Level 2) | 1px `#313131` border | Media thumbnails, cards |
-| Floating (Level 3) | `0 4px 16px rgba(0,0,0,0.5)` | Dropdowns, sticky nav on scroll |
-| Modal (Level 4) | `0 8px 32px rgba(0,0,0,0.6)` + `#131313` scrim 0.7 | Overlays, lightbox media |
-
-**Shadow Philosophy**: Shadows are deep and pure-black-tinted (the canvas is already dark), used sparingly and only for true overlays. The brand's "elevation" language is chromatic — a mint or ultraviolet block is the loudest thing on screen without any shadow at all.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use `#131313` as the canvas — almost-black, never pure `#000000`
-- Pair ultraviolet (`#5200ff`) and mint (`#3cffd0`) as a deliberate high-tension collision
-- Set headlines in Mānuka 900 at 60px+ — let type dominate
-- Use PolySans Mono UPPERCASE for kickers, tags, and timestamps
-- Use full-bleed saturated color blocks for featured story tiles
-- Keep most radii sharp (2–3px); reserve pills (20px) for mono tags
-- Use mint as the hover/active accent on dark surfaces
-
-### Don't
-- Don't default to a white/light homepage — The Verge is dark-first
-- Don't use timid, mid-saturation colors — accents are hazard-bright or nothing
-- Don't set body text in Mānuka — display only; reading text is PolySans
-- Don't use PolySans Mono for paragraphs — it's metadata/labels only
-- Don't over-round UI — heavy radii undercut the sharp, "unfinished interface" feel
-- Don't rely on shadows for hierarchy — use color-block contrast
-- Don't mute the brand into corporate politeness — the energy IS the identity
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <600px | Single stacked feed; rail flattened to inline timestamps; display type scales to 36–48px |
-| Tablet | 600–1024px | 2-column tile grid; rail visible; headlines 48–72px |
-| Desktop | >1024px | Full modular grid + left StoryStream rail; display up to 107px |
-| Wide | >1400px | Max container; larger color-block spans |
-
-### Touch Targets
-- Buttons / pills: minimum 40px tall
-- Nav links: 44px tap height on mobile
-- Tag chips: 32px minimum with 12px h-padding
-
-### Collapsing Strategy
-- StoryStream rail collapses into inline mono timestamps on mobile
-- Multi-span color blocks stack to full-width single column
-- Mānuka display clamps down (`clamp()`-style) so 107px never overflows narrow screens
-- Sticky nav condenses to logo + hamburger
-
-### Image Behavior
-- Thumbnails framed with 1px `#313131`
-- Full-bleed package imagery runs edge-to-edge, ignoring container padding
-- Aspect ratios preserved; lazy-loaded in the feed
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Canvas background: `#131313`
-- Surface: `#2d2d2d`
-- Primary accent (purple): `#5200ff`
-- Secondary accent (mint): `#3cffd0`
-- Primary text: `#ffffff`
-- Secondary text: `#949494`
-- Muted text: `#e9e9e9`
-- Inverted text (on light tiles): `#131313`
-- Link hover: `#3860be`
-- Focus ring: `#1eaedb`
-- Strong border: `#c2c2c2`
-- Image frame: `#313131`
-
-### Example Component Prompts
-- "Create a Verge story tile: full-bleed `#5200ff` background, no radius, 24px padding. Kicker in PolySans Mono 12px UPPERCASE `#3cffd0`, +0.06em tracking. Headline in Mānuka 60px weight 900 white, line-height 1.0, -0.01em. Byline 12px PolySans `#e9e9e9`."
-- "Build a primary CTA: `#5200ff` bg, white text, 14px weight 600 PolySans, 12px 20px padding, 3px radius. Hover: mint `#3cffd0` 1px outline."
-- "Design a StoryStream row: `#131313` bg, left rail line `#313131` with a `#3cffd0` node dot, mono timestamp 12px `#949494` UPPERCASE, headline PolySans 24px weight 700 white, 16px padding, 1px `#313131` frame on the thumbnail."
-- "Create a section tag chip: transparent bg, 1px `#3cffd0` border, 20px radius, 4px 12px padding, text `#3cffd0` PolySans Mono 12px UPPERCASE."
-- "Build a newsletter input on dark: `#2d2d2d` bg, 1px `#313131` border, 3px radius, white text 16px PolySans, placeholder `#949494`. Focus: `#1eaedb` 2px ring."
-
-### Iteration Guide
-1. Always start on the dark canvas `#131313` — never white-first
-2. Primary purple is `#5200ff`; mint `#3cffd0` is its required co-accent
-3. Display headlines: Mānuka 900, 60px+, tight tracking
-4. Metadata/kickers/tags: PolySans Mono, UPPERCASE, mint
-5. Keep radii sharp (2–3px); pills only for mono tags (20px)
-6. Use saturated color blocks for emphasis instead of shadows
-7. Body reading text: PolySans 16px / 400, line-height 1.6
-
----
-
-## 10. Voice & Tone
-
-The Verge writes like a sharp, plugged-in friend who knows the tech industry intimately and isn't afraid to be funny, skeptical, or blunt about it. Headlines are punchy, often playful or provocative, and frequently break the fourth wall. The voice is conversational, opinionated, and irreverent — closer to a group chat than a press release — while staying rigorous and well-sourced underneath. It assumes a smart, terminally-online reader who gets the references.
-
-| Context | Tone |
-|---|---|
-| Headlines | Punchy, witty, sometimes provocative. Active voice. May be a complete sentence or a wry fragment. |
-| Kickers / tags | Terse, UPPERCASE, categorical (`TECH`, `EXCLUSIVE`, `REVIEW`). |
-| Body | Conversational but reported — opinion grounded in facts and sources. |
-| CTAs | Direct, low-friction (`Read more`, `Subscribe`, `Sign up`). |
-| Reviews | Verdict-forward, scored, unafraid to pan a product. |
-| Newsletter / promo | Friendly, a little self-aware, never corporate-salesy. |
-
-**Avoid**: PR-speak, breathless hype without skepticism, both-sides hedging that dodges a verdict, and stiff AP-wire neutrality. The Verge has a point of view and states it.
-
-## 11. Brand Narrative
-
-The Verge launched in 2011 under Vox Media as a technology, science, and culture publication, quickly becoming a defining voice in consumer-tech journalism. Its 2022 redesign — developed entirely in-house by Vox Media's design team — was a statement against the homogenized, SEO-flattened, algorithm-fed web. The team described going "back to bloggy basics": a chronological StoryStream homepage that surfaces the staff's actual reading and linking, reasserting editorial judgment over machine ranking.
-
-The visual identity was built around the idea of "an unfinished interface between the present and the future" — hence the sharp logo, the hazard-tape collision of ultraviolet and mint, and the aggressively current dark aesthetic. The redesign was widely covered (Nieman Lab, TypeRoom, Brand New, Fonts In Use) as a rare case of a major publication making its design louder and more opinionated rather than safer.
-
-What The Verge refuses: the calm white-canvas neutrality of legacy news sites, the personality-free uniformity of algorithmic feeds, and the muted "trustworthy" palettes of corporate media. It bets that a strong, even abrasive, identity builds more loyalty than inoffensive blandness — that a tech audience wants a publication with taste and a point of view, rendered in type loud enough to match.
-
-## 12. Principles
-
-1. **Dark-first, always.** The canvas is `#131313`. Light is the exception (sponsored/inverted tiles), never the default. The brand lives in the dark.
-2. **Collision over harmony.** Ultraviolet and mint are meant to clash like hazard tape. The tension is the point; don't soften it into a tasteful gradient.
-3. **Type is the loudest voice.** Mānuka display at 60–107px dominates intentionally. If a headline isn't commanding the page, it's too small.
-4. **Metadata speaks in mono.** Kickers, tags, and timestamps wear PolySans Mono UPPERCASE — a consistent signal that says "this is the interface talking."
-5. **Color is structure.** Saturated blocks organize the page and create hierarchy; shadows are nearly absent. Contrast does the work.
-6. **Editorial judgment over algorithm.** The StoryStream rail is chronological and human-curated by design — the layout itself argues for taste over ranking.
-7. **Sharp, not soft.** Small radii and hard edges reinforce the "unfinished future interface" concept. Over-rounding is off-brand.
-8. **Loud, but legible.** Energy never sacrifices readability — body stays PolySans 16px at comfortable line-height on high-contrast surfaces.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by The Verge's publicly described tech-media audience, not individual people.*
-
-**Marcus, 29, Brooklyn.** Product designer at a startup, perpetually online. Reads The Verge multiple times a day on mobile during commutes and breaks. He's there for the take as much as the news — he wants the witty headline and the verdict, not a neutral wire summary. Loves the chronological feed because it feels like following smart people's bookmarks. Notices and appreciates the typography; the redesign is part of why he trusts the brand's taste.
-
-**Priya, 41, Austin.** Engineering manager who follows hardware reviews and AI coverage closely before making purchase and team-tooling decisions. Reads on desktop, scans the StoryStream for what's moving, and clicks through to full reviews for the scored verdict. Values that The Verge will actually pan a bad product. The bold visual identity reads to her as confidence, not gimmick.
-
-**Devon, 23, Chicago.** CS student and gadget enthusiast. Came for the YouTube and TikTok content, stayed for the site. Treats The Verge like a feed — fast scrolling, color-block tiles catching his eye, tapping kicker tags to dive into a topic. The mint-and-purple aesthetic feels native to how he already consumes media; a polite gray news site would feel old to him.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (feed/search)** | Single line of `#949494` PolySans body explaining the absence, plus a mint `#3cffd0` text link to browse all sections. No illustration. |
-| **Loading (first paint)** | Skeleton blocks at `#2d2d2d` on the `#131313` canvas, matching tile dimensions. Subtle shimmer. Headlines render last. |
-| **Loading (more stories)** | Mint `#3cffd0` spinner or "Loading…" in PolySans Mono UPPERCASE at the foot of the StoryStream. Content stays in place. |
-| **Error (inline field)** | 1px `#5200ff` border on the input, error text below in PolySans Mono UPPERCASE 12px `#5200ff`. One actionable line. |
-| **Error (page)** | Centered Mānuka headline (e.g., "404 — Lost in the future"), `#949494` subtext, mint link back home. On-brand and a little playful. |
-| **Hover (link)** | Inline link shifts to `#3860be`; underline persists. On dark UI, interactive elements shift toward mint `#3cffd0`. |
-| **Hover (tile)** | Color block brightens slightly / gains a mint outline; headline underline appears. |
-| **Focus (a11y)** | 2px `#1eaedb` focus ring on all interactive elements. Always visible — never suppressed. |
-| **Active (nav section)** | Section label gains `#5200ff` underline marker; mono tag fills mint. |
-| **Disabled** | Element drops to ~40% opacity; border stays `#313131` so geometry is stable. |
-| **Success (newsletter signup)** | Inline confirmation in mint `#3cffd0`, PolySans 14px, with a brief check mark. No modal for routine confirmations. |
-
-## 15. Motion & Easing
-
-**Durations** (named):
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Reduced-motion fallback, instant state flips |
-| `motion-fast` | 150ms | Hover, focus, link color shifts, tag fills |
-| `motion-standard` | 250ms | The default — tile hovers, dropdowns, nav reveals |
-| `motion-slow` | 400ms | Emphasized — package transitions, hero reveals |
-| `motion-feed` | 300ms | StoryStream item entrance as new stories load in |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — feed items, dropdowns, overlays |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals, pops |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — tile hover lifts, tab content |
-| `ease-snap` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | Snappy, slightly punchy hover/active — matches the brand's energetic feel |
-
-**Signature motions.**
-
-1. **Feed entrance.** As new StoryStream items load, they fade-and-rise from `y+12px` over `motion-feed / ease-enter`, with the mint node dot scaling in. Reinforces the live, chronological feel.
-2. **Tile hover.** Color-block tiles brighten and gain a 1px mint outline over `motion-fast / ease-snap`; the headline underline draws left-to-right. Snappy, not floaty.
-3. **Accent collision.** Hover/active states on dark UI transition white → mint (`#3cffd0`) over `motion-fast`. The color shift is the primary feedback, not movement.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all tokens collapse to `motion-instant`; entrances become simple opacity changes, no translate. Fully usable, just static.
-
-<!--
-OmD v0.1 Sources — The Verge
-
-Token-level claims (sections 1–9) grounded in:
-- The Verge Design System token reference (shadcn.io/design/theverge): canvas #131313,
-  surface #2d2d2d, jelly mint #3cffd0, ultraviolet #5200ff, text #ffffff/#949494/#e9e9e9,
-  link hover #3860be, focus #1eaedb, border #c2c2c2, image frame #313131, base radius 3px,
-  Mānuka 900 display 60–107px, PolySans body, PolySans Mono UPPERCASE, FK Roman editorial.
-- Fonts In Use (fontsinuse.com/uses/48536) — confirms Mānuka (Klim), PolySans (Gradient),
-  FK Roman (Florian Karsten) as the 2022 redesign typefaces.
-- WebSearch (June 2026): TypeRoom, Nieman Lab, Brand New (UnderConsideration) — confirm
-  in-house Vox Media redesign, "back to bloggy basics," StoryStream, dark hazard-tape
-  palette, "unfinished interface between present and future" logo concept.
-
-Note: brandpalettes.com "Verge" entry (#4CC2F1) refers to the Verge CRYPTOCURRENCY,
-NOT The Verge media brand — excluded as a false match.
-
-Direct WebFetch of theverge.com was blocked in this environment; live-DOM token
-verification was not possible. Tokens above rely on the design-system reference and
-corroborating redesign coverage.
-
-Philosophy layer (sections 10–15): voice/tone and narrative are editorial readings of
-The Verge's publicly documented 2022 redesign and editorial positioning. Personas (§13)
-are fictional archetypes informed by the publication's described tech-media audience.
-Motion tokens are conventions consistent with the brand's energetic, feed-first aesthetic,
-not published Verge values.
--->

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

@@ -1,67 +0,0 @@
-# Timee — Verification Notes (2026-06-10)
-
-## Proof — Tier 1 live inspect
-
-**Inspected:** 2026-06-10
-**Method:** playwright getComputedStyle (live DOM) — global playwright (chromium, headless), goto https://timee.co.jp and https://timee.co.jp/business/ domcontentloaded + scroll passes, then `getComputedStyle` on body, h1/h2/h3, buttons, links, inputs, rounded containers, plus full-DOM background/text color frequency scans.
-**Sources:**
-- https://timee.co.jp/ (worker homepage, live computed style)
-- https://timee.co.jp/business/ (business LP, live computed style — second surface)
-
-### Raw samples
-- body (home): `font-family: "Noto Sans JP", sans-serif`; `color: rgb(33, 33, 33)` (#212121); `font-size: 16px`; `line-height: 24px`
-- B2B hero CTA "企業様向けページはこちら" `.btn-more.btn-toB`: `background-color: rgb(255, 215, 0)` (#ffd700); `color: rgb(33, 33, 33)`; `border: 2px solid rgb(33, 33, 33)`; `border-radius: 3.35544e+07px` (full pill); `padding: 24px 20px`; `font-size: 20px`; `font-weight: 700`; `box-shadow: rgb(33, 33, 33) 0px 8px 0px 0px` (hard offset, no blur); height 82px
-- App-install CTA "お近くのお仕事を探す…" `.btn-more`: `background-color: rgb(0, 122, 255)` (#007aff); `color: rgb(255, 255, 255)`; `border-radius: 3.35544e+07px`; `box-shadow: rgb(0, 84, 175) 0px 8px 0px 0px` (#0054af hard offset); height 89px; `font-size: 16px`
-- Header pill "求人担当者さまはこちら" `.reHeader-btn`: `background-color: rgb(0, 122, 255)`; pill radius; height 41px; `font-size: 14px`; `font-weight: 700`
-- H2 "例えばこんなお仕事が": `font-size: 32px`; `font-weight: 700`; `line-height: 48px`; `color: rgb(33, 33, 33)`; Noto Sans JP
-- H3 job-card title "【大手運送会社】…発送仕分け": `font-size: 16px`; `font-weight: 700`; `line-height: 24px`; `color: rgb(33, 33, 33)`
-- H3 category tile "倉庫作業": `font-size: 18px`; `font-weight: 700`; `line-height: 27px`
-- H3 "アプリをダウンロード": `font-size: 24px`; `font-weight: 700`; `line-height: 36px`
-- Age filter pill (active) `li.active` "18歳〜": `background-color: rgb(33, 33, 33)`; `color: rgb(255, 255, 255)`; `border: 1px solid rgb(33, 33, 33)`; `border-radius: 999px`; height 42px; `font-size: 20px`; `font-weight: 700`
-- Age filter pill (inactive) "20代": `background-color: rgb(234, 234, 234)` (#eaeaea); `color: rgb(33, 33, 33)`; `border: 1px solid rgb(33, 33, 33)`; `border-radius: 999px`; height 42px
-- NEW!! badge: `background-color: rgb(33, 33, 33)`; `color: rgb(255, 215, 0)`; `border-radius: 99px`; 48×48px; `font-size: 12px`; `font-weight: 700`
-- Feature card `li` "単発で働ける！…": `background-color: rgb(255, 255, 255)`; `border-radius: 25px`; 740×300px
-- QR modal `.qr-modal__content`: `background-color: rgb(255, 255, 255)`; `border-radius: 16px`; `box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px 0px`; 480×459px
-- Slide-out menu `.globalMenu`: `background-color: rgb(255, 255, 255)`; `border-radius: 48px 0px 0px 48px`; 424×720px
-- home bgFreq scan: `rgb(255,255,255)` ×79, `rgb(33,33,33)` ×59 (#212121), `rgb(255,215,0)` ×46 (#ffd700), `rgb(183,184,188)` ×28 (#b7b8bc), `rgb(234,234,234)` ×26 (#eaeaea), `rgb(0,122,255)` ×5 (#007aff)
-- home fgFreq scan: `rgb(33,33,33)` ×1139, `rgb(255,255,255)` ×95, `rgb(0,0,0)` ×88, `rgb(255,59,48)` ×36 (#ff3b30 — wage/urgency text), `rgb(0,122,255)` ×15, `rgb(102,102,102)` ×5 (#666666), `rgb(153,153,153)` ×1 (#999999)
-- business LP body: `font-family: "Noto Sans JP-…", "Hiragino Sans", …`; `color: rgb(33, 33, 33)`; `font-size: 16px`; `line-height: 24px`
-- business LP CTA "アカウント開設": `background-color: rgb(0, 122, 255)`; `color: rgb(255, 255, 255)`; `border: 2px solid rgb(0, 122, 255)`; pill radius; `padding: 4px 16px 6px`; height 38px; `font-size: 16px`; `font-weight: 700`
-- business LP ghost CTA "資料ダウンロード": `background-color: rgb(255, 255, 255)`; `color: rgb(0, 122, 255)`; `border: 2px solid` blue (oklch(0.623 0.214 259.815) ≈ #007aff family); pill radius; height 38px
-- business LP large CTA "最短即日で求人掲載 無料でアカウントを開設": bg `rgb(0, 122, 255)`; pill; `padding: 20px 0px`; height 72px
-- business LP H2 "タイミーが選ばれる理由": `font-size: 30px`; `font-weight: 700`; `line-height: 36px`
-- business LP H3 "最短即日でマッチング": `font-size: 24px`; `font-weight: 700`; `line-height: 32px`
-- business LP bgFreq: `rgb(255,255,255)` ×35, `rgb(0,122,255)` ×20, `rgb(255,215,0)` ×8, `rgb(245,245,244)` ×4 (#f5f5f4)
-- document.title (home): "【タイミー】スキマ時間にすぐ働ける！1,340万人が利用している単発バイトアプリ"
-- document.title (business): "【タイミー】登録・掲載無料のスキマバイト募集サービス｜求人掲載はこちら"
-
-## Tier 2
-
-- **getdesign.md/timee** — WebFetch 2026-06-10: **404** ("No designs found for 'timee'"). No brand-name variant exists (service and company are both "Timee").
-- **styles.refero.design/?q=timee** — playwright navigate + search 2026-06-10: **not listed**. Search returned only fuzzy matches (Streamtime, Timescale, Todoist, TOMO); no Timee style page exists.
-
-## Conflict matrix
-
-| Field | Tier 1 (live) | getdesign | refero | Resolution |
-|---|---|---|---|---|
-| primary / brand color | #ffd700 (hero CTA bg, ×46 bg scan) | n/a (404) | n/a (not listed) | Tier 1 — #ffd700 |
-| ink / text | #212121 (×1139 fg scan) | n/a | n/a | Tier 1 — #212121 |
-| action blue | #007aff (app CTA, business action layer) | n/a | n/a | Tier 1 — #007aff |
-| button radius | full pill (3.35544e+07px computed) | n/a | n/a | Tier 1 — 9999px |
-| button shadow | hard offset 0px 8px 0px (#212121 / #0054af) | n/a | n/a | Tier 1 |
-| font | Noto Sans JP, 700 for all hierarchy | n/a | n/a | Tier 1 |
-
-No Tier 2 source exists for Timee → no conflicts possible; all values are single-sourced from live inspect across two surfaces.
-
-## Brand-owned sources (JP)
-
-1. **https://timee.co.jp/** — worker homepage (Tier 1 live-inspected source for all token claims).
-2. **https://timee.co.jp/business/** — business LP (Tier 1 live-inspected second surface).
-3. **https://corp.timee.co.jp/** — corporate site: mission 「一人ひとりの時間を豊かに」, VISION 2030 「積み重ねた『信頼』が報われる社会をつくる」, brand tagline 「はたらくに"彩り"を。」.
-4. **https://note.com/_yyyyy/n/n5963cb9f10fe** — Timee product design manager Yasuhiro Yokota's note on organizing the product design team (brand-affiliated design発信物; design org, DesignDataOps, mobile design system in progress).
-5. **https://productpr.timee.co.jp/** — Timee official product PR note magazine incl. design magazine (login-gated for article bodies; discovered via WebSearch "タイミー デザイン").
-
-## Logo
-
-- `https://www.google.com/s2/favicons?domain=timee.co.jp&sz=128` → 1664 bytes, PNG 128×128 (valid brand mark, not generic globe). Note: the proxy issues a 301 to t1.gstatic.com — must follow redirects.
-- simpleicons.org/timee → 404; github.com/timee → unrelated personal account (not Timee Inc). favicon retained.