# LORD — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.callmelord.com/
Captured: 2026-10-31
CSS measured: 2026-10-31T06:22:21.987Z at 1440×1000 — https://www.callmelord.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

A bold, highly typographic portfolio site that utilizes massive display fonts and high-contrast color themes (white, black, and bright orange). The layout relies heavily on scale and scroll-driven reveals rather than traditional UI components, creating a cinematic and immersive experience.

## Classification

- Industry: creative
- Site type: Portfolio, Landing
- Business model: Agency
- Styles: typographic, bold, minimal, editorial-brutalism
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: PP Neue Corp — weight 800; size 167px; line-height 133.6px; tracking -1.7px; Regular (100% role confidence, computed values)
- Heading: FK Roman Standard — weight 400; size 48px; line-height 52.8px; tracking -1.4px; Regular (90% role confidence, computed values)
- Body: Helvetica Now Text — weight 500; size 16px; line-height 24px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: #FFFFFF, used as the background color for the hero and text sections. (100% role confidence, computed values)
- Text — text #000000: color-4: computed rgb(0, 0, 0); AI role: #000000, used for the primary text on the white canvas. (100% role confidence, computed values)
- Accent — accent #FE4411: color-3: computed rgb(254, 68, 17); AI role: #FE4411 (bright orange), used as the high-impact background for the footer. (95% role confidence, computed values)

