# Vision statement with founder portrait

Schema: Design Details SECTION.md v3.2
Website: Legora
Source: https://legora.com/
Source section IDs: 2e0cb355-4dae-4c4b-81a5-83a95ba5fed0
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The staggered layout, with a small portrait and a much larger interior photo at different heights, gives the page an editorial rhythm and lets the empty space do real work.
- The headline is about 41px with tight leading and slightly negative tracking, set against short 15px body text. This contrast keeps the read calm and lets the copy carry the section.
- The restrained palette of near-black text, warm muted gray and pale gray surfaces keeps attention on the photography. The portrait, vision copy and office photo together make a credible brand story.

What a screenshot can't show:
- The recording showed no motion, so the section appears static.
- Measured type: the headline is 41.2px with 41.2px line height and -0.4px letter spacing. The 19.5px label has 25.3px line height, and the gap between elements is about 15px. Text blocks run roughly 324 to 680px wide.

Borrow: Offset a small human portrait against one large environmental photo, and let uneven column widths and open space create hierarchy instead of boxes or decoration.
Leave alone: Don't copy the proprietary Legora Sans typeface, the dark green action color or the specific office and portrait photography; use a clean neutral grotesque and your own imagery.

## Classification

- Type: founder
- Layout: Asymmetric masonry-style layout with scattered text and image blocks.
- Styles: editorial, minimal, photographic
- Confidence: 95%

## Purpose and structure

An editorial section outlining the company vision, featuring a founder portrait, text blocks, and a large office interior photo.

Visual signature: Asymmetric placement of a small portrait and a large interior photo across a light gray background.

## Components

- heading
- text-block
- portrait
- image

## Typography

- Display: Legora Sans Regular — 56.2px 400
- Heading: Legora Sans Regular — 41.2px 400
- Body: Legora Sans Regular — 15px 400

## Functional palette

- Text: text #0D1016
- Primary-Action: primary action #005032
- Canvas: canvas #FFFFFF
- Muted-Text: muted text #68655E
- Surface: surface #FAFAF9
- Surface: surface #E6E6E6

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 62.71/100 (Good)
Scored coverage: 85%

- Typography: 62 — Clean single-family hierarchy (heading at ~41px scale, body at 15px) with generous line-height and restrained color use creates a calm editorial read, but the type treatment itself is fairly standard corporate-site styling without distinctive scale contrast or expressive detail. Next tier: Needs a more deliberate typographic hierarchy move (scale jump, mixed weights, or a distinctive display treatment) beyond default heading/body pairing to earn a strong score.
- Composition: 68 — Asymmetric three-column arrangement with staggered portrait and large interior photo creates genuine visual rhythm and negative space handling; the offset grid (text blocks top, images bottom, uneven column widths) is a deliberate editorial choice rather than a stock three-column layout. Next tier: Would need a more unexpected or tension-driven arrangement (overlap, scale contrast, or asymmetric cropping) to move past 'good' into 'strong/memorable' territory; current layout is handsome but close to a familiar masonry template.
- Motion: not_assessed — No motion evidence supplied in the deterministic data or Gemini observations; motion_moments is empty. Next tier: Timestamped visible motion changes are required before this axis can be scored.
- Content: 60 — Text and imagery are integrated coherently — founder portrait, vision copy, and office photo together build a credible brand narrative, and copy length is appropriately editorial rather than filler. Next tier: Imagery (office interior, portrait) reads as generic stock-adjacent corporate photography rather than content purpose-built to the vision message, capping integration quality.
- Originality: 58 — The scattered/offset masonry layout for a founder+vision section is a recognizable editorial trope seen across many SaaS marketing sites; execution is tasteful but not distinctive. Next tier: Would need an idiosyncratic structural or interaction idea unique to this brand's vision statement, not just asymmetric placement of stock editorial blocks.
- Adaptability: 64 — Clear separable structure: heading, two text columns, portrait card, and large image card are modular components with explicit coordinates/sizes, making it straightforward to swap content while preserving layout. Next tier: Lack of documented spacing tokens/gap rhythm and only two image aspect ratios limits confidence in full systemization across breakpoints.

