# Justin Jefferson — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://jjettas.com/
Captured: 2026-11-08
CSS measured: 2026-11-08T07:50:57.959Z at 1440×1000 — https://jjettas.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: claude-sonnet-5

## Design direction

This portfolio site for Justin Jefferson utilizes a bold, typographic, and highly visual approach with a strong editorial and brutalist influence. The typography is characterized by massive, condensed sans-serif headings, often set in uppercase and spanning the full viewport width, creating a commanding presence. The palette relies on a stark contrast between a dark, rich purple-black canvas and a warm off-white, punctuated by vibrant yellow accents and full-color photographic imagery. Large, distinct sections break up the content, with horizontal scrolling and layered imagery contributing to a dynamic, multimedia experience.

## Classification

- Industry: entertainment
- Site type: Blog
- Business model: Not identified
- Styles: bold, editorial, typographic, brutalist, athletic
- Platform: Custom code
- Technology: Next.js, Tailwind CSS, Three.js

## Typography

- Display: beachwood-variable — weight 700; size 433px; line-height 368px; tracking -13px; uppercase (100% role confidence, computed values)
- Body: fontBody — weight 400; size 14px; line-height 19.3px; tracking 0.1px; Regular (95% role confidence, computed values)
- Mono: fontMono — weight 400; size 13.7px; line-height 21.2px; tracking 1.6px; uppercase (80% role confidence, computed values)

## Functional palette

