oh-my-design-cli 1.0.1 → 1.1.0

package/{references → web/references}/elevenlabs/DESIGN.md

@@ -263,3 +263,94 @@ What makes ElevenLabs distinctive is its multi-layered shadow system. Rather tha
 4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
 5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
 6. Pill (9999px) for buttons, generous radius (16px–24px) for cards
+
+## 10. Voice & Tone
+
+ElevenLabs writes like the audio it generates: **measured, precise, and built for clarity.** Marketing copy is closer to research summary than ad copy — the company describes itself as "an AI research and product company transforming how we interact with technology" (own About page). UI surfaces echo this register: short labels, technical-but-readable, never breathless.
+
+| Context | Tone |
+|---|---|
+| CTA / button | Single verb or verb-noun. "Try it now", "Sign up", "Contact sales". Lowercase or sentence-case |
+| Product names | Pascal-case prefix `Eleven`. ElevenAgents, ElevenCreative, ElevenAPI |
+| Onboarding | Technical specifics over emotion. "Generate speech in 32 languages with one model" |
+| Error (model unavailable) | State the cause. "This voice is unavailable in your region. Try a different voice." |
+| Empty (no projects) | Direct invitation. "Create your first project to start generating audio." |
+| Documentation / API | Imperative, code-block-heavy, example-first |
+| Safety / policy | Formal but not legalese |
+
+**Voice samples**
+- Marketing CTA: *"Try it now"* <!-- verified: elevenlabs.io homepage hero (2026-05) -->
+- Three-platform tagline: *"ElevenAgents, ElevenCreative, ElevenAPI"* <!-- verified: elevenlabs.io top nav (2026-05) -->
+- Safety statement opener: *"AI safety is inseparable from innovation at ElevenLabs."* <!-- verified: elevenlabs.io About / safety -->
+
+**Forbidden phrases.** "Revolutionary", "lifelike". "Unlock the power of...". Apology theatre. Emoji in product chrome.
+
+## 11. Brand Narrative
+
+ElevenLabs was founded **2022** by **Mati Staniszewski (CEO)** and **Piotr Dąbkowski (CTO)** — both Polish, **best friends since the Copernicus International Baccalaureate program in Warsaw** ([ElevenLabs — Wikipedia](https://en.wikipedia.org/wiki/ElevenLabs)). Staniszewski studied **mathematics at Imperial College London**, then **Opera Software → BlackRock (Aladdin Wealth) → Palantir** as Deployment Strategist. Dąbkowski studied **engineering at Oxford → MPhil Cambridge (2017, NeurIPS-published thesis on AI image detection)**, then **Google ML engineer → Tessian**. The founding observation was that text-to-speech in 2022 still sounded robotic on every consumer surface — both founders, growing up dubbing English-language films into Polish, knew firsthand that machine voiceover was a bottleneck for global content. Funding trajectory: **$2M pre-seed (Jan 2023)** → **$19M Series A (Jun 2023)** at **$100M** → **$80M Series B (Jan 22 2024)** at **$1.1B unicorn** → **$180M Series C (Jan 30 2025)** at **$3.3B** co-led **a16z + ICONIQ Growth** with NEA/WiL/Valor/Endeavor Catalyst/Lunate → **$500M (Feb 4 2026)** at **$11B** co-led **a16z + Nat Friedman + Daniel Gross** ahead of potential IPO ([CNBC — VC bet on ElevenLabs](https://www.cnbc.com/2025/10/25/vc-bet-on-3-billion-ai-firm-elevenlabs-after-one-meeting-with-founder.html), [Yahoo Finance — Staniszewski $200M+ revenue](https://finance.yahoo.com/news/elevenlabs-ceo-mati-staniszewski-reveals-134611632.html)). $500M+ ARR reported 2025.
+
+The brand voice — clinical-precise, research-first, three-platform vocabulary (`Eleven` + Agents/Creative/API) — reflects the founders' technical orientation. Public communication stays close to research output: model card releases, latency benchmarks, voice cloning safety policies. Founder interviews consistently emphasize **dual-use awareness**: voice cloning is dangerous if misused, and the company has built multi-layered abuse detection from day one — *"AI safety is inseparable from innovation at ElevenLabs"* is verbatim from their About page.
+
+What ElevenLabs refuses: hyperbolic adjectives about voice realism (the demo speaks for itself), celebrity voice cloning without explicit consent, generic emotion-coded marketing imagery (their visuals stay tech-product, not lifestyle).
+
+## 12. Principles
+
+1. **The model output is the marketing.** Audio demos beat any descriptive copy. *UI implication:* hero modules contain a real audio sample that plays on hover/tap.
+2. **Three-platform vocabulary, one identity.** `Eleven` prefix on every product. *UI implication:* product nav uses literal `ElevenAgents`/`ElevenCreative`/`ElevenAPI` strings.
+3. **Safety as feature, not disclaimer.** Voice-clone consent flow surfaced as product capability. *UI implication:* safety controls have first-class menu placement.
+4. **Warm stone, not cold black.** Palette uses warm beige tones to signal "human-feeling AI." *UI implication:* default canvas warm off-white; pure white reserved for content-detail surfaces.
+5. **Inter with positive letter-spacing.** Body text +0.14–0.18px tracking creates airy reading rhythm. *UI implication:* don't tighten Inter at body sizes.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly described ElevenLabs user segments (developers, content creators, accessibility advocates, enterprise customers), not individual people.*
+
+**Sasha Volkov, 32, Berlin.** Senior engineer at a podcast tooling startup. Integrates the ElevenAPI for studio-quality voiceover generation. Reads the model release notes the same week they ship.
+
+**Adaeze Okafor, 28, Lagos.** Independent YouTuber dubbing English videos into Yoruba and Igbo with ElevenCreative. The 32-language coverage and voice cloning consent flow are why she's on the platform — competing services don't support West African languages.
+
+**Dr. Yuki Sato, 45, Tokyo.** Accessibility researcher using ElevenLabs through The ElevenLabs Impact program (free licenses for accessibility needs). Builds reading-aid software for visually impaired Japanese readers.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no generated audio)** | Centered Inter 24px text "Generate your first audio" + warm-stone Primary CTA pill |
+| **Empty (no projects)** | "Create a project to get started." 16px copy, single CTA, optional secondary "Browse templates" |
+| **Loading (audio generating)** | Linear progress with elapsed time + ETA. Pause/cancel button always visible. Long jobs show waveform animation |
+| **Loading (model loading)** | Skeleton player UI + "Loading voice model" copy with explicit wait expectation |
+| **Error (generation failed)** | Inline below input. "Couldn't generate audio. <reason>." Retry button + Documentation link |
+| **Error (rate limit)** | "You've reached your daily limit (100 credits). Upgrade or wait until tomorrow." |
+| **Success (audio generated)** | Inline player appears below input. Auto-plays once if "Auto-preview" enabled. Download / Share / Copy-link visible |
+| **Success (voice cloned)** | Confirmation + safety reminder. "Voice cloned. Remember to only use voices you have permission to clone." |
+| **Skeleton** | Warm-stone `rgba(245,242,239,0.4)` blocks at exact dimensions. No shimmer |
+| **Disabled** | 0.4 opacity. Disabled CTAs explain why on hover ("Add credits to enable") |
+| **Loading (batch generation)** | Persistent progress notification, per-file status. Navigation continues |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection commits |
+| `motion-fast` | 150ms | Hover, button feedback |
+| `motion-standard` | 250ms | Modal, dropdown |
+| `motion-audio` | continuous | Waveform during generation |
+
+**Easings**: `ease-enter cubic-bezier(0.2, 0.6, 0.25, 1)` for modals, `ease-exit cubic-bezier(0.4, 0.0, 1, 1)` for dismiss, no bounce.
+
+**Motion rules.**
+1. Audio waveform is THE signature motion — stylized model activity, not random animation
+2. No bounce, no overshoot — register is precise
+3. Hover transitions 150ms (faster than DS standard) — keyboard-driven research-tool feel
+4. `prefers-reduced-motion: reduce` removes waveform (→ progress bar), removes hover scale, keeps focus transitions
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 22 — Apple-tier)
+**Tier 1 sources (§4):** elevenlabs.io home + /pricing (live DOM via playwright — Primary `#000000` 9999px three-tier {hero 48px / mid 40px / header 28px} 0×{20/16/12} / 14-16px·400; Inverse `#ffffff` 9999px same geometry)
+**Tier 2 sources (§4):** styles.refero.design — no specific ElevenLabs style match. getdesign.md/elevenlabs — directory only.
+**Tier 2 (Founders/Funding):** Wikipedia (ElevenLabs), CNBC (2025-10 a16z bet), Yahoo Finance (Staniszewski $200M+ revenue + $11B Feb 2026), Endeavor Catalyst.
+**Style ref:** `claude` (research-tech precision tone)
+**Conflicts unresolved:** none.

