MatheusKindrazki · MatheusKindrazki · Aug 17, 2026 · Aug 17, 2026 · Aug 17, 2026
diff --git a/brand/og-image.html b/brand/og-image.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>FastShared — OG card source (1200×630)</title>
+<!--
+  Source of truth for web/public/og-image.png. Render with brand/og-image.sh.
+
+  This exists as HTML rather than as a hand-composited PNG for one reason: the
+  previous og-image.png was a loose file with no source, and it silently drifted
+  four months behind the site's palette — it was still the pre-redesign purple
+  gradient while the shipped site had moved to a neutral two-pole system. A card
+  built from the same tokens and the same typography as the site cannot drift
+  that way without someone noticing in the diff.
+
+  Values below are copied from web/src/styles/global.css. When the palette moves,
+  move them here too and re-render.
+
+  Targets it has to hit (scripts/pixel_audit.py, design-intelligence skill), all
+  enforced by og-image.sh, which refuses to install a card that misses one:
+    luminance mean  < 60      -> committed dark pole, no mid grey
+    contrast std    >= 40     -> the type actually punches at thumbnail size
+    dominant colour >= 80%    -> one solid ground, not a gradient wash
+    saturation      -> not a flat number; see the long note in og-image.sh. HSV
+                       saturation is a ratio and so is ill-conditioned in deep
+                       shadow: the ground token itself measures 0.167, which makes
+                       the skill's flat 0.15 unreachable without abandoning the
+                       site's own colour. The gate asks the real question instead —
+                       is the mean at or below the ground's own saturation, i.e. is
+                       every non-ground pixel net-desaturating.
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=JetBrains+Mono:wght@500&display=block"
+  rel="stylesheet"
+/>
+<style>
+  /* --- tokens, mirrored from global.css [data-theme="dark"] --- */
+  :root {
+    --ink: #0f0f12;          /* --cream in the dark theme: the page ground */
+    --canvas: #1c1c22;       /* card surface */
+    --milk: #f0f0f5;         /* --charcoal in the dark theme: primary text */
+    --silver: #8a8a93;       /* secondary / mono labels */
+    --violet-hot: #9d7aff;   /* the only saturated colour, and only as a state */
+    --rule: rgba(255, 255, 255, 0.06);
+    --rule-soft: rgba(255, 255, 255, 0.03);
+    --display: 'Bricolage Grotesque', system-ui, sans-serif;
+    --mono: 'JetBrains Mono', ui-monospace, monospace;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  html, body { width: 1200px; height: 630px; }
+
+  body {
+    display: flex;
+    align-items: center;
+    gap: 56px;
+    padding: 0 72px;
+    background: var(--ink);
+    color: var(--milk);
+    font-family: var(--display);
+    /* The site enables these stylistic alternates on display type; without them
+       the wordmark reads as a different typeface than the landing page. */
+    font-feature-settings: 'ss02', 'cv11', 'ss01';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* ---------------- left: the promise, carried by type ---------------- */
+  .copy { flex: 1 1 0; min-width: 0; }
+
+  .eyebrow {
+    margin-bottom: 30px;
+    color: var(--silver);
+    font-family: var(--mono);
+    font-size: 15px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+
+  .headline {
+    font-size: 76px;
+    font-weight: 700;
+    line-height: 1.02;
+    letter-spacing: -0.008em;
+    font-variation-settings: 'opsz' 96;
+  }
+  .headline span { display: block; }
+
+  /* Same treatment the hero gives its third line. The accent marks the payoff
+     word — it is the product's whole premise, not decoration. */
+  .headline .vanish {
+    text-decoration: underline;
+    text-decoration-color: var(--violet-hot);
+    text-decoration-thickness: 0.075em;
+    text-underline-offset: 0.11em;
+  }
+
+  .footline {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-top: 38px;
+    color: var(--silver);
+    font-family: var(--mono);
+    font-size: 15px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .footline .word {
+    color: var(--milk);
+    font-family: var(--display);
+    font-size: 19px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    text-transform: none;
+  }
+  .footline .dot { color: var(--violet-hot); }
+  .footline .sep { color: rgba(240, 240, 245, 0.22); }
+
+  /* ---------------- right: the product, as proof ---------------- */
+  /* A real interface fragment at real scale, mirroring .hero-manifest. The
+     corpus pattern is that the screenshot IS the art; this is that, cropped to
+     the four rows that carry the story. */
+  .manifest {
+    flex: 0 0 436px;
+    border: 1px solid var(--rule);
+    border-radius: 8px;
+    /* Deliberately the page ground rather than --canvas. On the site the card is
+       rgba(--canvas, 0.72) over a dark page, which resolves to within a couple of
+       units of the ground — it reads as a card because of the border and the row
+       rules, not because of a fill. Matching that here also keeps a single solid
+       ground across the card, instead of splitting the image into two surfaces. */
+    background: var(--ink);
+    overflow: hidden;
+  }
+
+  .manifest__bar {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 15px 18px;
+    border-bottom: 1px solid var(--rule);
+    color: var(--silver);
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: 62px minmax(0, 1fr) auto;
+    gap: 14px;
+    align-items: baseline;
+    padding: 19px 18px;
+    border-bottom: 1px solid var(--rule-soft);
+  }
+  .row:last-child { border-bottom: 0; }
+
+  .row .k,
+  .row .s {
+    color: var(--silver);
+    font-family: var(--mono);
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+  .row .s { text-align: right; white-space: nowrap; }
+
+  .row .v {
+    color: var(--milk);
+    font-size: 19px;
+    font-weight: 680;
+    line-height: 1.15;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The single functional use of the accent: the terminal state. Ephemerality
+     shown as a data state rather than claimed as an adjective. */
+  .row .v--gone { color: var(--violet-hot); }
+</style>
+</head>
+<body>
+  <div class="copy">
+    <div class="eyebrow">Temporary file links for Apple devices</div>
+    <h1 class="headline">
+      <span>Share anything.</span>
+      <span>Get a link.</span>
+      <span class="vanish">Watch it vanish.</span>
+    </h1>
+    <div class="footline">
+      <span class="word">fastshared<span class="dot">.</span></span>
+      <span class="sep">/</span>
+      <span>iPhone &middot; iPad &middot; Mac</span>
+      <span class="sep">/</span>
+      <span>App&nbsp;Store</span>
+    </div>
+  </div>
+
+  <div class="manifest">
+    <div class="manifest__bar">
+      <span>FastShared</span>
+      <span>Transfer manifest</span>
+    </div>
+    <div class="row">
+      <span class="k">File</span>
+      <span class="v">screen-recording.mov</span>
+      <span class="s">284 MB</span>
+    </div>
+    <div class="row">
+      <span class="k">Link</span>
+      <span class="v">fastsha.red/s/K9H4</span>
+      <span class="s">Copied</span>
+    </div>
+    <div class="row">
+      <span class="k">Expiry</span>
+      <span class="v">23 h 59 min</span>
+      <span class="s">Scheduled</span>
+    </div>
+    <div class="row">
+      <span class="k">After</span>
+      <span class="v v--gone">410 Gone</span>
+      <span class="s">Deleted</span>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/brand/og-image.png b/brand/og-image.png
diff --git a/brand/og-image.sh b/brand/og-image.sh
@@ -0,0 +1,131 @@
+#!/usr/bin/env bash
+# Render brand/og-image.html to the 1200x630 social card, then check it against
+# the design-intelligence pixel targets before letting it overwrite anything.
+#
+# Why headless Chrome and not ImageMagick (which export.sh uses for the icons):
+# the card is typographic, and its whole point is being the same Bricolage
+# Grotesque + JetBrains Mono as the site. Compositing text with `magick` would
+# reproduce the layout but not the typeface, the stylistic alternates, or the
+# optical size axis — so it would look adjacent to the brand instead of being it.
+#
+# Usage:
+#   ./og-image.sh            # render, audit, and install into web/public + brand
+#   ./og-image.sh --check    # render to a temp file and audit only; installs nothing
+set -euo pipefail
+
+cd "$(dirname "$0")"
+
+CHECK_ONLY=0
+[[ "${1:-}" == "--check" ]] && CHECK_ONLY=1
+
+CHROME=${CHROME:-/Applications/Google Chrome.app/Contents/MacOS/Google Chrome}
+AUDIT=${AUDIT:-$HOME/.claude/skills/design-intelligence/scripts/pixel_audit.py}
+SRC="$PWD/og-image.html"
+TMP="$(mktemp -d)"
+OUT="$TMP/og-image.png"
+trap 'rm -rf "$TMP"' EXIT
+
+if [[ ! -x "$CHROME" ]]; then
+  echo "Google Chrome not found at: $CHROME" >&2
+  echo "Override with CHROME=/path/to/chrome $0" >&2
+  exit 1
+fi
+
+# --virtual-time-budget lets the webfonts finish loading before the capture; the
+# stylesheet is requested with display=block so Chrome does not paint a fallback
+# face first and bake the wrong typeface into the PNG.
+"$CHROME" \
+  --headless \
+  --disable-gpu \
+  --hide-scrollbars \
+  --force-device-scale-factor=1 \
+  --window-size=1200,630 \
+  --virtual-time-budget=20000 \
+  --screenshot="$OUT" \
+  "file://$SRC" >/dev/null 2>&1
+
+if [[ ! -s "$OUT" ]]; then
+  echo "Render produced no output." >&2
+  exit 1
+fi
+
+# Refuse to ship a card that is not 1200x630. Every consumer assumes it, and the
+# og:image:width/height meta in Base.astro states it as fact.
+read -r W H < <(python3 -c "
+from PIL import Image
+w, h = Image.open('$OUT').size
+print(w, h)
+")
+if [[ "$W" != "1200" || "$H" != "630" ]]; then
+  echo "Rendered $W x $H, expected 1200 x 630 — refusing to install." >&2
+  exit 1
+fi
+echo "rendered ${W}x${H}"
+
+if [[ -f "$AUDIT" ]]; then
+  echo "-- pixel audit --"
+  python3 "$AUDIT" "$OUT" | python3 -c "
+import sys, json
+d = json.loads(sys.stdin.readline())
+lum = d['luminance']['mean']; std = d['contrast']['std']
+sat = d['saturation']['mean']; dom = d['dominant_colors'][0]
+ok = lambda c: 'ok  ' if c else 'FAIL'
+
+# The saturation check is NOT a flat threshold, and the reason is measured rather
+# than a matter of taste. HSV saturation is a ratio, so it is ill-conditioned in
+# deep shadow: the ground token --cream #0f0f12 is (15,15,18), a 3/255 blue lift,
+# which HSV reports as 0.167 saturated. With that ground covering ~85% of a card,
+# the mean cannot go below ~0.14 no matter how neutral the design is — the flat
+# 0.15 target from the skill is unreachable while staying faithful to the site's
+# own token, and the only way to "pass" it would be to pick a ground the site does
+# not use. That is exactly the drift this file was rebuilt to end.
+#
+# (The site itself measures 0.099 only because its screenshot pipeline shifted the
+# ground to #111113, S=0.105. Capture artefact, not a different design.)
+#
+# So the question asked here is the one the metric was trying to ask: is the base
+# neutral and the accent merely a point? If the mean sits at or below the ground's
+# OWN saturation, every non-ground pixel is net-desaturating, which is a stronger
+# result than any absolute number.
+def own_sat(hexs):
+    h = hexs.lstrip('#'); r, g, b = (int(h[i:i+2], 16) for i in (0, 2, 4))
+    mx, mn = max(r, g, b), min(r, g, b)
+    return 0.0 if mx == 0 else (mx - mn) / mx
+
+ground = own_sat(dom['hex'])
+sat_budget = ground + 0.02
+
+print(f\"  {ok(lum < 60)} luminance      {lum:6.2f}   target < 60 (dark pole)\")
+print(f\"  {ok(std >= 40)} contrast std   {std:6.2f}   target >= 40\")
+print(f\"  {ok(dom['share'] >= 0.80)} dominant bg    {dom['share']*100:5.1f}%   target >= 80%  ({dom['hex']})\")
+print(f\"  {ok(sat <= sat_budget)} saturation     {sat:6.3f}   target <= {sat_budget:.3f}\"
+      f\"  (ground {dom['hex']} is itself {ground:.3f})\")
+sys.exit(0 if (lum < 60 and std >= 40 and sat <= sat_budget and dom['share'] >= 0.80) else 1)
+" || { echo "Pixel targets not met — refusing to install." >&2; exit 1; }
+else
+  echo "pixel_audit.py not found at $AUDIT — skipping the audit gate." >&2
+fi
+
+if [[ "$CHECK_ONLY" == "1" ]]; then
+  echo "--check: nothing installed."
+  exit 0
+fi
+
+cp "$OUT" ./og-image.png
+cp "$OUT" ../web/public/og-image.png
+echo "installed -> brand/og-image.png and web/public/og-image.png"
+cat <<'NOTE'
+
+NOT LIVE YET. Committing and deploying is not enough for this asset.
+/og-image.png is in APP_PATH_PREFIXES, so the apex is served by the Worker out of
+caches.default with max-age=86400, immutable — a new card stays invisible at
+fastsha.red for up to 24h per edge, and `immutable` stops scrapers revalidating.
+
+  # origin gets it immediately:
+  curl -s https://fastshared-web.pages.dev/og-image.png | shasum -a 256
+  # apex may still be cached — compare, and read the headers:
+  curl -sI https://fastsha.red/og-image.png | grep -iE 'cf-cache-status|age|content-length'
+
+If they differ, purge that URL in Cloudflare, then re-scrape in the platform's own
+card validator (unfurlers cache separately). See web/README.md.
+NOTE