# Town — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://town.com/
Captured: 2026-10-20
CSS measured: 2026-10-20T05:54:32.901Z at 1440×1000 — https://www.town.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

Town is a marketing website for an AI work assistant. The design utilizes a minimal, predominantly black-and-white visual language offset by playful, hand-drawn character illustrations. Large, impactful slab-serif typography commands attention in headings, while a clean sans-serif handles body and UI text. The page makes extensive use of embedded product UI mockups, often presented within clean, subtly bordered cards. The layout features generous whitespace, creating a structured yet airy rhythm as users scroll through feature explanations, testimonials, and integration highlights.

## Classification

- Industry: ai
- Site type: Landing, Store
- Business model: E-commerce, Shopping, Agency
- Styles: minimal, playful, hand-drawn, typographic, bold, character-driven
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: slab — weight 84; size 80px; line-height 83px; tracking -1.6px; Regular (95% role confidence, computed values)
- Heading: slab — weight 85; size 40px; line-height 46px; tracking -0.4px; Regular (90% role confidence, computed values)
- Body: sans — weight 400; size 16px; line-height 24px; tracking 0.3px; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #FDFDFC: color-1: computed rgb(253, 253, 252); AI role: The primary off-white background color used across the majority of the page sections. (95% role confidence, computed values)
- Text — text #1C1B1B: color-2: computed rgb(28, 27, 27); AI role: The near-black used for primary text, headings, and solid button backgrounds. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: Pure white used for the background of feature cards and product UI panels sitting on top of the canvas. (90% role confidence, computed values)
- Accent — accent #FCC6F5: color-14: computed rgb(252, 198, 245); AI role: A bright pink used specifically to highlight the 'unusually helpful' text in the hero. (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": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 55,
    "contexts": [
      {
        "tag": "p",
        "text": "“Town completely eliminated the step of teaching it how I work.”",
        "top": 3046,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Gmail",
        "top": 3391,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Slack Persona",
        "top": 3391,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "Nothing",
        "top": 2030,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "you",
        "top": 2030,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "connect",
        "top": 2030,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "85",
    "size": "40px",
    "lineHeight": "46px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Built to keep your",
        "top": 5699,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "business safe",
        "top": 5745,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Meet your",
        "top": 6773,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "84",
    "size": "80px",
    "lineHeight": "83px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h1",
        "text": "Learns how you work, then gets to work.",
        "top": 130,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "you",
        "top": 203,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "work,",
        "top": 203,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "525",
    "size": "20px",
    "lineHeight": "29px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Jess McKinney",
        "top": 2489,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "405",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 71,
    "contexts": [
      {
        "tag": "p",
        "text": "Recent updates",
        "top": 2530,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Goals",
        "top": 2565,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Projects",
        "top": 2600,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "405",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 60,
    "contexts": [
      {
        "tag": "button",
        "text": "Business Owner",
        "top": 2418,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Recruiting",
        "top": 2418,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Sales",
        "top": 2418,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "27.2px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 26,
    "contexts": [
      {
        "tag": "p",
        "text": "Added the Park Slope kitchen remodel to Projects after Friday’s signed proposal from Francis Choi.",
        "top": 2592,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Projects",
        "top": 2596,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Francis Choi",
        "top": 2624,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "525",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Overview",
        "top": 2621,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "How she works",
        "top": 2961,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Goals",
        "top": 3247,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "410",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Send a birthday or work anniversary annoucement",
        "top": 5291,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sends a weekly financial summary per accoun",
        "top": 5364,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Summarizes the interactions per client every",
        "top": 5437,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "100",
    "size": "18px",
    "lineHeight": "28.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "The unusually helpful AI work assistant.",
        "top": 515,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "unusually helpful",
        "top": 515,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Your Townie does the work your way from the very first ask. And the longer you work together, the mo",
        "top": 2329,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "84",
    "size": "80px",
    "lineHeight": "72px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Learns how",
        "top": 131,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "then gets",
        "top": 840,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "to work.",
        "top": 912,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "405",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Town raises $108M to help your team operate at the speed of AI.",
        "top": 8,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Read more →",
        "top": 8,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Read more",
        "top": 9,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "525",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Overview",
        "top": 2495,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Recent updates",
        "top": 2559,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "95",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Overview",
        "top": 5061,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "100",
    "size": "18px",
    "lineHeight": "27.9px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "See how Townies like Bo can work in your favorite tools and any MCP.",
        "top": 3200,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 40,
    "contexts": [
      {
        "tag": "span",
        "text": "Apex",
        "top": 8223,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Basin",
        "top": 8248,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Bean",
        "top": 8272,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "87",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "Your",
        "top": 1749,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "work",
        "top": 1749,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is",
        "top": 1749,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "handwriting",
    "fontStack": "handwriting, \"handwriting Fallback\", cursive",
    "weight": "405",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "span",
        "text": "sunny",
        "top": 666,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "sunny@town.com",
        "top": 665,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "bo",
        "top": 6732,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Wiki",
        "top": 2195,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Routines",
        "top": 3702,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Town Teams",
        "top": 4639,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "450",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Features",
        "top": 69,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Solutions",
        "top": 69,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Routines",
        "top": 69,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "525",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "DL",
        "top": 5166,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "JD",
        "top": 5166,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SM",
        "top": 5166,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "450",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Browse all integrations",
        "top": 3553,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Browse all Routines",
        "top": 4490,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Security Portal",
        "top": 6272,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "102",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Bo",
        "top": 2892,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Plum",
        "top": 3789,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Wisp",
        "top": 5264,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "405",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Ask",
        "top": 904,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sunny",
        "top": 904,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "anything",
        "top": 904,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": null,
    "fontStack": "sans-serif",
    "weight": "600",
    "size": "6px",
    "lineHeight": "8.7px",
    "letterSpacing": "0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "text",
        "text": "AICPA",
        "top": 6184,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "SOC",
        "top": 6197,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "sans",
    "fontStack": "sans, \"sans Fallback\", system-ui, arial, sans-serif",
    "weight": "450",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Meet your Townie",
        "top": 569,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "slab",
    "fontStack": "slab, \"slab Fallback\", Georgia, serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "DL",
        "top": 4163,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FDFDFC",
    "alpha": 1,
    "cssValue": "rgb(253, 253, 252)",
    "count": 57,
    "contexts": [
      {
        "tag": "body",
        "text": "Town raises $108M to help your team operate at the speed of AI.Read more →FeaturesSolutionsRoutinesI",
        "top": 37,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Town raises $108M to help your team operate at the speed of AI.Read more →FeaturesSolutionsRoutinesI",
        "top": 37,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "Learns how you work, then gets to work.Learns howyou work,Learns howyouwork,The unusually helpful AI",
        "top": 37,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1C1B1B",
    "alpha": 1,
    "cssValue": "rgb(28, 27, 27)",
    "count": 304,
    "contexts": [
      {
        "tag": "div",
        "text": "Town raises $108M to help your team operate at the speed of AI.Read more →FeaturesSolutionsRoutinesI",
        "top": 37,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 74,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Features",
        "top": 69,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 113,
    "contexts": [
      {
        "tag": "span",
        "text": "Sign in",
        "top": 69,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Gmail“A client asked to push Friday’s kickoff. I’ve drafted a reply offering two open times from you",
        "top": 3314,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Google Workspace",
        "top": 3535,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F7F8F4",
    "alpha": 1,
    "cssValue": "rgb(247, 248, 244)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1239,
        "property": "background"
      },
      {
        "tag": "aside",
        "text": "Rivex Corp.OverviewMembersTeam RoutinesSkillsIntegrationsSettings",
        "top": 5029,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#1C1C1C",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.223243 0.00149059 0.000464827 / 0.501961)",
    "count": 108,
    "contexts": [
      {
        "tag": "span",
        "text": "Your",
        "top": 1749,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2562,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2563,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FFFFFF",
    "alpha": 0.9490196078431372,
    "cssValue": "rgba(255, 255, 255, 0.95)",
    "count": 75,
    "contexts": [
      {
        "tag": "p",
        "text": "Town raises $108M to help your team operate at the speed of AI.",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Read more →",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Read more",
        "top": 9,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(255, 255, 255, 0.7)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Town's security controls are independently audited and meet enterprise-grade standards.",
        "top": 6266,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1D1D1D",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(28, 27, 27, 0.1)",
    "count": 239,
    "contexts": [
      {
        "tag": "div",
        "text": "OverviewRecent updatesGoalsProjectsProfilePeopleOverviewPagesJess McKinneyRecent updatesView all upd",
        "top": 2464,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "Recent updatesView all updatesAdded the Park Slope kitchen remodel to Projects after Friday’s signed",
        "top": 2542,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 4247,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#C4E2FB",
    "alpha": 1,
    "cssValue": "rgb(196, 226, 251)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5121,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#2A2A2A",
    "alpha": 0.023529411764705882,
    "cssValue": "rgba(28, 27, 27, 0.024)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Overview",
        "top": 2489,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Recent updatesView all updatesAdded the Park Slope kitchen remodel to Projects after Friday’s signed",
        "top": 2542,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#1375A0",
    "alpha": 1,
    "cssValue": "rgb(19, 117, 160)",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Projects",
        "top": 2596,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#1C1B1B",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(28, 27, 27, 0.7)",
    "count": 29,
    "contexts": [
      {
        "tag": "span",
        "text": "Every",
        "top": 4358,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8002,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 961,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#BC28A4",
    "alpha": 1,
    "cssValue": "rgb(188, 40, 164)",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "unusually helpful",
        "top": 515,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Renegotiate Snowflake contract renewalClaus",
        "top": 938,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 945,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FCC6F5",
    "alpha": 1,
    "cssValue": "rgb(252, 198, 245)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "unusually helpful",
        "top": 515,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#DDE8F1",
    "alpha": 1,
    "cssValue": "rgb(221, 232, 241)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "DL",
        "top": 4151,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#5389E2",
    "alpha": 1,
    "cssValue": "rgb(83, 137, 226)",
    "count": 16,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 4261,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 4257,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4257,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#141414",
    "alpha": 0.050980392156862744,
    "cssValue": "color(srgb 0.109804 0.105882 0.105882 / 0.05)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3598,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#A5380B",
    "alpha": 1,
    "cssValue": "rgb(165, 56, 11)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "bud",
        "top": 6744,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "article",
        "text": "AICPASOCSOC II Type 2 compliantTown's security controls are independently audited and meet enterpris",
        "top": 6154,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#ECECE9",
    "alpha": 1,
    "cssValue": "rgb(236, 236, 233)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Describe your ownEvery Friday at 4pm, scan my open PRs and draft a team status update.Build it",
        "top": 4230,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#FFFFFF",
    "alpha": 0.18823529411764706,
    "cssValue": "color(srgb 1 1 1 / 0.189804)",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Security Portal",
        "top": 6259,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#1E1919",
    "alpha": 0.2,
    "cssValue": "rgba(28, 27, 27, 0.2)",
    "count": 12,
    "contexts": [
      {
        "tag": "button",
        "text": "Wiki",
        "top": 2182,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#E0ECCD",
    "alpha": 1,
    "cssValue": "rgb(224, 236, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "JD",
        "top": 5157,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#F1EECD",
    "alpha": 1,
    "cssValue": "rgb(241, 238, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "SM",
        "top": 5157,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#F1DDE6",
    "alpha": 1,
    "cssValue": "rgb(241, 221, 230)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "RK",
        "top": 5157,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#E6E8E0",
    "alpha": 1,
    "cssValue": "rgb(230, 232, 224)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "DI",
        "top": 5157,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#CFE4E6",
    "alpha": 1,
    "cssValue": "rgb(207, 228, 230)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "AR",
        "top": 5157,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#CFC7EC",
    "alpha": 1,
    "cssValue": "rgb(207, 199, 236)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "TV",
        "top": 5157,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#EB4819",
    "alpha": 1,
    "cssValue": "rgb(235, 72, 25)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5273,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#7FBC5D",
    "alpha": 1,
    "cssValue": "rgb(127, 188, 93)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5346,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#5F5DBC",
    "alpha": 1,
    "cssValue": "rgb(95, 93, 188)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5419,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#4E96CB",
    "alpha": 1,
    "cssValue": "rgb(78, 150, 203)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5273,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#B86D3F",
    "alpha": 1,
    "cssValue": "rgb(184, 109, 63)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5346,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#8E72D6",
    "alpha": 1,
    "cssValue": "rgb(142, 114, 214)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5419,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#FDDCF8",
    "alpha": 1,
    "cssValue": "rgb(253, 220, 248)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 945,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#B1120B",
    "alpha": 1,
    "cssValue": "rgb(177, 18, 11)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "claus",
        "top": 6715,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#43320B",
    "alpha": 1,
    "cssValue": "rgb(67, 50, 11)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "doug",
        "top": 6704,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#B14A76",
    "alpha": 1,
    "cssValue": "rgb(177, 74, 118)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "plum",
        "top": 6744,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#2322B8",
    "alpha": 1,
    "cssValue": "rgb(35, 34, 184)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "cliff",
        "top": 6744,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#1335B1",
    "alpha": 1,
    "cssValue": "rgb(19, 53, 177)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "snap",
        "top": 6708,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#2665B8",
    "alpha": 1,
    "cssValue": "rgb(38, 101, 184)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "flip",
        "top": 6761,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#2D14AC",
    "alpha": 1,
    "cssValue": "rgb(45, 20, 172)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "min",
        "top": 6715,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#50110C",
    "alpha": 1,
    "cssValue": "rgb(80, 17, 12)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "bo",
        "top": 6732,
        "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 vertical macro-spacing between sections separates concepts, while micro-spacing within UI mockups is tight and utility-driven.
- Corner style: A mix of sharp right angles for major layout blocks and subtle rounded corners for interactive elements and cards.
- Radius: Small border radii (approximately 4px-8px) applied to buttons, integration cards, and internal panels of the product UI mockups.
- Borders: Extensive use of thin, 1px solid borders in a faint transparent gray to delineate cards and mock software interface panes without adding visual weight.
- Buttons: Primary buttons are solid dark (color-2) with light text; secondary/filter buttons are transparent with thin borders and dark text.
- Content width: Content is generally constrained to a centered maximum width (roughly 1200px), with some background elements extending full bleed.
- Density: The overall page density is loose to prioritize readability and art direction, but the embedded software mockups are dense to accurately simulate a complex application.
- Evidence: Observed via CSS facts (borders using color-8), DOM structure showing distinct section padding, and visual evaluation of the provided screenshots.

## Sections

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

1. **Features — Helpful from hello** (Home)
   Reusable feature composition from Home, organized around “Helpful from hello”.
   Capture: 1440×1490px; page bounds 2166–3656px of 9267px; source section ID: `1e107abe-32c6-4191-a93c-32548192ca77`; image: https://media.designdetails.io/library/aa8c7bc9cca8db9fdaac05fa699e7478828ac489538714a36a6a574c20fc7d47/section_crop-1e107abe-2026-10-20T05-54-44-322Z.webp
   SECTION.md v3.2: `1e107abe-32c6-4191-a93c-32548192ca77` (deterministic evidence; editorial review pending)
2. **Features — Collaborative with your team, and each other** (Home)
   Reusable feature composition from Home, organized around “Collaborative with your team, and each other”.
   Capture: 1440×1017px; page bounds 4610–5627px of 9267px; source section ID: `7a863dcf-9dfd-4950-aad3-845eb0c96f68`; image: https://media.designdetails.io/library/f102ddfe092ad12308807fdf37f2a51916a84818b273aeca5069c05e14ba6b6f/section_crop-7a863dcf-2026-10-20T05-54-46-488Z.webp
   SECTION.md v3.2: `7a863dcf-9dfd-4950-aad3-845eb0c96f68` (deterministic evidence; editorial review pending)
3. **Features — Meet your** (Home)
   Reusable feature composition from Home, organized around “Meet your”.
   Capture: 1440×415px; page bounds 6625–7040px of 9267px; source section ID: `f95962df-18fa-409d-b11c-efe35459524a`; image: https://media.designdetails.io/library/e3b629707b95d3eb0b5759fa9b6dc426b7201cadea3c33b2e380eeeb7c628a64/section_crop-f95962df-2026-10-20T05-54-48-580Z.webp
   SECTION.md v3.2: `f95962df-18fa-409d-b11c-efe35459524a` (deterministic evidence; editorial review pending)
4. **Footer — Town Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Town Footer”.
   Capture: 1440×1017px; page bounds 7040–8057px of 9267px; source section ID: `47780433-5d62-4aef-8b37-c5465e4b8ba1`; image: https://media.designdetails.io/library/b562fb99a7bb18506b4087977dec6deed3cac00d8c9c3f7fb81650c0eb968f2f/section_crop-47780433-2026-10-20T05-54-49-561Z.webp
   SECTION.md v3.2: `47780433-5d62-4aef-8b37-c5465e4b8ba1` (deterministic evidence; editorial review pending)
5. **Hero — Learns How You Work Hero** (Home)
   AI suggestion (96% confidence): Complete, distinctive hero with oversized headline, portrait, assistant positioning, CTA, mascot, and example prompt interaction.
   Capture: 1440×951px; page bounds 102–1053px of 9267px; source section ID: `0b323439-0cc7-42ac-b47e-4a31937a7bf3`; image: https://media.designdetails.io/library/e40a53159d8946699bc2deec58032244e42336c37b3a3498b87dfe6ab498e4d2/0b323439-0cc7-42ac-b47e-4a31937a7bf3.webp
   SECTION.md v3.2: `0b323439-0cc7-42ac-b47e-4a31937a7bf3` (deterministic evidence; editorial review pending)
6. **Features — Works Across Your Tools** (Home)
   AI suggestion (90% confidence): Self-contained feature explanation pairing a large animated-style visual with clear copy about working across inboxes, calendars, chats, and apps, plus a security note.
   Capture: 1440×1002px; page bounds 1098–2100px of 9267px; source section ID: `26a99275-f932-45d1-9746-9540b438d8be`; image: https://media.designdetails.io/library/81c2af11fd36662972883c7e5d24b2df469db732839d225510ef24de477339eb/26a99275-f932-45d1-9746-9540b438d8be.webp
   SECTION.md v3.2: `26a99275-f932-45d1-9746-9540b438d8be` (deterministic evidence; editorial review pending)
7. **Feature Grid — Hand off repeat work with Routines** (Home)
   AI suggestion (97% confidence): Complete, self-contained routines showcase with a strong headline, supporting illustration and copy, category filters, reusable routine cards, and clear browse/build actions.
   Capture: 1440×924px; page bounds 3674–4598px of 9267px; source section ID: `88cec89a-109b-4cca-9002-22b76dfd77d8`; image: https://media.designdetails.io/library/7835fd8e2f15c45aa5b1be5712fac8d703f8561458491d7258c184c14a4e579f/88cec89a-109b-4cca-9002-22b76dfd77d8.webp
   SECTION.md v3.2: `88cec89a-109b-4cca-9002-22b76dfd77d8` (deterministic evidence; editorial review pending)
8. **Safety — Townie Data Safety and Security** (Home)
   AI suggestion (95% confidence): Complete dark trust section with a privacy statement, security links, and four clearly bounded assurances covering compliance, consent, model training, and encryption.
   Capture: 1440×990px; page bounds 5638–6628px of 9267px; source section ID: `52d6e942-74a1-402c-9958-c55a29d5f61b`; image: https://media.designdetails.io/library/c0acbab2967c81941c3d86413a1eeb2fd859863bb177866352a02ab3e61170f1/52d6e942-74a1-402c-9958-c55a29d5f61b.webp
   SECTION.md v3.2: `52d6e942-74a1-402c-9958-c55a29d5f61b` (deterministic evidence; editorial review pending)
9. **Other — Thank You to the Townies Credits** (Home)
   AI-proposed category: credits
AI suggestion (94% confidence): A complete, self-contained acknowledgments section with an introductory message, centered name roll, branded seal, and character illustration, clearly bounded by the dark background through the page bottom.
   Capture: 1440×1209px; page bounds 8058–9267px of 9267px; source section ID: `80a82429-0596-4a81-b9c4-86f36519b960`; image: https://media.designdetails.io/library/8f05a7abf467baffca141b189412192a546090dc78eb2db98feb5187d604ffd6/80a82429-0596-4a81-b9c4-86f36519b960.webp
   SECTION.md v3.2: `80a82429-0596-4a81-b9c4-86f36519b960` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/9a88c2f8300776352e44ad5d0677a6e694992adf65504023649856def8cb69e8/desktop_full-fbb96845-2026-10-20T05-54-32-933Z.webp
- Mobile screenshot: https://media.designdetails.io/library/4a02a3609188a270c58eead004c4d7a3db761f2b889a0308fe9980f9686a2b04/mobile_full-fbb96845-2026-10-20T05-55-31-360Z.webp
- Open Graph image: https://media.designdetails.io/library/75578b3bf38243c08bb34df9d68c736b993c33f7bfec88b78971dd37030dd5e9/og_image-fbb96845-2026-10-20T05-54-41-258Z.webp
- Full-page video: https://media.designdetails.io/library/b9265772c2c80c8287e50153b940d405c88bfd01f617f457abac3b5513b7d1f6/motion-1792478191419.mp4
- Video poster: https://media.designdetails.io/library/db0e455a17ff66d1a22980c08ff39af9734d404437e4196563398669f7a480fb/motion-poster-1792478191419.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

- Announcement Bar
- Navigation Bar
- Hero
- Product UI
- Testimonial Card
- Feature Card
- Primary Button
- Outline Button
- Video Frame
- Footer
- Animated Text Highlight
- Filterable Grids

## Quality rubric

Overall: 56.55/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Town's marketing site is a polished, well-organized execution of a familiar SaaS template, elevated modestly by a consistent slab-serif/sans typographic system and a recurring illustrated-mascot device that gives the brand some personality. Layout rhythm, card systems, and content integration (specific personas, realistic UI copy) are handled competently and coherently across many sections. However, color is used sparingly as essentially a single accent moment, motion relies on standard scroll-reveal and autoplay patterns rather than distinctive choreography, and the overall section architecture mirrors widely-seen SaaS conventions. The mascot concept is a genuine differentiator but functions decoratively rather than structurally, keeping the overall effect competent and pleasant rather than a landmark or highly original design statement.

- Typography (15%): 62 — A clear two-family system (slab serif for display/headings, sans for body/UI) is applied with consistent scale steps (80/40/32/20/18/16/14px) and controlled negative letter-spacing on large sizes. Fractional font-weights (e.g. 525, 405, 450) suggest deliberate variable-font tuning rather than default stacks. The handwriting accent for character names (Sunny, Bo, Plum) is a secondary device layered in sparingly for brand voice. Execution is clean and legible, but the type choices themselves (slab serif headline + neutral grotesque body) are a common SaaS pairing, not a distinctive voice.
- Color (10%): 55 — The palette is disciplined: near-black text/buttons (#1C1B1B) on an off-white canvas (#FDFDFC) with white card surfaces, plus a single saturated pink (#FCC6F5/#BC28A4) used to highlight the value proposition phrase. Functional micro-palettes (avatar initials, integration icon colors, character name colors in the footer) add variety without breaking the dominant mono scheme. This is a safe, legible, well-controlled restraint-based palette, but the accent is used in essentially one moment (the hero highlight) rather than as a recurring, purposeful system, limiting color's contribution to brand distinctiveness.
- Layout (20%): 64 — The page demonstrates a consistent structural grammar across many distinct section types: hero with floating illustration, embedded video reveal, testimonial-plus-UI-mockup combo, filterable integration/routine card grids, a sidebar-and-detail team panel, a dark security-stats grid, and a footer with a long vertical mascot list. Card borders (color-8, ~1px at 10% opacity), consistent corner radii (4–8px), and a centered ~1200px content width are reused throughout, giving the scroll a coherent rhythm rather than ad hoc sections. However, the individual section templates (feature-card grid, tabbed showcase, testimonial card) are conventional SaaS layout patterns rather than a structurally novel arrangement.
- Motion (20%): 56 — Multiple distinct authored motion moments are observable across the scroll: a looping text-highlight animation, a scroll-triggered video reveal with slight scale change, auto-cycling tabbed content with moving underline, illustration slide-up/fade-ins tied to scroll position, and a hero mascot swap on scroll-back. This is a reasonably systematic application of motion as a storytelling device rather than a single hero effect, but the techniques themselves (crossfade, slide-up-fade, autoplay video) are standard scroll-reveal idioms, and no evidence supports claims about easing quality, frame smoothness, or interaction responsiveness.
- Originality (25%): 45 — The overall page skeleton — announcement bar, hero with CTA and product screenshot, video explainer, testimonial-plus-feature-card sections, filterable integration grid, security-compliance panel, footer — is a highly conventional SaaS marketing template. The one genuinely distinguishing idea is the named, illustrated 'Townie' mascot roster (Sunny, Bo, Plum, Wisp, Cliff, Flip, etc.) woven through both UI mockups and copy, culminating in a long credit-style list of every mascot name in the footer. This is a clear, consistent brand device, but it is a single idea layered onto an otherwise template-driven structure rather than several interlocking, hard-to-substitute design decisions.
- Content (10%): 65 — Illustrations, UI mockups, and copy are tightly interwoven rather than decorative afterthoughts: the 'Jess McKinney' persona panel, her specific workflow narrative, and the Bo mascot illustration beside it all reinforce the same story; integration cards pair real product quotes with icon logos; the security section pairs compliance badges with specific audit claims. This produces a believable, concrete narrative rather than generic marketing filler.

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 giant serif headline splits around a photo and a hand drawn star mascot, giving a dry software product a storybook feel. Pink highlight marker, cream whimsical illustrations of a finger on a keyboard, and dark bands between sections pace the long scroll into clear chapters so product proof, team views, and security sit apart and easy to scan.

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