package/{references → web/references}/expo/DESIGN.md

@@ -279,3 +279,75 @@ What makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video co
 5. Always specify Inter and the exact weight — weight contrast IS the hierarchy
 6. For shadows, specify "whisper shadow" or "standard elevation" from the elevation table
 7. Keep the interface monochrome — let product content be the color
+
+## 10. Voice & Tone
+
+Expo's voice is **builder-focused and warm-precise.** The brand emphasizes shipping React Native apps with the same speed as web — copy is capability-driven, never marketing-fluff. Surfaces lean into the "framework that gets out of your way" register.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Try it free", "Sign up", "Get started" |
+| Marketing | Short claim + screenshots. Capability-list, not benefit-list |
+| Documentation | Imperative, code-block-first, deeply linked |
+| Error (build) | Stack-trace-friendly. Show the actual EAS build error |
+
+**Voice samples**
+- Marketing CTA: *"Try it free"* / *"Sign up"* <!-- verified: expo.dev homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionize mobile", "magic". Apology theatre.
+
+## 11. Brand Narrative
+
+Expo was founded **October 2013** by **Charlie Cheever (CEO)** and **James Ide (CTO)** — Cheever was an **early Facebook engineer** and **Quora co-founder**, Ide an early React Native contributor ([Y Combinator — Expo](https://www.ycombinator.com/companies/expo)). Started as **Exponent**, a managed React Native runtime that abstracted iOS/Android build complexity. **First Expo development client released for iPhone May 2015** soon after React Native's public release. Participated in **Y Combinator Summer 2016**. Operates under legal name **650 Industries, Inc.** ([Crunchbase — Expo](https://www.crunchbase.com/organization/exponent-3)). **3M+ developers** build with Expo today. Pivoted toward a fully open-source framework + **EAS (Expo Application Services)** cloud build/deploy/update platform. **Series B $45M (Apr 2026)** led by **Georgian** with **Leadout Capital, A Capital, Red Swan** — round announced alongside **Expo Agent**, an AI mobile-app builder ([SiliconANGLE](https://siliconangle.com/2026/04/16/developer-tooling-startup-expo-nabs-45m-investment/), [PR Newswire](https://www.prnewswire.com/news-releases/expo-raises-45m-series-b-and-launches-expo-agent-to-close-the-gap-from-idea-to-production-ready-mobile-apps-302744423.html)). The brand voice tracks this: framework-first, build-pipeline-deep, developer-focused.
+
+## 12. Principles
+
+1. **Ship to all platforms from one codebase.** *UI implication:* surfaces emphasize iOS + Android + Web parity, never platform-specific UI.
+2. **EAS is the runway.** Cloud build/deploy/update services are first-class. *UI implication:* dashboards show build status with first-class UX investment.
+3. **Documentation is product.** *UI implication:* docs.expo.dev has full-time design investment; not "marketing site sidebar".
+4. **Monochrome chrome, color content.** *UI implication:* don't use bright accents in chrome — the developer's app preview carries color.
+5. **Whisper shadows, never heavy.** *UI implication:* depth via subtle gradients + 1px borders; no 0.5+ opacity shadows.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Expo user segments (React Native developers, indie mobile app shippers, enterprise mobile teams), not individual people.*
+
+**Yuki Tanaka, 29, Tokyo.** Indie developer shipping mobile-first SaaS. EAS Build replaces Apple/Google certificate management she'd otherwise navigate manually.
+
+**Marcus Chen, 38, San Francisco.** Senior engineer at B2B SaaS adding mobile. Expo as the "stop bikeshedding native build infra" choice.
+
+**Priya Rao, 27, Bengaluru.** Bootcamp grad shipping first React Native app. Expo Go (try-without-build) is the entire onboarding she needed.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no projects)** | "Create your first app with `npx create-expo-app`" |
+| **Empty (no builds)** | "Submit your first build" with EAS CLI snippet |
+| **Loading (build running)** | Persistent progress with step + ETA (provisioning, fetching deps, archiving) |
+| **Loading (preview)** | QR code for Expo Go alongside skeleton |
+| **Error (build)** | Full log with collapsible sections + suggestion |
+| **Error (config)** | Specific reason + link to docs section |
+| **Success (build)** | Build artifacts download links + install QR |
+| **Success (deploy/update)** | Update channel info + when users will receive |
+| **Skeleton (project list)** | Whisper-shadow rectangles |
+| **Disabled (no quota)** | 0.5 opacity + upgrade link |
+| **Loading (long install)** | Real-time log stream |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+
+Standard cubic-bezier; no bounce. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 23 — Apple-tier)
+**Tier 1 sources:** expo.dev home + /pricing (live DOM via playwright — Primary `#000` height=radius pill {hero 48px / header+pricing 36px} 0×{24/16} / 14-16px·500; Secondary `#f0f0f3` Cool Gray same geometry; testimonial card 8px `#fff`).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders):** Y Combinator (Expo profile), Crunchbase, SiliconANGLE, PR Newswire (Series B 2026), TechCompanyNews.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

