oh-my-design-cli 1.0.2 → 1.1.0

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

@@ -93,21 +93,76 @@ The overall design philosophy is restraint through warmth. Minimal color (almost
 ## 4. Component Stylings
 
 ### Buttons
-- **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA — warm, muted, understated
-- **Frosted Tag**: `rgba(255, 255, 255, 0.16)` background, black text (`rgb(0, 0, 0)`), rectangular (6px radius), `1px 6px` padding. Small inline tag-like buttons
-- **Ghost**: No visible background, text-only with underline decoration on hover
-- **Hover**: Subtle opacity or brightness shift — no dramatic color changes
-
-### Cards & Containers
-- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px–12px border-radius
-- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px–12px)
-- **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px–14px radius
-- **Hover**: Minimal — content cards don't dramatically change on hover, maintaining the calm aesthetic
-
-### Inputs & Forms
-- Minimal form presence on the marketing site
-- Dark background inputs with warm gray text
-- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)
+
+**Dark Pill**
+- Background: `#353534`
+- Text: `#afaeac` (Ash Gray)
+- Radius: 50px (pill)
+- Padding: 10px
+- Font: 16px / 400 / Matter
+- Hover: subtle opacity/brightness shift
+- Use: Primary CTA — warm, muted, understated
+
+**Frosted Tag**
+- Background: `rgba(255, 255, 255, 0.16)`
+- Text: `#000000`
+- Radius: 6px
+- Padding: 1px 6px
+- Font: 12px / 400 / Matter
+- Use: Small inline tag-like button
+
+**Ghost**
+- Background: transparent
+- Text: `#afaeac`
+- Radius: 50px
+- Padding: 10px
+- Hover: underline decoration
+- Use: Tertiary text-only action
+
+### Inputs
+
+**Default**
+- Background: `#1a1a18`
+- Text: `#faf9f6`
+- Border: 1px solid `rgba(226, 226, 226, 0.35)`
+- Radius: 8px
+- Padding: 10px 12px
+- Font: 16px / 400 / Matter
+- Placeholder: `#868584` (Stone Gray)
+- Focus: border brightness increase (no colored ring — monochromatic)
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — minimal form presence on marketing site.
+
+### Cards
+
+**Photography Card**
+- Background: full-bleed nature imagery
+- Radius: 8px (or 12px)
+- Padding: 0px (image-led)
+- Use: Nature photography with overlay text
+
+**Terminal Screenshot Card**
+- Background: `#1a1a18`
+- Radius: 12px
+- Padding: 0px (UI fills frame)
+- Use: Product terminal UI in dark container
+
+**Bordered Card**
+- Background: `#1a1a18`
+- Text: `#faf9f6`
+- Border: 1px solid `rgba(226, 226, 226, 0.35)`
+- Radius: 12px
+- Padding: 24px
+- Use: Containment card with semi-transparent border
+
+### Badges
+
+**Default**
+- Background: `rgba(255, 255, 255, 0.16)`
+- Text: `#000000` (or `#faf9f6` on dark)
+- Radius: 6px
+- Padding: 1px 6px
+- Font: 12px / 400 / Matter
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — frosted tag re-used as badge.
 
 ### Navigation
 - **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links
@@ -251,3 +306,75 @@ When refining existing screens generated with this design system:
 3. Check that Matter Regular (400) is the default weight — Medium (500) only for emphasis
 4. Confirm uppercase labels have wide letter-spacing (1.4px–2.4px) — tight uppercase feels wrong here
 5. The overall tone should feel warm and calm, like a well-designed magazine — not aggressive or tech-flashy
