# Parker Studio — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.parker.studio/
Captured: 2026-10-29
CSS measured: 2026-10-29T16:56:25.488Z at 1440×1000 — https://www.parker.studio/
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

Parker Studio employs an editorial and typographic style characterized by a split-screen layout, high-contrast typography, and a muted, pastel-accented color palette. A stationary left sidebar provides continuous navigation and features an embedded video showreel, alongside a live, analog clock that tracks time dynamically. The scrollable right column displays content sequentially, transitioning from bold, serif-heavy headers to collage-style image layouts and structured lists. Reusable components include varied feature cards, prominent editorial text blocks, and structured contact/inquiry forms.

## Classification

- Industry: creative
- Site type: Portfolio
- Business model: Agency
- Styles: editorial, typographic, colourful, corporate, split-screen, collage
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: psTimes — weight 400; size 115.2px; line-height 85.2px; tracking normal; Regular (95% role confidence, computed values)
- Heading: psTimes — weight 700; size 86.4px; line-height 86.4px; tracking -1.7px; Regular (90% role confidence, computed values)
- Body: dieGroteskA — weight 400; size 15px; line-height 21px; tracking normal; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) serves as the primary background for the scrolling content area. (95% role confidence, computed values)
- Text — text #161E20: color-2: computed rgb(22, 30, 32); AI role: Dark gray/black (#161E20) is the dominant color for typography across the site. (95% role confidence, computed values)
- Surface — surface #EDEDED: color-4: computed rgb(237, 237, 237); AI role: Light gray (#EDEDED) is used as a background for specific text blocks and the sidebar contact area. (85% role confidence, computed values)
- Accent — accent #B7E3B6: color-5: computed rgb(183, 227, 182); AI role: Mint green (#B7E3B6) highlights the 'Projects' section and the services list. (80% role confidence, computed values)
- Accent — accent #F7F29D: color-8: computed rgb(247, 242, 157); AI role: Pale yellow (#F7F29D) marks the 'Studio' navigation block. (80% role confidence, computed values)
- Accent — accent #A78769: color-13: computed rgb(167, 135, 105); AI role: Muted brown (#A78769) is used for the 'Follow' navigation block. (80% role confidence, computed values)
- Muted Text — muted text #A2A5A6: color-3: computed rgb(162, 165, 166); AI role: Lighter gray (#A2A5A6) is used for secondary text like phone numbers and location labels. (75% role confidence, computed values)

