# Graham McDonnell — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://greymac.com/
Captured: 2026-10-06
CSS measured: 2026-10-06T14:52:07.934Z at 1440×1000 — https://greymac.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

The website for Graham McDonnell is a sleek, editorial portfolio utilizing a dark mode primary palette with elegant typography. The layout relies on scroll-triggered animations to reveal large project cards, elegant list presentations, and detailed case studies. The typography mixes serif and sans-serif fonts to create a sophisticated, editorial feel. The overall visual style is minimal and typographic, focusing on high-quality imagery and clean presentation of text.

## Classification

- Industry: creative
- Site type: Blog, Portfolio
- Business model: Portfolio, Agency
- Styles: editorial, typographic, cinematic, dark-mode, minimal
- Platform: Framer
- Technology: Not identified

## Typography

- Display: IvyPresto Display Light — weight 300; size 122.6px; line-height 122.6px; tracking normal; Regular (90% role confidence, computed values)
- Heading: Neue Montreal Medium — weight 500; size 80px; line-height 80px; tracking -2.4px; Regular (90% role confidence, computed values)
- Body: Hedvig Letters Serif — weight 400; size 14.4px; line-height 23px; tracking 0.4px; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-2: computed rgb(0, 0, 0); AI role: Black (#000000) used as the primary background color for the page. (95% role confidence, computed values)
- Surface — surface #F2F4F8: color-1: computed rgb(242, 244, 248); AI role: Light grey/white (#F2F4F8) used as the background for large content panels. (90% role confidence, computed values)
- Text — text #424242: color-7: computed rgb(66, 66, 66); AI role: Dark grey (#424242) used for headings and text on light surfaces. (85% role confidence, computed values)
- Text — text #FFFFFF: color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for text on the dark canvas. (85% role confidence, computed values)
- Muted Text — muted text #888888: color-9: computed rgb(136, 136, 136); AI role: Medium grey (#888888) used for secondary text like '( INTRO )'. (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": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 78,
    "contexts": [
      {
        "tag": "h4",
        "text": "D&AD AWARDS",
        "top": 4267,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "2025",
        "top": 4267,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "D&AD AWARDS",
        "top": 4327,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "28px",
    "lineHeight": "28px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Notable Partners",
        "top": 3751,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Industry Recognition",
        "top": 4234,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Events & Conferences",
        "top": 10274,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "MD Lórien Trial Regular",
    "fontStack": "\"MD Lórien Trial Regular\", \"MD Lórien Trial Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "11.2px",
    "lineHeight": "11.2px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "CREATIVE DIRECTOR  APPLE",
        "top": 12207,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Hedvig Letters Serif",
    "fontStack": "\"Hedvig Letters Serif\", \"Hedvig Letters Serif Placeholder\", serif",
    "weight": "400",
    "size": "11.2px",
    "lineHeight": "11.2px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 45,
    "contexts": [
      {
        "tag": "p",
        "text": "( INTRO )",
        "top": 1430,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Brands &",
        "top": 3734,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "AWARDS &",
        "top": 4213,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "CLIENT :",
        "top": 5721,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "COMPANY :",
        "top": 5721,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "YEAR :",
        "top": 5721,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Hedvig Letters Serif",
    "fontStack": "\"Hedvig Letters Serif\", \"Hedvig Letters Serif Placeholder\", serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "AUDI",
        "top": 5721,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "TIME",
        "top": 5721,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "2022",
        "top": 5721,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Placeholder\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "About",
        "top": 19,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Work",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Labs",
        "top": 18,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "9px",
    "lineHeight": "13.5px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Concept cars are a chance for automotive companies to experiment with new technologies that might sh",
        "top": 5752,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "I lead the creative team, which included all brand marketing, global events and content partnerships",
        "top": 6835,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "We only have one planet, and the way we treat it is irrevocably linked to everything and everyone on",
        "top": 7556,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "70px",
    "lineHeight": "70px",
    "letterSpacing": "-2.1px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "BRAND",
        "top": 6664,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "CREATIVE",
        "top": 6718,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "FROM",
        "top": 7440,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Hedvig Letters Serif",
    "fontStack": "\"Hedvig Letters Serif\", \"Hedvig Letters Serif Placeholder\", serif",
    "weight": "400",
    "size": "14.4px",
    "lineHeight": "23px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "After a decade working for various creative agencies and long stints at inhouse branded studios, I h",
        "top": 3799,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Over the years, I'm lucky enough that some of my projects have been recognised by industry awards bo",
        "top": 4280,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Over the past few years I have had the privilege of speaking alongside presidents, world leaders and",
        "top": 10322,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12.8px",
    "lineHeight": "12.8px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": " APPLE",
        "top": 449,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "©2026 LONDON, UK",
        "top": 917,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "10:52 AM",
        "top": 917,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Neue Montreal Medium Italic",
    "fontStack": "\"Neue Montreal Medium Italic\", \"Neue Montreal Medium Italic Placeholder\", sans-serif",
    "weight": "500",
    "size": "70px",
    "lineHeight": "70px",
    "letterSpacing": "-2.1px",
    "traits": "italic",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "A VIEW",
        "top": 7385,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "HUMAN",
        "top": 9779,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12.8px",
    "lineHeight": "12.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "GRAHAM MCDONNELL",
        "top": 12207,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "10:52 AM",
        "top": 12207,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Get In Touch",
        "top": 11147,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Get in Touch",
        "top": 11947,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "IvyPresto Display Light",
    "fontStack": "\"IvyPresto Display Light\", \"IvyPresto Display Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "122.6px",
    "lineHeight": "122.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "SPHERE",
        "top": 5573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "80px",
    "lineHeight": "80px",
    "letterSpacing": "-2.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "THE",
        "top": 8171,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Neue Montreal Medium Italic",
    "fontStack": "\"Neue Montreal Medium Italic\", \"Neue Montreal Medium Italic Placeholder\", sans-serif",
    "weight": "500",
    "size": "80px",
    "lineHeight": "80px",
    "letterSpacing": "-2.4px",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "IDEA",
        "top": 8226,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "IvyPresto Display Thin",
    "fontStack": "\"IvyPresto Display Thin\", sans-serif",
    "weight": "100",
    "size": "78px",
    "lineHeight": "78px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "VAULT",
        "top": 8222,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Neue Montreal Medium Italic",
    "fontStack": "\"Neue Montreal Medium Italic\", \"Neue Montreal Medium Italic Placeholder\", sans-serif",
    "weight": "500",
    "size": "70px",
    "lineHeight": "70px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "FORWARD",
        "top": 8637,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "IvyPresto Display Light",
    "fontStack": "\"IvyPresto Display Light\", \"IvyPresto Display Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "70px",
    "lineHeight": "70px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "MOVING",
        "top": 8573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "IvyPresto Display Thin",
    "fontStack": "\"IvyPresto Display Thin\", sans-serif",
    "weight": "100",
    "size": "68px",
    "lineHeight": "68px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "TAKES",
        "top": 9720,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "IvyPresto Display Thin Italic",
    "fontStack": "\"IvyPresto Display Thin Italic\", sans-serif",
    "weight": "100",
    "size": "65px",
    "lineHeight": "65px",
    "letterSpacing": "-0.6px",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "&",
        "top": 6662,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "IvyPresto Display Thin",
    "fontStack": "\"IvyPresto Display Thin\", sans-serif",
    "weight": "100",
    "size": "65px",
    "lineHeight": "65px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "ABOVE",
        "top": 7439,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Neue Montreal Medium Italic",
    "fontStack": "\"Neue Montreal Medium Italic\", \"Neue Montreal Medium Italic Placeholder\", sans-serif",
    "weight": "500",
    "size": "61px",
    "lineHeight": "61px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "CONCEPTS",
        "top": 5637,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "13.6px",
    "lineHeight": "13.6px",
    "letterSpacing": "0.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "GRAHAM MCDONNELL",
        "top": 449,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Hedvig Letters Serif",
    "fontStack": "\"Hedvig Letters Serif\", \"Hedvig Letters Serif Placeholder\", serif",
    "weight": "400",
    "size": "12.8px",
    "lineHeight": "12.8px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "CREATIVE DIRECTOR",
        "top": 449,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12.8px",
    "lineHeight": "17.9px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Former VP of Brand and Creative for TIME Magazine and founding member of the international creative ",
        "top": 861,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Arial",
    "fontStack": "Arial, sans-serif",
    "weight": "400",
    "size": "12.8px",
    "lineHeight": "12.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "",
        "top": 12207,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Funnel Display",
    "fontStack": "\"Funnel Display\", sans-serif",
    "weight": "600",
    "size": "12.8px",
    "lineHeight": "12.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "©2025 LONDON, UK",
        "top": 12207,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "THE",
        "top": 5562,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "11.2px",
    "lineHeight": "11.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "APPLE",
        "top": 12208,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "43.2px",
    "lineHeight": "51.8px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 1399,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "multi",
        "top": 1399,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "award-winning",
        "top": 1399,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Hedvig Letters Serif",
    "fontStack": "\"Hedvig Letters Serif\", \"Hedvig Letters Serif Placeholder\", serif",
    "weight": "400",
    "size": "59.2px",
    "lineHeight": "71px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Apple",
        "top": 1757,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Time Magazine",
        "top": 1868,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "The New York Times",
        "top": 1979,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Hedvig Letters Serif",
    "fontStack": "\"Hedvig Letters Serif\", \"Hedvig Letters Serif Placeholder\", serif",
    "weight": "400",
    "size": "9.6px",
    "lineHeight": "9.6px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "(2023 - 26)",
        "top": 1773,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "(2020 - 23)",
        "top": 1884,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "(2015 - 20)",
        "top": 1995,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Neue Montreal Medium",
    "fontStack": "\"Neue Montreal Medium\", \"Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "9.6px",
    "lineHeight": "9.6px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "ABOUT",
        "top": 12007,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "WORK",
        "top": 12007,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "LABS",
        "top": 12007,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F2F4F8",
    "alpha": 1,
    "cssValue": "rgb(242, 244, 248)",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "GRAHAM MCDONNELL",
        "top": 449,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "10:52 AM",
        "top": 917,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "( INTRO ) A multi award-winning creative director, keynote speaker and lecturer with over two decade",
        "top": 1250,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 51,
    "contexts": [
      {
        "tag": "body",
        "text": ":root body { background: var(--token-fae62122-2d2a-447d-8987-ebd85c26354f, rgb(0, 0, 0)); } :root { ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "AboutWorkLabsEventsOtherContacthtml body { background: var(--token-d90d877f-61c2-4d16-98ed-90c3d7a9c",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 15,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.25098039215686274,
    "cssValue": "rgba(0, 0, 0, 0.25)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -20,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#D1D6E0",
    "alpha": 1,
    "cssValue": "rgb(209, 214, 224)",
    "count": 42,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 1399,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Apple",
        "top": 1757,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "About",
        "top": 19,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 455,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1011,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#121417",
    "alpha": 1,
    "cssValue": "rgb(18, 20, 23)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2584,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#424242",
    "alpha": 1,
    "cssValue": "rgb(66, 66, 66)",
    "count": 84,
    "contexts": [
      {
        "tag": "h3",
        "text": "Notable Partners",
        "top": 3751,
        "property": "text"
      },
      {
        "tag": "h4",
        "text": "D&AD AWARDS",
        "top": 4267,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "PAGES",
        "top": 11981,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#6B6B6B",
    "alpha": 1,
    "cssValue": "rgb(107, 107, 107)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "After a decade working for various creative agencies and long stints at inhouse branded studios, I h",
        "top": 3799,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#888888",
    "alpha": 1,
    "cssValue": "rgb(136, 136, 136)",
    "count": 46,
    "contexts": [
      {
        "tag": "p",
        "text": "( INTRO )",
        "top": 1430,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#7F648D",
    "alpha": 1,
    "cssValue": "rgb(127, 100, 141)",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "WHAT IT",
        "top": 9723,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#EBEBFF",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(242, 244, 247, 0.05)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "CREATIVE DIRECTOR  APPLEGRAHAM MCDONNELL©2025 LONDON, UK10:52 AM",
        "top": 12187,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#C1BDB1",
    "alpha": 1,
    "cssValue": "rgb(193, 189, 177)",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Concept cars are a chance for automotive companies to experiment with new technologies that might sh",
        "top": 5752,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#5B8AB0",
    "alpha": 1,
    "cssValue": "rgb(91, 138, 176)",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "The Moving Forward experience illuminates the incredible transformation that transportation has move",
        "top": 8761,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#AD3737",
    "alpha": 1,
    "cssValue": "rgb(173, 55, 55)",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "THE",
        "top": 8171,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#627A8D",
    "alpha": 1,
    "cssValue": "rgb(98, 122, 141)",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "A VIEW",
        "top": 7385,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "I'm always open to exploring new opportunities. Whether you'd like to collaborate on a project, you ",
        "top": 11993,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#B8B8B8",
    "alpha": 1,
    "cssValue": "rgb(184, 184, 184)",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "ABOUT",
        "top": 12007,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#808080",
    "alpha": 1,
    "cssValue": "rgb(128, 128, 128)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "&",
        "top": 6662,
        "property": "text"
      }
    ]
  }
]
```

### 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: Large vertical spacing between sections, generous padding inside the rounded white panels.
- Corner style: Combination of sharp edges for full-width elements and large rounded corners for content surfaces.
- Radius: Large border-radius on the white content panels, creating a 'card' feel within the page.
- Borders: Subtle borders used for separators in lists (e.g., awards, press).
- Buttons: Pill-shaped, solid dark background with white text and an icon.
- Content width: Centered content with significant side margins on desktop, varying width depending on the section (e.g., logo grid vs single paragraph).
- Density: Low density, relying on ample whitespace and large typography to structure information.
- Evidence: Observed via the large rounded corners on the white sections separating them from the dark background, generous padding around text blocks, and the pill shape of the 'Get in touch' button.

## Sections

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

1. **Footer — CREATIVE DIRECTOR  APPLE** (Home)
   Closing footer and call-to-action from Home, organized around “CREATIVE DIRECTOR  APPLE”.
   Capture: 1440×377px; page bounds 11893–12270px of 12470px; source section ID: `c950ff8d-0f93-4d3c-b62a-523054dc0956`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/45856f059343ce6ea7d7224fc734c86f70a457f4072885a0de034514f2529399/section_crop-c950ff8d-2026-10-06T14-52-17-355Z.webp
   SECTION.md v3.2: `c950ff8d-0f93-4d3c-b62a-523054dc0956` (deterministic evidence; editorial review pending)
2. **Other — Career and Client History Selector** (Home)
   AI-proposed category: career-history
AI suggestion (84% confidence): Self-contained panel presenting a chronological list of major employers and freelance work, with year annotations and a featured visual treatment.
   Capture: 1440×888px; page bounds 1908–2796px of 12470px; source section ID: `b3277a7c-d559-47ba-afad-57b161b6d2db`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/63298d55eb79f56428b996d1d89ed5a1175e631c94f690d78b6fad94847a1a3e/b3277a7c-d559-47ba-afad-57b161b6d2db.webp
   SECTION.md v3.2: `b3277a7c-d559-47ba-afad-57b161b6d2db` (deterministic evidence; editorial review pending)
3. **Footer — Portfolio Footer and Contact Directory** (Home)
   AI suggestion (98% confidence): Complete, substantial footer combining a personal contact message, social links, page and case-study navigation, credentials, location, copyright, and local time.
   Capture: 1440×360px; page bounds 12108–12468px of 12470px; source section ID: `d21f0e99-c345-4cf0-8de1-346995801e9f`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3bcaee4fdff7288a78d9fb0ef4c352ef3118213382f341119b4a738297f6139c/d21f0e99-c345-4cf0-8de1-346995801e9f.webp
   SECTION.md v3.2: `d21f0e99-c345-4cf0-8de1-346995801e9f` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/7bce04948b426ee01b8e27d8d25a7e1ff3ec037495f9abbac2916123ebe01f5f/desktop_full-099e717c-2026-10-06T14-52-07-953Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/d101dd6ced8e4c8537bac071171645b9389f57e583ed0bd0a7f5ed9b808ef7d8/mobile_full-099e717c-2026-10-06T14-52-35-714Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/a5d898403a3953ba714523307d41722cc4d08eca21197ff7de68f15d1744ed1e/og_image-099e717c-2026-10-06T14-52-15-544Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/bac407af42d96110f5976195a1ca75810da7c2f36ca5c0f55cff4ac283be8202/motion-1791299668957.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/36115de4c898967681affaed64ff632e611f71ddd922bc867b6398f3134d385c/motion-poster-1791299668957.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
- Feature Card
- Logo Strip
- Primary Button
- Footer
- FAQ Accordion
- Scroll Linked List Reveals
- Rounded Surface Panels

## Quality rubric

Overall: 55.65/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: A well-produced, editorially minded one-page creative-director portfolio with a consistent type and panel system and content-aware case-study presentation, but one that leans entirely on familiar agency-portfolio conventions (dark hero, rounded card reveals, uniform scroll-fade motion) without a distinguishing structural or interactive idea, landing it in the competent tier rather than higher.

- Typography (15%): 60 — A genuine editorial hierarchy is in use: IvyPresto Display serif for hero case-study words paired with Neue Montreal sans and its italic cut for contrasting halves of titles (e.g. 'THE'/'IDEA', 'MOVING'/'FORWARD'), plus Hedvig Letters Serif for body copy and small-caps labels. Scale range (10px labels to 122.6px display) and consistent letter-spacing/tracking on uppercase eyebrow text show intentional typesetting. However, the font inventory also contains one-off strays (Arial, Funnel Display, MD Lórien Trial Regular each appearing only once) that read as fallback/loading artifacts rather than deliberate choices, undercutting full-system discipline.
- Color (10%): 58 — The base chrome is a restrained black-canvas/light-panel duotone, with accent hues reserved for case-study content and tied to each client's brand (red for Time/Audi card, teal for Allbirds, blue for Shell, purple for UBS). This is a sensible, content-responsive rule rather than a decorative palette, but the overall approach—neutral shell plus brand-colored project cards—is a common portfolio convention rather than a distinctive color system.
- Layout (20%): 61 — A clear structural pattern recurs: full-bleed dark hero, rounded light 'surface' panels breaking up sections (intro, partners, awards, events, press), and large full-bleed case-study cards with a consistent internal grid (eyebrow label, two-weight title, client/company/year meta row, short paragraph). This repetition across many sections constitutes a coherent system, executed with generous whitespace and legible information hierarchy in lists. It remains, however, a fairly standard one-page agency-portfolio structure without an unusual grid or spatial idea.
- Motion (20%): 54 — Motion is applied consistently as scroll-triggered fade/slide-up reveals across virtually every section (intro text, work history list, partner logos, project cards, events, press, footer), confirmed bidirectionally in the recording. This is competently and uniformly executed, but it is a single, ubiquitous technique (fade+translate on scroll) rather than a varied or signature motion vocabulary, and no hover/interaction motion was captured in evidence.
- Originality (25%): 47 — Individually pleasant elements—rounded panel cards floating on a dark canvas, cinematic full-bleed case-study imagery with overlaid serif/sans title pairs, scroll-reveal list rows—are all highly recognizable tropes from contemporary agency/creative-director portfolios. No single idea here is hard to substitute with a template; the site assembles familiar high-end portfolio conventions competently but does not introduce a distinctive structural, interactive, or conceptual device that couldn't be found on many comparable sites in this genre.
- Content (10%): 61 — Content and design are reasonably well matched: each case-study card's color and imagery are drawn from the actual client work (Audi car photography, Time magazine cover, Allbirds illustration, Shell cityscape), and the awards/press/events lists are presented in a consistent, scannable tabular format that suits a long CV-style record. The narrative flow (intro → partners → awards → case studies → events → press → contact) supports the professional story coherently.

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

## Curator notes

A deep blue glowing hero with small caps type sets a cinematic tone before the page shifts to bright white cards listing clients and credentials in fading grey, keeping trust details present but quiet. Below, wide project tiles with their own titles and distinct photography styles let each story read like a separate chapter as you scroll.

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