# WHAT WE MEASURE — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://www.layers.bio/
Website: Layers
Section ID: 90f6e6c0-f18c-4f8c-b3ff-4cd3a305cb4e
Status: deterministic evidence captured; editorial AI review pending

## Purpose

This is a features section on the Home page. Use the attached crop and measured browser facts to reconstruct its composition. Do not infer unmeasured source values.

## Layout

1440×3800px root; block

## Visual signature

minimal, bold, typographic, photographic, clinical-premium, sci-fi-modern treatment at 1440×905px. The crop spans 1115–2020px of a 9356px page.

## Components

- Navigation Bar
- Feature Card
- Tag
- Testimonial Card
- Pricing Table
- FAQ Accordion
- Footer
- Scroll Linked Stacking Cards
- Timeline Indicator
- Hero With Background Imagery
- Stat Block
- Primary Button

## Evidence note

The geometry, typography, colors, media, and animation parameters below come from saved HTML/CSS/browser evidence when present. Website-level roles are supplied separately. Editorial section judgment remains pending unless the MCP resolves this source ID to a promoted canonical record.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: features
- Structure: 1440×3800px root; block
- Layout: 1440×3800px root; block
- Styles: minimal, bold, typographic, photographic, clinical-premium, sci-fi-modern
- Components: Navigation Bar, Feature Card, Tag, Testimonial Card, Pricing Table, FAQ Accordion, Footer, Scroll Linked Stacking Cards, Timeline Indicator, Hero With Background Imagery, Stat Block, Primary Button
- Purpose: features section from the Home page of Layers.
- Visual signature: rgb(12, 19, 23) with 1440×3800px root; block. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×905px; aspect ratio 1.591:1
- Page bounds: 1115–2020px of 9356px
- 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": "section heading",
      "family": "sohneMono",
      "stack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
      "size": "40px",
      "weight": "400",
      "lineHeight": "40px",
      "letterSpacing": "4px",
      "sample": "What We Measure",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-2"
    },
    {
      "role": "body/supporting copy",
      "family": "circular",
      "stack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
      "size": "18px",
      "weight": "400",
      "lineHeight": "22px",
      "letterSpacing": "normal",
      "sample": "Clinical imaging, structure, and tone, mapped in detail.",
      "element": "p",
      "occurrences": 7,
      "sourceId": "font-4"
    },
    {
      "role": "card/subheading",
      "family": "circular",
      "stack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
      "size": "20px",
      "weight": "400",
      "lineHeight": "24px",
      "letterSpacing": "normal",
      "sample": "Skin",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-7"
    },
    {
      "role": "body/supporting copy",
      "family": "sohneMono",
      "stack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
      "size": "12px",
      "weight": "400",
      "lineHeight": "16px",
      "letterSpacing": "normal",
      "sample": "01/04",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-9"
    },
    {
      "role": "action label",
      "family": "sohneMono",
      "stack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
      "size": "14px",
      "weight": "400",
      "lineHeight": "18px",
      "letterSpacing": "normal",
      "sample": "Clinical Skin Imaging",
      "element": "button",
      "occurrences": 9,
      "sourceId": "font-14"
    },
    {
      "role": "card/subheading",
      "family": "circular",
      "stack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
      "size": "26px",
      "weight": "400",
      "lineHeight": "26px",
      "letterSpacing": "normal",
      "sample": "Skin",
      "element": "span",
      "occurrences": 4,
      "sourceId": "font-15"
    },
    {
      "role": "UI/supporting text",
      "family": "sohneMono",
      "stack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
      "size": "16px",
      "weight": "400",
      "lineHeight": "16px",
      "letterSpacing": "1.6px",
      "sample": "01",
      "element": "span",
      "occurrences": 4,
      "sourceId": "font-17"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "71.6px",
      "family": "circular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: Large 71.6px 'circular' used for the primary hero headline 'The science of'.",
      "sampleId": "font-19",
      "confidence": 0.95,
      "lineHeight": "74.4px",
      "letterSpacing": "-4.3px"
    },
    {
      "role": "heading",
      "size": "40px",
      "family": "sohneMono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 40px 'sohneMono' uppercase used for major section headers like 'What We Measure'.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "40px",
      "letterSpacing": "4px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "circular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 18px 'circular' used for descriptive text within feature cards.",
      "sampleId": "font-4",
      "confidence": 0.85,
      "lineHeight": "22px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "14px",
      "family": "sohneMono",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-14: computed CSS at 1440×1000; AI role: 14px 'sohneMono' used for technical tags and UI details, establishing the clinical aesthetic.",
      "sampleId": "font-14",
      "confidence": 0.9,
      "lineHeight": "18px",
      "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": "#ACB2B8",
      "cssValue": "rgb(172, 178, 184)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-6"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "control-background",
        "background"
      ],
      "occurrences": 11,
      "sourceId": "color-7"
    },
    {
      "value": "#8A8E92",
      "cssValue": "rgb(138, 142, 146)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-8"
    },
    {
      "value": "#3B4144",
      "cssValue": "rgb(59, 65, 68)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-9"
    },
    {
      "value": "#0C1418",
      "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "text"
      ],
      "occurrences": 25,
      "sourceId": "color-11"
    },
    {
      "value": "#F5F7F9",
      "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "text"
      ],
      "occurrences": 5,
      "sourceId": "color-15"
    },
    {
      "value": "#F6F8FA",
      "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.75)",
      "alpha": 0.7490196078431373,
      "appliedAs": [
        "text"
      ],
      "occurrences": 9,
      "sourceId": "color-17"
    },
    {
      "value": "#F5F8FA",
      "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.4)",
      "alpha": 0.4,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 60,
      "sourceId": "color-18"
    },
    {
      "value": "#F5F8FA",
      "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.613292)",
      "alpha": 0.611764705882353,
      "appliedAs": [
        "text"
      ],
      "occurrences": 2,
      "sourceId": "color-21"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#0C1317",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(12, 19, 23); AI role: Dark #0C1317 used as the primary background for the page body and major sections.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-7: computed rgb(255, 255, 255); AI role: White #FFFFFF used for high-contrast text and active elements on the dark canvas.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#F6F8FA",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-3: computed rgb(246, 248, 250); AI role: Light #F6F8FA used for elements sitting on top of the dark canvas, though primarily seen as text color here, it implies the light surface opposite.",
      "sampleId": "color-3",
      "confidence": 0.85
    },
    {
      "hex": "#E8ECEF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-2: computed rgb(232, 236, 239); AI role: Used for buttons like 'Sign Up', contrasting with the dark canvas.",
      "sampleId": "color-2",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and tags appear to have smaller radii (e.g., 4-8px), while large cards have slightly larger radii (e.g., 12-16px).",
  "density": "Low density; ample whitespace prioritizes focus on typography and imagery over cramming information.",
  "evidence": "Observation of component spacing, card shapes, button styling across the hero, feature, and footer sections.",
  "borderStyle": "Minimal use of borders; separation is primarily achieved through background color contrast and spacing. Some subtle borders on interactive elements.",
  "buttonStyle": "Solid fill for primary actions with contrasting text, often utilizing the dark/light duality of the palette. Some outline or ghost variations for secondary actions.",
  "cornerStyle": "Subtly rounded corners on buttons and cards, softening the technical feel.",
  "contentWidth": "Content is generally centered and constrained within a readable max-width, though hero imagery bleeds to edges.",
  "spacingRhythm": "Generous spacing, particularly in vertical rhythm between sections. The stacking cards imply careful calculation of vertical offsets."
}
```

### Reconstruction specification

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

- Root: 1440×3800px; block; padding {"top":"0px","right":"0px","bottom":"0px","left":"0px"}; gap normal; background rgb(12, 19, 23); radius 0px.
- Observed gaps: 20px.
- Representative content widths: 816, 476, 458, 435, 420, 413, 255, 250px.
- Layout containers: 0; cards/surfaces: 4; media elements: 4; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 1094,
      "bottom": 4894,
      "pageHeight": 9356
    }
  },
  "container": {
    "size": "1440×3800px",
    "position": "x 0px, y 1094px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(12, 19, 23)",
    "radius": "0px",
    "border": "0px solid rgb(36, 28, 25)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      20
    ],
    "representativeContentWidthsPx": [
      816,
      476,
      458,
      435,
      420,
      413,
      255,
      250
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "size": "476×319px",
      "position": "x 830px, y 1407px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "size": "458×307px",
      "position": "x 834px, y 1479px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "size": "435×292px",
      "position": "x 838px, y 1554px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "size": "413×276px",
      "position": "x 843px, y 1629px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "3.35544e+07px",
      "12px",
      "0px 0px 12px 12px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
    "size": "476×319px",
    "position": "x 830px, y 1407px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "12px",
    "overflow": "clip",
    "source": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-skin-face.0r~ec5qc3c3ov.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs"
  },
  {
    "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
    "size": "458×307px",
    "position": "x 834px, y 1479px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "12px",
    "overflow": "clip",
    "source": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-hair-scalp.0.rjpbe0.sxp8.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs"
  },
  {
    "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
    "size": "435×292px",
    "position": "x 838px, y 1554px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "12px",
    "overflow": "clip",
    "source": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-body-vitals.11ebvudpjy.0f.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs"
  },
  {
    "element": "img · aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
    "size": "413×276px",
    "position": "x 843px, y 1629px",
    "aspectRatio": 1.5,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "12px",
    "overflow": "clip",
    "source": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-blood-metabolic.0txffdmhtp5~c.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs"
  }
]
```

