# Layers — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.layers.bio/
Captured: 2026-10-11
CSS measured: 2026-10-11T03:48:52.722Z at 1440×1000 — https://www.layers.bio/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Layers is a premium, technology-forward health and aesthetics website featuring a dark mode primary palette with a distinct, slightly clinical, modern visual language. The design employs a sophisticated typography system pairing 'sohneMono' for technical, precise details with 'circular' for approachable, legible headings and body copy. Large, high-quality, sometimes subtly animated imagery anchors the layout, particularly in the hero and FAQ sections, establishing a high-end, scientific aesthetic. The layout utilizes a prominent scrolling interaction to present layered product details ('What We Measure'), reinforcing the brand name and concept. The overall impression is minimal, bold, and hi

## Classification

- Industry: health
- Site type: Waitlist, Landing
- Business model: AI, Agency
- Styles: minimal, bold, typographic, photographic, clinical-premium, sci-fi-modern
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: circular — weight 400; size 71.6px; line-height 74.4px; tracking -4.3px; Regular (95% role confidence, computed values)
- Heading: sohneMono — weight 400; size 40px; line-height 40px; tracking 4px; uppercase (90% role confidence, computed values)
- Body: circular — weight 400; size 18px; line-height 22px; tracking normal; Regular (85% role confidence, computed values)
- Mono: sohneMono — weight 400; size 14px; line-height 18px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #0C1317: color-1: computed rgb(12, 19, 23); AI role: Dark #0C1317 used as the primary background for the page body and major sections. (95% role confidence, computed values)
- Text — text #FFFFFF: color-7: computed rgb(255, 255, 255); AI role: White #FFFFFF used for high-contrast text and active elements on the dark canvas. (90% role confidence, computed values)
- Surface — surface #F6F8FA: 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. (85% role confidence, computed values)
- Primary Action — primary action #E8ECEF: color-2: computed rgb(232, 236, 239); AI role: Used for buttons like 'Sign Up', contrasting with the dark canvas. (80% role confidence, computed values)

