# Guise — Design Reference

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

## Design direction

The website presents a sleek, cinematic, dark-themed landing page tailored for a macOS utility. It relies heavily on immersive scroll-linked storytelling, utilizing a split layout where narrative text on the left drives dynamic, high-fidelity UI presentations on the right. The aesthetic is clean, modern, and highly polished, characteristic of high-end developer or designer tools.

## Classification

- Industry: creative
- Site type: Landing
- Business model: Not identified
- Styles: minimal, editorial, corporate, dark-mode, cinematic
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Heading: scoutieSans — weight 400; size 40px; line-height 43px; tracking -0.4px; Regular (95% role confidence, computed values)
- Body: Inter — weight 500; size 14px; line-height 20px; tracking -0.1px; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-1: computed rgb(0, 0, 0); AI role: Solid black (#000000) forms the base background for the entire page. (100% role confidence, computed values)
- Text — text #FCF7E9: color-3: computed rgb(252, 247, 233); AI role: Off-white (#FCF7E9) used for primary headings and prominent text against the dark canvas. (95% role confidence, computed values)
- Primary Action — primary action #087DF5: color-7: computed rgb(8, 125, 245); AI role: Vibrant blue (#087DF5) used for primary 'Download' calls to action. (95% role confidence, computed values)
- Surface — surface #292929: color-10: computed rgb(41, 41, 41); AI role: Dark grey (#292929) used for card surfaces like the Pricing cards. (85% role confidence, computed values)
- Border — border #252525: color-38: computed rgb(37, 37, 37); AI role: Subtle grey (#252525) used for borders defining sections or cards. (75% 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": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "26px",
    "lineHeight": "29px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Guise Starter",
        "top": 11958,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "$ 0.00",
        "top": 12000,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Guise Complete",
        "top": 11958,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "p",
        "text": "Only what's needed, nothing more. Guise asks for two macOS permissions, each for one narrow job. The",
        "top": 11522,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Only what's needed, nothing more.",
        "top": 11523,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "It moves the way it should. Panels glide into place, controls respond naturally, and every transitio",
        "top": 11522,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "a",
        "text": "Features",
        "top": 27,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 27,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Change log",
        "top": 27,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "13.4px",
    "lineHeight": "17.5px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "A Product designed byJayasurya C Raghu",
        "top": 13777,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Jayasurya C Raghu",
        "top": 13794,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A product of Apara ©2026 Apara Limited.Abu Dhabi, UAE.",
        "top": 13831,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "11.5px",
    "lineHeight": "17.3px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Guise asks for two macOS permissions to support specific presentation features. The app explains wha",
        "top": 13952,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Figma is a trademark of Figma, Inc. Guise is an independent product, not affiliated with or endorsed",
        "top": 14004,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Guise Complete is a one-time purchase, not a subscription. It adds unlimited images, websites, and F",
        "top": 14056,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "11.5px",
    "lineHeight": "11.5px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Guise is available for Apple silicon Macs.",
        "top": -26,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Download Guise",
        "top": -26,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "15.4px",
    "lineHeight": "20px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Made for Mac.",
        "top": 13831,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "A clearer way for founders to review product work, and for designers to present it like it's already",
        "top": 380,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Present images in full resolution",
        "top": 12144,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Open live websites and web apps",
        "top": 12173,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Present interactive Figma prototypes",
        "top": 12201,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "13.4px",
    "lineHeight": "16.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "a",
        "text": "Features",
        "top": 13721,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 13755,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Change log",
        "top": 13789,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "What is Guise, and who is it made for?",
        "top": 12756,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Do founders need Figma installed or know how to use it?",
        "top": 12913,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Does Guise replace Figma?",
        "top": 12981,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "43px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Play your",
        "top": 416,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "prototype like it's",
        "top": 457,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "already a product.",
        "top": 499,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "For creative people",
        "top": 188,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Figma prototype review",
        "top": 336,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Designs",
        "top": 321,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Create a macOS window mockup from any PNG or JPEG, up to 25MB.",
        "top": 625,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Desktop-sized designs fit best, since it becomes a Mac window.",
        "top": 652,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Export at 2x and it stays sharp however large you show it.",
        "top": 679,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "46px",
    "lineHeight": "48px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "From flat to",
        "top": 223,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "flawless in one",
        "top": 269,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "drop.",
        "top": 315,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "43px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "It does considerably",
        "top": 10848,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "more than open",
        "top": 10889,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "windows.",
        "top": 10930,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "43px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Everything worth",
        "top": 12755,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "knowing before you bring",
        "top": 12803,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Guise into the loop.",
        "top": 12851,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "17px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Supported across all Mac devices",
        "top": 12088,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Made for Apple Silicon devices running macOS 14 or later",
        "top": 12120,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "One-time purchase with free future updates",
        "top": 12152,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "43px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Buy it once. Every",
        "top": 11917,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "update after is free.",
        "top": 11959,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "scoutieSans",
    "fontStack": "scoutieSans, \"scoutieSans Fallback\", Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "22px",
    "lineHeight": "29px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "del",
        "text": "12.99",
        "top": 12001,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Download Guise",
        "top": 484,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Download Guise",
        "top": 30,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "See more of Live prototype",
        "top": 659,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "17px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Launch Offer",
        "top": 11847,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Contact Guise",
        "top": 12943,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", Arial, Helvetica, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "17px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Download",
        "top": 12440,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 12499,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 38,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"@id\":\"https://guise.apara.design/#organizat",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "Guise is available for Apple silicon Macs.Download GuiseFeaturesPricingChange logResourceDownload Gu",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Guise is available for Apple silicon Macs.Download GuiseFeaturesPricingChange logResourceDownload Gu",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 0.1607843137254902,
    "cssValue": "rgba(255, 255, 255, 0.16)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 11039,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FCF7E9",
    "alpha": 1,
    "cssValue": "rgb(252, 247, 233)",
    "count": 38,
    "contexts": [
      {
        "tag": "span",
        "text": "Download Guise",
        "top": 30,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Only what's needed, nothing more.",
        "top": 11523,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Contact Guise",
        "top": 12934,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#7E7C74",
    "alpha": 0.6196078431372549,
    "cssValue": "rgba(126, 124, 117, 0.62)",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Guise is a macOS presentation and review tool for founders, designers, clients, and product teams. I",
        "top": 12789,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 11039,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1C1C1C",
    "alpha": 1,
    "cssValue": "rgb(28, 28, 28)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "What is Guise, and who is it made for?Guise is a macOS presentation and review tool for founders, de",
        "top": 12732,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#087DF5",
    "alpha": 1,
    "cssValue": "rgb(8, 125, 245)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 11836,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 12499,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#7E7C76",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(126, 124, 117, 0.5)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Create a macOS window mockup from any PNG or JPEG, up to 25MB.",
        "top": 625,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Only what's needed, nothing more. Guise asks for two macOS permissions, each for one narrow job. The",
        "top": 11522,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F8F8F8",
    "alpha": 1,
    "cssValue": "rgb(248, 248, 248)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Guise Complete$ 8.9912.99Unlimited presenting with a complete visual-feedback workflow.Everything in",
        "top": 11874,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#292929",
    "alpha": 1,
    "cssValue": "rgb(41, 41, 41)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 11874,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Download Guise",
        "top": 476,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 11039,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Download",
        "top": 12440,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#444444",
    "alpha": 1,
    "cssValue": "rgb(68, 68, 68)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Guise asks for two macOS permissions to support specific presentation features. The app explains wha",
        "top": 13952,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#1E1E1E",
    "alpha": 1,
    "cssValue": "rgb(30, 30, 30)",
    "count": 1,
    "contexts": [
      {
        "tag": "aside",
        "text": "Guise is available for Apple silicon Macs.Download Guise",
        "top": -40,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 0.8196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.82)",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "Everything included in Starter",
        "top": 12145,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.8392156862745098,
    "cssValue": "rgba(255, 255, 255, 0.84)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Present images in full resolution",
        "top": 12144,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#777777",
    "alpha": 1,
    "cssValue": "rgb(119, 119, 119)",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "A Product designed byJayasurya C Raghu",
        "top": 13777,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Features",
        "top": 13721,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Apara on 𝕏",
        "top": 13755,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#7E7C75",
    "alpha": 1,
    "cssValue": "rgb(126, 124, 117)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "A clearer way for founders to review product work, and for designers to present it like it's already",
        "top": 380,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Supported across all Mac devices",
        "top": 12088,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#F4F2ED",
    "alpha": 1,
    "cssValue": "rgb(244, 242, 237)",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Guise Starter",
        "top": 11958,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "$ 0.00",
        "top": 12000,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Download Guise",
        "top": 484,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Guise Complete",
        "top": 11958,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.8196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.82)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Everything you need to start presenting beautifully.",
        "top": 12050,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#000000",
    "alpha": 0.6784313725490196,
    "cssValue": "rgba(0, 0, 0, 0.68)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Unlimited presenting with a complete visual-feedback workflow.",
        "top": 12051,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#303030",
    "alpha": 1,
    "cssValue": "rgb(48, 48, 48)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 1014,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1014,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#797979",
    "alpha": 1,
    "cssValue": "rgb(121, 121, 121)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Features",
        "top": 27,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#007CFF",
    "alpha": 1,
    "cssValue": "rgb(0, 124, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "One price · One time, not every month",
        "top": 11877,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#343434",
    "alpha": 0.6,
    "cssValue": "rgba(51, 51, 51, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Download Guise",
        "top": 25,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFA90A",
    "alpha": 1,
    "cssValue": "rgb(255, 169, 10)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 321,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#4D4D4D",
    "alpha": 1,
    "cssValue": "rgb(77, 77, 77)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Made for Mac.",
        "top": 13831,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#83FF24",
    "alpha": 1,
    "cssValue": "rgb(131, 255, 36)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 321,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FF2424",
    "alpha": 1,
    "cssValue": "rgb(255, 36, 36)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 336,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#262626",
    "alpha": 0.7607843137254902,
    "cssValue": "rgba(38, 38, 38, 0.76)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 11451,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#626262",
    "alpha": 1,
    "cssValue": "rgb(98, 98, 98)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Guise is available for Apple silicon Macs.",
        "top": -26,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#494844",
    "alpha": 1,
    "cssValue": "rgb(73, 72, 68)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 188,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#FF7824",
    "alpha": 1,
    "cssValue": "rgb(255, 120, 36)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Questions, answered",
        "top": 12714,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#B5B5B5",
    "alpha": 1,
    "cssValue": "rgb(181, 181, 181)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Jayasurya C Raghu",
        "top": 13794,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#FF2FA4",
    "alpha": 1,
    "cssValue": "rgb(255, 47, 164)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "The rest of Guise",
        "top": 10813,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#080808",
    "alpha": 1,
    "cssValue": "rgb(8, 8, 8)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Contact Guise",
        "top": 12943,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#000000",
    "alpha": 0.5803921568627451,
    "cssValue": "rgba(0, 0, 0, 0.58)",
    "count": 1,
    "contexts": [
      {
        "tag": "del",
        "text": "12.99",
        "top": 12001,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#252525",
    "alpha": 1,
    "cssValue": "rgb(37, 37, 37)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "A Product designed byJayasurya C RaghuA product of Apara ©2026 Apara Limited.Abu Dhabi, UAE.Made for",
        "top": 13664,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#C2C2C2",
    "alpha": 1,
    "cssValue": "rgb(194, 194, 194)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Download Guise",
        "top": -26,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#C8C8C8",
    "alpha": 1,
    "cssValue": "rgb(200, 200, 200)",
    "count": 8,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 11456,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 11460,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 11461,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#FFFFFF",
    "alpha": 0.12941176470588237,
    "cssValue": "rgba(255, 255, 255, 0.13)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1030,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#3C3C3C",
    "alpha": 1,
    "cssValue": "rgb(60, 60, 60)",
    "count": 8,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 1014,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1014,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 12116,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#000000",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(0, 0, 0, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 12117,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Relies heavily on vh-based spacing or very generous margins to isolate content during scroll-linked transitions. Standard sections have significant padding to separate concerns.
- Corner style: Distinctly rounded. The UI leans heavily into the macOS aesthetic with rounded window corners and pill-shaped elements.
- Radius: Large radii for pill-shaped buttons and prominent rounding on feature cards and pricing tiers.
- Borders: Subtle, low-contrast 1px solid borders (#252525 or similar) are used to delineate cards against the dark background without adding visual noise.
- Buttons: Buttons are predominantly pill-shaped. Primary buttons feature solid fills (blue or white), while secondary actions use dark fills with subtle borders or text-only treatments.
- Content width: Utilizes a split layout that spans the majority of the viewport width, though text columns are constrained for readability.
- Density: Very low density. The design prioritizes focus on one key message or visual at a time, using copious negative space to command attention.
- Evidence: Measured fonts show consistent use of Inter for UI and ScoutieSans for display. Colors are heavily biased towards a stark dark mode palette with strategic, high-contrast accents for CTAs.

## Sections

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

1. **Navbar — Guise Navbar** (Home)
   A small logo, a few text links and one pill button on black keep the choices few and the action obvious.
   Capture: 1440×71px; page bounds 0–71px of 10250px; source section ID: `bbf7bd92-4483-4326-a745-e219b5f76abc`; image: https://media.designdetails.io/library/6e70bf1ac14589501b4d78e8218cd27ed52428aa3049cf8c17893c49c33ad184/bbf7bd92-4483-4326-a745-e219b5f76abc.webp
   SECTION.md v3.2: `bbf7bd92-4483-4326-a745-e219b5f76abc` (deterministic evidence; editorial review pending)
2. **Hero — Split hero with product window mockup** (Home)
   A large headline and download button on the left sit beside a real product window, so visitors see what it does at once.
   Capture: 1440×929px; page bounds 71–1000px of 10250px; source section ID: `5add18ed-22bb-457a-b206-55593c050872`; image: https://media.designdetails.io/library/eaaff3d2b312063c647f16df78c0d2893672f482a4f14706460bc4d486ceaae0/5add18ed-22bb-457a-b206-55593c050872.webp
   SECTION.md v3.2: `5add18ed-22bb-457a-b206-55593c050872` (deterministic evidence; editorial review pending)
3. **Gallery — Full-width desktop screenshots with caption** (Home)
   Large, centred screens on black show the product in a real desktop setting, and the short caption between them gives it a human angle.
   Capture: 1440×2000px; page bounds 1000–3000px of 10250px; source section ID: `1f1710aa-e17c-4f3e-a9aa-90dec2b466d0`; image: https://media.designdetails.io/library/d5ea82fbc7d9d524cbb76bba5b06e2b5bf8d0acc9f8966d629420af551180388/1f1710aa-e17c-4f3e-a9aa-90dec2b466d0.webp
   SECTION.md v3.2: `1f1710aa-e17c-4f3e-a9aa-90dec2b466d0` (deterministic evidence; editorial review pending)
4. **Features — Alternating feature rows with screenshots** (Home)
   Each row pairs a short headline, a line of copy and a button with a large screenshot, so each capability is explained and shown.
   Capture: 1440×2000px; page bounds 3000–5000px of 10250px; source section ID: `3d114f5f-fc21-43dd-99d5-3a39665e6dfc`; image: https://media.designdetails.io/library/7780e4f3621aafb5851523e3a160c3b0e8328bea872cb6e73cffa80792917d3a/3d114f5f-fc21-43dd-99d5-3a39665e6dfc.webp
   SECTION.md v3.2: `3d114f5f-fc21-43dd-99d5-3a39665e6dfc` (deterministic evidence; editorial review pending)
5. **Dashboard — Laptop frame showing product interface** (Home)
   The laptop mockup fading into black puts the full interface in front of visitors and gives the page a calm pause.
   Capture: 1440×1213px; page bounds 5000–6213px of 10250px; source section ID: `84502109-3999-4112-93c8-9d388945fbf3`; image: https://media.designdetails.io/library/c42e7c5f52a483e1e4a84c20e85ce73870f15bdaf42eca75894985c430bf0ae5/84502109-3999-4112-93c8-9d388945fbf3.webp
   SECTION.md v3.2: `84502109-3999-4112-93c8-9d388945fbf3` (deterministic evidence; editorial review pending)
6. **Features — Horizontal card carousel with captions** (Home)
   Visual cards in a sliding row, each with a bold lead-in caption, let visitors skim extra capabilities without long text.
   Capture: 1440×960px; page bounds 6213–7173px of 10250px; source section ID: `4bdcde41-4827-44e2-84ea-bde53bead637`; image: https://media.designdetails.io/library/a05d075ae7d09e3fabd5d59d21221aee6cbd2f6a0fccf9df661b4518466da9bd/4bdcde41-4827-44e2-84ea-bde53bead637.webp
   SECTION.md v3.2: `4bdcde41-4827-44e2-84ea-bde53bead637` (deterministic evidence; editorial review pending)
7. **Pricing — Two-tier pricing with feature checklists** (Home)
   A dark free card beside a bright paid card with a launch offer badge and checklists makes the upgrade easy to compare.
   Capture: 1440×864px; page bounds 7173–8037px of 10250px; source section ID: `86d62b53-cad1-4a86-bcf6-66ef651fd29e`; image: https://media.designdetails.io/library/67124f9f4ea995159d9f0f51b657a3968e4762bf077cebaa8081297c47d72251/86d62b53-cad1-4a86-bcf6-66ef651fd29e.webp
   SECTION.md v3.2: `86d62b53-cad1-4a86-bcf6-66ef651fd29e` (deterministic evidence; editorial review pending)
8. **FAQ — Accordion questions beside heading** (Home)
   A sticky heading with a contact button sits next to a thin-ruled list of questions, so answers stay scannable and help is close by.
   Capture: 1440×1027px; page bounds 8037–9064px of 10250px; source section ID: `0b466cb3-07d0-427c-aabd-9748a8520811`; image: https://media.designdetails.io/library/3906364882e042b151ac80c37d18104a65efaa108fca0d86ccd8c3b91744c091/0b466cb3-07d0-427c-aabd-9748a8520811.webp
   SECTION.md v3.2: `0b466cb3-07d0-427c-aabd-9748a8520811` (deterministic evidence; editorial review pending)
9. **Footer — Link footer with large product visual** (Home)
   Small link columns and legal notes sit above a big laptop image under a script sign-off, ending the page with a friendly tone.
   Capture: 1440×1186px; page bounds 9064–10250px of 10250px; source section ID: `c48c2ef4-4c64-42de-bd1a-446fb00adbc9`; image: https://media.designdetails.io/library/92224d30681f5c810e802f54710a0cc30c02931cc1178f9376fb3d0ae4a11421/c48c2ef4-4c64-42de-bd1a-446fb00adbc9.webp
   SECTION.md v3.2: `c48c2ef4-4c64-42de-bd1a-446fb00adbc9` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/de3653f0fbf73ab93b2b977bd51f4d59386ffdf9b800e74f1806f9c645691a76/desktop_full-50e25b99-2026-11-11T08-06-56-469Z.webp
- Mobile screenshot: https://media.designdetails.io/library/7c680eadde29c13bb5c65c6977fa322f120fbb71e252fff9dba10a431c15e300/mobile_full-50e25b99-2026-11-11T08-07-35-767Z.webp
- Open Graph image: https://media.designdetails.io/library/359732a0b0dcf4c0d879028ce3a4391a81fe7f81ee11e91266e869ec19d02fe1/og_image-50e25b99-2026-11-11T08-07-05-520Z.webp
- Full-page video: https://media.designdetails.io/library/8faa68a9bcf2ea343d19796d71a236d7e70cc0f6b37149fa472f753964bb40d6/motion-1794392375791.mp4
- Video poster: https://media.designdetails.io/library/e907408afee5fbd7c1585cf04a0ca54abac24f035110a1b16422267d92d04654/motion-poster-1794392375791.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
- Split Hero
- Feature Card
- Pricing Table
- FAQ Accordion
- Footer
- Scroll Linked Narrative Split

## Quality rubric

Overall: 57.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Guise's landing page is a well-assembled, disciplined execution of the now-standard Mac-utility marketing format: black canvas, off-white text, a single blue CTA accent, and a pinned-scroll narrative that cross-fades through macOS window mockups while text slides in to match. The motion system is the clear high point — it's genuinely systemic across the hero, feature, and showcase sections, and reverse-scroll behavior confirms real scroll-linkage rather than a timed autoplay trick. Content integration is also handled with care: permission claims, pricing checklists, and FAQ answers all correspond directly to adjacent visuals rather than existing as decoration. Where the site falls short of higher tiers is originality — the entire presentational grammar (dark canvas + macOS chrome mockup + split-scroll storytelling) has become a near-default template for this exact category of software, and nothing here breaks from that convention structurally or conceptually. Typography and color are consistent and controlled but conventional, and layout patterns (feature cards, pricing table, FAQ accordion) are the standard SaaS trio rather than a reinvented composition. The result is a competent, carefully polished site that executes a familiar idiom well, but without the distinctive, hard-to-substitute ideas needed to justify a 'good' or higher rating.

- Typography (15%): 63 — A two-tier system pairs scoutieSans display type (40-46px, tight negative tracking from -0.4 to -1.4px) with Inter for body and UI copy at consistent 12-16px sizes. The hierarchy is legible and consistently applied across hero, feature, pricing and FAQ sections, but the type palette stays narrow — Inter carries nearly every UI/body role, and the display face itself is a fairly generic geometric sans with modest personality.
- Color (10%): 60 — The site commits to a disciplined black canvas, off-white text, and a single vivid blue accent (#087DF5) for primary CTAs, which reads as clean and controlled. Dark-grey surfaces (#292929, #1C1C1C) and subtle low-contrast borders (#252525) support card separation without noise. However this is a standard dark-mode-plus-one-accent SaaS formula; the more varied hues visible (orange, pink, green) belong to nested product-screenshot content rather than the site's own chrome, so the actual site palette is narrower than it first appears.
- Layout (20%): 64 — A clear, repeatable component system — split hero, feature cards, pricing table, FAQ accordion, footer — is deployed with generous whitespace and consistent spacing rhythm, giving the page an uncluttered, confident feel. The split-narrative-plus-macOS-window staging is executed cleanly, and the pricing/FAQ sections are tightly organized. The pattern itself, though, is a familiar template for this product category rather than a structurally novel composition.
- Motion (20%): 66 — Multiple scroll-linked moments (hero dissolve into full-screen macOS imagery, cross-fading feature visuals, text/image slide-ins, reverse-scroll consistency) form a genuinely systemic motion language rather than an isolated hero effect, observed across at least five distinct narrative beats. This is the site's strongest axis. However, the underlying pattern — pinned scroll driving scale/fade/slide of product mockups — is a well-established convention for premium product sites, and no evidence confirms frame quality, easing refinement, or responsiveness beyond the described keyframes.
- Originality (25%): 37 — The site's entire presentation format — black canvas, macOS window chrome mockups staged inside a laptop/desktop frame, and a scroll-pinned split narrative — closely matches the now-standard template for Mac utility/productivity landing pages (common across CleanShot X, Shottr, Bartender, Raycast-style sites, etc). Execution is competent, but there is no distinctive structural, interaction, or conceptual idea here that isn't already genre convention; novelty cannot be credited for polish alone per the rubric.
- Content (10%): 66 — Copy claims are consistently paired with a corresponding visual proof point — permission claims next to a permissions icon pairing, pricing claims next to a matching checklist, feature statements next to the exact UI control being described. This direct text-to-visual correspondence is well executed and makes the content feel purposeful rather than decorative.

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
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A black canvas lets the actual product screenshots do the talking, with real macOS window chrome and app icons giving the mockups instant credibility. Large white headline type up top fades into generous dark space before each feature, pacing the long page into clear, scannable chapters.

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