Designed proposals

Client / partner proposal pages

One folder per proposal. Each folder holds a raw proposal (doc, notes, deck, or text) that gets turned into a single designed, interactive HTML page in the house style — the same treatment as the Google proposal — and then deployed to Netlify.

Folder	Client	Status
google/	Google	Shipped — live
jpm/	J.P. Morgan	Shipped — live
samsung/	Samsung	Source in hand — designed page not built
template/	—	Design reference only, never deployed

How a proposal gets built

1. Drop the source in its folder as <client>-original-proposal.md. Any format works — doc, PDF, deck, or pasted text — but convert it to Markdown so the copy stays diffable. Create the folder if it doesn't exist yet.
2. Build the designed HTML following the design spec below. Use google/yield-google-proposal.html as the structural starting point and template/trust-spark-usdt-proposal (1).html as the reference for richer interactive components (simulator, scrubber, presets, live-computed outputs).
3. Review locally by opening the file in a browser. Iterate on copy and layout here.
4. Deploy to Netlify — only after explicit confirmation. Nothing goes live automatically.

Design spec

Every proposal page is a single self-contained HTML file: inline <style>, inline <script>, no build step, no framework.

Design tokens — copy the :root block from google/yield-google-proposal.html. Warm paper background (#fafaf7), violet accent (#4a35b5), Instrument Serif headings, Inter body, JetBrains Mono for numbers.

Required on every page:

• Banner — full-width rounded banner at the top. Keep the Figma export as assets/banner-<client>.svg and rasterize it to assets/banner-<client>.png (see below); the page references the PNG so it survives email clients. Aim for under ~700 KB.
• Company logos — inline SVG/PNG wordmarks in the hero ("In production across", "Backed by") and wherever partners, custodians, or protocols are named. Pull from the canonical library at ../v2-website-design/project-v2/assets/company/ and copy only what the page names into assets/company/. Check each logo's padding before sizing it — some exports (MoonPay) carry a wide transparent margin that shrinks the mark to illegibility, and need cropping to their ink bounds first.
• Hero — eyebrow (Proposal · Yield.xyz × <Client> · <Month Year> · Private & Confidential), serif headline with italic accent phrase, subhead, and a stat row of headline numbers.
• Interactivity — at minimum hover tooltips on stats, tabbed or clickable sections, and expandable FAQ. Where the proposal has economics, add a live simulator with sliders/presets that recomputes outputs, following the template.
• Sections — numbered, anchored (<section id="...">), each with a section header and a clear single argument.
• Next steps — closing CTA block with concrete asks.
• Responsive and print-safe — mobile breakpoints, prefers-reduced-motion handling, and a @media print block that keeps sections and cards from breaking across pages when someone prints from the browser.

Per-proposal folder layout

<client>/
  <client>-original-proposal.md         Raw source copy the page is built from
  yield-<client>-proposal.html          Editable source (references assets/)
  Yield.xyz-x-<Client>-Proposal.html    Shareable single file, assets inlined
  assets/
    banner-<client>.svg                 Banner artwork, as exported from Figma
    banner-<client>.png                 Rasterized banner the page references
    company/                            Logos used by the page
  .inline-assets.js                     Builds the shareable single file
  .banner-shot.html                     Wrapper used to rasterize the banner
  .deploy-<client>/                     Netlify publish directory
  .netlify/                             Linked Netlify project config

HTML is the only deliverable. Don't generate PDFs — if someone needs one, they print the page from a browser.

Rasterizing the banner

.banner-shot.html just renders the SVG at its native size so headless Chrome can screenshot it. Render at a 1.5× device scale factor for a crisp 2× asset:

cd <client>
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --disable-gpu \
  --hide-scrollbars --force-device-scale-factor=1.5 --virtual-time-budget=20000 \
  --window-size=1680,600 --screenshot=assets/banner-<client>.png \
  "file://$PWD/.banner-shot.html"

Building the shareable single file

cd <client> && node .inline-assets.js

It rewrites every assets/… reference to a data: URI and reports anything it could not resolve. Logos that the page's JavaScript injects at runtime need one hook in the source: an empty const INLINED = {}; map and a logoSrc() helper that falls back to assets/company/<file>. The script fills that map, carrying only the logos the page actually names so the file stays lean.

Deploy (Netlify CLI)

Deploy only after the user confirms.

cd <client>

# Stage the publish directory
mkdir -p .deploy-<client>
cp Yield.xyz-x-<Client>-Proposal.html .deploy-<client>/index.html
# or copy yield-<client>-proposal.html + assets/ into .deploy-<client>/

# First time only — create and link the site
netlify sites:create --name yieldxyz-<client>-proposal

netlify deploy --prod --dir=.deploy-<client>

Existing sites: Google → yieldxyz-google-proposal-410c20, J.P. Morgan → yieldxyz-jpm-proposal.

Notes

• Fonts load from Google Fonts when online; offline the page falls back to system fonts.
• template/ is reference material only — don't deploy it or edit it in place.