# ESR Bespoke — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.esrbespoke.au/
Captured: 2026-10-23
CSS measured: 2026-10-23T17:59:13.413Z at 1440×1000 — https://www.esrbespoke.au/
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 ESR Bespoke features a premium, minimalist design tailored to a luxury automotive aesthetic. It relies on high-contrast monochromatic themes, switching dramatically between black and white backgrounds. The typography is bold and structured, using large sans-serif headings and small, tracked-out uppercase labels. Large, high-quality photography and video elements serve as the primary visual focus, complemented by generous whitespace and precise, grid-aligned layouts.

## Classification

- Industry: other
- Site type: Landing
- Business model: Agency
- Styles: minimal, bold, corporate, typographic, luxury, automotive-premium
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: __bodyFont_0f148b — weight 500; size 92px; line-height 87.4px; tracking -0.9px; Regular (90% role confidence, computed values)
- Heading: __bodyFont_0f148b — weight 500; size 40px; line-height 40px; tracking -0.4px; Regular (90% role confidence, computed values)
- Body: __bodyFont_0f148b — weight 500; size 20px; line-height 24px; tracking normal; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Solid white background used for lower sections of the page. (90% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: Solid black text used on white backgrounds. (90% role confidence, computed values)
- Surface — surface #191919: color-3: computed rgb(25, 25, 25); AI role: Very dark gray background used for contrasting sections. (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": "__bodyFont_0f148b",
    "fontStack": "__bodyFont_0f148b, __bodyFont_Fallback_0f148b, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "ESR is recognised as an official Porsche Certified Collision Centre, one of only a select few in Aus",
        "top": 1424,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "At ESR, we offer a complete end-to-end service experience for owners of luxury and high-performance ",
        "top": 4911,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "__headingFont_a39ca7",
    "fontStack": "__headingFont_a39ca7, __headingFont_Fallback_a39ca7, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "300",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "1.3px",
    "traits": "uppercase",
    "count": 265,
    "contexts": [
      {
        "tag": "div",
        "text": "E",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "S",
        "top": 28,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "R",
        "top": 28,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "__bodyFont_0f148b",
    "fontStack": "__bodyFont_0f148b, __bodyFont_Fallback_0f148b, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Insurance Repairs",
        "top": 5552,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Claims Management",
        "top": 5617,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Privately Commissioned Repairs",
        "top": 5682,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "__bodyFont_0f148b",
    "fontStack": "__bodyFont_0f148b, __bodyFont_Fallback_0f148b, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "62px",
    "lineHeight": "62px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 35,
    "contexts": [
      {
        "tag": "div",
        "text": "S",
        "top": -1022,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": -1022,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "r",
        "top": -1022,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "__bodyFont_0f148b",
    "fontStack": "__bodyFont_0f148b, __bodyFont_Fallback_0f148b, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "62px",
    "lineHeight": "58.9px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "E",
        "top": 440,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "x",
        "top": 440,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "c",
        "top": 440,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "__bodyFont_0f148b",
    "fontStack": "__bodyFont_0f148b, __bodyFont_Fallback_0f148b, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "500",
    "size": "92px",
    "lineHeight": "87.4px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "Porsche",
        "top": 3059,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Bentley",
        "top": 3148,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Ferrari",
        "top": 3236,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "__headingFont_a39ca7",
    "fontStack": "__headingFont_a39ca7, __headingFont_Fallback_a39ca7, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "300",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "1.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Unmute",
        "top": 956,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "__headingFont_a39ca7",
    "fontStack": "__headingFont_a39ca7, __headingFont_Fallback_a39ca7, helvetica, arial, sans-serif, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "300",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Sign up",
        "top": 133,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 151,
    "contexts": [
      {
        "tag": "body",
        "text": "ESR BespokeAutomotive Groupsince 1989ServicesPartnersAboutContactCareersContactServicesPartnersAbout",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "E",
        "top": 28,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 25,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 221,
    "contexts": [
      {
        "tag": "div",
        "text": "S",
        "top": -1022,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": -62,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#191919",
    "alpha": 1,
    "cssValue": "rgb(25, 25, 25)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Exceptional is our standardThree decades of restoring excellence and reigniting the joy of the drive",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#040C09",
    "alpha": 1,
    "cssValue": "rgb(4, 12, 9)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3066,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Our services01Insurance Repairs02Claims Management03Privately Commissioned Repairs 04High-end Detail",
        "top": 5531,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Highly spacious, utilizing macro-whitespace to separate large typographic blocks and imagery.
- Corner style: Sharp, 90-degree corners are universally applied, contributing to a precise, engineered feel.
- Radius: Zero border radius across the visible layout.
- Borders: Extremely subtle, thin horizontal borders used as dividers in lists (e.g., rgba(255, 255, 255, 0.1)).
- Buttons: Text-only buttons using uppercase, tracked-out typography without visible bounding boxes.
- Content width: Wide, near full-bleed layout with consistent inset padding on the left and right edges.
- Density: Very low density, allowing individual elements and photography to command attention.
- Evidence: Visual inspection reveals an emphasis on open space, sharp edges, and thin dividing lines over contained UI cards or buttons.

## Sections

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

1. **Hero — Exceptional Is Our Standard** (Home)
   AI suggestion (98% confidence): Complete full-viewport automotive hero with cinematic car imagery, prominent brand statement, supporting copy, navigation, and an “Our Story” cue; it has a clear ending at the transition to the white certification content.
   Capture: 1440×1002px; page bounds 0–1002px of 7170px; source section ID: `89b99f0e-a8ee-4b62-aa7c-ed9b58fc6387`; image: https://media.designdetails.io/library/11be35438fe7c1186e14dcb3763d457b34a5d8a4178be84c12570d2d5bec46a2/89b99f0e-a8ee-4b62-aa7c-ed9b58fc6387.webp
   SECTION.md v3.2: `89b99f0e-a8ee-4b62-aa7c-ed9b58fc6387` (deterministic evidence; editorial review pending)
2. **Features — ESR is recognised as an official Porsche Certified Collision Centre, one…** (Home)
   Reusable feature composition from Home, organized around “ESR is recognised as an official Porsche Certified Collision Centre, one…”.
   Capture: 1440×648px; page bounds 1056–1704px of 7170px; source section ID: `18890159-5a3f-4aae-9803-115c14d476b0`; image: https://media.designdetails.io/library/7d9904ade995eaacdbf7d2f9ab80773e1a4cc3dd7909b637463cf76196f2b020/section_crop-18890159-2026-10-23T17-59-24-213Z.webp
   SECTION.md v3.2: `18890159-5a3f-4aae-9803-115c14d476b0` (deterministic evidence; editorial review pending)
3. **Features — ESR Bespoke Features** (Home)
   Reusable feature composition from Home, organized around “ESR Bespoke Features”.
   Capture: 1440×1000px; page bounds 1736–2736px of 7170px; source section ID: `0ae3db86-c2bb-4ae9-9081-2ce43d2564ca`; image: https://media.designdetails.io/library/29833fb5a39bd5963295e7ca8bd240a17d3f6f413eee30ebeec55ba7993a008f/section_crop-0ae3db86-2026-10-23T17-59-25-296Z.webp
   SECTION.md v3.2: `0ae3db86-c2bb-4ae9-9081-2ce43d2564ca` (deterministic evidence; editorial review pending)
4. **Features — At ESR, we offer a complete end-to-end service experience for owners of…** (Home)
   Reusable feature composition from Home, organized around “At ESR, we offer a complete end-to-end service experience for owners of…”.
   Capture: 1440×1681px; page bounds 4489–6170px of 7170px; source section ID: `860ff113-de4f-452f-ae37-b95ce80e8b71`; image: https://media.designdetails.io/library/b1887d263b15e94f80dd94a93b0d7a482f072be46e2100b61e492227053a9441/section_crop-860ff113-2026-10-23T17-59-27-442Z.webp
   SECTION.md v3.2: `860ff113-de4f-452f-ae37-b95ce80e8b71` (deterministic evidence; editorial review pending)
5. **Other — Luxury Marques Selector** (Home)
   AI-proposed category: brand-selector
AI suggestion (96% confidence): Complete, distinctive brand-expertise showcase with an oversized marque list and paired vehicle-detail imagery; useful as a reusable interactive brand selector.
   Capture: 1440×1755px; page bounds 2735–4490px of 7170px; source section ID: `dbfc8ade-9888-4120-9e1e-035ac713b6f1`; image: https://media.designdetails.io/library/ded289038dfd08f4c9933f76f9d6c13f425a16c04119f1d253d834589721fd55/dbfc8ade-9888-4120-9e1e-035ac713b6f1.webp
   SECTION.md v3.2: `dbfc8ade-9888-4120-9e1e-035ac713b6f1` (deterministic evidence; editorial review pending)
6. **Features — Our Services Numbered List** (Home)
   AI suggestion (90% confidence): A complete, self-contained services index with a clear label, six numbered offerings, and ruled rows on a dark background.
   Capture: 1440×642px; page bounds 5529–6171px of 7170px; source section ID: `fff29e80-e44f-43c4-b752-076f3c0991c2`; image: https://media.designdetails.io/library/67349f645b903700a3ade9b62f56265084ca8d8376aafdd5be68b60b4b5c567f/fff29e80-e44f-43c4-b752-076f3c0991c2.webp
   SECTION.md v3.2: `fff29e80-e44f-43c4-b752-076f3c0991c2` (deterministic evidence; editorial review pending)
7. **Footer — ESR Bespoke Contact Footer** (Home)
   AI suggestion (98% confidence): Complete page footer featuring the oversized ESR wordmark, social handle, contact details, email, address, and privacy link.
   Capture: 1440×997px; page bounds 6173–7170px of 7170px; source section ID: `f20b2737-bef6-4de1-a515-428811254a4a`; image: https://media.designdetails.io/library/8ac0621b6c54276cfcc98af64a8a80a64fe04525fb907d5792d8fafc46373329/f20b2737-bef6-4de1-a515-428811254a4a.webp
   SECTION.md v3.2: `f20b2737-bef6-4de1-a515-428811254a4a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/12aa3db83411e75c1023909664473cd7b0742c9b4e25be5af448a2eca6a60935/desktop_full-8f4ded0f-2026-10-23T17-59-13-423Z.webp
- Mobile screenshot: https://media.designdetails.io/library/b36a26b58f9d7c30a9f9a3a244d02b3c689f258170d97a2ff827cd0417a3286c/mobile_full-8f4ded0f-2026-10-23T17-59-44-318Z.webp
- Open Graph image: https://media.designdetails.io/library/57ce4028263d1dec294c3de7458d05f17fbc34e8aed9cfaa72ef06b204dc9712/og_image-8f4ded0f-2026-10-23T17-59-22-099Z.webp
- Full-page video: https://media.designdetails.io/library/e00d0f8d3acb942be56fe49b416c915de9a92712b0366f22e02d53cbe9584d35/motion-1792780554650.mp4
- Video poster: https://media.designdetails.io/library/e071f95d3e1651cd00f91e547184d6e1cc9d281db29bba0a348700b65caf8d06/motion-poster-1792780554650.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Video Frame
- Footer
- Text Link
- Marque List
- Numbered Service List

## Quality rubric

Overall: 54.38/100 (Competent)
Evidence coverage: 80%
Judge tier: Competent
Verdict: ESR Bespoke executes a polished, disciplined monochrome luxury-automotive template with genuine care in grid alignment, type scale, and copy-to-imagery pairing, but it leans almost entirely on established high-end automotive site conventions (full-bleed hero video, marque lists, numbered service dividers, black/white section alternation) without introducing a distinctive structural idea, and motion—a fifth of the rubric—cannot be assessed at all, keeping the overall result solidly competent rather than exceptional.

- Typography (15%): 62 — A deliberate two-tier type system is in place: large display sizes (92px for the marque list, 62px for section headers, 40px for body intros) paired with a small 14px uppercase tracked-letterspacing label font for navigation and section eyebrows. Negative tracking on the large sizes (-0.9px, -0.6px) and consistent weight (500) give the display text a controlled, engineered feel appropriate to the automotive subject. However, the hierarchy relies on only two font families and a fairly conventional 'huge list + small caps label' luxury-site pattern; there is little evidence of a more layered or inventive typographic system (e.g., varied optical weights, expressive pairing, or kinetic typographic treatment).
- Color (10%): 56 — The palette is a strict black/white binary with a single near-black surface (#191919) used for section contrast, plus a barely-visible rgba(255,255,255,0.1) divider. This is coherent and appropriate to the premium-automotive idiom, but it is also the single most common move in this genre and offers no secondary accent, material color, or tonal variation to differentiate the site beyond stark contrast-switching between sections.
- Layout (20%): 64 — The page follows a disciplined full-bleed grid with consistent left/right insets, generous macro-whitespace, and a clear compositional idea in the marque list (bold vs. grayed-out brand names) and the numbered services list (01–06 with thin hairline dividers) that gives structure to otherwise sparse sections. Section-to-section rhythm (hero video → certification text+image → marque list → services → footer) reads as intentional rather than accidental.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference; only a static DOM/CSS snapshot and an 'UNMUTE' button implying a background video are available.
- Originality (25%): 40 — Every component—full-bleed hero video with 'UNMUTE' overlay, stark black/white alternating sections, giant uppercase brand-marque list, numbered service list with hairline dividers, oversized wordmark in the footer—is a well-worn convention of premium automotive/luxury service sites. The execution is clean but there is no hard-to-substitute idea unique to this brand; the marque list typographic emphasis (bold vs. gray) is the closest thing to a distinctive device, and even that is a common 'highlight the relevant item in a long list' trick.
- Content (10%): 58 — Copy and visual structure are reasonably matched to purpose: the certification narrative sits beside a Porsche-branded facility photo, the marque list visually echoes the breadth of brands serviced, and the numbered list maps cleanly onto the six named services. The integration is functional and legible but not elevated by any unique data visualization, proof points, or imagery system beyond stock-style photography and generic marque wordmarks.

Coverage: 80% 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 full bleed shot of a Porsche crossing a steel bridge sets a confident mood, with bold sans headlines over tiny uppercase labels that feel like a workshop spec sheet. A dimmed brand list of Bentley, Ferrari and Range Rover, paired with numbered service rows on black, signals exclusivity and makes the prestige client roster easy to scan.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.