package/{references → web/references}/ferrari/DESIGN.md

@@ -312,3 +312,75 @@ When refining existing screens generated with this design system:
 4. Describe the desired "feel" alongside specific measurements — "editorial magazine page-turn between sections" communicates the layout philosophy better than "margin-bottom: 80px"
 5. Always maintain the chiaroscuro contrast — if a section feels flat, check whether it needs to be on black or white to maintain the alternating rhythm
 6. Reserve Ferrari Red for ONE element per screen — if red appears in more than one place, it loses its authority
+
+## 10. Voice & Tone
+
+Ferrari's voice is **Maranello-pride and racing-heritage.** Italian-craft pride + chiaroscuro black/white sections + Ferrari Red `#da291c` for one element per screen. Marketing copy emphasizes lineage (Enzo Ferrari, F1 victories, Maranello) over feature lists.
+
+| Context | Tone |
+|---|---|
+| CTA | Heritage-imperative. "Discover", "Configure", "Reserve" |
+| Marketing | Photography first, racing heritage second, copy third |
+| Documentation | Sparse — luxury product, minimal docs |
+| Error | Polite. "An error occurred. Try again." |
+
+**Voice samples**
+- Brand register: "The Power of Dreams" / "Tradition of Innovation" type framing <!-- illustrative -->
+
+**Forbidden phrases.** "Revolutionary supercar". Direct Lamborghini comparison.
+
+## 11. Brand Narrative
+
+**Scuderia Ferrari** — the racing team — was founded **1929** by **Enzo Ferrari** as a Grand Prix outfit affiliated with **Alfa Romeo**, where Enzo had worked through the 1920s ([Enzo Ferrari — Wikipedia](https://en.wikipedia.org/wiki/Enzo_Ferrari)). After Allied bombing forced relocation from Modena, **Ferrari S.p.A. was founded 1947 in Maranello** to build road cars under his own name; the **first car (125 S, V-12 engine, 1947)** secured the brand's **first Grand Prix victory in Rome, May 1947** ([Ferrari — Wikipedia](https://en.wikipedia.org/wiki/Ferrari)). Began as racing manufacturer; road cars sold to fund the F1 program — the inverse of every other carmaker. **NYSE direct listing October 21 2015** under ticker **RACE**, priced at **$52/share** (top of $48-52 range), market cap **~$9.8B**, raised **~$900M** in public capital as part of the **Fiat Chrysler demerger** ([CNBC — Ferrari market debut](https://www.cnbc.com/2015/10/21/ferrari-spikes-15-in-market-debut.html), [Ferrari Corporate — Listing](https://www.ferrari.com/en-EN/corporate/listing-information)). The brand carries Italian craftsmanship + racing heritage as primary positioning. Ferrari Red `#da291c` is iconic — live measurement on `/auto/car-range` confirms it as the **canonical Primary CTA color** (0px sharp, 21px square padding, 16px·400 white text), not a decorative accent. Cinematic chrome elsewhere is text-only ALL CAPS ghost — the imagery is the design.
+
+## 12. Principles
+
+1. **One Ferrari Red per screen.** *UI implication:* if red appears more than once, hierarchy collapses.
+2. **Chiaroscuro alternation.** Black ↔ white section rhythm. *UI implication:* never flat all-light or all-dark sequences.
+3. **2px tight radius.** *UI implication:* sharp Italian-precision corners.
+4. **Photography is the showcase.** *UI implication:* cars dominate, copy supports.
+5. **Maranello heritage > tech specs.** *UI implication:* lead with story, not numbers.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Ferrari user segments (existing Ferraristi, prospective buyers, racing enthusiasts), not individual people.*
+
+**Marcus Conti, 55, Milan.** Existing Ferrari owner with 3 cars in collection.
+
+**Heinz Müller, 48, Munich.** Track-day enthusiast considering 296 GTB.
+
+**Sofia Park, 42, Seoul.** Tech founder, first Ferrari purchase.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (configurator start)** | Model selector with cinematic photography |
+| **Empty (no saved configs)** | "Begin your Ferrari" CTA |
+| **Loading (config render)** | Real-time 3D rendering |
+| **Loading (price)** | Per-option price update |
+| **Error (incompatible)** | Constraint explanation |
+| **Error (waitlist required)** | "This model is by allocation only — contact dealer" |
+| **Success (saved)** | Configuration ID + dealer share |
+| **Success (booked test)** | Dealer confirmation |
+| **Skeleton (model showcase)** | Black/white placeholders |
+| **Disabled (region restricted)** | Region tooltip |
+| **Loading (long render)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 200ms | Hover |
+| `motion-cinematic` | 600ms | Hero reveals |
+
+Cinematic easing for hero, standard for chrome. `prefers-reduced-motion: reduce` disables hero auto-play.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 24 — Apple-tier)
+**Tier 1 sources:** ferrari.com/en-EN home + /en-EN/auto/car-range (live DOM via playwright — Primary `#da291c` Ferrari Red **0px** 21px-square 57px / 16px·400 (SUBSCRIBE on /auto); ALL CAPS 12px·400 ghost nav across chrome; cookie banner 2px / 13.008px·600 utility exception).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/history):** Wikipedia (Enzo Ferrari + Ferrari company), Britannica, CNBC (2015-10-21 IPO debut), Ferrari Corporate listing page, Fortune.
+**Style ref:** `apple` (luxury minimal). **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer cited cookie banner as canonical Primary; the actual Primary is `#da291c` 0px (cookie 2px is GDPR utility track).