Strengths:
- Confident use of whitespace and asymmetric column widths to create editorial pacing
- Clear three-part narrative (statement, founder, environment) without clutter
- Restrained single typeface and muted palette keep focus on content

Weaknesses:
- Imagery (portrait, office) feels like generic corporate stock rather than bespoke art direction
- No motion evidence to assess dynamic behavior
- Layout pattern (offset masonry vision block) is a common SaaS editorial template
- Typography lacks a distinctive scale or weight contrast to elevate hierarchy

Why it does not reach the next tier: The section is well-composed and quietly professional but relies on a familiar asymmetric editorial template and stock-feeling photography rather than an original structural idea or distinctive typographic voice, keeping it in the competent-to-good range rather than strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the offset grid and card separation for any editorial vision/founder section; replace photography with brand-appropriate imagery and verify column proportions rescale sensibly at narrower breakpoints since no responsive data was captured.

What transfers:
- Asymmetric three-column grid with staggered image/text blocks
- Modular card structure for portrait and large image separate from copy blocks
- Low-density spacing rhythm separating heading from body copy

Dependencies:
- Specific portrait and office photography assets
- Exact column width ratios (860/689/440/333/255px) captured at 1440 viewport

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No motion data available, so dynamic behavior is unscored
- Only desktop 1440px viewport evidence provided, responsive behavior unknown
- Color and exact font-family claims limited to computed samples already provided, not independently verified beyond document

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: founder
- Source type: founder
- Structure: Asymmetric masonry-style layout with scattered text and image blocks.
- Layout: Asymmetric masonry-style layout with scattered text and image blocks.
- Styles: editorial, minimal, photographic
- Components: heading, text-block, portrait, image
- Purpose: An editorial section outlining the company vision, featuring a founder portrait, text blocks, and a large office interior photo.
- Visual signature: Asymmetric placement of a small portrait and a large interior photo across a light gray background.
- Place on the page: 6 of 9, after Stats (`legora-com:C05`), before Feature collection (`legora-com:C07`)

### Crop and composition

