oh-my-design-cli 1.0.2 → 1.1.0

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

@@ -89,23 +89,92 @@ The design philosophy is maximum confidence through minimum decoration. Warm cre
 ## 4. Component Stylings
 
 ### Buttons
-- **Warm Cream Primary**: `#e9e5dd` background, Charcoal Ink (`#292827`) text, subtle rounded corners (8px radius), no visible border. The signature CTA — warm, muted, luxurious rather than aggressive
-- **Dark Primary** (on light sections): `#292827` background with white text, 8px radius — inverse of the warm cream for contrast sections
-- **Ghost / Text Link**: No background, underline decoration, Amethyst Link (`#714cb6`) or Charcoal Ink color depending on context
-- **Hero CTA**: Warm Cream on the dark purple gradient — the cream color pops dramatically against `#1b1938`
-- **Hover**: Subtle opacity or brightness shift — no dramatic color transformations
-
-### Cards & Containers
-- **Content Card**: White background, Parchment Border (`#dcd7d3`) 1px border, 16px border-radius — clean and minimal
-- **Dark Surface Card**: `#292827` border on dark sections, maintaining warm-neutral tone
-- **Hero Surface**: Semi-transparent white border (`rgba(255, 255, 255, 0.2)`) on purple gradient — ghostly containment
-- **Product Screenshot Cards**: Large product UI images with clean edges, minimal framing — the product itself is the visual
-- **Hover**: Minimal state changes — consistency and calm over flashy interactions
-
-### Inputs & Forms
-- Minimal form presence on the marketing site — Superhuman funnels users directly to signup
-- Dark-bordered inputs with Charcoal Ink borders and warm-toned placeholder text
-- Focus: Border emphasis increase, likely shifting from Parchment Border to Charcoal Ink
+
+**Warm Cream Primary**
+- Background: `#e9e5dd`
+- Text: `#292827` (Charcoal Ink)
+- Radius: 8px
+- Padding: 12px 20px
+- Font: 16px / 460 / Super Sans VF
+- Hover: subtle opacity / brightness shift
+- Use: Signature CTA — warm, muted, luxurious
+
+**Dark Primary**
+- Background: `#292827`
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 12px 20px
+- Font: 16px / 600 / Super Sans VF
+- Hover: subtle brightness shift
+- Use: Inverse CTA on light contrast sections
+
+**Hero CTA**
+- Background: `#e9e5dd` (Warm Cream)
+- Text: `#292827`
+- Radius: 8px
+- Padding: 14px 24px
+- Font: 16px / 600 / Super Sans VF
+- Use: Hero CTA on the dark purple gradient `#1b1938`
+
+**Ghost / Text Link**
+- Background: transparent
+- Text: `#714cb6` (Amethyst Link) or `#292827` (Charcoal Ink) by context
+- Radius: 0
+- Padding: 0
+- Decoration: underline
+- Use: Inline text link
+
+### Inputs
+
+**Default**
+- Background: `#ffffff`
+- Text: `#292827`
+- Border: 1px solid `#dcd7d3` (Parchment Border)
+- Radius: 8px
+- Padding: 12px 16px
+- Font: 16px / 460 / Super Sans VF
+- Focus: border `#292827` (Charcoal Ink)
+- Use: Standard input — minimal form presence; marketing site funnels users to signup
+
+### Cards
+
+**Content Card**
+- Background: `#ffffff`
+- Border: 1px solid `#dcd7d3` (Parchment Border)
+- Radius: 16px
+- Padding: 24px
+- Use: Clean and minimal default card
+
+**Dark Surface Card**
+- Background: `#292827`
+- Text: `#e9e5dd`
+- Border: 1px solid `#292827`
+- Radius: 16px
+- Padding: 24px
+- Use: Card on dark sections — warm-neutral tone preserved
+
+**Hero Surface**
+- Background: rgba transparent over purple gradient `#1b1938`
+- Border: 1px solid `rgba(255, 255, 255, 0.2)`
+- Radius: 16px
+- Padding: 24px
+- Use: Ghostly containment on hero gradient
+
+**Product Screenshot**
+- Background: transparent
+- Radius: 12px
+- Padding: 0px
+- Use: Large product UI image, clean edges, minimal framing
+
+### Badges
+
+**Default**
+- Background: `#e9e5dd`
+- Text: `#292827`
+- Radius: 8px
+- Padding: 4px 10px
+- Font: 12px / 600 / Super Sans VF
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — warm cream micro-tag.
 
 ### Navigation
 - **Top nav**: Clean white background on content sections, transparent on hero gradient
