# Fernand — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://getfernand.com/
Captured: 2026-10-16
CSS measured: 2026-10-16T21:18:03.801Z at 1440×1000 — https://getfernand.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: anthropic/claude-sonnet-5

## Design direction

The Fernand website features a clean, soft, and modern design tailored for a SaaS product. It uses a light palette with ample whitespace, subtle gradients, and rounded corners to create a friendly, approachable feel. The typography relies exclusively on the Inter font family, offering excellent legibility. The layout is structured with clear feature highlights, product UI mockups, and a floating chat widget, creating an engaging and informative user experience.

## Classification

- Industry: crm
- Site type: Landing, Blog
- Business model: Software, Agency
- Styles: soft, minimal, corporate, saas-interface
- Platform: Custom code
- Technology: Not identified

## Typography

- Display: Inter — weight 400; size 38px; line-height 48px; tracking normal; Regular (95% role confidence, computed values)
- Heading: Inter — weight 400; size 30px; line-height 38px; tracking normal; Regular (90% role confidence, computed values)
- Body: Inter — weight 400; size 16px; line-height 26px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Text — text #1A2035: color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text. (95% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds. (90% role confidence, computed values)
- Muted Text — muted text #717583: color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions. (90% role confidence, computed values)
- Primary Action — primary action #00A0FF: color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free'). (90% role confidence, computed values)
- Surface — surface #F7FAFC: color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas. (85% role confidence, computed values)
- Surface — surface #151618: color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background. (80% 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": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 42,
    "contexts": [
      {
        "tag": "span",
        "text": "Richard",
        "top": 3539,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Dinesh",
        "top": 3577,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Gilfoyle",
        "top": 3615,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "30px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "h3",
        "text": "Email",
        "top": 1890,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Live chat widget",
        "top": 1890,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Knowledge base",
        "top": 1890,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "30px",
    "lineHeight": "38px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "h2",
        "text": "Consolidate all your support channels into one shared inbox",
        "top": 1588,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Build your product.Not your support stack.",
        "top": 2318,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Support finally connects with your team and product strategy",
        "top": 3234,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "17px",
    "lineHeight": "23px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Track bug reports and feature requests",
        "top": 3799,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Invite all of your team at no extra cost",
        "top": 3799,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Assign work to AI agents",
        "top": 3799,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "38px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "The free customer support platform for SaaS teams",
        "top": 226,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 33,
    "contexts": [
      {
        "tag": "p",
        "text": "Add help@yourapp.com and answer from a shared inbox. Email is on the free plan. Most free tools only",
        "top": 1928,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Embed a live chat in your product and respond to customers in real time, right from your inbox.",
        "top": 1928,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Publish a beautiful, SEO-friendly help center your customers can search through before reaching out.",
        "top": 1928,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Everything consolidates into one shared inbox you can access from your desktop or mobile. Collaborat",
        "top": 1688,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Train it once on your docs, past replies, Q&As, and files. It powers everything across Fernand. The ",
        "top": 4651,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Native integrations with your payment providers and dev tools. Connect anything else with the API, o",
        "top": 7253,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "17px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Bug reports. Refund requests. The same questions again and again. And a few emails you're not even s",
        "top": 2418,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "You can build an inbox in an afternoon. Then your domain drifts into spam. A changed subject splits ",
        "top": 2490,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "We're two founders. We spend our days on this stuff so you don't have to.",
        "top": 2646,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Point Fernand at any HTTP endpoint and it pulls the data that matters most right into the conversati",
        "top": 6036,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Trigger on message content, sender, channel, or time of day. Route, tag, close, assign, or fire a we",
        "top": 6458,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Type /custom-commands to reply with a template, set a status, tag it, and assign it, all at once. Yo",
        "top": 6458,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Hey Erlich,",
        "top": 6748,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Looks like the Aviato API is throwing 503s again. Pretty sure it's your static IP allocation script ",
        "top": 6782,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Richard",
        "top": 6838,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "22px",
    "lineHeight": "34.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "\"Fernand is the bedrock of my solo business. It's the reason I'm able to stay solo and move quick wh",
        "top": 4048,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "\"I used to feel overwhelmed handling support. I either ignored messages, or I got sucked into endles",
        "top": 9798,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "17px",
    "lineHeight": "28.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Respond on every channel, build a knowledge base, and put your AI Agent on the front line. Sync with",
        "top": 346,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Trusted by hundreds of modern founders like you",
        "top": 1353,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 26,
    "contexts": [
      {
        "tag": "a",
        "text": "About us",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Log in",
        "top": 28,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "Tracked under #PP-1337",
        "top": 3599,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Assign conversation to...",
        "top": 3487,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3",
        "top": 5933,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "Automatically triage new messages by intent",
        "top": 180,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "No more silos",
        "top": 3186,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "#PP-1337",
        "top": 3597,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "600",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "Sep. 30",
        "top": 177,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "200",
        "top": 5929,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "200",
        "top": 5964,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Monaco",
    "fontStack": "Monaco, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "erlich@bachmanity.com",
        "top": 5927,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "jared@piedpiper.com",
        "top": 5962,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "bighead@hooli.xyz",
        "top": 5997,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Gavin Belson",
        "top": 3550,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "512 Mbps",
        "top": 6101,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "0 Mbps",
        "top": 6146,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Founder",
        "top": 3541,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Frontend engineer",
        "top": 3579,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Backend engineer",
        "top": 3617,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "GB",
        "top": 3525,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Founder of Post Bridge",
        "top": 4327,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "bachmanity.com",
        "top": 6098,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "RH",
        "top": 3535,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "DC",
        "top": 3573,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "BG",
        "top": 3611,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "600",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "strong",
        "text": "Daniel Pianetti",
        "top": 1372,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "James Arthur",
        "top": 1372,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Tal Flanchraych",
        "top": 1372,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "from Are.na",
        "top": 1389,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "from ElectricSQL",
        "top": 1389,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "from ApplyAll",
        "top": 1389,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "600",
    "size": "9px",
    "lineHeight": "9px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "strong",
        "text": "Ticket flow",
        "top": 11944,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Unassigned",
        "top": 11944,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Inbox zero",
        "top": 11944,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "⌘",
        "top": 12271,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "K",
        "top": 12271,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "S",
        "top": 12287,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "kbd",
        "text": "R",
        "top": 6720,
        "property": "font"
      },
      {
        "tag": "kbd",
        "text": "N",
        "top": 6720,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "⌘ ENTER",
        "top": 6912,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "600",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "strong",
        "text": "Jack Friks",
        "top": 4308,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Thomas Sanlis",
        "top": 10058,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "strong",
        "text": "Erlich Bachman",
        "top": 5847,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Hey! How can we help?",
        "top": 10508,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "kbd",
        "text": "R",
        "top": 476,
        "property": "font"
      },
      {
        "tag": "kbd",
        "text": "R",
        "top": 13274,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "700",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "strong",
        "text": "When...",
        "top": 6604,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Then...",
        "top": 6794,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "600",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Custom data",
        "top": 5912,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Domains",
        "top": 6068,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "15px",
    "lineHeight": "19.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "Issues with API responses",
        "top": 3530,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": null,
    "fontStack": "ui-monospace, SFMono-Regular, Menlo, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "23.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "code",
        "text": "/custom-commands",
        "top": 6463,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Inter",
    "fontStack": "Inter, \"SF Pro Display\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif, \"apple color emoji\", \"segoe ui emoji\", \"noto color emoji\", \"android emoji\", symbol",
    "weight": "400",
    "size": "14px",
    "lineHeight": "17px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "What's keeping you from switching to Fernand? We'll help you migrate for free 😊",
        "top": 865,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "Monaco",
    "fontStack": "Monaco, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "code",
        "text": "api.yourapp.com/admin",
        "top": 5872,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "600",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "EB",
        "top": 5845,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "Ask a question",
        "top": 10557,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "11.5px",
    "lineHeight": "11.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Send ⌘ ENTER",
        "top": 6906,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Inter",
    "fontStack": "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "500",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Pied Piper",
        "top": 10495,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 134,
    "contexts": [
      {
        "tag": "body",
        "text": "About usPricingLog inBook a demoStart for freeSep. 30Automatically triage new messages by intentAI t",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 32,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "Start for free",
        "top": 32,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F7FAFC",
    "alpha": 1,
    "cssValue": "rgb(247, 250, 252)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "EmailAdd help@yourapp.com and answer from a shared inbox. Email is on the free plan. Most free tools",
        "top": 1814,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Build your product.Not your support stack.Bug reports. Refund requests. The same questions again and",
        "top": 2198,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#CAF1FE",
    "alpha": 1,
    "cssValue": "rgb(202, 241, 254)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Sep. 30Automatically triage new messages by intentAI triageThe free customer support platform for Sa",
        "top": 2,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F7F8FC",
    "alpha": 1,
    "cssValue": "rgb(247, 248, 252)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "AI trainingAn AI that actually knows your productTrain it once on your docs, past replies, Q&As, and",
        "top": 4461,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#1A2035",
    "alpha": 1,
    "cssValue": "rgb(26, 32, 53)",
    "count": 199,
    "contexts": [
      {
        "tag": "span",
        "text": "Automatically triage new messages by intent",
        "top": 180,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "The free customer support platform for SaaS teams",
        "top": 226,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start for free R",
        "top": 462,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#717583",
    "alpha": 1,
    "cssValue": "rgb(113, 117, 131)",
    "count": 66,
    "contexts": [
      {
        "tag": "p",
        "text": "Respond on every channel, build a knowledge base, and put your AI Agent on the front line. Sync with",
        "top": 346,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 1934,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1935,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#151618",
    "alpha": 1,
    "cssValue": "rgb(21, 22, 24)",
    "count": 2,
    "contexts": [
      {
        "tag": "footer",
        "text": "ProductPricingDocumentationAPI referenceChangelogAboutIntegrationsAll integrationsStripeLinearGitHub",
        "top": 13960,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "ProductPricingDocumentationAPI referenceChangelogAboutIntegrationsAll integrationsStripeLinearGitHub",
        "top": 13960,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#E8EAF0",
    "alpha": 1,
    "cssValue": "rgb(232, 234, 240)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4751,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Pied PiperHey! How can we help?Ask a questionHow can we help?API docs referenceRead our guidesChange",
        "top": 10437,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F0F2F5",
    "alpha": 1,
    "cssValue": "rgb(240, 242, 245)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "A conversation isCreatedMessage is about...A bug or API issue+ Add a condition",
        "top": 6629,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 33,
    "contexts": [
      {
        "tag": "a",
        "text": "Pricing",
        "top": 14047,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.047058823529411764,
    "cssValue": "rgba(255, 255, 255, 0.047)",
    "count": 1,
    "contexts": [
      {
        "tag": "header",
        "text": "About usPricingLog inBook a demoStart for free",
        "top": 11,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#3D4259",
    "alpha": 1,
    "cssValue": "rgb(61, 66, 89)",
    "count": 21,
    "contexts": [
      {
        "tag": "kbd",
        "text": "R",
        "top": 476,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Watch a 2 minute demo",
        "top": 910,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 926,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#8C8F9A",
    "alpha": 1,
    "cssValue": "rgb(140, 143, 154)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "erlich@bachmanity.com",
        "top": 5865,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "erlich@bachmanity.com",
        "top": 5865,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#6F7B96",
    "alpha": 1,
    "cssValue": "rgb(111, 123, 150)",
    "count": 19,
    "contexts": [
      {
        "tag": "a",
        "text": "About us",
        "top": 28,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Install with AI",
        "top": 463,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 479,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#474A53",
    "alpha": 1,
    "cssValue": "rgb(71, 74, 83)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Created",
        "top": 6629,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#6E727F",
    "alpha": 1,
    "cssValue": "rgb(110, 114, 127)",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "A conversation is",
        "top": 6640,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 6875,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 6877,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(255, 255, 255, 0.7)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "from Are.na",
        "top": 1389,
        "property": "text"
      },
      {
        "tag": "li",
        "text": "OperatorWhat's keeping you from switching to Fernand? We'll help you migrate for free 😊",
        "top": 848,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#F3F4F8",
    "alpha": 1,
    "cssValue": "rgb(243, 244, 248)",
    "count": 9,
    "contexts": [
      {
        "tag": "kbd",
        "text": "R",
        "top": 6720,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Search for help",
        "top": 10694,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#16A34A",
    "alpha": 1,
    "cssValue": "rgb(22, 163, 74)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "BG",
        "top": 3611,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "200",
        "top": 5929,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "bachmanity.com",
        "top": 6098,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#9498A5",
    "alpha": 1,
    "cssValue": "rgb(148, 152, 165)",
    "count": 46,
    "contexts": [
      {
        "tag": "span",
        "text": "+ Add a condition",
        "top": 6738,
        "property": "text"
      },
      {
        "tag": "kbd",
        "text": "R",
        "top": 6720,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 6909,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#848894",
    "alpha": 1,
    "cssValue": "rgb(132, 136, 148)",
    "count": 4,
    "contexts": [
      {
        "tag": "strong",
        "text": "When...",
        "top": 6604,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Pied Piper",
        "top": 10495,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "How can we help?",
        "top": 10573,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#2C3145",
    "alpha": 1,
    "cssValue": "rgb(44, 49, 69)",
    "count": 15,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 10611,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 10614,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "API docs reference",
        "top": 10611,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#DC2626",
    "alpha": 1,
    "cssValue": "rgb(220, 38, 38)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "aviato.com",
        "top": 6143,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "aviato.com",
        "top": 6143,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#00A0FF",
    "alpha": 1,
    "cssValue": "rgb(0, 160, 255)",
    "count": 13,
    "contexts": [
      {
        "tag": "a",
        "text": "Start for free",
        "top": 32,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Sep. 30",
        "top": 177,
        "property": "text"
      },
      {
        "tag": "code",
        "text": "/custom-commands",
        "top": 6463,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#131F40",
    "alpha": 1,
    "cssValue": "rgb(19, 31, 64)",
    "count": 4,
    "contexts": [
      {
        "tag": "strong",
        "text": "Issues with API responses",
        "top": 3530,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Richard",
        "top": 3539,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.3411764705882353,
    "cssValue": "rgba(255, 255, 255, 0.34)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Tracked under #PP-1337",
        "top": 3589,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#4B5068",
    "alpha": 1,
    "cssValue": "rgb(75, 80, 104)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Assign to Gilfoyle ×",
        "top": 6870,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#F5F6FA",
    "alpha": 1,
    "cssValue": "rgb(245, 246, 250)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Assign to Gilfoyle ×",
        "top": 6870,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#F8F8FC",
    "alpha": 1,
    "cssValue": "rgb(248, 248, 252)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 11931,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 11931,
        "property": "::after-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 11968,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#131E40",
    "alpha": 1,
    "cssValue": "rgb(19, 30, 64)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "3",
        "top": 5933,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#E8E9F0",
    "alpha": 1,
    "cssValue": "rgb(232, 233, 240)",
    "count": 32,
    "contexts": [
      {
        "tag": "div",
        "text": "Created",
        "top": 6629,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Assign to Gilfoyle ×",
        "top": 6870,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#FFFFFF",
    "alpha": 0.7215686274509804,
    "cssValue": "rgba(255, 255, 255, 0.72)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Assign conversation to...",
        "top": 3487,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#F1F3F6",
    "alpha": 1,
    "cssValue": "rgb(241, 243, 246)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "When...A conversation isCreatedMessage is about...A bug or API issue+ Add a conditionThen...Assign t",
        "top": 6571,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#787F95",
    "alpha": 1,
    "cssValue": "rgb(120, 127, 149)",
    "count": 4,
    "contexts": [
      {
        "tag": "strong",
        "text": "Ticket flow",
        "top": 11944,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#000000",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(0, 0, 0, 0.08)",
    "count": 96,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1838,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#E4F5FF",
    "alpha": 1,
    "cssValue": "rgb(228, 245, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "POST",
        "top": 5869,
        "property": "background"
      },
      {
        "tag": "code",
        "text": "/custom-commands",
        "top": 6463,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#858BA6",
    "alpha": 1,
    "cssValue": "rgb(133, 139, 166)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 3597,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Tracked under #PP-1337",
        "top": 3599,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "#PP-1337",
        "top": 3597,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#2DBD33",
    "alpha": 1,
    "cssValue": "rgb(45, 189, 51)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 11931,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Normal",
        "top": 11961,
        "property": "::before-background"
      },
      {
        "tag": "li",
        "text": "",
        "top": 11978,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#38C576",
    "alpha": 1,
    "cssValue": "rgb(56, 197, 118)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Normal",
        "top": 11961,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(255, 255, 255, 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Fernand SAS",
        "top": 14196,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#F0F2F7",
    "alpha": 1,
    "cssValue": "rgb(240, 242, 247)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Send ⌘ ENTER",
        "top": 6906,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#6F7A96",
    "alpha": 1,
    "cssValue": "rgb(111, 122, 150)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 41,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#103A6B",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(18, 55, 105, 0.12)",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 462,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#EAECF8",
    "alpha": 1,
    "cssValue": "rgb(234, 236, 248)",
    "count": 15,
    "contexts": [
      {
        "tag": "li",
        "text": "Apps integrated3",
        "top": 5928,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "3",
        "top": 5933,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#3B82F6",
    "alpha": 1,
    "cssValue": "rgb(59, 130, 246)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "GB",
        "top": 3525,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#DBEAFE",
    "alpha": 1,
    "cssValue": "rgb(219, 234, 254)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "GB",
        "top": 3525,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#FFFFFF",
    "alpha": 0.25882352941176473,
    "cssValue": "rgba(255, 255, 255, 0.26)",
    "count": 4,
    "contexts": [
      {
        "tag": "li",
        "text": "OperatorWhat's keeping you from switching to Fernand? We'll help you migrate for free 😊",
        "top": 848,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#37B56F",
    "alpha": 1,
    "cssValue": "rgb(55, 181, 111)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "EB",
        "top": 5845,
        "property": "text"
      }
    ]
  }
]
```

### 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 spacing with significant whitespace between major sections, contributing to the 'calm' aesthetic.
- Corner style: Consistent use of rounded corners on buttons, cards, and product UI mockups.
- Radius: Large radii on UI mockups and smaller, but noticeable, radii on buttons and smaller cards.
- Borders: Subtle, light borders (e.g., color-8, color-35) used to define cards and form elements without adding visual noise.
- Buttons: Solid fill for primary actions, outline or subtle backgrounds for secondary actions, often with rounded corners.
- Content width: Centered content with a constrained maximum width to ensure readability, though background images/gradients often bleed to the edges.
- Density: Low density; the design prioritizes whitespace and clear separation of elements over packing information tightly.
- Evidence: Observation of layout structure in screenshots, consistent application of border-radius in UI elements, and distinct button variations.

## Sections

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

1. **Hero — Free SaaS Support Platform Hero** (Home)
   AI suggestion (98% confidence): Complete top-of-page hero with navigation, announcement pill, clear value proposition, dual CTAs, large product UI mockup, floral visual treatment, and a closing customer/founder trust strip.
   Capture: 1440×1468px; page bounds 0–1468px of 14377px; source section ID: `852b0014-5d71-4fcb-b308-79dd1fd06857`; image: https://media.designdetails.io/library/d15093cb7664fcf695e3186f455ccca0ad90c5ac4e9333e205505c96d534e1ba/section-manual-852b0014-5d71-4fcb-b308-79dd1fd06857-1792188738927.webp
   SECTION.md v3.2: `852b0014-5d71-4fcb-b308-79dd1fd06857` (deterministic evidence; editorial review pending)
2. **Feature Grid — Support connects with team and product strategy** (Home)
   AI suggestion (97% confidence): Complete three-card feature grid with its own eyebrow, heading, product visuals, descriptions, and links; the full beginning and ending are visible.
   Capture: 1440×777px; page bounds 3185–3962px of 14377px; source section ID: `757e3225-068b-483f-8092-87415d706ecb`; image: https://media.designdetails.io/library/c11b8fa7cbb21c9c7e7d96340d0704970b07ff083e5a58cacc12d76ebe5b0fd6/757e3225-068b-483f-8092-87415d706ecb.webp
   SECTION.md v3.2: `757e3225-068b-483f-8092-87415d706ecb` (deterministic evidence; editorial review pending)
3. **Testimonial Card — Jack Friks customer quote** (Home)
   AI suggestion (94% confidence): Self-contained centered testimonial with a substantial quote, customer portrait, name, and founder attribution, clearly separated from adjacent sections.
   Capture: 1440×351px; page bounds 4034–4385px of 14377px; source section ID: `09fe5598-fd56-418c-8e4a-96660282f963`; image: https://media.designdetails.io/library/1ed1698a0d028c8e5463bf32d60dea27fa95e40c698f6f018d65861cfa18fc2a/09fe5598-fd56-418c-8e4a-96660282f963.webp
   SECTION.md v3.2: `09fe5598-fd56-418c-8e4a-96660282f963` (deterministic evidence; editorial review pending)
4. **Feature Grid — Custom Data and Automation Feature Grid** (Home)
   AI suggestion (90% confidence): Complete, self-contained product capability group combining a wide API data feature with two coordinated automation cards, each with supporting copy, links, and interface visuals.
   Capture: 1440×1290px; page bounds 5815–7105px of 14377px; source section ID: `cee78696-de34-4460-9e87-64480623696d`; image: https://media.designdetails.io/library/2a4c3af69917f4c4dad9b55a396e3244a6b2136b399f6121deedffa342aee7f6/cee78696-de34-4460-9e87-64480623696d.webp
   SECTION.md v3.2: `cee78696-de34-4460-9e87-64480623696d` (deterministic evidence; editorial review pending)
5. **Feature Grid — Built-in Knowledge Base Feature Grid** (Home)
   AI suggestion (97% confidence): Complete product-feature section with a labeled heading, explanatory copy, large documentation editor visual, and a full six-card capability grid.
   Capture: 1440×1326px; page bounds 8334–9660px of 14377px; source section ID: `cb0cf370-6de7-43e2-ad73-cb8bf48797d3`; image: https://media.designdetails.io/library/ae82e05068c9eb3fe1a2a5805340b5aad8f2f6067b449aa8e6cffc14c3182357/cb0cf370-6de7-43e2-ad73-cb8bf48797d3.webp
   SECTION.md v3.2: `cb0cf370-6de7-43e2-ad73-cb8bf48797d3` (deterministic evidence; editorial review pending)
6. **Testimonial Card — Thomas Sanlis Customer Testimonial** (Home)
   AI suggestion (94% confidence): Self-contained customer quote with portrait, name, and founder attribution, clearly separated from the surrounding product sections.
   Capture: 1440×357px; page bounds 9771–10128px of 14377px; source section ID: `01a9d009-a420-4561-80ed-e3276dcbd4c3`; image: https://media.designdetails.io/library/48bca8f674c6bb48b5159bc671a2c89e52237b6b746f4eed9d80a4bf13ef8061/01a9d009-a420-4561-80ed-e3276dcbd4c3.webp
   SECTION.md v3.2: `01a9d009-a420-4561-80ed-e3276dcbd4c3` (deterministic evidence; editorial review pending)
7. **Feature Grid — Calm support workflow feature grid** (Home)
   AI suggestion (97% confidence): Complete, self-contained section with a clear headline, explanatory copy, and a distinctive bento grid illustrating focus, inbox progress, shortcuts, command search, and speed.
   Capture: 1440×1233px; page bounds 11642–12875px of 14377px; source section ID: `2836174b-15ff-4ddb-8763-0eb0a6d6e6fb`; image: https://media.designdetails.io/library/2efeb9c83b19d071ef58b919a7ad02bc4b63421f87cd7f30afcf3560c40ce00e/2836174b-15ff-4ddb-8763-0eb0a6d6e6fb.webp
   SECTION.md v3.2: `2836174b-15ff-4ddb-8763-0eb0a6d6e6fb` (deterministic evidence; editorial review pending)
8. **CTA — Start Free Scenic CTA** (Home)
   AI suggestion (97% confidence): Complete conversion section with a strong headline, supporting copy, two actions, an installation option, and a distinctive full-width scenic illustration.
   Capture: 1440×895px; page bounds 13069–13964px of 14377px; source section ID: `7abc9ce5-0d5b-41c2-9c75-9a12af2d208f`; image: https://media.designdetails.io/library/91a18a6f3afe0c30f1dd1ec7f73f15b546f5b58de1b96990c9f80d2aa4e0093e/7abc9ce5-0d5b-41c2-9c75-9a12af2d208f.webp
   SECTION.md v3.2: `7abc9ce5-0d5b-41c2-9c75-9a12af2d208f` (deterministic evidence; editorial review pending)
9. **Footer — Multi-Column Product Footer** (Home)
   AI suggestion (98% confidence): Complete dark footer containing organized Product, Integrations, Alternatives, Legal, and company-support link groups through the page bottom.
   Capture: 1440×413px; page bounds 13964–14377px of 14377px; source section ID: `129d2a5e-c62e-4c29-ae84-3db00ab97950`; image: https://media.designdetails.io/library/6ec6162c3cb3ec0cb7291d8d99c763c3e0cbc9e19ce363e19876bc52884651cf/129d2a5e-c62e-4c29-ae84-3db00ab97950.webp
   SECTION.md v3.2: `129d2a5e-c62e-4c29-ae84-3db00ab97950` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/f2fdf0fc6f6a7e169dcb1d5aff79968f8d7e834b93b815eb600ffa3fbfc93e33/desktop_full-91cd61de-2026-10-16T21-18-03-821Z.webp
- Mobile screenshot: https://media.designdetails.io/library/dbe612447d39fa3e60a488459cecf73c6f08ce4395b884ea75ab7eea4fb3d937/mobile_full-91cd61de-2026-10-16T21-18-50-965Z.jpg
- Open Graph image: https://media.designdetails.io/library/824959b25801bc0d0dabf85fc03c66f6218976a171e07f7075064895cc83e116/og_image-91cd61de-2026-10-16T21-18-12-431Z.webp
- Full-page video: https://media.designdetails.io/library/275c494dc8df41854fedab0e93501022cab381faa3b3f50491a496d21b892983/motion-1792187242088.mp4
- Video poster: https://media.designdetails.io/library/ed18ffc45b37d7800cf7d183c4288b97d8f5388b52ab955d3fdfb5035800bd04/motion-poster-1792187242088.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
- Product UI
- Feature Card
- Feature Collection
- Testimonial Card
- Logo Strip
- Floating Product Card
- Primary Button
- Ghost Button
- Outline Button
- Footer
- Tag
- Mockup Driven Storytelling
- Sticky CTA Widget

## Quality rubric

Overall: 52.6/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Fernand is a clean, systematically organized SaaS marketing site whose strongest asset is its recurring illustrated-courier/landscape imagery and tightly matched product mockups, but its typography, color, and motion all lean on safe, repeated SaaS conventions rather than a fully distinctive system, keeping it in the competent range.

- Typography (15%): 52 — A single, well-executed Inter system spans the entire 14k+px page with clear, consistent sizing for display (38px/48px), heading (30px/38px) and body (16px/26px) roles, plus small-caps labels (9-13px, letter-spacing) for tags. This is legible and systematic but relies entirely on default-weight Inter with size as the only real differentiator; there is no typographic personality, custom display face, or notable contrast beyond scale.
- Color (10%): 50 — The palette is a conventional SaaS formula: white canvas (#FFFFFF), near-black text (#1A2035), muted grey body text (#717583), a single blue accent (#00A0FF) for primary actions, and a near-black footer (#151618), with soft pastel gradient section backgrounds (#CAF1FE, #F7F8FC) for rhythm. It is coherent and inoffensive but not distinctive or risk-taking.
- Layout (20%): 58 — The page is organized into a long, repeating sequence of mockup+copy sections, feature-card grids, testimonial blocks, and a dark footer grid, all built on consistent card radii, borders (rgba(0,0,0,0.08)), and generous whitespace. The system is internally consistent across many sections, but the pattern itself (headline + paragraph + screenshot, feature-card grid, logo strip, testimonial, repeat) is a very common SaaS marketing template rather than a bespoke composition.
- Motion (20%): 47 — Gemini's observation describes one dominant entrance pattern (fade-in + translate-up on scroll) applied uniformly to nearly every section, plus two background parallax moments and a single toggle interaction (light/dark widget demo). This is a coherent, consistently-applied system but it is the most generic scroll-reveal idiom available and shows no evidence of distinctive choreography, staggering, or interaction depth beyond the one toggle.
- Originality (25%): 50 — The recurring illustrated postal-courier character set against painterly landscape photography (flower fields, mountains, sunset) is a genuinely distinctive brand device rarely seen in B2B SaaS marketing, and the persistent floating chat-widget CTA doubles as both pitch and live demo. However, the majority of the page's structural vocabulary — feature-card grids, logo strips, testimonial quote blocks, dark footer — are standard, interchangeable SaaS conventions, so originality is concentrated in imagery/mood rather than distributed across the system's structure and interaction model.
- Content (10%): 63 — Marketing copy is tightly paired with detailed, feature-specific UI mockups (API response panels, rules-builder, custom-commands snippet, widget configurator) that closely illustrate the exact claim being made in the adjacent paragraph, giving the content real demonstrative weight rather than generic stock 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
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A real support inbox screenshot sits over a soft floral photo, so the product is shown doing actual work rather than floating in an abstract mockup. Short text blocks with small icons break the long page into easy chapters, while recurring illustrated figures in nature scenes give a dense SaaS tool a calmer, more human mood.

## 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.