+
+## 10. Voice & Tone
+
+Warp's voice is **agentic-development-warm and terminal-magazine.** "The Agentic Development Environment" — terminal that's been redesigned for the AI agent era. Wide letter-spacing uppercase + warm dark canvas signal "well-designed magazine" rather than "tech-aggressive."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb-noun. "Download Warp", "Get Warp", "Try free" |
+| Marketing | Magazine-warm. Real terminal screenshots, not stock images |
+| Documentation | CLI-first, code-block heavy |
+| Error | Calm. "Command failed. View error log." |
+
+**Voice samples**
+- Tagline: *"The Agentic Development Environment"* <!-- verified: warp.dev homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary terminal". Aggressive comparison framing.
+
+## 11. Brand Narrative
+
+Warp was founded **June 2020** in San Francisco by **Zach Lloyd (Founder/CEO)** — formerly **Principal Engineer at Google** and **interim CTO at TIME** ([Warp — Wikipedia](https://en.wikipedia.org/wiki/Warp_(terminal)), [Sequoia Capital — Transforming the Command Line at Warp Speed](https://sequoiacap.com/article/warp-spotlight/), [Zach Lloyd — LinkedIn](https://www.linkedin.com/in/zachlloyd/)). Built natively in **Rust** for **macOS, Windows, and Linux**. **Show HN: Warp launched 2022** ([Hacker News — Show HN: Warp Rust-based terminal](https://news.ycombinator.com/item?id=30921231)). **Series B $50M (June 2023)** led by **Sequoia Capital**; total funding ~**$73M** across seed, A, B per recent reporting ([FinSMEs — Warp $50M Series B 2023-06](https://www.finsmes.com/2023/06/warp-raises-50m-series-b-funding-round.html)). Now positioned as **"The Agentic Development Environment"** — the first ADE built for coding with multiple agents (live `<title>` 2026-05 confirms). **Recently open-sourced** the Agentic Development Environment ([StreetInsider — Warp open-sources ADE with cloud agents](https://www.streetinsider.com/EZ+Newswire/Warp+Open-Sources+Its+Agentic+Development+Environment,+Introducing+a+New+Model+for+Building+Software+with+Cloud+Agents/26381208.html), [byteiota — 37K stars in days](https://byteiota.com/warp-terminal-open-source-agentic-dev-environment/)). The brand voice — warm dark canvas, wide letter-spacing uppercase, magazine-style chrome, **`oklch()` color-space tokens** — reflects "premium developer tool, not just another terminal." (NOTE: there's a separate **Warp YC W23** company — payroll compliance for Y Combinator startups — distinct from this Warp terminal.)
+
+## 12. Principles
+
+1. **Agentic-first.** *UI implication:* AI agent integration first-class, not bolted on.
+2. **Warm and calm register.** *UI implication:* never tech-flashy or aggressive.
+3. **Wide uppercase tracking 1.4-2.4px.** *UI implication:* never tight uppercase.
+4. **Dark warm canvas.** *UI implication:* not pure black; warm dark.
+5. **Magazine layout.** *UI implication:* generous section padding, photography-considered.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Warp user segments (Mac-based engineers, terminal power users, AI-pair-programming adopters), not individual people.*
+
+**Sergey Volkov, 36, Berlin.** Senior engineer. Warp replaced iTerm2 for AI commands + blocks.
+
+**Sofia Park, 31, Seoul.** Backend engineer. Warp Drive for shared workflows with team.
+
+**Marcus Webb, 41, San Francisco.** Engineering manager. Warp for production debugging sessions.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no commands)** | "Run your first command" |
+| **Empty (no AI history)** | "Try `warp ai`" |
+| **Loading (command)** | Terminal output streams |
+| **Loading (AI generation)** | Per-token streaming |
+| **Error (command)** | Stack trace block |
+| **Error (AI rate limit)** | Tier limit + upgrade |
+| **Success (committed)** | Block confirmation |
+| **Success (shared)** | Warp Drive share link |
+| **Skeleton (block list)** | Warm dark placeholders |
+| **Disabled (no plan)** | Upgrade link |
+| **Loading (long task)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+
+Standard cubic-bezier; calm easing. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 62 — Apple-tier)
+**Tier 1 sources:** warp.dev home + /pricing (live DOM via playwright — Primary **`oklch(0.97 0.01 84.6)` Warp Cream + `oklch(0.14 0.004 84.6)` Warp Espresso** text 3px / 36px / 4×16 / 14px·500; Outline 4px sub-tier; **Billing toggle 9999px** + **`oklab()` translucent** discipline. **`oklch()` for solid + `oklab()` for translucent — most advanced color-space convention in corpus**, surpassing Sanity's `display-p3()`).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** Wikipedia (Warp terminal), Sequoia Capital, LinkedIn (Lloyd ex-Google/TIME), HN (Show HN: Warp 2022), FinSMEs (2023-06 $50M Series B), Sacra, StreetInsider (OSS ADE), byteiota (37K stars).
+**Style ref:** `claude` (warm magazine register). **Conflicts unresolved:** none. **Earlier addition:** `oklch()`/`oklab()` color-space convention + 3px sharp Primary canonical (prior footer values appear to be from a different surface state).

package/web/references/webflow/DESIGN.md

@@ -0,0 +1,253 @@
+# Design System Inspiration of Webflow
+
+## 1. Visual Theme & Atmosphere
+
+Webflow's website is a visually rich, tool-forward platform that communicates "design without code" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.
+
+**Key Characteristics:**
+- White canvas with near-black (`#080808`) text
+- Webflow Blue (`#146ef5`) as primary brand + interactive color
+- WF Visual Sans Variable — custom variable font with weight 500–600
+- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`
+- Conservative 4px–8px border-radius — sharp, not rounded
+- Multi-layer shadow stacks (5-layer cascading shadows)
+- Uppercase labels: 10px–15px, weight 500–600, wide letter-spacing (0.6px–1.5px)
+- translate(6px) hover animation on buttons
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Near Black** (`#080808`): Primary text
+- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links
+- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue
+- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant
+- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`
+
+### Secondary Accents
+- **Purple** (`#7a3dff`): `--_color---secondary--purple`
+- **Pink** (`#ed52cb`): `--_color---secondary--pink`
+- **Green** (`#00d722`): `--_color---secondary--green`
+- **Orange** (`#ff6b00`): `--_color---secondary--orange`
+- **Yellow** (`#ffae13`): `--_color---secondary--yellow`
+- **Red** (`#ee1d36`): `--_color---secondary--red`
+
+### Neutral
+- **Gray 800** (`#222222`): Dark secondary text
+- **Gray 700** (`#363636`): Mid text
+- **Gray 300** (`#ababab`): Muted text, placeholder
+- **Mid Gray** (`#5a5a5a`): Link text
+- **Border Gray** (`#d8d8d8`): Borders, dividers
+- **Border Hover** (`#898989`): Hover border
+
+### Shadows
+- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
+
+## 3. Typography Rules
+
+### Font: `WF Visual Sans Variable`, fallback: `Arial`
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 80px | 600 | 1.04 | -0.8px | |
+| Section Heading | 56px | 600 | 1.04 | normal | |
+| Sub-heading | 32px | 500 | 1.30 | normal | |
+| Feature Title | 24px | 500–600 | 1.30 | normal | |
+| Body | 20px | 400–500 | 1.40–1.50 | normal | |
+| Body Standard | 16px | 400–500 | 1.60 | -0.16px | |
+| Button | 16px | 500 | 1.60 | -0.16px | |
+| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
+| Caption | 14px | 400–500 | 1.40–1.60 | normal | |
+| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
+| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
+| Code: Inconsolata (companion monospace font)
+
+## 4. Component Stylings
+
+### Buttons
+
+**Transparent**
+- Background: transparent
+- Text: `#080808`
+- Radius: 4px
+- Padding: 8px 16px
+- Font: 16px / 550 / WF Visual Sans Variable
+- Hover: translate(6px)
+- Use: Default text-style button — signature horizontal nudge on hover
+
+**Blue Primary**
+- Background: `#146ef5`
+- Text: `#ffffff`
+- Radius: 4px
+- Padding: 8px 16px
+- Font: 16px / 550 / WF Visual Sans Variable
+- Use: Primary CTA — Webflow Blue
+
+**White Circle**
+- Background: `#ffffff`
+- Text: `#080808`
+- Radius: 50%
+- Padding: 12px (icon button)
+- Use: Circular icon button
+
+### Inputs
+
+**Default**
+- Background: `#ffffff`
+- Text: `#080808`
+- Border: 1px solid `#d8d8d8`
+- Radius: 4px
+- Padding: 8px 12px
+- Font: 16px / 500 / WF Visual Sans Variable
+- Focus: border `#146ef5`
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
+
+### Cards
+
+**Standard**
+- Background: `#ffffff`
+- Border: 1px solid `#d8d8d8`
+- Radius: 8px
+- Padding: 24px
+- Use: Default content card — conservative sharp radius
+
+**Compact**
+- Background: `#ffffff`
+- Border: 1px solid `#d8d8d8`
+- Radius: 4px
+- Padding: 16px
+- Use: Smaller utility container
+
+### Badges
+
+**Blue Badge**
+- Background: `#146ef5`
+- Text: `#ffffff`
+- Radius: 4px
+- Padding: 2px 8px
+- Font: 12.8px / 550 / WF Visual Sans Variable
+- Use: Solid blue badge
+
+**Tinted**
+- Background: `rgba(20, 110, 245, 0.1)` (Blue-tinted at 10%)
+- Text: `#146ef5`
+- Radius: 4px
+- Padding: 2px 8px
+- Font: 12.8px / 550 / WF Visual Sans Variable
+- Use: Subtle tinted badge
+
+**Uppercase Micro**
+- Background: transparent
+- Text: `#080808`
+- Radius: 4px
+- Padding: 2px 6px
+- Font: 10px / 500-600 / WF Visual Sans Variable, uppercase, +1px tracking
+- Use: Micro-label uppercase badge
+
+## 5. Layout
+- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)
+- Radius: 2px, 4px, 8px, 50% — conservative, sharp
+- Breakpoints: 479px, 768px, 992px
+
+## 6. Depth: 5-layer cascading shadow system
+
+## 7. Do's and Don'ts
+- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
+- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
+
+## 8. Responsive: 479px, 768px, 992px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Webflow Blue (`#146ef5`)
+- Heading / body text: Near Black (`#080808`)
+- Muted text: `~#666666` (estimated)
+- Page background: White (`#ffffff`)
+- Border default: `#d8d8d8`
+- Secondary accent: Purple (`#7a3dff`), Pink (`#ed52cb`), Green (`#00d722`)
+- These three secondary accents are used for category coding (e.g., feature cards, plan tiers) — never as primary CTAs.
+
+### Example Component Prompts
+- "Build a Webflow primary button: bg `#146ef5`, white text, `~8px` border-radius, `12px 24px` padding, WF Visual Sans Variable weight 600 16px. Hover: bg darkens ~10%."
+- "Create a feature card with category accent: white bg, `1px solid #d8d8d8` border, `16px` radius. Use the secondary palette (purple `#7a3dff` / pink `#ed52cb` / green `#00d722`) as a top-edge color bar (4px tall) to indicate category. Title 20px weight 600 `#080808`, body 14px weight 400."
+- "Design a navigation header: white sticky bar, Webflow logo left, link nav (14px weight 500 `#080808`, hover to `#146ef5`), Webflow Blue 'Sign up' CTA right. Subtle 1px bottom border on scroll."
+- "Create a plan tier comparison: 3 columns, each card with white bg, `16px` radius. The 'recommended' tier gets a colored top border (`#146ef5` for default, `#7a3dff` for premium) and a 'Most Popular' badge using that same color."
+
+### Iteration Guide
+1. Use Webflow Blue `#146ef5` only as the primary CTA color — secondary accents handle visual variety and category coding.
+2. The three secondary colors (purple/pink/green) work as a SET — use them together for tier comparisons or feature categories, not in isolation.
+3. Keep components on white — Webflow's marketing aesthetic is bright and airy, never dark mode for the marketing surface.
+4. Border-radius stays moderate (8-16px) — never pill or fully square. Webflow sits between the geometric (Vercel/Linear) and rounded (Mintlify) ends of the spectrum.
+5. Use WF Visual Sans Variable weight 600 for headlines and weight 500 for buttons. Body uses weight 400.
+
+## 10. Voice & Tone
+
+Webflow's voice is **agentic-web-platform and design-tool-confident.** "The agentic web platform for modern businesses" — recently pivoted from "no-code design tool" to "agentic web platform" positioning. Marketing copy emphasizes professional designers + business outcomes.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started for free", "Talk to sales", "Try Webflow" |
+| Marketing | Customer-quote-driven. Real customer sites as social proof |
+| Documentation | Visual-heavy, screenshot-driven |
+| Error | Specific. "Element constraints conflict. Adjust width or layout." |
+
+**Voice samples**
+- Marketing tagline: *"The agentic web platform for modern businesses"* <!-- verified: webflow.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary no-code". Aggressive Wix-comparison framing.
+
+## 11. Brand Narrative
+
+Webflow was founded **2013** in San Francisco by **Vlad Magdalin (CEO)** + younger brother **Sergie Magdalin** + ex-Intuit colleague **Bryant Chou** ([Webflow — Wikipedia](https://en.wikipedia.org/wiki/Webflow), [Acquired Podcast — Building Webflow w/ Vlad Magdalin](https://www.acquired.fm/episodes/building-webflow-and-the-no-code-movement-with-vlad-magdalin-co-founder-and-ceo)). Vlad **quit Intuit in 2012**; Sergie + Chou joined that same year. **Famously rejected by Y Combinator November 2012**, then **published working prototype on Hacker News March 2013** → **10,000+ beta sign-ups**, eventually **graduating from YC's accelerator in 2013** ([Webflow blog — How Webflow got into Y Combinator](https://webflow.com/blog/the-story-of-how-webflow-and-y-combinator), [Strixus — $4B Turnaround Webflow YC](https://strixus.com/entry/the-4b-turnaround-webflows-epic-journey-to-y-combinator-success-18134)). Visual web design tool that competed with WordPress for marketing-site builders. **Series C $120M (March 2022)** at **$4B valuation** with **Khosla Ventures, Y Combinator, Tim Draper, Accel, CapitalG, Silversmith Capital Partners, Draper Associates** — total **~$334.9M raised** as of October 2023 ([Contrary Research — Webflow](https://research.contrary.com/company/webflow), [Tracxn — Webflow](https://tracxn.com/d/companies/webflow/__4ydLbavRvsWn4Llop1QC4CHeauSFwj7rhDh41SueLuE)). The **2024-2025 pivot to "agentic web platform"** positions Webflow for the AI-driven web era while preserving the canvas-first design DNA — confirmed via live `<title>` "Webflow: The agentic web platform for modern businesses" 2026-05.
+
+## 12. Principles
+
+1. **Designer-first canvas.** *UI implication:* canvas + properties layout, not code-only.
+2. **Moderate radius (8-16px).** *UI implication:* sit between geometric (Vercel) and rounded (Mintlify).
+3. **WF Visual Sans Variable.** weight 600 / 500 / 400. *UI implication:* don't substitute.
+4. **Agentic positioning.** *UI implication:* AI features first-class in nav.
+5. **Real customer sites as proof.** *UI implication:* lead with customer showcases.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Webflow user segments (independent designers, agency owners, marketing teams), not individual people.*
+
+**Sofia Russo, 33, Milan.** Indie designer. Webflow for client marketing sites.
+
+**Henrik Sondergaard, 41, Copenhagen.** Agency founder. Multi-client Webflow projects.
+
+**Marcus Chen, 38, San Francisco.** Marketing lead at SaaS. Webflow for landing pages without engineering.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no projects)** | "Create new project" + template gallery |
+| **Empty (canvas)** | "Add a section" CTA |
+| **Loading (project opening)** | Skeleton canvas |
+| **Loading (publishing)** | Build progress with status |
+| **Error (publish)** | Specific cause + retry |
+| **Error (CMS)** | Field-level inline message |
+| **Success (published)** | Live URL + analytics preview |
+| **Success (saved)** | Implicit |
+| **Skeleton (project list)** | 8-16px placeholders |
+| **Disabled (free plan limit)** | Upgrade link |
+| **Loading (long task)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+
+Standard cubic-bezier. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 63 — Apple-tier)
+**Tier 1 sources:** webflow.com home + /pricing (live DOM via playwright — Primary **`#146ef5` Webflow Blue** + `#fff` text 4px / 51px / 16×24 / 16px·500 + A11y skip-nav 8px / 36px + Top banner 0px Blue strip + **Made-in-Webflow credit pill 1440px** + body **`#080808` Webflow Ink** ultra-dark warm-cast near-black).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/YC):** Wikipedia (Webflow), Acquired Podcast (Vlad Magdalin), Webflow blog (How Webflow got into YC after Nov 2012 rejection), Strixus, Contrary Research, Tracxn, Frederick AI.
+**Style ref:** `notion`. **Conflicts unresolved:** none. **Earlier addition:** Webflow Blue `#146ef5` + Webflow Ink `#080808` body + 1440px credit-pill + 8px A11y sub-tier missed by prior 3px-nav-only pass.

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

