zugzbot 1.2.0 → 1.4.0

package/.opencode/oh-my-design/design-md/framer/.verification.md

@@ -1,147 +0,0 @@
-# Framer — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `framer.com/` (home — no-code website builder positioning)
-- `framer.com/pricing` (pricing — Basic/Pro/Scale/Enterprise tiers)
-
-### Raw observations
-
-**Sign up — Header Compact**
-- bg `#ffffff`
-- color black (computed `rgb(0,0,238)` is the inherited `<a>` default — actual rendered text is white-on-white inverted via component-level styling)
-- radius **15px**
-- padding 6×10×7
-- 28px / 12px·400
-- Use: header utility CTA
-
-**Start for free / Get matched — Hero Primary White Pill**
-- bg `#ffffff`
-- radius **100px** (full pill)
-- padding 10×14
-- 35px / 12px·400
-- Use: hero Primary across home
-
-**Start with AI / Find an Expert — Hero Secondary Translucent**
-- bg `rgba(255, 255, 255, 0.15)` (15% white over dark hero)
-- radius 100px
-- padding 10×14
-- 35px / 12px·400
-- Use: hero Secondary on dark hero
-
-**View Expert — Card Inline Pill**
-- bg `#ffffff`
-- color `#000`
-- radius 100px
-- padding 10×15
-- 35px / 12px·400
-- Use: per-Expert card inline CTA
-
-**Start with Pro — Pricing Featured Tier (Framer Blue)**
-- bg `rgb(0, 153, 255)` = **`#0099ff`** (Framer Blue accent)
-- radius 100px
-- padding 10×14
-- 35px / 12px·400
-- Use: pricing featured tier ("Most popular")
-
-**Start with Basic / Scale — Pricing Default (Translucent)**
-- bg `rgba(255, 255, 255, 0.1)` (10% white)
-- radius 100px
-- padding 10×14
-- 35px / 12px·400
-- Use: pricing non-featured tiers
-
-**Compact pricing variant**
-- bg `#1d1d1d` Charcoal (Basic/Scale) or `#fff` (Pro)
-- radius 100px
-- padding 8×12
-- 29px / 12px·400
-- Use: pricing card secondary CTA tier
-
-### Single-system: 100px Pill (35px hero / 29px compact / 28px header)
-
-Framer uses **one consistent pill geometry** across home + pricing:
-- All radii **100px** (full-pill) except header utility at **15px** (rounded-rect)
-- Three height tiers: 35px (hero/main) / 29px (pricing compact) / 28px (header utility)
-- Three fills: `#fff` Primary, `rgba(255,255,255,0.1-0.15)` Translucent on dark hero, `#0099ff` Framer Blue (featured-tier accent)
-- Font 12px·400 — never bold; the radius and surface contrast carry the weight
-
-This confirms the §11 "design-tool-first / craft" register — pill chrome, generous whitespace, blue accent only at the moment of selection.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/framer` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Framer` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (framer.com home + pricing) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 pricing | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | `#fff` | `#fff` (Pro tier shows Framer Blue `#0099ff`) | n/a | ✓ both canonical (white default + blue featured) |
-| Primary radius | 100px (hero) / 15px (header) | 100px / 100px compact | n/a | ✓ pill except header |
-| Primary padding | 10×14 (hero) / 6×10×7 (header) | 10×14 / 8×12 | n/a | ✓ contextual |
-| Primary height | 35 (hero) / 28 (header) | 35 / 29 (compact) | n/a | ✓ tiered |
-| Primary font | 12px·400 | 12px·400 ✓ | n/a | ✓ |
-| Translucent variant | `rgba(255,255,255,0.15)` (hero) | `rgba(255,255,255,0.1)` (pricing) | n/a | ✓ contextual |
-| Framer Blue | n/a | `#0099ff` (featured tier) | n/a | ✓ accent |
-
-### Unresolved
-- **None.** Single-system canonical.
-
-### Earlier mistakes reverted
-- Prior footer claimed "Sign up `#fff` 15px / 6×10 / 28px / 12px·400; nav ghost 8px" — only captured the header utility variant. The actual canonical Hero Primary is **100px full-pill at 35px height** with translucent secondary; Framer Blue `#0099ff` exists as featured-tier accent. §4 should document all three tiers (header 28 / hero 35 / compact 29) and the Framer Blue accent.
-
----
-
-## Components in §4
-
-§4 (prior B3 batch) — should add Framer Blue `#0099ff` as a documented accent (featured pricing tier), translucent `rgba(255,255,255,0.1-0.15)` Secondary variant, and three-tier height system.
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- **Framer founded 2014** in **Amsterdam**
-  - Source: [Tracxn — Framer](https://tracxn.com/d/companies/framer/__WwABy6r40KPszbW9ZaEHR6v4BX_MP8437KgHYLns7fo)
-- Founders: **Koen Bok (CEO)** + **Jorn van Dijk** — both Dutch ex-Facebook
-- **Previously co-founded design studio Sofa**, **acquired by Facebook 2011** — shipped Messages, Ads, Video, Photos at Facebook
-- **Framer Motion** animation library — open-source, became React ecosystem standard
-- **Pivot 2022-2023** from code-based prototyping to no-code website builder
-- **Seed $1.35M Dec 23 2014**
-- **Series B €25.5M (2022)**
-  - Source: [Silicon Canals — Framer €25.5M](https://siliconcanals.com/amsterdams-framer-secures-25-5m/)
-- **Series C $27M Sep 2023** — Meritech Capital + Atomico + Accel + Foundation Capital
-- **Series D $100M Aug 13 2025** — Meritech + Atomico co-led, with WiL + HV Capital — **$2B "double-unicorn"**
-  - Source: [TechCrunch — Framer $2B](https://techcrunch.com/2025/08/28/no-code-website-builder-framer-reaches-2b-valuation/)
-  - Source: [Sifted — Framer $100M](https://sifted.eu/articles/framer-raises-100m)
-- **Total funding ~$163M** across 5 rounds
-
-### Voice samples (live-verified)
-- *"Sign up"* — header utility <!-- verified: framer.com 2026-05 -->
-- *"Start for free"* — hero Primary <!-- verified: framer.com -->
-- *"Start with AI"* — hero Secondary translucent <!-- verified: framer.com -->
-- *"Find an Expert"* / *"Get matched"* / *"View Expert"* — Expert directory <!-- verified: framer.com -->
-- *"Start with Basic / Pro / Scale"* / *"Request trial"* — pricing tier CTAs <!-- verified: framer.com/pricing -->
-
-### Existing §10-15 retained from prior augmentation (B3 batch)
-- Voice & Tone — design-tool-craft register
-- §11 narrative — Bok/van Dijk Sofa→Facebook lineage, 2022-2023 pivot
-- §15 Spring physics motion (Framer Motion DNA)
-
----
-
-**Verified-against:**
-- Tier 1: framer.com/, framer.com/pricing (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Tracxn, Silicon Canals, TechCrunch, Sifted, I amsterdam, Crunchbase

package/.opencode/oh-my-design/design-md/framer/DESIGN.md

@@ -1,431 +0,0 @@
----
-id: framer
-name: Framer
-country: US
-category: design-tools
-homepage: "https://www.framer.com"
-primary_color: "#0055ff"
-logo:
-  type: simpleicons
-  slug: framer
-verified: "2026-05-15"
-omd: "0.1"
-ds:
-  name: Framer Brand Guidelines
-  url: "https://www.framer.com/brand"
-  type: brand
-  description: Framer's brand and trademark guidelines with logo rules and color palette.
-  og_image: "https://framerusercontent.com/assets/MFmOCFlEnwFAS9IP2HbUEH68axo.jpg"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    canvas: "#000000"
-    on-dark: "#ffffff"
-    accent: "#0099ff"
-    muted: "#a6a6a6"
-    surface-elevated: "#090909"
-    link-default: "#0000ee"
-  typography:
-    family: { sans: "GT Walsheim Framer Medium", mono: "Azeret Mono" }
-    display-hero:    { size: 110, weight: 500, lineHeight: 0.85, tracking: -5.5, use: "Hero display, extreme compressed tracking" }
-    section-display: { size: 85, weight: 500, lineHeight: 0.95, tracking: -4.25, use: "Section display headlines" }
-    section-heading: { size: 62, weight: 500, lineHeight: 1.00, tracking: -3.1, use: "Section headings" }
-    feature-heading: { size: 32, weight: 500, lineHeight: 1.13, tracking: -1, use: "Feature headings" }
-    card-title:      { size: 24, weight: 400, lineHeight: 1.30, tracking: -0.01, use: "Card titles, Inter" }
-    feature-title:   { size: 22, weight: 700, lineHeight: 1.20, tracking: -0.8, use: "Feature titles, Inter" }
-    body-lg:         { size: 18, weight: 400, lineHeight: 1.30, tracking: -0.01, use: "Large body, Inter" }
-    body:            { size: 15, weight: 400, lineHeight: 1.30, tracking: -0.01, use: "Standard body / nav, Inter" }
-    caption:         { size: 14, weight: 400, lineHeight: 1.40, use: "Captions, Inter" }
-    label:           { size: 13, weight: 500, lineHeight: 1.60, use: "Labels, Inter" }
-    code:            { size: 10.4, weight: 400, lineHeight: 1.60, use: "Micro code, Azeret Mono" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 15, lg: 20, xl: 30, section: 80 }
-  rounded: { sm: 5, md: 8, lg: 15, full: 9999 }
-  shadow:
-    ring-blue: "rgba(0,153,255,0.15) 0px 0px 0px 1px"
-    ring-dark: "rgb(9,9,9) 0px 0px 0px 2px"
-    floating: "rgba(255,255,255,0.1) 0px 0.5px 0px 0.5px, rgba(0,0,0,0.25) 0px 10px 30px"
-  components:
-    button-primary: { type: button, bg: "#ffffff", fg: "#000000", radius: "100px", padding: "10px 15px", font: "15px / 400", use: "Solid white pill, primary CTA on dark" }
-    button-frosted: { type: button, bg: "rgba(255,255,255,0.1)", fg: "#ffffff", radius: "40px", padding: "10px 15px", font: "15px / 400", use: "Glass-effect frosted pill on dark" }
-    button-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: "40px", padding: "10px 15px", use: "Tertiary text-only action, frosted on hover" }
-    input-dark: { type: input, bg: "#090909", fg: "#ffffff", radius: "8px", padding: "10px 12px", use: "Dark theme form input; focus #0099ff ring + blue glow" }
-    card-dark: { type: card, bg: "#090909", fg: "#ffffff", radius: "12px", padding: "24px", use: "Standard dark surface card with blue ring border" }
-    card-elevated: { type: card, bg: "#090909", fg: "#ffffff", radius: "12px", padding: "24px", use: "Elevated card, white top highlight + deep ambient shadow" }
-    badge-default: { type: badge, bg: "rgba(255,255,255,0.1)", fg: "#ffffff", radius: "9999px", padding: "4px 10px", font: "12px / 400", use: "Frosted pill badge on dark" }
-  components_harvested: true
----
-
-# Design System Inspiration of Framer
-
-## 1. Visual Theme & Atmosphere
-
-Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.
-
-The typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) that gives even small text a refined, custom feel. Framer Blue (`#0099ff`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.
-
-The overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.
-
-**Key Characteristics:**
-- Pure black (`#000000`) void canvas — absolute dark, not warm or gray-tinted
-- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
-- Framer Blue (`#0099ff`) as the sole accent color — cold, electric, precise
-- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements
-- Product screenshots as hero art — the tool IS the marketing
-- Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces
-- Extensive OpenType feature usage across Inter for refined micro-typography
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity
-- **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds
-- **Framer Blue** (`#0099ff`): Primary accent color — links, borders, ring shadows, interactive highlights
-
-### Secondary & Accent
-- **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces
-- **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation
-
-### Surface & Background
-- **Void Black** (`#000000`): Page background, primary canvas
-- **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark
-- **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states
-
-### Neutrals & Text
-- **Pure White** (`#ffffff`): Heading text, high-emphasis body text
-- **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information
-- **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces
-
-### Semantic & Accent
-- **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings
-- **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements
-- **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)
-
-### Gradient System
-- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth
-- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity
-
-## 3. Typography Rules
-
-### Font Family
-- **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium` — custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif
-- **Body/UI**: `Inter Variable` / `Inter` — variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`
-- **Accent**: `Mona Sans` — GitHub's open-source font, used for select elements at ultra-light weight (100)
-- **Monospace**: `Azeret Mono` — companion mono for code and technical labels
-- **Rounded**: `Open Runde` — small rounded companion font for micro-labels
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
-| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
-| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
-| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
-| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
-| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
-| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
-| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
-| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
-| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
-| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
-| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
-| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
-| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
-| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
-| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
-| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
-| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
-
-### Principles
-- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless
-- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`), creating a subtly custom feel even at body sizes
-- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone
-- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length
-
-## 4. Component Stylings
-
-### Buttons
-
-**Solid White Pill**
-- Background: `#ffffff`
-- Text: `#000000`
-- Radius: 100px (pill)
-- Padding: 10px 15px
-- Font: 15px / 400 / Inter
-- Use: Primary CTA — clean, high-contrast on dark
-
-**Frosted Pill**
-- Background: `rgba(255, 255, 255, 0.1)`
-- Text: `#ffffff`
-- Radius: 40px
-- Padding: 10px 15px
-- Font: 15px / 400 / Inter
-- Use: Glass-effect button on dark surfaces — translucent, ambient
-
-**Ghost**
-- Background: transparent
-- Text: `#ffffff`
-- Radius: 40px
-- Padding: 10px 15px
-- Hover: frosted background `rgba(255, 255, 255, 0.1)`
-- Use: Tertiary action — text-only
-
-### Inputs
-
-**Dark Input**
-- Background: `#090909`
-- Text: `#ffffff`
-- Border: 1px solid `rgba(255, 255, 255, 0.1)`
-- Radius: 8px
-- Padding: 10px 12px
-- Focus: 1px solid `#0099ff` ring with `rgba(0, 153, 255, 0.15)` glow
-- Placeholder: `rgba(255, 255, 255, 0.4)`
-- Use: Form input on dark theme (marketing site has minimal forms)
-
-### Cards
-
-**Dark Surface Card**
-- Background: `#090909`
-- Text: `#ffffff`
-- Radius: 12px
-- Padding: 24px
-- Shadow: `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` (Framer Blue ring border)
-- Use: Standard dark surface card with blue ring border
-
-**Elevated Card**
-- Background: `#090909`
-- Text: `#ffffff`
-- Radius: 12px
-- Padding: 24px
-- Shadow: `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px`
-- Use: Elevated card — subtle top highlight + deep ambient shadow
-
-**Product Screenshot**
-- Background: transparent (or `#090909`)
-- Radius: 10px
-- Padding: 0px
-- Use: Software UI preview frame within dark containers
-
-### Badges
-
-**Default**
-- Background: `rgba(255, 255, 255, 0.1)`
-- Text: `#ffffff`
-- Radius: 9999px (pill)
-- Padding: 4px 10px
-- Font: 12px / 400 / Inter
-- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — frosted pill badge on dark theme.
-
-### Navigation
-- **Dark floating nav bar**: Black background with frosted glass effect, white text links
-- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change
-- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav
-- **Mobile**: Collapses to hamburger menu, maintains dark theme
-- **Sticky behavior**: Nav remains fixed at top on scroll
-
-### Image Treatment
-- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)
-- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation
-- **16:9 and custom aspect ratios**: Product demos fill their containers
-- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow
-
-### Trust & Social Proof
-- Customer logos and testimonials in muted gray on dark surfaces
-- Minimal ornamentation — the product screenshots serve as the trust signal
-
-## 5. Layout Principles
-
-### Spacing System
-- **Base unit**: 8px
-- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
-- **Section padding**: Large vertical spacing (80px–120px between sections)
-- **Card padding**: 15px–30px internal padding
-- **Component gaps**: 8px–20px between related elements
-
-### Grid & Container
-- **Max width**: ~1200px container, centered
-- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases
-- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)
-
-### Whitespace Philosophy
-- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks
-- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space
-- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text
-
-### Border Radius Scale
-- **1px**: Micro-elements, nearly squared precision edges
-- **5px–7px**: Small UI elements, image thumbnails — subtly softened
-- **8px**: Standard component radius — code blocks, buttons, interactive elements
-- **10px–12px**: Cards, product screenshots — comfortably rounded
-- **15px–20px**: Large containers, feature cards — generously rounded
-- **30px–40px**: Navigation pills, pagination — noticeably rounded
-- **100px**: Full pill shape — primary CTAs, tag elements
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |
-| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines — Framer Blue glow ring |
-| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |
-| Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |
-
-### Shadow Philosophy
-Framer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:
-- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element
-- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface
-- **Deep ambient shadows** for true floating elements — `rgba(0, 0, 0, 0.25)` at large spread (30px)
-
-### Decorative Depth
-- **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas
-- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity
-
-## 7. Do's and Don'ts
-
-### Do
-- Use pure black (`#000000`) as the primary background — not dark gray, not charcoal
-- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)
-- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons
-- Use Framer Blue (`#0099ff`) exclusively for interactive accents — links, borders, focus states
-- Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds
-- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand
-- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)
-- Let product screenshots be the visual centerpiece — the tool markets itself
-- Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment
-
-### Don't
-- Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)
-- Apply bold (700+) weight to GT Walsheim display text — medium 500 only
-- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system
-- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)
-- Add decorative imagery, illustrations, or icons — the product IS the illustration
-- Use positive letter-spacing on headlines — everything is compressed, negative tracking
-- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients
-- Place light/white backgrounds behind content sections — the void is sacred
-- Use serif or display-weight fonts — the system is geometric sans-serif only
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |
-| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |
-| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |
-
-### Touch Targets
-- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum
-- Nav links: 15px text with generous padding for touch accessibility
-- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach
-
-### Collapsing Strategy
-- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint
-- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally
-- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile
-- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios
-- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile
-
-### Image Behavior
-- Product screenshots are responsive, scaling within their container boundaries
-- No art direction changes — same crops across breakpoints
-- Dark background ensures screenshots maintain visual impact at any size
-- Screenshots lazy-load as user scrolls into view
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary Background: Void Black (`#000000`)
-- Primary Text: Pure White (`#ffffff`)
-- Accent/CTA: Framer Blue (`#0099ff`)
-- Secondary Text: Muted Silver (`#a6a6a6`)
-- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)
-- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)
-
-### Example Component Prompts
-- "Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text"
-- "Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text"
-- "Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA"
-- "Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)"
-- "Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button"
-
-### Iteration Guide
-When refining existing screens generated with this design system:
-1. Focus on ONE component at a time — the dark canvas makes each element precious
-2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable
-3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links
-4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic
-5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)` — too opaque looks like a bug, too transparent disappears
-
-## 10. Voice & Tone
-
-Framer's voice is **designer-warm and craft-confident** — speaks like a tool team that genuinely loves design conventions. Marketing emphasizes the joy of building professional websites without code. Hero copy keeps lower-case for warmth, headline-as-statement.
-
-| Context | Tone |
-|---|---|
-| CTA | Verb. "Start for free", "Get started", "Sign up" |
-| Marketing | Single claim, big screenshots dominate |
-| Documentation | Visual-first, screenshots, clearly linked tutorials |
-| Error (publishing) | Specific. "Domain SSL provisioning. Try again in 5 minutes." |
-
-**Voice samples**
-- Marketing tagline: *"Create a professional website, free."* <!-- verified: framer.com homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary website builder", "magic". Aggressive "compete with Webflow" framing.
-
-## 11. Brand Narrative
-
-Framer was founded **2014** in **Amsterdam** by **Koen Bok (CEO)** and **Jorn van Dijk** — both Dutch ex-Facebook designer-engineers who **previously co-founded the design studio Sofa**, acquired by Facebook in 2011 (where they shipped Messages, Ads, Video, Photos product surfaces) ([Tracxn — Framer](https://tracxn.com/d/companies/framer/__WwABy6r40KPszbW9ZaEHR6v4BX_MP8437KgHYLns7fo), [Jorn van Dijk personal](https://jornvandijk.com/)). Originally a **code-based prototyping tool** for designers at Apple/Google/Facebook (and the parent of the **Framer Motion** animation library now used across the React ecosystem). **Major pivot 2022-2023** to a no-code website builder competing with Webflow, while preserving the Framer Motion craft DNA. Funding ladder: **$1.35M Seed (Dec 2014)** → **€25.5M Series B (2022)** → **$27M Series C (Sep 2023)** led by **Meritech Capital** with **Atomico, Accel, Foundation Capital** → **$100M Series D (Aug 13 2025)** led by **Meritech + Atomico** with **WiL + HV Capital**, valuing Framer at **$2B "double-unicorn"** ([TechCrunch — Framer $2B](https://techcrunch.com/2025/08/28/no-code-website-builder-framer-reaches-2b-valuation/), [Sifted](https://sifted.eu/articles/framer-raises-100m), [I amsterdam — double unicorn](https://www.iamsterdam.com/en/business/framer-raises-100m-becoming-a-double-unicorn)). **Total raised ~$163M.** The brand voice tracks this evolution — design-tool-first identity, now a website tool that hasn't lost the craft register.
-
-## 12. Principles
-
-1. **Designer aesthetic, not engineer aesthetic.** *UI implication:* visual-first interfaces; canvas + properties, never code-only views in chrome.
-2. **Pill shapes signal "polished".** Any squared corner breaks the Framer aesthetic. *UI implication:* nav, buttons, cards — all pill-radius (24-36px).
-3. **Frosted glass for depth.** `rgba(255,255,255,0.1)` overlays. *UI implication:* layered floating panels never opaque.
-4. **Motion is the brand.** Framer Motion library. *UI implication:* every interaction has spring physics; static UIs feel un-Framer.
-5. **Live publish.** *UI implication:* "Publish" CTA shows live preview URL + redeploys without page reload.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Framer user segments (independent designers, design teams shipping marketing sites, agencies), not individual people.*
-
-**Sofia Russo, 32, Milan.** Indie designer shipping client marketing sites. Replaced Webflow workflow with Framer for the better animation defaults.
-
-**Henrik Sondergaard, 38, Copenhagen.** Lead designer at SaaS startup. Builds the public marketing site in Framer; engineers handle product app separately.
-
-**Alex Park, 24, Seoul.** Junior designer building portfolio site. Framer template ecosystem made first launch possible without engineering help.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (canvas)** | "Add a section" CTA + template gallery |
-| **Empty (no projects)** | "Create your first project" + template browser |
-| **Loading (publishing)** | Spring-animated progress chip with build status |
-| **Loading (asset)** | Per-asset placeholder with shimmer |
-| **Error (publish)** | Specific reason + retry, never blocking |
-| **Error (CMS)** | Field-level inline message |
-| **Success (published)** | Spring-bounce confirmation + URL copy |
-| **Success (asset uploaded)** | Inline preview replaces placeholder |
-| **Skeleton (project list)** | Frosted glass placeholders |
-| **Disabled (free plan limit)** | 0.5 opacity + upgrade link |
-| **Loading (collaborator typing)** | Avatar + cursor indicator on canvas |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Selection |
-| `motion-fast` | 150ms | Hover |
-| `motion-spring` | variable | Click → action commits with spring physics |
-| `motion-standard` | 250ms | Modal, panel |
-
-Easings: spring physics is the signature. **Spring on every commit** — buttons, modals, panels. `prefers-reduced-motion: reduce` collapses spring to opacity-only fade.
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 25 — Apple-tier)
-**Tier 1 sources:** framer.com home + /pricing (live DOM via playwright — Primary `#fff` 100px full-pill three-tier {hero 35px / pricing-compact 29px / header-utility 15px-radius 28px} 10×14 / 12px·400; Translucent Secondary `rgba(255,255,255,0.10-0.15)` same geometry; **Framer Blue `#0099ff`** featured-pricing-tier accent).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders):** Tracxn, Silicon Canals, TechCrunch (2025-08 $2B), Sifted, I amsterdam, Crunchbase.
-**Style ref:** `notion`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer captured only header utility 15px-rect; canonical Hero Primary is 100px full-pill 35px height + Framer Blue `#0099ff` featured accent.

package/.opencode/oh-my-design/design-md/framer/README.md

@@ -1,23 +0,0 @@
-# Framer Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/framer/DESIGN.md) extracted from the public [Framer](https://framer.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/framer/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Framer 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
-![Framer Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/framer/preview-dark-screenshot.png)
-
-### Light Mode
-![Framer Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/framer/preview-screenshot.png)