- Crop: 1440×1296px; aspect ratio 1.111:1
- Page bounds: 7608–8904px of 11041px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "card/subheading",
      "family": "Legora Sans Medium",
      "stack": "\"Legora Sans Medium\", \"Legora Sans Medium Placeholder\", sans-serif",
      "size": "19.5px",
      "weight": "500",
      "lineHeight": "25.3px",
      "letterSpacing": "normal",
      "sample": "Legora aOS™",
      "element": "h6",
      "occurrences": 4,
      "sourceId": "font-2"
    },
    {
      "role": "section heading",
      "family": "Legora Sans Regular",
      "stack": "\"Legora Sans Regular\", \"Legora Sans Regular Placeholder\", sans-serif",
      "size": "41.2px",
      "weight": "400",
      "lineHeight": "41.2px",
      "letterSpacing": "-0.4px",
      "sample": "Introducing the Legora aOS™",
      "element": "h2",
      "occurrences": 3,
      "sourceId": "font-3"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "56.2px",
      "family": "Legora Sans Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: Large 56.2px text used for the main hero headline 'Legal work, without limits.'",
      "sampleId": "font-12",
      "confidence": 0.9,
      "lineHeight": "56.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "41.2px",
      "family": "Legora Sans Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 41.2px text used for major section headings like 'Introducing the Legora aOS™' and 'Our latest innovations'.",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "41.2px",
      "letterSpacing": "-0.4px"
    },
    {
      "role": "body",
      "size": "15px",
      "family": "Legora Sans Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 15px Regular text used extensively for body copy and navigational elements.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "19.5px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#E6E6E6",
      "cssValue": "rgb(230, 230, 230)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 12,
      "sourceId": "color-2"
    },
    {
      "value": "#6B6B6B",
      "cssValue": "rgb(107, 107, 107)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 5,
      "sourceId": "color-8"
    },
    {
      "value": "#0C1018",
      "cssValue": "rgba(13, 16, 22, 0.25)",
      "alpha": 0.25098039215686274,
      "appliedAs": [
        "background"
      ],
      "occurrences": 7,
      "sourceId": "color-18"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#0D1016",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(13, 16, 22); AI role: Dark color (#0D1016) used for primary text headings and body copy on light backgrounds.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#005032",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-7: computed rgb(0, 80, 50); AI role: Forest green used for the announcement bar, primary CTA buttons ('Book a demo'), and links.",
      "sampleId": "color-7",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-4: computed rgb(255, 255, 255); AI role: White background used extensively across major sections of the page.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#68655E",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-10: computed rgb(104, 101, 94); AI role: Lighter gray text used for elements like 'Trusted by' and secondary information.",
      "sampleId": "color-10",
      "confidence": 0.85
    },
    {
      "hex": "#FAFAF9",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-1: computed rgb(250, 250, 249); AI role: Off-white background used for sections like the footer and specific content blocks.",
      "sampleId": "color-1",
      "confidence": 0.8
    },
    {
      "hex": "#E6E6E6",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(230, 230, 230); AI role: Light gray background used for elements like the 'Explore the Legora aOS' button background.",
      "sampleId": "color-2",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and the labels next to the 3D cube appear to use a pill-shape radius.",
  "density": "Low density. The layout relies on significant whitespace to separate concepts and features.",
  "evidence": "Visual inspection of the screenshots shows distinct spacing blocks between headings and content, pill-shaped buttons for CTAs, and a clean, borderless aesthetic for most structural elements.",
  "borderStyle": "Minimal use of borders; structure is largely defined by spacing, background color changes, and typography.",
  "buttonStyle": "Pill-shaped, solid fill for primary actions (green), often including a small arrow icon.",
  "cornerStyle": "Combination of sharp corners on large background sections and rounded corners on smaller interactive elements like buttons and UI pills.",
  "contentWidth": "Content is generally centered and constrained within a readable max-width, though some sections (like the hero and footer) span full width.",
  "spacingRhythm": "Generous spacing between major sections, creating a calm, structured reading rhythm. Internal component padding is moderate."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Observed gaps: 15px.
- Representative content widths: 680, 484, 324px.
- Layout containers: 4; cards/surfaces: 0; media elements: 10; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 7608,
      "bottom": 8904,
      "pageHeight": 11041
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [
      15
    ],
    "representativeContentWidthsPx": [
      680,
      484,
      324
    ]
  },
  "columns": [
    {
      "element": "a · Legora aOS™The Legora aOS facilitates the flow of information, communication, and execution of legal",
      "size": "324×567px",
      "position": "x 24px, y 7556px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "15px"
    },
    {
      "element": "a · AgentEnd-to-end execution of complex legal work. The Agent plans, executes, reviews and delivers, so",
      "size": "324×567px",
      "position": "x 380px, y 7556px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "15px"
    },
    {
      "element": "a · MonitorsStay ahead of regulatory change. Monitors cuts through the noise by continuously scanning gl",
      "size": "324×567px",
      "position": "x 736px, y 7556px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "15px"
    },
    {
      "element": "a · ListsKeep legal work organised, owned, and connected. Lists can be generated by the Agent directly f",
      "size": "324×567px",
      "position": "x 1092px, y 7556px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "15px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "324×405px",
    "position": "x 24px, y 7556px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/u0TbtPK6VVy3lAtG2Ge3KqDI.webp?scale-down-to=1024&width=1170&height=1395"
  },
  {
    "element": "img · img",
    "size": "324×405px",
    "position": "x 380px, y 7556px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/BGgtXSuezGkXRg4zYlZNzJAXEE.webp?scale-down-to=1024&width=1170&height=1395"
  },
  {
    "element": "img · img",
    "size": "324×405px",
    "position": "x 736px, y 7556px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/E7BgozJAm5PBqfplk2ynWhC1qU.webp?scale-down-to=1024&width=1170&height=1395"
  },
  {
    "element": "img · img",
    "size": "324×405px",
    "position": "x 1092px, y 7556px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/b3NuDT30Lg2DQN299fV6Ziv3z0.webp?scale-down-to=1024&width=1170&height=1395"
  },
  {
    "element": "img · img",
    "size": "209×261px",
    "position": "x -12px, y 8686px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/5bAO1PDz8U8pYbzvosP2jYIdnGg.webp?scale-down-to=1024&width=1000&height=1250"
  },
  {
    "element": "img · img",
    "size": "209×261px",
    "position": "x 256px, y 8686px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/mrEHEr4OHAYryQnVQqy2VoGAQw.webp?scale-down-to=1024&width=1000&height=1250"
  },
  {
    "element": "img · img",
    "size": "209×261px",
    "position": "x 975px, y 8686px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/jTtsVVBhSR0HphLKfSJpeVnmPos.webp?scale-down-to=1024&width=1000&height=1250"
  },
  {
    "element": "img · img",
    "size": "209×261px",
    "position": "x 1244px, y 8686px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://framerusercontent.com/images/jPFd2uhwZ8bjPJtdyRcLjZ6NVU.webp?scale-down-to=1024&width=1000&height=1250"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 29px, y 8608px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 1397px, y 8608px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": null,
  "cards": [],
  "media": [
    {
      "id": "ld-332",
      "tag": "img",
      "rect": {
        "x": 24,
        "y": 7556,
        "width": 324,
        "height": 405
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/u0TbtPK6VVy3lAtG2Ge3KqDI.webp?scale-down-to=1024&width=1170&height=1395",
        "naturalWidth": 324,
        "naturalHeight": 386
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-351",
      "tag": "img",
      "rect": {
        "x": 380,
        "y": 7556,
        "width": 324,
        "height": 405
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/BGgtXSuezGkXRg4zYlZNzJAXEE.webp?scale-down-to=1024&width=1170&height=1395",
        "naturalWidth": 324,
        "naturalHeight": 386
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-370",
      "tag": "img",
      "rect": {
        "x": 736,
        "y": 7556,
        "width": 324,
        "height": 405
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/E7BgozJAm5PBqfplk2ynWhC1qU.webp?scale-down-to=1024&width=1170&height=1395",
        "naturalWidth": 324,
        "naturalHeight": 386
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-389",
      "tag": "img",
      "rect": {
        "x": 1092,
        "y": 7556,
        "width": 324,
        "height": 405
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/b3NuDT30Lg2DQN299fV6Ziv3z0.webp?scale-down-to=1024&width=1170&height=1395",
        "naturalWidth": 324,
        "naturalHeight": 386
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-466",
      "tag": "img",
      "rect": {
        "x": -12,
        "y": 8686,
        "width": 209,
        "height": 261
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/5bAO1PDz8U8pYbzvosP2jYIdnGg.webp?scale-down-to=1024&width=1000&height=1250",
        "naturalWidth": 319,
        "naturalHeight": 398
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-476",
      "tag": "img",
      "rect": {
        "x": 256,
        "y": 8686,
        "width": 209,
        "height": 261
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/mrEHEr4OHAYryQnVQqy2VoGAQw.webp?scale-down-to=1024&width=1000&height=1250",
        "naturalWidth": 389,
        "naturalHeight": 486
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-509",
      "tag": "img",
      "rect": {
        "x": 975,
        "y": 8686,
        "width": 209,
        "height": 261
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/jTtsVVBhSR0HphLKfSJpeVnmPos.webp?scale-down-to=1024&width=1000&height=1250",
        "naturalWidth": 319,
        "naturalHeight": 398
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-519",
      "tag": "img",
      "rect": {
        "x": 1244,
        "y": 8686,
        "width": 209,
        "height": 261
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "",
        "src": "https://framerusercontent.com/images/jPFd2uhwZ8bjPJtdyRcLjZ6NVU.webp?scale-down-to=1024&width=1000&height=1250",
        "naturalWidth": 319,
        "naturalHeight": 398
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-428",
      "tag": "svg",
      "rect": {
        "x": 29,
        "y": 8608,
        "width": 14,
        "height": 14
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-442",
      "tag": "svg",
      "rect": {
        "x": 1397,
        "y": 8608,
        "width": 14,
        "height": 14
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 7608,
    "bottom": 8904,
    "pageHeight": 11041
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-328",
      "gap": "15px",
      "tag": "a",
      "rect": {
        "x": 24,
        "y": 7556,
        "width": 324,
        "height": 567
      },
      "role": null,
      "label": "Legora aOS™The Legora aOS facilitates the flow of information, communication, and execution of legal",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-347",
      "gap": "15px",
      "tag": "a",
      "rect": {
        "x": 380,
        "y": 7556,
        "width": 324,
        "height": 567
      },
      "role": null,
      "label": "AgentEnd-to-end execution of complex legal work. The Agent plans, executes, reviews and delivers, so",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-366",
      "gap": "15px",
      "tag": "a",
      "rect": {
        "x": 736,
        "y": 7556,
        "width": 324,
        "height": 567
      },
      "role": null,
      "label": "MonitorsStay ahead of regulatory change. Monitors cuts through the noise by continuously scanning gl",
      "columns": null,
      "display": "flex",
      "direction": "column"
    },
    {
      "id": "ld-385",
      "gap": "15px",
      "tag": "a",
      "rect": {
        "x": 1092,
        "y": 7556,
        "width": 324,
        "height": 567
      },
      "role": null,
      "label": "ListsKeep legal work organised, owned, and connected. Lists can be generated by the Agent directly f",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [
      15
    ],
    "representativeContentWidthsPx": [
      680,
      484,
      324
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 10,
    "animations": 0,
    "elementsInSection": 43
  },
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-23T18:19:33.968Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Asymmetric three-column grid with staggered image/text blocks; Modular card structure for portrait and large image separate from copy blocks; Low-density spacing rhythm separating heading from body copy
- Dependencies: Specific portrait and office photography assets; Exact column width ratios (860/689/440/333/255px) captured at 1440 viewport
- Guidance: Reuse the offset grid and card separation for any editorial vision/founder section; replace photography with brand-appropriate imagery and verify column proportions rescale sensibly at narrower breakpoints since no responsive data was captured.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original founder section inspired by the design evidence titled “Vision statement with founder portrait”.

Purpose: An editorial section outlining the company vision, featuring a founder portrait, text blocks, and a large office interior photo.

Structure: Asymmetric masonry-style layout with scattered text and image blocks.. Source layout label: Asymmetric masonry-style layout with scattered text and image blocks.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Asymmetric placement of a small portrait and a large interior photo across a light gray background.

Components: heading, text-block, portrait, image.

Style direction: editorial, minimal, photographic.

Observed crop: 1440×1296px (1.111:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"56.2px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Large 56.2px text used for the main hero headline 'Legal work, without limits.'","sampleId":"font-12","confidence":0.9,"lineHeight":"56.2px","letterSpacing":"normal"} {"role":"heading","size":"41.2px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 41.2px text used for major section headings like 'Introducing the Legora aOS™' and 'Our latest innovations'.","sampleId":"font-3","confidence":0.95,"lineHeight":"41.2px","letterSpacing":"-0.4px"} {"role":"body","size":"15px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 15px Regular text used extensively for body copy and navigational elements.","sampleId":"font-5","confidence":0.95,"lineHeight":"19.5px","letterSpacing":"normal"}

Color evidence: {"hex":"#0D1016","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(13, 16, 22); AI role: Dark color (#0D1016) used for primary text headings and body copy on light backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#005032","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(0, 80, 50); AI role: Forest green used for the announcement bar, primary CTA buttons ('Book a demo'), and links.","sampleId":"color-7","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White background used extensively across major sections of the page.","sampleId":"color-4","confidence":0.9} {"hex":"#68655E","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(104, 101, 94); AI role: Lighter gray text used for elements like 'Trusted by' and secondary information.","sampleId":"color-10","confidence":0.85} {"hex":"#FAFAF9","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(250, 250, 249); AI role: Off-white background used for sections like the footer and specific content blocks.","sampleId":"color-1","confidence":0.8} {"hex":"#E6E6E6","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(230, 230, 230); AI role: Light gray background used for elements like the 'Explore the Legora aOS' button background.","sampleId":"color-2","confidence":0.8}

Typography measured inside this section: {"id":"font-2","size":"19.5px","count":4,"family":"Legora Sans Medium","traits":"Regular","weight":"500","contexts":[{"tag":"h6","top":7976,"text":"Legora aOS™","property":"font"},{"tag":"h6","top":7976,"text":"Agent","property":"font"},{"tag":"h6","top":7976,"text":"Monitors","property":"font"}],"fontStack":"\"Legora Sans Medium\", \"Legora Sans Medium Placeholder\", sans-serif","lineHeight":"25.3px","letterSpacing":"normal"} {"id":"font-3","size":"41.2px","count":3,"family":"Legora Sans Regular","traits":"Regular","weight":"400","contexts":[{"tag":"h2","top":1320,"text":"Introducing the Legora aOS™","property":"font"},{"tag":"h2","top":7301,"text":"Our latest innovations","property":"font"},{"tag":"h2","top":8383,"text":"Every team.Every practice.","property":"font"}],"fontStack":"\"Legora Sans Regular\", \"Legora Sans Regular Placeholder\", sans-serif","lineHeight":"41.2px","letterSpacing":"-0.4px"}

Colors measured inside this section: {"id":"color-2","hex":"#E6E6E6","alpha":1,"count":12,"contexts":[{"tag":"div","top":1475,"text":"","property":"background"},{"tag":"a","top":7025,"text":"Explore the Legora aOS™","property":"control-background"},{"tag":"div","top":8603,"text":"","property":"control-background"}],"cssValue":"rgb(230, 230, 230)"} {"id":"color-8","hex":"#6B6B6B","alpha":1,"count":5,"contexts":[{"tag":"p","top":8014,"text":"The Legora aOS facilitates the flow of information, communication, and execution of legal work, help","property":"text"}],"cssValue":"rgb(107, 107, 107)"} {"id":"color-18","hex":"#0C1018","alpha":0.25098039215686274,"count":7,"contexts":[{"tag":"div","top":8612,"text":"","property":"background"}],"cssValue":"rgba(13, 16, 22, 0.25)"}

Exact section measurements from the saved element map: spacing {"gapsPx":[15],"representativeContentWidthsPx":[680,484,324]}; surfaces {"radii":["999px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":24,"y":7556,"width":324,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":380,"y":7556,"width":324,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":736,"y":7556,"width":324,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1092,"y":7556,"width":324,"height":405},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Asymmetric three-column grid with staggered image/text blocks; Modular card structure for portrait and large image separate from copy blocks; Low-density spacing rhythm separating heading from body copy.

Dependencies: Specific portrait and office photography assets; Exact column width ratios (860/689/440/333/255px) captured at 1440 viewport.

Adaptation guidance: Reuse the offset grid and card separation for any editorial vision/founder section; replace photography with brand-appropriate imagery and verify column proportions rescale sensibly at narrower breakpoints since no responsive data was captured.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.