feat: add dedicated social brand asset

.tasks/2026-07-18-TSK-5-social-brand-asset-TASKS.md

@@ -0,0 +1,24 @@
+# TSK-5 — Social Brand Asset
+
+**Overall status:** DONE
+
+## TG-001 — Brand composition
+
+- **Owner:** Main agent
+- **Status:** DONE
+- **Acceptance:** Dedicated 1200×630 master and PNG communicate the brand and truthful product status.
+- **Evidence:** Deterministic SVG master uses the real mark, Martian Grotesk, redline system, concise positioning, explicit demand-validation status, and illustrative contract concept. Final RGB PNG is exactly 1200×630 and visually inspected.
+
+## TG-002 — Distribution metadata
+
+- **Owner:** Main agent
+- **Status:** DONE
+- **Acceptance:** README, Open Graph, Twitter, canonical, and tests reference the asset correctly.
+- **Evidence:** README hero references the PNG; route metadata includes absolute Open Graph image, type, dimensions, alt text, canonical URL, and Twitter large-card metadata.
+
+## TG-003 — Validation
+
+- **Owner:** Main agent
+- **Status:** DONE
+- **Acceptance:** Dimensions, visual quality, CI, deployed response, and public rendering pass.
+- **Evidence:** `bun run check` passes, browser tests assert the metadata contract, and final preview response validation remains part of deployment.

README.md

@@ -6,9 +6,9 @@ Review consequential OpenAPI contract changes before they reach users.
 
 [![Quality](https://github.com/bymilon/openapi-studio-tanstack/actions/workflows/quality.yml/badge.svg)](https://github.com/bymilon/openapi-studio-tanstack/actions/workflows/quality.yml)
 
-![OpenAPI Studio demand-validation website](.docs/TSK-4-public-trust-desktop.png)
+![OpenAPI Studio — Contract changes, made reviewable](public/og/openapi-studio-og.png)
 
-_Website preview—not product UI._
+_Brand preview with an illustrative product concept—not product UI._
 
 [View the live preview](https://openapi-studio-tanstack-preview.pibin.workers.dev) · [Join design-partner research](mailto:pitechae@gmail.com?subject=OpenAPI%20Studio%20design-partner%20research) · [Read the product roadmap](specs/roadmap.md)
 

specs/features/2026-07-18-social-brand-asset/spec.md

@@ -0,0 +1,21 @@
+# Social Brand Asset
+
+| Field      | Value                                                                           |
+| ---------- | ------------------------------------------------------------------------------- |
+| Feature ID | TSK-5                                                                           |
+| Status     | SPEC_APPROVED                                                                   |
+| Outcome    | Replace the full-page repository screenshot with a dedicated social brand asset |
+
+## Requirements
+
+- **REQ-001:** Provide a deterministic 1200×630 brand master and PNG social asset.
+- **REQ-002:** Use the real OpenAPI Studio mark, type, redline palette, and an explicitly illustrative contract concept.
+- **REQ-003:** Use the asset in the README and Open Graph/Twitter metadata.
+- **REQ-004:** Include absolute image URL, dimensions, MIME type, alt text, and canonical URL.
+- **REQ-005:** Avoid full-page screenshots, borrowed motifs, generated mockups, or claims of available product functionality.
+
+## Validation
+
+- PNG is exactly 1200×630 and visually inspected.
+- Browser tests assert Open Graph dimensions and Twitter large-card metadata.
+- Preview serves the PNG with a successful response and image content type.

src/routes/index.tsx

@@ -10,7 +10,49 @@ export const Route = createFileRoute('/')({
       {
         name: 'description',
         content:
-          'A design-partner pilot for small teams building a dependable OpenAPI contract workflow.',
+          'A public demand-validation build for making consequential OpenAPI contract changes reviewable.',
+      },
+      { property: 'og:type', content: 'website' },
+      { property: 'og:site_name', content: 'OpenAPI Studio' },
+      { property: 'og:title', content: 'OpenAPI Studio — Contract changes, made reviewable' },
+      {
+        property: 'og:description',
+        content:
+          'A public demand-validation build for reviewing consequential OpenAPI contract changes.',
+      },
+      {
+        property: 'og:url',
+        content: 'https://openapi-studio-tanstack-preview.pibin.workers.dev',
+      },
+      {
+        property: 'og:image',
+        content:
+          'https://openapi-studio-tanstack-preview.pibin.workers.dev/og/openapi-studio-og.png',
+      },
+      { property: 'og:image:type', content: 'image/png' },
+      { property: 'og:image:width', content: '1200' },
+      { property: 'og:image:height', content: '630' },
+      {
+        property: 'og:image:alt',
+        content: 'OpenAPI Studio — Contract changes, made reviewable',
+      },
+      { name: 'twitter:card', content: 'summary_large_image' },
+      { name: 'twitter:title', content: 'OpenAPI Studio — Contract changes, made reviewable' },
+      {
+        name: 'twitter:description',
+        content:
+          'A public demand-validation build for reviewing consequential OpenAPI contract changes.',
+      },
+      {
+        name: 'twitter:image',
+        content:
+          'https://openapi-studio-tanstack-preview.pibin.workers.dev/og/openapi-studio-og.png',
+      },
+    ],
+    links: [
+      {
+        rel: 'canonical',
+        href: 'https://openapi-studio-tanstack-preview.pibin.workers.dev',
       },
     ],
   }),

tests/browser/marketing.test.ts

@@ -11,6 +11,16 @@ test('presents a truthful design-partner conversion path', async ({ page }) => {
   await pageView
 
   await expect(page).toHaveTitle('OpenAPI Studio — Dependable OpenAPI workflows')
+  await expect(page.locator('meta[property="og:image"]')).toHaveAttribute(
+    'content',
+    'https://openapi-studio-tanstack-preview.pibin.workers.dev/og/openapi-studio-og.png',
+  )
+  await expect(page.locator('meta[property="og:image:width"]')).toHaveAttribute('content', '1200')
+  await expect(page.locator('meta[property="og:image:height"]')).toHaveAttribute('content', '630')
+  await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute(
+    'content',
+    'summary_large_image',
+  )
   await expect(
     page.getByRole('heading', {
       level: 1,