Seedance, Kling and Nano Banana now take requests over the Figma MCP

Build a one-page integration launch page for [product], announcing that [tool A] now connects to [service B]. Treat it like a page from a cyanotype album: sun-printed specimens, Prussian blue ink, cream paper.

Layout
- Top nav (brand left, three links right), then a breadcrumb rail as the masthead: Home, Integrations, the integration name as the current page, and a read-time or launch date at the far right. Chevron separators drawn in CSS. No boxed meta cells.
- Centered hero: a solid ink label with the ship date, a slab-serif headline of at most 16 words, a two-sentence deck, one marigold primary button and one text link.
- Under the hero, a cream sheet with a 1px ink border holding the request path: three lettered stops in reading order (A your tool, B the connector, C the service), each a square ink letter tile, a bold name and one muted line. Between stops, dashed connectors ending in a marigold arrowhead, labelled above with what goes out and below with what comes back (a request, a model call, a file, credits). Below the path, one wide cyanotype photogram plate (16:7 crop) of the products as objects, with three HTML captions in a ruled row lined up under each object.
- Feature rows: each section opens with a 64px plate-number tile (a small italic Pl. above a slab Roman numeral, I, II, III) on a fine halftone dot fill, so the letters stay reserved for the path's stops, a mono kicker naming the source and date, and an h2. Then a two-column row: prose at most 640px wide beside one supporting element (a portrait plate in a cream frame, a dt/dd facts list, or a code block), alternating sides row by row.
- One full-width Prussian blue band for the overview section. A 2px ink-bordered cream card for the how-it-works rules, with a small live demo: three radio buttons that each light one hop of a mini A-B-C path and show what crosses it.
- A Prussian sheet for code or a copyable prompt with a copy button. A two-column close of a short note beside a numbered source list. A three-tile pager and a colophon.
- Mobile: the path turns vertical with the arrows pointing down, the plate goes to 3:2, every two-column row stacks.

Palette
- Ground: pale steel #E3EAEE with a halftone dot screen (Prussian dots at about 15 percent on a 9px grid with a larger 18px layer) behind the hero only, masked to fade out downward.
- Ink: Prussian blue #16324F. Sheets: cyanotype cream #F7F4EC. Labels: steel #4A6176. Rules: #C3CFD8.
- One accent, marigold #EA8A2A, for buttons, arrowheads and the pullquote rule only. Dark ink text on marigold.

Type
- Rokkitt 700 for headlines, letter tiles and plate numerals, Rokkitt italic 500 for the single pullquote and the Pl. labels.
- Cabin 400 for body, 600 for buttons. Fira Mono for kickers, labels, captions and code.

Images
- Cyanotype photograms: white silhouettes on Prussian blue, ragged brushed edges, a cream paper border, visible paper tooth. Objects stand in for the products (film strip for video, print for image, cable for the connector). No legible text, numbers or logos in any image.

Guardrails
- Body at least 19px, line-height 1.7, lines of 60 to 72 characters, never justified.
- WCAG AA for every label against its real background, including text on the marigold button.
- Card radius 12px or less, inputs 6px. One tight shadow on the path sheet only. No gradients except the halftone fade. No glow, no neon, no purple-blue gradients, no emoji, no logo bars, no three identical feature cards, no fake controls.
- Hover and focus states on every link, button and radio at about 150ms, plus a prefers-reduced-motion guard.

Works in: Claude Code, Beaver Builder AI, v0, Lovable, Figma Make, Framer AI, Webflow AI.