oh-my-design-cli 1.0.2 → 1.1.0

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

@@ -97,44 +97,107 @@ Inter is used everywhere — headings, body, buttons, captions — with extensiv
 ## 4. Component Stylings
 
 ### Buttons
-- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`). Hover: opacity 0.6
-- **Secondary Button**: Transparent background, white text, 6px radius, `1px solid rgba(255, 255, 255, 0.1)` border, subtle drop shadow (`rgba(0, 0, 0, 0.03) 0px 7px 3px`). Hover: opacity 0.6
-- **Ghost Button**: No background or border, gray text (`#6a6b6c`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white
-- **CTA (Download)**: Semi-transparent white background (`hsla(0, 0%, 100%, 0.815)`), dark text (`#18191a`), pill shape. Hover: full white background (`hsl(0, 0%, 100%)`)
-- **Transition**: All buttons use opacity transition for hover rather than background-color change — a signature Raycast interaction pattern
-
-### Cards & Containers
-- **Standard Card**: `#101111` surface, `1px solid rgba(255, 255, 255, 0.06)` border, 12px–16px border-radius
-- **Elevated Card**: Ring shadow `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner — creates a double-ring containment
-- **Feature Card**: 16px–20px border-radius, subtle warm glow (`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`) behind hero elements
-- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement
-
-### Inputs & Forms
-- Dark input fields with `#07080a` background, `1px solid rgba(255, 255, 255, 0.08)` border, 8px border-radius
-- Focus state: Border brightens, blue glow (`hsla(202, 100%, 67%, 0.15)`) ring appears
-- Text: `#f9f9f9` input color, `#6a6b6c` placeholder
-- Labels: `#9c9c9d` at 14px weight 500
 
-### Navigation
-- **Top nav**: Dark background blending with page, white text links at 16px weight 500
-- **Nav links**: Gray text (`#9c9c9d`) → white on hover, underline decoration on hover
-- **CTA button**: Semi-transparent white pill at nav end
-- **Mobile**: Collapses to hamburger, maintains dark theme
-- **Sticky**: Nav fixed at top with subtle border separator
-
-### Image Treatment
-- **Product screenshots**: macOS window chrome style — rounded corners (12px), deep shadows simulating floating windows
-- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background
-- **Hero illustration**: Diagonal stripe pattern in Raycast Red — abstract, geometric, brand-defining
-- **App UI embeds**: Showing actual Raycast command palette and extensions — product as content
+**Primary Pill**
+- Background: transparent
+- Text: `#ffffff`
+- Radius: 86px (pill)
+- Padding: 10px 16px
+- Shadow: `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
+- Hover: opacity 0.6
+- Use: Primary pill button on dark surfaces
+
+**Secondary**
+- Background: transparent
+- Text: `#ffffff`
+- Border: 1px solid `rgba(255, 255, 255, 0.1)`
+- Radius: 6px
+- Padding: 8px 14px
+- Shadow: `rgba(0, 0, 0, 0.03) 0px 7px 3px`
+- Hover: opacity 0.6
+- Use: Secondary action
+
+**Ghost**
+- Background: transparent
+- Text: `#6a6b6c`
+- Radius: 86px
+- Padding: 10px 16px
+- Shadow: `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
+- Hover: opacity 0.6, text brightens to `#ffffff`
+- Use: Tertiary action — gray text
+
+**CTA Download**
+- Background: `hsla(0, 0%, 100%, 0.815)`
+- Text: `#18191a`
+- Radius: 86px (pill)
+- Padding: 10px 16px
+- Hover: `hsl(0, 0%, 100%)` (full white)
+- Use: Hero "Download" CTA on dark surfaces
+
+### Inputs
+
+**Default**
+- Background: `#07080a`
+- Text: `#f9f9f9`
+- Border: 1px solid `rgba(255, 255, 255, 0.08)`
+- Radius: 8px
+- Padding: 10px 12px
+- Placeholder: `#6a6b6c`
+- Focus: border brightens, blue glow `hsla(202, 100%, 67%, 0.15)` ring
+- Label: `#9c9c9d` 14px / 500
+- Use: Form input on dark theme
+
+### Cards
+
+**Standard**
+- Background: `#101111`
+- Text: `#ffffff`
+- Border: 1px solid `rgba(255, 255, 255, 0.06)`
+- Radius: 12px
+- Padding: 16px
+- Use: Default dark card
+
+**Elevated**
+- Background: `#101111`
+- Radius: 16px
+- Padding: 20px
+- Shadow: `rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset`
+- Use: Double-ring elevated card
+
+**Feature**
+- Background: `#101111`
+- Radius: 20px
+- Padding: 24px
+- Shadow: `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` (subtle warm glow)
+- Use: Hero/feature card with warm glow
+
+### Badges
+
+**Neutral**
+- Background: `#1b1c1e`
+- Text: `#ffffff`
+- Radius: 6px
+- Padding: 0px 6px
+- Font: 14px / 500
+- Use: Categorization badge — compact pill-like treatment
 
 ### Keyboard Shortcut Keys