## Exact computed CSS inventory

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

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "sohneMono",
    "fontStack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
    "weight": "400",
    "size": "33.1px",
    "lineHeight": "33.1px",
    "letterSpacing": "3.3px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Locations",
        "top": 5009,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Testimonials",
        "top": 6141,
        "property": "font"
      }
    ]
  },
  {
    "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-3",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "450",
    "size": "20.9px",
    "lineHeight": "25.1px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 856,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "What we measure",
        "top": 856,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "4",
        "top": 858,
        "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-5",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Measure once a year.",
        "top": 7108,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Measure quarterly.",
        "top": 7108,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "One visit, about an hour. We measure your blood, body, skin, and hair with clinical instruments, and",
        "top": 8108,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "San Francisco",
        "top": 5559,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "NYC",
        "top": 5559,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "LA",
        "top": 5559,
        "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-8",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "700",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Company",
        "top": 9076,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Policies",
        "top": 9076,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Members",
        "top": 9076,
        "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-10",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "20.9px",
    "lineHeight": "25.1px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Layers of your health",
        "top": 893,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Measurements in one visit",
        "top": 893,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Measured in person",
        "top": 893,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "FAQ",
        "top": 8004,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2026 layers",
        "top": 9011,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "About",
        "top": 9109,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Blog",
        "top": 9143,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Locations",
        "top": 9177,
        "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-16",
    "family": "sohneMono",
    "fontStack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
    "weight": "500",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "What happens at a session?",
        "top": 8064,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "How often do I come in?",
        "top": 8138,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Where are you located?",
        "top": 8212,
        "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"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "sohneMono",
    "fontStack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
    "weight": "500",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 5333,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 5333,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "71.6px",
    "lineHeight": "74.4px",
    "letterSpacing": "-4.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "The science of",
        "top": 740,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "circularItalic",
    "fontStack": "circularItalic, \"circularItalic Fallback\", system-ui, sans-serif",
    "weight": "450",
    "size": "71.6px",
    "lineHeight": "74.4px",
    "letterSpacing": "-4.3px",
    "traits": "italic",
    "count": 1,
    "contexts": [
      {
        "tag": "em",
        "text": "attractiveness",
        "top": 738,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "400",
    "size": "41.8px",
    "lineHeight": "50.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“Layers is the only aesthetics company I know that truly understands AI and respects the customer's ",
        "top": 6289,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "sohneMono",
    "fontStack": "sohneMono, circular, \"circular Fallback\", ui-monospace, monospace",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "John Qian, AI Researcher",
        "top": 6562,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "450",
    "size": "20px",
    "lineHeight": "normal",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "a",
        "text": "What We Measure",
        "top": 47,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Locations",
        "top": 47,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Testimonials",
        "top": 47,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "450",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Get started",
        "top": 5635,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Join waitlist",
        "top": 5635,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Join waitlist",
        "top": 5635,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "450",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Login",
        "top": 44,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Sign Up",
        "top": 34,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "circular",
    "fontStack": "circular, \"circular Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
    "weight": "450",
    "size": "18px",
    "lineHeight": "normal",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Get Started",
        "top": 7678,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#0C1317",
    "alpha": 1,
    "cssValue": "rgb(12, 19, 23)",
    "count": 43,
    "contexts": [
      {
        "tag": "body",
        "text": "What We MeasureLocationsTestimonialsBlogJoinFAQLoginSign UpWhat We MeasureLocationsTestimonialsBlogJ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Sign Up",
        "top": 34,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "The science of attractivenessGet startedWhat we measure4Layers of your health150+Measurements in one",
        "top": -46,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#E8ECEF",
    "alpha": 1,
    "cssValue": "rgb(232, 236, 239)",
    "count": 20,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign Up",
        "top": 34,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "The science of attractivenessGet startedWhat we measure4Layers of your health150+Measurements in one",
        "top": 118,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "LocationsSan FranciscoNorth BeachGet startedComing soonNYCComing soonJoin waitlistComing soonLAComin",
        "top": 4894,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F6F8FA",
    "alpha": 1,
    "cssValue": "rgb(246, 248, 250)",
    "count": 34,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 34,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "The science of",
        "top": 740,
        "property": "text"
      },
      {
        "tag": "em",
        "text": "attractiveness",
        "top": 738,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#141414",
    "alpha": 0.050980392156862744,
    "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.05)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "San FranciscoNorth BeachGet started",
        "top": 5165,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#0D1417",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.3)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "What We MeasureLocationsTestimonialsBlogJoinFAQ",
        "top": 24,
        "property": "background"
      }
    ]
  },
  {
    "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-10",
    "hex": "#F5FAFA",
    "alpha": 0.2,
    "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.2)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 858,
        "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-12",
    "hex": "#F6F8FA",
    "alpha": 0.8509803921568627,
    "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.85)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "One visit, about an hour. We measure your blood, body, skin, and hair with clinical instruments, and",
        "top": 8108,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F5F5F5",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.1)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "What we measure",
        "top": 856,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 5333,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#0B1416",
    "alpha": 0.45098039215686275,
    "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.45)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "4Layers of your health150+Measurements in one visit60 minMeasured in person",
        "top": 856,
        "property": "::before-background"
      }
    ]
  },
  {
    "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-16",
    "hex": "#F6F8FA",
    "alpha": 0.8196078431372549,
    "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.82)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Layers of your health",
        "top": 893,
        "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"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#0B1317",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "FAQ",
        "top": 8004,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#E8ECEF",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0.940892 -0.00292855 -0.00509083 / 0.7)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "About",
        "top": 9109,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#F5F8FA",
    "alpha": 0.611764705882353,
    "cssValue": "oklab(0.97817 -0.00124365 -0.00314617 / 0.613292)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "04",
        "top": 1725,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#0C1416",
    "alpha": 0.4,
    "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.4)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 5316,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 4,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 878,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#0A1419",
    "alpha": 0.2,
    "cssValue": "oklab(0.181493 -0.00801832 -0.0108557 / 0.2)",
    "count": 8,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 6342,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous spacing, particularly in vertical rhythm between sections. The stacking cards imply careful calculation of vertical offsets.
- Corner style: Subtly rounded corners on buttons and cards, softening the technical feel.
- Radius: Buttons and tags appear to have smaller radii (e.g., 4-8px), while large cards have slightly larger radii (e.g., 12-16px).
- Borders: Minimal use of borders; separation is primarily achieved through background color contrast and spacing. Some subtle borders on interactive elements.
- Buttons: 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.
- Content width: Content is generally centered and constrained within a readable max-width, though hero imagery bleeds to edges.
- 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.

## Sections

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

1. **Hero — The Science of Attractiveness Hero** (Home)
   AI suggestion (97% confidence): Complete page-opening hero with integrated navigation, striking split portrait imagery, a clear value proposition, dual calls to action, and supporting measurement stats.
   Capture: 1440×1104px; page bounds 0–1104px of 9356px; source section ID: `23c21411-b887-4e9c-9c86-a7fd5ec18cad`; image: https://media.designdetails.io/library/7391b7e92d834acb4d056a03dac6e40feafcced5bbcb9efef264a85f43b3b1d1/23c21411-b887-4e9c-9c86-a7fd5ec18cad.webp
   SECTION.md v3.2: `23c21411-b887-4e9c-9c86-a7fd5ec18cad` (deterministic evidence; editorial review pending)
2. **Features — WHAT WE MEASURE** (Home)
   Reusable feature composition from Home, organized around “WHAT WE MEASURE”.
   Capture: 1440×905px; page bounds 1115–2020px of 9356px; source section ID: `90f6e6c0-f18c-4f8c-b3ff-4cd3a305cb4e`; image: https://media.designdetails.io/library/e54cecc49102dacd8e54c42731ddb77a93f4e7a27840a24b7d140ff61cc36b15/section-manual-90f6e6c0-f18c-4f8c-b3ff-4cd3a305cb4e-1791702018178.webp
   SECTION.md v3.2: `90f6e6c0-f18c-4f8c-b3ff-4cd3a305cb4e` (deterministic evidence; editorial review pending)
3. **Features — LOCATIONS** (Home)
   Reusable feature composition from Home, organized around “LOCATIONS”.
   Capture: 1440×1000px; page bounds 4894–5894px of 9356px; source section ID: `500272d9-2788-4fbc-aa3c-bc9cae50675e`; image: https://media.designdetails.io/library/57cdaa20bf34977d784a9ac0d553fb4c530de8e042e7b869098e4d493d1d2a74/section_crop-500272d9-2026-10-11T03-49-03-190Z.webp
   SECTION.md v3.2: `500272d9-2788-4fbc-aa3c-bc9cae50675e` (deterministic evidence; editorial review pending)
4. **Features — Layers Features** (Home)
   Reusable feature composition from Home, organized around “Layers Features”.
   Capture: 1440×1000px; page bounds 6894–7894px of 9356px; source section ID: `c6ceecd9-7b36-40d3-b754-58c4332968d9`; image: https://media.designdetails.io/library/07a41d2492476763097d6b5a2850d086fc68440ef0b3fab64f1bda368d001523/section_crop-c6ceecd9-2026-10-11T03-49-06-071Z.webp
   SECTION.md v3.2: `c6ceecd9-7b36-40d3-b754-58c4332968d9` (deterministic evidence; editorial review pending)
5. **Testimonials — Customer Testimonial Carousel** (Home)
   AI suggestion (98% confidence): Complete testimonial component with section heading, prominent customer quote, avatar and attribution, navigation arrows, and pagination indicators.
   Capture: 1440×852px; page bounds 6023–6875px of 9356px; source section ID: `271ef696-1873-417d-8183-a3861e5b0ffa`; image: https://media.designdetails.io/library/f9b58e48f98628c3444d2ec685de02589a9aaa177ae83541270c7b33b69c009d/section-manual-271ef696-1873-417d-8183-a3861e5b0ffa-1791702025896.webp
   SECTION.md v3.2: `271ef696-1873-417d-8183-a3861e5b0ffa` (deterministic evidence; editorial review pending)
6. **FAQ — Portrait FAQ Accordion** (Home)
   AI suggestion (98% confidence): Complete FAQ component with four accordion questions over a distinctive split-portrait background, contained within a clearly bounded rounded panel.
   Capture: 1440×884px; page bounds 7893–8777px of 9356px; source section ID: `87314a3b-d8bd-404f-9717-413339e606f1`; image: https://media.designdetails.io/library/a30998a9fbb2ab561baf5ee37ac68ae0c3799876ddb5202adc830199ed78ffb1/87314a3b-d8bd-404f-9717-413339e606f1.webp
   SECTION.md v3.2: `87314a3b-d8bd-404f-9717-413339e606f1` (deterministic evidence; editorial review pending)
7. **Footer — Layers Link Footer** (Home)
   AI suggestion (97% confidence): Complete page footer featuring the brand mark, two prominent action buttons, copyright, and organized navigation columns for company, policies, members, and social links.
   Capture: 1440×507px; page bounds 8849–9356px of 9356px; source section ID: `9214dbe0-fe52-46d0-bdd0-5acc9dfc9dee`; image: https://media.designdetails.io/library/c1bee1dec8525d766c14bfc295a5d2616cbde6451b9a0bfe8af7fc4f7f9321f8/9214dbe0-fe52-46d0-bdd0-5acc9dfc9dee.webp
   SECTION.md v3.2: `9214dbe0-fe52-46d0-bdd0-5acc9dfc9dee` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/d4c6385b48987a1efc32f52f246f647b3a83b50c28f84ab50c7add71e2b385e1/desktop_full-cda17fa2-2026-10-11T03-48-52-735Z.webp
- Mobile screenshot: https://media.designdetails.io/library/79e4503d51a83e6812958ee8a47203356f2a07163f38262bf350b71188fcdce6/mobile_full-cda17fa2-2026-10-11T03-49-39-516Z.webp
- Open Graph image: https://media.designdetails.io/library/447ad2153727adb640ad68be99f888b6cec319ba40205963cd1238a831dc0826/og_image-cda17fa2-2026-10-11T03-48-59-858Z.webp
- Full-page video: https://media.designdetails.io/library/07ecfe7a3033d8f9a48ca2c06b4a1a68e4904b2a96ba4c5dd3f09a3928b3c237/motion-1791700635915.mp4
- Video poster: https://media.designdetails.io/library/726500f6d7a92a5c7ae1f2bc4e7559041f8f5746fcce6fa4667fefb2d4588f81/motion-poster-1791700635915.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
- Feature Card
- Tag
- Testimonial Card
- Pricing Table
- FAQ Accordion
- Footer
- Scroll Linked Stacking Cards
- Timeline Indicator
- Hero With Background Imagery
- Stat Block
- Primary Button

## Quality rubric

Overall: 60.3/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Layers delivers a competent, thematically unified clinical-premium site anchored by one genuinely smart idea — a scroll-stacking card module that literalizes the brand name — paired with a disciplined dark/light type-and-color system. But that single strong idea sits among otherwise conventional sections (testimonials, pricing, locations, footer) and a narrow motion vocabulary limited to two repeated effects, keeping the overall experience solidly 'good' rather than a fully distinctive, multi-section system.

- Typography (15%): 64 — A deliberate two-voice type system pairs tracked-out uppercase sohneMono for technical/clinical labels with circular (and circularItalic for emphasis) for display and body copy. The role separation is consistent across hero, section headers, tags, and FAQ, giving the page a legible hierarchy. However, the system relies on a single pairing concept applied repetitively rather than demonstrating range (e.g., considered numeral/data typography, varied weight contrast beyond tracking tricks), and several near-duplicate sizes (20px/20.9px/21.8px) suggest the scale wasn't tightly art-directed.
- Color (10%): 59 — The palette is a disciplined near-monochrome dark/light duality (#0C1317 canvas, #FFFFFF/#F6F8FA text, #E8ECEF light-surface inversion for Locations/Testimonials/Optimize pricing card) that supports the clinical-premium tone and gives clean contrast. But there is no distinct accent hue carried through the system — color choices are safe and conventional for a dark SaaS/health site, so while coherent, it doesn't demonstrate much color craft beyond light/dark swapping.
- Layout (20%): 64 — The page follows a conventional marketing structure (nav, hero, feature list, locations, testimonials, pricing, FAQ, footer), but the 'What We Measure' module — a stacked card reveal paired with a vertical tick-mark timeline indicator — is a genuinely considered layout idea that ties structure to the brand name 'Layers.' Other sections (location cards, pricing cards, testimonial carousel, footer) are templated and unremarkable. The whitespace and max-width discipline are consistent throughout.
- Motion (20%): 58 — Motion is limited to two devices: a continuous vertical ripple/distortion effect on the two-face portrait (reused identically in hero and footer for bookending consistency), and a scroll-triggered card-stack translation in the 'What We Measure' module synced to a timeline indicator. Both are purposeful and tied to brand concept, but the vocabulary is narrow — no evidence of hover states, micro-interactions, or orchestrated motion elsewhere (accordion, carousel, buttons) was captured, and claims about smoothness/easing cannot be substantiated from the evidence.
- Originality (25%): 56 — The strongest original idea is conceptual: the stacking-card reveal literalizes the brand name 'Layers' by visually layering the four measurement categories, which is a smart, purpose-built connection between content and interaction. However, both signature effects — ripple/glitch portrait distortion and scroll-linked stacking cards — are recognizable patterns within current premium tech/health site design, not inventions unique to this site. The remainder of the page (testimonial carousel, pricing cards, location cards, footer) is highly conventional template construction, which dilutes the originality of the one strong idea across the whole experience.
- Content (10%): 64 — Copy and visuals are tightly aligned to the clinical-premium positioning: the hero stat block ('4 Layers', '150+ Measurements', '60 min') directly maps to brand concept, feature-card tags ('Clinical Skin Imaging', 'Facial Analysis', 'Body Recomposition') reinforce the scientific tone, and the testimonial from an 'AI Researcher' supports the tech-health narrative. The content supports rather than fights the visual system throughout the captured sections.

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

## Curator notes

A glitched double portrait up top sets a clinical, high-tech mood, while a vertical ruler with numbered steps (01 Skin to 04 Metabolic) turns the dark page into a clear progression. White stacked cards with close-up body imagery and small mono labels break up the black background, making dense measurement data easy to scan one layer at a time.

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