#### 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
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-11T03:48:55.733Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 1094,
    "bottom": 4894,
    "pageHeight": 9356
  },
  "root": {
    "id": "ld-67",
    "tag": "section",
    "role": null,
    "label": "What We Measure01Skin02Hair03Body04Metabolic01/04SkinClinical imaging, structure, and tone, mapped i",
    "rect": {
      "x": 0,
      "y": 1094,
      "width": 1440,
      "height": 3800
    },
    "display": "block",
    "position": "relative",
    "padding": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": null,
    "background": "rgb(12, 19, 23)",
    "radius": "0px",
    "border": "0px solid rgb(36, 28, 25)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "gapsPx": [
      20
    ],
    "representativeContentWidthsPx": [
      816,
      476,
      458,
      435,
      420,
      413,
      255,
      250
    ]
  },
  "columns": [],
  "cards": [
    {
      "id": "ld-167",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 830,
        "y": 1407,
        "width": 476,
        "height": 319
      },
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    },
    {
      "id": "ld-205",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 834,
        "y": 1479,
        "width": 458,
        "height": 307
      },
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    },
    {
      "id": "ld-242",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 838,
        "y": 1554,
        "width": 435,
        "height": 292
      },
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    },
    {
      "id": "ld-279",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 843,
        "y": 1629,
        "width": 413,
        "height": 276
      },
      "radius": "12px",
      "border": "0px solid rgba(0, 0, 0, 0)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    }
  ],
  "surfaces": {
    "radii": [
      "3.35544e+07px",
      "12px",
      "0px 0px 12px 12px"
    ],
    "borders": [],
    "shadows": []
  },
  "media": [
    {
      "id": "ld-167",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 830,
        "y": 1407,
        "width": 476,
        "height": 319
      },
      "aspectRatio": 1.5,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "12px",
      "overflow": "clip",
      "media": {
        "src": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-skin-face.0r~ec5qc3c3ov.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs",
        "naturalWidth": 604,
        "naturalHeight": 616,
        "alt": ""
      }
    },
    {
      "id": "ld-205",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 834,
        "y": 1479,
        "width": 458,
        "height": 307
      },
      "aspectRatio": 1.5,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "12px",
      "overflow": "clip",
      "media": {
        "src": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-hair-scalp.0.rjpbe0.sxp8.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs",
        "naturalWidth": 604,
        "naturalHeight": 730,
        "alt": ""
      }
    },
    {
      "id": "ld-242",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 838,
        "y": 1554,
        "width": 435,
        "height": 292
      },
      "aspectRatio": 1.5,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "12px",
      "overflow": "clip",
      "media": {
        "src": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-body-vitals.11ebvudpjy.0f.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs",
        "naturalWidth": 604,
        "naturalHeight": 616,
        "alt": ""
      }
    },
    {
      "id": "ld-279",
      "tag": "img",
      "role": null,
      "label": "aspect-[639/428] min-w-0 flex-1 rounded-[12px] object-cover transition-opacity duration-150 motion-r",
      "rect": {
        "x": 843,
        "y": 1629,
        "width": 413,
        "height": 276
      },
      "aspectRatio": 1.5,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "12px",
      "overflow": "clip",
      "media": {
        "src": "https://www.layers.bio/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcategory-blood-metabolic.0txffdmhtp5~c.jpg&w=640&q=75&dpl=dpl_AzeG5GC9it1684ZQeDd8FZop96Xs",
        "naturalWidth": 604,
        "naturalHeight": 616,
        "alt": ""
      }
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 53,
    "cards": 4,
    "media": 4,
    "animations": 0
  },
  "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."
  ]
}
```

### 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: Not assessed
- What transfers: Documented hierarchy and composition
- Dependencies: None recorded
- Guidance: Adapt the pattern to the new product and content.

### 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 features section inspired by the design evidence titled “WHAT WE MEASURE”.

Purpose: features section from the Home page of Layers.

Structure: 1440×3800px root; block. Source layout label: 1440×3800px root; block. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: rgb(12, 19, 23) with 1440×3800px root; block. Inspect the crop for image and content hierarchy.

Components: Navigation Bar, Feature Card, Tag, Testimonial Card, Pricing Table, FAQ Accordion, Footer, Scroll Linked Stacking Cards, Timeline Indicator, Hero With Background Imagery, Stat Block, Primary Button.

Style direction: minimal, bold, typographic, photographic, clinical-premium, sci-fi-modern.

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

Typography evidence: {"role":"display","size":"71.6px","family":"circular","source":"computed","traits":"Regular","weight":"400","evidence":"font-19: computed CSS at 1440×1000; AI role: Large 71.6px 'circular' used for the primary hero headline 'The science of'.","sampleId":"font-19","confidence":0.95,"lineHeight":"74.4px","letterSpacing":"-4.3px"} {"role":"heading","size":"40px","family":"sohneMono","source":"computed","traits":"uppercase","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 40px 'sohneMono' uppercase used for major section headers like 'What We Measure'.","sampleId":"font-2","confidence":0.9,"lineHeight":"40px","letterSpacing":"4px"} {"role":"body","size":"18px","family":"circular","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: 18px 'circular' used for descriptive text within feature cards.","sampleId":"font-4","confidence":0.85,"lineHeight":"22px","letterSpacing":"normal"} {"role":"mono","size":"14px","family":"sohneMono","source":"computed","traits":"Regular","weight":"400","evidence":"font-14: computed CSS at 1440×1000; AI role: 14px 'sohneMono' used for technical tags and UI details, establishing the clinical aesthetic.","sampleId":"font-14","confidence":0.9,"lineHeight":"18px","letterSpacing":"normal"}

Color evidence: {"hex":"#0C1317","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(12, 19, 23); AI role: Dark #0C1317 used as the primary background for the page body and major sections.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-7: computed rgb(255, 255, 255); AI role: White #FFFFFF used for high-contrast text and active elements on the dark canvas.","sampleId":"color-7","confidence":0.9} {"hex":"#F6F8FA","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(246, 248, 250); AI role: Light #F6F8FA used for elements sitting on top of the dark canvas, though primarily seen as text color here, it implies the light surface opposite.","sampleId":"color-3","confidence":0.85} {"hex":"#E8ECEF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(232, 236, 239); AI role: Used for buttons like 'Sign Up', contrasting with the dark canvas.","sampleId":"color-2","confidence":0.8}

Typography measured inside this section: {"id":"font-2","family":"sohneMono","fontStack":"sohneMono, circular, \"circular Fallback\", ui-monospace, monospace","weight":"400","size":"40px","lineHeight":"40px","letterSpacing":"4px","traits":"uppercase","count":1,"contexts":[{"tag":"h2","text":"What We Measure","top":1272,"property":"font"}]} {"id":"font-4","family":"circular","fontStack":"circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif","weight":"400","size":"18px","lineHeight":"22px","letterSpacing":"normal","traits":"Regular","count":7,"contexts":[{"tag":"p","text":"Clinical imaging, structure, and tone, mapped in detail.","top":1505,"property":"font"},{"tag":"p","text":"Density and fiber integrity, under magnification.","top":1594,"property":"font"},{"tag":"p","text":"Composition and baseline vitals, scan by scan.","top":1663,"property":"font"}]} {"id":"font-7","family":"circular","fontStack":"circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif","weight":"400","size":"20px","lineHeight":"24px","letterSpacing":"normal","traits":"Regular","count":4,"contexts":[{"tag":"p","text":"Skin","top":1475,"property":"font"},{"tag":"p","text":"Hair","top":1565,"property":"font"},{"tag":"p","text":"Body","top":1636,"property":"font"}]} {"id":"font-9","family":"sohneMono","fontStack":"sohneMono, circular, \"circular Fallback\", ui-monospace, monospace","weight":"400","size":"12px","lineHeight":"16px","letterSpacing":"normal","traits":"Regular","count":4,"contexts":[{"tag":"p","text":"01/04","top":1407,"property":"font"},{"tag":"p","text":"02/04","top":1479,"property":"font"},{"tag":"p","text":"03/04","top":1554,"property":"font"}]} {"id":"font-14","family":"sohneMono","fontStack":"sohneMono, circular, \"circular Fallback\", ui-monospace, monospace","weight":"400","size":"14px","lineHeight":"18px","letterSpacing":"normal","traits":"Regular","count":9,"contexts":[{"tag":"button","text":"Clinical Skin Imaging","top":1601,"property":"font"},{"tag":"button","text":"Facial Analysis","top":1645,"property":"font"},{"tag":"button","text":"Color Analysis","top":1689,"property":"font"}]} {"id":"font-15","family":"circular","fontStack":"circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif","weight":"400","size":"26px","lineHeight":"26px","letterSpacing":"normal","traits":"Regular","count":4,"contexts":[{"tag":"span","text":"Skin","top":1384,"property":"font"},{"tag":"span","text":"Hair","top":1496,"property":"font"},{"tag":"span","text":"Body","top":1608,"property":"font"}]} {"id":"font-17","family":"sohneMono","fontStack":"sohneMono, circular, \"circular Fallback\", ui-monospace, monospace","weight":"400","size":"16px","lineHeight":"16px","letterSpacing":"1.6px","traits":"Regular","count":4,"contexts":[{"tag":"span","text":"01","top":1389,"property":"font"},{"tag":"span","text":"02","top":1501,"property":"font"},{"tag":"span","text":"03","top":1613,"property":"font"}]}

Colors measured inside this section: {"id":"color-6","hex":"#ACB2B8","alpha":1,"cssValue":"rgb(172, 178, 184)","count":1,"contexts":[{"tag":"div","text":"","top":1450,"property":"background"}]} {"id":"color-7","hex":"#FFFFFF","alpha":1,"cssValue":"rgb(255, 255, 255)","count":11,"contexts":[{"tag":"a","text":"Get started","top":856,"property":"text"},{"tag":"button","text":"Clinical Skin Imaging","top":1601,"property":"control-background"},{"tag":"span","text":"Scalp & Hair Density Analysis","top":1707,"property":"background"}]} {"id":"color-8","hex":"#8A8E92","alpha":1,"cssValue":"rgb(138, 142, 146)","count":1,"contexts":[{"tag":"div","text":"","top":1527,"property":"background"}]} {"id":"color-9","hex":"#3B4144","alpha":1,"cssValue":"rgb(59, 65, 68)","count":1,"contexts":[{"tag":"div","text":"","top":1603,"property":"background"}]} {"id":"color-11","hex":"#0C1418","alpha":0.5019607843137255,"cssValue":"oklab(0.181493 -0.00801832 -0.0108557 / 0.5)","count":25,"contexts":[{"tag":"p","text":"01/04","top":1407,"property":"text"},{"tag":"button","text":"Clinical Skin Imaging","top":1601,"property":"text"},{"tag":"span","text":"Scalp & Hair Density Analysis","top":1707,"property":"text"}]} {"id":"color-15","hex":"#F5F7F9","alpha":0.5019607843137255,"cssValue":"oklab(0.97817 -0.00124365 -0.00314617 / 0.5)","count":5,"contexts":[{"tag":"span","text":"02","top":1501,"property":"text"},{"tag":"p","text":"Measure once a year.","top":7108,"property":"text"}]} {"id":"color-17","hex":"#F6F8FA","alpha":0.7490196078431373,"cssValue":"oklab(0.97817 -0.00124365 -0.00314617 / 0.75)","count":9,"contexts":[{"tag":"a","text":"What We Measure","top":47,"property":"text"},{"tag":"span","text":"01","top":1389,"property":"text"}]} {"id":"color-18","hex":"#F5F8FA","alpha":0.4,"cssValue":"oklab(0.97817 -0.00124365 -0.00314617 / 0.4)","count":60,"contexts":[{"tag":"span","text":"","top":1349,"property":"background"},{"tag":"p","text":"© 2026 layers","top":9011,"property":"text"}]}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":1094,"width":1440,"height":3800},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[20],"representativeContentWidthsPx":[816,476,458,435,420,413,255,250]}; surfaces {"radii":["3.35544e+07px","12px","0px 0px 12px 12px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":830,"y":1407,"width":476,"height":319},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"12px"},{"tag":"img","rect":{"x":834,"y":1479,"width":458,"height":307},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"12px"},{"tag":"img","rect":{"x":838,"y":1554,"width":435,"height":292},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"12px"},{"tag":"img","rect":{"x":843,"y":1629,"width":413,"height":276},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"12px"}]

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

Transfer the documented hierarchy and composition rather than source copy or assets.

No explicit dependencies were recorded.

Adapt the pattern to the new product and content.

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