-- **Key cap styling**: Gradient background (`#121212` → `#0d0d0d`), heavy multi-layer shadow (`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + inset shadows), creating realistic physical key appearance
-- Border-radius: 4px–6px for individual keys
+- Key cap: gradient `#121212` → `#0d0d0d`, multi-layer shadow `rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + inset shadows
+- Radius: 4-6px
+- Use: Realistic physical key cap rendering for Raycast shortcuts
 
-### Badges & Tags
-- **Neutral badge**: `#1b1c1e` background, white text, 6px radius, 14px font at weight 500, `0px 6px` padding
-- Compact, pill-like treatment for categorization
+### Image Treatment
+- Product screenshots: macOS window chrome style — rounded corners (12px), deep shadows simulating floating windows
+- Full-bleed sections: Dark screenshots blend seamlessly into the dark background
+- Hero illustration: Diagonal stripe pattern in Raycast Red — abstract, geometric, brand-defining
+- App UI embeds: actual Raycast command palette and extensions — product as content
+
+### Navigation
+- Top nav: Dark background blending with page, white text links at 16px weight 500
+- Nav links: Gray text (`#9c9c9d`) → white on hover, underline on hover
+- CTA: Semi-transparent white pill at nav end
+- Mobile: hamburger, dark theme preserved
+- Sticky: Fixed at top with subtle border separator
 
 ## 5. Layout Principles
 
@@ -266,3 +329,75 @@ When refining existing screens generated with this design system:
 3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong
 4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled
 5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern
+
+## 10. Voice & Tone
+
+Raycast's voice is **prosumer-confident and keyboard-first.** "Your shortcut to everything" — concise, capability-driven, never marketing-fluff. Dark prosumer canvas + warm gradients signal "Mac native, designed for power users."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Download", "Sign up", "Get started" |
+| Marketing | Capability-list. "Spotlight on steroids" framing |
+| Documentation | Keyboard-shortcut-heavy, code-block-friendly |
+| Error | Specific. "Extension failed to load. Check console for details." |
+
+**Voice samples**
+- Tagline: *"Your shortcut to everything"* <!-- verified: raycast.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary launcher". Aggressive Spotlight-comparison framing.
+
+## 11. Brand Narrative
+
+Raycast was founded **2020** out of **London** by ex-Facebook engineers **Thomas Paul Mann (CEO)** and **Petr Nikolaev (CTO)** — they **met working at Facebook on the same team**, sharing frustration with the clunky productivity tools they used and a desire to build a better Spotlight ([TechCrunch — Raycast $30M Series B 2024-09](https://techcrunch.com/2024/09/25/raycast-raises-30m-to-bring-its-mac-productivity-app-to-windows-and-ios/), [Ness Labs — Thomas Paul Mann interview](https://nesslabs.com/raycast-featured-tool)). Funding ladder: **first round March 18 2020** (seed) → **$15M Series A (November 2021)** led by **Accel + Coatue** ([TechCrunch — Raycast $15M 2021-11](https://techcrunch.com/2021/11/30/developer-productivity-tools-startup-raycast-raises-15m-from-accel-and-coatue/)) → **$30M / €27M Series B (Sept 25 2024)** to expand from Mac to Windows + iOS ([EU-Startups — Raycast €27M Series B 2024-09](https://www.eu-startups.com/2024/09/london-based-raycast-raises-e27-million-series-b-to-help-ios-and-windows-enhance-productivity/)) → **total $47.8M across 4 rounds from 20 investors** including **Accel, Y Combinator, Atomico** ([Tracxn — Raycast](https://tracxn.com/d/companies/raycast/__VNiI9rqA4HFcosfhPf0QoAIcecG3jJRlMCseC8jQeOw)). Mac-native productivity tool — Spotlight replacement that grew into a platform for extensions. Strong adoption among engineers, designers, and prosumers. Brand voice — keyboard-first, prosumer-aesthetic — reflects the product positioning.
+
+## 12. Principles
+
+1. **Keyboard is the interface.** *UI implication:* every action has a keyboard shortcut documented inline.
+2. **Inter with OpenType features.** `calt`, `kern`, `liga`, `ss03`. *UI implication:* don't substitute system fonts.
+3. **Hover via opacity, not color swap.** *UI implication:* preserve opacity-transition pattern.
+4. **Dark prosumer canvas.** *UI implication:* default to dark theme; light theme as secondary.
+5. **Extensions are first-class.** *UI implication:* Store + Extension nav has main-nav placement.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Raycast user segments (Mac power users, engineers, prosumer designers), not individual people.*
+
+**Sergey Volkov, 36, Berlin.** Senior engineer, Raycast as Spotlight replacement + AI commands.
+
+**Sofia Park, 31, Seoul.** Product designer with 30+ extensions installed.
+
+**Marcus Webb, 41, San Francisco.** Engineering manager. Raycast Pro subscriber for AI features.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no extensions)** | "Browse the Store" CTA + featured grid |
+| **Empty (search)** | "No commands found. Try different keywords." |
+| **Loading (extension loading)** | Subtle skeleton with maintained dimensions |
+| **Loading (AI command)** | Per-token streaming inline |
+| **Error (extension)** | Specific error + reload extension button |
+| **Error (auth)** | Specific cause + re-auth flow |
+| **Success (executed)** | Implicit; result appears |
+| **Success (extension installed)** | Subtle check + immediately available |
+| **Skeleton (results)** | Dark-tone placeholders |
+| **Disabled (no Pro)** | Upgrade link |
+| **Loading (long task)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover opacity |
+| `motion-standard` | 250ms | Modal, panel |
+
+Standard cubic-bezier; minimal bounce. **Hover via opacity 0.6** is signature. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 47 — Apple-tier)
+**Tier 1 sources:** raycast.com home + /pro (live DOM via playwright — Primary **`#e6e6e6` Light Gray** + Charcoal `#2f3031` text 8px / 36px / 14px·**500**; banner-pill `#130d0e` Deep Black 1000px / 30px (top promo); newsletter inline 4px variant; dark-canvas Outline `rgba(255,255,255,0.05)` 12px on /pro).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** TechCrunch (2021-11 $15M Accel+Coatue + 2024-09 $30M Series B), EU-Startups (€27M Series B), TechFundingNews, Ness Labs (Mann interview), Tracxn ($47.8M total / 20 investors).
+**Style ref:** `claude`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer captured nav-link mid-gray (`#9c9c9d`) — canonical Primary is **`#e6e6e6` Light Gray** 8px (the brand-defining download CTA, missed entirely).

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

@@ -309,3 +309,75 @@ When refining existing screens generated with this design system:
 4. Describe the desired "feel" alongside specific measurements — "assertive automotive energy" communicates the NouvelR Bold heading personality better than "font-weight: 700"
 5. Always check whether a section should be light or dark — the chessboard alternation is a core pattern
 6. Reserve Renault Yellow for ONE button per screen — if yellow appears in more than one CTA, the hierarchy collapses
+
+## 10. Voice & Tone
+
+Renault's voice is **French-popular-mobility and accessible-design.** Pivot 2021+ to "accessible mobility" + Renault Yellow signature. Marketing copy emphasizes "voitures pour tous" with French aesthetic restraint.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Découvrir", "Configurer", "Réserver" |
+| Marketing | Photography + concise headlines |
+| Documentation | Specs + sustainability reporting |
+| Error | Polite French. "Une erreur s'est produite." |
+
+**Voice samples**
+- Marketing CTA pattern: *"더 알아보기"* / *"Découvrir"* <!-- verified: renaultgroup.com 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary mobility". Aggressive PSA-comparison framing.
+
+## 11. Brand Narrative
+
+Renault was founded **1899** in **Boulogne-Billancourt, France** by three brothers — **Louis Renault**, **Marcel Renault**, and **Fernand Renault** — with the **Renault Voiturette 1CV** sold December 1898 ([Renault — Wikipedia](https://en.wikipedia.org/wiki/Renault)). Iconic French automaker. The **Renault-Nissan Alliance** was founded **1999**; **Mitsubishi joined September 2017** after Nissan acquired a controlling stake (1 year prior), forming the **Renault-Nissan-Mitsubishi Alliance** ([Renault-Nissan-Mitsubishi Alliance — Wikipedia](https://en.wikipedia.org/wiki/Renault%E2%80%93Nissan%E2%80%93Mitsubishi_Alliance)). The **2021+ "Renaulution" rebrand** under CEO **Luca de Meo** introduced **a new geometric "diamond" logo** (announced March 2021, fleet-wide rollout completed by 2024) — **the 9th iteration of the diamond shape since 1925**, designed as two intertwined black lines evoking the popular 1972 design ([Renault Group — A Renaulution for the diamond](https://www.renaultgroup.com/en/magazine/our-group-news/a-renaulution-for-the-diamond/), [Design Week — new geometric logo](https://www.designweek.co.uk/issues/15-21-march-2021/renault-new-logo/)). Renault Yellow as a signature accent + chess-board section alternation as visual rhythm.
+
+## 12. Principles
+
+1. **One Renault Yellow per screen.** *UI implication:* if yellow appears more than once in CTAs, hierarchy collapses.
+2. **Chessboard alternation.** Light ↔ dark section rhythm. *UI implication:* never flat sequences.
+3. **0px sharp radius.** *UI implication:* don't round corners — French precision.
+4. **Photography drives.** *UI implication:* hero modules photo-first.
+5. **Sustainability narrative.** *UI implication:* EV + recycling references in product surfaces.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Renault user segments (French/EU mass-market buyers, EV early adopters, fleet managers), not individual people.*
+
+**Sophie Martin, 38, Lyon.** Family car buyer. Mégane E-Tech EV.
+
+**Henrik Müller, 45, Berlin.** Fleet manager evaluating EV transition.
+
+**Sofia Russo, 32, Milan.** First-time car buyer. Clio E-Tech for city driving.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (configurator)** | "Configurez votre Renault" |
+| **Empty (no saved)** | Model selector |
+| **Loading (config)** | Real-time 3D rendering |
+| **Loading (price)** | Per-option update |
+| **Error (incompatible)** | Specific constraint |
+| **Error (no inventory)** | "Délai de livraison: N mois" |
+| **Success (saved)** | Configuration ID |
+| **Success (booked)** | Dealer confirmation |
+| **Skeleton (model list)** | 0px placeholders |
+| **Disabled (option locked)** | Tooltip |
+| **Loading (long render)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 300ms | Modal, panel |
+
+Standard cubic-bezier; no bounce. `prefers-reduced-motion: reduce` disables auto-play.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 48 — Apple-tier)
+**Tier 1 sources:** renaultgroup.com/en home + /en/group (live DOM via playwright — Primary `#000` Black **100px full-pill** / 19×24 / **64px** / **14px·700 ALL CAPS** + Inverse `#fff` 100px (canvas-aware) + carousel 100% circular 40×40 + nav `#fff` 16px·700 ALL CAPS).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/Alliance/logo):** Wikipedia (Renault + RNM Alliance), Renault Group magazine (Renaulution diamond), Design Week / Autocar / It's Nice That (2021 logo rebrand).
+**Style ref:** `apple` (luxury minimal). **Conflicts unresolved:** none. **Earlier mistake reverted (significant — every Primary geometry value was wrong):** Radius 0px→**100px**, padding 24→**19×24**, height 72→**64**, font 16px·400→**14px·700 ALL CAPS**. §4 material correction.

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

@@ -259,3 +259,76 @@ What makes Replicate distinctive is its community-powered energy. The model gall
 3. Links use dotted underline (#bbbbbb) — never solid
 4. The gradient hero is the visual anchor — make it bold
 5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code
+
+## 10. Voice & Tone
+
+Replicate's voice is **research-engineering-friendly and API-first.** "Run AI with an API" — capability-driven, model-versioned. Marketing copy emphasizes the running-models-without-infra value prop.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started for free", "Try a model", "API access" |
+| Marketing | Model-driven. "Run X model with one line of code" |
+| Documentation | Code-first, copy-paste-ready |
+| Error | Specific. "Model output exceeded timeout (60s). Try smaller input." |
+
+**Voice samples**
+- Tagline: *"Run AI with an API"* <!-- verified: replicate.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary AI hosting". Generic platform claims.
+
+## 11. Brand Narrative
+
+Replicate was founded **2019** by **Ben Firshman** + **Andreas Jansson** ([Y Combinator — Replicate](https://www.ycombinator.com/companies/replicate), [Sequoia Capital — Partnering with Replicate](https://sequoiacap.com/article/partnering-with-replicate-machine-learning-simplified/)). **Firshman**: created **Docker Compose** during his time at Docker; **Jansson**: built research tools and infrastructure at **Spotify** with a **PhD in ML for music**. **Zeke Sikelianos** joined as a co-founder later. The founders' mission was to improve dissemination of scientific research with friendlier ML tools, leading to **Cog** — an open-source tool for packaging ML models into production-ready containers (Rust + Axum HTTP server). **Y Combinator Winter 2020 (W20)** batch ([MLQ — Replicate Deep Dive](https://mlq.ai/startups/replicate/)). Total funding **~$57.8M** with **post-Series B valuation $350M** (investors include **Sequoia Capital**, **Heavybit**). **Late 2025**: 50,000+ public models hosted + ~100 official curated by Replicate. **Acquired by Cloudflare** (Firshman's [LinkedIn](https://www.linkedin.com/in/bfirsh/) confirms current title **Head of AI Platform at Cloudflare**). The brand sits at the intersection of OSS researcher culture + cloud convenience — "run any model with one API call."
+
+## 12. Principles
+
+1. **One API, every model.** *UI implication:* uniform input/output schema across model variants.
+2. **Open-source heritage.** Cog still public. *UI implication:* surfaces emphasize OSS roots.
+3. **Gradient hero is the anchor.** *UI implication:* hero modules use bold gradient backgrounds.
+4. **Mixed type system.** basier-square / rb-freigeist-neue / JetBrains Mono. *UI implication:* don't substitute.
+5. **Model showcase first.** *UI implication:* discover/explore is the entry point, not pricing.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Replicate user segments (ML researchers, indie AI builders, content creators), not individual people.*
+
+**Yuki Tanaka, 30, Tokyo.** ML researcher experimenting with image models. Replicate for one-line API access without GPU setup.
+
+**Sofia Russo, 28, Milan.** Indie AI app builder shipping multiple SaaS. Replicate as the inference layer.
+
+**Marcus Chen, 41, San Francisco.** Senior engineer at content startup. Production replicate for image/video generation.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no API keys)** | "Generate first API key" CTA |
+| **Empty (no predictions)** | "Try a model" with featured grid |
+| **Loading (prediction)** | Per-step status + ETA |
+| **Loading (model loading)** | Cold-start indicator |
+| **Error (model)** | Specific. "Model failed: <reason>. Retry?" |
+| **Error (rate limit)** | Tier limit + upgrade |
+| **Success (prediction)** | Result inline + share link |
+| **Success (deployment)** | Endpoint + credentials |
+| **Skeleton (model grid)** | Gradient-tinted placeholders |
+| **Disabled (insufficient credits)** | Add credits link |
+| **Loading (long generation)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-streaming` | continuous | Token streaming |
+
+Standard cubic-bezier; no bounce. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 49 — Apple-tier)
+**Tier 1 sources:** replicate.com home + /explore (live DOM via playwright — Primary `#000` Black 0px sharp three-tier height (hero 54 / page 42 / mini 34) / 12-16×8-16 / 14-18px·400; **Replicate Orange-Red `#dd4425`** featured-accent on **Replicate Cream `#fffcfc`** card; Mid-Gray `#646464` nav + secondary; Charcoal `#202020` active code-tab states).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/Cloudflare-acquisition):** Y Combinator (W20), Sequoia Capital (Partnering with Replicate), Heavybit, MLQ Deep Dive, Latent Space podcast, LinkedIn (Firshman = Cloudflare Head of AI Platform — confirms Cloudflare acquisition), Tracxn.
+**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier addition:** 3-height tier system + Orange-Red `#dd4425` accent + Cream `#fffcfc` featured-surface + Cloudflare acquisition narrative missed by prior pass.

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

@@ -301,3 +301,76 @@ What makes Resend distinctive is its icy, blue-tinted border system. Instead of
 5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text
 6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers
 7. No shadows — use frost borders for depth against the void
+
+## 10. Voice & Tone
+
+Resend's voice is **dev-focused-elegant and API-first.** "Email for developers" — concise, capability-driven. Dark void canvas + frost-border depth signal "premium developer tool."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started", "Try it now", "Sign up" |
+| Marketing | API-first. Code snippets dominant in marketing |
+| Documentation | Code-first, framework-specific examples |
+| Error | Specific. "Invalid API key. Generate new one in Settings." |
+
+**Voice samples**
+- Tagline: *"Email for developers"* <!-- verified: resend.com homepage 2026-05 -->
+- Recurring promo: *"Announcing Resend Forward"* <!-- verified: resend.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary email API". Aggressive SendGrid-comparison framing.
+
+## 11. Brand Narrative
+
+Resend was incorporated **January 2023** (open-source `react.email` predecessor launched 2022) by **Bu Kinoshita** and **Zeno Rocha** ([Resend — How we got here](https://resend.com/handbook/company/how-we-got-here), [Y Combinator — Resend](https://www.ycombinator.com/companies/resend)). The pair launched **react.email** in 2022 because they were frustrated by how difficult it was to build modern email templates that worked across all email clients — that OSS distribution lever became the founder-edge for the commercial Resend product. They **immediately quit their jobs and moved to San Francisco** to join **Y Combinator's Winter 2023 (W23)** batch — **Launch HN: Resend (YC W23)** thread is publicly archived ([Hacker News — Launch HN: Resend](https://news.ycombinator.com/item?id=36309120)). After YC: **$3M seed round** ([Y Combinator/TechCrunch — Resend $3M](https://www.linkedin.com/posts/y-combinator_developer-focused-email-platform-resend-raises-activity-7087087056081866753-GaNB)). Modern email API positioned for developers — React Email components + clean DX. Strong YC + community adoption among indie SaaS builders. The brand voice tracks this positioning: minimal chrome, dark canvas, premium-developer aesthetic.
+
+## 12. Principles
+
+1. **Code is the marketing.** *UI implication:* hero shows real API code, never marketing illustration.
+2. **No shadows, frost borders.** *UI implication:* depth via translucent borders against dark void.
+3. **Pill (9999px) for CTAs and badges.** *UI implication:* primary actions pill-shaped.
+4. **Standard radius (4-16px) for containers.** *UI implication:* mixed radius is intentional.
+5. **React Email is the OSS hook.** *UI implication:* surfaces lead with React Email examples.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Resend user segments (indie SaaS founders, transactional email engineers, dev-tooling buyers), not individual people.*
+
+**Sofia Russo, 30, Milan.** Indie SaaS founder shipping authentication emails. React Email + Resend for clean DX.
+
+**Marcus Chen, 38, San Francisco.** Senior engineer migrating from SendGrid. Cares about deliverability + simple API.
+
+**Priya Krishnan, 27, Bengaluru.** YC startup building B2B SaaS. Resend as the only email service their team uses.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no domains)** | "Add your first domain" CTA + DNS setup |
+| **Empty (no API keys)** | "Generate first API key" CTA |
+| **Loading (sending)** | Per-email status visible |
+| **Loading (DNS verifying)** | Persistent badge with check button |
+| **Error (DNS not verified)** | Specific record + value to add |
+| **Error (rate limit)** | Tier limit + upgrade |
+| **Success (sent)** | Implicit; appears in dashboard |
+| **Success (domain verified)** | Subtle confirmation |
+| **Skeleton (email log)** | Frost-border placeholders |
+| **Disabled (no plan)** | Upgrade link |
+| **Loading (long batch)** | 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 — premium register. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 50 — Apple-tier)
+**Tier 1 sources:** resend.com home + /pricing (live DOM via playwright — **Primary `#00a3ff` Resend Blue 4px** / 41px / 12×20 / 14px·**600** + Tab pill `rgba(24,25,28,0.88)` Charcoal-translucent 16px (pricing tab active) + Announcement banner 9999px translucent blue (top promo) + Outline ghost 16px + Mid-Gray `#a1a4a5` nav text).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders):** Resend handbook (How we got here), Y Combinator (Resend W23), Hacker News (Launch HN W23), LinkedIn (YC TechCrunch $3M post), No Cap Blog (Rocha), Mintlify customer story.
+**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier mistake reverted (significant):** prior footer captured 16px tab/ghost variants only — canonical Primary is `#00a3ff` **Resend Blue 4px** (the brand-defining color, missed entirely). §4 material correction.

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

@@ -183,3 +183,77 @@ What distinguishes Revolut is its pill-everything button system. Every button us
 2. All buttons are pills (9999px) with generous padding
 3. Zero shadows — flat is the Revolut identity
 4. Near-black + white for marketing, semantic colors for product
+
+## 10. Voice & Tone
+
+Revolut's voice is **fintech-bold and segment-aware.** "Banking & Beyond" — confident, multi-segment positioning (Personal / Business / Kids & Teens). Pill chrome (9999px) signals "modern fintech" while flat-no-shadow design signals "no-nonsense banking."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started", "Try Revolut", "Sign up" |
+| Marketing | Segment-targeted. Personal vs Business vs Teens copy distinct |
+| Onboarding | KYC-aware. Plain-language compliance |
+| Error | Specific. "Insufficient funds. Top up via bank transfer." |
+
+**Voice samples**
+- Tagline: *"Banking & Beyond"* <!-- verified: revolut.com homepage 2026-05 -->
+- Segment nav: *"Personal / Business / Kids & Teens"* <!-- verified: revolut.com homepage -->
+
+**Forbidden phrases.** "Revolutionary fintech". Aggressive crypto-bro framing.
+
+## 11. Brand Narrative
+
+**Revolut Ltd was incorporated December 2013** by **Nikolay "Nik" Storonsky (CEO)** with **Vlad Yatsenko (CTO)** joining shortly after; the consumer product **launched 2015** at **Level39 fintech accelerator, Canary Wharf, London** ([Revolut — Wikipedia](https://en.wikipedia.org/wiki/Revolut), [Nik Storonsky — Wikipedia](https://en.wikipedia.org/wiki/Nik_Storonsky)). Storonsky was **the company's first investor (£300,000 of his own savings)**. **Yatsenko**: graduated with honors, worked at **Comarch (Krakow programmer)** → **UBS (London senior software developer 2010)** → brief stints at **Deutsche Bank + Credit Suisse** through 2014. Storonsky and Yatsenko are **both immigrants** ([The Vertical — immigrant founders Revolut](https://thevertical.la/development/who-are-the-immigrant-founders-behind-revolut-the-45-billion-neobank-eyeing-u-s-expansion/)). Originally a multi-currency travel card → expanded to full neobank with stocks, crypto, lending, insurance. **Valuation timeline**: $45B secondary share sale 2024 → **$75B November 2025** ([City AM — Revolut $75B](https://www.cityam.com/revolut-inside-nik-storonskys-75bn-fintech-empire-still-hunting-for-its-crown/)). **IPO timeline**: per Bloomberg April 20 2026 interview, Storonsky stated **~2 years from IPO with U.S. listing preferred**. The brand voice — bold, multi-segment, flat-design — tracks the product's evolution from single-card to financial super-app.
+
+## 12. Principles
+
+1. **Multi-segment first-class.** Personal / Business / Kids & Teens. *UI implication:* segment nav at top level.
+2. **Pill chrome 16px+.** *UI implication:* primary actions and nav use 16px pill.
+3. **Zero shadows.** *UI implication:* depth via background contrast, never shadow.
+4. **Near-black `#0e1318` + white marketing.** *UI implication:* marketing chrome stays achromatic.
+5. **Semantic colors only in product.** *UI implication:* charts + status use semantic; marketing stays neutral.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Revolut user segments (multi-currency travelers, freelancers, EU SMB, Gen Z), not individual people.*
+
+**Catherine Liu, 32, London.** UK-based consultant traveling EU monthly. Multi-currency wallet + travel insurance.
+
+**Marcus Müller, 38, Berlin.** Freelancer with EUR/USD income streams. Revolut Business for invoicing.
+
+**Sofia Park, 18, Seoul.** Teens account holder traveling for university applications.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no transactions)** | "Top up to start" CTA |
+| **Empty (no investments)** | "Browse stocks/crypto" link |
+| **Loading (price feed)** | Last cached + stale indicator |
+| **Loading (KYC)** | Persistent badge with progress |
+| **Error (KYC)** | Specific reason + remediation |
+| **Error (payment)** | Receipt-style failure + retry |
+| **Success (transaction)** | Receipt with full details + emoji-free confirmation |
+| **Success (deposit)** | Confirmation + when funds available |
+| **Skeleton (account list)** | Pill placeholders |
+| **Disabled (no funds)** | Top up inline link |
+| **Loading (long action)** | Multi-step progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-pulse` | continuous | Live price update |
+
+Standard cubic-bezier; no bounce — fintech register. `prefers-reduced-motion: reduce` disables price pulse.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 51 — Apple-tier)
+**Tier 1 sources:** revolut.com/en-US home + /en-US/business (live DOM via playwright — **all-pill 9999px** chrome with canvas-aware Charcoal/Light pair: **Charcoal `#191c1f`** Primary (consumer light canvas) + **Light Surface `#f4f4f4`** Inverse (Business dark canvas + feature cards) + Translucent `rgba(244,244,244,0.10)` on-dark hover, all 9999px / 42px / 10×24 / 16px·**500**).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/valuation/IPO):** Wikipedia (Revolut + Nik Storonsky), Huxley (Yatsenko Ukrainian billionaire bio), The Vertical (immigrant founders narrative), City AM ($75B Nov 2025), MoneyWeek, Bloomberg Billionaires, FinTech Magazine.
+**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier addition:** Charcoal `#191c1f` Primary + Light Surface `#f4f4f4` Inverse + canvas-aware pair + translucent variant missed by prior pass (which captured 38px segment-nav only — canonical is 42px Primary).