package/{references → web/references}/figma/DESIGN.md

@@ -81,68 +81,142 @@ These appear in product UI screenshots and hero gradients (NOT in marketing chro
 
 ## 4. Component Stylings
 
+Verified end-to-end against Tier 1 (`figma.com/ko-kr/`, `figma.com/ko-kr/design/` live DOM) and Tier 2 (`styles.refero.design/style/60793669` + `/8caa5004`). Refero claimed "Global Action Pill 50px"; live inspect confirmed Primary CTA is **8px**, not 50px — refero captured the **Segmented Tab Pill** as Primary. This §4 separates them. See `web/references/figma/.verification.md` for the full conflict matrix.
+
 ### Buttons
 
-**Black Solid (Pill)**
-- Background: Pure Black (`#000000`)
-- Text: Pure White (`#ffffff`)
-- Radius: circle (50%) for icon buttons
+**Primary Pill (Black)**
+- Background: `#000000`
+- Text: `#ffffff`
+- Border: 1px solid transparent
+- Radius: 8px
+- Padding: 12px 21px
+- Font: 16px / 330 / figmaSans
+- Focus: dashed 2px outline `#0d99ff`
+- Use: default Primary CTA across figma.com — "Get started", "지금 무료로 시작하기"
+
+**Primary Pill (Indigo)**
+- Background: `#4D49FC`
+- Text: `#ffffff`
+- Border: 1px solid transparent
+- Radius: 8px
+- Padding: 12px 20px
+- Font: 18px / 480 / figmaSans
 - Focus: dashed 2px outline
-- Maximum emphasis
-
-**White Pill**
-- Background: Pure White (`#ffffff`)
-- Text: Pure Black (`#000000`)
-- Padding: 8px 18px 10px (asymmetric vertical)
-- Radius: pill (50px)
+- Use: alt Primary on hero/product surfaces — paired with Black Primary on home; "Panel Execution CTA" pattern in refero terminology
+
+**Outline Text Button**
+- Background: transparent
+- Text: `#000000`
+- Border: 1px solid transparent (no visible border in default; outline appears on focus)
+- Radius: 8px
+- Padding: 12px 21px
+- Font: 18px / 330 / figmaSans
 - Focus: dashed 2px outline
-- Standard CTA on dark/colored surfaces
-
-**Glass Dark**
-- Background: `rgba(0, 0, 0, 0.08)` (subtle dark overlay)
-- Text: Pure Black
-- Radius: circle (50%)
+- Use: secondary actions like "Contact sales", "영업팀에 문의"
+
+**Hero CTA (Larger)**
+- Background: `#000000`
+- Text: `#ffffff`
+- Border: none
+- Radius: 16px
+- Padding: 8px 24px 10px
+- Font: 16px / 400 / figmaSans
+- Use: oversized Primary CTA in hero modules — wider radius for hero region pacing
+
+**Segmented Tab Pill**
+- Background: active `rgba(0, 0, 0, 0.08)` | inactive `#ffffff`
+- Text: `#000000`
+- Border: none
+- Radius: 50px (pill)
+- Padding: 8px 18px 10px (asymmetric vertical)
+- Font: 18px / 480 / figmaSans
 - Focus: dashed 2px outline
-- Secondary action on light surfaces
+- Use: product-area navigation ("프롬프트", "디자인", "그리기", "개발", "게시", "홍보", "협업", "프레젠테이션") — the 50px pill that refero captured as "Global Action Pill"
+
+**Icon Round (Light)**
+- Background: `rgba(0, 0, 0, 0.08)` (frosted)
+- Text: `#000000`
+- Border: none
+- Radius: 50%
+- 36×36px square
+- Use: carousel prev/next on light surfaces
+
+**Icon Round (Dark)**
+- Background: `rgba(255, 255, 255, 0.16)` (frosted)
+- Text: `#ffffff`
+- Border: none
+- Radius: 50%
+- 36×36px square
+- Use: carousel prev/next on dark/colored surfaces
+
+**Icon Round (Solid Black)**
+- Background: `#000000`
+- Text: `#ffffff`
+- Border: none
+- Radius: 50%
+- 40×40px square
+- Use: media controls (pause/play) on the design surface
+
+### Inputs
+
+**Prompt Input Panel**
+- Background: `#ffffff`
+- Border: 1px solid `#e2e2e2`
+- Radius: 16px
+- Padding: 16px
+- Shadow: `rgba(0, 0, 0, 0.1) 0px 24px 70px 0px`
+- Use: Figma Make / AI prompt input (the "floatingPanels" in refero terminology)
+
+### Cards
+
+**Community Artifact Card**
+- Background: `#ffffff`
+- Border: none
+- Radius: 0px
+- Padding: 12px vertical metadata, no horizontal bound
+- Shadow: none (image bleeds full width)
+- Use: Community-page artifacts; the bleed-edge image is the design
+
+**Color Tile Card** (templates section)
+- Background: variants — `#e4ff97` (lime), `#00b6ff` (cyan), `#24cb71` (green), `#c4baff` (lavender), `#95b9ac` (sage)
+- Text: `#000000`
+- Border: none
+- Radius: 0px (full bleed)
+- Padding: 0px (image-as-content)
+- Use: home page template surfaces — color is the differentiator, geometry stays squared
 
-**Glass Light**
-- Background: `rgba(255, 255, 255, 0.16)` (frosted glass)
-- Text: Pure White
-- Radius: circle (50%)
-- Focus: dashed 2px outline
-- Secondary action on dark/colored surfaces
+### Navigation
 
-### Cards & Containers
-- Background: Pure White
-- Border: none or minimal
-- Radius: 6px (small containers), 8px (images, cards, dialogs)
-- Shadow: subtle to medium elevation effects
-- Product screenshots as card content
+**Top Nav Bar**
+- Background: `#ffffff`
+- Height: ~64px
+- Logo: Figma wordmark, black SVG
+- Links: 16px / figmaSans / `#000000` text / underline 1px decoration on hover
+- CTAs (right): Outline Text "Contact sales" + Primary Pill "Get started"
+- Use: persistent top nav across figma.com
 
-### Navigation
-- Clean horizontal nav on white
-- Logo: Figma wordmark in black
-- Product tabs: pill-shaped (50px) tab navigation
-- Links: black text, underline 1px decoration
-- CTA: Black pill button
-- Hover: text color via CSS variable
+**Pill Tab Bar** — see Segmented Tab Pill button variant above (used as section nav for product-area filter)
 
-### Distinctive Components
+### Distinctive Patterns
 
-**Product Tab Bar**
-- Horizontal pill-shaped tabs (50px radius)
-- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)
-- Active tab highlighted
+**Dashed Focus Indicators**
+- All interactive elements use `dashed 2px` outline on focus
+- References the selection-handle outlines inside the Figma editor itself — a meta-design choice connecting marketing site and product
 
 **Hero Gradient Section**
 - Full-width vibrant multi-color gradient background