## Exact computed CSS inventory

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

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "nimbus",
    "fontStack": "nimbus, \"nimbus Fallback\", \"Times New Roman\", Times, serif, \"Times New Roman\", Times, serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "Phone Number",
        "top": 295,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "+1 206 555 8980",
        "top": 313,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Located Globally",
        "top": 400,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "for general inquiries",
        "top": 5774,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "hello(at)parker.studio",
        "top": 5795,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "phone number",
        "top": 5836,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Work shaped by shared values",
        "top": 2388,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Comprised of creative people working globally.",
        "top": 3160,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Start",
        "top": 5115,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Designed by Parker",
        "top": 1683,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Typography by Parker & Klim",
        "top": 1703,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Developed by Pretend",
        "top": 1722,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", \"Times New Roman\", Times, Georgia, serif, \"Times New Roman\", Times, Georgia, serif",
    "weight": "700",
    "size": "62.4px",
    "lineHeight": "59.3px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "At its core, Parker is a craft-focused brand studio.",
        "top": 2438,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Newsletter",
        "top": 1459,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Working from:",
        "top": 3049,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "26px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "text",
        "text": "12",
        "top": 731,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "1",
        "top": 744,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "2",
        "top": 782,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", \"Times New Roman\", Times, Georgia, serif, \"Times New Roman\", Times, Georgia, serif",
    "weight": "700",
    "size": "86.4px",
    "lineHeight": "77.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Visual Identity",
        "top": 3960,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Strategy",
        "top": 4042,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Naming",
        "top": 4120,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", \"Times New Roman\", Times, Georgia, serif, \"Times New Roman\", Times, Georgia, serif",
    "weight": "700",
    "size": "86.4px",
    "lineHeight": "86.4px",
    "letterSpacing": "-1.7px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "We bring high-end taste, deep customer empathy, and system-level thinking to build brands that feel ",
        "top": 1109,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "customer empathy,",
        "top": 1195,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "customer empathy",
        "top": 1195,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", \"Times New Roman\", Times, Georgia, serif, \"Times New Roman\", Times, Georgia, serif",
    "weight": "400",
    "size": "115.2px",
    "lineHeight": "85.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "for Ambitious",
        "top": 80,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Founders at Moments",
        "top": 165,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Moments",
        "top": 141,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Projects",
        "top": 504,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Studio",
        "top": 643,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Follow",
        "top": 829,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "abcSimonMono",
    "fontStack": "abcSimonMono, \"abcSimonMono Fallback\", ui-monospace, monospace, ui-monospace, monospace",
    "weight": "400",
    "size": "9px",
    "lineHeight": "9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "On",
        "top": 987,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Volume",
        "top": 1117,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Channel",
        "top": 1117,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "PLAY",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Showreel",
        "top": 28,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "capitalize",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Built for What's Next ™",
        "top": 6648,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "© Parker Creative, LLC 2026",
        "top": 6648,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "22px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 29,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Online",
        "top": 3478,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Parker",
        "top": 1683,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Parker & Klim",
        "top": 1703,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pretend",
        "top": 1722,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "dieGroteskA",
    "fontStack": "dieGroteskA, \"dieGroteskA Fallback\", system-ui, sans-serif, system-ui, sans-serif",
    "weight": "300",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Parker Studio",
        "top": 30,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 20,
    "contexts": [
      {
        "tag": "body",
        "text": "Parker Studio→Start New ProjectPLAYShowreelPhone Number+1 206 555 8980Located GloballyParker Creativ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "aside",
        "text": "PLAYShowreelPhone Number+1 206 555 8980Located GloballyParker Creative, LLC 2026hello@parker.studiof",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "PLAYShowreel",
        "top": 8,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#161E20",
    "alpha": 1,
    "cssValue": "rgb(22, 30, 32)",
    "count": 138,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": -5,
        "property": "::before-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": -5,
        "property": "::after-background"
      },
      {
        "tag": "a",
        "text": "Parker Studio",
        "top": 30,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#A2A5A6",
    "alpha": 1,
    "cssValue": "rgb(162, 165, 166)",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "+1 206 555 8980",
        "top": 313,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "+1 206 555 8980",
        "top": 313,
        "property": "::after-background"
      },
      {
        "tag": "p",
        "text": "Located Globally",
        "top": 400,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#EDEDED",
    "alpha": 1,
    "cssValue": "rgb(237, 237, 237)",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "PLAY",
        "top": 28,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Phone Number+1 206 555 8980Located GloballyParker Creative, LLC 2026hello@parker.studiofor general i",
        "top": 279,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1204,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#B7E3B6",
    "alpha": 1,
    "cssValue": "rgb(183, 227, 182)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Projects",
        "top": 456,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3834,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#D8CFC0",
    "alpha": 1,
    "cssValue": "rgb(216, 207, 192)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Work shaped by shared valuesAt its core, Parker is a craft-focused brand studio.",
        "top": 1788,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 32,
    "contexts": [
      {
        "tag": "svg",
        "text": "121234567891011",
        "top": 733,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 777,
        "property": "svg-fill"
      },
      {
        "tag": "line",
        "text": "",
        "top": 821,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F7F29D",
    "alpha": 1,
    "cssValue": "rgb(247, 242, 157)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Studio",
        "top": 595,
        "property": "control-background"
      },
      {
        "tag": "section",
        "text": "NewsletterSubscribe to get updates and news directly to your inbox.",
        "top": 1439,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#BEBEBE",
    "alpha": 1,
    "cssValue": "rgb(190, 190, 190)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "OnVolumeChannel",
        "top": 968,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Designed by Parker",
        "top": 1683,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Parker",
        "top": 1683,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#D5D5D5",
    "alpha": 1,
    "cssValue": "rgb(213, 213, 213)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 416,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#F4EE93",
    "alpha": 1,
    "cssValue": "rgb(244, 238, 147)",
    "count": 1,
    "contexts": [
      {
        "tag": "article",
        "text": "Online",
        "top": 3271,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3303,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#A78769",
    "alpha": 1,
    "cssValue": "rgb(167, 135, 105)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Follow",
        "top": 733,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#2A31BE",
    "alpha": 1,
    "cssValue": "rgb(42, 49, 190)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Inquire",
        "top": 1204,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFC1E8",
    "alpha": 1,
    "cssValue": "rgb(255, 193, 232)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5031,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#CDE3E2",
    "alpha": 1,
    "cssValue": "rgb(205, 227, 226)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5053,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#EFEC8E",
    "alpha": 1,
    "cssValue": "rgb(239, 236, 142)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5042,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#EE2D2A",
    "alpha": 1,
    "cssValue": "rgb(238, 45, 42)",
    "count": 2,
    "contexts": [
      {
        "tag": "line",
        "text": "",
        "top": 818,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#65CBE4",
    "alpha": 1,
    "cssValue": "rgb(101, 203, 228)",
    "count": 2,
    "contexts": [
      {
        "tag": "line",
        "text": "",
        "top": 821,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#A4489B",
    "alpha": 1,
    "cssValue": "rgb(164, 72, 155)",
    "count": 2,
    "contexts": [
      {
        "tag": "line",
        "text": "",
        "top": 797,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#F9ED24",
    "alpha": 1,
    "cssValue": "rgb(249, 237, 36)",
    "count": 2,
    "contexts": [
      {
        "tag": "line",
        "text": "",
        "top": 848,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#161E20",
    "alpha": 0.4,
    "cssValue": "rgba(22, 30, 32, 0.4)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "→",
        "top": 29,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#171E21",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(22, 30, 32, 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Online",
        "top": 3478,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#C3EF79",
    "alpha": 1,
    "cssValue": "rgb(195, 239, 121)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 984,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: The layout uses a distinct vertical rhythm driven by full-width blocks in the sidebar and widely spaced, centered content modules in the scrolling area. White space is generous, emphasizing the large typography.
- Corner style: Largely sharp, square corners on the major layout blocks, though some smaller internal elements (like the yellow grid block) exhibit rounded corners.
- Radius: Minimal reliance on border-radius for primary structure, but visible on specific card-like components.
- Borders: Subtle borders or separators are occasionally used (e.g., lines in the clock, underlines in text), but block definition relies mostly on background color changes.
- Buttons: Interactive elements are often full-block sections (like sidebar nav) rather than traditional pill or rectangular buttons.
- Content width: The split screen allocates roughly 1/3 of the viewport to the fixed sidebar and 2/3 to the scrolling content, which itself maxes out at a comfortable reading width.
- Density: Low density. The design prioritizes large elements and substantial negative space for an editorial feel.
- Evidence: Observed from the fixed 1/3 sidebar structure, the large block colors (color-5, color-8), sharp edges on main sections, and the prominent use of whitespace around text elements (font-11, font-10).

## Sections

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

1. **Navbar — Parker Studio Navbar** (Home)
   A sparse bar with a centered studio name and two round icon controls keeps navigation quiet so the artwork leads.
   Capture: 1440×80px; page bounds 0–80px of 6674px; source section ID: `ba30b3c7-80cd-4c31-9832-fafb365aa0c0`; image: https://media.designdetails.io/library/83783037b06db9c857ced9492529534c01b145796a66cf793d8e8ce58ec2e0e3/ba30b3c7-80cd-4c31-9832-fafb365aa0c0.webp
   SECTION.md v3.2: `ba30b3c7-80cd-4c31-9832-fafb365aa0c0` (deterministic evidence; editorial review pending)
2. **Hero — Collage sidebar beside serif headline** (Home)
   A large serif headline with underlined phrases sits beside colorful tiles, giving a clear message and a playful, crafted first impression.
   Capture: 1440×920px; page bounds 80–1000px of 6674px; source section ID: `5b9227be-be8f-427a-9a4f-ed396097a992`; image: https://media.designdetails.io/library/87cc50857a56166e2290ab35dbb528f830d5b57941248929a600e69ea956f0c8/5b9227be-be8f-427a-9a4f-ed396097a992.webp
   SECTION.md v3.2: `5b9227be-be8f-427a-9a4f-ed396097a992` (deterministic evidence; editorial review pending)
3. **Other — Serif brand statement on paper card** (Home)
   Centered large serif text with underlined key phrases states the studio's values quickly, and the punched-hole card adds tactile character.
   Capture: 1440×647px; page bounds 1000–1647px of 6674px; source section ID: `4a76b6b1-be88-48b3-8477-859c4b1145ec`; image: https://media.designdetails.io/library/fb22d8355364520e9942d9befea0ea6ad6f1a46b1e224b8ca9c17714190fe523/4a76b6b1-be88-48b3-8477-859c4b1145ec.webp
   SECTION.md v3.2: `4a76b6b1-be88-48b3-8477-859c4b1145ec` (deterministic evidence; editorial review pending)
4. **Editorial — Illustrated objects with studio intro** (Home)
   A detailed illustration of numbered objects above a serif line shows craft focus visually before the text explains it.
   Capture: 1440×957px; page bounds 1647–2604px of 6674px; source section ID: `78ae2899-4cdf-4718-bfe1-8b85025f4bb3`; image: https://media.designdetails.io/library/d4b691c45650f64c0493ea3d46129e6ca36f82635495d0d3a8826cbd0cce28a5/78ae2899-4cdf-4718-bfe1-8b85025f4bb3.webp
   SECTION.md v3.2: `78ae2899-4cdf-4718-bfe1-8b85025f4bb3` (deterministic evidence; editorial review pending)
5. **Other — Global studio locations on desk objects** (Home)
   Device-like tiles and a dark city list present a distributed team playfully, with the grid backdrop keeping it orderly.
   Capture: 1440×1197px; page bounds 2604–3801px of 6674px; source section ID: `d1f18a6e-7cc9-4753-83ec-df450d19390f`; image: https://media.designdetails.io/library/473a831f6fef9107b95b031d9210952e17b8c265c6f9492e1962307a82cd6954/d1f18a6e-7cc9-4753-83ec-df450d19390f.webp
   SECTION.md v3.2: `d1f18a6e-7cc9-4753-83ec-df450d19390f` (deterministic evidence; editorial review pending)
6. **Features — Centered service list on green card** (Home)
   A stacked, centered list of services in one serif style lets visitors scan the full offering in seconds on a calm color field.
   Capture: 1440×789px; page bounds 3801–4590px of 6674px; source section ID: `8c25fe28-94b0-4761-b1c0-d3a251aa57d1`; image: https://media.designdetails.io/library/2c4937012dcd61609044d18a382054d396458e9e17d87991d39747ebc40e951f/8c25fe28-94b0-4761-b1c0-d3a251aa57d1.webp
   SECTION.md v3.2: `8c25fe28-94b0-4761-b1c0-d3a251aa57d1` (deterministic evidence; editorial review pending)
7. **CTA — Sticky note start-project prompt** (Home)
   A small sticky note floating in wide white space draws the eye and makes the call to action feel casual and inviting.
   Capture: 1440×1092px; page bounds 4590–5682px of 6674px; source section ID: `1a74cf5f-f1e5-437b-8a08-743e2fafc9af`; image: https://media.designdetails.io/library/09a0e61e8daa792728908af237013697bf312e199137b163b5b83bea229dd8eb/1a74cf5f-f1e5-437b-8a08-743e2fafc9af.webp
   SECTION.md v3.2: `1a74cf5f-f1e5-437b-8a08-743e2fafc9af` (deterministic evidence; editorial review pending)
8. **Footer — Contact details over large logo** (Home)
   Small contact text sits above an oversized monogram on grey, so the brand lingers while essential details stay easy to find.
   Capture: 1440×992px; page bounds 5682–6674px of 6674px; source section ID: `6bf512f2-30af-4fd9-8270-1a25577b4889`; image: https://media.designdetails.io/library/90871a177f0984eff67ac41175faf38c690d50e4962c76c5ba3e7d9f2d6e741a/6bf512f2-30af-4fd9-8270-1a25577b4889.webp
   SECTION.md v3.2: `6bf512f2-30af-4fd9-8270-1a25577b4889` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/e8b43a427d9e4905d13d0764f5a37d97dfe961496190c4e0784b6c8ac9bf3220/desktop_full-1194db43-2026-10-29T16-56-25-509Z.webp
- Mobile screenshot: https://media.designdetails.io/library/a204a8123ffa0b7623eaee00a6a59bbbdd8367a4052d8919979bb439928af274/mobile_full-1194db43-2026-10-29T16-57-02-330Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/7e852655e55c794443ecc6eddba56f4e890e41df524b7cb19386633e2e716e3a/motion-1793296417361.mp4
- Video poster: https://media.designdetails.io/library/07aba5682cc5645a5dfeae2e9de43141dfcb8a76a8848515c0891964f3e5bd33/motion-poster-1793296417361.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

- Hero With Background Imagery
- Navigation Bar
- Editorial Card
- Feature Collection
- Footer
- Newsletter Form
- Video Frame
- Live Clock Widget
- Fixed Sidebar Navigation
- Scattered Image Arrangement

## Quality rubric

Overall: 59.2/100 (Competent)
Evidence coverage: 100%
Judge tier: Good
Verdict: Parker Studio executes a competent, well-crafted editorial agency site: a persistent split-screen sidebar with a working clock and showreel, oversized serif statements, and a repeatable sequence of collage, grid, and card sections. Typography and layout are the strongest axes, showing real systemic consistency rather than a single hero moment. However, the site under-delivers on motion — the provided evidence shows no scroll-triggered animation or interaction choreography, just a looping video and a ticking clock — and originality is constrained by how closely the overall approach tracks a now-common high-end studio template, with the clock being the one standout idea. Color, while pleasant, is largely reserved for three navigation swatches rather than functioning as a pervasive system. The result is a polished, good execution of a familiar idiom rather than a landmark reinvention.

- Typography (15%): 70 — A deliberate two-voice system is used: a large serif (psTimes) for declarative statements at 115.2px/86.4px with tight negative tracking, paired with a utilitarian grotesk (dieGroteskA) for body copy, labels, and UI chrome, plus a tiny monospace (abcSimonMono) for micro-labels like 'Volume' and 'Channel'. The hierarchy is legible and consistently applied across hero, statement blocks, and lists (font-9/font-10 reused for services).
- Color (10%): 58 — The palette relies on a neutral canvas (white/#EDEDED/near-black text) accented by three flat pastel blocks (mint #B7E3B6, pale yellow #F7F29D, muted brown #A78769) used almost entirely to color-code the three sidebar nav buttons. This creates light wayfinding logic but the scrolling content itself stays mostly monochrome with only occasional pastel call-outs (pink/teal/yellow grid chips, a blue 'Inquire' link), so the color system reads as decorative labeling rather than a structural device.
- Layout (20%): 65 — A fixed one-third sidebar (nav, showreel video, live clock, contact block) paired with a scrolling two-thirds content column is maintained consistently, and the scrolling side cycles through a repeatable vocabulary: oversized statement block, collage-style object arrangement, a text-on-tint card, a monospace-labeled locations grid, and a large typographic footer mark. This is a coherent, multi-section system rather than a single hero trick.
- Motion (20%): 46 — Gemini's capture explicitly notes standard vertical scrolling with the fixed sidebar unchanged and 'no noticeable scroll-triggered animations or parallax effects.' The only moving elements are a looping showreel video and an analog clock with second-hand motion, both ambient/ever-running rather than choreographed to user interaction or scroll position.
- Originality (25%): 58 — The fixed split-screen agency layout, giant serif pull-quotes, pastel nav blocks, and collage object photography are all familiar from the current high-end studio-site genre; the standout idea — a working analog clock embedded permanently in the sidebar — is a genuinely distinctive touch, but it's a single device rather than part of a broader reinvented system, and the rest of the site (locations grid, services stack, footer wordmark) follows established templates closely.
- Content (10%): 62 — Copy and imagery are topically aligned (craft-studio statement paired with deconstructed tool collage; 'Working from' heading paired with a city list; services paired with a tinted editorial card), giving the content a loosely cohesive narrative, though the pairing is mostly literal/decorative rather than deeply integrated with layout mechanics.

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

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

## Verification checklist

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

## Curator notes

A sticky sidebar of real client project cards in bold yellow, green and brown blocks scrolls alongside the main column, so you browse past work and read the studio's pitch at the same time. Large serif headlines and object-diagram style illustrations of tools and clocks give the page a crafted, tactile feel that builds trust.

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