{
  "name": "Foam landing page creation rules",
  "updated": "2026-09-24",
  "designSystem": "/brand.json",
  "mainPageQuestions": [
    "Who is this for?",
    "What problem do they have?",
    "Why does it matter?",
    "What outcome do they want?",
    "What does Foam do?",
    "How does Foam work?",
    "Why is Foam different?",
    "Why should they believe it?",
    "What should they do next?"
  ],
  "writingAndMedia": [
    "Do not share obviously AI-generated images, diagrams, or videos, especially on social channels or Foam websites.",
    "Do not use em dashes.",
    "Do not use special or decorative fonts. Follow Foam's shared typography.",
    "Limit any single page region to four or five visible type levels. Reuse the same size, weight, line height, and family for elements with the same role instead of giving dates, labels, captions, links, metrics, and annotations separate treatments. Use DM Sans for editorial reading and DM Mono only for compact metadata or chart notation.",
    "Use DM Sans at weight 500 or higher for visible page text, navigation, labels, and legal copy. Set button labels to weight 700 so actions read clearly and confidently. Do not use thin or 400-weight type in Foam landing pages.",
    "Use emojis and font formatting extremely sparingly.",
    "For emphasis, increase boldness. Keep written copy black in light mode and white in dark mode. Do not use accent colors for copy."
  ],
  "design": [
    "Follow Foam's shared design system. Pages must remain recognizably Foam.",
    "Never make a Foam page feel toy-like, juvenile, game-like, candy-colored, or decorated for its own sake. The visual character should feel mature, editorial, technical, confident, and restrained.",
    "Do not rainbow-code adjacent cards, steps, badges, icons, or metrics. Use one dominant neutral surface and Purple 500 #5F00B2 as the primary expressive brand accent.",
    "Color must clarify hierarchy, state, comparison, or evidence. Do not distribute every brand color across components simply to make a page feel colorful.",
    "Create color rhythm with a small number of large full-bleed section fields, not many colored components. Alternate Fog Blue #E8EEF0, Mineral Blue #C8D6DA, Deep Slate #26363B, white, near-black #151416, and Purple 700 #1A0033; reserve Purple 500 #5F00B2 for one decisive band or action.",
    "Within a colored section, keep cards and product evidence monochrome or white. Do not assign different colors to adjacent cards inside the same section.",
    "Avoid bubbly decoration, excessive pills, oversized rounded shapes, cartoonish symbols, confetti-like marks, and repeated circular badges. Rounded geometry must serve usability or match an established Foam component.",
    "Never use thick colored top borders, accent rails, cap lines, or partial outlines as decoration on cards, panels, or sections. Do not run a colored stripe into or around rounded corners. Rule callouts and examples must obey this rule too.",
    "Use the substantial foam.ai-style four-column footer on every route: brand and address, Company, Connect, and Legal & Trust. Light pages use very light gray #F5F5F5 with dark purple branding. Dark pages use near-black purple #090111, the white wordmark at 90% opacity, headings at 40% white, and links and supporting copy at 50% white. Never use greenish footer surfaces or full-white dark-mode links. Keep it full-width, square, approximately 207 px tall on desktop, with 32 px column gaps, 32 px top padding, and 24 px bottom padding.",
    "Use a thin neutral border, spacing, typography, or composition to separate a surface. A colored border is allowed only when it communicates a labeled state or meaning, and it must not become decorative chrome.",
    "Reuse existing components when useful. Allow page-specific layouts, visuals, animations, diagrams, and components without forcing every page into the same template.",
    "Use Foam's live information architecture as the structural reference for shared routes: Research is a spacious dated paper index, Careers is a direct editorial column with problems, team, roles, and operating details, and Docs is a compact documentation shell with persistent navigation and readable prose. Apply this template's approved palette, typography, header, footer, telemetry, and hostname rules to those structures.",
    "Every publication in the Research index must be retained and link to a proper same-host detail route under /research/<slug>/. Verify the live foam.ai index before each publication so newly listed research is never omitted. Mirror the current foam.ai publication text, data, scribble assets, figures, and hierarchy instead of inventing a sales summary. Keep claims limited to approved Foam sources, and resync a publication whenever the source changes. Give the index a coherent hand-drawn chart grammar, but choose each chart form for the evidence: correctly scaled bars for quantities, source figures when they are canonical, and causal maps for qualitative findings. Never invent numeric magnitude for a qualitative claim. Every index visual must communicate one plain-language conclusion in about three seconds: lead with one answer, compare no more than three series, label values directly, remove legends when direct labels work, and keep supporting annotations subordinate.",
    "Host publication PDFs on the same site hostname before embedding them. Never iframe a PDF from another origin because its security policy may refuse the connection. Always provide visible Open PDF and Download PDF links as fallbacks, and make the build fail if a required local paper is missing.",
    "Research index evidence must not default to repeated bar charts. Choose one polished form that matches each finding: a useful-call ratio, a two-point slope, a compression stack, a causal chain, an incident matrix, or another equally direct form. Keep the visual vocabulary restrained and coherent through shared typography, stroke weight, surfaces, and one purple emphasis. Do not make readers estimate values from shapes when exact values are available.",
    "In public benchmark presentation, describe third-party baselines generically as 'coding agent' and the instrumented setup as 'coding agent + Foam'. Do not display the Cursor product name in Research index or publication copy. Preserve methodological truth through the exact values, model names when relevant, sample sizes, dates, and links to the original benchmark repository.",
    "Every desktop viewport and mobile screen must render well.",
    "Use Foam's canonical favicon set on every route: /favicon.svg, /favicon-32x32.png, /favicon-16x16.png, and /apple-touch-icon.png. Treat favicon inclusion as a build invariant so new pages inherit it automatically.",
    "Use white #FFFFFF and black copy for the default page, with dark sections or dark mode in #1A0033 and white copy.",
    "Use the exact header and footer patterns in /patterns.json, including spacing, logo variants, typography, and mobile navigation behavior.",
    "Every main landing page includes the customer logo strip specified in /patterns.json. Implement the dock-and-handoff pattern with a fixed, aria-hidden duplicate and an identical in-flow strip. Keep the fixed copy visible until the in-flow strip's top edge aligns with the fixed strip's top edge, then hide it throughout later sections. The top navigation remains visible.",
    "Keep all Foam internal navigation root-relative and preserve the visitor's entry hostname on every page. Ensure destination routes work on that hostname.",
    "Use optional thin scribble SVGs in /patterns.json for intentional emphasis. One color per mark is the default, including the arrowhead. An offset double ring may use two related purples.",
    "Keep supporting routes quiet and editorial. Research and Careers use one modest page title with no duplicate eyebrow, explanatory hero copy, or horizontal divider directly beneath the page-title area or first content section. On the Research index, place each date directly below its paper title and pair every row with a truthful, self-explanatory chart or causal map using the published values and labels. Individual research routes mirror their current foam.ai publication content and hierarchy rather than rewriting it into sales copy. Careers uses current team portraits and biographies, approved roles, and concise operating details. Docs uses readable prose with persistent navigation. Privacy and Terms reproduce the current approved foam.ai legal copy exactly. Trust Center links go directly to Foam's verified Vanta trust center.",
    "Foam landing pages use Purple 500 #5F00B2 as the primary vivid accent, supported by Fog Blue #E8EEF0, Mineral Blue #C8D6DA, Deep Slate #26363B, white, black, deep Purple 700 #1A0033, and neutral grays. Electric Purple #8800FF is permitted only as a rare micro-accent in a thin underline, focus or active state, tiny indicator, or one restrained line. It must never fill a section, card, large button, or large illustration area. Purple 300 #A94DFF may appear only as a low-area companion in one intentional two-purple line or ring. Purple 100–200, orange, and yellow are source-only values and must not appear on landing pages.",
    "Do not use pastel, lavender, or pink-leaning purple. Bright Electric Purple is an exception only at micro scale; replace pale purple fills with white or neutral gray.",
    "Use Purple 500 sparingly: one primary emphasis or action per view. Keep secondary surfaces quiet and neutral.",
    "Apply the active palette inside every illustration, embedded SVG, data URI, diagram, chart, and mock interface. Orange, yellow, lavender, and pale purple must not survive inside image assets; replace them with mineral blue, deep slate, neutral gray, white, or deep purple.",
    "Green is for success and red is for errors or error-specific pages only. Do not use them as brand accents, scribbles, or chart series. Do not use pink.",
    "For hand-drawn charts, use actual values, correctly sized marks, labels, units, and a source. The assets in /patterns.json are illustrative starting points, not evidence.",
    "Do not use gradients on backgrounds, components, scribbles, or diagrams. Use solid fills.",
    "Do not use box shadows, text shadows, drop shadows, or glows on content, cards, controls, illustrations, page backgrounds, or footers. Separate the canonical footer with its fine top border and contrasting surface only."
  ],
  "instrumentation": [
    "Use the latest stable 1.x release of @foam-ai/browser on every HTML route. The template build must automatically inject /foam-analytics.js into any new page and fail if a page cannot be instrumented. Do not rely on page authors to remember the script tag.",
    "Configure a browser-scoped Foam token for each published Site. A browser token may be public, but it must never be replaced with a server secret or privileged credential.",
    "Use the privacy-safe maximum production profile: networkCapture='basic', tracePropagation=true, consoleCapture=false, and masked session replay with dense interaction sampling.",
    "Keep maskAllInputs=true and maskAllText=true, keep recordCanvas=false, enable secretHeuristics, and redact email, phone, name, SSN, credit-card, and IP data. Never collect passwords, credentials, raw form values, console payloads, page copy, or request and response bodies.",
    "Attach page.host, site.kind='chatgpt-site', and telemetry.profile='privacy-safe-max' as global resource attributes.",
    "Keep service.name exactly 'foam-gpt-sites' for every GPT-created Foam site. Derive site.id automatically from the active subdomain at runtime, with DEFAULT_SITE_ID used only for localhost or an unrecognized host. Set service.version and site.release to '<subdomain>@<SITE_VERSION>' so a site published at agents.foam.ai reports agents@<SITE_VERSION> even when an author forgets to configure its identity. Attach site.id, site.version, and site.release through additionalResourceAttributes before initialization so every automatic signal can be attributed to that release. Repeat the same attributes in setGlobalAttributes and explicit actions. Increment SITE_VERSION for every publication that changes the page or instrumentation. The build must fail if hostname-derived identity is removed.",
    "Before replacing a live landing page, publish an immutable, self-contained snapshot of the outgoing release at /<SITE_VERSION>/, including its HTML, styles, scripts, telemetry bundle, configuration, and assets. Never overwrite an existing version route. Maintain /versions.json with the current version and all snapshot paths so releases remain discoverable and auditable.",
    "Verify page visits and meaningful CTA actions in Foam after deployment.",
    "Capture the original_subdomain from the visitor's entry hostname and retain it for the first-party session. Include it in the initial page-view attributes and every later Foam event. For evals.foam.ai use original_subdomain=evals."
  ],
  "hostnamePersistence": {
    "priority": "hard rule for every Foam Site",
    "rule": "Keep visitors on the hostname they entered. Never hard-code https://foam.ai or another Foam hostname for internal navigation. Use root-relative links, including / for Home and /research for Research. The verified Vanta Trust Center is the intentional external exception.",
    "example": {
      "entry": "https://evals.foam.ai/",
      "researchHref": "/research",
      "researchResolvesTo": "https://evals.foam.ai/research",
      "homeHref": "/",
      "homeResolvesTo": "https://evals.foam.ai/"
    },
    "routeRequirement": "Every internal destination must exist on the current hostname or be handled by its same-host router. Otherwise use a truthful local anchor or create the route.",
    "externalLinks": "External services such as GitHub or Calendly may use absolute URLs."
  }
}