-- White text overlay with 86px display heading
+- White text overlay with 86px display heading (figmaSans)
 - Product screenshots floating within the gradient
 
-**Dashed Focus Indicators**
-- All interactive elements use `dashed 2px` outline on focus
-- References the selection handles in the Figma editor
-- A meta-design choice connecting website and product
+---
+
+**Verified:** 2026-05-08 (omd:migrate Apple-tier)
+**Tier 1 sources:** figma.com/ko-kr/, figma.com/ko-kr/design/ (live DOM via playwright `getComputedStyle`, 2 surfaces)
+**Tier 2 sources:** styles.refero.design/style/60793669-28e2-41bd-bf9d-972151630f7c (Figma primary), /style/8caa5004-a8cc-4c7e-a2bb-00ff60618729 (Figma Config); getdesign.md/figma — directory snippet only
+**Conflicts unresolved:** none. **Conflict resolved:** refero claimed Primary 50px pill — live inspect proved that's the **Segmented Tab Pill**, not the Primary CTA. Primary is 8px. Both variants now documented separately.
+**Earlier mistakes reverted:** "Black Solid (Pill)" was conflating Primary (8px) + Tab (50px) + Icon Round (50%) into a single entry; Cards/Navigation/Distinctive were prose, not canonical schema (caused `/reference/figma` to render only Buttons spec cards). All separated and rewritten.
+**`.verification.md`:** `web/references/figma/.verification.md` (raw observations + per-component conflict matrix).
 
 ## 5. Layout Principles
 
