# Fern — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://buildwithfern.com/
Captured: 2026-11-10
CSS measured: 2026-11-10T06:52:06.488Z at 1440×1000 — https://buildwithfern.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website employs a minimal, developer-focused aesthetic characterized by generous whitespace, clean lines, and a subtle color palette. The design leverages a mix of geometric sans-serif for primary copy and monospaced fonts for technical details, reflecting its target audience. Feature cards with subtle borders and soft rounded corners organize information clearly, while interactive UI mockups and code snippets provide immediate context.

## Classification

- Industry: developer-tools
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, corporate, developer-focused
- Platform: Custom code
- Technology: Next.js, Astro, Tailwind CSS

## Typography

- Display: gtPlanar — weight 400; size 48px; line-height 55.2px; tracking -1.9px; Regular (90% role confidence, computed values)
- Heading: gtPlanar — weight 400; size 24px; line-height normal; tracking -0.5px; Regular (85% role confidence, computed values)
- Body: gtPlanar — weight 300; size 16px; line-height 27.2px; tracking normal; Regular (90% role confidence, computed values)
- Mono: JetBrains Mono — weight 400; size 12px; line-height 19.8px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #F7F7F7: color-1: computed lab(97.332 -0.0000298023 0); AI role: Off-white #F7F7F7 used as the primary background color for the page body. (95% role confidence, computed values)
- Text — text #202020: color-8: computed rgb(32, 32, 32); AI role: Dark grey #202020 used for primary headings and body text. (95% role confidence, computed values)
- Muted Text — muted text #737373: color-7: computed lab(48.496 0 0); AI role: Lighter grey #737373 used for secondary text, metadata, and navigation links. (90% role confidence, computed values)
- Border — border #E4E4E4: color-5: computed lab(90.72 0.0000298023 -0.0000119209); AI role: Light grey #E4E4E4 used for borders around feature cards and UI elements. (90% role confidence, computed values)
- Surface — surface #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: White #FFFFFF used for specific card backgrounds and UI mockup surfaces. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "36px",
    "lineHeight": "normal",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 200,
    "contexts": [
      {
        "tag": "span",
        "text": "Docs, SDKs, and CLI",
        "top": 1961,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "D",
        "top": 1962,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "o",
        "top": 1962,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "24px",
    "lineHeight": "normal",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "h3",
        "text": "Docs",
        "top": 2451,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "SDKs",
        "top": 2451,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "CLI",
        "top": 2451,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "normal",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Request",
        "top": 939,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Response",
        "top": 1409,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "48px",
    "lineHeight": "55.2px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Upgrade your developer and agent experience",
        "top": 184,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "700",
    "size": "32px",
    "lineHeight": "36.8px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Create Agent",
        "top": 666,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "300",
    "size": "16px",
    "lineHeight": "27.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 25,
    "contexts": [
      {
        "tag": "p",
        "text": "Docs pages served per year",
        "top": 1520,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Reduction in time to first API call",
        "top": 1520,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "AI search engagement",
        "top": 1520,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "300",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Support modern API protocols: REST, WebSockets, and GraphQL.",
        "top": 2060,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Integrate AI into how you write, maintain, and consume docs.",
        "top": 3049,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Teams come to Fern from every kind of stack. Our team handles the heavy lifting, so you ship faster ",
        "top": 4501,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "300",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Docs, SDKs, and a CLI for your API. Built for the AI era.",
        "top": 310,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Built for the AI era.",
        "top": 310,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Docs your developers and agents actually use, with search, MCP server, llms.txt, and AI search baked",
        "top": 1158,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Search",
        "top": 527,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "This endpoint expects an object.",
        "top": 966,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Voice agent successfully created",
        "top": 1436,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "17.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "@Fern Agent Write a quick start guide for my Fern generated TypeScript SDK",
        "top": 3836,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "PR created: github.com/your-company/docs/pull/3929",
        "top": 3934,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "github.com/your-company/docs/pull/3929",
        "top": 3935,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Creates a new voice agent from the provided config. Returns the created agent with its assigned ID a",
        "top": 827,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Fern SDKs handle pagination automatically — list endpoints return an async iterator you can loop ove",
        "top": 3269,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "300",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1030,
    "contexts": [
      {
        "tag": "span",
        "text": "Docs",
        "top": 96,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SDKs",
        "top": 197,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CLI",
        "top": 298,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "100",
    "size": "12.5px",
    "lineHeight": "21.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 78,
    "contexts": [
      {
        "tag": "span",
        "text": "1",
        "top": 3267,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "instances",
        "top": 3264,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ":",
        "top": 3263,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 62,
    "contexts": [
      {
        "tag": "td",
        "text": "1",
        "top": 692,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "import",
        "top": 693,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "{",
        "top": 693,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "700",
    "size": "12.8px",
    "lineHeight": "18.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "I want to integrate with your-company's Voice Agent API",
        "top": 810,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 843,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Searching docs:",
        "top": 843,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "docs.company.com",
        "top": 481,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 481,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "api-reference/rest/create-agent",
        "top": 481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Ask AI",
        "top": 527,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get started",
        "top": 521,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Home",
        "top": 563,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 20,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Start for free",
        "top": 20,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 20,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "21.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": ">",
        "top": 3829,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "I want to integrate with your-company’s Voice Agent API",
        "top": 3829,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 3881,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Beautiful, customizable documentation websites.",
        "top": 122,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Client libraries designed by language experts.",
        "top": 222,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Interact with your API from the terminal.",
        "top": 323,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "docs.yml",
        "top": 3228,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "theme.css",
        "top": 3257,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "quickstart.mdx",
        "top": 3284,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "700",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "code",
        "text": "voice_config",
        "top": 1011,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "conversation_config",
        "top": 1086,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "telephony",
        "top": 1160,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Voice configuration — voice ID, model, language, and prosody settings.",
        "top": 1036,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Turn-taking, interruption handling, and silence thresholds.",
        "top": 1111,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "SIP / Twilio settings for inbound and outbound phone calls.",
        "top": 1186,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Saturday at 3:23 PM",
        "top": 3817,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Saturday at 3:24 PM",
        "top": 3915,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Also of interest",
        "top": 9304,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Get Authorization",
        "top": 3796,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get Authorization",
        "top": 3819,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "List Sites",
        "top": 3869,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "500",
    "size": "8px",
    "lineHeight": "8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "GET",
        "top": 3799,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "GET",
        "top": 3822,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "GET",
        "top": 3872,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "Ask a question",
        "top": 716,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "View as MD",
        "top": 716,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Open in Claude",
        "top": 721,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "22.5px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "OpenAPI",
        "top": 2171,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "GraphQL",
        "top": 2171,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "AsyncAPI",
        "top": 2171,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "700",
    "size": "9.5px",
    "lineHeight": "14.3px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "POST",
        "top": 662,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "GET",
        "top": 694,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "DEL",
        "top": 727,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "36px",
    "lineHeight": "36px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "20M+",
        "top": 1468,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "99%",
        "top": 1468,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "14x",
        "top": 1468,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "JetBrains Mono",
    "fontStack": "\"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace",
    "weight": "700",
    "size": "12.8px",
    "lineHeight": "15.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": ">",
        "top": 810,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ">",
        "top": 1046,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "█",
        "top": 1046,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "500",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Email",
        "top": 5464,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Password",
        "top": 5535,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "View as Markdown",
        "top": 9417,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "500",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Token",
        "top": 3775,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sites",
        "top": 3848,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pages and Components",
        "top": 3967,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "400",
    "size": "9px",
    "lineHeight": "11.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "acme/server",
        "top": 5578,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "acme/ts-sdk",
        "top": 5573,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "acme/billing",
        "top": 5568,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "400",
    "size": "9px",
    "lineHeight": "9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "/api",
        "top": 5596,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/sdk",
        "top": 5591,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/billing",
        "top": 5585,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "300",
    "size": "24px",
    "lineHeight": "normal",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“I used to work at Stripe, where they built their own SDK auto-generation in house. I know how much ",
        "top": 7352,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "“Adding a feature used to mean implementing it seven times, once per language. Now we change the spe",
        "top": 7352,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "|",
        "top": 718,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "|",
        "top": 718,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "gtPlanar",
    "fontStack": "gtPlanar, \"gtPlanar Fallback\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "20.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "What’s the best way to handle pagination in the SDK?",
        "top": 3183,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Show me how to create an agent with a custom system prompt",
        "top": 3337,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "berkeleyMono",
    "fontStack": "berkeleyMono, \"berkeleyMono Fallback\"",
    "weight": "100",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "© 2026 Fern, a Postman company.",
        "top": 9508,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Born in Brooklyn, New York",
        "top": 9508,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F7F7F7",
    "alpha": 1,
    "cssValue": "lab(97.332 -0.0000298023 0)",
    "count": 331,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"@id\":\"https://buildwithfern.com#organizatio",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "DocsBeautiful, customizable documentation websites.SDKsClient libraries designed by language experts",
        "top": 72,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 259,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#009D00",
    "alpha": 1,
    "cssValue": "lab(56.0262 -58.5513 63.8351)",
    "count": 54,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2204,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 43,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 43,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "Start for free",
        "top": 20,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "Agent-friendly docs",
        "top": 412,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F0F0F3",
    "alpha": 1,
    "cssValue": "rgb(240, 240, 243)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "DocsBeautiful, customizable documentation websites.SDKsClient libraries designed by language experts",
        "top": 64,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "/api",
        "top": 5596,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#E4E4E4",
    "alpha": 1,
    "cssValue": "lab(90.72 0.0000298023 -0.0000119209)",
    "count": 239,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 259,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 307,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Agent-friendly docsGenerated SDKsdocs.company.com/api-reference/rest/create-agentAdd your brandSearc",
        "top": 382,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F9F9FB",
    "alpha": 1,
    "cssValue": "rgb(249, 249, 251)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "terminal~ % fern generate",
        "top": 2260,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "“I used to work at Stripe, where they built their own SDK auto-generation in house. I know how much ",
        "top": 7303,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#737373",
    "alpha": 1,
    "cssValue": "lab(48.496 0 0)",
    "count": 231,
    "contexts": [
      {
        "tag": "button",
        "text": "Products",
        "top": 20,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 29,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 34,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#202020",
    "alpha": 1,
    "cssValue": "rgb(32, 32, 32)",
    "count": 338,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 16,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Beautiful, customizable documentation websites.",
        "top": 122,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Sign in",
        "top": 20,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F5F5F4",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 244)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 471,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Search⌘K",
        "top": 521,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FCFCFC",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.991342 0.000416636 -0.00124443 / 0.3)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1504,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FCFCFD",
    "alpha": 1,
    "cssValue": "rgb(252, 252, 253)",
    "count": 13,
    "contexts": [
      {
        "tag": "a",
        "text": "",
        "top": 80,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "OpenAPI",
        "top": 2160,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#737373",
    "alpha": 0.34901960784313724,
    "cssValue": "oklab(0.555999 -0.00000530481 0.000012964 / 0.35)",
    "count": 7,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2204,
        "property": "svg-stroke"
      },
      {
        "tag": "g",
        "text": "",
        "top": 2331,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#404040",
    "alpha": 1,
    "cssValue": "rgb(64, 64, 64)",
    "count": 35,
    "contexts": [
      {
        "tag": "span",
        "text": "/",
        "top": 481,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Get started",
        "top": 521,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 530,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 110,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1402,
        "property": "svg-fill"
      },
      {
        "tag": "line",
        "text": "",
        "top": 5486,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Trail",
        "top": 105,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#0D74CE",
    "alpha": 1,
    "cssValue": "rgb(13, 116, 206)",
    "count": 560,
    "contexts": [
      {
        "tag": "span",
        "text": "163,415,409",
        "top": 1695,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FAFAF9",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 249)",
    "count": 1,
    "contexts": [
      {
        "tag": "aside",
        "text": "RESTPOSTCreate AgentGETList AgentsDELDelete AgentgRPCWebSocketsServer-Sent EventsAsyncAPIGraphQL",
        "top": 602,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#008700",
    "alpha": 1,
    "cssValue": "rgb(0, 135, 0)",
    "count": 434,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 192,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Click to interact",
        "top": 794,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "91,035",
        "top": 1695,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Generated SDKs",
        "top": 412,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Add your brandSearch⌘KAsk AIGet startedHomeDocsAPI ReferenceSDKsChangelog",
        "top": 511,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#1C2024",
    "alpha": 1,
    "cssValue": "rgb(28, 32, 36)",
    "count": 29,
    "contexts": [
      {
        "tag": "span",
        "text": "-",
        "top": 3283,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "What’s the best way to handle pagination in the SDK?",
        "top": 3183,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3869,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#F8F8F8",
    "alpha": 0.8,
    "cssValue": "oklab(0.976998 -0.00000980496 0.0000228882 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "header",
        "text": "ProductsResourcesCustomersDocsBeautiful, customizable documentation websites.SDKsClient libraries de",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#0A0A0A",
    "alpha": 1,
    "cssValue": "rgb(10, 10, 10)",
    "count": 22,
    "contexts": [
      {
        "tag": "span",
        "text": "api-reference/rest/create-agent",
        "top": 481,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 532,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "API Reference",
        "top": 563,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#60646C",
    "alpha": 1,
    "cssValue": "rgb(96, 100, 108)",
    "count": 24,
    "contexts": [
      {
        "tag": "span",
        "text": "docs.yml",
        "top": 3228,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Fern SDKs handle pagination automatically — list endpoints return an async iterator you can loop ove",
        "top": 3269,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#C5552D",
    "alpha": 1,
    "cssValue": "rgb(197, 85, 45)",
    "count": 14,
    "contexts": [
      {
        "tag": "pre",
        "text": "██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗ ██████╗ ██████╗ ██████╗ ███████╗ ██╔════╝██║ ██╔══██╗██║ █",
        "top": 762,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 843,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#000000",
    "alpha": 0.023529411764705882,
    "cssValue": "rgba(0, 0, 0, 0.024)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "POST/v1/voice-agentsTypeScript",
        "top": 635,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#E8E8EC",
    "alpha": 1,
    "cssValue": "rgb(232, 232, 236)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "What’s the best way to handle pagination in the SDK?",
        "top": 3183,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.9019607843137255,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.9)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Docs your developers and agents actually use, with search, MCP server, llms.txt, and AI search baked",
        "top": 1158,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#1F1F1F",
    "alpha": 1,
    "cssValue": "rgb(31, 31, 31)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Terminal",
        "top": 721,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#80838D",
    "alpha": 1,
    "cssValue": "rgb(128, 131, 141)",
    "count": 53,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1350,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "OpenAPI",
        "top": 2171,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2297,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#000000",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(0, 0, 0, 0.35)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "found 4 relevant pages",
        "top": 867,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "v3.2.0",
        "top": 957,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#8B8D98",
    "alpha": 1,
    "cssValue": "rgb(139, 141, 152)",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "terminal",
        "top": 2266,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 3271,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3271,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#000000",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(0, 0, 0, 0.08)",
    "count": 50,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 471,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "Search⌘K",
        "top": 521,
        "property": "border"
      },
      {
        "tag": "kbd",
        "text": "⌘K",
        "top": 526,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#0D73CC",
    "alpha": 0.0784313725490196,
    "cssValue": "oklab(0.555735 -0.0495838 -0.154437 / 0.08)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "012345678901234567890123456789,012345678901234567890123456789,012345678901234567890123456789",
        "top": 1696,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#D9D9E0",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 224)",
    "count": 70,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2269,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "docs.yml1instances:2 - url: docs.example.com3navigation:4 - section: Get started5 contents:6 - page:",
        "top": 3199,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(0, 0, 0, 0.05)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Terminal",
        "top": 716,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0 0 0 / 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 406,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#FAFAFA",
    "alpha": 1,
    "cssValue": "lab(98.26 0 0)",
    "count": 7,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 20,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 4535,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4538,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#171717",
    "alpha": 1,
    "cssValue": "lab(7.78201 -0.0000149012 0)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 20,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#008C00",
    "alpha": 0.0784313725490196,
    "cssValue": "oklab(0.540143 -0.145778 0.111903 / 0.08)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "01234567890123456789,012345678901234567890123456789",
        "top": 1696,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#A3A3A3",
    "alpha": 1,
    "cssValue": "rgb(163, 163, 163)",
    "count": 32,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 483,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 487,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 489,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#D9D9E1",
    "alpha": 0.4,
    "cssValue": "oklab(0.887344 0.00269312 -0.00911075 / 0.4)",
    "count": 31,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1504,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#0E7A43",
    "alpha": 1,
    "cssValue": "rgb(14, 122, 67)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "\"@your-company/voice-agents-ts\"",
        "top": 693,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#4963A4",
    "alpha": 1,
    "cssValue": "rgb(73, 99, 164)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "false",
        "top": 3383,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#111111",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(10, 10, 10, 0.06)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "POSTCreate Agent",
        "top": 655,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#E5E5E5",
    "alpha": 1,
    "cssValue": "lab(90.952 0 -0.0000119209)",
    "count": 40,
    "contexts": [
      {
        "tag": "a",
        "text": "Start for free",
        "top": 20,
        "property": "border"
      },
      {
        "tag": "input",
        "text": "",
        "top": 9179,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "Subscribe",
        "top": 9179,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#CDCED6",
    "alpha": 1,
    "cssValue": "rgb(205, 206, 214)",
    "count": 26,
    "contexts": [
      {
        "tag": "div",
        "text": "OpenAPI",
        "top": 2160,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3760,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3886,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#1F1F1F",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0.243533 0.0000111014 0.00000487268 / 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Also of interest",
        "top": 9304,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#FFD230",
    "alpha": 1,
    "cssValue": "lab(86.4156 6.13147 78.3961)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "DEV",
        "top": 85,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Line",
        "top": 105,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 412,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical padding separates major sections, while structured grid gaps are used between feature cards to maintain order.
- Corner style: Softly rounded corners applied consistently to feature cards, buttons, and UI mockups, creating a friendly, modern feel.
- Radius: Moderate radius on large UI containers and smaller radii on buttons and inner card elements.
- Borders: Thin (1px), solid, light grey borders (#E4E4E4, #E5E5E5) used extensively to define cards and separate content areas without heavy contrast.
- Buttons: Solid dark buttons for primary actions, and ghost or subtle outline styles for secondary interactions, often with rounded corners.
- Content width: Contained max-width for the main content area, centering the layout on larger screens.
- Density: Low density with ample whitespace to ensure readability and focus on the technical details and UI mockups.
- Evidence: Observed in the layout of the feature grids, the styling of the 'Book a demo' button, and the consistent use of #E4E4E4 borders across the page.

## Sections

Gallery section count: 18. Each entry corresponds to one gallery capture.

1. **Navbar — Fern Navbar** (Home)
   Few dropdown links on the left and a sign-in plus a dark primary button on the right make the main action obvious.
   Capture: 1440×73px; page bounds 0–73px of 10124px; source section ID: `41461529-1134-444a-bcc2-81f970a788c9`; image: https://media.designdetails.io/library/f4a1648787ff3e4a55b2ceafd3073171707658292e2d4925914f2ea9ca2b2aec/41461529-1134-444a-bcc2-81f970a788c9.webp
   SECTION.md v3.2: `41461529-1134-444a-bcc2-81f970a788c9` (deterministic evidence; editorial review pending)
2. **Stats — Logo row and metric cards** (Home)
   Large numbers paired with customer names and small previews give quick proof, with the logo strip adding credibility above.
   Capture: 1440×373px; page bounds 1285–1658px of 10124px; source section ID: `b7f67cb0-7bdc-4812-968b-35ff7fbf23fb`; image: https://media.designdetails.io/library/3c6e158242caed18237dcccfa0e4cc1ab443067bfcb4e5a95519685a73bac7d7/b7f67cb0-7bdc-4812-968b-35ff7fbf23fb.webp
   SECTION.md v3.2: `b7f67cb0-7bdc-4812-968b-35ff7fbf23fb` (deterministic evidence; editorial review pending)
3. **Features — Centered heading with protocol chips** (Home)
   A centered heading, subline and selectable protocol chips above a flow diagram explain the single-source idea in a compact way.
   Capture: 1440×753px; page bounds 1658–2411px of 10124px; source section ID: `db980169-22b1-4189-b624-ea254f64b2e4`; image: https://media.designdetails.io/library/a51456a1df285155bb863e08226918ac33aa1df458f421a55a8a4f2fb2ef14f0/db980169-22b1-4189-b624-ea254f64b2e4.webp
   SECTION.md v3.2: `db980169-22b1-4189-b624-ea254f64b2e4` (deterministic evidence; editorial review pending)
4. **Features — Three columns for docs, SDKs, CLI** (Home)
   Equal columns with arrow-linked titles, one-line descriptions and small previews let visitors scan the three products side by side.
   Capture: 1440×373px; page bounds 2411–2784px of 10124px; source section ID: `e0d6070a-b708-45e1-bcab-6fac757aeb62`; image: https://media.designdetails.io/library/2f2a5491731b4a71345e37e08a0875198561f07c2695c8310229f6ed1e164ca6/e0d6070a-b708-45e1-bcab-6fac757aeb62.webp
   SECTION.md v3.2: `e0d6070a-b708-45e1-bcab-6fac757aeb62` (deterministic evidence; editorial review pending)
5. **Testimonials — Migration case studies with logos** (Home)
   Three columns pair a prominent customer logo with a one-line outcome and smaller also-migrated logos, making switching feel common.
   Capture: 1440×325px; page bounds 4633–4958px of 10124px; source section ID: `a70774f0-7ea4-43d0-8602-0ba30d51e326`; image: https://media.designdetails.io/library/3427a1786ff07387a1ea0f60ae4a9f7a7813684f485ab94e7ad414fc9cda72c8/a70774f0-7ea4-43d0-8602-0ba30d51e326.webp
   SECTION.md v3.2: `a70774f0-7ea4-43d0-8602-0ba30d51e326` (deterministic evidence; editorial review pending)
6. **Features — Enterprise features with UI mockups** (Home)
   Two cards with login and repo diagrams illustrate security and multi-source docs concretely beneath a plain, left-aligned heading.
   Capture: 1440×751px; page bounds 4958–5709px of 10124px; source section ID: `fd0dd1d9-4eb0-45fd-87db-9a4b440f18e1`; image: https://media.designdetails.io/library/9eed2a4d2b41300712ab70f73f339b1fa20346c3608528b4df5c608025f14395/fd0dd1d9-4eb0-45fd-87db-9a4b440f18e1.webp
   SECTION.md v3.2: `fd0dd1d9-4eb0-45fd-87db-9a4b440f18e1` (deterministic evidence; editorial review pending)
7. **Features — Icon cards and Postman callout** (Home)
   Four small icon cards cover enterprise needs briefly, followed by a centered text block with a single link for the integration.
   Capture: 1440×738px; page bounds 5709–6447px of 10124px; source section ID: `42d7af26-034a-4d7b-8908-9509c1379522`; image: https://media.designdetails.io/library/a57c5e2fd1f76350fe50382ee8252b8cfe12f9d059a2f9e8eb6c18a7d66ea267/42d7af26-034a-4d7b-8908-9509c1379522.webp
   SECTION.md v3.2: `42d7af26-034a-4d7b-8908-9509c1379522` (deterministic evidence; editorial review pending)
8. **Testimonials — Quote cards with metrics** (Home)
   Tinted cards pair a named quote with large figures and a company logo, so each claim has measurable backing.
   Capture: 1440×1288px; page bounds 6447–7735px of 10124px; source section ID: `0614d1a5-8d7a-4295-83ee-79382e94da06`; image: https://media.designdetails.io/library/f3a4ee3b1c935bfb17537c09dd4d57aa94383f0a61aa18bc83bb47f6ce1737e2/0614d1a5-8d7a-4295-83ee-79382e94da06.webp
   SECTION.md v3.2: `0614d1a5-8d7a-4295-83ee-79382e94da06` (deterministic evidence; editorial review pending)
9. **CTA — Centered closing call with two buttons** (Home)
   A strong heading, one supporting sentence and a dark primary button beside a quieter one make the next step obvious.
   Capture: 1440×574px; page bounds 8418–8992px of 10124px; source section ID: `ff255da1-b9e1-4889-899b-f3d734e1c0ba`; image: https://media.designdetails.io/library/4796bfa2c54993304d331d5574588e3bf458d468fdf1cad4f063f9819e430662/ff255da1-b9e1-4889-899b-f3d734e1c0ba.webp
   SECTION.md v3.2: `ff255da1-b9e1-4889-899b-f3d734e1c0ba` (deterministic evidence; editorial review pending)
10. **Other — Oversized dotted logo wordmark** (Home)
   A huge pale dot-pattern wordmark closes the page with a memorable brand mark without competing with the content above.
   Capture: 1440×576px; page bounds 9548–10124px of 10124px; source section ID: `833943c5-6682-4eff-be23-0bcefdf60bfd`; image: https://media.designdetails.io/library/ecb0235e1a37267ae492f3d58dbb7faa208171ed3b62b09da1ac1497cde2a848/833943c5-6682-4eff-be23-0bcefdf60bfd.webp
   SECTION.md v3.2: `833943c5-6682-4eff-be23-0bcefdf60bfd` (deterministic evidence; editorial review pending)
11. **Hero — Developer and Agent Experience Hero** (Home)
   AI suggestion (98% confidence): Complete hero with a strong value proposition, supporting copy, agent setup cue, large product demonstration, and closing benefit statement.
   Capture: 1440×1116px; page bounds 156–1272px of 10124px; source section ID: `ff982dff-ffb9-43fd-b0b8-54bd8bc76740`; image: https://media.designdetails.io/library/83c71cd05fe96fe4f0c80b65f9f1aa41081be2ecdd3a2480b5a06c5e6b958042/ff982dff-ffb9-43fd-b0b8-54bd8bc76740.webp
   SECTION.md v3.2: `ff982dff-ffb9-43fd-b0b8-54bd8bc76740` (deterministic evidence; editorial review pending)
12. **Feature Grid — Docs, SDKs, and CLI Platform Grid** (Home)
   AI suggestion (96% confidence): Self-contained platform overview with a centered heading, supported protocol badges, generation workflow, and a complete three-column grid for Docs, SDKs, and CLI.
   Capture: 1440×1008px; page bounds 1854–2862px of 10124px; source section ID: `1dbbfde9-fc8e-42f4-907b-fcda7c9c7a3c`; image: https://media.designdetails.io/library/c1fe046155a8f8a012c596c07c7eda19167201dbe3c41b643b8b6322e5e7a577/1dbbfde9-fc8e-42f4-907b-fcda7c9c7a3c.webp
   SECTION.md v3.2: `1dbbfde9-fc8e-42f4-907b-fcda7c9c7a3c` (deterministic evidence; editorial review pending)
13. **Feature Grid — Designed for the AI era** (Home)
   AI suggestion (99% confidence): Complete section with its own heading and a cohesive five-card grid covering docs-as-code, AI chat, llms.txt, MCP, and AI-assisted authoring.
   Capture: 1440×1359px; page bounds 2894–4253px of 10124px; source section ID: `5dc4c784-4ab7-41ec-ac5b-71d018cad683`; image: https://media.designdetails.io/library/928ebcafd90f5360212b7a4f2cbf4cfe33637ae6194c8b3cd2dcfff6ee7990a6/5dc4c784-4ab7-41ec-ac5b-71d018cad683.webp
   SECTION.md v3.2: `5dc4c784-4ab7-41ec-ac5b-71d018cad683` (deterministic evidence; editorial review pending)
14. **CTA — Migrate to the enterprise platform** (Home)
   AI suggestion (94% confidence): Self-contained migration CTA supported by three complete customer migration examples from Webflow, NVIDIA, and ElevenLabs.
   Capture: 1440×708px; page bounds 4328–5036px of 10124px; source section ID: `8f8786ba-b19a-4e01-a10b-0a6c690a6c8d`; image: https://media.designdetails.io/library/0db2a19e53761db7437772e90e0070edb19eb1dcc6397caa5fc53a696a099072/8f8786ba-b19a-4e01-a10b-0a6c690a6c8d.webp
   SECTION.md v3.2: `8f8786ba-b19a-4e01-a10b-0a6c690a6c8d` (deterministic evidence; editorial review pending)
15. **Product Demo — Native Postman Support Demo** (Home)
   AI suggestion (98% confidence): Complete product integration showcase with a clear heading, explanatory copy, documentation CTA, and a large Postman interface visual.
   Capture: 1440×822px; page bounds 6127–6949px of 10124px; source section ID: `02c4f721-fb6a-4389-919f-fb71920486d7`; image: https://media.designdetails.io/library/a41df705a4a42570da069417b34a82f06c797513744387d3c2f062daa3a521ea/02c4f721-fb6a-4389-919f-fb71920486d7.webp
   SECTION.md v3.2: `02c4f721-fb6a-4389-919f-fb71920486d7` (deterministic evidence; editorial review pending)
16. **Testimonials — Hear It From Our Customers** (Home)
   AI suggestion (98% confidence): Complete customer proof section with its own heading, supporting customer count, CTA, and two substantial branded quote cards with metrics.
   Capture: 1440×870px; page bounds 6952–7822px of 10124px; source section ID: `bfd5f597-4e2a-4118-9798-d01a8fdba802`; image: https://media.designdetails.io/library/496bbb0ab9e41293e07cc6b7454425cb77d18f3e5415830885ef23dff7eff116/bfd5f597-4e2a-4118-9798-d01a8fdba802.webp
   SECTION.md v3.2: `bfd5f597-4e2a-4118-9798-d01a8fdba802` (deterministic evidence; editorial review pending)
17. **Blog — Field notes from the Fern team** (Home)
   AI suggestion (96% confidence): Complete editorial section with heading, all-posts action, and a full three-card article grid.
   Capture: 1440×493px; page bounds 7928–8421px of 10124px; source section ID: `374bee4b-948a-4405-a4d2-304b2c9d0bae`; image: https://media.designdetails.io/library/12adeee771f018533f4a1c4cb5b27eb39db33812d64ede1deb68158036c9742e/374bee4b-948a-4405-a4d2-304b2c9d0bae.webp
   SECTION.md v3.2: `374bee4b-948a-4405-a4d2-304b2c9d0bae` (deterministic evidence; editorial review pending)
18. **Footer — Fern newsletter and site footer** (Home)
   AI suggestion (94% confidence): Complete substantial footer combining newsletter signup, status and compliance badges, grouped navigation links, related reading, utility controls, copyright, location, and social links.
   Capture: 1440×437px; page bounds 9120–9557px of 10124px; source section ID: `dacd4b23-77fa-418a-85f8-15d51faf793a`; image: https://media.designdetails.io/library/d1768563644b9c403306a7047509cd41946367cae191c3e3fa2123449d96bd6a/dacd4b23-77fa-418a-85f8-15d51faf793a.webp
   SECTION.md v3.2: `dacd4b23-77fa-418a-85f8-15d51faf793a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/405adddabf0c59f9caa030bef1ce5c5834c4a9f2f10b1bc276232a6c73856d12/desktop_full-cc379b7a-2026-11-10T06-52-06-508Z.webp
- Mobile screenshot: https://media.designdetails.io/library/b9dcbb6c9765a1ecf1f52559279e89fd62cb9d4a0cab99a2e12afbc0182068ca/mobile_full-cc379b7a-2026-11-10T06-52-42-974Z.webp
- Open Graph image: https://media.designdetails.io/library/550e69faee3756660c10d3d1959ef85e8e525249076856b875f629889313caac/og_image-cc379b7a-2026-11-10T06-52-15-014Z.webp
- Full-page video: https://media.designdetails.io/library/5717665606d4a0e85fbcf0deecb1f768afb5d48dceeb3a54badbf9d144ce004f/motion-1794296458841.mp4
- Video poster: https://media.designdetails.io/library/3216f1fb2462d82b4ebf9ceab20a1b12126ac928744967327a93a405039bf745/motion-poster-1794296458841.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Stat Block
- Feature Card
- Testimonial Card
- Footer
- UI Mockup Simulation

## Quality rubric

Overall: 57.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Fern's site is a well-built, professionally executed instance of the modern developer-tool marketing template: a disciplined type system separating prose from code, a tightly controlled neutral palette with purposeful functional accents, and a content strategy that backs claims with specific, credible proof points (named customers, concrete metrics, matched screenshots) rather than vague assertion. The layout system is consistent and legible across a long page, and small details like the dot-matrix fern wordmark and layered file-stack illustration show genuine design care. However, the overall experience does not meaningfully distinguish itself from the now-standard SaaS/dev-tool landing page genre — logo strip, stat band, card grids, gradient testimonials, and scroll-triggered reveals are all well-executed but completely expected moves, and the motion vocabulary offers nothing beyond what dozens of comparable products already do. The result is a competent, trustworthy execution in its chosen idiom rather than a site that pushes the idiom forward.

- Typography (15%): 63 — A clear two-track type system separates marketing copy (gtPlanar, a geometric sans with tight negative tracking at display sizes) from technical content (JetBrains Mono, berkeleyMono, Inter at small sizes for UI chrome). Hierarchy is legible: 48px display headline, 24px section headings, 14-16px body. Letter-spacing is tuned per size (-1.9px at 48px, -0.5px at 24px) rather than left at browser default, showing deliberate kerning work. However, the system is a very common SaaS/docs-product pattern (sans for prose, mono for code) rather than a distinctive voice, and body copy at 300 weight/16px is unremarkable.
- Color (10%): 59 — Palette is restrained and systematic: off-white canvas (#F7F7F7), near-black text (#202020), mid-grey secondary text (#737373), and light borders (#E4E4E4/#E5E5E5) recur consistently across cards, buttons, and dividers. Functional accent colors are used meaningfully — green (#008700/#009D00) for success states and terminal highlights, blue (#0D74CE) for stat annotations, orange-red (#C5552D) for ASCII/ terminal art — giving the palette a logical, state-driven purpose rather than decoration. Testimonial cards introduce warm/cool gradient washes for variety. The palette is competent and coherent but ultimately a very conventional neutral-plus-accent SaaS scheme with limited chromatic ambition.
- Layout (20%): 65 — The page follows a coherent, repeatable system: hero with UI simulation, logo strip, stat marquee, then alternating card grids (3-col feature grids, 2-col AI-feature grids, migration/enterprise grids), testimonial pair, blog teaser row, and a structured footer with newsletter and dot-matrix wordmark. Grids are consistent in gutter and border treatment, content width is contained and centered, and vertical rhythm (generous section padding) is evident across the ~10,000px page. Nesting of UI mockups inside cards (terminal windows, docs.yml file icons, API reference panel) adds organizational depth. This is a well-executed but highly familiar docs/dev-tool marketing layout template; nothing structurally surprises beyond the genre's established conventions.
- Motion (20%): 54 — Observed motion includes a hero UI simulation (cursor movement, terminal typing, panel updates), a continuous logo/stat marquee, and standard scroll-triggered fade/translate-up reveals for cards and text blocks. These are competently implemented and purposeful — the hero demo substitutes for a product video — but all three patterns (hero product demo, infinite marquee, scroll fade-ins) are extremely common in this product category and show no evidence of original choreography, custom easing, or interaction beyond default scroll-reveal conventions. No evidence of performance, frame rate, or responsiveness was established to credit smoothness.
- Originality (25%): 47 — The site assembles well-worn B2B dev-tool/SaaS conventions: logo strip, stat band, three-column feature cards, terminal/code mockups, testimonial gradient cards, blog teaser row, newsletter footer — a template seen across Vercel, Linear, Stripe-adjacent docs products. The dot-matrix fern wordmark in the footer and the layered 'docs.yml/theme.css/quickstart.mdx' file-stack illustration are small genuine design ideas, but they are minor flourishes rather than a sustained original system. Nothing here meaningfully departs from category expectations; the 'AI era' framing is conveyed mostly through copy and a claude-code-style terminal rather than a visual idea unique to Fern.
- Content (10%): 64 — Content and visuals are tightly integrated: UI mockups (API reference panel, terminal simulation, Postman integration screen) directly illustrate the adjacent copy claims, stat callouts are paired with real customer-result thumbnails (ElevenLabs, Adobe, Unleash), and testimonials carry concrete named metrics (1M+ SDK downloads, 7,000+ engineering hours saved) rather than vague praise. The 'Migrate to Fern' section pairs named migration sources (Webflow, NVIDIA, ElevenLabs) with specific outcomes, reinforcing credibility through specificity rather than generic imagery.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A deep blue hero with a soft gradient horizon frames an actual docs browser and a mono-type terminal window side by side, showing the product mid-task instead of describing it. Below, a plain grey background with bold black stat numbers and small logo marks keeps the long page easy to scan while still building trust through named customers.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.