## Exact computed CSS inventory

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

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Helvetica Now Text",
    "fontStack": "\"Helvetica Now Text\", Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Shotgun",
        "top": 3412,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Wecasa",
        "top": 4117,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Swile",
        "top": 4822,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Neue Corp",
    "fontStack": "\"PP Neue Corp\", Arial, sans-serif",
    "weight": "800",
    "size": "80px",
    "lineHeight": "64px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Footer",
        "top": 5728,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Let substance surface",
        "top": 5840,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "FK Roman Standard",
    "fontStack": "\"FK Roman Standard\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Live by the Day & Night Rhythm",
        "top": 3413,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "You do the living. We do the cleaning.",
        "top": 4118,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Smile at work",
        "top": 4823,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Neue Corp",
    "fontStack": "\"PP Neue Corp\", Arial, sans-serif",
    "weight": "400",
    "size": "139.7px",
    "lineHeight": "104.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "GO deep or go home",
        "top": 5870,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Helvetica Now Text",
    "fontStack": "\"Helvetica Now Text\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "What we do",
        "top": 1224,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "FK Roman Standard",
    "fontStack": "\"FK Roman Standard\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 32,
    "contexts": [
      {
        "tag": "span",
        "text": "B",
        "top": 484,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 484,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "y",
        "top": 484,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "PP Neue Corp",
    "fontStack": "\"PP Neue Corp\", Arial, sans-serif",
    "weight": "800",
    "size": "167px",
    "lineHeight": "133.6px",
    "letterSpacing": "-1.7px",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "D",
        "top": 268,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "I",
        "top": 268,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "S",
        "top": 268,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "FK Roman Standard",
    "fontStack": "\"FK Roman Standard\", \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "W",
        "top": 1258,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 1258,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "a",
        "top": 1258,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Helvetica Now Text",
    "fontStack": "\"Helvetica Now Text\", Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Work",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Approach",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About",
        "top": 18,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Neue Corp",
    "fontStack": "\"PP Neue Corp\", Arial, sans-serif",
    "weight": "700",
    "size": "112px",
    "lineHeight": "89.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "We reach for your core",
        "top": 2045,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Helvetica Now Text",
    "fontStack": "\"Helvetica Now Text\", Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to main content",
        "top": 16,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 6,
    "contexts": [
      {
        "tag": "body",
        "text": "::before, ::after { box-sizing: border-box; } .w-embed:before, .w-embed:after, .w-richtext:before, .",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "DISTINCTBeyond the surfaceIn-depth brandingSTARTS DEEP",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "We reach for your core",
        "top": 1824,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "color(srgb 0 0 0 / 0.1)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "WorkApproachAboutContact",
        "top": 8,
        "property": "background"
      },
      {
        "tag": "video",
        "text": "",
        "top": 2796,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FE4411",
    "alpha": 1,
    "cssValue": "rgb(254, 68, 17)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "GO deep or go home (() => { const wrap = document.querySelector('.post_footer_wrap'); const footer =",
        "top": 5726,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 82,
    "contexts": [
      {
        "tag": "span",
        "text": "D",
        "top": 268,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "What we do",
        "top": 1224,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "We reach for your core",
        "top": 2045,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#0A0A0A",
    "alpha": 1,
    "cssValue": "rgb(10, 10, 10)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to main content",
        "top": 16,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "07 : 22",
        "top": 18,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 8,
        "property": "control-background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Very loose vertical spacing between sections, contrasting with tight letter-spacing on display fonts (-1.7px).
- Corner style: Sharp, rectilinear corners on all media blocks and layout divisions.
- Radius: 0px or none visibly applied to major structural elements.
- Borders: Borderless design; separation is achieved through stark color contrast and full-bleed imagery.
- Buttons: Understated text links primarily, lacking traditional button bounding boxes.
- Content width: Mixed: display typography scales to fill or exceed viewport width, while media blocks are full-bleed edge-to-edge.
- Density: Very low density. The layout relies on extreme negative space and massive text to control pacing.
- Evidence: Visual inspection of the screenshots combined with exact DOM CSS sizes and color values.

## Sections

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

1. **Navbar — LORD Navbar** (Home)
   A small grey pill of four links sits beside a wordmark and a Paris clock, keeping navigation light and the page open.
   Capture: 1440×56px; page bounds 0–56px of 7126px; source section ID: `1b6155ff-ebc0-42d3-bd5d-c6d6bfdaae8c`; image: https://media.designdetails.io/library/3fca3fb071fafd4f8b811631c8ae2e8b896838b4b8e408bd646852af63583d89/1b6155ff-ebc0-42d3-bd5d-c6d6bfdaae8c.webp
   SECTION.md v3.2: `1b6155ff-ebc0-42d3-bd5d-c6d6bfdaae8c` (deterministic evidence; editorial review pending)
2. **Hero — Oversized headline over central emblem** (Home)
   Huge black heavy type overlaps a vivid purple emblem, so the bold statement and the colour hit first and set the agency's tone.
   Capture: 1440×944px; page bounds 56–1000px of 7126px; source section ID: `1258d08e-c08f-40c0-a600-8c76b378927b`; image: https://media.designdetails.io/library/26f3a0833223c4454beeb3dadb0cddcdbd3839bf98cbd882d7262e6353e8bd61/1258d08e-c08f-40c0-a600-8c76b378927b.webp
   SECTION.md v3.2: `1258d08e-c08f-40c0-a600-8c76b378927b` (deterministic evidence; editorial review pending)
3. **Other — Centered agency statement on black** (Home)
   A serif paragraph on a black field with a tiny label states what the agency does, and the contrast keeps it readable and calm.
   Capture: 1440×684px; page bounds 1000–1684px of 7126px; source section ID: `0550981b-81fc-464f-bc10-07645933ff31`; image: https://media.designdetails.io/library/95c7c93fbeffba356a5c11288eb27922cac7b54247f98931cff98144049508d9/0550981b-81fc-464f-bc10-07645933ff31.webp
   SECTION.md v3.2: `0550981b-81fc-464f-bc10-07645933ff31` (deterministic evidence; editorial review pending)
4. **Gallery — Sliced video strips of colourful work** (Home)
   Horizontal bands of saturated footage break one image into stripes, hinting at depth and giving a playful teaser of the work.
   Capture: 1440×1000px; page bounds 1684–2684px of 7126px; source section ID: `4e2c049a-51cd-40d2-b13a-cf1de219c821`; image: https://media.designdetails.io/library/7817295dd63c3c9090b666ddda02aea96b0a755796da164ed4a9a54ecfaf2b64/4e2c049a-51cd-40d2-b13a-cf1de219c821.webp
   SECTION.md v3.2: `4e2c049a-51cd-40d2-b13a-cf1de219c821` (deterministic evidence; editorial review pending)
5. **Gallery — Project rows with three-image triptychs** (Home)
   Each project shows three cropped images in a row with a one-line caption, so visitors scan varied brand work quickly.
   Capture: 960×600px; page bounds 2684–5728px of 7126px; source section ID: `80dadb65-9ff6-41cd-b5ed-1ee1d6fa921c`; image: https://media.designdetails.io/library/90da1d2bb236549f2094bef2a700f0e044e4fd5b2d73aca5164ae29110ce6df9/80dadb65-9ff6-41cd-b5ed-1ee1d6fa921c.webp
   SECTION.md v3.2: `80dadb65-9ff6-41cd-b5ed-1ee1d6fa921c` (deterministic evidence; editorial review pending)
6. **Footer — Contact details with bold sign-off** (Home)
   Small contact text and social links sit on the left against a large stacked slogan, giving clear info and a strong last impression.
   Capture: 1440×498px; page bounds 5728–6226px of 7126px; source section ID: `973c9346-f31c-47af-a39b-47ae3c54a0f2`; image: https://media.designdetails.io/library/7b93f585204774de8f357711a1bec51cecbbf455a991d425638db0300424af17/973c9346-f31c-47af-a39b-47ae3c54a0f2.webp
   SECTION.md v3.2: `973c9346-f31c-47af-a39b-47ae3c54a0f2` (deterministic evidence; editorial review pending)
7. **CTA — Warped repeating slogan on orange** (Home)
   Black stretched type repeated on a bright orange field creates a loud, memorable closing message with a distorted rhythm.
   Capture: 1440×900px; page bounds 6226–7126px of 7126px; source section ID: `da2c32b0-9b0a-4cc1-bc58-b757224171b0`; image: https://media.designdetails.io/library/503bb54dc39879dd6a1737bff4159f6a2e5eb8e70c4171b0254055d0bcd3b8d1/da2c32b0-9b0a-4cc1-bc58-b757224171b0.webp
   SECTION.md v3.2: `da2c32b0-9b0a-4cc1-bc58-b757224171b0` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/fc2f98eab9a8c298a9eab8aece35d634b4b5cac56f55548991be0e654e128b16/desktop_full-20e0d86d-2026-10-31T06-22-22-000Z.webp
- Mobile screenshot: https://media.designdetails.io/library/dc591398a6a350ff0eaa77181b723739792ef0b44401c1b337cf0186b6b61d2e/mobile_full-20e0d86d-2026-10-31T06-22-42-985Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/adb744ef42dced108f356d078398e9cc85de7ef1c2a7e09eb485f777d2d3aae8/motion-1793429616045.mp4
- Video poster: https://media.designdetails.io/library/402612820f710b4fc727076e5f8bfe5b898f7b770f5fd45436aef0045a1e8393/motion-poster-1793429616045.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
- Gallery
- Footer
- Full Bleed Typographic Footer
- Staggered Media Bands

## Quality rubric

Overall: 55.1/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: LORD presents a polished, high-contrast branding-agency portfolio built around oversized grotesque typography, a disciplined white/black/orange palette, and scroll-driven reveals across hero, case-study, and footer sections. The typographic scale system and the elastic footer-text settle are genuine strengths, and the page maintains a consistent rhythm from the hero through four case studies to a bold closing statement. However, the overall formula — massive display type, serif/sans editorial pairing, full-bleed three-image case-study bands, and an oversized accent-color footer — is a highly recognizable convention in contemporary agency portfolios, and the case-study layout doesn't vary meaningfully between clients. Content is thin, limited to single-line taglines rather than substantiated case detail. The result is a competently executed, visually confident site that stays within a familiar idiom rather than establishing a distinct point of view strong enough to justify a higher tier.

- Typography (15%): 64 — A clear three-tier type system is used: a grotesque display face (PP Neue Corp) scaling from 80px to 167px for headlines, a serif (FK Roman Standard) for editorial statements and captions, and Helvetica Now for UI labels. The scale range and tight negative tracking on display sizes (-1.7px) create strong hierarchy and a cinematic headline moment. However, the system is essentially a two-contrast pairing (grotesque + serif) repeated at different sizes rather than a more nuanced typographic architecture, and the serif/grotesque editorial pairing is a now-common agency convention.
- Color (10%): 58 — The palette is disciplined — white canvas, black text/sections, and a single saturated orange accent reserved for the high-impact footer. This restraint supports the bold typographic focus and creates a strong closing beat. But the palette is a well-worn agency formula (monochrome + one accent) with little tonal nuance or secondary color relationships beyond the imagery itself, which is not evaluated as a designed system.
- Layout (20%): 62 — The page is structured as a rhythm of full-bleed media triptychs, each followed by a client name/tagline caption, bookended by a scale-driven hero and an oversized footer. This produces a legible, repeatable system across multiple case studies (Shotgun, Wecasa, Swile, The Off). The overlapping hero type with the central graphic is a nice compositional idea, but the case-study grid pattern (three-image rows + caption) stays the same throughout with little structural variation, limiting the layout's range.
- Motion (20%): 59 — Observed moments include the hero text/graphic scaling on scroll, a media block expanding into a black section, columns of imagery moving at different scroll-linked rates, and footer text that appears to stretch/distort before settling into its final orange block (frames show 'GO DEEP OR GO HOME' compressed and warped mid-transition). These are coherent scroll-driven reveals across multiple sections, which is a genuine plus, but the techniques (parallax bands, scale-on-scroll hero, slide-up footer) are common patterns in this site genre, and the short/fast capture limits confidence in finer execution quality such as timing or easing.
- Originality (25%): 40 — The combination of oversized grotesque type, a serif/sans editorial pairing, full-bleed case-study triptychs, and a bright monochrome-plus-accent footer closing statement is a highly recognizable template within contemporary branding-agency portfolio sites. The central graphic badge in the hero and the elastic footer-text settle are small distinctive touches, but nothing here constitutes a structurally novel idea that could not be substituted with a near-identical competitor site using the same formula.
- Content (10%): 55 — Case studies are presented with minimal but clear framing (client name + one-line tagline) consistent with the bold, sparse visual language, and the closing manifesto statements ('We reach for your core', 'Let substance surface') reinforce the brand's 'depth' theme. However, the content depth is thin — single taglines per project with no further substantiation of results or process — so integration is visually consistent but not deeply informative.

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

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

## Verification checklist

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

## Curator notes

Oversized black condensed type pairs with a serif mission statement on black, giving the agency a confident, editorial voice before any client work appears. Project visuals run in tight three-image rows with bold color blocking, letting each brand's packaging and photography stand out while the grid keeps the long scroll 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.