@@ -257,7 +331,9 @@ Figma's voice is **colloquial-craft** — the register of someone who takes desi
 
 ## 11. Brand Narrative
 
-Figma was founded in 2012 by **Dylan Field and Evan Wallace**. The founding bet was technical and contrarian: at a time when every serious design tool was a native app (Sketch for Mac, Adobe everything), Field and Wallace decided to build a design tool that ran **in the browser, with real-time multiplayer collaboration**. That required solving WebGL rendering, operational-transform networking for multiplayer, and typesetting — all simultaneously. The tool launched publicly in 2016 after roughly four years of head-down engineering.
+Figma was founded **August 16, 2012** by **Dylan Field and Evan Wallace** (verified via [Wikipedia: Dylan Field](https://en.wikipedia.org/wiki/Dylan_Field), [Index Ventures retrospective](https://www.indexventures.com/perspectives/figma-goes-public-thirteen-unforgettable-years-with-dylan-field/)). The two met at **Brown University** — Wallace was a year ahead and TA'd Field's CS course; they bonded over WebGL ([Sequoia Capital spotlight](https://sequoiacap.com/article/dylan-field-figma-spotlight/)). Field received a **$100,000 Thiel Fellowship** to leave school and work full-time on the company ([Fortune, 2025](https://fortune.com/2025/08/01/figma-ipo-cofounder-dylan-field-former-linkedin-intern-peter-thiel-fellowship/)). The founding bet was technical and contrarian: at a time when every serious design tool was a native app (Sketch for Mac, Adobe everything), Field and Wallace decided to build a design tool that ran **in the browser, with real-time multiplayer collaboration**. That required solving WebGL rendering, operational-transform networking for multiplayer, and typesetting — all simultaneously. After roughly **three years in stealth**, Figma emerged from closed beta in **2015** and launched publicly in **September 2016**.
+
+The company reached a **$10B valuation in 2021**, navigated a $20B Adobe acquisition that fell through to regulatory pressure (2022-2023), and held its **IPO on NYSE on August 2, 2025** ([Fortune](https://fortune.com/2025/08/01/figma-ipo-cofounder-dylan-field-former-linkedin-intern-peter-thiel-fellowship/)) — closing post-IPO around $68B market cap.
 
 Figma's brand has always centered on **design as collaboration** rather than design as solo authorship. The product's original framing was captured in the phrase "design is a team sport"; the current marketing positioning — *"Figma lets you turn big ideas into real products. Brainstorm, design, and build with your team."* — preserves the same thesis through different words. **Config**, Figma's annual conference, is explicitly framed around *"craft, quality, and intention in an AI-powered world"* and functions as a community gathering more than a product-launch event.
 

package/{references → web/references}/framer/DESIGN.md

@@ -88,22 +88,76 @@ The overall effect is a nightclub for web designers: dark, precise, seductive, a
 ## 4. Component Stylings
 
 ### Buttons
-- **Frosted Pill**: `rgba(255, 255, 255, 0.1)` background, black text (`#000000`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle
-- **Solid White Pill**: `rgb(255, 255, 255)` background, black text (`#000000`), full pill shape (100px radius), padding `10px 15px`. The primary CTA — clean, high-contrast on dark, unmissable
-- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background
-- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects
-
-### Cards & Containers
-- **Dark Surface Card**: Black or near-black (`#090909`) background, `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` blue ring shadow border, rounded corners (10px–15px radius)
-- **Elevated Card**: Multi-layer shadow — `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px` (subtle top highlight) + `rgba(0, 0, 0, 0.25) 0px 10px 30px` (deep ambient shadow)
-- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews
-- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces
-
-### Inputs & Forms
-- Minimal form presence on the marketing site
-- Input fields follow dark theme: dark background, subtle border, white text
-- Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`
-- Placeholder text in `rgba(255, 255, 255, 0.4)`
+
+**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
@@ -244,3 +298,76 @@ When refining existing screens generated with this design system:
 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.