oh-my-design-cli 1.0.2 → 1.2.0

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

@@ -77,32 +77,73 @@ What makes Runway distinctive is its complete commitment to visual content as de
 ## 4. Component Stylings
 
 ### Buttons
-- Text: weight 600 at 14px abcNormal
-- Background: likely transparent or dark, with minimal border
-- Radius: small (4px) for button-like links
-- The button design is extremely restrained — no heavy fills or borders detected
-- Interactive elements blend into the editorial flow
-
-### Cards & Containers
-- Background: transparent or Dark Surface (`#1a1a1a`)
-- Border: `1px solid #27272a` (dark mode) — barely visible containment
-- Radius: small (4–8px) for functional elements; 16px for alert-style containers
-- Shadow: zero — no shadows on any element
-- Cards are primarily photographic — the image IS the card
 
-### Navigation
-- Minimal horizontal nav — transparent over hero content
-- Logo: Runway wordmark in white/black
-- Links: abcNormal at 16px, weight 400–600
+**Default**
+- Background: transparent
+- Text: `#ffffff` (or `#000000` on light surfaces)
+- Border: minimal / none
+- Radius: 4px
+- Padding: 8px 12px
+- Font: 14px / 600 / abcNormal
 - Hover: text shifts to white or higher opacity
-- Extremely subtle — designed to not compete with visual content
-
-### Image Treatment
-- Full-bleed cinematic photography and video dominate
-- AI-generated content shown at large scale as primary visual elements
-- Mixed-size image grids creating editorial magazine layouts
-- Dark overlays on hero images for text readability
-- Product screenshots with subtle rounded corners (8px)
+- Use: Restrained button — interactive elements blend into editorial flow, no heavy fills
+
+**Text Link**
+- Background: transparent
+- Text: `#ffffff`
+- Radius: 4px
+- Padding: 4px 8px
+- Font: 14px / 600 / abcNormal
+- Use: Inline link-style button
+
+### Inputs
+
+**Default**
+- Background: `#1a1a1a`
+- Text: `#ffffff`
+- Border: 1px solid `#27272a`
+- Radius: 4px
+- Padding: 8px 12px
+- Font: 14px / 400 / abcNormal
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — minimal dark input.
+
+### Cards
+
+**Photographic Card**
+- Background: transparent (image fills frame)
+- Radius: 8px
+- Padding: 0px (the image IS the card)
+- Border: none
+- Shadow: none
+- Use: Mixed-size image grid card — Research Article Cards / Trust Bar
+
+**Dark Surface Card**
+- Background: `#1a1a1a`
+- Text: `#ffffff`
+- Border: 1px solid `#27272a` (barely visible)
+- Radius: 8px
+- Padding: 16px
+- Shadow: none
+- Use: Functional dark card
+
+**Alert / Containment**
+- Background: `#1a1a1a`
+- Border: 1px solid `#27272a`
+- Radius: 16px
+- Padding: 24px
+- Shadow: none
+- Use: Alert-style containers (larger radius)
+
+### Badges
+
+**Default**
+- Background: transparent
+- Text: `#ffffff`
+- Border: 1px solid `#27272a`
+- Radius: 4px
+- Padding: 2px 8px
+- Font: 11px / 600 / abcNormal
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — uppercase label-style.
 
 ### Distinctive Components
 
@@ -126,6 +167,20 @@ What makes Runway distinctive is its complete commitment to visual content as de
 - On a dark background with white text
 - The emotional close — artistic and philosophical
 
+### Navigation
+- Minimal horizontal nav — transparent over hero content
+- Logo: Runway wordmark in white/black
+- Links: abcNormal at 16px, weight 400-600
+- Hover: text shifts to white or higher opacity
+- Extremely subtle — designed to not compete with visual content
+
+### Image Treatment
+- Full-bleed cinematic photography and video dominate
+- AI-generated content shown at large scale as primary visual elements
+- Mixed-size image grids creating editorial magazine layouts
+- Dark overlays on hero images for text readability
+- Product screenshots with subtle rounded corners (8px)
+
 ## 5. Layout Principles
 
 ### Spacing System
