{
  "name": "Foam reusable page patterns",
  "updated": "2026-09-24",
  "modes": {
    "light": {
      "background": "#FFFFFF",
      "text": "#000000",
      "wordmark": "/design/assets/logo-dark-purple.svg",
      "footerWordmark": "/design/assets/logo-dark-purple.svg",
      "primaryButton": {
        "background": "#1A0033",
        "text": "#FFFFFF"
      }
    },
    "dark": {
      "background": "#1A0033",
      "text": "#FFFFFF",
      "wordmark": "/design/assets/logo-white.svg",
      "footerWordmark": "/design/assets/logo-white.svg",
      "primaryButton": {
        "background": "#FFFFFF",
        "text": "#1A0033"
      }
    }
  },
  "header": {
    "use": "Canonical Foam page header; replace navigation destinations and call to action for the page.",
    "heightDesktopPx": 69,
    "heightMobilePx": 64,
    "contentMaxWidthPx": 1376,
    "contentSidePaddingDesktopPx": 32,
    "contentSidePaddingMobilePx": 25,
    "wordmarkWidthPx": 82,
    "wordmarkHeightPx": 25,
    "darkWordmarkHeightPx": 26,
    "mobileWordmarkWidthPx": 72,
    "navigation": {
      "font": "DM Sans",
      "sizePx": 14,
      "weight": 500,
      "exampleLabels": [
        "Product",
        "Research",
        "Company"
      ]
    },
    "primaryAction": {
      "font": "DM Sans",
      "sizePx": 14,
      "weight": 700,
      "minHeightPx": 36,
      "paddingHorizontalPx": 13,
      "radiusPx": 30
    },
    "mobile": "Show a labeled Menu button that toggles the real navigation and updates aria-expanded. Close after link selection or Escape.",
    "cssSelector": ".site-header",
    "referenceSection": "/#patterns"
  },
  "customerLogoStrip": {
    "use": "On every main landing page, show the real customer logo strip from the Foam homepage at the bottom of the opening experience. Keep it docked to the bottom edge while the opening content is in view, then hand it off to an identical in-flow strip before the next section. The top navigation stays separate and visible.",
    "layout": "Use a slim white bar with a fine border, compact label, and grayscale customer logos. Keep both copies pixel-identical so the handoff is visually seamless. Keep it responsive and ensure it does not cover important content or controls on mobile. Size wide wordmarks such as Braintrust slightly below the largest customer marks.",
    "behavior": "Render one fixed, presentation-only copy at the viewport bottom and one authoritative copy in normal document flow. Keep the fixed copy visible while the in-flow copy approaches from below. Hide the fixed copy only when the in-flow strip's top edge reaches the fixed strip's top edge, so both rails are exactly aligned at handoff. Keep it hidden after the visitor reaches later sections. Reverse the handoff when scrolling back above that alignment point. Do not leave the fixed copy floating over later sections.",
    "accessibility": "Expose the label and customer names only through the in-flow strip. Mark the fixed duplicate aria-hidden and remove it from pointer interaction. Without JavaScript, show only the in-flow strip.",
    "implementation": "Use viewport geometry or an equivalent observer-driven state to compare the two strips' top edges and switch copies without a blank interval or layout jump. Do not trigger merely when the in-flow strip enters the viewport. Avoid relying on position: sticky alone because the strip must dock before its in-flow position arrives and must stop overlaying content after the handoff.",
    "contentRule": "Use only customer logos Foam has permission to display."
  },
  "footer": {
    "use": "Canonical Foam page footer; replace sample links with valid destinations.",
    "minHeightDesktopPx": 207,
    "paddingTopDesktopPx": 32,
    "paddingBottomDesktopPx": 24,
    "columnGapPx": 32,
    "layout": "Four columns: brand and address, Company, Connect, and Legal & Trust.",
    "surfaceLight": "#F5F5F5",
    "surfaceDark": "#090111",
    "surfaceRule": "Match the footer to the page mode: very light gray #F5F5F5 with dark purple branding in light mode, and near-black purple #090111 in dark mode. In dark mode use the white logo at 90% opacity, headings at 40% white, and links and supporting copy at 50% white so the footer does not glare. Never use greenish footer tones.",
    "elevation": "Use a fine neutral top border with no shadow. Keep the footer full-width and square; never use a rounded container, bright edge, glow, or floating-card treatment.",
    "mobile": "Allow links and legal copy to wrap, keeping text readable.",
    "links": {
      "font": "DM Sans",
      "sizePx": 14,
      "weight": 500
    },
    "legal": {
      "font": "DM Sans",
      "sizePx": 12,
      "weight": 500
    },
    "lightWordmarkWidthPx": 62,
    "lightWordmarkHeightPx": 19,
    "darkWordmarkWidthPx": 62,
    "darkWordmarkHeightPx": 20,
    "referenceSection": "/#patterns"
  },
  "roundness": [
    {
      "radiusPx": 8,
      "use": "Compact surfaces",
      "source": "Foam page recommendation"
    },
    {
      "radiusPx": 16,
      "use": "Content cards",
      "source": "Foam page recommendation"
    },
    {
      "radiusPx": 30,
      "use": "Buttons",
      "source": "Foam button pattern"
    },
    {
      "radiusPx": 40,
      "use": "Form fields",
      "source": "Foam field pattern"
    }
  ],
  "scribbles": {
    "strokeWidthPx": 2,
    "secondaryRingStrokeWidthPx": 1.6,
    "colorLight": "#1A0033",
    "colorDark": "#FFFFFF",
    "rules": "Optional. Use one thin color per mark: dark purple on light and white on dark. Use a second related purple only for a deliberate offset ring. Arrow lines and heads must match. Keep words in DM Sans, black on light and white on dark. Green and red are status-only and never for scribbles. No fill, shadow, glow, or gradient.",
    "whiteboardReference": "https://tldraw.dev/sdk-features/draw-shape",
    "diagramRules": [
      "These SVGs illustrate a visual style. Use actual measurements when producing a chart.",
      "Label real charts with values, categories, units, and a source.",
      "Keep hand-drawn strokes legible at mobile sizes and in both page modes.",
      "Arrow body and arrowhead use the same color; do not add unexplained marks to charts."
    ],
    "typePairing": {
      "headingFont": "DM Sans",
      "headingWeight": 500,
      "bodyWeight": 400,
      "lightText": "#000000",
      "darkText": "#FFFFFF",
      "reference": "Foam Research type pairing",
      "note": "The optional scribble assets below are new examples; the research page informs typography, not these marks."
    },
    "variants": [
      {
        "name": "Underline",
        "use": "A short phrase or outcome",
        "light": "/design/assets/scribble-underline.svg",
        "dark": "/design/assets/scribble-underline-white.svg"
      },
      {
        "name": "Ring",
        "use": "One statistic or proof point",
        "light": "/design/assets/scribble-ring.svg",
        "dark": "/design/assets/scribble-ring-white.svg"
      },
      {
        "name": "Pointer",
        "use": "A result or action",
        "light": "/design/assets/scribble-pointer.svg",
        "dark": "/design/assets/scribble-pointer-white.svg"
      },
      {
        "name": "Offset double ring",
        "use": "Circle one statistic with two imperfect rings; try 62% in DM Sans Medium",
        "light": "/design/assets/scribble-double-ring.svg",
        "dark": "/design/assets/scribble-double-ring-dark.svg",
        "lightColors": [
          "#1A0033",
          "#5F00B2"
        ],
        "darkColors": [
          "#FFFFFF",
          "#D9D6DC"
        ]
      },
      {
        "name": "Underline with type",
        "use": "Underline a short insight; try Root cause in DM Sans Medium",
        "light": "/design/assets/scribble-color-underline.svg",
        "dark": "/design/assets/scribble-color-underline-dark.svg",
        "lightColors": [
          "#1A0033"
        ],
        "darkColors": [
          "#FFFFFF"
        ]
      },
      {
        "name": "Pointer with type",
        "use": "Guide attention to a proof point; try Evidence in DM Sans Medium",
        "light": "/design/assets/scribble-color-pointer.svg",
        "dark": "/design/assets/scribble-color-pointer-dark.svg",
        "lightColors": [
          "#1A0033"
        ],
        "darkColors": [
          "#FFFFFF"
        ]
      },
      {
        "name": "One line",
        "use": "Quiet emphasis below a phrase or a small divider",
        "light": "/design/assets/scribble-single-line.svg",
        "dark": "/design/assets/scribble-single-line-dark.svg"
      },
      {
        "name": "Loose wave",
        "use": "A sense of movement around a transition",
        "light": "/design/assets/scribble-wave.svg",
        "dark": "/design/assets/scribble-wave-dark.svg"
      },
      {
        "name": "Freehand box",
        "use": "Frame a quote, result, or step",
        "light": "/design/assets/scribble-box.svg",
        "dark": "/design/assets/scribble-box-dark.svg"
      },
      {
        "name": "Bar chart",
        "use": "Comparison, after replacing illustrative bars with actual values and labels",
        "light": "/design/assets/scribble-bars.svg",
        "dark": "/design/assets/scribble-bars-dark.svg"
      },
      {
        "name": "Pie chart",
        "use": "Parts of a whole, after replacing illustrative sectors with correctly sized values and labels",
        "light": "/design/assets/scribble-pie.svg",
        "dark": "/design/assets/scribble-pie-dark.svg"
      },
      {
        "name": "Two-step connector",
        "use": "A labeled sequence or relationship",
        "light": "/design/assets/scribble-connector.svg",
        "dark": "/design/assets/scribble-connector-dark.svg"
      }
    ]
  },
  "researchPublication": {
    "use": "Give every item in the Research index a same-host detail page under /research/<slug>/.",
    "structure": "Use a publication header with date, type, title, summary, and primary source action; then an abstract or framing section, evidence or method, clearly labeled results, interpretation, source note, and previous/next research navigation.",
    "visualLanguage": "Keep the page editorial and mostly white. Use solid Fog Blue for one evidence band and Purple 700 for one concluding band. Use the single-line underline once below the title and the pointer once on a central claim. Do not scatter scribbles through every section.",
    "truthfulness": "Limit claims and numbers to approved Foam publications or public benchmark sources. Link the original paper, PDF, or repository. Never invent missing methods, sample sizes, results, authors, or citations.",
    "navigation": "All index and previous/next links are root-relative so the visitor stays on the entry hostname."
  },
  "restrictions": {
    "gradients": "Do not add gradients to new page designs. Use solid color backgrounds, buttons, diagrams, and marks.",
    "pink": "Do not use pink.",
    "shadows": "Do not use box shadows, text shadows, drop shadows, or glows, including on the canonical footer.",
    "colorUsage": "Use Purple 500 #5F00B2 as the primary vivid accent. Create page rhythm with large full-bleed fields in white, Fog Blue #E8EEF0, Mineral Blue #C8D6DA, Deep Slate #26363B, near-black #151416, and Purple 700 #1A0033. Keep cards within a band monochrome. Electric Purple #8800FF is allowed only for tiny lines, focus or active states, and small indicators; never large fills. Purple 100–200, orange, and yellow are source-only and prohibited on landing pages.",
    "lightPurple": "Do not use pale lavender fills. Purple 300 #A94DFF is limited to a tiny companion line or ring beside Electric Purple."
  },
  "navigation": {
    "hardRule": "Use root-relative URLs for all internal Foam links. Header wordmark and Home point to /. Research points to /research only when that route exists on the same host. Preserve the original subdomain in Foam telemetry."
  }
}