# capricorn 01 Zagato — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://car.capricorngroup.net/
Captured: 2026-11-03
CSS measured: 2026-11-03T04:58:38.295Z at 1440×1000 — https://car.capricorngroup.net/
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 highly editorial, minimalist, and cinematic design language tailored for a luxury hypercar. It leverages large-scale typographic statements, expansive high-fidelity photography, and a subdued, sophisticated color palette dominated by deep greens and stark contrasts (black, white, grays). The typography mixes a primary sans-serif for headings and body copy with a monospaced font for technical details, establishing a balance between elegance and engineering precision.

## Classification

- Industry: hardware
- Site type: Landing
- Business model: Not identified
- Styles: minimal, editorial, photographic, cinematic, technical-luxury
- Platform: WordPress
- Technology: Next.js, GSAP

## Typography

- Display: mainFont — weight 400; size 46px; line-height 50.6px; tracking 1.8px; Regular (90% role confidence, computed values)
- Heading: mainFont — weight 400; size 54px; line-height 59.4px; tracking 2.2px; Regular (90% role confidence, computed values)
- Body: mainFont — weight 400; size 24px; line-height 31.2px; tracking 1px; Regular (90% role confidence, computed values)
- Mono: mainMonoFont — weight 400; size 12px; line-height 9.6px; tracking -0.2px; uppercase (90% role confidence, computed values)

## Functional palette