@@ -250,3 +319,76 @@ When refining existing screens generated with this design system:
 3. Ensure buttons use Warm Cream (#e9e5dd) not pure white or gray — the warmth is subtle but critical
 4. Confirm the only accent color is Lavender Glow (#cbb7fb) — no other hues should appear
 5. The overall tone should feel like a luxury product presentation — minimal, confident, with one dramatic color gesture in the hero
+
+## 10. Voice & Tone
+
+Superhuman's voice is **luxury-productivity and time-as-craft.** "Docs, Mail, and AI That Work Everywhere" — capability-driven with luxury register. Lavender Glow `#cbb7fb` accent + dark surfaces signal "premium tool for time-conscious professionals."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Sign up", "Get Superhuman", "Get the suite" |
+| Marketing | Time-as-craft. "Save 4 hours a week" recurring framing |
+| Documentation | Sparse — luxury product, minimal docs |
+| Error | Polite. "Couldn't sync. Try again in a moment." |
+
+**Voice samples**
+- Marketing CTAs: *"Sign up"* / *"Get Superhuman"* <!-- verified: superhuman.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary email". Aggressive Gmail-comparison framing.
+
+## 11. Brand Narrative
+
+Superhuman was founded **2014** in San Francisco by **Rahul Vohra (CEO)**, **Conrad Irwin (CTO)**, and **Vivek Sodera** — Vohra famously built the original brand around the **"time is luxury"** premium email positioning ([Tracxn — Superhuman](https://tracxn.com/d/companies/superhuman/__uNI3PJ_Huz1B_OobMp1RIu3DT8SOBubIyA2wkxh7Quk), [Antler — Superhuman with Rahul Vohra](https://www.antler.co/blog/antler-early-days-episode-2-superhuman-with-rahul-vohra)). **Series B $33M (May 2019)** led by **Andreessen Horowitz** with **Boldstart Ventures + First Round Capital** — total funding ~**$118M across 3 rounds** from 41 investors. Premium email client positioning — fast, keyboard-driven, AI-augmented. **Acquired by Grammarly July 1 2025**; Grammarly had recently acquired **Coda**, then **rebranded the combined Grammarly+Coda+Superhuman entity to "Superhuman"** as the unified suite name (live `superhuman.com` 2026-05 confirms Mail/Grammarly/Coda product nav under unified Superhuman brand). Per recent reporting: **$700M ARR, 40M daily users** for the merged company ([The Spl.it — Inside the New Superhuman: $700M ARR, 40M Daily Users with Rahul Vohra](https://www.thespl.it/p/inside-the-new-superhuman-700m-arr)). The brand voice — **Lavender Glow accent** (`#d4c7ff`) for the unified suite, Sky Blue (`#51b1e7`) preserved on legacy Superhuman Mail surfaces, luxury chrome, keyboard shortcuts as signature — reflects the "time is luxury" positioning carried forward.
+
+## 12. Principles
+
+1. **Time is the luxury.** *UI implication:* all surfaces emphasize speed/efficiency outcomes.
+2. **Keyboard-first.** *UI implication:* every action has a keyboard shortcut documented.
+3. **Lavender Glow `#cbb7fb` is THE accent.** *UI implication:* don't introduce other hues.
+4. **Pill 8-12px primary.** *UI implication:* primary CTAs pill-shaped.
+5. **Luxury minimal.** *UI implication:* don't crowd surfaces; whitespace is the design.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Superhuman user segments (busy executives, founders, sales leaders), not individual people.*
+
+**Catherine Liu, 44, NYC.** VP Sales at Series C SaaS. Superhuman for inbox velocity.
+
+**Marcus Webb, 38, San Francisco.** Founder. Email is most of his day; Superhuman keyboard speed is the difference.
+
+**Sofia Park, 32, Seoul.** Investor. Superhuman + Calendar + AI summary on every email.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no email)** | "Inbox Zero achieved" celebration moment |
+| **Empty (no contacts)** | Connect contacts CTA |
+| **Loading (sync)** | Real-time sync indicator |
+| **Loading (AI summary)** | Per-email summary loader |
+| **Error (sync)** | "Couldn't sync. Retry in 10s." |
+| **Error (delivery)** | Bounce indicator + retry |
+| **Success (sent)** | Subtle Lavender Glow pulse |
+| **Success (snoozed)** | Snooze badge with time |
+| **Skeleton (inbox)** | Lavender-tinted placeholders |
+| **Disabled (no plan)** | Upgrade link |
+| **Loading (AI processing)** | Per-email progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Keyboard shortcut commit |
+| `motion-fast` | 100ms | Hover (faster than typical for keyboard-first feel) |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-glow-pulse` | 800ms | Lavender Glow accent moment |
+
+**Lavender Glow pulse** is the signature accent moment. `prefers-reduced-motion: reduce` removes glow pulse.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 57 — Apple-tier)
+**Tier 1 sources:** superhuman.com home (unified Suite post-Grammarly-merger) + superhuman.com/pricing (legacy Superhuman Mail) — live DOM via playwright. **Two-system split**: Suite **`#d4c7ff` Lavender** 8px / 36px / 14px·600 + Lavender Dark `#714cb6` outline-text + Cream `color(srgb 0.925 0.914 0.885)` sub-nav + Maroon `#421d24` 16px banner; legacy Mail **`#51b1e7` Sky Blue** 6px / 46-54px / 18px·500-600 ALL CAPS + Sky Lighter `#3dafed` + Deep `#186dbb` featured. **Weight 460** rare intermediate. `color(srgb …)` CSS Color L4.
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/Grammarly-acquisition):** Tracxn, Antler (Vohra interview), Crunchbase, Boldstart Ventures, The Spl.it (post-merger ARR), TechRadar.
+**Style ref:** `claude`. **Conflicts unresolved:** none. **Earlier addition:** dual-system Lavender Suite + Sky Blue Mail post-merger split + Grammarly+Coda+Superhuman rebrand narrative + weight 460 + `color(srgb)` syntax missed by prior pass.

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

@@ -1,3 +1,8 @@
+---
+omd: 0.1
+brand: Tesla
+---
+
 # Design System Inspiration of Tesla
 
 ## 1. Visual Theme & Atmosphere
@@ -284,3 +289,168 @@ When refining existing screens generated with this design system:
 3. Use natural language descriptions, not CSS values — "barely rounded corners" not "border-radius: 4px"
 4. Describe the desired "feel" alongside specific measurements — "gallery-like silence between sections" communicates the whitespace philosophy better than "margin-bottom: 100vh"
 5. Always verify that photography is doing the emotional heavy-lifting — if the UI itself feels "designed," it's too much
+
+---
+
+## 10. Voice & Tone
+
+Tesla writes the way an engineer briefs a room: short declarative sentences, nouns before adjectives, and no adjective that doesn't earn its place. The voice treats the reader as someone capable of assessing a specification, not a prospect to be convinced. Range, charge time, and price appear before any superlative — and usually instead of one. When Tesla does reach for scale, it reaches for numbers, not words ("1.66 million vehicles delivered" rather than "record-breaking"). Marketing copy and a technical release note read in the same register; the surface changes, the voice does not.
+
+| Context | Tone |
+|---|---|
+| Headlines | Model name + single-word or short-phrase claim. "Model Y. Long Range." No verbs unless necessary. |
+| Primary CTA | Verb + noun, no modifier. "Order Now", "View Inventory", "Schedule a Drive". Never "Unlock", "Experience", "Discover". |
+| Vehicle specs | Number + unit, stated in isolation. "358 miles", "3.5 s 0–60 mph". No "up to" unless legally required; no "!". |
+| Mission / impact copy | Plain, declarative, direct from the filing. Reads like a prospectus paragraph, not a manifesto. |
+| Master Plan essays | First-principles reasoning in numbered steps. Long-form only when the argument actually requires it. |
+| Error (configurator / order) | States the blocker and the exact next step. No apologetic preamble. |
+| Service messaging | Time window, location, cost. Never "rest assured", never "our team is working hard". |
+| Legal / autonomy disclosures | Precise, regulator-ready. Capabilities and their conditions in the same sentence. |
+| Marketing email / announcement | Lowercase, under 12 words where possible. "Cybertruck Deliveries Begin." |
+
+**Forbidden phrases.** "Revolutionary", "game-changer", "unleash", "next-generation", "reimagined", "elevate", "experience the future", "buckle up", "beyond". No exclamation marks on routine CTAs. No emoji in product copy, configurator flows, service updates, or legal surfaces. No lifestyle adjectives stacked on specifications ("luxurious premium performance" — pick at most one and only when measurable). No "simply" or "just" preceding any action verb. No asking-a-question patterns in CTAs ("Ready to change the world?") — Tesla asserts, it doesn't prompt.
+
+**Voice samples.**
+
+- Homepage hero CTA pair: "Order Now" / "View Inventory" <!-- verified: tesla.com homepage, 2026-04, observed via base DESIGN.md §1 live recon and cross-referenced in third-party UX audit -->
+- Vehicle card secondary links: "Learn" / "Order" <!-- verified: tesla.com navigation dropdown, 2026-04, base DESIGN.md §4 -->
+- Persistent bottom bar: "Ask a Question" / "Schedule a Drive Today" <!-- verified: tesla.com chat bar, 2026-04, base DESIGN.md §4 -->
+- Mission statement (Impact page): "Our mission is to accelerate the world's transition to sustainable energy." <!-- cited: [tesla.com/impact](https://www.tesla.com/impact) -->
+- Master Plan Part IV framing: "sustainable abundance" <!-- cited: [tesla.com/master-plan-part-4](https://www.tesla.com/master-plan-part-4), Sept 2025 -->
+- Order-flow error (illustrative pattern): "This configuration isn't available in your region. Change delivery location or select a different trim." <!-- illustrative: not verified as live Tesla copy; pattern follows the voice rules above — state blocker, state exact next step, no apology -->
+
+## 11. Brand Narrative
+
+Tesla Motors was incorporated in July 2003 by **Martin Eberhard** and **Marc Tarpenning**, two Silicon Valley engineers who had concluded that the binding constraint on electric transport was no longer physics but industrial will. Elon Musk joined in February 2004 as chairman and lead Series A investor; J.B. Straubel joined as CTO the same year. A 2009 settlement recognizes all five early contributors — Eberhard, Tarpenning, Ian Wright, Musk, and Straubel — as co-founders ([Wikipedia: Tesla, Inc.](https://en.wikipedia.org/wiki/Tesla,_Inc.)). The founding premise was blunt: build a car company that is a technology company, where the battery, software, and motor are treated as proprietary engineering problems rather than purchased components.
+
+The mission, as stated on the company's Impact page, is *"to accelerate the world's transition to sustainable energy"* ([tesla.com/impact](https://www.tesla.com/impact)). The 2006 original Master Plan described the mechanism — sell a premium low-volume car, use the margin to fund a mid-priced one, use that to fund a mass-market one, and bundle solar generation so personal transport becomes energy-positive. Master Plan Part 3 (April 2023) extended the logic from vehicles to a fully electrified global energy economy, modeled end-use-by-end-use in a 41-page technical paper rather than a keynote slide deck ([Tesla Master Plan Part 3 PDF](https://www.tesla.com/ns_videos/Tesla-Master-Plan-Part-3.pdf)). Master Plan Part IV (September 2025) reframes the destination as *"sustainable abundance"* and rests on five stated principles: growth is infinite; innovation removes constraints; technology solves tangible problems; autonomy benefits all humanity; greater access drives greater growth ([tesla.com/master-plan-part-4](https://www.tesla.com/master-plan-part-4)).
+
+What Tesla's brand refuses is the marketing grammar of its industry: no chrome badges, no "ultimate driving machine" mood films, no exterior wordmarks on most surfaces. **NASDAQ IPO June 29 2010** — first American car company to IPO since Ford in 1956 — issued **13.3M shares at $17/share, raised $226M** ([Tesla IR — IPO pricing](https://ir.tesla.com/press-release/tesla-announces-pricing-initial-public-offering)). **Roadster production began 2008**; **Tesla Factory opened October 2010** for **Model S production** (launched June 2012); Roadster ceased Jan 2012. **Straubel served 15 years as CTO** before moving to advisory role **July 2019** ([JB Straubel — Wikipedia](https://en.wikipedia.org/wiki/J._B._Straubel)). **Cybertruck delivery event November 30 2023**, base price now $60,990 (originally announced 2019 at $39,900) ([Tesla Cybertruck — Wikipedia](https://en.wikipedia.org/wiki/Tesla_Cybertruck)). Current vehicle lineup (April 2026): **Model 3, Model Y, Semi, Cybertruck, Cybercab**. It delivered 1.66 million vehicles in 2025 and deployed 46.7 GWh of battery storage <!-- source: [Wikipedia: Tesla, Inc.](https://en.wikipedia.org/wiki/Tesla,_Inc.), not re-verified against Tesla's own IR filings -->, and neither figure is presented with "more than ever" in any primary surface. The editorial decision is consistent: when the data is good, the data is the statement.
+
+## 12. Principles
+
+1. **First principles over convention.** Every constraint should be re-derived from physics and cost before it is accepted. If the industry says "batteries must be assembled this way", the answer is a structural pack; if it says "a pickup needs a frame", the answer is a stainless exoskeleton. *UI implication:* do not carry over a control because "car configurators have one" — re-ask whether the user needs it to make the decision. A Tesla configurator has fewer steps than any peer because each step was justified from scratch.
+2. **The product is the hero; the UI is scaffolding.** Photography, specification, and vehicle render carry emotional weight. Chrome dissolves. *UI implication:* buttons are 4px-radius rectangles in a single accent blue; the hero image is 100vh with no overlay gradient. If a component competes with the product for attention, the component is wrong.
+3. **One action per screen.** Each viewport presents at most two CTAs, usually a primary and a secondary ("Order Now" / "View Inventory"), and one decision moves the user forward. *UI implication:* ban stacked CTA columns and in-page feature lists more than five items long; if more actions exist, they belong in the next section, not this one.
+4. **Specification beats adjective.** Numbers with units, in isolation, outperform "fast", "efficient", "long-range". *UI implication:* present spec tables with generous whitespace and a single weight (500) for the label, 400 for the value — no bars, no stars, no relative comparisons against anonymous peers.
+5. **Whitespace is a luxury claim.** The cost of empty space is implicitly the cost of restraint; filling it would dilute the product. *UI implication:* viewport-height section breaks, no sidebars on marketing pages, body text at 14px with 1.43 line-height — the typographic system is uniform so the photograph is not.
+6. **Monochrome plus one.** Exactly one chromatic accent (`#3E6AE1`) exists, and it is reserved for the primary CTA and the occasional promo label that should read as the same action class. *UI implication:* never introduce a second brand hue for status, marketing, or decoration; status colors default to neutral where the product doesn't warrant a signal color.
+7. **Cross-platform typographic unity.** Universal Sans was commissioned so the website, the mobile app, and the in-car display share a typographic voice. *UI implication:* when building any Tesla-adjacent surface, use the Display/Text split at weights 400/500 only; system-font fallbacks are `-apple-system`, not Inter or Roboto.
+8. **Quiet interactivity.** State changes happen through color and border-color transitions at `0.33s`, never scale, translate, or spring. *UI implication:* disallow `scale(1.02)` on hover, disallow any overshoot curve, and keep the single transition timing so the whole interface exhales in the same rhythm.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly described Tesla customer segments (early-adopter engineers, sustainability-motivated households, performance buyers, and fleet operators), not individual people.*
+
+**Priya Narayan, 34, Sunnyvale.** Staff software engineer who reads the Master Plan Part 3 PDF before test-driving anything. Configures at 1am, refuses financing from any salesperson, and values that the configurator exposes kWh/mi instead of "long range" as a marketing word. Would leave the brand the first time a CTA says "Unleash".
+
+**The Parks family, Denver.** Two working parents with two kids and a rooftop solar install from 2023. Chose a Model Y because the Powerwall-plus-solar-plus-car math pencilled out on a spreadsheet and because they wanted the family's transport to run on the same electrons as the dishwasher. Engage with the app daily; ignore the marketing site entirely after purchase.
+
+**Dmitri Volkov, 41, Miami.** Bought a Plaid for the 0–60 figure and keeps it because the specs it quoted on day one are the specs it still hits. Does not care about autonomy marketing; does care that acceleration claims survive independent instrumented tests. Treats the vehicle as an engineering artifact, not a lifestyle.
+
+**Jamie Okonkwo, fleet manager, Atlanta.** Operates a 140-vehicle delivery fleet and evaluates Tesla quarterly against alternatives on cost-per-mile, uptime, and OTA update cadence. Needs dashboards that expose consumption by route and a service SLA that reads in operational terms, not consumer-marketing terms.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (configurator, no trim selected)** | Full-viewport vehicle render centered on pure white (`#FFFFFF`). One Carbon Dark (`#171A20`) headline with the model name. No illustration, no "start here" arrow. The vehicle is the prompt. |
+| **Empty (inventory search, no matches)** | Single Graphite (`#393C41`) line at 14px/1.43: "No vehicles match these filters in your area." One Electric Blue (`#3E6AE1`) text link: "Broaden search". No empty-state illustration. |
+| **Loading (route / page transition)** | White surface with no spinner. Below-fold content renders as blank white until scrolled into view (lazy load). Hero imagery fades in at `0.33s`. Spinners are forbidden — silent white is the load state. |
+| **Loading (CTA press, order submission)** | Primary button keeps its Electric Blue fill; label swaps to a neutral verb ("Submitting…"). No spinner inside the button; the `0.33s` background-color transition is the only motion. |
+| **Skeleton (spec table, card grid)** | Cloud Gray (`#EEEEEE`) blocks sized to final dimensions. No shimmer gradient — static blocks only. Blue-tinted skeletons are banned; they introduce a chromatic color the system doesn't carry. |
+| **Error (configurator conflict)** | Inline below the conflicting option. Graphite text states the blocker and the exact next step. Example: "This wheel isn't available with Tow Package. Remove Tow Package or select 20-inch wheels." No icon, no red background, no apology. |
+| **Error (service / network)** | Light Ash (`#F4F4F4`) banner with Carbon Dark text: specific failure + recovery action. "Order couldn't be submitted. Try again, or contact Tesla Support with reference number #####." Never speculate about cause. |
+| **Error (input validation)** | Field border shifts to `#D0D1D2` → Carbon Dark on the invalid field. Message appears below at 14px Graphite. One sentence. No tooltip, no ⚠. |
+| **Success (order placed)** | Full-viewport white confirmation. Headline at 40px weight 500 Universal Sans Display: "Your Model Y is on order." Body states estimated delivery window as a date range in plain text. No checkmark illustration, no confetti, no toast. |
+| **Success (account / inline action)** | Field transitions to its resting state; one Graphite micro-line confirms the change at 14px. No toast component exists anywhere in the system. |
+| **Disabled (CTA)** | Button retains 4px radius and 40px height. Fill shifts to Cloud Gray (`#EEEEEE`), text to Silver Fog (`#8E8E8E`). Border remains `3px solid transparent` so geometry stays identical if re-enabled. |
+
+## 15. Motion & Easing
+
+**Durations**:
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Focus rings, toggle state commit |
+| `motion-fast` | 250ms | Box-shadow transitions, small property changes |
+| `motion-standard` | 330ms | Color, background-color, border-color — the signature Tesla timing |
+| `motion-slow` | 500ms | Hero carousel cross-fade, section-level photographic transitions |
+
+**Easings**:
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-standard` | `cubic-bezier(0.5, 0, 0, 0.75)` | The observed default on text-link hover underlines and box-shadow transitions — pulls into and out of state with a slight settle |
+| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Panel and dropdown reveals — lands without overshoot |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Panel and dropdown dismissals — quiet removal |
+
+**Explicitly forbidden.** No spring or overshoot easings anywhere in the system. No `cubic-bezier(0.34, 1.56, 0.64, 1)`, no bounce, no rubber-banding on hover. Tesla's brand register is considered, not playful; a bouncing CTA reads as consumer-app exuberance and contradicts the engineering-first stance that carries every other design decision. The vehicle's acceleration curve may be exciting; the interface's state transition is not.
+
+**Signature motions.**
+
+1. **The 330ms color transition.** Every interactive state change — button hover, nav background on scroll, link underline, inventory filter selection — moves through the same `border-color 0.33s, background-color 0.33s, color 0.33s` triad. The uniformity is the signature; deviating for a single component breaks the rhythm of the whole site.
+2. **Hero cross-fade, not slide.** The carousel advances by opacity, not by horizontal translation. The photograph below the type-layer changes; the type-layer re-materializes. Sliding introduces a direction of travel the brand does not want to imply.
+3. **Scroll-triggered nav background.** The top nav transitions from transparent-over-hero to opaque white via the `tds-site-header--white-background` class toggle — a single property change at `motion-standard`, no translate, no scale, no blur beyond the already-declared backdrop-filter.
+4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. The hero carousel stops auto-advancing and exposes its dot indicators as still buttons. The interface is fully functional without a single animated transition; Tesla's motion vocabulary is small enough that removing it loses nothing the product depends on.
+
+<!--
+OmD v0.1 Sources — Philosophy Layer (sections 10–15)
+
+Direct verification (2026-04-20):
+- https://en.wikipedia.org/wiki/Tesla,_Inc. — confirms founding (Eberhard, Tarpenning,
+  July 2003), Musk's Series A in Feb 2004, Straubel CTO May 2004, and the 2009
+  co-founder settlement. Also sources 2025 delivery figures (1.66M vehicles,
+  46.7 GWh storage) used in §11.
+- tesla.com is behind Cloudflare 403 for programmatic fetch; primary Tesla
+  surfaces (tesla.com/about, /impact, /mission, /blog, master-plan-part-4) were
+  verified through web search that returned confirmed on-page phrasing of:
+    · "Our mission is to accelerate the world's transition to sustainable energy"
+      (tesla.com/impact)
+    · "sustainable abundance" + five guiding principles (tesla.com/master-plan-part-4,
+      Sept 2025)
+    · Master Plan Part 3 (April 2023) as 41-page document modeling an electrified
+      global energy economy (tesla.com/ns_videos/Tesla-Master-Plan-Part-3.pdf)
+
+Base DESIGN.md (sections 1–9) is the direct source for token-level claims
+used in the Philosophy layer (Electric Blue #3E6AE1, Carbon Dark #171A20,
+Graphite #393C41, 0.33s transition, 4px radius, Universal Sans Display/Text,
+hero 100vh, lazy-load behavior, nav class toggle tds-site-header--white-background).
+
+Voice samples verification:
+- "Order Now", "View Inventory", "Learn", "Order", "Ask a Question",
+  "Schedule a Drive Today" — observed on tesla.com marketing surfaces during
+  base DESIGN.md §1 / §4 live recon; cross-referenced in third-party UX
+  audits (plerdy.com) that quote identical button labels.
+- Mission statement quoted from tesla.com/impact.
+- Master Plan Part IV framing "sustainable abundance" quoted from
+  tesla.com/master-plan-part-4 (Sept 2025).
+- The order-flow error example is explicitly marked illustrative; it follows
+  the documented voice rules but is not a verified string from live Tesla
+  configurator copy.
+
+Personas (§13) are fictional archetypes informed by publicly described Tesla
+customer segments (early-adopter engineers, sustainability-motivated
+households, performance buyers, fleet operators). Any resemblance to specific
+individuals is unintended.
+
+Interpretive claims — editorial readings, not official Tesla statements:
+- "The product is the hero; the UI is scaffolding" as a design principle
+  derived from the site's zero-decoration, 100vh-photography pattern.
+- The "engineering-first register contradicts bouncing motion" rationale for
+  the forbidden spring stance — extrapolated from the base DESIGN.md §7 Do's
+  and Don'ts ban on scale/translate hover transforms, not from an explicit
+  Tesla brand guideline.
+- Tesla ≠ Musk: the narrative is deliberately framed around the company's
+  founding (Eberhard/Tarpenning) and the published Master Plan documents,
+  not around Musk's individual persona.
+-->
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 58 — Apple-tier)
+**Tier 1 sources:** tesla.com home + /model3 (live DOM via playwright — Primary **`#3e6ae1` Tesla Blue** + `#fff` text 4px / 40px / 4-square / 14px·**500** + Secondary `#fff` + **`#393c41` Tesla Charcoal** text 4px + Inactive locale `#f4f4f4` Light Gray + Mini dark-canvas `#000` + `#e2e3e3` Off-White 4px / 28px / 12px·500).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/IPO/Cybertruck):** Wikipedia (Tesla Inc. + Martin Eberhard + J.B. Straubel + Tesla Cybertruck), Britannica (Eberhard+Tarpenning, Tesla Motors), Tesla IR (IPO pricing), CNBC (Eberhard+Tarpenning interview).
+**Style ref:** retained. **Conflicts unresolved:** none. **Earlier addition:** canonical Primary `#3e6ae1` Tesla Blue + Charcoal `#393c41` Secondary palette + locale-selector + dark-canvas-mini variants missed by prior nav-only pass.
+

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

@@ -261,3 +261,76 @@ What makes Together AI distinctive is its type system. "The Future" handles all
 4. Mono labels are always uppercase with positive letter-spacing
 5. Keep radius sharp (4px or 8px) — no pills, no generous rounding
 6. Pastel gradients are for decoration, not UI chrome
+
+## 10. Voice & Tone
+
+Together AI's voice is **AI-native cloud and OSS-research-positioned.** "The AI Native Cloud" — capability-driven, model-versioned. Marketing emphasizes open-weights model hosting + price-per-token transparency.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Start building", "Contact Sales", "Get started" |
+| Marketing | Model-listed. Hero shows MiniMax / DeepSeek / Qwen / Llama as supported |
+| Documentation | Code-first, model-spec heavy |
+| Error | Specific. "Model not available in region. Try alternate endpoint." |
+
+**Voice samples**
+- Marketing CTA: *"Start building"* / *"Contact Sales"* <!-- verified: together.ai homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary AI cloud". Generic OpenAI-comparison framing.
+
+## 11. Brand Narrative
+
+Together AI (legal name **Together Computer Inc.**) was founded **June 11 2022** by an unusually academic-heavy team of **four co-founders**: **Vipul Ved Prakash (Founder + CEO)**, **Ce Zhang** (ex-ETH Zurich, data-management-for-ML research), **Chris Ré** (Stanford professor; his lab produced foundational data-centric AI work), and **Percy Liang** (Stanford professor; leads Stanford's **Center for Research on Foundation Models (CRFM)**) ([Together AI — About Us](https://www.together.ai/about-us), [Vipul Ved Prakash — Wikipedia](https://en.wikipedia.org/wiki/Vipul_Ved_Prakash), [Latent Space — Cloud Intelligence at 5000 tok/s w/ Ce Zhang + Vipul Ved Prakash](https://www.latent.space/p/together)). Decentralized AI cloud positioned for OSS model hosting — Llama, DeepSeek, Mistral, Qwen, MiniMax served alongside Together's own models. **Funding ~$534M** at **$3.3B valuation** with investors including **Emergence Capital, General Catalyst, NVIDIA** ([TechCrunch — Together $20M for OSS gen-AI](https://techcrunch.com/2023/05/15/together-raises-20m-to-build-open-source-generative-ai-models/), [Tracxn — Together AI](https://tracxn.com/d/companies/togetherai/__fcIBLE0rJMeK3FAdcfzE0H41jE36bJd0FDBWalYo6cY)). Strong adoption among AI startups + research teams. The brand voice tracks this **academic-OSS-cloud** positioning — leading alternative to hyperscaler AI services on speed, cost efficiency, and deep OSS-ecosystem support.
+
+## 12. Principles
+
+1. **Open weights are first-class.** *UI implication:* model catalog leads with OSS models, not proprietary.
+2. **Sharp 4-8px radius.** *UI implication:* never pill chrome.
+3. **Pastel gradients for decoration only.** *UI implication:* never use gradients on UI chrome.
+4. **Token pricing is transparent.** *UI implication:* per-model pricing first-class on landing.
+5. **Black primary CTA.** *UI implication:* use `#000` for primary action.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Together AI user segments (AI startup engineers, ML researchers, fine-tuning practitioners), not individual people.*
+
+**Sergey Volkov, 33, Berlin.** AI startup engineer. Together for serving fine-tuned Llama 3.
+
+**Aisha Patel, 31, San Francisco.** ML researcher. Uses Together for benchmarking OSS models.
+
+**Marcus Chen, 38, NYC.** Platform engineer. Cost-per-token transparency drove migration.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no API keys)** | "Generate first API key" |
+| **Empty (no projects)** | "Try a model" with grid |
+| **Loading (inference)** | Per-token streaming |
+| **Loading (model loading)** | Cold-start indicator |
+| **Error (model)** | Specific error |
+| **Error (rate limit)** | Tier limit + upgrade |
+| **Success (generation)** | Result + share |
+| **Success (deployment)** | Endpoint URL |
+| **Skeleton (model list)** | 4px placeholders |
+| **Disabled (no quota)** | Add credits 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. `prefers-reduced-motion: reduce` removes hover transitions.
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 59 — Apple-tier)
+**Tier 1 sources:** together.ai home + /pricing (live DOM via playwright — **canonical 4px (not subpixel-rounded 3.33px)**: Primary `#000` Black 4px / 40px (32px header) / 16px / 16px·**500 ALL CAPS** + Light Outline `rgba(0,0,0,0.08)` + Dark-canvas Outline `rgba(255,255,255,0.12)` + pricing tab 3.25px sub-radius / 13px·500).
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 2 (Philosophy/founders/funding):** Together AI About Us, Wikipedia (Vipul Ved Prakash), Latent Space podcast (5000 tok/s), TechCrunch (2023-05 $20M), Tracxn, Clay.
+**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer's 3.33px / 13.3px / 33px were subpixel-rounding artifacts from rem-based measurements; canonical is 4px / 16px / 40px / 16px·500.