# Localcan — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.localcan.com/
Captured: 2026-10-07
CSS measured: 2026-10-07T06:29:51.442Z at 1440×1000 — https://www.localcan.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

Localcan is a developer-focused tool with a landing page that employs a contrasting dark and light color scheme to differentiate content areas. The design relies heavily on a technical aesthetic, utilizing monospace fonts for headings, code snippets, and UI details, paired with a clean sans-serif for body copy. Layouts feature structured grids, rounded corner cards, and interactive terminal/UI mockups to visually communicate functionality.

## Classification

- Industry: technology
- Site type: Landing, Blog
- Business model: AI, Software
- Styles: typographic, minimal, geometric, terminal-inspired, developer-centric
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: cascadiaMono — weight 350; size 50px; line-height 50px; tracking -2.5px; Regular (95% role confidence, computed values)
- Heading: inter — weight 600; size 52px; line-height 52px; tracking -2.6px; Regular (95% role confidence, computed values)
- Body: inter — weight 400; size 16px; line-height 24px; tracking normal; Regular (95% role confidence, computed values)
- Mono: cascadiaMono — weight 350; size 14px; line-height 20px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Text — text #1C1917: color-4: computed lab(9.03835 1.15298 1.92955); AI role: Near black #1C1917 used for primary typography across light-themed sections. (95% role confidence, computed values)
- Canvas — canvas #F5F5F4: color-7: computed lab(96.5286 -0.0991821 0.364268); AI role: Off-white #F5F5F4 used as the primary background for several feature and pricing sections. (90% role confidence, computed values)
- Surface — surface #0B1D0B: color-6: computed rgb(11, 29, 11); AI role: Dark green #0B1D0B used as the background for the hero and the footer CTA section. (85% role confidence, computed values)
- Muted Text — muted text #57534D: color-9: computed lab(35.5168 1.08604 4.07829); AI role: Grey #57534D used for secondary text, metadata, and 'Trusted by' headers. (85% role confidence, computed values)
- Border — border #E7E5E4: color-2: computed lab(91.055 0.663072 0.865579); AI role: Light grey #E7E5E4 used for structural borders, card outlines, and dividers in light sections. (85% role confidence, computed values)
- Accent — accent #00A63E: color-26: computed lab(59.0978 -58.6621 41.2579); AI role: Bright green #00A63E used for checkmarks and active states to draw attention. (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": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "350",
    "size": "42px",
    "lineHeight": "44.1px",
    "letterSpacing": "-2.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 1291,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 2228,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 3138,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "700",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Free",
        "top": 7119,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Solo",
        "top": 7119,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Pro",
        "top": 7119,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "450",
    "size": "33px",
    "lineHeight": "39.9px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Built for Teams.",
        "top": 6006,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Flat per-seat billing. Roles and seat control (RBAC). Team-level custom domains. Shared access polic",
        "top": 6006,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Twelve seats. One bill. Flat per-seat pricing, no surprises, set up in a minute.",
        "top": 9603,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "600",
    "size": "52px",
    "lineHeight": "52px",
    "letterSpacing": "-2.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Not just Public URLs",
        "top": 4735,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Works for developers, SaaS owners and agencies",
        "top": 6879,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Frequently asked questions",
        "top": 8084,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "600",
    "size": "42px",
    "lineHeight": "44.1px",
    "letterSpacing": "-2.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Test webhooks and OAuth callbacks",
        "top": 1291,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Share it without deploying",
        "top": 2228,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Share the link, get feedback.",
        "top": 3138,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\"",
    "weight": "350",
    "size": "50px",
    "lineHeight": "50px",
    "letterSpacing": "-2.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Public URLsfor developers, designers and agents.",
        "top": 182,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "300",
    "size": "43.1px",
    "lineHeight": "38.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "How itworks",
        "top": 5229,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "600",
    "size": "30px",
    "lineHeight": "36px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "What developers say.",
        "top": 9054,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 110,
    "contexts": [
      {
        "tag": "footer",
        "text": "— Yves R. from Datatim",
        "top": 1106,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Although LocalCan is framework agnostic, it's been fully tested with:",
        "top": 5785,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "✓Desktop app + CLI",
        "top": 7339,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 85,
    "contexts": [
      {
        "tag": "p",
        "text": "Free 14-day trial included. No credit card required.",
        "top": 594,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Free 14-day trial included.No credit card required.",
        "top": 6063,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "For ephemeral Public URLs and local development",
        "top": 7207,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "Danny Postma",
        "top": 9138,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Tony Dinh 🎯",
        "top": 9138,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Jesse Sibley",
        "top": 9138,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "350",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "brew install localcan",
        "top": 133,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Trusted by the dev teams at",
        "top": 752,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "⏺︎Create a Public URL",
        "top": 4393,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "19.2px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "@LocalCanApp is so cool!",
        "top": 9198,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "@LocalCanApp",
        "top": 9198,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "@LocalCanApp is so cool!",
        "top": 9198,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "27.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Point Stripe, Clerk, or GitHub at a stable Public URL and watch every delivery land in the inspector",
        "top": 1355,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Built it with Cursor or Claude Code and it runs on localhost. Send a real HTTPS link now, with no co",
        "top": 2293,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Publish a Snapshot and the same Public URL serves a deployed version. Lock it with a password or a s",
        "top": 3203,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Tunnel databases, SSH boxes, and Kubernetes clusters. Anything that speaks TCP, not just HTTP/S.",
        "top": 5105,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Open your localhost build on an actual device over HTTPS, with no deploy and no certificate warnings",
        "top": 5105,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Hosted AI clients need a real public URL, and you need to see every payload they send. LocalCan does",
        "top": 5105,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "600",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Everything in Free, plus:",
        "top": 7339,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Everything in Free, plus:",
        "top": 7339,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Everything in Pro, plus:",
        "top": 7339,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "LocalCan is amazing ❤️",
        "top": 9198,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "LocalCan is amazing ❤️",
        "top": 9198,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Put localhost on a stable Public URL to test webhooks or share previews without deploying. Publish a",
        "top": 406,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Over MCP or the CLI, from Claude Code, Cursor, or any agent.",
        "top": 4181,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "450",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Start any paid plan with a 14-day free trial, no credit card required. VAT may apply. Have questions",
        "top": 6947,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Contact us",
        "top": 6947,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Before LocalCan, we wasted valuable time troubleshooting virtual hosts and hosts files. Now it's as ",
        "top": 990,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "400",
    "size": "18.5px",
    "lineHeight": "22.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "VisitorsWebhooksAPI Calls",
        "top": 5441,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "350",
    "size": "14px",
    "lineHeight": "23.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 54,
    "contexts": [
      {
        "tag": "span",
        "text": ">",
        "top": 3531,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Share this prototype with the client. Keep it working when my laptop is closed, and only they should",
        "top": 3531,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "I'll create a",
        "top": 3603,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "Docs",
        "top": 21,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Changelog",
        "top": 21,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 21,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "500",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Can AI agents like Claude Code use LocalCan?",
        "top": 8101,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Can I use LocalCan without a subscription?",
        "top": 8161,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "How does pricing work for a team?",
        "top": 8221,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "600",
    "size": "14px",
    "lineHeight": "23.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Public URL",
        "top": 3603,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Snapshot",
        "top": 3603,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "password",
        "top": 3627,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "700",
    "size": "36px",
    "lineHeight": "40px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "$0",
        "top": 7159,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$8",
        "top": 7159,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$12",
        "top": 7159,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "300",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "li",
        "text": "Security",
        "top": 5614,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Access Control",
        "top": 5637,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "DDoS Protection",
        "top": 5661,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": null,
    "fontStack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "350",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 540,
        "property": "font"
      },
      {
        "tag": "kbd",
        "text": "D",
        "top": 540,
        "property": "font"
      },
      {
        "tag": "kbd",
        "text": "S",
        "top": 9725,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "✲Expose TCP Services",
        "top": 5065,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "✲Test on Real Device",
        "top": 5065,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "✲Build MCP Servers",
        "top": 5065,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Apple Color Emoji",
    "fontStack": "\"Apple Color Emoji\", \"Segoe UI Emoji\"",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "❤️",
        "top": 9195,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "❤️",
        "top": 9195,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "500",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Localhost",
        "top": 5360,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Snapshot",
        "top": 5483,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "App on your computer",
        "top": 5382,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Static copy deployed to LocalCan",
        "top": 5505,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "700",
    "size": "20.5px",
    "lineHeight": "20.5px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "LocalCan",
        "top": 5528,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "700",
    "size": "18px",
    "lineHeight": "28px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "LocalCanTM",
        "top": 17,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "700",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "LocalCan™",
        "top": 9916,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": null,
    "fontStack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "350",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 19,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "cascadiaMono",
    "fontStack": "cascadiaMono, \"cascadiaMono Fallback\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "15.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Securetunnel",
        "top": 5359,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "700",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "No subscription",
        "top": 7944,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "600",
    "size": "12.3px",
    "lineHeight": "12.3px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Network",
        "top": 5552,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "inter",
    "fontStack": "inter, \"inter Fallback\"",
    "weight": "500",
    "size": "7px",
    "lineHeight": "10.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "TM",
        "top": 17,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#D6D3D1",
    "alpha": 1,
    "cssValue": "lab(84.7909 0.928015 1.59738)",
    "count": 49,
    "contexts": [
      {
        "tag": "main",
        "text": "LocalCanTMDocsChangelogPricingLog InStart BuildingSbrew install localcanPublic URLsfor developers, d",
        "top": 0,
        "property": "border"
      },
      {
        "tag": "nav",
        "text": "LocalCanTMDocsChangelogPricingLog InStart BuildingS",
        "top": 0,
        "property": "border"
      },
      {
        "tag": "section",
        "text": "brew install localcanPublic URLsfor developers, designers and agents.Put localhost on a stable Publi",
        "top": 63,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#E7E5E4",
    "alpha": 1,
    "cssValue": "lab(91.055 0.663072 0.865579)",
    "count": 30,
    "contexts": [
      {
        "tag": "div",
        "text": "LocalCanTMDocsChangelogPricingLog InStart BuildingSbrew install localcanPublic URLsfor developers, d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "brew install localcan",
        "top": 133,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Put localhost on a stable Public URL to test webhooks or share previews without deploying. Publish a",
        "top": 406,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 45,
    "contexts": [
      {
        "tag": "body",
        "text": "LocalCanTMDocsChangelogPricingLog InStart BuildingSbrew install localcanPublic URLsfor developers, d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Start BuildingS",
        "top": 12,
        "property": "text"
      },
      {
        "tag": "kbd",
        "text": "S",
        "top": 19,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#1C1917",
    "alpha": 1,
    "cssValue": "lab(9.03835 1.15298 1.92955)",
    "count": 167,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 15,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 19,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "LocalCanTM",
        "top": 17,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#171717",
    "alpha": 1,
    "cssValue": "lab(7.78201 -0.0000149012 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "04Everything above, agents can doOver MCP or the CLI, from Claude Code, Cursor, or any agent.⏺︎Creat",
        "top": 4012,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#0B1D0B",
    "alpha": 1,
    "cssValue": "rgb(11, 29, 11)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "brew install localcanPublic URLsfor developers, designers and agents.Put localhost on a stable Publi",
        "top": 71,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Start Free TrialS",
        "top": 9715,
        "property": "text"
      },
      {
        "tag": "kbd",
        "text": "S",
        "top": 9725,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F5F5F4",
    "alpha": 1,
    "cssValue": "lab(96.5286 -0.0991821 0.364268)",
    "count": 20,
    "contexts": [
      {
        "tag": "button",
        "text": ">Debug a failing webhook",
        "top": 4540,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "I'll create a",
        "top": 3603,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Free$0For ephemeral Public URLs and local developmentSign Up Free✓Desktop app + CLIMac / Windows / L",
        "top": 7095,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#2B5A43",
    "alpha": 1,
    "cssValue": "rgb(43, 90, 67)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "How itworksVisitorsWebhooksAPI CallsLocalCanNetworkSecurityAccess ControlDDoS ProtectionRoutingSecur",
        "top": 5212,
        "property": "background"
      },
      {
        "tag": "h2",
        "text": "How itworks",
        "top": 5229,
        "property": "background"
      },
      {
        "tag": "ul",
        "text": "SecurityAccess ControlDDoS ProtectionRouting",
        "top": 5598,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#57534D",
    "alpha": 1,
    "cssValue": "lab(35.5168 1.08604 4.07829)",
    "count": 144,
    "contexts": [
      {
        "tag": "a",
        "text": "Docs",
        "top": 21,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Trusted by the dev teams at",
        "top": 752,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 831,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 78,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 2083,
        "property": "svg-fill"
      },
      {
        "tag": "line",
        "text": "",
        "top": 5228,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 5435,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#A6A09B",
    "alpha": 1,
    "cssValue": "lab(66.2166 1.88044 3.20326)",
    "count": 31,
    "contexts": [
      {
        "tag": "p",
        "text": "Over MCP or the CLI, from Claude Code, Cursor, or any agent.",
        "top": 4181,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "localcan -",
        "top": 3662,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Sign Up Free",
        "top": 7267,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#6B8C7B",
    "alpha": 1,
    "cssValue": "color(srgb 0.418039 0.547059 0.483922)",
    "count": 121,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 5228,
        "property": "border"
      },
      {
        "tag": "line",
        "text": "",
        "top": 5228,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#79716B",
    "alpha": 1,
    "cssValue": "lab(48.1164 2.35701 4.26852)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 1291,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "⏺︎Create a Public URL",
        "top": 4393,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.0392156862745098,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.04)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": ">Share this prototype with the client. Keep it working when my laptop is closed, and only they shoul",
        "top": 3522,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#E7E5E3",
    "alpha": 0.8,
    "cssValue": "color(srgb 0.90659 0.897586 0.892943 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "LocalCanTMDocsChangelogPricingLog InStart BuildingS",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#01B39F",
    "alpha": 1,
    "cssValue": "rgb(1, 179, 159)",
    "count": 6,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4758,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#008236",
    "alpha": 1,
    "cssValue": "lab(47.0329 -47.0239 31.4788)",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Save up to 25%",
        "top": 7015,
        "property": "text"
      },
      {
        "tag": "em",
        "text": "@LocalCanApp",
        "top": 9198,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#008031",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0.526998 -0.133454 0.0768446 / 0.1)",
    "count": 14,
    "contexts": [
      {
        "tag": "em",
        "text": "@LocalCanApp",
        "top": 9198,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFDF85",
    "alpha": 1,
    "cssValue": "rgb(255, 223, 133)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5416,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#A7E68F",
    "alpha": 1,
    "cssValue": "rgb(167, 230, 143)",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": ">",
        "top": 4555,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start Free TrialS",
        "top": 9715,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#A97DE7",
    "alpha": 1,
    "cssValue": "rgb(169, 125, 231)",
    "count": 5,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 4735,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "footer",
        "text": "— Yves R. from Datatim",
        "top": 1106,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#4AB35A",
    "alpha": 1,
    "cssValue": "rgb(74, 179, 90)",
    "count": 11,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4854,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)",
    "count": 21,
    "contexts": [
      {
        "tag": "div",
        "text": "04Everything above, agents can doOver MCP or the CLI, from Claude Code, Cursor, or any agent.⏺︎Creat",
        "top": 4028,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "⏺︎Create a Public URL",
        "top": 4393,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Securetunnel",
        "top": 5359,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "App on your computer",
        "top": 5382,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#00A63E",
    "alpha": 1,
    "cssValue": "lab(59.0978 -58.6621 41.2579)",
    "count": 33,
    "contexts": [
      {
        "tag": "span",
        "text": "✓",
        "top": 7339,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FFFFFF",
    "alpha": 0.6980392156862745,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Free 14-day trial included. No credit card required.",
        "top": 594,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#E0D4C8",
    "alpha": 1,
    "cssValue": "rgb(224, 212, 200)",
    "count": 1,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 5339,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FFFFFF",
    "alpha": 0.2980392156862745,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.3)",
    "count": 31,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 19,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "brew install localcanPublic URLsfor developers, designers and agents.Put localhost on a stable Publi",
        "top": 87,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "brew install localcan",
        "top": 128,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#1B1917",
    "alpha": 1,
    "cssValue": "rgb(27, 25, 23)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5420,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "LocalCan",
        "top": 5528,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#FF6467",
    "alpha": 1,
    "cssValue": "lab(63.7053 60.745 31.3109)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "500",
        "top": 4153,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "oklab(0 0 0 / 0.2)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 2083,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#1D9BF0",
    "alpha": 1,
    "cssValue": "rgb(29, 155, 240)",
    "count": 18,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 9140,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#E7CD84",
    "alpha": 1,
    "cssValue": "rgb(231, 205, 132)",
    "count": 2,
    "contexts": [
      {
        "tag": "line",
        "text": "",
        "top": 5406,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#BFD6BC",
    "alpha": 1,
    "cssValue": "rgb(191, 214, 188)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5495,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#FFF085",
    "alpha": 1,
    "cssValue": "lab(94.3433 -5.00429 52.9663)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Most Popular",
        "top": 7121,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#C4B4FF",
    "alpha": 1,
    "cssValue": "lab(76.7419 18.3911 -37.0706)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Limited Offer",
        "top": 7913,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#155DFC",
    "alpha": 1,
    "cssValue": "lab(44.0605 29.0279 -86.0352)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Contact us",
        "top": 6947,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#FFFFFF",
    "alpha": 0.058823529411764705,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.06)",
    "count": 3,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 19,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#FFFFFF",
    "alpha": 0.34901960784313724,
    "cssValue": "color(srgb 1 1 1 / 0.35)",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "DownloadD",
        "top": 530,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#A7E58F",
    "alpha": 0.5019607843137255,
    "cssValue": "lab(85.4989 -32.4657 35.7713 / 0.5)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "⏺︎",
        "top": 4408,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#221111",
    "alpha": 0.058823529411764705,
    "cssValue": "oklab(0.216 0.00334904 0.00498156 / 0.06)",
    "count": 1,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 540,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#112211",
    "alpha": 0.058823529411764705,
    "cssValue": "oklab(0.209281 -0.0339374 0.0247645 / 0.06)",
    "count": 1,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 9725,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#65CA98",
    "alpha": 1,
    "cssValue": "rgb(101, 202, 152)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 5466,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#FFFFFF",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(255, 255, 255, 0.7)",
    "count": 3,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 138,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 138,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#1A1A17",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.216 0.00334904 0.00498156 / 0.3)",
    "count": 4,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 540,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#0A1E0A",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.209281 -0.0339374 0.0247645 / 0.3)",
    "count": 4,
    "contexts": [
      {
        "tag": "kbd",
        "text": "S",
        "top": 9725,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical padding distinguishes major page sections. Content is structured within a centered max-width container, using consistent gaps between grid items and text blocks.
- Corner style: Consistent use of rounded corners across the UI.
- Radius: Small border-radius (likely 4-8px) for buttons, inputs, and small badges. Medium to large border-radius (likely 12-24px) for cards, feature containers, and the large UI mockups.
- Borders: Thin, solid 1px borders are used heavily for outlining structural sections (like the hero grid), cards, and separating list items.
- Buttons: Buttons are typically solid with rounded corners, often featuring a subtle outline or a contrasting background color depending on the theme. Many include an appended keyboard shortcut key.
- Content width: A fixed max-width layout centers the content, maintaining readability on large desktop screens.
- Density: Moderate density. While there is a lot of technical information, the use of structured grids, UI mockups, and sufficient whitespace prevents the page from feeling cluttered.
- Evidence: Observed from the padding around the main feature blocks, the rounded edges of the UI window graphics and pricing cards, and the structured outline of the hero section.

## Sections

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

1. **Features — Localcan Features** (Home)
   Reusable feature composition from Home, organized around “Localcan Features”.
   Capture: 1440×539px; page bounds 680–1219px of 10565px; source section ID: `f849f9cf-0147-485c-9ccc-495f9488d1f8`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/fadf423d63ad22c9d87e4e4c030eb5696a6626d65f6104fe31cb89f06b61682f/section_crop-f849f9cf-2026-10-07T06-30-00-378Z.webp
   SECTION.md v3.2: `f849f9cf-0147-485c-9ccc-495f9488d1f8` (deterministic evidence; editorial review pending)
2. **Features — Test webhooks and OAuth callbacks** (Home)
   Reusable feature composition from Home, organized around “Test webhooks and OAuth callbacks”.
   Capture: 1440×937px; page bounds 1219–2156px of 10565px; source section ID: `524d5b11-c16b-4999-b260-2c885ba43f0c`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/8960be203de3993349579d13a63f6b782eccd4de6698d19443e08f73ea2b5399/section_crop-524d5b11-2026-10-07T06-30-01-168Z.webp
   SECTION.md v3.2: `524d5b11-c16b-4999-b260-2c885ba43f0c` (deterministic evidence; editorial review pending)
3. **Features — Share it without deploying** (Home)
   Reusable feature composition from Home, organized around “Share it without deploying”.
   Capture: 1440×910px; page bounds 2156–3066px of 10565px; source section ID: `14cb2cf5-0793-44e5-8195-78b2d8334fd0`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3b35bf5a8856f6e47e560e13062cc56568ff454c7391f3db7634fe3e3663ba7e/section_crop-14cb2cf5-2026-10-07T06-30-02-029Z.webp
   SECTION.md v3.2: `14cb2cf5-0793-44e5-8195-78b2d8334fd0` (deterministic evidence; editorial review pending)
4. **Features — Everything above, agents can do** (Home)
   Reusable feature composition from Home, organized around “Everything above, agents can do”.
   Capture: 1440×611px; page bounds 4004–4615px of 10565px; source section ID: `731f3f45-7fb5-41e0-afd4-2ea068004a1d`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/55470ee88f24e9d618baddf09d25a3d7c916744b1189c0af585a625357ea1cf6/section_crop-731f3f45-2026-10-07T06-30-03-798Z.webp
   SECTION.md v3.2: `731f3f45-7fb5-41e0-afd4-2ea068004a1d` (deterministic evidence; editorial review pending)
5. **Features — Not just Public URLs** (Home)
   Reusable feature composition from Home, organized around “Not just Public URLs”.
   Capture: 1440×589px; page bounds 4615–5204px of 10565px; source section ID: `8d991a6a-1407-480c-b141-ddf44b87b11c`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/b826fd4ad2fd988ed75e6f4f62436e63ad1f1e9f25fdea421594f4109654e158/section_crop-8d991a6a-2026-10-07T06-30-04-581Z.webp
   SECTION.md v3.2: `8d991a6a-1407-480c-b141-ddf44b87b11c` (deterministic evidence; editorial review pending)
6. **Pricing — Built for Teams. Flat per-seat billing. Roles and seat control (RBAC).…** (Home)
   Pricing composition from Home, organized around “Built for Teams. Flat per-seat billing. Roles and seat control (RBAC).…”.
   Capture: 1440×824px; page bounds 5935–6759px of 10565px; source section ID: `753f2d24-38e2-42f3-a92b-852a70250160`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/0b05a5a1b5accc266ab2989ebcdca18cfa5baca381eef25154dc8ec8eeb7cffc/section_crop-753f2d24-2026-10-07T06-30-07-146Z.webp
   SECTION.md v3.2: `753f2d24-38e2-42f3-a92b-852a70250160` (deterministic evidence; editorial review pending)
7. **FAQ — Frequently asked questions** (Home)
   FAQ composition from Home, organized around “Frequently asked questions”.
   Capture: 1440×1002px; page bounds 8004–9006px of 10565px; source section ID: `355f017e-f9a5-40e8-94c6-69f7e7447983`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/c66e1f204ce778b57ba8cd054ab5be7a13261a6da16541376724f893ad3b2520/section_crop-355f017e-2026-10-07T06-30-08-975Z.webp
   SECTION.md v3.2: `355f017e-f9a5-40e8-94c6-69f7e7447983` (deterministic evidence; editorial review pending)
8. **Footer — Localcan Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Localcan Footer”.
   Capture: 1440×1000px; page bounds 9565–10565px of 10565px; source section ID: `0d137f65-941a-40c9-90d2-e66275ce070f`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/4289798b8a9fd49314c6bb58b30243790df76d2f41b8b719adfe12d645e278c7/section_crop-0d137f65-2026-10-07T06-30-09-844Z.webp
   SECTION.md v3.2: `0d137f65-941a-40c9-90d2-e66275ce070f` (deterministic evidence; editorial review pending)
9. **Hero — Public URLs for developers hero** (Home)
   AI suggestion (98% confidence): Complete, substantial hero with a clear value proposition, supporting copy, dual CTAs, trial note, and a distinctive technical illustration grid.
   Capture: 1440×606px; page bounds 72–678px of 10565px; source section ID: `eacaab61-1e2f-4208-87d0-f85b87c4e725`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/00cac30d39aa4cae399f9921e35dea8af14260888b9349b19f39046a90edea25/eacaab61-1e2f-4208-87d0-f85b87c4e725.webp
   SECTION.md v3.2: `eacaab61-1e2f-4208-87d0-f85b87c4e725` (deterministic evidence; editorial review pending)
10. **Testimonial Card — Datatim customer quote** (Home)
   AI suggestion (94% confidence): Self-contained customer testimonial with attribution and a distinctive pixel-wave treatment, bounded cleanly between the logo strip and the numbered feature sequence.
   Capture: 1440×297px; page bounds 921–1218px of 10565px; source section ID: `09fb18a6-cb13-4bf1-9bb3-568bdde31348`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/6948397c92da0af26bfc024de55f497d85e4111dd35d18e5166e8bd5ae60346a/09fb18a6-cb13-4bf1-9bb3-568bdde31348.webp
   SECTION.md v3.2: `09fb18a6-cb13-4bf1-9bb3-568bdde31348` (deterministic evidence; editorial review pending)
11. **Process — How LocalCan Works** (Home)
   AI suggestion (96% confidence): Complete illustrated workflow showing traffic entering LocalCan, security/network handling, deployment outputs, and supported framework logos.
   Capture: 1440×720px; page bounds 5212–5932px of 10565px; source section ID: `77433d43-3b71-4f7b-896d-1d57c73ed217`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3bde529a35e46b0e56afd59adb71b3334c77ad16dfe63960711e0c1354e0f1d2/77433d43-3b71-4f7b-896d-1d57c73ed217.webp
   SECTION.md v3.2: `77433d43-3b71-4f7b-896d-1d57c73ed217` (deterministic evidence; editorial review pending)
12. **Pricing — Developer, SaaS and Agency Pricing** (Home)
   AI suggestion (98% confidence): Complete pricing section with billing toggle, four comparable plan columns, feature lists, trial CTAs, and a distinct lifetime-license offer.
   Capture: 1440×1176px; page bounds 6838–8014px of 10565px; source section ID: `ea9f3949-8e03-4582-aa24-6d53e1492679`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3c4c125fe6c6b56aa074d47dc3ae79e04637bef26a3bf7305f935777dcce1065/ea9f3949-8e03-4582-aa24-6d53e1492679.webp
   SECTION.md v3.2: `ea9f3949-8e03-4582-aa24-6d53e1492679` (deterministic evidence; editorial review pending)
13. **CTA — Team Pricing Call to Action** (Home)
   AI suggestion (97% confidence): Self-contained dark conversion banner with a concise team-pricing message, two action buttons, trial details, and a distinctive pixel-wave graphic.
   Capture: 1440×312px; page bounds 9556–9868px of 10565px; source section ID: `7d42bbca-72db-414a-a45d-c256b9623340`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/dd8f9ea4e89bbc45747aabac4416f7cfa92f72f98e276fd8f262a2e60c5f1471/7d42bbca-72db-414a-a45d-c256b9623340.webp
   SECTION.md v3.2: `7d42bbca-72db-414a-a45d-c256b9623340` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/8150da762e3bddd626f5955a80e1a16f5c1591364af1820796e1300df3cc2727/desktop_full-a5a9106d-2026-10-07T06-29-51-458Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/5f27816ce00e101e67c3ed82c68ec70ad9d15d092a8e0021c420e8d18b1c0d0f/mobile_full-a5a9106d-2026-10-07T06-30-46-516Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2c76a53ec8d04d072516ebcee917f1b18d45c74b0f8996607c6ceb4def397ac6/og_image-a5a9106d-2026-10-07T06-29-58-792Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/992b40019bfb97d8714f8d1ea9f9385e0c831315c06608a38f213b755087c354/motion-1791356251914.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/e7cacd2a6b77b60eb8be6977ebc4d8cfdbf2594d545a34ff19479ba6568e1447/motion-poster-1791356251914.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Feature Collection
- Feature Card
- Pricing Table
- FAQ Accordion
- Testimonial Card
- Footer
- Badge
- Interactive UI Mockups
- Keyboard Shortcut Hints
- Visible Grid Structures

## Quality rubric

Overall: 55/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: LocalCan's landing page is a competently built, content-aligned execution of the now-standard 'developer tool' marketing template: dark/light tonal contrast, monospace branding, numbered feature storytelling backed by matching UI mockups, and explanatory motion sequences. The craft is solid and the narrative-to-visual pairing is a genuine strength, but nothing on the page departs from the well-worn genre conventions seen across many competing dev-tool sites, and a few palette and typographic choices feel more generated-by-default than deliberately tuned, keeping the overall result in competent territory rather than good or strong.

- Typography (15%): 58 — A deliberate two-family system (Cascadia Mono for display/code, Inter for headings/body) reinforces the developer positioning and the scale shows a coherent hierarchy from 50-52px headings down to 14-16px body/code. However, the aggressive, near-uniform negative letter-spacing (-2.1 to -2.6px) across multiple unrelated heading sizes reads as a stock treatment rather than hand-tuned craft, and the pairing itself (mono display + sans body) is a now-common trope in dev-tool marketing sites rather than a distinguishing choice.
- Color (10%): 56 — The dark green (#0B1D0B) bookends against off-white/white (#F5F5F4/#FFFFFF) create a clear, legible two-tone rhythm with a single accent green (#00A63E) for affirmative UI states, which is coherent and purposeful. But the diagram and mockup sections introduce a scattershot of additional decorative hues (teal #01B39F, purple #A97DE7, yellow #FFDF85, salmon #FF6467, lavender #C4B4FF, pale yellow #FFF085) that aren't visibly tied back into the core palette, weakening overall discipline.
- Layout (20%): 62 — The page runs a consistent structural system: a bordered grid hero, a numbered 01-04 feature sequence paired with mockups, a bordered 'How it works' diagram, a pricing grid, an FAQ list, testimonial cards, and a footer directory. Section rhythm (generous vertical padding, centered max-width content) holds across the whole page, which is enough coherence to clear the 'good' threshold on structure alone, even though none of the individual layout devices (grid-bordered hero, card grids, footer directory) is unusual for this genre.
- Motion (20%): 57 — Motion is functional and tied to explaining the product (animated UI mockup sequences, terminal typing, network-flow diagrams, marquee logos, sequential fade-ins), which is a genuine strength for a technical product site. However, the specific techniques observed (marquee scroll, staggered fade-in, cursor-click demo loops, pulsing grid) are standard patterns seen broadly across SaaS sites, and no evidence establishes refined easing, frame-rate smoothness, or an original choreography system beyond these familiar beats.
- Originality (25%): 42 — The overall concept—terminal/monospace branding, CLI mockups, bordered-grid hero, numbered feature steps, keyboard-shortcut kbd hints, marquee social-proof logos—is a well-established genre convention for developer-tool marketing sites (shared by many YC-style SaaS competitors). It is executed competently but introduces no hard-to-substitute idea or visual device that couldn't be swapped for a near-identical competitor's site without losing identity.
- Content (10%): 64 — Content and visual demonstration are tightly coupled: each numbered feature (webhooks, sharing, snapshots, agents) is paired with a matching, specific UI mockup screenshot; the pricing table details align with the 'Built for Teams' copy; FAQ and testimonials round out credibility. This alignment between claims and visual proof is a genuine strength.

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
- [ ] Typography roles

## Curator notes

A dark green terminal-style hero with monospace labels and a glitchy portrait sets a developer mood, while numbered sections (01, 02, 03) pace real app screenshots of webhook logs and share links down the page. Flat per-seat pricing tiers and a team dashboard mockup near the bottom add clarity and trust before the ask.

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