# Causal — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://causal.so/
Captured: 2026-10-10
CSS measured: 2026-10-10T06:10:09.510Z at 1440×1000 — https://causal.so/
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

Causal's landing page employs a stark, minimalist aesthetic anchored by a very light gray canvas and high-contrast black typography. The design heavily features heavily rounded corners on cards and pill-shaped buttons, creating a soft yet structured feel. Bento-box layouts are used to organize features and templates, while floating product UI elements demonstrate functionality within the white space. The overall density is low, emphasizing a clean, focused user experience.

## Classification

- Industry: ai
- Site type: Landing, Store
- Business model: Shopping, AI, Software
- Styles: minimal, typographic, geometric, corporate, bento-box, spatial
- Platform: Custom code
- Technology: React, GSAP

## Typography

- Display: Manrope Variable — weight 700; size 60px; line-height 72px; tracking normal; Regular (100% role confidence, computed values)
- Heading: Manrope Variable — weight 650; size 50px; line-height 70px; tracking normal; Regular (100% role confidence, computed values)
- Body: Manrope Variable — weight 500; size 16px; line-height 23px; tracking normal; Regular (100% role confidence, computed values)
- Mono: Unidentified — weight 350; size 12px; line-height 18px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Text — text #1A1A1A: color-4: computed rgb(26, 26, 26); AI role: rgb(26, 26, 26) (#1A1A1A) is the primary color for headings, body text, and icons. (100% role confidence, computed values)
- Canvas — canvas #F9F9F9: color-1: computed rgb(249, 249, 249); AI role: rgb(249, 249, 249) (#F9F9F9) acts as the primary background color for the page body. (90% role confidence, computed values)
- Muted Text — muted text #878787: color-3: computed rgb(135, 135, 135); AI role: rgb(135, 135, 135) (#878787) is used for secondary text like navigation links and descriptive copy. (90% role confidence, computed values)
- Primary Action — primary action #000000: color-11: computed rgb(0, 0, 0); AI role: Solid black is used for the prominent pill-shaped CTA buttons. (90% role confidence, computed values)
- Surface — surface #EEEEEE: color-2: computed rgb(238, 238, 238); AI role: rgb(238, 238, 238) (#EEEEEE) is used for distinct background areas like feature cards and input/control backgrounds. (80% role confidence, computed values)
- Border — border #F2F2F2: color-7: computed rgb(242, 242, 242); AI role: rgb(242, 242, 242) (#F2F2F2) is used subtly to differentiate elements, often acting in place of explicit borders. (70% 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": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "23px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 95,
    "contexts": [
      {
        "tag": "p",
        "text": "Your inspiration, notes, and plans are scattered across tools. Causal brings everything into one pla",
        "top": 404,
        "property": "font"
      },
      {
        "tag": "figcaption",
        "text": "Text editor. Turn inspiration into written briefs",
        "top": 6257,
        "property": "font"
      },
      {
        "tag": "figcaption",
        "text": "Images. Store pictures and videos.",
        "top": 6257,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 39,
    "contexts": [
      {
        "tag": "span",
        "text": "#E8E0D5",
        "top": 1054,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Brand guidelines 2019",
        "top": 1121,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Brand voice",
        "top": 1265,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "24px",
    "lineHeight": "38px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "The",
        "top": 1967,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "most",
        "top": 1967,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "ambitious",
        "top": 1967,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "h3",
        "text": "Brief",
        "top": 954,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Questions for Mara",
        "top": 1170,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Cups",
        "top": 1314,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "What we are keeping",
        "top": 935,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Next two weeks",
        "top": 1167,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Roasts",
        "top": 1316,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "What the studies agree on",
        "top": 5980,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "What I am changing",
        "top": 6127,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Findings",
        "top": 7930,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "650",
    "size": "50px",
    "lineHeight": "70px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Save ideas of all forms.",
        "top": 5687,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Features for productivity.",
        "top": 7255,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Causal MCP",
        "top": 8461,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "650",
    "size": "40px",
    "lineHeight": "50px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Get started with templates.",
        "top": 6520,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Reviews from creatives",
        "top": 9302,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Articles.",
        "top": 11263,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "30px",
    "lineHeight": "42px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Spaced repetition",
        "top": 5899,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "Onboarding audit",
        "top": 7871,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "60px",
    "lineHeight": "72px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "AI canvas workspace for your ideas.",
        "top": 244,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "650",
    "size": "30px",
    "lineHeight": "42px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Rebrand plan",
        "top": 834,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 71,
    "contexts": [
      {
        "tag": "p",
        "text": "Take Harbour from café cups to supermarket shelves by spring. Same anchor, same cream, a louder bag.",
        "top": 976,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Do the café cups change too? Who signs off the copy on the back of the bag?",
        "top": 1192,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Same cream cup, with the anchor a touch smaller so it clears the sleeve.",
        "top": 1336,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 49,
    "contexts": [
      {
        "tag": "span",
        "text": "Harbour Coffee",
        "top": 765,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Rebrand plan",
        "top": 765,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pearl Bush",
        "top": 1071,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 33,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Solutions",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Templates",
        "top": 25,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "350",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "The gap between reviews matters more than the hoursRegular textACenter.",
        "top": 5947,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Retrieval beats re-reading, even when it feels harder",
        "top": 6009,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "The optimal gap widens after each successful recall",
        "top": 6024,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "23px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "a",
        "text": "Start for free",
        "top": 498,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Text editor.",
        "top": 6257,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Images.",
        "top": 6257,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "What did we agree on yesterday?",
        "top": 7467,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Three things: ship the beta on the 14th, cut onboarding to three steps, and keep feedback on one boa",
        "top": 7556,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Turn those into cards for the team",
        "top": 7671,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "A canvas where notes, images, and links connect into finished ideas.",
        "top": 6066,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Studio admin",
        "top": 802,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ideas",
        "top": 831,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Harbour Coffee",
        "top": 861,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "What is this app for?",
        "top": 10336,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "How is this different from Notion or Obsidian?",
        "top": 10415,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Is there a free plan?",
        "top": 10494,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Transcribing audio",
        "top": 6109,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Read Launch sync",
        "top": 7530,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Thinking",
        "top": 7735,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Schedule",
        "top": 7518,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Drop",
        "top": 7742,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Delegate",
        "top": 7742,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Plan next quarter",
        "top": 7577,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Tidy inbox",
        "top": 7696,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Finish pitch deck",
        "top": 7689,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "•",
        "top": 11815,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 11815,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 11815,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "448.2px",
    "lineHeight": "448.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "causal",
        "top": 12723,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Priorities",
        "top": 7482,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Inter Variable",
    "fontStack": "\"Inter Variable\", Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "weight": "415",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "matters more than the hoursRegular textACenter",
        "top": 5949,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Do first",
        "top": 7518,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Arial",
    "fontStack": "Arial",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 6002,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": null,
    "fontStack": "ui-monospace, \"SF Mono\", \"Cascadia Code\", monospace",
    "weight": "350",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "code",
        "text": "SM-2",
        "top": 6082,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Reading Room",
        "top": 7443,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Manrope Variable",
    "fontStack": "\"Manrope Variable\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Start for free",
        "top": 16,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F9F9F9",
    "alpha": 1,
    "cssValue": "rgb(249, 249, 249)",
    "count": 32,
    "contexts": [
      {
        "tag": "body",
        "text": "HomeSolutionsTemplatesPricingResourcesFoundersPlan the app before you build it. Flows, specs and the",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Start for free",
        "top": 16,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 30,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 99,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 5704,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Spaced repetitionThe gap between reviews matters more than the hoursRegular textACenter.What the stu",
        "top": 5857,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Video brief",
        "top": 6670,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#878787",
    "alpha": 1,
    "cssValue": "rgb(135, 135, 135)",
    "count": 190,
    "contexts": [
      {
        "tag": "button",
        "text": "Solutions",
        "top": 25,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 33,
        "property": "svg-stroke"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 25,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 380,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 22,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "Home",
        "top": 25,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FCFCFC",
    "alpha": 1,
    "cssValue": "rgb(252, 252, 252)",
    "count": 50,
    "contexts": [
      {
        "tag": "div",
        "text": "BriefTake Harbour from café cups to supermarket shelves by spring. Same anchor, same cream, a louder",
        "top": 942,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1116,
        "property": "background"
      },
      {
        "tag": "g",
        "text": "",
        "top": 7646,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FFFFFF",
    "alpha": 0.3215686274509804,
    "cssValue": "rgba(255, 255, 255, 0.32)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Harbour CoffeeRebrand planStudio adminIdeasHarbour CoffeeReading listPhoto walksLisbon in MayNew spa",
        "top": 757,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F2F2F2",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 242)",
    "count": 147,
    "contexts": [
      {
        "tag": "div",
        "text": "BriefTake Harbour from café cups to supermarket shelves by spring. Same anchor, same cream, a louder",
        "top": 786,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "BriefTake Harbour from café cups to supermarket shelves by spring. Same anchor, same cream, a louder",
        "top": 942,
        "property": "border"
      },
      {
        "tag": "img",
        "text": "",
        "top": 1863,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F3F4F6",
    "alpha": 1,
    "cssValue": "rgb(243, 244, 246)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 750,
        "property": "background"
      },
      {
        "tag": "code",
        "text": "SM-2",
        "top": 6082,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 33,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1104,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 5919,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "ScheduleDo firstDropDelegatePlan next quarterTidy inboxFinish pitch deckBook flightsPriorities",
        "top": 7468,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#DFE3E8",
    "alpha": 1,
    "cssValue": "rgb(223, 227, 232)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Reading RoomMoodboardLaunch syncReading listHomeAdded in canvas",
        "top": 7425,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 34,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 765,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2181,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2184,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "One loud colour and type as big as the bag will take. This is the shelf presence we want for Harbour",
        "top": 978,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F9F9F9",
    "alpha": 0.8,
    "cssValue": "color(srgb 0.976471 0.976471 0.976471 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#555555",
    "alpha": 1,
    "cssValue": "rgb(85, 85, 85)",
    "count": 99,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 765,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 767,
        "property": "svg-stroke"
      },
      {
        "tag": "span",
        "text": "Harbour Coffee",
        "top": 765,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#F8F8F8",
    "alpha": 1,
    "cssValue": "rgb(248, 248, 248)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Schedule",
        "top": 7510,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#7F7F87",
    "alpha": 1,
    "cssValue": "rgb(127, 127, 135)",
    "count": 39,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 805,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 1396,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1402,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#A2AAB3",
    "alpha": 1,
    "cssValue": "rgb(162, 170, 179)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#A2AAB3Gray Chateau#3D0C02Bean",
        "top": 5947,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#A2AAB3Gray Chateau#3D0C02Bean",
        "top": 5947,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#EBEBEC",
    "alpha": 1,
    "cssValue": "rgb(235, 235, 236)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "To-do:",
        "top": 2092,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2153,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Create first canvas",
        "top": 2136,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#1D1D1D",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(31, 31, 31, 0.1)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 7481,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 9484,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FDE7DE",
    "alpha": 1,
    "cssValue": "rgb(253, 231, 222)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Do first",
        "top": 7510,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#141427",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(17, 24, 39, 0.1)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Harbour Coffee",
        "top": 856,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#E8E0D5",
    "alpha": 1,
    "cssValue": "rgb(232, 224, 213)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#E8E0D5Pearl Bush",
        "top": 1038,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#E8E0D5Pearl Bush",
        "top": 1038,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#C04737",
    "alpha": 1,
    "cssValue": "rgb(192, 71, 55)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#C04737Mojo",
        "top": 750,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#C04737Mojo",
        "top": 750,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#5F1B27",
    "alpha": 1,
    "cssValue": "rgb(95, 27, 39)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#5F1B27Wine Berry",
        "top": 990,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#5F1B27Wine Berry",
        "top": 990,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#3D2B1F",
    "alpha": 1,
    "cssValue": "rgb(61, 43, 31)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#3D2B1FBistre",
        "top": 1182,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#3D2B1FBistre",
        "top": 1182,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#D2B48C",
    "alpha": 1,
    "cssValue": "rgb(210, 180, 140)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#D2B48CTan",
        "top": 942,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#D2B48CTan",
        "top": 942,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#E2725B",
    "alpha": 1,
    "cssValue": "rgb(226, 114, 91)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#E2725BTerracotta",
        "top": 750,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#E2725BTerracotta",
        "top": 750,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#F5DEB3",
    "alpha": 1,
    "cssValue": "rgb(245, 222, 179)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "#F5DEB3Wheat",
        "top": 1422,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "#F5DEB3Wheat",
        "top": 1422,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#EAEAEA",
    "alpha": 1,
    "cssValue": "rgb(234, 234, 234)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "0:00 / 4:12",
        "top": 1224,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#666666",
    "alpha": 1,
    "cssValue": "rgb(102, 102, 102)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Add a link",
        "top": 6038,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#ED6C59",
    "alpha": 1,
    "cssValue": "rgb(237, 108, 89)",
    "count": 51,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 767,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 1120,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1122,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#FFFFFF",
    "alpha": 0.9411764705882353,
    "cssValue": "rgba(255, 255, 255, 0.94)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "#C04737",
        "top": 766,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#FCDF23",
    "alpha": 1,
    "cssValue": "rgb(252, 223, 35)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5998,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#1F1F1F",
    "alpha": 1,
    "cssValue": "rgb(31, 31, 31)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Reading Room",
        "top": 7443,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#3B3631",
    "alpha": 1,
    "cssValue": "rgb(59, 54, 49)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "#E8E0D5",
        "top": 1054,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#2E3238",
    "alpha": 1,
    "cssValue": "rgb(46, 50, 56)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "#A2AAB3",
        "top": 6027,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#74955B",
    "alpha": 1,
    "cssValue": "rgb(116, 149, 91)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 8010,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 8012,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#5D6570",
    "alpha": 1,
    "cssValue": "rgb(93, 101, 112)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Gray Chateau",
        "top": 6055,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#75A0BC",
    "alpha": 1,
    "cssValue": "rgb(117, 160, 188)",
    "count": 6,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 7617,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 7617,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7617,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#747474",
    "alpha": 1,
    "cssValue": "rgb(116, 116, 116)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Schedule",
        "top": 7518,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#FFFFFF",
    "alpha": 0.6196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.62)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Mojo",
        "top": 783,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#474747",
    "alpha": 1,
    "cssValue": "rgb(71, 71, 71)",
    "count": 6,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 7447,
        "property": "svg-fill"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 7492,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#379ADB",
    "alpha": 1,
    "cssValue": "rgb(55, 154, 219)",
    "count": 24,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1264,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1266,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#C676A6",
    "alpha": 1,
    "cssValue": "rgb(198, 118, 166)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 7565,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7567,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#7EBE83",
    "alpha": 1,
    "cssValue": "rgb(126, 190, 131)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 7708,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7710,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#D4AB7D",
    "alpha": 1,
    "cssValue": "rgb(212, 171, 125)",
    "count": 2,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 7661,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 7665,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#7A7167",
    "alpha": 1,
    "cssValue": "rgb(122, 113, 103)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Pearl Bush",
        "top": 1071,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#22C55E",
    "alpha": 1,
    "cssValue": "rgb(34, 197, 94)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 866,
        "property": "background"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 7618,
        "property": "svg-fill"
      }
    ]
  }
]
```

### 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 macro-whitespace separates major sections, allowing the content to breathe. Micro-spacing within bento cards is tighter but maintains clear logical groupings.
- Corner style: Highly rounded. Nearly all structural containers feature significant rounding, avoiding sharp corners.
- Radius: Large border radii on feature cards (likely 16px-24px) and fully rounded, pill-shaped primary buttons.
- Borders: Mostly borderless design. Separation of elements relies on subtle contrast between off-white canvas and light gray surface backgrounds rather than drawn lines.
- Buttons: Solid fill, pill-shaped, with high contrast text (black fill, white text). No borders or drop shadows are visible on buttons.
- Content width: Content is centered with a max-width that keeps text blocks readable, while visual bento grids span wider to fill more of the viewport.
- Density: Low density. The layout prioritizes openness and clarity, using large typography and ample padding to reduce visual clutter.
- Evidence: Visual inspection of the full-page layout reveals consistent rounded corners, reliance on surface colors over borders, and significant spacing between discrete blocks.

## Sections

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

1. **Features — Features for productivity.** (Home)
   Reusable feature composition from Home, organized around “Features for productivity.”.
   Capture: 1440×1206px; page bounds 7135–8341px of 13069px; source section ID: `31392b06-0906-4197-932d-cdd37f0d7fb9`; image: https://media.designdetails.io/library/f58da411d71e23c3384de61e591ea0ad4758a1614088eddfe20fb8209cb5054f/section_crop-31392b06-2026-10-10T06-10-21-420Z.webp
   SECTION.md v3.2: `31392b06-0906-4197-932d-cdd37f0d7fb9` (deterministic evidence; editorial review pending)
2. **FAQ — Questions** (Home)
   FAQ composition from Home, organized around “Questions”.
   Capture: 1440×952px; page bounds 10191–11143px of 13069px; source section ID: `deabbe30-cf54-4006-9edd-a43b12f530b5`; image: https://media.designdetails.io/library/370cde56eaaec058a06df0138d0ec382a8561ce87e6332341fd9881f7c0a5b88/section_crop-deabbe30-2026-10-10T06-10-25-928Z.webp
   SECTION.md v3.2: `deabbe30-cf54-4006-9edd-a43b12f530b5` (deterministic evidence; editorial review pending)
3. **Features — Causal Features** (Home)
   Reusable feature composition from Home, organized around “Causal Features”.
   Capture: 1440×484px; page bounds 11950–12434px of 13069px; source section ID: `21a352fb-2a6c-44c1-a501-0bc63ec88dad`; image: https://media.designdetails.io/library/4243f8d0c0b009e5bc357025448390fb9825419c59c2e3bc7e92333b9519626a/section_crop-21a352fb-2026-10-10T06-10-29-371Z.webp
   SECTION.md v3.2: `21a352fb-2a6c-44c1-a501-0bc63ec88dad` (deterministic evidence; editorial review pending)
4. **Hero — AI Canvas Workspace Hero** (Home)
   AI suggestion (98% confidence): Complete, substantial hero with a clear product promise, supporting copy, primary CTA, and a large polished workspace preview that ends at a distinct visual boundary.
   Capture: 1440×1392px; page bounds 141–1533px of 13069px; source section ID: `6eb5b133-2eb5-4923-9570-6e30b89eaefe`; image: https://media.designdetails.io/library/8d2095a47d236998b8c70014410b59bb24213f9b14eb072f5715b8a05534424f/6eb5b133-2eb5-4923-9570-6e30b89eaefe.webp
   SECTION.md v3.2: `6eb5b133-2eb5-4923-9570-6e30b89eaefe` (deterministic evidence; editorial review pending)
5. **Pricing — Simple pricing plans** (Pricing)
   AI suggestion (98% confidence): Complete pricing component with headline, supporting copy, billing toggle, two plan cards, feature lists, and conversion buttons.
   Capture: 1440×852px; page bounds 156–1008px of 5876px; source section ID: `458b1d48-fbe7-4667-9966-38c0b9ccb54e`; image: https://media.designdetails.io/library/2950c79b3f0d95b1495bb085c03939d1c8125a0de52122fd9893be7fdc1b7ab8/458b1d48-fbe7-4667-9966-38c0b9ccb54e.webp
   SECTION.md v3.2: `458b1d48-fbe7-4667-9966-38c0b9ccb54e` (deterministic evidence; editorial review pending)
6. **Testimonials — Trusted by creatives** (Pricing)
   AI suggestion (97% confidence): Complete testimonial section with its heading and a cohesive six-card customer quote grid, including portraits, names, and roles.
   Capture: 1440×771px; page bounds 1242–2013px of 5876px; source section ID: `c66baa75-e8dd-4546-b91a-a640ba6cba6f`; image: https://media.designdetails.io/library/b939b8155896f2b200ca8871a5a0c7e9722cb85ca8f06c354c069923635fa79a/c66baa75-e8dd-4546-b91a-a640ba6cba6f.webp
   SECTION.md v3.2: `c66baa75-e8dd-4546-b91a-a640ba6cba6f` (deterministic evidence; editorial review pending)
7. **FAQ — Questions Accordion** (Pricing)
   AI suggestion (98% confidence): Complete two-column FAQ section with a prominent heading and nine clearly bounded accordion questions.
   Capture: 1440×738px; page bounds 3926–4664px of 5876px; source section ID: `0b414cf8-04be-421f-83f9-1f1b4cb32609`; image: https://media.designdetails.io/library/59f7c38ff6494538465b98c7347a8f6b83f964ce1b9d86db4a47f00b052e7f77/0b414cf8-04be-421f-83f9-1f1b4cb32609.webp
   SECTION.md v3.2: `0b414cf8-04be-421f-83f9-1f1b4cb32609` (deterministic evidence; editorial review pending)
8. **Footer — Multi-column product and company footer** (Pricing)
   AI suggestion (96% confidence): Complete page footer with clearly organized Product, Solutions, Resources, Information, and Connect link groups, company attribution, copyright, and a distinctive oversized background wordmark.
   Capture: 1440×660px; page bounds 5216–5876px of 5876px; source section ID: `61817fb2-dfda-4650-a1fc-558b2075eefb`; image: https://media.designdetails.io/library/ec948332b09f9c32400e81369b6ed69c4fd54a1b83e318d94bba00abb1c63aa8/61817fb2-dfda-4650-a1fc-558b2075eefb.webp
   SECTION.md v3.2: `61817fb2-dfda-4650-a1fc-558b2075eefb` (deterministic evidence; editorial review pending)
9. **Features — Save Ideas in Multiple Formats** (Home)
   AI suggestion (91% confidence): Complete capability showcase with a clear heading, carousel controls, and visual examples for text, images, links, and colors.
   Capture: 1440×693px; page bounds 5692–6385px of 13069px; source section ID: `7004c19f-60fd-490f-a249-d130ce023db9`; image: https://media.designdetails.io/library/7bbbd1c37babaffba0734a0e47bde55c6026c3c313bda7223d4b8af23e8c6a65/7004c19f-60fd-490f-a249-d130ce023db9.webp
   SECTION.md v3.2: `7004c19f-60fd-490f-a249-d130ce023db9` (deterministic evidence; editorial review pending)
10. **Gallery — Get Started with Templates** (Home)
   AI suggestion (90% confidence): Self-contained template gallery with heading, browse-all link, and a complete visible row of labeled template previews.
   Capture: 1440×591px; page bounds 6514–7105px of 13069px; source section ID: `b6545963-62ef-440d-be7d-f81d74ab39f0`; image: https://media.designdetails.io/library/22b049724706e2436f3a18dd553b988bbf15d59e18e625e8b4896a7e6e03e4bd/b6545963-62ef-440d-be7d-f81d74ab39f0.webp
   SECTION.md v3.2: `b6545963-62ef-440d-be7d-f81d74ab39f0` (deterministic evidence; editorial review pending)
11. **Logo Cloud — Causal MCP agent integrations** (Home)
   AI suggestion (96% confidence): Complete integration section with a clear heading, supporting copy, and a centered panel of recognizable agent/tool logos.
   Capture: 1440×603px; page bounds 8472–9075px of 13069px; source section ID: `006a569e-4143-421b-9c11-81dcee73e3a4`; image: https://media.designdetails.io/library/5018a260cc8efbe1bba797a0f6aa416d7145bdc9c6db6df6ab5a04a7538a0886/006a569e-4143-421b-9c11-81dcee73e3a4.webp
   SECTION.md v3.2: `006a569e-4143-421b-9c11-81dcee73e3a4` (deterministic evidence; editorial review pending)
12. **Testimonials — Reviews from creatives** (Home)
   AI suggestion (98% confidence): Complete testimonial collection with its heading and six coordinated review cards featuring portraits, roles, and substantive quotes.
   Capture: 1440×816px; page bounds 9291–10107px of 13069px; source section ID: `0965d500-96ef-4876-a246-6580f2fb992e`; image: https://media.designdetails.io/library/8c3948b40ff76854b0da7a869bd320ac69288253fddeea6bd0caad2fdf5cbc0f/0965d500-96ef-4876-a246-6580f2fb992e.webp
   SECTION.md v3.2: `0965d500-96ef-4876-a246-6580f2fb992e` (deterministic evidence; editorial review pending)
13. **Editorial — Articles resource cards** (Home)
   AI suggestion (97% confidence): Complete editorial section with an Articles heading, see-all link, and a self-contained three-card resource grid including imagery, titles, categories, and reading times.
   Capture: 1440×611px; page bounds 11262–11873px of 13069px; source section ID: `bfc67c07-7f82-4b52-9222-c9bc6ea12545`; image: https://media.designdetails.io/library/57df71598708c25d400a935888e5dc7ac2cad0525e723c5e84cd3259d97a8268/bfc67c07-7f82-4b52-9222-c9bc6ea12545.webp
   SECTION.md v3.2: `bfc67c07-7f82-4b52-9222-c9bc6ea12545` (deterministic evidence; editorial review pending)
14. **Footer — CTA and multi-column site footer** (Home)
   AI suggestion (94% confidence): Substantial complete footer combining a decorative start-for-free CTA panel, organized navigation columns, company details, copyright, and oversized brand lettering.
   Capture: 1440×1094px; page bounds 11975–13069px of 13069px; source section ID: `2bf2c057-56a6-4104-a999-b46c03d9fa9c`; image: https://media.designdetails.io/library/e02c0a7f6de08650c228494147208f6057aa6318c21b8befe30170e4363d2c58/2bf2c057-56a6-4104-a999-b46c03d9fa9c.webp
   SECTION.md v3.2: `2bf2c057-56a6-4104-a999-b46c03d9fa9c` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/59ee683ced9a863963a97ad01b85f96e2ecabea4ed02e5d5d7476fec8c07743b/desktop_full-338a4e3d-2026-10-10T06-10-09-533Z.webp
- Mobile screenshot: https://media.designdetails.io/library/63ab4dd3cc222c4ba135c9f4eeac1a6b78d2fc3931f7ba470c48e2fd5dabf9a1/mobile_full-338a4e3d-2026-10-10T06-11-07-036Z.webp
- Open Graph image: https://media.designdetails.io/library/c2310f0c8cc956974d79f43c0ddac8f91f00723387494008a420353b5fe826e1/og_image-338a4e3d-2026-10-10T06-10-17-756Z.webp
- Full-page video: Not captured
- Video poster: Not captured
- Motion status: No recording attached. Motion must remain not assessed.

## 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
- Primary Button
- Feature Collection
- Testimonial Card
- FAQ Accordion
- Footer
- Product UI
- Floating Element Scatter
- Logo Watermark

## Quality rubric

Overall: 54.38/100 (Competent)
Evidence coverage: 80%
Judge tier: Competent
Verdict: Causal's landing page is a tidy, well-organized execution of the current minimal-SaaS bento-grid playbook: a disciplined monochrome palette, consistent rounded-card system, and demo content that meaningfully illustrates feature claims. It is competent and pleasant but relies on an aesthetic (asterisk mark, floating scattered cards, giant faint footer wordmark) that is now common across comparable products, and no motion evidence is available to credit any differentiating interaction craft.

- Typography (15%): 60 — A consistent two-family system (Manrope Variable for display/headings, Inter Variable for body copy and simulated product UI) produces a legible scale from 60px hero down to 16px/14px body text, with sensible line-height and weight steps (700/650/600/500). Execution is clean and functional, but the pairing and scale are default SaaS conventions without a distinctive display treatment, unusual cut, or expressive type moment that would push it past competent.
- Color (10%): 63 — The actual site chrome commits to a disciplined black/off-white/gray system (#1A1A1A text, #F9F9F9 canvas, #EEEEEE/#F2F2F2 surfaces, solid black CTA), relying on tonal contrast rather than borders to separate elements—coherent and restrained. Saturated colors (terracotta, wine berry, bistre, etc.) appear only inside demo-content screenshots illustrating a fictional coffee brand, not as structural site color, which keeps the real interface monochrome and intentional.
- Layout (20%): 65 — A bento-grid system recurs across multiple sections—feature cards, template cards, testimonial cards, FAQ rows—paired with consistent large radii, borderless surface separation, and generous macro-whitespace. Floating/scattered UI card imagery and a giant faint wordmark footer add a secondary organizing device. This is a coherent, well-executed multi-section system, though it follows a now-standard SaaS bento/card template rather than inventing a distinct structural approach.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference, so animation quality, easing, frame behavior, or interaction choreography cannot be judged.
- Originality (25%): 36 — The overall idiom—light-gray canvas, black pill CTAs, heavily rounded bento cards, a central asterisk brand mark, scattered floating UI/image cards suggesting a canvas workspace, and a giant faint wordmark in the footer—closely matches a widely repeated contemporary SaaS/startup template language seen across many current product sites. Execution within that idiom is clean, but there is no hard-to-substitute structural or conceptual idea unique to this product beyond adopting the prevailing trend set.
- Content (10%): 62 — Demo content (a fictional coffee-brand rebrand brief, a spaced-repetition study example, a team-planning board) is woven directly into the product UI mockups shown throughout feature sections, giving abstract claims like 'save ideas of all forms' or 'features for productivity' a concrete, consistent narrative thread rather than generic placeholder text.

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

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

## Verification checklist

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

## Curator notes

A real cluttered moodboard of photos, swatches and notes sits inside a tidy browser frame on a soft gradient backdrop, showing the product mid use rather than as an icon. Big quiet white gaps between sparse sections let scattered polaroid style cards breathe, keeping a messy idea dump feeling calm 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.