Driver

PRs #337 (og:image meta tags) and #340 (favicon meta tags) shipped the HTML side of the share-preview + browser-tab branding work but deliberately left the binary assets as TODOs. The meta tags reference URLs that 404 until binaries deploy:

• site/og/{index,architecture,skills}.png (1200×630 share previews — og:image + twitter:image)
• site/favicons/{favicon.ico,favicon.svg,apple-touch-icon.png} (browser tab + iOS home-screen icons)

The deferral was a deliberate scope-cut on the engineering tickets: meta tags are the highest-leverage SEO/social win and could land without design-asset generation. The binary assets are a design task, not an engineering one.

Today, share previews on Twitter/X/LinkedIn/Slack/Discord render with no image (each platform's default fallback). Browser tabs render with the default browser glyph. Both are visible-but-not-blocking gaps.

Scope

Generate the 6 binary assets and drop them at the paths the meta tags already reference. Design briefs already shipped at site/og/README.md and site/favicons/README.md (or equivalent) — they specify dimensions, file size caps, design tokens, and AI generator prompts.

1. OG / Twitter share-preview PNGs (3 files)

• site/og/index.png — logo + tagline "where projects get forged"
• site/og/architecture.png — 5-layer architecture stack diagram (governance → capability → defaults → customisation overlay → per-project data)
• site/og/skills.png — slash-command montage / wordcloud OR "53 skills" tagline

Spec (per site/og/README.md):

• Exactly 1200 × 630 pixels (OG / Twitter summary_large_image standard)
• Under 200KB each (LinkedIn + Slack truncate large images)
• PNG, 8-bit RGB, flat warm-cream #F4EFE6 background (no transparency — looks crisper in dark-mode previews than transparent PNG)
• Run through pngquant --quality=70-90 after export

2. Favicons (3 files)

• site/favicons/favicon.ico (multi-resolution; 16×16 + 32×32 + 48×48 in one .ico container)
• site/favicons/favicon.svg (vector — modern browsers prefer this)
• site/favicons/apple-touch-icon.png (180 × 180 — iOS home-screen icon)

Spec (per site/favicons/README.md):

• Stylised "AY" monogram OR apexyard logo mark
• Monochrome (cream #F4EFE6 on warning-red #C8321A is the live-site palette)
• Sharp corners — no rounding (browser/iOS clip to circle / squircle automatically)

3. Design tokens (same across both file classes)

• Background: warm cream #F4EFE6
• Accent: warning red #C8321A (stamp / underline only — never a fill)
• Typeface: JetBrains Mono (or close monospaced fallback)
• Aesthetic: terminal-native brutalist — no gradients, no shadows, sharp corners

The AI generator prompts in both READMEs reproduce these tokens verbatim — feed them to Midjourney / DALL·E / Imagen / Stable Diffusion for a starting point, hand-refine in Figma or Affinity.

4. Smoke-test the deploy

After commit + Netlify deploy:

• curl -I https://yard.apexscript.com/og/index.png returns 200 + content-type: image/png
• Same for /og/architecture.png, /og/skills.png, /favicon.ico, /favicon.svg, /apple-touch-icon.png
• Run https://www.opengraph.xyz against each marketing-site URL → preview renders with image
• Run https://www.linkedin.com/post-inspector against each URL → cache-bust forces fresh fetch + preview confirms
• Browser tab on https://yard.apexscript.com/ shows favicon (not default glyph)
• iOS Safari "Add to Home Screen" picks up apple-touch-icon.png

Acceptance Criteria

• All 3 OG PNGs exist at site/og/{index,architecture,skills}.png, are 1200×630, under 200KB each, follow the design brief
• All 3 favicons exist at site/favicons/{favicon.ico,favicon.svg,apple-touch-icon.png}, sized correctly, follow the design brief
• Smoke tests pass (curl returns 200 + correct content-type for all 6 URLs after deploy)
• opengraph.xyz preview shows the image for all 3 marketing-site URLs
• LinkedIn Post Inspector preview matches
• Browser tabs show the favicon on all 3 pages
• The TODO READMEs at site/og/ and site/favicons/ get retired (delete OR rewrite as "binaries-shipped — see commit X for the design call")

Out of scope

• Animated favicons / OG videos (not warranted for v1)
• Per-page Twitter cards (the 3 OG PNGs double as Twitter — single asset per page is the spec)
• A /og-generator skill that auto-creates these from a template (overkill for 6 one-off binaries; revisit if the marketing site grows beyond 3 pages)
• Manifest.json / Web App Manifest entry (separate concern; file if PWA shape becomes a goal)

Glossary

Refs #337 (og:image meta tags shipped) / #340 (favicon meta tags shipped) / site/og/README.md / site/favicons/README.md