- Text — text #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Primary white color used for text against dark backgrounds. (90% role confidence, computed values)
- Canvas — canvas #0F0F0F: color-2: computed rgb(15, 15, 15); AI role: Used as the dark background color for several sections and text on lighter backgrounds. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "mainMonoFont",
    "fontStack": "mainMonoFont, \"mainMonoFont Fallback\", monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "9.6px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 20,
    "contexts": [
      {
        "tag": "h2",
        "text": "German art of engineering",
        "top": 6423,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Italian engineering of art",
        "top": 8246,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Art made in Germany",
        "top": 9315,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "26.4px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "dd",
        "text": "900+ HP",
        "top": 12368,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "1.000 Nm",
        "top": 12501,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "9.000 RPM",
        "top": 12634,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "mainMonoFont",
    "fontStack": "mainMonoFont, \"mainMonoFont Fallback\", monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19.2px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "General",
        "top": 17550,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Sales",
        "top": 17793,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "PR",
        "top": 17921,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "54px",
    "lineHeight": "59.4px",
    "letterSpacing": "2.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "The story behind the creation of the capricorn 01 Zagato",
        "top": 9373,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Louyet Group",
        "top": 10166,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "42px",
    "lineHeight": "50.4px",
    "letterSpacing": "1.7px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "The capricorn 01 Zagato engineering without compromise",
        "top": 2225,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The capricorn 01 Zagato unites two disciplines rarely mastered together: engineering purity and emot",
        "top": 4032,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "46px",
    "lineHeight": "50.6px",
    "letterSpacing": "1.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "The essential machine",
        "top": 771,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "mainMonoFont",
    "fontStack": "mainMonoFont, \"mainMonoFont Fallback\", monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Socials",
        "top": 18011,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "mainMonoFont",
    "fontStack": "mainMonoFont, \"mainMonoFont Fallback\", monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "13.2px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Every gram refined into time",
        "top": 2172,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "The perfect union",
        "top": 4042,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "CEO Robertino Wild",
        "top": 6979,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Since 1933, capricorn GROUP has shaped the unseen–precision components, carbon systems, and engineer",
        "top": 6423,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "From Formula 1 to Le Mans, the company has been a trusted partner to teams who demand total performa",
        "top": 6553,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Zagato is a preeminent Italian coach-builder founded in Milan in 1919, specialised in limited-editio",
        "top": 8246,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.4px",
    "letterSpacing": "0.8px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "T: +49 211 301548-0E: inquiry@capricorngroup.de",
        "top": 17550,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "capricorn GROUPSpeditionstraße 23",
        "top": 17619,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "40221 DüsseldorfGermany",
        "top": 17688,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "mainMonoFont",
    "fontStack": "mainMonoFont, \"mainMonoFont Fallback\", monospace, monospace",
    "weight": "300",
    "size": "12px",
    "lineHeight": "13.2px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Accept privacy policy",
        "top": 18035,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "privacy policy",
        "top": 18035,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "54px",
    "lineHeight": "59.4px",
    "letterSpacing": "1.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "The essential machine.An art piece you can drive.",
        "top": 16409,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Every figure of the capricorn 01 Zagato reflects a singular vision: purity of driving.From the super",
        "top": 11920,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Limited to just 19 coupes, the capricorn 01 Zagato is not a hypercar to be collected and hidden. Roa",
        "top": 3179,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "mainFont",
    "fontStack": "mainFont, \"mainFont Fallback\", sans-serif, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "0.8px",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "a",
        "text": "capricorn GROUP",
        "top": 23,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Press release",
        "top": 23,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Get in touch",
        "top": 23,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "mainMonoFont",
    "fontStack": "mainMonoFont, \"mainMonoFont Fallback\", monospace, monospace",
    "weight": "400",
    "size": "11px",
    "lineHeight": "12.1px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Official Sales Partner",
        "top": 18145,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 18144,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Imprint",
        "top": 18144,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 50,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 20,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 20,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "capricorn GROUP",
        "top": 23,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0F0F0F",
    "alpha": 1,
    "cssValue": "rgb(15, 15, 15)",
    "count": 45,
    "contexts": [
      {
        "tag": "body",
        "text": "capricorn GROUPPress releaseGet in touchCapricornZagatoThe essential machineGet in touchEvery gram r",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Every gram refined into time",
        "top": 2172,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "The capricorn 01 Zagato engineering without compromise",
        "top": 2225,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#101010",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.168415 0.000007689 0.00000336766 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 8948,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#0F0F0F",
    "alpha": 0.6,
    "cssValue": "oklab(0.168415 0.000007689 0.00000336766 / 0.6)",
    "count": 19,
    "contexts": [
      {
        "tag": "h2",
        "text": "German art of engineering",
        "top": 6423,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "CEO Robertino Wild",
        "top": 6979,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Official sales partner",
        "top": 10108,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#CDCDCD",
    "alpha": 1,
    "cssValue": "rgb(205, 205, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2016,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#0F0F0F",
    "alpha": 0.8,
    "cssValue": "oklab(0.168415 0.000007689 0.00000336766 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Limited to just 19 coupes, the capricorn 01 Zagato is not a hypercar to be collected and hidden. Roa",
        "top": 3179,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.1411764705882353,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.14)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "Get in touch",
        "top": 862,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#AAAAAA",
    "alpha": 0.12941176470588237,
    "cssValue": "oklab(0.731595 -5.96046e-8 -5.96046e-8 / 0.13)",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "capricorn GROUP",
        "top": 6725,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 16739,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.6980392156862745,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Sales",
        "top": 17551,
        "property": "text"
      },
      {
        "tag": "label",
        "text": "First Name*",
        "top": 17601,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Accept privacy policy",
        "top": 18035,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#101010",
    "alpha": 0.12156862745098039,
    "cssValue": "oklab(0.168415 0.000007689 0.00000336766 / 0.12)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "Horsepower900+ HP",
        "top": 12293,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.4)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 17550,
        "property": "border"
      },
      {
        "tag": "input",
        "text": "",
        "top": 17584,
        "property": "border"
      },
      {
        "tag": "textarea",
        "text": "",
        "top": 17794,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#B0B9C2",
    "alpha": 1,
    "cssValue": "rgb(176, 185, 194)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 17550,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 17550,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous use of vertical and horizontal whitespace, typical of luxury and editorial design, to isolate elements and guide the eye.
- Corner style: Sharp, right-angled corners on images and form fields, aligning with the precision engineering theme.
- Radius: Minimal to zero border radius observed; elements rely on straight, clean lines.
- Borders: Thin (likely 1px), subtle borders used as separators in spec lists and form fields.
- Buttons: Minimalist buttons, often relying on text with a subtle translucent background or a simple underline/arrow indicator rather than solid blocks.
- Content width: Varies; some sections use a constrained central column for text readability, while imagery often bleeds full-width.
- Density: Low density. The layout is spacious and uncluttered.
- Evidence: Visual inspection of the provided desktop crops, noting the sharp corners on the gallery images, the thin lines in the spec list, and the expansive whitespace around the 'Louyet Group' text block.

## Sections

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

1. **Hero — Full-bleed car hero with headline** (Home)
   A dark, close-cropped shot of the car body with one light headline and a small button keeps focus on the product's form.
   Capture: 1440×2000px; page bounds 0–2000px of 18468px; source section ID: `be713a66-ae0e-4946-aca7-5402bedd478b`; image: https://media.designdetails.io/library/3ea08abd9ee522666296ce5e22c219303b2d45a0a66730251d1291ebc1ddf382/be713a66-ae0e-4946-aca7-5402bedd478b.webp
   SECTION.md v3.2: `be713a66-ae0e-4946-aca7-5402bedd478b` (deterministic evidence; editorial review pending)
2. **Features — Centered intro with large numeral and side profiles** (Home)
   An oversized pale 01 sits behind two side-on car views, so the model name and a short limited-run note read in one glance.
   Capture: 1440×2000px; page bounds 2000–4000px of 18468px; source section ID: `79f6d244-6ecb-4c71-bccf-097592a33b00`; image: https://media.designdetails.io/library/c113c228f828740fe99e9d2e2cd640beda3232834a8262ea5feb0803af6b934c/79f6d244-6ecb-4c71-bccf-097592a33b00.webp
   SECTION.md v3.2: `79f6d244-6ecb-4c71-bccf-097592a33b00` (deterministic evidence; editorial review pending)
3. **Stats — Detail imagery with three spec figures** (Home)
   Large numerals with tiny unit labels over a green close-up give power, weight and gearbox facts instant weight and scannability.
   Capture: 1440×2391px; page bounds 4000–6391px of 18468px; source section ID: `e87a276a-e1be-49f8-8265-988a5b089c84`; image: https://media.designdetails.io/library/078db1555027bcac3846a9e111692f2b0c8339d56ae2ac707203cec8688ef863/e87a276a-e1be-49f8-8265-988a5b089c84.webp
   SECTION.md v3.2: `e87a276a-e1be-49f8-8265-988a5b089c84` (deterministic evidence; editorial review pending)
4. **Founder — Company heritage text with portrait** (Home)
   A narrow text column beside a small labelled portrait ties the engineering story to a named person, adding credibility and a quiet editorial tone.
   Capture: 1440×823px; page bounds 6391–7214px of 18468px; source section ID: `574334c3-1613-4129-9458-4bb482f8f3b2`; image: https://media.designdetails.io/library/d6e2911a98dc0f4ae68338c929b94df2e690261a8735600af32822c91c678b83/574334c3-1613-4129-9458-4bb482f8f3b2.webp
   SECTION.md v3.2: `574334c3-1613-4129-9458-4bb482f8f3b2` (deterministic evidence; editorial review pending)
5. **Gallery — Full-width front three-quarter car render** (Home)
   A clean render on a soft green gradient lets the car's shape and colour stand alone as a pause between text blocks.
   Capture: 1440×1000px; page bounds 7214–8214px of 18468px; source section ID: `e95b50da-3614-4592-a839-2bcf94f15472`; image: https://media.designdetails.io/library/b2e5e8839214424237b23428cba66677cfc7854fda2d8ed7c87898dd14f82e8e/e95b50da-3614-4592-a839-2bcf94f15472.webp
   SECTION.md v3.2: `e95b50da-3614-4592-a839-2bcf94f15472` (deterministic evidence; editorial review pending)
6. **Founder — Coachbuilder history text with portrait** (Home)
   Mirroring the previous layout, this block presents the design partner with a short history and a named portrait, making the pairing feel balanced.
   Capture: 1440×823px; page bounds 8214–9037px of 18468px; source section ID: `3fbb34ea-4759-4c67-968c-c9ee1e05318b`; image: https://media.designdetails.io/library/c5ffab89f9f18852bd708f5a4d1ef4976dcdeaa9f35bf74d84852427bc2ca440/3fbb34ea-4759-4c67-968c-c9ee1e05318b.webp
   SECTION.md v3.2: `3fbb34ea-4759-4c67-968c-c9ee1e05318b` (deterministic evidence; editorial review pending)
7. **CTA — Factory photo banner with interview button** (Home)
   A muted overhead shot of workers building the chassis sits under a centered headline and small button, inviting a click to the story.
   Capture: 1440×999px; page bounds 9037–10036px of 18468px; source section ID: `13bcc9d8-f2fa-4488-bcb4-92f6c7b6ef1b`; image: https://media.designdetails.io/library/33a31cda8f21d550f6949fa42e7f4c66841fd9626eab3aab5f82fb8c3fbfe3f8/13bcc9d8-f2fa-4488-bcb4-92f6c7b6ef1b.webp
   SECTION.md v3.2: `13bcc9d8-f2fa-4488-bcb4-92f6c7b6ef1b` (deterministic evidence; editorial review pending)
8. **Other — Sales partner profile with dropdown** (Home)
   A centered heading and compact paragraph state who sells the cars and why, with generous whitespace keeping the information easy to read.
   Capture: 1440×762px; page bounds 10036–10798px of 18468px; source section ID: `e26c039c-475a-46c9-9274-11a5d6bc858b`; image: https://media.designdetails.io/library/efc37c592c540c894fdb4f68b144133cf13b8f26d3d80f5ed7cc0490946483a5/e26c039c-475a-46c9-9274-11a5d6bc858b.webp
   SECTION.md v3.2: `e26c039c-475a-46c9-9274-11a5d6bc858b` (deterministic evidence; editorial review pending)
9. **Gallery — Rear three-quarter car render** (Home)
   The rear view with its light bar on the same green gradient completes the set of angles and keeps visual consistency.
   Capture: 1440×1000px; page bounds 10798–11798px of 18468px; source section ID: `9ca7d7b9-40da-4814-8ef3-1f86dea4381d`; image: https://media.designdetails.io/library/770acc7f2a72174f7b16bc595006399dcb39d12cdbdcd178cfb565383225ab29/9ca7d7b9-40da-4814-8ef3-1f86dea4381d.webp
   SECTION.md v3.2: `9ca7d7b9-40da-4814-8ef3-1f86dea4381d` (deterministic evidence; editorial review pending)
10. **Stats — Spec table beside chassis imagery** (Home)
   Thin-ruled rows with small labels and clear values sit next to a top-down chassis view, making technical data scannable and grounded in visuals.
   Capture: 960×600px; page bounds 11798–15280px of 18468px; source section ID: `b767eb28-67c1-4013-8cf4-f472f15644c9`; image: https://media.designdetails.io/library/15b9c5fa45ae553fb0cb29e7b91dad3a3ba8e80f14636918af8b7607f0cb1a9f/b767eb28-67c1-4013-8cf4-f472f15644c9.webp
   SECTION.md v3.2: `b767eb28-67c1-4013-8cf4-f472f15644c9` (deterministic evidence; editorial review pending)
11. **Gallery — Full-width machining workshop image** (Home)
   A pale teal photo of a robotic arm shaping a body part shows craftsmanship without any text, adding a change of pace.
   Capture: 1440×999px; page bounds 15280–16279px of 18468px; source section ID: `66c9231d-cf4b-48a8-84fd-4f7539d8ef60`; image: https://media.designdetails.io/library/8c9c1062e49a535a871626ddf0f0ca0b867c396aa18430651580c48100048123/66c9231d-cf4b-48a8-84fd-4f7539d8ef60.webp
   SECTION.md v3.2: `66c9231d-cf4b-48a8-84fd-4f7539d8ef60` (deterministic evidence; editorial review pending)
12. **Gallery — Three-card carousel of car imagery** (Home)
   Equal tall cards mix interior, exterior and cockpit views, while small arrow controls hint at more and keep the row compact.
   Capture: 1440×1296px; page bounds 16279–17575px of 18468px; source section ID: `6e208a9d-54fc-4cda-9e05-ea9a14eeb428`; image: https://media.designdetails.io/library/04dc2df6e4a873709c165dafba28c8f395373c97e9ebdab13436d868f2a2f861/6e208a9d-54fc-4cda-9e05-ea9a14eeb428.webp
   SECTION.md v3.2: `6e208a9d-54fc-4cda-9e05-ea9a14eeb428` (deterministic evidence; editorial review pending)
13. **Contact — Contact details beside inquiry form** (Home)
   Addresses grouped by department sit left of a underlined-field form with a topic selector, so visitors reach the right team quickly.
   Capture: 1440×696px; page bounds 17575–18271px of 18468px; source section ID: `e94e0ecd-55be-4348-96a2-5a8c599bd783`; image: https://media.designdetails.io/library/9bea2b282b4dae017a583c1178da0d2d05304cd6cc0575d83ef8ad3b13b845c4/e94e0ecd-55be-4348-96a2-5a8c599bd783.webp
   SECTION.md v3.2: `e94e0ecd-55be-4348-96a2-5a8c599bd783` (deterministic evidence; editorial review pending)
14. **Footer — Slim footer with partner and legal links** (Home)
   A thin bar with the sales partner logo, social icons and legal links keeps necessary information out of the way on the dark background.
   Capture: 1440×197px; page bounds 18271–18468px of 18468px; source section ID: `ca52341e-25f8-471e-8735-4d97a91bb009`; image: https://media.designdetails.io/library/b623106ef94285dbe6557ec7570da2c749d4b8b95f80f1b168b2f92d8c56c5c2/ca52341e-25f8-471e-8735-4d97a91bb009.webp
   SECTION.md v3.2: `ca52341e-25f8-471e-8735-4d97a91bb009` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/a1959ca80b2d4941d8ce9a242c12b48c627038b870b5853cbc5064b4e31fd56c/desktop_full-a96216cf-2026-11-03T04-58-38-304Z.jpg
- Mobile screenshot: https://media.designdetails.io/library/54d618ce16e3de2329eb7bf1f7d56c7dff8ae9dbaee2e15afc3175eeb8547cc8/mobile_full-a96216cf-2026-11-03T04-59-13-856Z.webp
- Open Graph image: https://media.designdetails.io/library/2122f725014d416108b1afa0d4a924ecf964b865ad4e88bfe7d5cbaeec438b12/og_image-a96216cf-2026-11-03T04-58-46-450Z.webp
- Full-page video: https://media.designdetails.io/library/9038259f7469e953ef3782dd9205690b52e0be2679d3d9f0a4edb440491fcdaa/motion-1793686377046.mp4
- Video poster: https://media.designdetails.io/library/7661b142b60fa498112a700df3800121d408599947bc6e8d9bc9d2cdd05d7672/motion-poster-1793686377046.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
- Video Frame
- Comparison Table
- Gallery
- Contact Form
- Footer
- Primary Button
- Scroll Driven Story Section
- Technical Spec List

## Quality rubric

Overall: 56.9/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: This capricorn 01 Zagato microsite is a well-assembled, restrained piece of automotive editorial design: a disciplined black-and-sage-green palette, a clear sans+mono typographic system, and a logical narrative arc from brand story to engineering specs to purchase inquiry. Execution within its chosen idiom is largely clean — spacing is generous, imagery is high-fidelity, and content (specs, video, partner info) is thoughtfully paired with supporting visuals. However, nearly every structural and motion choice — the numeral scale-reveal, sticky spec-swap section, horizontal gallery, mono-labeled spec sheet, and segmented contact form — is a direct descendant of the now-standard limited-edition hypercar microsite template, offering little that couldn't be found on comparable boutique car-launch sites. The color system is also thin as coded CSS, relying on photography rather than UI-level color decisions to carry the brand's green identity. The result is a competent, tasteful execution of a familiar genre rather than a site that demonstrates a distinctive point of view or hard-to-substitute ideas, which keeps it in the competent tier despite solid craft.

- Typography (15%): 64 — The system uses two typefaces — a wide-tracked sans-serif (mainFont) for display and body copy, and an uppercase monospace (mainMonoFont) for technical labels/eyebrows — creating a legible, editorial-meets-engineering contrast. Scale is deliberate (46-54px headings, 24-32px body/specs, 11-12px mono labels) and letter-spacing is consistently generous (1-2.2px), reinforcing a premium tone. However, it is a fairly conventional two-family luxury-brand pairing rather than a distinctive type system, and most sizes cluster closely without a bold hierarchy jump.
- Color (10%): 58 — The coded palette is essentially grayscale-on-black (white text, #0F0F0F canvas, translucent white/gray overlays for buttons and borders), with the sage-green identity color arriving almost entirely through car photography/renders rather than designed UI chrome. This creates a cohesive, restrained luxury mood, but the actual CSS-defined palette is minimal and conventional (mono + alpha variants), offering little evidence of a deliberately engineered color system beyond black/white plus photographic accent.
- Layout (20%): 68 — The page is organized as a coherent long-form editorial sequence: full-bleed hero, narrative two-column text/image blocks, a sticky spec-reveal section pairing changing copy with imagery, a dedicated technical-spec list with thin-rule dividers, a three-image gallery grid, and a structured two-column contact form with radio-selected inquiry types. Spacing is generous and consistent, sharp-cornered imagery and thin borders reinforce the engineering motif, and the structure logically escalates from brand story to specs to purchase inquiry. It is a well-executed system across many sections, though individual patterns (sticky reveal, spec list, gallery) are common in this genre rather than structurally novel.
- Motion (20%): 59 — Motion consists of standard scroll-driven techniques: a large numeral scaling/fading while a car image translates horizontally, a video scaling to full-bleed, a sticky section swapping text/image pairs, and a horizontal-scroll gallery tied to vertical scroll. These are competently assembled and support the narrative, but each technique is a well-worn pattern in premium automotive microsites, and no evidence (hover states, easing quality, interaction responsiveness) demonstrates unusual craft or restraint beyond the expected.
- Originality (25%): 38 — The site closely follows the now-familiar hypercar-launch template: oversized hero headline over a moody product shot, a numbered car reveal with scaling typographic numeral, sticky spec storytelling, a monospace technical-spec sheet, a horizontal detail gallery, and a dual-partner footer with a structured inquiry form. Every component listed (hero, sticky reveal, spec list, horizontal gallery, contact form) is a recognizable convention from limited-edition automotive microsites; nothing in the evidence points to a structural device, interaction model, or visual idea that is hard to find elsewhere in this product category.
- Content (10%): 66 — Content integration is handled well: technical specs are visually paired with matching imagery (underside chassis shot beside spec list), the brand-history copy for capricorn and Zagato sits beside the respective imagery/video, and the interview video is embedded directly into the creation-story section. The contact form segments inquiry type (General/Sales/PR) matching the footer's listed departments, showing a thought-through content architecture connecting narrative, data, and conversion.

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

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

## Verification checklist

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

## Curator notes

Close-up shots of the dark green bodywork fill the opening screens, letting light trace the curves before any text explains the car, which builds intrigue. Later the page switches to a bright white background with mono spec labels and bold stat numbers, giving the dense engineering details room to breathe and making them 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.