# Extrafazant — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.extrafazant.nl/
Captured: 2026-11-08
CSS measured: 2026-11-08T07:54:05.936Z at 1440×1000 — https://www.extrafazant.nl/
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 employs a bold, typographic-driven design with a high-contrast palette alternating between off-white and deep black canvases. It features a playful, almost brutalist aesthetic characterized by oversized headings, thick vibrant borders on project cards, and scattered 'sticker-style' annotations on photographic content. The layout utilizes generous negative space and a distinct sticky stacking behavior for featured work.

## Classification

- Industry: creative
- Site type: Portfolio, Landing
- Business model: Agency
- Styles: typographic, bold, playful, colourful, sticker-aesthetic, high-contrast
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Helvetica Now Subset — weight 700; size 144px; line-height 115.2px; tracking -2.9px; uppercase (100% role confidence, computed values)
- Heading: Serrif Subset — weight 500; size 96px; line-height 76.8px; tracking -1.9px; uppercase (95% role confidence, computed values)
- Body: Helvetica Now Subset — weight 500; size 15px; line-height 21px; tracking -0.6px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #F4F4F4: color-3: computed rgb(244, 244, 244); AI role: Hex #F4F4F4 acts as the primary light background color for the upper half of the page. (100% role confidence, computed values)
- Canvas — canvas #101010: color-1: computed rgb(16, 16, 16); AI role: Hex #101010 acts as the secondary dark canvas for the 'RECENT WERK' and footer sections. It is also the primary text color on light backgrounds. (95% role confidence, computed values)
- Primary Action — primary action #0038FF: color-2: computed rgb(0, 56, 255); AI role: Hex #0038FF (blue) is used prominently for buttons, links, and thick borders. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-4: computed rgb(255, 255, 255); AI role: Hex #FFFFFF is used for the sticky navigation bar background to stand out from the canvas. (90% role confidence, computed values)
- Accent — accent #FF77CD: color-8: computed rgb(255, 119, 205); AI role: Hex #FF77CD (pink) is used for call-to-action buttons in the dark section and as a card border. (85% 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": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "700",
    "size": "80px",
    "lineHeight": "64px",
    "letterSpacing": "-1.6px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "P. van der Niet",
        "top": 2503,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Odido",
        "top": 2453,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Willem II",
        "top": 2411,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "700",
    "size": "60px",
    "lineHeight": "48px",
    "letterSpacing": "-1.2px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Animatie",
        "top": 5806,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Video",
        "top": 5790,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Social",
        "top": 5796,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "16.2px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Navigatie",
        "top": 9613,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Contact",
        "top": 9613,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Socials",
        "top": 9613,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Spoorlaan 15 5038 CB Tilburg",
        "top": 9642,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "div",
        "text": "Geen",
        "top": 1389,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "loggggg",
        "top": 1389,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "bureauproces.",
        "top": 1389,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "div",
        "text": "Niet",
        "top": 1927,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "te",
        "top": 1927,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "missen,",
        "top": 1927,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "96px",
    "lineHeight": "76.8px",
    "letterSpacing": "-1.9px",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "div",
        "text": "W",
        "top": 1987,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 1987,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "r",
        "top": 1987,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "700",
    "size": "144px",
    "lineHeight": "115.2px",
    "letterSpacing": "-2.9px",
    "traits": "uppercase",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "B",
        "top": 385,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "r",
        "top": 385,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 385,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "96px",
    "lineHeight": "76.8px",
    "letterSpacing": "-1.9px",
    "traits": "uppercase",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "R",
        "top": 1988,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 1988,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "c",
        "top": 1988,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Over",
        "top": 9640,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Werk",
        "top": 9667,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Wat we doen",
        "top": 9694,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "30px",
    "lineHeight": "30px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Wie",
        "top": 1217,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "wij",
        "top": 1217,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "zijn",
        "top": 1217,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "700",
    "size": "144px",
    "lineHeight": "115.2px",
    "letterSpacing": "-2.9px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "b",
        "top": 500,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 500,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "w",
        "top": 500,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "36px",
    "lineHeight": "36px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Social",
        "top": 289,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "content,",
        "top": 289,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "video's",
        "top": 325,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "13.5px",
    "lineHeight": "13.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026 Extrafazant",
        "top": 9854,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2026",
        "top": 9852,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Privacyverklaring",
        "top": 9852,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "72px",
    "lineHeight": "57.6px",
    "letterSpacing": "-1.4px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "De",
        "top": 1259,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "creatives",
        "top": 1259,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "van",
        "top": 1259,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "21px",
    "lineHeight": "16.8px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Ontdek meer",
        "top": 637,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ontdek meer",
        "top": 5953,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ontdek meer over ons",
        "top": 8503,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "13.5px",
    "lineHeight": "13.5px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Meer over ons",
        "top": 1475,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Bekijk ons werk",
        "top": 2650,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Vooruit met je verhaal",
        "top": 9288,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Over",
        "top": 29,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Werk",
        "top": 29,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Wat we doen",
        "top": 29,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Helvetica Now Subset",
    "fontStack": "\"Helvetica Now Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Contact",
        "top": 30,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Contact",
        "top": 58,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Serrif Subset",
    "fontStack": "\"Serrif Subset\", Arial, sans-serif",
    "weight": "500",
    "size": "72px",
    "lineHeight": "57.6px",
    "letterSpacing": "-1.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Extrafazant",
        "top": 1317,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#101010",
    "alpha": 1,
    "cssValue": "rgb(16, 16, 16)",
    "count": 86,
    "contexts": [
      {
        "tag": "span",
        "text": "Over",
        "top": 29,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Social",
        "top": 289,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Niet te missen, wel te delen. Hier een greep uit wat we maken.Recent WerkP. van der NietOdidoWillem ",
        "top": 1765,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0038FF",
    "alpha": 1,
    "cssValue": "rgb(0, 56, 255)",
    "count": 13,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": -31,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "",
        "top": 33,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F4F4F4",
    "alpha": 1,
    "cssValue": "rgb(244, 244, 244)",
    "count": 62,
    "contexts": [
      {
        "tag": "body",
        "text": "Zone 3GDPR-CompliantPrivacy SettingsPrivacyverklaringWij maken gebruik van cookies en andere technol",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Niet",
        "top": 1927,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "P. van der Niet",
        "top": 2503,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "OverWerkWat we doenContactContact",
        "top": 20,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 21,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 626,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FEE897",
    "alpha": 1,
    "cssValue": "rgb(254, 232, 151)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "P. van der Niet",
        "top": 2140,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F44A32",
    "alpha": 1,
    "cssValue": "rgb(244, 74, 50)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Willem II",
        "top": 2101,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FF5F04",
    "alpha": 1,
    "cssValue": "rgb(255, 95, 4)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "SocialSocial content die je laat stoppen met scrollen",
        "top": 5428,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FF77CD",
    "alpha": 1,
    "cssValue": "rgb(255, 119, 205)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2639,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "VideoJouw verhaal, op beeld",
        "top": 5425,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F5F5F5",
    "alpha": 0.2,
    "cssValue": "rgba(244, 244, 244, 0.2)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Ook iets in‍Beweging brengen?Zeg waar je mee zit. Wij maken het zichtbaar.Vooruit met je verhaal [da",
        "top": 8825,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#131313",
    "alpha": 1,
    "cssValue": "rgb(19, 19, 19)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Contact",
        "top": 30,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 9613,
        "property": "control-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: Extremely generous vertical padding between major sections, creating distinct narrative breaks. Elements within sections also have ample breathing room.
- Corner style: Sharp, 0px border-radius is predominantly used on containers, cards, and buttons, contributing to a slightly brutalist feel.
- Radius: Virtually non-existent on structural elements; images and buttons are perfectly rectangular.
- Borders: Heavy, solid borders in vibrant colors are used decoratively on specific cards (e.g., the service cards in 'WAT WE DOEN'). Otherwise, borders are absent.
- Buttons: Solid color fill, sharp rectangular shapes, uppercase text, often accompanied by a small directional arrow.
- Content width: Content is generally centered with a wide maximum width, allowing typography to stretch across much of the viewport.
- Density: Low density. The design relies on large typography and negative space rather than packing in content.
- Evidence: DOM CSS facts confirm the lack of border-radius on major components and the large font sizes (up to 144px). Visual crops confirm the sharp corners and thick borders on specific cards.

## Sections

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

1. **Navbar — Extrafazant Navbar** (Home)
   A script logo on the left, three centred links and a single contact button keep navigation light and the primary action clear.
   Capture: 1440×64px; page bounds 0–64px of 8487px; source section ID: `074ffd33-bc85-47e1-8ad9-3fd07c1eb37b`; image: https://media.designdetails.io/library/613826293d6ae9c5c0f84721d03654887012341452c4fcd615df5533c8a6b728/074ffd33-bc85-47e1-8ad9-3fd07c1eb37b.webp
   SECTION.md v3.2: `074ffd33-bc85-47e1-8ad9-3fd07c1eb37b` (deterministic evidence; editorial review pending)
2. **Hero — Bold centred headline with logo strip** (Home)
   Large condensed type mixed with a light serif makes the offer readable instantly, while the client logos below add credibility at once.
   Capture: 1440×936px; page bounds 64–1000px of 8487px; source section ID: `2b87bd5b-1803-42b6-b909-67c691592c2d`; image: https://media.designdetails.io/library/00f886dd035f44acf4738b564ef902dc73d242ff806c4328d9d2ca93b9f6ded6/2b87bd5b-1803-42b6-b909-67c691592c2d.webp
   SECTION.md v3.2: `2b87bd5b-1803-42b6-b909-67c691592c2d` (deterministic evidence; editorial review pending)
3. **Other — Agency intro with polaroid photos** (Home)
   Tilted polaroid photos beside a short blurb and button give the studio a human, playful face without long text.
   Capture: 1440×765px; page bounds 1000–1765px of 8487px; source section ID: `b7e8547a-ee73-4446-b8e2-240a8f6a07f6`; image: https://media.designdetails.io/library/5d1edc9e8e3a4f9db37be92d6bd99b6e94a94361fec2a7dec9154924b4414b7f/b7e8547a-ee73-4446-b8e2-240a8f6a07f6.webp
   SECTION.md v3.2: `b7e8547a-ee73-4446-b8e2-240a8f6a07f6` (deterministic evidence; editorial review pending)
4. **Gallery — Full-width framed project showcases** (Home)
   Large colour-framed stills on a dark background let each project dominate the screen, with one pink button to explore more.
   Capture: 1440×2000px; page bounds 1765–3765px of 8487px; source section ID: `e622059e-bba0-423e-a4f3-ba8889e45e42`; image: https://media.designdetails.io/library/9bd211f4cdeba8de3be93dde6b8a902f57c2b56967bb4f824e1ddf44893ce2ad/e622059e-bba0-423e-a4f3-ba8889e45e42.webp
   SECTION.md v3.2: `e622059e-bba0-423e-a4f3-ba8889e45e42` (deterministic evidence; editorial review pending)
5. **Features — Three colourful service cards** (Home)
   Bright cards with a image, bold label and one-line description let visitors grasp each service quickly and see the brand style.
   Capture: 1440×918px; page bounds 3765–4683px of 8487px; source section ID: `17755e9d-eb30-4ae8-80de-6140aea9dd19`; image: https://media.designdetails.io/library/fc803497a1436ebcf76fc53adf30fb4496eefed5eea2dfa1ca4f88c587251693/17755e9d-eb30-4ae8-80de-6140aea9dd19.webp
   SECTION.md v3.2: `17755e9d-eb30-4ae8-80de-6140aea9dd19` (deterministic evidence; editorial review pending)
6. **Team — Scattered team portraits with name labels** (Home)
   Casual portraits placed unevenly with hand-lettered names make the team feel personal and fit the playful tone as they scroll in.
   Capture: 960×600px; page bounds 4683–7425px of 8487px; source section ID: `22f15331-c2be-4ab5-a01d-dbe988767782`; image: https://media.designdetails.io/library/91b1b92594d61b074466f1d3971746f8f2eaeaca52994c94bbf7eb7333d55595/22f15331-c2be-4ab5-a01d-dbe988767782.webp
   SECTION.md v3.2: `22f15331-c2be-4ab5-a01d-dbe988767782` (deterministic evidence; editorial review pending)
7. **CTA — Closing prompt with contact footer** (Home)
   A big headline and single pink button close the page on a dark background, with address and links neatly grouped below.
   Capture: 1440×1062px; page bounds 7425–8487px of 8487px; source section ID: `01f5de7b-7ba7-4c41-81bb-c1d552cc9a8b`; image: https://media.designdetails.io/library/25f93796adf49b4892bac54761a79cc3ba405efbea913c78b16157592ceea253/01f5de7b-7ba7-4c41-81bb-c1d552cc9a8b.webp
   SECTION.md v3.2: `01f5de7b-7ba7-4c41-81bb-c1d552cc9a8b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/af5e74f152c4684f2cd7b05c1881670895a1a3581294d8c193f481f3b40f7bef/desktop_full-972036de-2026-11-08T07-54-05-950Z.webp
- Mobile screenshot: https://media.designdetails.io/library/d80945ce7545cb6760f1df3f798eceb1329c4dca6de4677258a2a8277e6365c3/mobile_full-972036de-2026-11-08T07-54-37-316Z.webp
- Open Graph image: https://media.designdetails.io/library/e3ef2bd4bf9ce434d2e58162e4392c6d26c319483a36744e1cbda1fe04e8d9ec/og_image-972036de-2026-11-08T07-54-14-616Z.webp
- Full-page video: https://media.designdetails.io/library/cacaa87f380448f1c83e0e857b90bcaedc512011fa2aeab3ccee211b171937d6/motion-1794125132267.mp4
- Video poster: https://media.designdetails.io/library/0a70e4ddacfe31c20089641455f01a8592e39ea983905751c81155af76b02d31/motion-poster-1794125132267.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Feature Card
- Primary Button
- Footer
- Sticky Stacking Cards
- Scattered Photo Grid
- Thick Framed Cards

## Quality rubric

Overall: 57.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Extrafazant executes a confident, high-contrast agency aesthetic with a disciplined type and color system: oversized sans/serif headline pairings, an alternating black/off-white canvas, and a single consistent blue tying buttons and accents together. Content integration is a highlight, with service cards color-coded to their category and team photography personalized with sticker-style name labels that inject some playful character. However, the motion repertoire is thin — an infinite logo marquee and a scroll-triggered sticky-stacking card sequence are the only evidenced techniques, both of which are common in contemporary portfolio sites rather than distinctive inventions. Likewise, while the scattered-photo and sticker motif offers a glimpse of personality, the overall structural vocabulary (thick brutalist card borders, centered oversized hero type, sticky project stack) closely tracks a now-familiar agency-portfolio template logic rather than introducing several hard-to-substitute ideas. The result is a polished, well-executed site within its chosen idiom that lands solidly in the competent-to-good boundary, but it does not yet demonstrate the breadth of coherent, original systems required for a higher tier.

- Typography (15%): 66 — A deliberate two-voice type system pairs a heavy uppercase grotesk (Helvetica Now, up to 144px, -2.9px tracking) with a serif at matching scale for secondary words, repeated consistently across the hero, 'RECENT WERK', and footer CTA. This creates real hierarchy and a recognizable voice, though it stays within a familiar big-type agency convention rather than inventing new type behavior.
- Color (10%): 62 — A disciplined two-canvas system (off-white #F4F4F4 / near-black #101010) is punctuated by a single consistent primary blue and selectively deployed pink/orange accents, giving the palette coherence and confidence without feeling arbitrary.
- Layout (20%): 61 — Generous negative space, alternating dark/light sections, a sticky-stacking project gallery, and a scattered team-photo grid show layout intention and rhythm, but the structural vocabulary (centered hero, marquee strip, card grid, footer) is conventional for an agency site.
- Motion (20%): 48 — Only two motion patterns are evidenced: a continuous logo marquee and a scroll-triggered sticky-stack transition between project cards. Both are common, template-level motion ideas; no hover, click, or micro-interaction evidence is provided, and quality claims like easing or smoothness cannot be substantiated.
- Originality (25%): 52 — The sticker-style handwritten name tags over team photos and the scattered polaroid-like photo arrangement give the site a bit of personality, but the core moves — sticky-stacking cards, infinite logo marquee, brutalist thick-border cards, oversized serif/sans headline pairing — are now widespread in contemporary agency portfolio design and don't constitute hard-to-substitute ideas.
- Content (10%): 64 — Content and design are reasonably fused: service categories (Animatie/Video/Social) are color-coded to match their card borders, and team members are personalized with individualized sticker labels rather than generic headshots, giving the content a bespoke feel tied to the visual system.

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

## Curator notes

A mix of bold black sans headlines and a looser serif for subheads gives the studio a confident but informal voice, while polaroid style snapshots pinned at angles feel like a real team rather than stock photos. Black project bands with coloured frames break up the light sections, pacing the scroll and making each case study easy to spot.

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