zugzbot 1.0.20 → 1.0.22

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

@@ -1,151 +0,0 @@
-# Webflow — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `webflow.com/` (corporate home — "The agentic web platform for modern businesses")
-- `webflow.com/pricing` (pricing — Free/Basic/CMS/Business/Enterprise tiers)
-
-### Raw observations
-
-**Start for free — Hero Primary (Webflow Blue)**
-- bg `rgb(20, 110, 245)` = **`#146ef5`** (Webflow Blue — distinctive cobalt-shifted blue)
-- color `#ffffff`
-- radius **4px**
-- padding 16×24
-- 51px / 16px·**500**
-- Use: hero Primary across home + pricing
-
-**Talk to Sales / SKIP TO MAIN CONTENT — Webflow Blue Compact**
-- bg `#146ef5`
-- color `#fff`
-- radius 4px (Talk to Sales) / 8px (Skip-nav)
-- padding 8×12 / 9.6×18
-- 35-36px / 12-16px·500
-- Use: header utility + A11y skip-nav
-
-**Top Banner — "Coming soon: Own your visibili..." (Webflow Blue strip)**
-- bg `#146ef5`
-- color `#fff`
-- radius 0px
-- padding 12px
-- 46px / 14px·500
-- Use: top announcement strip
-
-**Top-level Nav — Platform / Solutions / Resources**
-- bg transparent
-- color `rgb(8, 8, 8)` = **`#080808`** (Webflow Ink — ultra-dark near-black)
-- radius 0px
-- padding 20.775×0×19.177 (asymmetric subpixel — likely line-height-driven)
-- 67px / **15.9808px·500** (subpixel-rounded 16px)
-- Use: top nav
-
-**Made in Webflow — Footer Pill (Light Surface)**
-- bg `#ffffff`
-- color `#080808` Webflow Ink
-- radius **1440px** (full pill)
-- padding 6×10×6×6 (asymmetric — icon space)
-- 34px / 14px·500
-- Use: "Made in Webflow" credit pill (footer brand-credit chrome)
-
-### Single-system: 4px Webflow Blue + 8px A11y + 1440px credit pill
-
-Webflow uses **a disciplined 3-radius system**:
-- **Primary CTA**: `#146ef5` Webflow Blue **4px** / 51px hero (35px header) / 16-24×8-24 / 16px·**500**
-- **A11y skip-nav**: same Blue at **8px** (slightly more rounded for keyboard-focus accessibility)
-- **Made-in-Webflow credit pill**: 1440px (essentially full-pill) — only used for the brand-credit indicator
-- **Top banner strip**: 0px Webflow Blue (announcement strip — full-width sharp)
-- **Webflow Ink `#080808`** for body + nav text — ultra-dark near-black (warmer than `#000`)
-- All weight **500** — never bold
-- Subpixel padding values (20.775 / 19.177 / 15.9808) suggest **rem-based design tokens** at non-100% root font-size
-
-This refines the prior footer's "nav 3px ghost / 4×10 / 36px / 14px·500; warm dark canvas with agentic-positioning" — accurate for nav variant but missed:
-1. **`#146ef5` Webflow Blue Primary** (the brand-defining CTA color)
-2. **`#080808` Webflow Ink** (ultra-dark warm-cast near-black for body text)
-3. **1440px credit-pill** convention for "Made in Webflow"
-4. 4px hero radius (vs 3px nav)
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/webflow` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Webflow` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (webflow.com home + /pricing) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 /pricing | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | `#146ef5` Webflow Blue | `#146ef5` ✓ | n/a | ✓ canonical |
-| Primary radius | 4px (hero) / 8px (skip-nav) | 4px ✓ | n/a | ✓ tiered |
-| Primary padding | 16×24 (hero) / 8×12 (header) | 16×24 ✓ | n/a | ✓ contextual |
-| Primary height | 51 (hero) / 35-36 (header) | 51 ✓ | n/a | ✓ |
-| Primary font | 16px·500 (hero) / 12-14px·500 (header) | 16px·500 ✓ | n/a | ✓ |
-| Top banner | `#146ef5` 0px / 46px / 14px·500 | n/a | n/a | ✓ |
-| Made-in pill | `#fff` 1440px / 34px / 14px·500 | n/a | n/a | ✓ |
-| Body text | `#080808` Ink | `#080808` ✓ | n/a | ✓ |
-
-### Unresolved
-- **None.** Single-system canonical with documented 3-radius scale (4 hero / 8 a11y / 1440 credit-pill).
-
-### Earlier mistakes reverted
-- Prior footer captured nav variant 3px / 14px·500 only — canonical Primary is **`#146ef5` Webflow Blue 4px / 51px / 16px·500** (the brand-defining CTA, missed entirely).
-
----
-
-## Components in §4
-
-§4 (prior B10 batch) — needs:
-1. **Primary `#146ef5` Webflow Blue** + `#fff` text 4px / 51px / 16×24 / 16px·500
-2. **Header utility Webflow Blue** 4px / 35px / 8×12 / 16px·500
-3. **A11y skip-nav** Blue 8px / 36px (slightly more rounded for keyboard focus)
-4. **Top announcement banner** 0px Blue / 46px / 14px·500
-5. **Made-in-Webflow credit pill** `#fff` 1440px / 34px / 14px·500 (footer-only convention)
-6. **Webflow Ink `#080808`** body text + nav (ultra-dark warm near-black)
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- **Webflow founded 2013** in San Francisco
-  - Source: [Webflow — Wikipedia](https://en.wikipedia.org/wiki/Webflow)
-  - Source: [Acquired Podcast — Building Webflow w/ Vlad Magdalin](https://www.acquired.fm/episodes/building-webflow-and-the-no-code-movement-with-vlad-magdalin-co-founder-and-ceo)
-- Founders: **Vlad Magdalin (CEO)** + younger brother **Sergie Magdalin** + ex-Intuit colleague **Bryant Chou**
-- **Vlad quit Intuit in 2012**; Sergie + Chou joined that same year
-- **YC initially rejected November 2012** → **March 2013 HN prototype post → 10,000+ beta sign-ups → YC accelerator graduation 2013**
-  - Source: [Webflow blog — How Webflow got into Y Combinator](https://webflow.com/blog/the-story-of-how-webflow-and-y-combinator)
-  - Source: [Strixus — $4B Turnaround Webflow YC](https://strixus.com/entry/the-4b-turnaround-webflows-epic-journey-to-y-combinator-success-18134)
-- **Series C $120M (March 2022)** at **$4B valuation**
-- **Total ~$334.9M raised** (as of October 2023) from **Khosla Ventures, Y Combinator, Tim Draper, Accel, CapitalG, Silversmith Capital Partners, Draper Associates**
-  - Source: [Contrary Research — Webflow](https://research.contrary.com/company/webflow)
-  - Source: [Tracxn — Webflow](https://tracxn.com/d/companies/webflow/__4ydLbavRvsWn4Llop1QC4CHeauSFwj7rhDh41SueLuE)
-- **2024-2025 pivot**: "Agentic web platform for modern businesses" — confirmed live `<title>` 2026-05
-- **No-code visual development platform**: SaaS for designers; auto-generates HTML/CSS/JavaScript
-
-### Voice samples (live-verified)
-- *"Start for free"* — hero Primary <!-- verified: webflow.com 2026-05 -->
-- *"Talk to Sales"* — header utility <!-- verified: webflow.com -->
-- *"SKIP TO MAIN CONTENT"* — A11y skip-nav <!-- verified: webflow.com -->
-- *"Coming soon: Own your visibili..."* — top announcement strip <!-- verified: webflow.com -->
-- *"Platform / Solutions / Resources"* — top nav <!-- verified: webflow.com -->
-- *"Made in Webflow"* — footer credit pill <!-- verified: webflow.com -->
-
-### Existing §10-15 retained from prior augmentation (B10 batch)
-- Voice & Tone — visual-design + agentic-platform register
-- §11 narrative — Magdalin brothers + Chou + YC rejection-then-acceptance origin
-- §15 Standard cubic-bezier; no bounce
-
----
-
-**Verified-against:**
-- Tier 1: webflow.com/, webflow.com/pricing (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Wikipedia (Webflow), Acquired Podcast, Webflow blog (YC origin), Strixus, Contrary Research, Tracxn, Frederick AI, Y Combinator

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

@@ -1,330 +0,0 @@
----
-id: webflow
-name: Webflow
-country: US
-category: design-tools
-homepage: "https://webflow.com"
-primary_color: "#146ef5"
-logo:
-  type: simpleicons
-  slug: webflow
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    ink: "#080808"
-    primary: "#146ef5"
-    blue-400: "#3b89ff"
-    blue-300: "#006acc"
-    button-hover: "#0055d4"
-    purple: "#7a3dff"
-    pink: "#ed52cb"
-    green: "#00d722"
-    orange: "#ff6b00"
-    yellow: "#ffae13"
-    red: "#ee1d36"
-    gray-800: "#222222"
-    gray-700: "#363636"
-    gray-500: "#5a5a5a"
-    gray-300: "#ababab"
-    border: "#d8d8d8"
-    border-hover: "#898989"
-  typography:
-    family: { sans: "WF Visual Sans Variable", mono: "Inconsolata" }
-    display-hero:    { size: 80, weight: 600, lineHeight: 1.04, tracking: -0.8, use: "Hero headline" }
-    section:         { size: 56, weight: 600, lineHeight: 1.04, use: "Section heading" }
-    subheading:      { size: 32, weight: 500, lineHeight: 1.30, use: "Sub-heading" }
-    feature-title:   { size: 24, weight: 600, lineHeight: 1.30, use: "Feature title" }
-    body:            { size: 20, weight: 400, lineHeight: 1.40, use: "Body text" }
-    body-standard:   { size: 16, weight: 400, lineHeight: 1.60, tracking: -0.16, use: "Standard body" }
-    button:          { size: 16, weight: 500, lineHeight: 1.60, tracking: -0.16, use: "Button label" }
-    uppercase-label: { size: 15, weight: 500, lineHeight: 1.30, tracking: 1.5, use: "Uppercase label" }
-    caption:         { size: 14, weight: 400, lineHeight: 1.40, use: "Caption" }
-    badge:           { size: 12, weight: 550, lineHeight: 1.20, use: "Badge uppercase" }
-    micro:           { size: 10, weight: 500, lineHeight: 1.30, tracking: 1, use: "Micro uppercase" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
-  rounded: { sm: 2, md: 4, lg: 8, full: 9999 }
-  shadow:
-    cascade: "rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px"
-  components:
-    button-primary: { type: button, bg: "#146ef5", fg: "#ffffff", radius: 4, padding: "8px 16px", font: "16px/550 WF Visual Sans Variable", use: "Primary CTA, Webflow Blue" }
-    button-transparent: { type: button, fg: "#080808", radius: 4, padding: "8px 16px", font: "16px/550 WF Visual Sans Variable", use: "Text button, hover translate 6px" }
-    button-circle: { type: button, bg: "#ffffff", fg: "#080808", radius: 9999, padding: "12px", use: "Circular icon button" }
-    input-default: { type: input, bg: "#ffffff", fg: "#080808", radius: 4, padding: "8px 12px", font: "16px/500 WF Visual Sans Variable", use: "Form input, 1px #d8d8d8, focus #146ef5" }
-    card-standard: { type: card, bg: "#ffffff", radius: 8, padding: "24px", use: "Content card, 1px #d8d8d8 border" }
-    card-compact: { type: card, bg: "#ffffff", radius: 4, padding: "16px", use: "Smaller utility container, 1px #d8d8d8" }
-    badge-blue: { type: badge, bg: "#146ef5", fg: "#ffffff", radius: 4, padding: "2px 8px", font: "12px/550 WF Visual Sans Variable", use: "Solid blue badge" }
-    badge-tinted: { type: badge, fg: "#146ef5", radius: 4, padding: "2px 8px", font: "12px/550 WF Visual Sans Variable", use: "Subtle tinted badge, 10% blue bg" }
-    badge-micro: { type: badge, fg: "#080808", radius: 4, padding: "2px 6px", font: "10px/600 WF Visual Sans Variable", use: "Uppercase micro-label, +1px tracking" }
-  components_harvested: true
----
-
-# Design System Inspiration of Webflow
-
-## 1. Visual Theme & Atmosphere
-
-Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
-
-**Key Characteristics:**
-- White canvas with near-black (`#080808`) text
-- Webflow Blue (`#146ef5`) as primary brand + interactive color
-- WF Visual Sans Variable — custom variable font with weight 500–600
-- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
-- Conservative 4px–8px border-radius — sharp, not rounded
-- Multi-layer shadow stacks (5-layer cascading shadows)
-- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
-- translate(6px) hover animation on buttons
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Near Black** (`#080808`): Primary text
-- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
-- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
-- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
-- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
-
-### Secondary Accents
-- **Purple** (`#7a3dff`): `--_color---secondary--purple`
-- **Pink** (`#ed52cb`): `--_color---secondary--pink`
-- **Green** (`#00d722`): `--_color---secondary--green`
-- **Orange** (`#ff6b00`): `--_color---secondary--orange`
-- **Yellow** (`#ffae13`): `--_color---secondary--yellow`
-- **Red** (`#ee1d36`): `--_color---secondary--red`
-
-### Neutral
-- **Gray 800** (`#222222`): Dark secondary text
-- **Gray 700** (`#363636`): Mid text
-- **Gray 300** (`#ababab`): Muted text, placeholder
-- **Mid Gray** (`#5a5a5a`): Link text
-- **Border Gray** (`#d8d8d8`): Borders, dividers
-- **Border Hover** (`#898989`): Hover border
-
-### Shadows
-- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
-
-## 3. Typography Rules
-
-### Font: `WF Visual Sans Variable`, fallback: `Arial`
-
-| Role | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|--------|-------------|----------------|-------|
-| Display Hero | 80px | 600 | 1.04 | -0.8px | |
-| Section Heading | 56px | 600 | 1.04 | normal | |
-| Sub-heading | 32px | 500 | 1.30 | normal | |
-| Feature Title | 24px | 500–600 | 1.30 | normal | |
-| Body | 20px | 400–500 | 1.40–1.50 | normal | |
-| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
-| Button | 16px | 500 | 1.60 | -0.16px | |
-| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
-| Caption | 14px | 400–500 | 1.40–1.60 | normal | |
-| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
-| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
-| Code: Inconsolata (companion monospace font)
-
-## 4. Component Stylings
-
-### Buttons
-
-**Transparent**
-- Background: transparent
-- Text: `#080808`
-- Radius: 4px
-- Padding: 8px 16px
-- Font: 16px / 550 / WF Visual Sans Variable
-- Hover: translate(6px)
-- Use: Default text-style button — signature horizontal nudge on hover
-
-**Blue Primary**
-- Background: `#146ef5`
-- Text: `#ffffff`
-- Radius: 4px
-- Padding: 8px 16px
-- Font: 16px / 550 / WF Visual Sans Variable
-- Use: Primary CTA — Webflow Blue
-
-**White Circle**
-- Background: `#ffffff`
-- Text: `#080808`
-- Radius: 50%
-- Padding: 12px (icon button)
-- Use: Circular icon button
-
-### Inputs
-
-**Default**
-- Background: `#ffffff`
-- Text: `#080808`
-- Border: 1px solid `#d8d8d8`
-- Radius: 4px
-- Padding: 8px 12px
-- Font: 16px / 500 / WF Visual Sans Variable
-- Focus: border `#146ef5`
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
-
-### Cards
-
-**Standard**
-- Background: `#ffffff`
-- Border: 1px solid `#d8d8d8`
-- Radius: 8px
-- Padding: 24px
-- Use: Default content card — conservative sharp radius
-
-**Compact**
-- Background: `#ffffff`
-- Border: 1px solid `#d8d8d8`
-- Radius: 4px
-- Padding: 16px
-- Use: Smaller utility container
-
-### Badges
-
-**Blue Badge**
-- Background: `#146ef5`
-- Text: `#ffffff`
-- Radius: 4px
-- Padding: 2px 8px
-- Font: 12.8px / 550 / WF Visual Sans Variable
-- Use: Solid blue badge
-
-**Tinted**
-- Background: `rgba(20, 110, 245, 0.1)` (Blue-tinted at 10%)
-- Text: `#146ef5`
-- Radius: 4px
-- Padding: 2px 8px
-- Font: 12.8px / 550 / WF Visual Sans Variable
-- Use: Subtle tinted badge
-
-**Uppercase Micro**
-- Background: transparent
-- Text: `#080808`
-- Radius: 4px
-- Padding: 2px 6px
-- Font: 10px / 500-600 / WF Visual Sans Variable, uppercase, +1px tracking
-- Use: Micro-label uppercase badge
-
-## 5. Layout
-- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
-- Radius: 2px, 4px, 8px, 50% — conservative, sharp
-- Breakpoints: 479px, 768px, 992px
-
-## 6. Depth: 5-layer cascading shadow system
-
-## 7. Do's and Don'ts
-
-### Do
-- Set WF Visual Sans Variable as the type face, using weight 600 for headlines (e.g. the 80px / -0.8px Display Hero), 500 for buttons, and 400 for body
-- Reserve Webflow Blue (#146ef5) for the primary CTA, links, and focus borders on a white (#ffffff) canvas with near-black (#080808) text
-- Keep border-radius conservative and sharp on the 2px / 4px / 8px scale — 4px for buttons, inputs, and badges, 8px for standard cards
-- Apply the signature translate(6px) horizontal nudge on button hover, timed with motion-fast (150ms)
-- Deploy purple (#7a3dff), pink (#ed52cb), and green (#00d722) together as a SET for category coding and tier comparison — e.g. a 4px top-edge color bar on feature cards
-- Build depth with the 5-layer cascading shadow stack rather than a single flat drop shadow
-
-### Don't
-- Round functional elements beyond 8px, or make them pill-shaped or fully square — radius stays moderate between geometric and rounded
-- Use the secondary accents (purple #7a3dff, pink #ed52cb, green #00d722, etc.) on primary CTAs — those stay Webflow Blue #146ef5
-- Use a single secondary accent in isolation; the purple/pink/green trio only reads correctly when used together as category coding
-- Render the marketing surface in dark mode — keep it bright and airy on white (#ffffff)
-- Substitute another typeface for WF Visual Sans Variable or drift off its 400/500/600 weights
-- Write copy like "Revolutionary no-code" or aggressive Wix-comparison framing — both are forbidden under the agentic-web-platform voice
-
-## 8. Responsive: 479px, 768px, 992px
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Webflow Blue (`#146ef5`)
-- Heading / body text: Near Black (`#080808`)
-- Muted text: `~#666666` (estimated)
-- Page background: White (`#ffffff`)
-- Border default: `#d8d8d8`
-- Secondary accent: Purple (`#7a3dff`), Pink (`#ed52cb`), Green (`#00d722`)
-- These three secondary accents are used for category coding (e.g., feature cards, plan tiers) — never as primary CTAs.
-
-### Example Component Prompts
-- "Build a Webflow primary button: bg `#146ef5`, white text, `~8px` border-radius, `12px 24px` padding, WF Visual Sans Variable weight 600 16px. Hover: bg darkens ~10%."
-- "Create a feature card with category accent: white bg, `1px solid #d8d8d8` border, `16px` radius. Use the secondary palette (purple `#7a3dff` / pink `#ed52cb` / green `#00d722`) as a top-edge color bar (4px tall) to indicate category. Title 20px weight 600 `#080808`, body 14px weight 400."
-- "Design a navigation header: white sticky bar, Webflow logo left, link nav (14px weight 500 `#080808`, hover to `#146ef5`), Webflow Blue 'Sign up' CTA right. Subtle 1px bottom border on scroll."
-- "Create a plan tier comparison: 3 columns, each card with white bg, `16px` radius. The 'recommended' tier gets a colored top border (`#146ef5` for default, `#7a3dff` for premium) and a 'Most Popular' badge using that same color."
-
-### Iteration Guide
-1. Use Webflow Blue `#146ef5` only as the primary CTA color — secondary accents handle visual variety and category coding.
-2. The three secondary colors (purple/pink/green) work as a SET — use them together for tier comparisons or feature categories, not in isolation.
-3. Keep components on white — Webflow's marketing aesthetic is bright and airy, never dark mode for the marketing surface.
-4. Border-radius stays moderate (8-16px) — never pill or fully square. Webflow sits between the geometric (Vercel/Linear) and rounded (Mintlify) ends of the spectrum.
-5. Use WF Visual Sans Variable weight 600 for headlines and weight 500 for buttons. Body uses weight 400.
-
-## 10. Voice & Tone
-
-Webflow's voice is **agentic-web-platform and design-tool-confident.** "The agentic web platform for modern businesses" — recently pivoted from "no-code design tool" to "agentic web platform" positioning. Marketing copy emphasizes professional designers + business outcomes.
-
-| Context | Tone |
-|---|---|
-| CTA | Verb. "Get started for free", "Talk to sales", "Try Webflow" |
-| Marketing | Customer-quote-driven. Real customer sites as social proof |
-| Documentation | Visual-heavy, screenshot-driven |
-| Error | Specific. "Element constraints conflict. Adjust width or layout." |
-
-**Voice samples**
-- Marketing tagline: *"The agentic web platform for modern businesses"* <!-- verified: webflow.com homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary no-code". Aggressive Wix-comparison framing.
-
-## 11. Brand Narrative
-
-Webflow was founded **2013** in San Francisco by **Vlad Magdalin (CEO)** + younger brother **Sergie Magdalin** + ex-Intuit colleague **Bryant Chou** ([Webflow — Wikipedia](https://en.wikipedia.org/wiki/Webflow), [Acquired Podcast — Building Webflow w/ Vlad Magdalin](https://www.acquired.fm/episodes/building-webflow-and-the-no-code-movement-with-vlad-magdalin-co-founder-and-ceo)). Vlad **quit Intuit in 2012**; Sergie + Chou joined that same year. **Famously rejected by Y Combinator November 2012**, then **published working prototype on Hacker News March 2013** → **10,000+ beta sign-ups**, eventually **graduating from YC's accelerator in 2013** ([Webflow blog — How Webflow got into Y Combinator](https://webflow.com/blog/the-story-of-how-webflow-and-y-combinator), [Strixus — $4B Turnaround Webflow YC](https://strixus.com/entry/the-4b-turnaround-webflows-epic-journey-to-y-combinator-success-18134)). Visual web design tool that competed with WordPress for marketing-site builders. **Series C $120M (March 2022)** at **$4B valuation** with **Khosla Ventures, Y Combinator, Tim Draper, Accel, CapitalG, Silversmith Capital Partners, Draper Associates** — total **~$334.9M raised** as of October 2023 ([Contrary Research — Webflow](https://research.contrary.com/company/webflow), [Tracxn — Webflow](https://tracxn.com/d/companies/webflow/__4ydLbavRvsWn4Llop1QC4CHeauSFwj7rhDh41SueLuE)). The **2024-2025 pivot to "agentic web platform"** positions Webflow for the AI-driven web era while preserving the canvas-first design DNA — confirmed via live `<title>` "Webflow: The agentic web platform for modern businesses" 2026-05.
-
-## 12. Principles
-
-1. **Designer-first canvas.** *UI implication:* canvas + properties layout, not code-only.
-2. **Moderate radius (8-16px).** *UI implication:* sit between geometric (Vercel) and rounded (Mintlify).
-3. **WF Visual Sans Variable.** weight 600 / 500 / 400. *UI implication:* don't substitute.
-4. **Agentic positioning.** *UI implication:* AI features first-class in nav.
-5. **Real customer sites as proof.** *UI implication:* lead with customer showcases.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Webflow user segments (independent designers, agency owners, marketing teams), not individual people.*
-
-**Sofia Russo, 33, Milan.** Indie designer. Webflow for client marketing sites.
-
-**Henrik Sondergaard, 41, Copenhagen.** Agency founder. Multi-client Webflow projects.
-
-**Marcus Chen, 38, San Francisco.** Marketing lead at SaaS. Webflow for landing pages without engineering.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no projects)** | "Create new project" + template gallery |
-| **Empty (canvas)** | "Add a section" CTA |
-| **Loading (project opening)** | Skeleton canvas |
-| **Loading (publishing)** | Build progress with status |
-| **Error (publish)** | Specific cause + retry |
-| **Error (CMS)** | Field-level inline message |
-| **Success (published)** | Live URL + analytics preview |
-| **Success (saved)** | Implicit |
-| **Skeleton (project list)** | 8-16px placeholders |
-| **Disabled (free plan limit)** | Upgrade link |
-| **Loading (long task)** | Persistent progress |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Selection |
-| `motion-fast` | 150ms | Hover |
-| `motion-standard` | 250ms | Modal, panel |
-
-Standard cubic-bezier. `prefers-reduced-motion: reduce` removes hover transitions.
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 63 — Apple-tier)
-**Tier 1 sources:** webflow.com home + /pricing (live DOM via playwright — Primary **`#146ef5` Webflow Blue** + `#fff` text 4px / 51px / 16×24 / 16px·500 + A11y skip-nav 8px / 36px + Top banner 0px Blue strip + **Made-in-Webflow credit pill 1440px** + body **`#080808` Webflow Ink** ultra-dark warm-cast near-black).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders/YC):** Wikipedia (Webflow), Acquired Podcast (Vlad Magdalin), Webflow blog (How Webflow got into YC after Nov 2012 rejection), Strixus, Contrary Research, Tracxn, Frederick AI.
-**Style ref:** `notion`. **Conflicts unresolved:** none. **Earlier addition:** Webflow Blue `#146ef5` + Webflow Ink `#080808` body + 1440px credit-pill + 8px A11y sub-tier missed by prior 3px-nav-only pass.

package/.opencode/oh-my-design/web/references/webflow/README.md

@@ -1,23 +0,0 @@
-# Webflow Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) extracted from the public [Webflow](https://webflow.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-| `preview.html` | Interactive design token catalog (light) |
-| `preview-dark.html` | Interactive design token catalog (dark) |
-
-Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/webflow/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Webflow design language.
-
-## Preview
-
-A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
-
-### Dark Mode
-![Webflow Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/webflow/preview-dark-screenshot.png)
-
-### Light Mode
-![Webflow Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/webflow/preview-screenshot.png)