@@ -171,3 +171,87 @@ What distinguishes Wise is its green-on-white-on-black material palette. Lime Gr
 3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
 4. "calt" on everything — contextual alternates are mandatory
 5. Inter 600 for body — confident reading weight
+
+## 10. Voice & Tone
+
+Wise's voice is **fintech-clear and money-honest.** "The international account / Money without borders" — capability-driven, no marketing fluff. Lime green primary `#9fe870` signals "modern fintech, not bank corporate." Wise has been famously transparent about exchange rate markups since founding.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started", "Sign up", "Open an account" |
+| Marketing | Comparison-honest. Real exchange rate vs banks shown |
+| Documentation | Plain English KYC explanations |
+| Error | Specific. "Recipient details invalid. Check IBAN format." |
+
+**Voice samples**
+- Marketing tagline: *"Money without borders"* <!-- verified: wise.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary fintech". Hidden fees framing.
+
+## 11. Brand Narrative
+
+Wise was **founded January 2011 in London** as **TransferWise** (renamed July 2012 → rebranded **Wise** February 2021) by **Kristo Käärmann** (ex-Deloitte management consultant) and **Taavet Hinrikus** (Skype's first employee). Both Estonian, both moved to London ~2006, both frustrated by ~5% bank FX markups on EUR↔GBP transfers — they devised a peer-to-peer workaround between themselves that became the business concept. **Reached unicorn status in 2016.** On **7 July 2021**, Wise went public via **direct listing on the London Stock Exchange (LSE:WISE)** at an **~$11B valuation** — no new shares issued, making Käärmann + Hinrikus **Estonia's first two billionaires**. The brand voice — transparent, honest, lime green `#9fe870` primary, Wise Sans 900 display, Inter 600 body — reflects "money without borders" for international citizens. <!-- citations: Wikipedia (Wise company); Bloomberg 2021-07-07; ERR.ee; Fortune 2021-11-24 -->
+
+**Sources:**
+- [Wise (company) — Wikipedia](https://en.wikipedia.org/wiki/Wise_(company))
+- [Bloomberg — Wise Founders Turn Bank Fee Frustration into $3B Fortune (2021-07-07)](https://www.bloomberg.com/news/articles/2021-07-07/wise-founders-turn-bank-fee-frustration-into-3-billion-fortune)
+- [ERR — Wise founders' story contained plenty of twists and turns](https://news.err.ee/1608273048/daily-wise-founders-story-contained-plenty-of-twists-and-turns)
+- [Fortune — Taavet Hinrikus on his next act (2021-11-24)](https://fortune.com/2021/11/24/wise-taavet-hinrikus-venture-capital-tech-startup-investing/)
+
+## 12. Principles
+
+1. **Real exchange rate is the product.** *UI implication:* always show interbank rate; markups visible.
+2. **Multi-currency native.** *UI implication:* nav supports 50+ currency selection.
+3. **Lime green `#9fe870` for primary.** *UI implication:* preserve lime; don't substitute corporate blue.
+4. **Inter 600 body.** *UI implication:* confident reading weight; don't lighten to 400.
+5. **`calt` OpenType.** Contextual alternates mandatory. *UI implication:* preserve OpenType features.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Wise user segments (international workers, freelancers with multi-currency income, expats), not individual people.*
+
+**Sergey Volkov, 33, Berlin.** Russian-origin engineer working remotely for US company. Wise multi-currency account.
+
+**Sofia Russo, 31, Milan.** Freelancer with EUR/USD/GBP income. Wise Business for invoicing.
+
+**Henrik Sondergaard, 38, Singapore.** Expat with Danish family. Wise for sending money home + multi-currency debit card.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no transfers)** | "Send your first transfer" CTA |
+| **Empty (no accounts)** | "Open an account" CTA |
+| **Loading (rate fetch)** | Real-time rate update with timestamp |
+| **Loading (KYC)** | Persistent badge with progress |
+| **Error (recipient)** | Specific field-level message |
+| **Error (compliance)** | Plain English explanation + remediation |
+| **Success (transfer)** | Receipt with rate / fee / arrival time |
+| **Success (KYC)** | Confirmation + account active |
+| **Skeleton (transaction list)** | Lime-tinted placeholders |
+| **Disabled (insufficient funds)** | Top up 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 FX rate update |
+
+Standard cubic-bezier; no bounce — fintech register. `prefers-reduced-motion: reduce` removes rate pulse.
+
+---
+
+**Verified:** 2026-05-08 (Apple-tier full migration)
+**Tier 1 sources:** wise.com/, wise.com/pricing (live DOM via playwright)
+- **Primary `#9fe870` Wise Green + `#163300` Dark Green text** 9999px / 48px / 11×24 / 16px·600 (Open an account / Try demo / Get Started / Sign up today — canonical hero/pricing CTA)
+- **Sign up — Header utility** `#9fe870` 9999px / 32px / 8×12 / 16px·600 (compact variant)
+- **Skip-to-content** `#9fe870` 9999px / 72px / 19×24 / 20px·600 (a11y, larger geometry)
+- **Top nav pills** transparent / `#163300` text / 9999px / 32px / 8×12 / 18px·600
+- **Submenu pills** transparent / `#163300` / 18.7693px / 40px / 8×12 / 18px·600 (subpixel — rem-based design tokens)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** Wikipedia (Wise company), Bloomberg 2021-07-07, ERR.ee, Fortune 2021-11-24.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

package/{references → web/references}/x.ai/DESIGN.md

@@ -265,3 +265,88 @@ The rgba overlays above resolve to these effective hex values when composited on
 8. Body text at 16px universalSans with 1.5 line-height for comfortable reading
 9. Generous section padding (48px-96px) -- let content breathe in the darkness
 10. The monochromatic white-on-dark palette is absolute -- resist adding color unless critical for function
+
+## 10. Voice & Tone
+
+xAI's voice is **research-oriented and Grok-irreverent.** "Understand the Universe" — Musk's mission framing for xAI. Pure white-on-dark monochrome signals "research lab"; Grok's irreverent tone in product surfaces (vs. xAI corporate's research register) creates a deliberate split.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Try Grok", "Read announcement", "Use now" |
+| Marketing | Research-positioned. Mathematical curiosity framing |
+| Grok product | Irreverent. "Memes are valid input" energy |
+| Error | Specific. "Rate limit. Try again in 30s." |
+
+**Voice samples**
+- xAI CTAs: *"Try Grok"*, *"Read announcement"*, *"Use now"* <!-- verified: x.ai homepage 2026-05 -->
+- Tagline: *"Understand the Universe"* <!-- verified: x.ai homepage -->
+
+**Forbidden phrases.** Generic "AI revolution" framing on xAI corporate. Inverse: corporate-stiff voice on Grok product (would break the brand split).
+
+## 11. Brand Narrative
+
+xAI was **founded March 2023** by **Elon Musk** with a team of AI researchers from **DeepMind, OpenAI**, and other leading labs in Palo Alto. Positioned as the "anti-OpenAI" — **Grok unveiled 2023-11-04** (integrated with X), **Grok-1 open-sourced 2024-03-17**, **Grok-1.5 (128k context) 2024-03-29**, **Grok 3 2025-02-17**, **Grok 4 + 4 Heavy 2025-07-09**. **Funding trajectory**: $134.7M Dec 2023 → **$6B Series B @ $24B (May 2024)** → **$6B Series C @ $50B (Dec 2024)** → **$20B Series E @ $230B** → **SpaceX all-stock acquisition valuing xAI at $250B** (combined entity ~$1.25T). **Colossus supercomputer** (>100k GPUs) built in Memphis, Tennessee in 122 days, fully operational Dec 2024; **Colossus 2** expansion underway. The brand identity — pure black canvas, thin 14px·400 sans, monochromatic white-on-black discipline, 9999px pill chrome — signals serious research lab while Grok product carries a separately irreverent voice. <!-- citations: Wikipedia (xAI), Britannica Money, Sacra, Wikipedia (Grok chatbot) -->
+
+**Sources:**
+- [xAI (company) — Wikipedia](https://en.wikipedia.org/wiki/XAI_(company))
+- [Grok (chatbot) — Wikipedia](https://en.wikipedia.org/wiki/Grok_(chatbot))
+- [Britannica Money — xAI](https://www.britannica.com/money/xAI)
+- [Sacra — xAI revenue, valuation & funding](https://sacra.com/c/xai/)
+
+## 12. Principles
+
+1. **Pure black canvas.** *UI implication:* `#000` everywhere; no warm dark substitutes.
+2. **White-on-dark monochrome.** *UI implication:* resist color unless function-critical.
+3. **Generous section padding (48-96px).** *UI implication:* never cramp; whitespace is the design.
+4. **Two-brand voice split.** xAI corporate = research; Grok product = irreverent.
+5. **Pill chrome 9999px.** *UI implication:* CTAs and badges pill-shaped.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by xAI / Grok user segments (X platform power users, AI researchers, contrarian-tech-conservative subscribers), not individual people.*
+
+**Marcus Webb, 38, Austin.** X Premium subscriber. Grok daily.
+
+**Sergey Volkov, 35, Berlin.** AI researcher. Reads xAI corporate model releases.
+
+**Sofia Park, 30, Seoul.** Curious early-adopter. Tried Grok via X integration.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no chat)** | Grok prompt with example queries |
+| **Empty (no API keys)** | "Generate API key" |
+| **Loading (model)** | Per-token streaming |
+| **Loading (image)** | Generation progress |
+| **Error (rate limit)** | "Rate limit. Try again in 30s." |
+| **Error (model)** | Specific cause |
+| **Success (response)** | Inline + share/copy |
+| **Success (deployed)** | Endpoint URL |
+| **Skeleton** | Pure-black placeholders with thin white borders |
+| **Disabled (no Premium)** | Upgrade to X Premium link |
+| **Loading (long task)** | 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 — research register. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-09 (Apple-tier full migration)
+**Tier 1 sources:** x.ai/, x.ai/api (live DOM via playwright)
+- **Outline Primary** transparent / `#fff` / 9999px / 38px / 8×16 / 14px·400 (Try Grok / Read announcement / Sign up now / Explore more — canonical home variant)
+- **Inverse Primary** `#fff` / `rgb(10,10,10)` `#0a0a0a` near-black / 9999px / 38px / 8×16 / 14px·400 (Grok 4.3 API / View docs — /api hero variant)
+- **Compact ghost CTA** transparent / `#fff` / 9999px / 34px / 6×14 / 14px·400 (Use now / Build now / Read)
+- **Top nav** transparent / `rgba(255,255,255,0.5)` translucent / 0px / 28px / 6×12 / 14px·400 (Grok / API / Company / Colossus / Careers)
+- All weight **400** — never bold; pure monochrome white-on-black-`#000`-canvas
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** Wikipedia (xAI), Wikipedia (Grok chatbot), Britannica Money, Sacra.
+**Style ref:** `claude` (research minimalism). **Conflicts unresolved:** none.