zugzbot 1.3.0 → 1.4.0

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

@@ -1,396 +0,0 @@
----
-id: loom
-name: Loom
-country: US
-category: productivity
-homepage: "https://www.loom.com"
-primary_color: "#1868db"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=loom.com&sz=128"
-verified: "2026-06-08"
-added: "2026-06-08"
-omd: "0.1"
-tokens:
-  source: live-extract
-  extracted: "2026-06-08"
-  components_harvested: true
-  note: "primary = live Loom blue #1868db (pill CTA, white text); brand accents (coral #ff613d, purple #bf63f3, deep purple #48245d) appear in marketing illustration gradients"
-  colors:
-    primary: "#1868db"
-    primary-hover: "#0052cc"
-    brand: "#1868db"
-    canvas: "#ffffff"
-    surface-blue: "#e9f2fe"
-    foreground: "#101214"
-    body: "#292a2e"
-    muted: "#7d818a"
-    on-primary: "#ffffff"
-    ink: "#101214"
-    accent-coral: "#ff613d"
-    accent-purple: "#bf63f3"
-    accent-deep: "#48245d"
-  typography:
-    family: { display: "Charlie Display", text: "Charlie Text" }
-    display-hero: { size: 63, weight: 700, lineHeight: 1.03, tracking: 0, use: "Hero headline, bold confident statement" }
-    display-lg:   { size: 44, weight: 700, lineHeight: 1.14, tracking: 0, use: "Section headlines" }
-    heading:      { size: 33, weight: 700, lineHeight: 1.27, tracking: 0, use: "Sub-section / card headings" }
-    lead:         { size: 27, weight: 400, lineHeight: 1.52, use: "Lead paragraph, intro copy" }
-    body:         { size: 16, weight: 400, lineHeight: 1.5, use: "Standard reading text, nav links" }
-    button:       { size: 16, weight: 700, lineHeight: 1.0, use: "Primary button label" }
-    button-light: { size: 16, weight: 400, lineHeight: 1.0, use: "Header CTA label" }
-  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 8, md: 16, lg: 24, full: 9999 }
-  shadow:
-    soft: "rgba(0,0,0,0.03) 0px 4px 6.4px 0px"
-    standard: "rgba(0,0,0,0.05) 0px 3px 9.6px 0px"
-  components:
-    button-primary: { type: button, bg: "#1868db", fg: "#ffffff", radius: "9999px", padding: "16px 23px", height: "58px", font: "16px / 700", hover: "bg #0052cc", use: "Primary CTA (Get Loom for free, Download now, Learn more)" }
-    button-light: { type: button, bg: "#e9f2fe", fg: "#101214", radius: "9999px", padding: "16px 23px", height: "58px", font: "16px / 700", use: "Secondary actions (Contact Sales, Install Chrome Extension, See all use cases)" }
-    button-dark: { type: button, bg: "#101214", fg: "#ffffff", radius: "9999px", padding: "16px 23px", height: "58px", font: "16px / 700", use: "Alternate emphasis CTA (Learn more, Explore our blog)" }
-    icon-button: { type: button, bg: "#ffffff", fg: "#292a2e", radius: "9999px", height: "56px", shadow: "rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px", use: "Testimonial carousel previous/next controls" }
-    footer: { type: card, bg: "#e9f2fe", fg: "#292a2e", use: "Footer background, links hover toward #1868db" }
----
-
-# Design System Inspiration of Loom
-
-## 1. Visual Theme & Atmosphere
-
-Loom's website projects the friendly confidence of a consumer-grade tool that quietly does serious work. The canvas is pure white (`#ffffff`) with near-black ink (`#101214`) for headlines and a softer charcoal (`#292a2e`) for body copy, while a single saturated blue (`#1868db`) carries every primary action. This is not the cold corporate blue of legacy enterprise software; it is a bright, approachable cobalt that reads as energetic and trustworthy. The overall impression is of a product that wants you to press record immediately — clean, bold, and unintimidating.
-
-The defining typographic gesture is the **Charlie** type family — `Charlie Display` for headlines and `Charlie Text` for body — a humanist sans with warm, rounded terminals. Headlines run heavy at weight 700 and large sizes (the hero lands around 63px), giving the page a punchy editorial loudness that is the opposite of the whisper-weight restraint seen in fintech systems. Where Stripe murmurs, Loom announces. The hero copy ("One video is worth a thousand words") is set in this bold display face with tight line-height (~1.03), creating dense, declarative blocks that feel like a magazine cover.
-
-Loom's other signature is its commitment to the **full-pill geometry**. Every button — primary, secondary, dark, and the circular carousel controls — uses a `9999px` border-radius. Nothing on the page is sharp-cornered; the rounding signals softness and consumer-friendliness. Surfaces lift off the page with gentle, low-opacity multi-layer shadows (`rgba(0,0,0,0.03)` and `rgba(0,0,0,0.05)` at small blur), so depth feels airy rather than dramatic. Marketing illustrations introduce playful gradient accents — coral (`#ff613d`), bright purple (`#bf63f3`), and a deep aubergine (`#48245d`) — that keep the otherwise blue-and-white palette from feeling sterile.
-
-**Key Characteristics:**
-- Charlie Display / Charlie Text — a warm humanist sans, bold at display sizes
-- Weight 700 headlines as the signature — punchy, declarative, consumer-confident
-- Single dominant action color: Loom blue (`#1868db`) on pure white
-- Full-pill geometry (`9999px`) on every button and control — nothing sharp
-- Near-black ink headings (`#101214`) over softer charcoal body (`#292a2e`)
-- Soft, low-opacity multi-layer shadows — airy elevation, never heavy
-- Light-blue surface tint (`#e9f2fe`) for secondary buttons and footer
-- Playful coral / purple gradient accents (`#ff613d`, `#bf63f3`, `#48245d`) in illustrations
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Loom Blue** (`#1868db`): Primary brand color, CTA backgrounds, primary links, interactive highlights. A bright, saturated cobalt that anchors every action on the page.
-- **Ink** (`#101214`): Primary heading color and dark-button fill. A near-black with a faint blue undertone — warmer and softer than pure `#000000`.
-- **Pure White** (`#ffffff`): Page background, card surfaces, primary-button text, circular control fill.
-
-### Secondary & Surface
-- **Surface Blue** (`#e9f2fe`): Light-blue tint used for secondary "light" buttons and the footer background. Reads as a calm, on-brand neutral.
-- **Body Charcoal** (`#292a2e`): Standard body copy, nav links, secondary labels. Softer than the ink headings for comfortable reading.
-- **Muted Gray** (`#7d818a`): De-emphasized text, captions, metadata, supporting labels.
-
-### Interactive
-- **Loom Blue** (`#1868db`): Primary buttons, primary links, active states.
-- **Primary Hover** (`#0052cc`): Deeper blue for hover/pressed states on primary links and buttons.
-
-### Accent (illustration & marketing)
-- **Coral** (`#ff613d`): Warm orange-red used in illustration gradients and decorative highlights.
-- **Bright Purple** (`#bf63f3`): Vivid violet for gradient decoration and playful accents.
-- **Deep Aubergine** (`#48245d`): Dark purple anchoring gradient illustrations and immersive accent zones.
-
-### Neutral Scale
-- **Ink** (`#101214`): Headings, strong labels.
-- **Body** (`#292a2e`): Paragraph text, navigation.
-- **Muted** (`#7d818a`): Secondary/captions.
-- **On-Primary** (`#ffffff`): Text and icons on Loom blue or dark fills.
-
-## 3. Typography Rules
-
-### Font Family
-- **Display**: `Charlie Display`, with fallback `sans-serif` — used for all headlines.
-- **Text**: `Charlie Text`, with fallback `sans-serif` — used for body, leads, nav, and UI.
-- Charlie is a warm humanist sans with rounded terminals; Loom pairs the heavier Display cut for headings with the more readable Text cut for running copy.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Notes |
-|------|------|------|--------|-------------|-------|
-| Display Hero | Charlie Display | 63px (3.95rem) | 700 | 1.03 (tight) | Hero headline, max size, declarative |
-| Display Large | Charlie Display | 44px (2.75rem) | 700 | 1.14 | Major section headlines |
-| Heading | Charlie Display | 33px (2.03rem) | 700 | 1.27 | Sub-section and card headings |
-| Lead | Charlie Text | 27px (1.67rem) | 400 | 1.52 | Lead paragraph, intro copy |
-| Body | Charlie Text | 16px (1.00rem) | 400 | 1.50 | Standard reading text, nav links |
-| Button | Charlie Text | 16px (1.00rem) | 700 | 1.00 (tight) | Primary/dark button label |
-| Button Light | Charlie Text | 16px (1.00rem) | 400 | 1.00 (tight) | Header CTA, lighter weight |
-
-### Principles
-- **Bold display weight as signature**: Weight 700 on headlines is Loom's loudest typographic choice. The page is meant to feel energetic and immediate, not restrained.
-- **Two cuts, two jobs**: `Charlie Display` carries headings (heavy, tight); `Charlie Text` carries everything readable (regular, comfortable 1.5 line-height).
-- **Tight headlines, generous body**: Display line-heights compress toward 1.03–1.27 for dense impact; body and lead relax to 1.5–1.52 for readability.
-- **Minimal tracking**: Letter-spacing stays `normal` across the system — the warmth comes from the typeface, not from tracking manipulation.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Loom Blue)**
-- Background: `#1868db`
-- Text: `#ffffff`
-- Radius: `9999px`
-- Padding: 16px 23px
-- Height: 58px
-- Font: 16px Charlie Text weight 700
-- Hover: deepens toward `#0052cc`
-- Use: Primary CTA ("Get Loom for free", "Download now", "Learn more")
-
-**Primary Compact**
-- Background: `#1868db`
-- Text: `#ffffff`
-- Radius: `9999px`
-- Padding: 8px 16px
-- Height: 48px
-- Font: 16px Charlie Text weight 400
-- Use: Header CTA ("Get Loom for free" in nav)
-
-**Light (Surface Blue)**
-- Background: `#e9f2fe`
-- Text: `#101214`
-- Radius: `9999px`
-- Padding: 16px 23px
-- Height: 58px
-- Font: 16px Charlie Text weight 700
-- Use: Secondary actions ("Contact Sales", "Install Chrome Extension", "See all use cases")
-
-**Dark (Ink)**
-- Background: `#101214`
-- Text: `#ffffff`
-- Radius: `9999px`
-- Padding: 16px 23px
-- Height: 58px
-- Font: 16px Charlie Text weight 700
-- Use: Alternate emphasis CTA ("Learn more", "Explore our blog")
-
-### Icon Buttons / Carousel Controls
-- Background: `#ffffff`
-- Text: `#292a2e`
-- Radius: `9999px` (circular)
-- Height: 56px
-- Shadow: `rgba(0,0,0,0.03) 0px 4px 6.4px 0px, rgba(0,0,0,0.05) 0px 3px 9.6px 0px`
-- Use: Testimonial carousel previous/next controls
-
-### Cards & Containers
-- Background: `#ffffff`
-- Radius: 16px (md), 24px (lg) for larger feature cards
-- Shadow (soft): `rgba(0,0,0,0.03) 0px 4px 6.4px 0px`
-- Shadow (standard): `rgba(0,0,0,0.05) 0px 3px 9.6px 0px`
-- Use: Feature cards, testimonial cards, media previews
-
-### Navigation
-- Background: white, clean horizontal nav
-- Links: Charlie Text 16px weight 400, `#292a2e`
-- Primary CTA: Loom blue pill ("Get Loom for free") right-aligned
-- Secondary CTA: light-blue pill ("Contact Sales")
-
-### Footer
-- Background: `#e9f2fe`
-- Text: `#292a2e`
-- Links: `#292a2e`, hover toward `#1868db`
-
----
-
-**Verified:** 2026-06-08 (omd:add-reference — Tier 1 live inspect)
-**Tier 1 sources:** https://www.loom.com (live DOM computed-style inspect — hero, nav, CTA buttons, carousel controls, footer; playwright getComputedStyle)
-**Tier 2 sources:** getdesign.md/loom — not authoritative; refero — directory only
-**Conflicts unresolved:** none
-**`.verification.md`:** `web/references/loom/.verification.md`
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
-- Button padding follows an 8px rhythm (8px/16px compact, 16px/23px large)
-
-### Grid & Container
-- Centered single-column hero with large bold headline and a pair of pill CTAs
-- Feature sections alternate text + media in 2-column splits
-- Testimonial carousel with circular white controls
-- Generous full-width sections with light-blue tinted zones for rhythm
-
-### Whitespace Philosophy
-- **Open and breathable**: Loom leans on white space to keep the bold headlines from feeling heavy. The 1.5 body line-height reinforces an unhurried reading pace.
-- **Section tinting**: Light-blue (`#e9f2fe`) zones and the footer break the white expanse without introducing hard color, creating a soft light/lighter cadence.
-- **Pill rhythm**: Repeated full-radius buttons create a consistent rounded visual motif down the page.
-
-### Border Radius Scale
-- Small (8px): subtle rounding on small surfaces
-- Medium (16px): standard cards
-- Large (24px): feature cards, media frames
-- Full (9999px): every button and circular control
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, inline text |
-| Soft (Level 1) | `rgba(0,0,0,0.03) 0px 4px 6.4px 0px` | Subtle card lift |
-| Standard (Level 2) | `rgba(0,0,0,0.05) 0px 3px 9.6px 0px` | Cards, controls, media previews |
-| Control (Level 2) | `rgba(0,0,0,0.03) 0px 4px 6.4px, rgba(0,0,0,0.05) 0px 3px 9.6px` | Circular carousel buttons |
-
-**Shadow Philosophy**: Loom's elevation is deliberately gentle. Shadow opacities stay between 0.03 and 0.05 with small blur radii, so cards and controls feel like they hover a few millimeters off the page rather than casting deep dramatic shadows. The neutral (un-tinted) black shadow keeps the focus on the bold typography and bright blue actions — depth is a supporting role, never the star.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use Loom blue (`#1868db`) as the single primary action color
-- Set headlines in Charlie Display at weight 700 — bold and declarative
-- Make every button and control a full pill (`9999px`)
-- Use near-black ink (`#101214`) for headings and softer charcoal (`#292a2e`) for body
-- Keep elevation soft and low-opacity (0.03–0.05)
-- Use the light-blue surface (`#e9f2fe`) for secondary buttons and footer
-- Let body text breathe at 1.5 line-height
-- Reserve coral/purple accents for illustrations and gradients only
-
-### Don't
-- Use sharp or small-radius corners on buttons — Loom is fully pill-shaped
-- Set headlines in a light weight — bold 700 is the brand voice
-- Introduce a second competing primary color — blue owns all actions
-- Use heavy, high-opacity, or tinted dramatic shadows
-- Use coral/purple accents for buttons or links — they are decorative only
-- Use pure black (`#000000`) for headings — ink `#101214` is warmer
-- Crowd body copy with tight line-height — keep 1.5 for readability
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, hero compresses, stacked CTAs |
-| Tablet | 640-1024px | 2-column splits collapse, moderate padding |
-| Desktop | 1024-1280px | Full alternating text+media layout |
-| Large Desktop | >1280px | Centered content with generous margins |
-
-### Touch Targets
-- Buttons run 48–58px tall — comfortably tappable pills
-- Circular carousel controls at 56px diameter
-- Nav links with generous spacing
-
-### Collapsing Strategy
-- Hero: ~63px display compresses to ~36–40px on mobile, weight 700 maintained
-- Navigation: horizontal links + CTA pills collapse to a menu toggle
-- Feature splits: side-by-side text+media stack vertically
-- CTA pairs stack full-width on mobile
-- Section spacing compresses on smaller viewports
-
-### Image Behavior
-- Product/video preview frames keep rounded corners (16–24px) at all sizes
-- Marketing illustrations with coral/purple gradients simplify on mobile
-- Media maintains soft shadow elevation across breakpoints
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Loom Blue (`#1868db`)
-- CTA Hover: Deeper Blue (`#0052cc`)
-- Background: Pure White (`#ffffff`)
-- Heading text: Ink (`#101214`)
-- Body text: Charcoal (`#292a2e`)
-- Muted text: Gray (`#7d818a`)
-- Secondary surface / footer: Surface Blue (`#e9f2fe`)
-- Dark button: Ink (`#101214`)
-- Accent decorative: Coral (`#ff613d`), Purple (`#bf63f3`), Deep Aubergine (`#48245d`)
-
-### Example Component Prompts
-- "Create a hero on white. Headline at 63px Charlie Display weight 700, line-height 1.03, color #101214. Lead at 27px Charlie Text weight 400, line-height 1.52, color #101214. Primary CTA pill (#1868db, 9999px radius, 16px 23px padding, white text weight 700) plus a light pill (#e9f2fe bg, #101214 text, 9999px)."
-- "Design a feature card: white background, 16px radius, shadow rgba(0,0,0,0.05) 0px 3px 9.6px. Heading 33px Charlie Display weight 700, #101214. Body 16px Charlie Text weight 400, line-height 1.5, #292a2e."
-- "Build a dark CTA pill: #101214 background, white text, 9999px radius, 16px 23px padding, 16px Charlie Text weight 700."
-- "Create circular carousel controls: white #ffffff fill, 56px diameter, 9999px radius, shadow rgba(0,0,0,0.03) 0px 4px 6.4px, rgba(0,0,0,0.05) 0px 3px 9.6px."
-- "Design a footer: #e9f2fe background, #292a2e text, links hovering toward #1868db."
-
-### Iteration Guide
-1. Loom blue (`#1868db`) is the only primary action color — never split actions across colors
-2. All buttons and controls are full pills (`9999px`) — no exceptions
-3. Headlines use Charlie Display weight 700; body uses Charlie Text weight 400 at 1.5 line-height
-4. Heading color is ink `#101214`, body is charcoal `#292a2e`, muted is `#7d818a`
-5. Keep shadows soft (0.03–0.05 opacity, small blur) — airy not heavy
-6. Light-blue `#e9f2fe` is the secondary-surface and footer tint
-7. Reserve coral/purple gradients for illustrations only — never for UI controls
-
----
-
-## 10. Voice & Tone
-
-Loom's voice is warm, direct, and human — the tone of a helpful colleague who would rather show you than tell you. The product itself is about replacing long written messages with a quick video, and the copy mirrors that: short, plain, action-first. The hero line *"One video is worth a thousand words"* sets the register — a familiar idiom repurposed with a knowing wink, confident without being grandiose. CTAs are friendly imperatives ("Get Loom for free", "Download now"), never gated or salesy on the basics.
-
-| Context | Tone |
-|---|---|
-| Hero headlines | Bold, idiomatic, confident. Conversational, never corporate. |
-| Product descriptions | One concrete benefit per line. "Record your screen, voice, and face." |
-| CTAs | Friendly imperatives. "Get Loom for free", "Download now", "Learn more". |
-| Onboarding / empty states | Encouraging, low-pressure. Invites the first recording. |
-| Enterprise / sales | Slightly more formal but still warm; "Contact Sales" not "Request a demo gate". |
-| Support / errors | Plain-language, reassuring, solution-first. |
-
-**Forbidden phrases.** "Revolutionary", "game-changer", "supercharge", "synergy", "cutting-edge". Jargon-heavy enterprise-speak. Exclamation-stacked hype. Anything that makes recording a video feel like a chore.
-
-## 11. Brand Narrative
-
-Loom was founded in **2015** (originally as *Opentest*, then *OpenVid*, before becoming Loom) by **Joe Thomas**, **Shahed Khan**, and **Vinay Hiremath**. The founders were building a usability-testing product and discovered that the most valuable thing they had made was the simple screen-and-camera recorder they used to share feedback. They pivoted to that recorder — the insight being that asynchronous video could replace a huge volume of meetings and long written messages.
-
-That founding insight — *async video as a faster, more human way to communicate at work* — shaped everything: a one-click recorder, instant shareable links, and a friendly consumer-grade interface that lowers the barrier to pressing record. Loom grew rapidly through bottom-up adoption inside companies and was **acquired by Atlassian in 2023** for roughly $975M, positioning it alongside Atlassian's suite of team-collaboration tools.
-
-What Loom embraces: speed-to-record, warmth, and the idea that showing beats telling. What it rejects: the friction of meetings, the cold formality of legacy enterprise screen-share tools, and any UX that makes capturing a quick video feel heavyweight. The bold blue-and-white visual identity is the design expression of that ethos — bright, immediate, and unintimidating.
-
-## 12. Principles
-
-1. **Show, don't tell.** *UI implication:* Lead with video previews and live demos; let the product demonstrate itself rather than describing it in walls of text.
-2. **One click to record.** *UI implication:* The primary action (Loom blue pill) is unmistakable and always within reach; never bury the record/start CTA.
-3. **Warm over corporate.** *UI implication:* Rounded full-pill geometry, friendly Charlie typeface, and conversational copy keep the tool approachable, not enterprise-cold.
-4. **Async beats meetings.** *UI implication:* Flows favor self-serve, low-friction starts ("Get Loom for free") over gated sales funnels.
-5. **Clarity through restraint.** *UI implication:* A single dominant action color and soft elevation keep attention on content; decorative color stays in illustrations.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by publicly observable Loom user segments (remote-team managers, engineers, customer-facing teams, educators), not individual people.*
-
-**Priya Nair, 34, Austin.** Engineering manager at a remote-first startup. Records a 3-minute Loom instead of writing a long PR review or scheduling another sync. Values the one-click recorder and instant share link; would abandon any tool that made capturing a quick walkthrough feel like setup work.
-
-**Marcus Bell, 41, Manchester.** Customer success lead. Sends personalized Loom videos to onboard new accounts. Cares that recipients can watch without an account and that the playback page looks polished and on-brand.
-
-**Sofia Lindqvist, 28, Stockholm.** Product designer. Uses Loom to narrate design walkthroughs for async feedback across time zones. Appreciates the warm, unintimidating interface that makes hitting record feel casual rather than performative.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no recordings yet)** | White canvas, friendly headline in ink (`#101214`), one Loom blue pill CTA inviting the first recording. Encouraging, low-pressure. |
-| **Empty (no search results)** | Muted gray (`#7d818a`) single line explaining nothing matched, with filters visible to adjust. No dead-end illustration. |
-| **Loading (library first paint)** | Skeleton blocks at final dimensions in surface-blue (`#e9f2fe`) tint with gentle shimmer. |
-| **Loading (video processing)** | Inline progress indicator in Loom blue; previous content stays visible where possible. |
-| **Error (upload/record failed)** | Inline message in plain language, solution-first, with a clear retry pill. Never a generic "Something went wrong". |
-| **Error (form validation)** | Field-level message describing what is invalid and what would be valid. |
-| **Success (recording shared)** | Brief confirmation with the shareable link surfaced immediately for one-tap copy. |
-| **Success (action saved)** | Short auto-dismiss toast, sentence case, no exclamation hype. |
-| **Skeleton** | Surface-blue blocks at final dimensions; soft shimmer consistent with the gentle shadow system. |
-| **Disabled** | Reduced opacity on surface and label together; blue actions fade rather than switching to gray, preserving brand read. |
-
-## 15. Motion & Easing
-
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | State commits, selection, focus rings |
-| `motion-fast` | 120ms | Hover, button press, focus |
-| `motion-standard` | 220ms | Dropdowns, carousel slides, card reveals |
-| `motion-slow` | 320ms | Page-level transitions, hero reveals |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — panels, dropdowns, cards |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions |
-
-**Signature motions.**
-
-1. **Carousel slide.** Testimonial carousel advances with `motion-standard / ease-standard`, a smooth horizontal glide paired with the soft-shadowed circular controls.
-2. **Hover lift.** Buttons and cards lift subtly on hover via `motion-fast`, deepening the soft shadow slightly — gentle, never bouncy.
-3. **CTA feedback.** Primary pills respond to press with a quick `motion-fast` color deepen toward `#0052cc`.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`; carousels advance instantly and hover lifts are removed. The interface stays fully functional.

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

@@ -1,154 +0,0 @@
-# Lovable — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `lovable.dev/` (home — "Vibe Code Apps & Websites with AI" hero)
-- `lovable.dev/pricing` (pricing — Free/Pro/Teams/Enterprise tiers)
-
-### Raw observations
-
-**Get started — Hero/Header Primary (Near-Black)**
-- bg `lab(0 0 0 / 0.88)` (Near-Black at 88% — ~`rgba(0,0,0,0.88)` ≈ `#1c1c1c` over white)
-- color `lab(98.2716 0 0)` (Near-White ~`#fafafa`)
-- radius **8px**
-- padding 6×10
-- 32px / 14px·400
-- Use: hero/header Primary across home + pricing
-
-**Log in — Header Outline (Charcoal text)**
-- bg `rgba(0, 0, 0, 0)` (transparent)
-- color `lab(18.8087 -0.101894 0.363511)` (Dark Charcoal ~`#212121`)
-- radius 8px
-- padding 6×10
-- 32px / 14px·400
-- Use: header Login
-
-**Get started (Featured Pricing Tier) — Lovable Violet**
-- bg **`lab(47.9156 57.9535 -81.2975)`** (Lovable Violet — vivid bluish-purple, sRGB approximation ~`#6038c8`)
-- color `lab(100 0 0)` (Pure White)
-- radius 8px
-- padding 6×10
-- 36px / 14px·400
-- Use: pricing featured tier ("Most popular" Pro CTA) — distinct from default Near-Black Primary
-
-**100 credits / month — Pricing Selector Pill**
-- bg `rgb(252, 251, 248)` = **`#fcfbf8`** (Lovable Cream — warm off-white)
-- color `rgb(28, 28, 28)` = `#1c1c1c` (Lovable Near-Black)
-- radius **6px**
-- padding 8×12
-- 36px / 14px·400
-- Use: monthly-credit selector chip
-
-**OK — Modal/Dialog CTA**
-- bg `lab(100 0 0 / 0.8)` (translucent Near-White at 80%)
-- color `lab(0.903296 0 0)` (Near-Black)
-- radius 8px
-- padding 6×10
-- 32px / 14px·400
-- Use: dialog dismiss
-
-**Top-level Nav (Solutions / Resources / Community / Enterprise / Pricing / Security)**
-- bg transparent
-- color `rgb(28, 28, 28)` = `#1c1c1c` (Lovable Near-Black)
-- radius 0px
-- padding 4×6
-- 28-32px / 15px·400
-- Use: top-level nav (notice 15px nav vs 14px CTA — 1px size distinction)
-
-### Single-system: 8px Near-Black Primary + Lovable Violet featured + Cream `#fcfbf8` warmth
-
-Lovable uses a **disciplined 8px-radius binary chrome with violet accent for featured contexts**:
-- Primary CTA: `lab(0 0 0 / 0.88)` (Near-Black 88%) 8px / 32px / 6×10 / 14px·400
-- Featured Primary: **Lovable Violet `lab(47.92 57.95 -81.30)`** (~`#6038c8`-ish vivid bluish-purple) 8px / 36px — only on pricing-featured tier
-- Cream `#fcfbf8` 6px selector chips — warm off-white for in-tier UI controls (1 step warmer + 2px less radius than Primary)
-- Nav 0px text-only ghost / 15px·400 (1px larger than CTAs — readability priority)
-- All weight 400 — never bold; the canvas warmth + violet accent carry the visual register
-
-The use of `lab()` color space throughout (not just `#hex` or `rgb`) is unusual and notable — Lovable uses **CSS Color Level 4 lab()** as canonical token expression, suggesting modern CSS-first DS practices. The `lab(0 0 0 / 0.88)` Primary is intentional translucency (88%) — gives a soft true-black that maintains contrast against any canvas tint.
-
-This corrects the prior footer's claim of "Sign in `rgba(0,0,0,0.05)` 8px" — that's a different (Outline-light) variant. The canonical Primary is `lab(0 0 0 / 0.88)` Near-Black with featured Violet variant.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/lovable` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Lovable` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (lovable.dev home + /pricing) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 /pricing | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | `lab(0 0 0 / 0.88)` Near-Black | `lab(0 0 0 / 0.88)` ✓ | n/a | ✓ canonical |
-| Featured Primary bg | n/a | `lab(47.92 57.95 -81.30)` Lovable Violet | n/a | ✓ featured-tier accent |
-| Primary radius | 8px | 8px ✓ | n/a | ✓ |
-| Primary padding | 6×10 | 6×10 ✓ | n/a | ✓ |
-| Primary height | 32 / 36 (featured) | 32 ✓ | n/a | ✓ |
-| Primary font | 14px·400 | 14px·400 ✓ | n/a | ✓ |
-| Selector chip | n/a | `#fcfbf8` Cream 6px / 36px | n/a | ✓ |
-| Nav | 15px·400 / 0px / Charcoal text | 15px·400 ✓ | n/a | ✓ |
-
-### Unresolved
-- **None.** Single-system canonical with documented featured-tier Lovable Violet accent.
-
-### Earlier mistakes reverted
-- Prior footer claimed "Sign in `rgba(0,0,0,0.05)` 8px" + "Get started dark `lab(0 0 0 / 0.88)`" + "pill nav 1.67e+07 ≈ 9999px" — the **9999px pill nav was a transient state** (the live measurement at 2026-05-08 shows 0px-radius text-only nav). Also missed the **Lovable Violet featured-tier accent** entirely. §4 should add Violet as a documented accent.
-
----
-
-## Components in §4
-
-§4 (prior B5 batch) — needs:
-1. Primary `lab(0 0 0 / 0.88)` Near-Black 8px / 32-36px / 6×10 / 14px·400
-2. **Featured Primary** `lab(47.92 57.95 -81.30)` Lovable Violet (~`#6038c8`) — pricing featured tier accent
-3. Cream `#fcfbf8` 6px selector chip
-4. lab() color space as CSS Color Level 4 token convention
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- **Lovable founded 2023** in **Stockholm**
-  - Source: [Lovable — Wikipedia](https://en.wikipedia.org/wiki/Lovable_(company))
-- Founders: **Anton Osika** + **Fabian Hedin**
-  - Source: [Anton Osika — LinkedIn](https://se.linkedin.com/in/antonosika)
-- **Origin**: Osika released **GPT Engineer** (open-source CLI code-generation) in 2023 → with Hedin built **GPT Engineer App** commercial web version → **rebranded to Lovable 2024-2025**
-- **€6.8M seed (2024)**
-  - Source: [Silicon Canals — €6.8M + GPT Engineer launch](https://siliconcanals.com/lovable-secures-e6-8m-launches-gpt-engineer/)
-- **$15M (Feb 2025)**
-  - Source: [TechCrunch — Lovable $15M](https://techcrunch.com/2025/02/25/swedens-lovable-an-app-building-ai-platform-rakes-in-16m-after-spectacular-growth/)
-- **$200M Series A (Aug 2025)** led by **Accel** at **$1.8B unicorn** with backers **20VC, ByFounders, Creandum, Hummingbird, Visionaries Club**
-  - Source: [Vestbee — Lovable $200M Series A](https://www.vestbee.com/insights/articles/lovable-raises-200-m)
-  - Source: [Startup Hub AI — Lovable unicorn](https://www.startuphub.ai/ai-news/funding-round/2025/lovable-secures-200m-series-a-achieves-unicorn-status/)
-- **$100M ARR in 8 months** post-launch — among fastest-growing software companies ever
-  - Source: [Creators AI — Lovable $200M ARR playbook](https://thecreatorsai.com/p/lovable-growth-secrets-and-costs)
-- **2.3M users** reported via growth analysis
-  - Source: [Catalaize — Lovable 2.3M users](https://catalaize.substack.com/p/lovables-path-from-open-source-to)
-
-### Voice samples (live-verified)
-- *"Get started"* — header/hero/featured Primary <!-- verified: lovable.dev 2026-05 -->
-- *"Log in"* — header Outline <!-- verified: lovable.dev -->
-- *"Solutions / Resources / Community / Enterprise / Pricing / Security"* — top nav <!-- verified: lovable.dev -->
-- *"100 credits / month"* — pricing selector chip <!-- verified: lovable.dev/pricing -->
-
-### Existing §10-15 retained from prior augmentation (B5 batch)
-- Voice & Tone — "Vibe Code" register, AI-as-craft positioning
-- §11 narrative — Anton Osika + GPT Engineer → Lovable rebrand
-- §12 Principles — warm typography, inset-shadow buttons (signature)
-- §15 Inset shadow static (never animates)
-
----
-
-**Verified-against:**
-- Tier 1: lovable.dev/, lovable.dev/pricing (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Wikipedia (Lovable), LinkedIn (Osika), Silicon Canals, TechCrunch, Vestbee, Startup Hub AI, Creators AI, Catalaize, Contrary Research