@@ -242,3 +297,76 @@ What makes Runway distinctive is its complete commitment to visual content as de
 4. Use the cool slate grays (#767d88, #7d848e) for secondary text — not warm grays
 5. Uppercase labels need letter-spacing (0.35px) — never tight uppercase
 6. Dark sections should be truly dark (#000000 or #1a1a1a) — no medium grays as surfaces
+
+## 10. Voice & Tone
+
+Runway's voice is **filmmaker-grade and AI-research-confident.** "Building AI to Simulate the World" — ambitious mission framing. Marketing copy positions Runway as the AI-native creative tool for video professionals + filmmakers, distinct from indie consumer tools.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get Started", "Try Runway", "Enterprise Sales" |
+| Marketing | Cinematic. Generated video samples dominate |
+| Documentation | Visual-first, frame-by-frame |
+| Error | Specific. "Generation failed: insufficient credits. Top up." |
+
+**Voice samples**
+- Tagline: *"Building AI to Simulate the World"* <!-- verified: runwayml.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary AI video". Generic Sora-comparison framing.
+
+## 11. Brand Narrative
+
+Runway was founded **2018** by **Cristóbal Valenzuela (CEO, Chilean)**, **Alejandro Matamala (Chilean)**, and **Anastasis Germanidis (Greek)** — the three met at **NYU Tisch School of the Arts ITP** ([Runway — Wikipedia](https://en.wikipedia.org/wiki/Runway_(company)), [Acquired Podcast — Cristobal Valenzuela complete history](https://www.acquired.fm/episodes/generative-ai-in-video-and-the-future-of-storytelling-with-runway-ceo-cristobal-valenzuela)). Initially a research tool for ML-creative experimentation → grew into AI video generation platform (**Gen-1, Gen-2, Gen-3, Gen-4**). Co-developed **Stable Diffusion** with the original research team. **Real production credits**: tools used in **Everything Everywhere All at Once** (Best Picture Oscar 2023) + **The Late Show with Stephen Colbert**. **June 2023**: $141M Series C extension at **$1.5B valuation** with **Google, NVIDIA, Salesforce**. **Current**: **~$860M total raised** with **General Atlantic, Amplify Partners, Google** — **valuation ~$5.3B** ([Sacra — Runway revenue/funding](https://sacra.com/c/runway/), [Contrary Research — Runway](https://research.contrary.com/company/runway)). Strong adoption in filmmaking + advertising. The brand voice — uppercase tracking, dark cinematic surfaces — reflects the filmmaker positioning.
+
+## 12. Principles
+
+1. **Filmmaker-grade, not consumer toy.** *UI implication:* tone is professional video production.
+2. **Truly dark surfaces.** `#000` or `#1a1a1a`, never medium gray. *UI implication:* preserve cinematic depth.
+3. **Uppercase with letter-spacing 0.35px.** *UI implication:* never tight uppercase.
+4. **Generated video samples lead.** *UI implication:* hero modules autoplay generated video, not static.
+5. **6px standard radius.** *UI implication:* keep consistent across CTAs and cards.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Runway user segments (filmmakers, advertising creatives, content studios), not individual people.*
+
+**Sofia Russo, 35, Milan.** Indie filmmaker. Runway Gen-4 for previs + b-roll generation.
+
+**Marcus Chen, 42, San Francisco.** Creative director at advertising agency. Runway for client pitches + concept exploration.
+
+**Yuki Tanaka, 31, Tokyo.** Music video director. Runway for stylistic transfer experiments.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no projects)** | "Start a new project" CTA + template gallery |
+| **Empty (no generations)** | "Try a generation" with prompt examples |
+| **Loading (generation)** | Real-time progress with frame previews |
+| **Loading (model)** | Initialization status |
+| **Error (generation)** | Specific. "Failed at frame 23. Retry from this point?" |
+| **Error (insufficient credits)** | Top up link + plan comparison |
+| **Success (generated)** | Inline player + download/share/timeline |
+| **Success (exported)** | Download triggered + shareable link |
+| **Skeleton (projects)** | Dark cinematic placeholders |
+| **Disabled (no plan)** | Upgrade link |
+| **Loading (long generation)** | Persistent progress with cancel option |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 300ms | Modal, panel |
+| `motion-cinematic` | 600ms | Hero video reveals |
+
+Cinematic easing for hero reveals, standard for chrome. `prefers-reduced-motion: reduce` disables hero auto-play.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 52 — Apple-tier)
+**Tier 1 sources:** runwayml.com home + /research (live DOM via playwright — Primary `#262626` Charcoal 6px / 32px / 6×10 / 14px·**600**; Outline `#eef1f5` Cool Cream + `#1a1a1a` Near-Black text 6px; compact 4px / 28px sub-tier; **top nav 11px·450 ALL CAPS** with `#0c0c0c` Deep Black; **three-shade near-black palette** `#0c0c0c` / `#1a1a1a` / `#262626`).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** Wikipedia (Runway), Acquired Podcast (Valenzuela complete history), LinkedIn (Cristóbal Valenzuela), Sacra ($5.3B valuation), Contrary Research, Tracxn, Skim AI, Upstarts Media.
+**Style ref:** `claude`. **Conflicts unresolved:** none. **Earlier addition:** ALL CAPS 11px·**450** nav signature + 3-shade near-black palette + 4px compact sub-tier missed; Outline cream is `#eef1f5` (Cool Cream w/ blue cast) not `#f7f7f7`.

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

@@ -355,3 +355,75 @@ Light Surface:   #ededed / #ffffff (inverted sections)
 5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections
 6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata
 7. **Polish**: Ensure all interactive elements hover to `#0052ef`, all buttons are pills or subtle 5px radius, borders are hairline (1px)
+
+## 10. Voice & Tone
+
+Sanity's voice is **content-platform-confident and developer-warm.** "The Content Operating System for the AI era" — confident enterprise positioning with developer-friendly chrome. Mixed type system + flat-no-shadow signals "premium content tooling."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started", "Talk to sales", "Start free" |
+| Marketing | Capability-list. Studio + Dataset + Content Lake naming |
+| Documentation | Deep, code-block-heavy, GROQ-aware |
+| Error | Specific. "Schema validation failed at field X." |
+
+**Voice samples**
+- Tagline: *"The Content Operating System for the AI era"* <!-- verified: sanity.io homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary CMS". Aggressive WordPress-comparison framing.
+
+## 11. Brand Narrative
+
+Sanity was **founded 2016 in Norway** with the **public launch November 2017** by four co-founders: **Magnus Kongsli Hillestad**, **Even Westvang**, **Øyvind Rostad**, and **Simen Svale Skogsrud** ([Threshold Ventures — Magnus Hillestad founder Q&A](https://medium.com/threshold-ventures/magnus-hillestad-sanity-founder-story-80b7e97952d), [Sanity — Magnus profile](https://www.sanity.io/exchange/community/magnus)). **Dual-headquartered in Oslo and San Francisco** with remote team across four continents. Headless CMS positioned as content infrastructure — **Studio** (editor) + **Dataset** (storage) + **Content Lake** (queryable). Founding insight: content must be **structured data**, easily queried + distributed across APIs (vs traditional page-bound CMS). **Series B $39M (2021)** led by **ICONIQ Growth** with **Lead Edge Capital** + existing investors — ICONIQ's portfolio includes **Datadog, Snowflake, Notion, Airtable, Zoom** ([Sanity blog — It takes a village (Series B)](https://www.sanity.io/blog/it-takes-a-village), [TechStartups — Sanity $39M Series B](https://techstartups.com/2021/06/24/norwegian-tech-startup-sanity-raises-39-million-grow-unified-content-platform-building-data-driven-content-solutions/)). Strong adoption among design-first SaaS + e-commerce. The **2024-2025 evolution to "Content Operating System for AI era"** positions Sanity as the structured-content layer for AI applications — confirmed via live `<title>` "The Content Operating System for the AI era | Sanity" 2026-05.
+
+## 12. Principles
+
+1. **Content as code.** Schemas, GROQ queries, deploys as code. *UI implication:* schema-first approach surfaces.
+2. **Studio is the canvas.** Customizable React-based editor. *UI implication:* showcase Studio screenshots as primary marketing asset.
+3. **Hairline borders, no shadow.** *UI implication:* depth via 1px borders + color contrast.
+4. **Pills + 5px subtle.** *UI implication:* primary CTAs pill; secondary 5px radius.
+5. **Hover to `#0052ef` blue.** *UI implication:* preserve hover blue across all interactive elements.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Sanity user segments (developers, content teams, e-commerce marketers), not individual people.*
+
+**Henrik Sondergaard, 35, Copenhagen.** Senior engineer at e-commerce SaaS. Sanity Studio for product content management.
+
+**Sofia Russo, 30, Milan.** Indie SaaS shipping editorial sites. Sanity for headless CMS + Next.js integration.
+
+**Marcus Chen, 38, San Francisco.** Content lead at growth-stage SaaS. Owns the marketing site CMS.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no content)** | "Create your first document" CTA + schema picker |
+| **Empty (no schemas)** | "Define a schema" with code example |
+| **Loading (query)** | GROQ query result inline |
+| **Loading (publishing)** | Per-document progress |
+| **Error (schema)** | Specific. "Field X validation failed." |
+| **Error (deploy)** | Token + permission diagnostic |
+| **Success (published)** | Subtle confirmation + revision history |
+| **Success (preview)** | Inline preview link |
+| **Skeleton (document list)** | Hairline-border placeholders |
+| **Disabled (no permission)** | Role tooltip |
+| **Loading (long deploy)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `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 53 — Apple-tier)
+**Tier 1 sources:** sanity.io home + /pricing (live DOM via playwright — Primary **`color(display-p3 1 0.3333 0)`** Sanity Orange-Red (~`#ff5500` sRGB / wide-gamut P3) 99999px full-pill / 35px (page 13px·400 ALL CAPS) or 55px (hero 24px·400) / 4×12 or 8×32; Inverse `#0b0b0b` Near-Black; Light Secondary `#ededed`; A11y skip-nav `#0052ef` Sanity Blue. **`display-p3()` wide-gamut color-space — most advanced in corpus**).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** Threshold Ventures (Magnus Hillestad Q&A), Sanity profile pages (Magnus + Simen), Sanity blog (Series B "It takes a village"), TechStartups, Nordic 9, Crunchbase.
+**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier mistake reverted (significant):** prior footer claimed Primary was `#0b0b0b` 0px (announcement-banner strip) — canonical is **wide-gamut display-p3 Orange-Red 99999px full-pill**. Massive correction.

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

@@ -260,3 +260,76 @@ What makes Sentry distinctive is its embrace of the "dark IDE" aesthetic without
 4. Lime green (#c2ef4e) is the "pop" color — use once per section maximum
 5. Frosted glass for overlaid panels, solid purple for primary surfaces
 6. Rubik handles 90% of typography — Dammit Sans is hero-only
+
+## 10. Voice & Tone
+
+Sentry's voice is **error-tracking-honest and developer-empathetic.** Sentry is famous for talking about errors in plain English — "see what's broken, fix it fast." Frosted glass overlays + purple primary signal "premium debugging tool."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started", "Try Sentry", "Sign up free" |
+| Marketing | Error-honest. Real stack traces in marketing |
+| Documentation | Code-block-heavy, framework-specific |
+| Error (in product) | Specific stack trace + commit context |
+
+**Voice samples**
+- Marketing pattern: *"See what's broken"* / *"Errors and performance"* <!-- illustrative -->
+
+**Forbidden phrases.** "Revolutionary error monitoring". Generic "AI-powered" framing.
+
+## 11. Brand Narrative
+
+Sentry started as an **open-source project by David Cramer in 2008** for application error monitoring. **Cramer + Chris Jennings formally incorporated Functional Software Inc. in February 2012** ([CIO — Sentry's Cramer on bootstrapping](https://www.cio.com/article/401704/sentrys-david-cramer-on-bootstrapping-a-unicorn.html), [First Round Review — Sentry's Path to PMF](https://review.firstround.com/sentrys-path-to-product-market-fit/)). **Cramer (CTO)** + **Jennings (Chief Creative Officer)** **bootstrapped the company organically** for ~3 years before transitioning open-source to monetized product, and another stretch before taking VC. Cramer is famously a **high-school dropout** turned engineer — [First Round Review: "A High School Dropout Turned an Open-Source Project into a $3B Company"](https://review.firstround.com/sentrys-path-to-product-market-fit/). The brand voice tracks the founder positioning: errors are normal, debugging is craft, transparency is the ethos. Sentry remains heavily OSS-aware while operating a managed cloud product. **Total funding ~$217M** from **Accel, NEA, Bond Capital** at **~$3B valuation** ([Crunchbase — Sentry](https://www.crunchbase.com/organization/sentry), [Contrary Research — Sentry](https://research.contrary.com/company/sentry)). **Milin Desai is current CEO**. Purple primary is the signature accent — Tier 1 live measurement on `/pricing` shows the canonical Primary as `rgb(69, 38, 80)` = **`#452650` Sentry Deep Purple** (slightly different from prior §2 doc claim `#6c5fc7` Mid-Purple).
+
+## 12. Principles
+
+1. **Open-source heritage.** *UI implication:* self-hosted Sentry first-class option.
+2. **Errors are normal.** *UI implication:* tone never shames developers; debugging is craft.
+3. **Frosted glass for overlays.** *UI implication:* preserve translucent panel pattern.
+4. **Purple `#6c5fc7` primary.** *UI implication:* don't introduce new accent colors.
+5. **Rubik for 90%, Dammit Sans hero only.** *UI implication:* don't substitute Rubik.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Sentry user segments (backend engineers, mobile dev teams, frontend performance leads), not individual people.*
+
+**Sergey Volkov, 36, Berlin.** Backend engineer. Sentry as production error feed.
+
+**Sofia Russo, 30, Milan.** Mobile dev shipping iOS app. Crash analytics + release tracking.
+
+**Marcus Chen, 41, San Francisco.** Frontend performance lead. Web Vitals + LCP monitoring.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no projects)** | "Create your first project" with SDK install |
+| **Empty (no events)** | "Trigger first event" with code snippet |
+| **Loading (event capturing)** | Real-time event feed |
+| **Loading (issue grouping)** | Skeleton issue cards |
+| **Error (SDK)** | Specific. "DSN invalid" with verify steps |
+| **Error (rate limit)** | Tier limit + upgrade |
+| **Success (resolved)** | Issue moves to resolved tab + version |
+| **Success (alerted)** | Alert chip with route to alert |
+| **Skeleton (issue list)** | Frosted-glass placeholders |
+| **Disabled (no permission)** | Role tooltip |
+| **Loading (long replay)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `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 54 — Apple-tier)
+**Tier 1 sources:** sentry.io/welcome home + sentry.io/pricing (live DOM via playwright — Primary **`#452650` Sentry Deep Purple** 8px / 40px / 12×16 / **14px·700 ALL CAPS**; Outline Eggplant `#1f1633` text; Cookie Mid-Purple `#362d59`; Lavender Mist `#f5f3fa` 0px tab; nav 14px·500 ALL CAPS).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** First Round Review (Sentry PMF case study + Cramer podcast), CIO (Cramer bootstrapping), Crunchbase, Contrary Research, Tracxn, ShiftMag (Milin Desai CEO).
+**Style ref:** `stripe`.
+**Conflicts unresolved:** Brand Purple HEX — §2 doc cited `#6c5fc7` Mid-Purple; live DOM shows `#452650` Deep Purple as canonical Primary. **Resolution: 3-shade palette `#452650`/`#362d59`/`#1f1633`**, live `#452650` wins for Primary; both retained. **Earlier mistake reverted (significant):** prior footer captured nav 14px·500 ghost only — Primary is **14px·700 ALL CAPS Deep Purple**.