- Primary Action — primary action #EEAC1A: color-11: computed rgb(238, 172, 26); AI role: Bright yellow rgb(238, 172, 26) used for the main 'ON-FIELD' CTA button. (95% role confidence, computed values)
- Canvas — canvas #171220: color-1: computed rgb(23, 18, 32); AI role: Very dark purple/black rgb(23, 18, 32) used extensively as a background for sections and the menu. (90% role confidence, computed values)
- Surface — surface #F4EFE6: color-2: computed rgb(244, 239, 230); AI role: Warm off-white rgb(244, 239, 230) used as the primary light background color. (90% role confidence, computed values)
- Text — text #F4EFE6: color-2: computed rgb(244, 239, 230); AI role: The same off-white is used for text when on the dark canvas. (85% role confidence, computed values)
- Accent — accent #9E6DE9: color-10: computed rgb(158, 109, 233); AI role: Purple rgb(158, 109, 233) used for the stylized '9' and signature graphic. (70% 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": "beachwood-variable",
    "fontStack": "beachwood-variable, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "433px",
    "lineHeight": "368px",
    "letterSpacing": "-13px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Partnerships",
        "top": 10010,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Partnerships",
        "top": 10010,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "beachwood-variable",
    "fontStack": "beachwood-variable, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "313.3px",
    "lineHeight": "260.1px",
    "letterSpacing": "-9.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Signature Moments",
        "top": 0,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "800",
    "size": "20px",
    "lineHeight": "21px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Under Armour",
        "top": 10673,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "800",
    "size": "15.1px",
    "lineHeight": "23.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Justin Jefferson",
        "top": 1000,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.3px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 116,
    "contexts": [
      {
        "tag": "p",
        "text": "The 2020 first-round pick out of LSU who rewrote the record books — the rookie card that marked the ",
        "top": 690,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "F",
        "top": 690,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "r",
        "top": 690,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "20.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 32,
    "contexts": [
      {
        "tag": "p",
        "text": "All-hands at UA HQ",
        "top": 17800,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "White on white, road game",
        "top": 17833,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Paris, all white",
        "top": 17808,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "fontMono",
    "fontStack": "fontMono, \"fontMono Fallback\", ui-monospace, SFMono-Regular, Menlo, monospace",
    "weight": "400",
    "size": "13.7px",
    "lineHeight": "21.2px",
    "letterSpacing": "1.6px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "The Peach Bowl",
        "top": 591,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Single Season Record",
        "top": 785,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The Catch",
        "top": 537,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "fontMono",
    "fontStack": "fontMono, \"fontMono Fallback\", ui-monospace, SFMono-Regular, Menlo, monospace",
    "weight": "400",
    "size": "11.2px",
    "lineHeight": "17.4px",
    "letterSpacing": "1.8px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "14 REC · 227 YDS · 4 TD",
        "top": 620,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "88 REC · 1,400 YDS · 7 TD",
        "top": 814,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "4TH & 18 · 32-YARD ONE-HANDED GRAB",
        "top": 566,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "400",
    "size": "15.1px",
    "lineHeight": "23.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "From a St. Rose, Louisiana to the Met Gala runway. Every move Justin makes carries intention, style,",
        "top": 1000,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "The signature partnership. Justin is the face of Under Armour football — custom game-day cleats, des",
        "top": 10710,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "800",
    "size": "31px",
    "lineHeight": "32.5px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 18184,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Home",
        "top": 18187,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "On-Field",
        "top": 18237,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "beachwood-variable",
    "fontStack": "beachwood-variable, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "300",
    "size": "129.6px",
    "lineHeight": "129.6px",
    "letterSpacing": "9.1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "10",
        "top": 728,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "20",
        "top": 728,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "30",
        "top": 728,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "19.5px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "An Assemble Project",
        "top": 18781,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Privacy",
        "top": 18781,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Terms",
        "top": 18781,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "beachwood-variable",
    "fontStack": "beachwood-variable, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "144px",
    "lineHeight": "129.6px",
    "letterSpacing": "-2.2px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "18 is gonna go out there",
        "top": 17168,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "and make a play",
        "top": 17298,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "beachwood-variable",
    "fontStack": "beachwood-variable, \"Helvetica Neue\", Arial, sans-serif",
    "weight": "700",
    "size": "142px",
    "lineHeight": "117.8px",
    "letterSpacing": "-1.4px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Records were made",
        "top": 18308,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "to be broken",
        "top": 18426,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "800",
    "size": "24px",
    "lineHeight": "25.2px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "On-Field",
        "top": 18625,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "800",
    "size": "14px",
    "lineHeight": "14.7px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "View all",
        "top": 10819,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "fontBody",
    "fontStack": "fontBody, \"fontBody Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -73,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#171220",
    "alpha": 1,
    "cssValue": "rgb(23, 18, 32)",
    "count": 156,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -73,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 60,
        "property": "svg-fill"
      },
      {
        "tag": "h1",
        "text": "Justin Jefferson",
        "top": 1000,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4EFE6",
    "alpha": 1,
    "cssValue": "rgb(244, 239, 230)",
    "count": 455,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -73,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#15111D",
    "alpha": 1,
    "cssValue": "oklab(0.187637 0.012683 -0.022158)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#D3C8BA",
    "alpha": 1,
    "cssValue": "oklab(0.837888 0.00629261 0.0219173)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#322C37",
    "alpha": 1,
    "cssValue": "oklab(0.303607 0.0129981 -0.0168196)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#8C7C91",
    "alpha": 1,
    "cssValue": "color(srgb 0.54902 0.487843 0.570196)",
    "count": 78,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 18773,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#433C46",
    "alpha": 0.4,
    "cssValue": "rgba(68, 59, 70, 0.4)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 17980,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 38,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 28,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 500,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#D2CACD",
    "alpha": 1,
    "cssValue": "rgb(210, 202, 205)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "18 is gonna go out there",
        "top": 17168,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#9E6DE9",
    "alpha": 1,
    "cssValue": "rgb(158, 109, 233)",
    "count": 6,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 18207,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "",
        "top": 18682,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#EEAC1A",
    "alpha": 1,
    "cssValue": "rgb(238, 172, 26)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 10851,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "On-Field",
        "top": 18592,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Home",
        "top": 18187,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#F0E4D4",
    "alpha": 1,
    "cssValue": "rgb(240, 228, 212)",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 18184,
        "property": "text"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 18700,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 18705,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F6F2EF",
    "alpha": 0.5490196078431373,
    "cssValue": "rgba(246, 243, 239, 0.55)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "The signature partnership. Justin is the face of Under Armour football — custom game-day cleats, des",
        "top": 10710,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#502E84",
    "alpha": 1,
    "cssValue": "rgb(80, 46, 132)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 500,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#B0A89D",
    "alpha": 1,
    "cssValue": "rgb(176, 168, 157)",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "14 REC · 227 YDS · 4 TD",
        "top": 620,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#F6F3EF",
    "alpha": 1,
    "cssValue": "rgb(246, 243, 239)",
    "count": 5,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 60,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#000000",
    "alpha": 0.25098039215686274,
    "cssValue": "oklab(0 0 0 / 0.25)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 936,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#F6F4EE",
    "alpha": 0.34901960784313724,
    "cssValue": "rgba(246, 243, 239, 0.35)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 10679,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#F6EDE8",
    "alpha": 0.2196078431372549,
    "cssValue": "oklab(0.953536 0.00177947 0.013031 / 0.22)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "An Assemble ProjectPrivacyTerms© 2026 Justin JeffersonSite by LayerTwo",
        "top": 18762,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 936,
        "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: Sections are highly expansive, often filling the entire viewport height. Horizontal padding is generous, allowing large typography to breathe.
- Corner style: Cards and images feature slightly rounded corners, softening the otherwise sharp typographic edges.
- Radius: Buttons are fully pill-shaped (high border-radius). Image cards have smaller, distinct border radii.
- Borders: Borders are minimal, mostly used as subtle separators or for outline buttons. A textured background pattern provides visual structure instead of solid borders.
- Buttons: Buttons are heavily pill-shaped. Primary buttons use a solid, high-contrast fill (yellow), while secondary actions use outlines or solid white fills.
- Content width: Content often spans the full width of the screen, especially large typography and horizontal scrolling sections.
- Density: The design feels spacious and open, prioritizing large imagery and typography over dense information packing.
- Evidence: Observed in the large headers (font-1), pill-shaped 'ON-FIELD' button (color-11), and full-viewport image sections.

## Sections

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

1. **Hero — Portrait hero with pull-quote panel** (Home)
   A large centered portrait flanked by small captioned cards sets identity at once, and the dark quote panel below adds a personal voice.
   Capture: 1440×2000px; page bounds 0–2000px of 7804px; source section ID: `96df2e8d-da56-45d1-9cc9-4ebb2d9242c5`; image: https://media.designdetails.io/library/8fec7a8e94a784e0a3c565cbefb2a8bedbc4cbdf0e2d462ec4863be4f9cf44e0/96df2e8d-da56-45d1-9cc9-4ebb2d9242c5.webp
   SECTION.md v3.2: `96df2e8d-da56-45d1-9cc9-4ebb2d9242c5` (deterministic evidence; editorial review pending)
2. **Testimonials — Stacked photo cards over quote** (Home)
   Photo cards layered over the faded quote add motion and depth, so each image appears as a distinct moment in the athlete's story.
   Capture: 1440×2000px; page bounds 2000–4000px of 7804px; source section ID: `f3f0ad1a-bb79-43a3-9685-b4ebde001deb`; image: https://media.designdetails.io/library/e50d9f09d92f44ca193a47e64c9a3dd05ed391e3db53350561cf2672c4482802/f3f0ad1a-bb79-43a3-9685-b4ebde001deb.webp
   SECTION.md v3.2: `f3f0ad1a-bb79-43a3-9685-b4ebde001deb` (deterministic evidence; editorial review pending)
3. **Gallery — Partnership showcase and foundation photo strip** (Home)
   Oversized outlined type behind a gold product shot makes the partnership memorable, while the photo strip beneath shows community work with brief captions and buttons.
   Capture: 1440×2000px; page bounds 4000–6000px of 7804px; source section ID: `8c521231-5c70-443a-851c-db33cd36d6d2`; image: https://media.designdetails.io/library/dcc8da411ca8037d5bf68900d687aa26516c0eb3035912df8f47d892680c4527/8c521231-5c70-443a-851c-db33cd36d6d2.webp
   SECTION.md v3.2: `8c521231-5c70-443a-851c-db33cd36d6d2` (deterministic evidence; editorial review pending)
4. **Gallery — Scattered polaroid photo row** (Home)
   Tilted, bordered photos in varied settings under a bold heading give a casual scrapbook feel that shows both field and fashion sides.
   Capture: 1440×904px; page bounds 6000–6904px of 7804px; source section ID: `8e485f19-43b5-4777-9d03-3bf94196818b`; image: https://media.designdetails.io/library/d68e613a132fb1dca7b29c8a9c86bcfb94987d9f781fbdac0954ebc26b2a349b/8e485f19-43b5-4777-9d03-3bf94196818b.webp
   SECTION.md v3.2: `8e485f19-43b5-4777-9d03-3bf94196818b` (deterministic evidence; editorial review pending)
5. **Footer — Menu panel with brand logos strip** (Home)
   A compact dark nav panel lists every section and socials, while the gold button and logo strip close the page with a clear next step.
   Capture: 1440×900px; page bounds 6904–7804px of 7804px; source section ID: `ba933359-15ce-4231-b9ad-d0c95fe0fb84`; image: https://media.designdetails.io/library/b7f49ed675a3348f01251cb81f4c9c51ad651f24ca223d0a965de20ce762594d/ba933359-15ce-4231-b9ad-d0c95fe0fb84.webp
   SECTION.md v3.2: `ba933359-15ce-4231-b9ad-d0c95fe0fb84` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/baf795bfdaacbb3ec773b4f691eadb0e71e048e4c2fd1d80aef1bcc202a53abd/desktop_full-91b53269-2026-11-08T07-50-57-978Z.webp
- Mobile screenshot: https://media.designdetails.io/library/ed38f4a0bb8a7be707eedc33df6680e4e7cf3d35a668a887d231a3c6347f162e/mobile_full-91b53269-2026-11-08T07-51-40-580Z.webp
- Open Graph image: https://media.designdetails.io/library/03835b7e11cbddd1e025ab95894d120f01de93e439f507682e55d908194142d6/og_image-91b53269-2026-11-08T07-51-08-752Z.webp
- Full-page video: https://media.designdetails.io/library/57aea9d56fc710abbcd2b93c4ec56c277d35c92b55475e85bebae42e7c2556e9/motion-1794124709884.mp4
- Video poster: https://media.designdetails.io/library/5d81e2de7d2d0cc3977870417ef6096d04a076143871dc06844a6d40ef64c1e6/motion-poster-1794124709884.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
- Primary Button
- Outline Button
- Carousel
- Testimonial Card
- Gallery
- Footer
- Pull Quote Section
- Interactive 3D Object

## Quality rubric

Overall: 60.13/100 (Good)
Evidence coverage: 80%
Judge tier: Good
Verdict: This is a well-crafted, high-production athlete portfolio that leans hard into oversized typographic staging, team-coded color, and a layered motion sequence (diagonal wipe, horizontal carousel, cursor-driven 3D shoe, dot-matrix text dissolve) to create an editorial, brutalist-adjacent experience. Execution within its chosen idiom is confident—type hierarchy is legible and consistent, the purple/off-white/yellow palette is restrained and purposeful, and content (stats, partner logos, foundation imagery) is folded into the same visual system rather than appended. Where it falls short of a higher tier is structural novelty: the section inventory, pacing, and interaction patterns closely track a well-worn 'big athlete brand site' template, the pull-quote sections repeat the same formula twice, and the motion claims rely on video narration rather than verifiable CSS/JS timing evidence. The result is a polished, good-tier execution of a familiar genre rather than a landmark or deeply original system.

- Typography (15%): 66 — A deliberate three-tier type system is evident: a massive display face (433px/313px, -13px to -9px tracking, uppercase) for section titles, a condensed mono face for stat labels, and a plain body sans for paragraphs. The scale is aggressive and consistent, and the stylized oversized numerals (font-12, 129.6px) are used as graphic motifs rather than plain text, which shows some typographic intent. However, the system leans almost entirely on one trick—blowing up a single display face—repeated across many sections (Partnerships, Signature Moments, quote blocks, 'Records were made'), with limited variation in weight, italic, or compositional pairing beyond size and tracking.
- Color (10%): 68 — The palette is tight and purposeful: a near-black purple canvas (#171220), a warm off-white surface (#F4EFE6), a Vikings-coded purple accent (#9E6DE9/#502E84), and a yellow CTA accent (#EEAC1A) that doubles as a team-color nod. Contrast between light and dark sections is used structurally (diagonal wipe) rather than decoratively, and the yellow is reserved almost exclusively for primary actions, which shows restraint.
- Layout (20%): 64 — The page uses a long-scroll editorial structure with full-bleed hero, alternating light/dark full-viewport sections, a horizontal-scroll card carousel, an asymmetric photo collage, and a side-panel nav overlay. Sectioning is clear and spacing is generous, giving the large type room to breathe. This is a competent, well-paced magazine-style structure, but the overall pattern (hero → quote → horizontal carousel → quote → partnerships → gallery → footer) is a fairly conventional template for high-budget athlete/brand sites rather than a structurally novel composition.
- Motion (20%): Inconclusive — Gemini's narration describes several distinct motion moments—a diagonal light-to-dark scroll wipe, a horizontal carousel, an interactive cursor-driven 3D shoe rotation, and a dot-matrix/halftone text reveal on the pull quotes—which together suggest a reasonably varied motion vocabulary. However, this is video-derived observation, not CSS/JS evidence, so timing, easing, frame consistency, and whether effects are purely scroll-triggered versus genuinely interactive cannot be verified from the supplied facts.
- Originality (25%): 48 — The site assembles recognizable high-budget sports-portfolio conventions—oversized condensed display type, full-bleed hero portrait with sunglasses reflection, horizontal moment carousels, pull-quote interludes, interactive product 3D viewer, and a brand-logo footer strip—executed well but without a structurally distinct idea that couldn't be substituted for another athlete's site with a palette swap. The dot-matrix text dissolve and diagonal wipe are nice touches but are now common motifs in this genre rather than a singular, hard-to-copy device.
- Content (10%): 66 — Photography, stats, quotes, and partnership logos are woven into the typographic system rather than bolted on—stat lines use the mono face consistently, the rookie card and signature are integrated as design objects in the hero, and partnership/foundation copy sits inside the same grid rhythm as the rest of the page. The content supports the athletic/brand narrative coherently across sections.

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

## Curator notes

Curator review pending.

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