# Componine — Design Reference

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

## Design direction

Componine is a design studio portfolio utilizing a dark and moody, classical/editorial aesthetic mixed with modern layout techniques. The design features large serif typography (Memoir), dark textured backgrounds, framed imagery reminiscent of classical paintings, and a structured layout with horizontal scrolling sections. A notable interaction is the prominent glowing effect during scrolling.

## Classification

- Industry: creative
- Site type: Landing
- Business model: AI, Software, Agency
- Styles: editorial, bold, retro, classical-dark, structured-gallery
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: Memoir — weight 400; size 60px; line-height 67.2px; tracking -1%; Regular (100% role confidence, computed values)
- Heading: Memoir — weight 400; size 28px; line-height 33.6px; tracking -1%; Regular (95% role confidence, computed values)
- Body: Helvetica Neue — weight 400; size 14px; line-height 19.6px; tracking normal; Regular (100% role confidence, computed values)

## Functional palette

- Text — text #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary text on dark backgrounds. (100% role confidence, computed values)
- Canvas — canvas #0C0806: color-2: computed lab(2.40931 0.896804 1.14596); AI role: Very dark, near-black (#0C0806) used as the primary background for most sections. (95% role confidence, computed values)
- Surface — surface #F0EFEA: color-3: computed lab(94.3607 -0.24718 2.65788); AI role: Light off-white/beige (#F0EFEA) used as the background for the 'Selected Works' horizontal scroll section. (95% role confidence, computed values)
- Border — border #1E140F: color-6: computed rgb(30, 20, 15); AI role: Dark brown/black (#1E140F) used for borders, likely around the pricing cards or frames. (80% role confidence, computed values)
- Accent — accent #40B462: color-25: computed rgb(64, 180, 98); AI role: Green (#40B462) used sparingly for accents like the dot in the pricing features. (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": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "60px",
    "lineHeight": "67.2px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "We",
        "top": -1336,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Think.",
        "top": -1336,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We",
        "top": -1336,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "33.6px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h4",
        "text": "Hub.xyz • Crypto YC Backed Raised $1.7M on Pre-seed with 500K+ Users",
        "top": 665,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Componine • Digital Creative Partner For website, product, & branding",
        "top": 665,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Baxso • all-in-one Tool For creative agency & freelance works",
        "top": 665,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "42px",
    "lineHeight": "42px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h4",
        "text": "$4,999",
        "top": 6811,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "$5,999",
        "top": 6811,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "No Contracts, Cancel Anytime",
        "top": 7186,
        "property": "font"
      },
      {
        "tag": "h5",
        "text": "Let's get started!",
        "top": 8288,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "72px",
    "lineHeight": "74.9px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "2 Spot Available.Book Your Seat Now!",
        "top": 8291,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 65,
    "contexts": [
      {
        "tag": "span",
        "text": "Trusted",
        "top": -1333,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "by",
        "top": -1333,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "20+",
        "top": -1333,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Extended Team",
        "top": 6768,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Project Based",
        "top": 6768,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Based in Bali, Indonesia",
        "top": 8521,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "One studio to solve everything",
        "top": 5856,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 242,
    "contexts": [
      {
        "tag": "span",
        "text": "R",
        "top": 764,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "R",
        "top": 784,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 764,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 84,
    "contexts": [
      {
        "tag": "span",
        "text": "I",
        "top": 46,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "I",
        "top": 66,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "n",
        "top": 46,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "57.6px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "our",
        "top": 4540,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "design",
        "top": 4540,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "studio",
        "top": 4540,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Memoir",
    "fontStack": "Memoir, serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "51.8px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Good",
        "top": 6776,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Design",
        "top": 6776,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Shouldn't",
        "top": 6827,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Business Card",
        "top": 5144,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hover Animation",
        "top": 5144,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Dark Dashboard",
        "top": 5144,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Web3 & AI",
        "top": 644,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Agency",
        "top": 644,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SaaS Productivity",
        "top": 644,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "God of Works",
        "top": 4550,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "God of Plan",
        "top": 6735,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Book For Q4 2026",
        "top": -1376,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Book For Q4 2026",
        "top": 8243,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "spaceGrotesk",
    "fontStack": "spaceGrotesk, \"spaceGrotesk Fallback\", monospace",
    "weight": "500",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "•",
        "top": 487,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "•",
        "top": 543,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Dhimas Putra",
        "top": 4732,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Helvetica Neue",
    "fontStack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Founder, Componine",
        "top": 4756,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "spaceGrotesk",
    "fontStack": "spaceGrotesk, \"spaceGrotesk Fallback\", monospace",
    "weight": "600",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "•",
        "top": 430,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 223,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 53,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "BBooookk aann IInnttrroo CCaallllBBooookk aa CCaallll",
        "top": 46,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "BBooookk aann IInnttrroo CCaallllBBooookk aa CCaallll",
        "top": 46,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0C0806",
    "alpha": 1,
    "cssValue": "lab(2.40931 0.896804 1.14596)",
    "count": 65,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Componine Creative\",\"url\":\"https://w",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "•••",
        "top": 424,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Book For Q4 2026We Think. We Design. We Launch Your ProductThink. design. and launch your better pro",
        "top": -2090,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F0EFEA",
    "alpha": 1,
    "cssValue": "lab(94.3607 -0.24718 2.65788)",
    "count": 187,
    "contexts": [
      {
        "tag": "span",
        "text": "I",
        "top": 46,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Web3 & AIHub.xyz • Crypto YC Backed Raised $1.7M on Pre-seed with 500K+ UsersWeb3 and AI company bui",
        "top": -1090,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Web3 & AIHub.xyz • Crypto YC Backed Raised $1.7M on Pre-seed with 500K+ UsersWeb3 and AI company bui",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#E5E3DF",
    "alpha": 1,
    "cssValue": "rgb(229, 227, 223)",
    "count": 306,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 252,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 252,
        "property": "::after-background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 38,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1E140F",
    "alpha": 1,
    "cssValue": "rgb(30, 20, 15)",
    "count": 206,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6586,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 6586,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FEFDF8",
    "alpha": 1,
    "cssValue": "rgb(254, 253, 248)",
    "count": 73,
    "contexts": [
      {
        "tag": "section",
        "text": "God of Worksour design studio exist to help you raise funds, grow your company, and secure your cust",
        "top": 4423,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 4873,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#0C0C0C",
    "alpha": 1,
    "cssValue": "rgb(12, 12, 12)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Extended Team$4,999USDPer MonthPerfect for ongoing design supportTTrryy aa WWeeeekk ffoorr $$11,,229",
        "top": 6728,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Extended Team$4,999USDPer MonthPerfect for ongoing design supportTTrryy aa WWeeeekk ffoorr $$11,,229",
        "top": 6728,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#2F2F2F",
    "alpha": 1,
    "cssValue": "lab(19.38 0 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Extended Team$4,999USDPer MonthPerfect for ongoing design supportTTrryy aa WWeeeekk ffoorr $$11,,229",
        "top": 6728,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#2B2B2B",
    "alpha": 1,
    "cssValue": "lab(17.524 0 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Extended Team$4,999USDPer MonthPerfect for ongoing design supportTTrryy aa WWeeeekk ffoorr $$11,,229",
        "top": 6746,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#443824",
    "alpha": 1,
    "cssValue": "lab(24.4178 3.04119 14.4886)",
    "count": 120,
    "contexts": [
      {
        "tag": "h4",
        "text": "Hub.xyz • Crypto YC Backed Raised $1.7M on Pre-seed with 500K+ Users",
        "top": 665,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "R",
        "top": 764,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#373828",
    "alpha": 1,
    "cssValue": "rgb(55, 56, 40)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5605,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#282828",
    "alpha": 0.3215686274509804,
    "cssValue": "lab(16.132 0 0 / 0.32)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Let's get started!Send us your inquiry and we'll get back to you within 24h maximum.SScchheedduullee",
        "top": 8068,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "rgba(255, 255, 255, 0.4)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Book For Q4 2026",
        "top": -1383,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 8072,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "lab(100 0 0 / 0.6)",
    "count": 52,
    "contexts": [
      {
        "tag": "span",
        "text": "Trusted",
        "top": -1333,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Monday Morning, 05:53:56 AM (GMT+8)",
        "top": 8542,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#545454",
    "alpha": 0.7490196078431373,
    "cssValue": "lab(35.736 0 0 / 0.75)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 36,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "IInnddeexxWWoorrkkSSeerrvviicceePPllaannCCoonnttaacctt",
        "top": 36,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "BBooookk aann IInnttrroo CCaallllBBooookk aa CCaallll",
        "top": 37,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#443824",
    "alpha": 0.5019607843137255,
    "cssValue": "lab(24.4178 3.04119 14.4886 / 0.5)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Web3 & AI",
        "top": 644,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Web3 and AI company building SocialFi and DePIN products designed to turn online presence into real ",
        "top": 752,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#000000",
    "alpha": 0.0392156862745098,
    "cssValue": "rgba(12, 8, 6, 0.04)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "RReeaadd CCaassee SSttuuddyy",
        "top": 752,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#A2A2A2",
    "alpha": 0.3215686274509804,
    "cssValue": "rgba(161, 161, 161, 0.32)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "BBooookk aann IInnttrroo CCaallllBBooookk aa CCaallll",
        "top": 32,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "oklch(1 0 0 / 0.08)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1000,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#FFBF77",
    "alpha": 1,
    "cssValue": "oklch(0.848 0.116 68.46)",
    "count": 23,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6986,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "lab(100 0 0 / 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 41,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#0C0C0C",
    "alpha": 0.5019607843137255,
    "cssValue": "lab(3.29908 0 0 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "God of Works",
        "top": 4550,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FFFFFF",
    "alpha": 0.2980392156862745,
    "cssValue": "lab(100 0 0 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 39,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#40B462",
    "alpha": 1,
    "cssValue": "rgb(64, 180, 98)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "•",
        "top": 430,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 5151,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#F9A602",
    "alpha": 1,
    "cssValue": "rgb(249, 166, 2)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -1374,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "lab(100 0 0 / 0.05)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 41,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#DAA520",
    "alpha": 1,
    "cssValue": "rgb(218, 165, 32)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -1373,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#888888",
    "alpha": 1,
    "cssValue": "oklch(0.627 0 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4552,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#999999",
    "alpha": 1,
    "cssValue": "oklch(0.683 0 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6737,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#FF7B00",
    "alpha": 1,
    "cssValue": "lab(69.5611 53.8134 103.002)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 647,
        "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: Generous vertical spacing between major sections, with tighter, structured padding within grids and cards.
- Corner style: Mix of pill-shaped elements (buttons, nav, tags) and sharp rectangular shapes (frames, cards).
- Radius: Buttons and tags use a fully rounded/pill radius. Cards and frames use square (0px) or slightly rounded corners depending on the context.
- Borders: Subtle borders on tags and pricing cards; prominent physical-looking borders/frames on project images.
- Buttons: Pill-shaped, usually with a dark background or glassmorphic effect, and light text.
- Content width: Centered content with wide margins, adapting to a multi-column grid for features and a horizontal track for works.
- Density: Moderate density. The layout is spacious overall, but groups related information (like pricing features or the feature grid) tightly together.
- Evidence: Observed from the pill-shaped nav and buttons, the framed images, the structured pricing table, and the overall dark canvas with high contrast text.

## Sections

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

1. **Hero — Product Studio Launch Hero** (Home)
   AI suggestion (98% confidence): Complete, high-impact opening hero with cinematic artwork, navigation, booking prompt, bold value proposition, supporting copy, and a client logo row; it ends cleanly before the Selected Works section.
   Capture: 1440×1023px; page bounds 0–1023px of 8165px; source section ID: `1a518ffa-2f84-438f-8a44-b70bbe90f82d`; image: https://media.designdetails.io/library/f6bcd24f6f5f99a24104e25111611fe01a49aee2960f56fe553505fa0ee99827/1a518ffa-2f84-438f-8a44-b70bbe90f82d.webp
   SECTION.md v3.2: `1a518ffa-2f84-438f-8a44-b70bbe90f82d` (deterministic evidence; editorial review pending)
2. **Features — our design studio exist to help you raise funds, grow your company, and…** (Home)
   Reusable feature composition from Home, organized around “our design studio exist to help you raise funds, grow your company, and…”.
   Capture: 1440×935px; page bounds 2193–3128px of 8165px; source section ID: `e891aa12-4790-45d7-ab0e-a74cd392b9a7`; image: https://media.designdetails.io/library/cb77dc948173a798d57472150252786cfaa79dc3171e7abf96a230b125f755cd/section-manual-e891aa12-4790-45d7-ab0e-a74cd392b9a7-1791783503754.webp
   SECTION.md v3.2: `e891aa12-4790-45d7-ab0e-a74cd392b9a7` (deterministic evidence; editorial review pending)
3. **Features — Marketing Website** (Home)
   Reusable feature composition from Home, organized around “Marketing Website”.
   Capture: 1440×405px; page bounds 3248–3653px of 8165px; source section ID: `e7f2e3b8-e9e9-4438-9d9a-78e7a80a9b48`; image: https://media.designdetails.io/library/04b3d117ff778ffd4763c0c32546b428454cdc9b40f6173056f1930608a2c848/section-manual-e7f2e3b8-e9e9-4438-9d9a-78e7a80a9b48-1791783498682.webp
   SECTION.md v3.2: `e7f2e3b8-e9e9-4438-9d9a-78e7a80a9b48` (deterministic evidence; editorial review pending)
4. **Features — Good Design Shouldn't Cost a Kidney** (Home)
   Reusable feature composition from Home, organized around “Good Design Shouldn't Cost a Kidney”.
   Capture: 1440×734px; page bounds 3638–4372px of 8165px; source section ID: `eff2a73f-e22b-4f2b-aa7d-94a59a01478a`; image: https://media.designdetails.io/library/56e6f93a614ef643c60b94b60408a8540fde95cee8c414c078c1cf8d46168e50/section-manual-eff2a73f-e22b-4f2b-aa7d-94a59a01478a-1791783481905.webp
   SECTION.md v3.2: `eff2a73f-e22b-4f2b-aa7d-94a59a01478a` (deterministic evidence; editorial review pending)
5. **Features — 2 Spot Available. Book Your Seat Now!** (Home)
   Reusable feature composition from Home, organized around “2 Spot Available. Book Your Seat Now!”.
   Capture: 1440×1035px; page bounds 4411–5446px of 8165px; source section ID: `362391e5-ef43-4509-9c9e-d6e3ed2bef8b`; image: https://media.designdetails.io/library/2c61fc87bae262431a92b14c5b4f9e943496e342a4096e15fdbfc6702ddc9309/section-manual-362391e5-ef43-4509-9c9e-d6e3ed2bef8b-1791783477304.webp
   SECTION.md v3.2: `362391e5-ef43-4509-9c9e-d6e3ed2bef8b` (deterministic evidence; editorial review pending)
6. **Pricing — Good Design Shouldn’t Cost a Kidney Pricing** (Home)
   AI suggestion (98% confidence): Complete pricing section with a strong headline, supporting promise, two clearly differentiated plans, feature lists, prices, and conversion buttons.
   Capture: 1440×730px; page bounds 5443–6173px of 8165px; source section ID: `7be271f6-d5fd-48ec-96d1-cfe5bc50f03d`; image: https://media.designdetails.io/library/c0e908c0841fbe542f4b47250935535e2b1ba6ac27196de5c7b8791fab617efe/7be271f6-d5fd-48ec-96d1-cfe5bc50f03d.webp
   SECTION.md v3.2: `7be271f6-d5fd-48ec-96d1-cfe5bc50f03d` (deterministic evidence; editorial review pending)
7. **Footer — Book Your Seat Closing Footer** (Home)
   AI suggestion (97% confidence): Complete, substantial page footer combining a bold availability CTA, scheduling card, studio details, social links, location/time information, and copyright.
   Capture: 1440×735px; page bounds 7430–8165px of 8165px; source section ID: `3e026f19-3a51-49e0-89ae-a4e8335a9cb7`; image: https://media.designdetails.io/library/83b88a4205db69ad91fc96d09defadb80674e15c22f5b68cb225b42e7f272703/3e026f19-3a51-49e0-89ae-a4e8335a9cb7.webp
   SECTION.md v3.2: `3e026f19-3a51-49e0-89ae-a4e8335a9cb7` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/1fbe7d1bb86f8acc4eb1bf8e509fa96b13eb59b57c78d4b8bdc61e9888c0b4a2/desktop_full-030e7826-2026-10-11T21-53-56-527Z.webp
- Mobile screenshot: https://media.designdetails.io/library/c766043db1b4b88abce9f2bea5574b784f81904cfca26fab0e3b3bc83614c384/mobile_full-030e7826-2026-10-11T21-54-44-177Z.webp
- Open Graph image: https://media.designdetails.io/library/4ae86faa2a88a44bddae9fa434194594dbf2a6f68c28d30cc777e41f58c81de4/og_image-030e7826-2026-10-11T21-54-06-304Z.webp
- Full-page video: https://media.designdetails.io/library/e81216f303d1e28dcb7bdbf4212f526c512744debded58079444923f0a95b14b/motion-1791756466005.mp4
- Video poster: https://media.designdetails.io/library/e2c4881fae5e2416a319109baf1cb2d72e29a9f4205395d86c02fb2a8cd59df0/motion-poster-1791756466005.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Logo Strip
- Pricing Table
- Footer
- Primary Button
- Tag
- Framed Media
- Horizontal Scroll Gallery
- List Based Feature Index
- Project Card
- Feature Grid
- Floating Card

## Quality rubric

Overall: 60.2/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Componine builds a genuinely cohesive conceptual device — a dark 'classical gallery' framing for a design studio's portfolio — carried through consistent copy voice, framed imagery, and a legible dark/light section rhythm, which lifts it above a generic agency template. But the craft is uneven: motion is dominated by a single horizontal-scroll gallery and a footer glow rather than a system applied throughout, the accent color palette is more scattered than restrained, and the pricing/feature-grid sections fall back to generic SaaS card conventions that break from the gallery idea elsewhere on the page.

- Typography (15%): 60 — A single serif display face (Memoir) is used at multiple deliberate sizes (60px hero, 48px section heads, 42px pricing, 28px card titles, 72px footer CTA) paired consistently with Helvetica Neue body/label text, giving a legible editorial hierarchy with tracked uppercase labels. The system is coherent but the scale feels ad hoc (42/48/60/72 without an obvious modular ratio) and the typographic palette relies on one serif doing all the expressive work, so it reads competent rather than masterful.
- Color (10%): 56 — The site runs on a clear dark/light alternation (near-black #0C0806 canvas vs. cream #F0EFEA/#FEFDF8 sections) with white and dark-brown text pairings that maintain contrast. However, the accent palette is scattered — multiple near-duplicate warm tones (#FF7B00, #F9A602, #DAA520, #FFBF77) appear without an obvious role distinction, alongside an unrelated green (#40B462), suggesting accent colors were added per-section rather than governed by a single restrained system.
- Layout (20%): 65 — The page uses a consistent 'framed painting' device — hero artwork, the horizontal 'Selected Works' track, and the problem/solution panel near the footer — that ties together otherwise disparate section types (pricing table, feature grid, numbered service list, logo strip). This repeated framing motif, combined with alternating dark/light backgrounds and a floating pill nav, gives the layout a legible through-line across many distinct content types rather than isolated templated blocks.
- Motion (20%): 50 — The Gemini observation explicitly notes the recording 'primarily shows standard scrolling behavior' with the horizontal-scroll works gallery as the single most prominent effect, plus a cursor-glow trail in the footer and a brief chromatic/glitch distortion on image transition during the horizontal scroll. This is a real interaction choice but it is one mechanism applied in one section, not a motion system carried through hero, pricing, feature grid, and footer with comparable craft.
- Originality (25%): 64 — Recasting a design-studio portfolio as a dim 'gallery of classical paintings' — Creation-of-Adam-style hero art, projects literally framed as artworks, mythic/sardonic copy ('God of Works', 'Diabolical Outcomes', 'Good Design Shouldn't Cost a Kidney') — is a genuinely distinct conceptual thread rather than a generic dark hero. That said, the supporting interaction vocabulary (horizontal scroll gallery, cursor-glow footer, pill nav/buttons) is increasingly common in current agency-template design, so the idea is more conceptually fresh than mechanically inventive.
- Content (10%): 66 — Copy and visual theme are tightly fused: the irreverent, classically-inflected voice ('God of Works', 'Diabolical Outcomes', kidney joke, '2 Spot Available') consistently reinforces the painting/gallery concept rather than sitting as generic SaaS boilerplate, and real client names/logos and project specifics (Hub.xyz funding figures, Baxso description) ground the content in concrete work.

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

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

## Verification checklist

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

## Curator notes

A Renaissance-style painting of reaching hands sets a dramatic mood, while project shots hang in gallery frames on a lined wall, like artwork rather than screenshots. Dark chapters with capital headlines, a pricing block, and a red-circled painting slow the scroll into clear, memorable sections.

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