# The leadership behind Osmo — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://www.osmo.ai/
Website: Osmo
Section ID: 8e4efbc9-bb5e-4023-b6dd-62618598c555
Status: deterministic evidence captured; editorial AI review pending

## Purpose

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

## Layout

1440×1267px root; flex

## Visual signature

editorial, soft, minimal, gradient, glassmorphic treatment at 1440×1000px. The crop spans 0–1000px of a 8219px page.

## Components

- Navigation Bar
- Hero With Background Imagery
- Primary Button
- Outline Button
- Feature Card
- Product UI
- Stat Block
- Testimonial Card
- FAQ Accordion
- Footer
- Soft Gradient Containers
- Split Layout With Sticky Media

## 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: hero
- Source type: hero
- Structure: 1440×1267px root; flex
- Layout: 1440×1267px root; flex
- Styles: editorial, soft, minimal, gradient, glassmorphic
- Components: Navigation Bar, Hero With Background Imagery, Primary Button, Outline Button, Feature Card, Product UI, Stat Block, Testimonial Card, FAQ Accordion, Footer, Soft Gradient Containers, Split Layout With Sticky Media
- Purpose: hero section from the About page of Osmo.
- Visual signature: rgb(255, 255, 255) with 1440×1267px root; flex. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×1000px; aspect ratio 1.44:1
- Page bounds: 0–1000px of 8219px
- 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": "Tenor Sans",
      "stack": "\"Tenor Sans\", Arial, sans-serif",
      "size": "43.2px",
      "weight": "400",
      "lineHeight": "43.2px",
      "letterSpacing": "-1.3px",
      "sample": "Introducing Osmo Studio",
      "element": "span",
      "occurrences": 10,
      "sourceId": "font-2"
    },
    {
      "role": "section heading",
      "family": "Tenor Sans",
      "stack": "\"Tenor Sans\", Arial, sans-serif",
      "size": "56.8px",
      "weight": "400",
      "lineHeight": "56.8px",
      "letterSpacing": "-1.7px",
      "sample": "We turn the science of scent into a platform for creativity.",
      "element": "h2",
      "occurrences": 3,
      "sourceId": "font-4"
    },
    {
      "role": "body/supporting copy",
      "family": "Dm Sans",
      "stack": "\"Dm Sans\", Arial, sans-serif",
      "size": "18.8px",
      "weight": "400",
      "lineHeight": "26.3px",
      "letterSpacing": "normal",
      "sample": "Skip to main content",
      "element": "div",
      "occurrences": 25,
      "sourceId": "font-5"
    },
    {
      "role": "UI/supporting text",
      "family": "Dm Mono",
      "stack": "\"Dm Mono\", Arial, sans-serif",
      "size": "13.4px",
      "weight": "400",
      "lineHeight": "13.4px",
      "letterSpacing": "0.3px",
      "sample": "For Brands",
      "element": "div",
      "occurrences": 6,
      "sourceId": "font-8"
    },
    {
      "role": "UI/supporting text",
      "family": "Dm Mono",
      "stack": "\"Dm Mono\", Arial, sans-serif",
      "size": "15.4px",
      "weight": "400",
      "lineHeight": "15.4px",
      "letterSpacing": "0.3px",
      "sample": "create a scent",
      "element": "div",
      "occurrences": 27,
      "sourceId": "font-9"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "76px",
      "family": "Tenor Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: Tenor Sans at 76px, used for the large prominent numbers in the stats section.",
      "sampleId": "font-10",
      "confidence": 0.9,
      "lineHeight": "76px",
      "letterSpacing": "-2.3px"
    },
    {
      "role": "heading",
      "size": "56.8px",
      "family": "Tenor Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Tenor Sans at 56.8px, used for primary section headlines to establish an elegant tone.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "56.8px",
      "letterSpacing": "-1.7px"
    },
    {
      "role": "body",
      "size": "18.8px",
      "family": "Dm Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: Dm Sans at 18.8px, providing clean and readable body copy across various sections.",
      "sampleId": "font-5",
      "confidence": 0.9,
      "lineHeight": "26.3px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "15.4px",
      "family": "Dm Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Dm Mono at 15.4px, used consistently in uppercase for buttons, navigation links, and small labels to provide a technical contrast.",
      "sampleId": "font-9",
      "confidence": 0.95,
      "lineHeight": "15.4px",
      "letterSpacing": "0.3px"
    }
  ]
}
```

### 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": "#FFFFFF",
      "cssValue": "rgb(255, 255, 255)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 71,
      "sourceId": "color-1"
    },
    {
      "value": "#1D1D1D",
      "cssValue": "lab(12.7397 0.00464916 -0.000274181 / 0.1)",
      "alpha": 0.10196078431372549,
      "appliedAs": [
        "background"
      ],
      "occurrences": 10,
      "sourceId": "color-2"
    },
    {
      "value": "#212121",
      "cssValue": "rgb(33, 33, 33)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 158,
      "sourceId": "color-3"
    },
    {
      "value": "#000000",
      "cssValue": "color(srgb 0 0 0 / 0.16)",
      "alpha": 0.1607843137254902,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-5"
    },
    {
      "value": "#FF8D5C",
      "cssValue": "color(srgb 1 0.552941 0.360784)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 3,
      "sourceId": "color-9"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#212121",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(33, 33, 33); AI role: Dark grey (#212121) used for primary typography on light backgrounds to ensure high contrast.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#FF8D5C",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-9: computed color(srgb 1 0.552941 0.360784); AI role: A vibrant peach/orange (#FF8D5C) used for the main call-to-action buttons to draw attention.",
      "sampleId": "color-9",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for product UI mockups and inner cards resting on top of gradient backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#FBF8F0",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-4: computed rgb(251, 248, 240); AI role: A warm off-white (#FBF8F0) used as the underlying background color for many text-heavy sections.",
      "sampleId": "color-4",
      "confidence": 0.85
    },
    {
      "hex": "#3C3C3C",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-16: computed color(srgb 0.235294 0.235294 0.235294); AI role: A dark grey (#3C3C3C) applied as a thin border for secondary 'Learn more' outline buttons.",
      "sampleId": "color-16",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons use fully rounded pill shapes (likely 50vh/999px). Content cards and feature blocks use large border radii (estimated 24px-32px).",
  "density": "Low density. The layout embraces negative space, prioritizing the impact of typography and imagery over cramming information.",
  "evidence": "Observed across the screenshots: pill buttons in the nav and below sections, expansive padding around the 56.8px headings, and soft rounded rectangles containing the product UI mockups.",
  "borderStyle": "Borders are rarely used for structural separation, relying instead on soft background color changes. When used (e.g., on secondary buttons), they are solid, thin (1px), and high contrast.",
  "buttonStyle": "Pill-shaped with uppercase monospaced text. Primary buttons are solid bright orange, while secondary buttons are transparent with a thin dark border.",
  "cornerStyle": "Distinctively soft and rounded, avoiding sharp angles almost entirely except for some internal UI mockups.",
  "contentWidth": "Mixed; hero and background imagery are full-bleed edge-to-edge, while text and card grid content is constrained to a centered maximum width.",
  "spacingRhythm": "Generous vertical spacing between major sections, with substantial padding within content cards to create a relaxed, breathable reading experience."
}
```

### Reconstruction specification

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

- Root: 1440×1267px; flex; padding {"top":"0px","right":"0px","bottom":"0px","left":"0px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 11.4, 15.4, 40px.
- Representative content widths: 1230, 1128, 1017, 1001, 600, 566, 315px.
- Layout containers: 3; cards/surfaces: 2; media elements: 3; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 1000,
      "pageHeight": 8219
    }
  },
  "container": {
    "size": "1440×1267px",
    "position": "x 0px, y 0px",
    "display": "flex",
    "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(255, 255, 255)",
    "radius": "0px",
    "border": "0px none rgb(33, 33, 33)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      11.4,
      15.4,
      40
    ],
    "representativeContentWidthsPx": [
      1230,
      1128,
      1017,
      1001,
      600,
      566,
      315
    ]
  },
  "columns": [
    {
      "element": "nav · For BrandsFor BrandsEnterpriseEnterpriseCase StudiesCase StudiesAboutAboutCareersCareerscreate a sce",
      "size": "1230×90px",
      "position": "x 176px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal 15.4px"
    },
    {
      "element": "ul · For BrandsFor BrandsEnterpriseEnterpriseCase StudiesCase StudiesAboutAboutCareersCareers",
      "size": "1001×90px",
      "position": "x 176px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "40px"
    },
    {
      "element": "section · We’re digitizing the sense of smell, for human health and happiness.A note from ourfounder & CEOTo t",
      "size": "1440×1267px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "video · u-video w-variant-8157ca33-45d5-df1a-bd25-894298c8e117",
      "size": "1128×1128px",
      "position": "x 156px, y -266px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px none rgb(33, 33, 33)",
      "shadow": "none",
      "background": "lab(12.7397 0.00464916 -0.000274181 / 0.1)"
    },
    {
      "element": "video · u-video w-variant-db26956a-7929-76af-05b0-02971cbab2f4",
      "size": "600×600px",
      "position": "x 1113px, y 481px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px none rgb(33, 33, 33)",
      "shadow": "none",
      "background": "lab(12.7397 0.00464916 -0.000274181 / 0.1)"
    }
  ],
  "surfaces": {
    "radii": [
      "1440px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "video · u-video w-variant-8157ca33-45d5-df1a-bd25-894298c8e117",
    "size": "1128×1128px",
    "position": "x 156px, y -266px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/69d56de91b59477a7776fadd%2F69ddf95411c5c894b8cdd204_OSMO_Web_Breathing%20Bubble%20Green_mp4.mp4"
  },
  {
    "element": "video · u-video w-variant-db26956a-7929-76af-05b0-02971cbab2f4",
    "size": "600×600px",
    "position": "x 1113px, y 481px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.prod.website-files.com/69d56de91b59477a7776fadd%2F69de0adbce69e1d2029800e1_about-hero-1_mp4.mp4"
  },
  {
    "element": "svg · svg",
    "size": "127×28px",
    "position": "x 34px, y 31px",
    "aspectRatio": 4.5,
    "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
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-07T06:49:38.582Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 0,
    "bottom": 1000,
    "pageHeight": 8219
  },
  "root": {
    "id": "ld-171",
    "tag": "section",
    "role": null,
    "label": "We’re digitizing the sense of smell, for human health and happiness.A note from ourfounder & CEOTo t",
    "rect": {
      "x": 0,
      "y": 0,
      "width": 1440,
      "height": 1267
    },
    "display": "flex",
    "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(255, 255, 255)",
    "radius": "0px",
    "border": "0px none rgb(33, 33, 33)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "gapsPx": [
      11.4,
      15.4,
      40
    ],
    "representativeContentWidthsPx": [
      1230,
      1128,
      1017,
      1001,
      600,
      566,
      315
    ]
  },
  "columns": [
    {
      "id": "ld-48",
      "tag": "nav",
      "role": null,
      "label": "For BrandsFor BrandsEnterpriseEnterpriseCase StudiesCase StudiesAboutAboutCareersCareerscreate a sce",
      "rect": {
        "x": 176,
        "y": 0,
        "width": 1230,
        "height": 90
      },
      "display": "flex",
      "columns": null,
      "direction": "row",
      "gap": "normal 15.4px"
    },
    {
      "id": "ld-49",
      "tag": "ul",
      "role": "list",
      "label": "For BrandsFor BrandsEnterpriseEnterpriseCase StudiesCase StudiesAboutAboutCareersCareers",
      "rect": {
        "x": 176,
        "y": 0,
        "width": 1001,
        "height": 90
      },
      "display": "flex",
      "columns": null,
      "direction": "row",
      "gap": "40px"
    },
    {
      "id": "ld-171",
      "tag": "section",
      "role": null,
      "label": "We’re digitizing the sense of smell, for human health and happiness.A note from ourfounder & CEOTo t",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 1267
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    }
  ],
  "cards": [
    {
      "id": "ld-199",
      "tag": "video",
      "role": null,
      "label": "u-video w-variant-8157ca33-45d5-df1a-bd25-894298c8e117",
      "rect": {
        "x": 156,
        "y": -266,
        "width": 1128,
        "height": 1128
      },
      "radius": "0px",
      "border": "0px none rgb(33, 33, 33)",
      "shadow": "none",
      "background": "lab(12.7397 0.00464916 -0.000274181 / 0.1)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    },
    {
      "id": "ld-221",
      "tag": "video",
      "role": null,
      "label": "u-video w-variant-db26956a-7929-76af-05b0-02971cbab2f4",
      "rect": {
        "x": 1113,
        "y": 481,
        "width": 600,
        "height": 600
      },
      "radius": "0px",
      "border": "0px none rgb(33, 33, 33)",
      "shadow": "none",
      "background": "lab(12.7397 0.00464916 -0.000274181 / 0.1)",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ]
    }
  ],
  "surfaces": {
    "radii": [
      "1440px"
    ],
    "borders": [],
    "shadows": []
  },
  "media": [
    {
      "id": "ld-199",
      "tag": "video",
      "role": null,
      "label": "u-video w-variant-8157ca33-45d5-df1a-bd25-894298c8e117",
      "rect": {
        "x": 156,
        "y": -266,
        "width": 1128,
        "height": 1128
      },
      "aspectRatio": 1,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://cdn.prod.website-files.com/69d56de91b59477a7776fadd%2F69ddf95411c5c894b8cdd204_OSMO_Web_Breathing%20Bubble%20Green_mp4.mp4",
        "poster": "",
        "duration": 4.066667
      }
    },
    {
      "id": "ld-221",
      "tag": "video",
      "role": null,
      "label": "u-video w-variant-db26956a-7929-76af-05b0-02971cbab2f4",
      "rect": {
        "x": 1113,
        "y": 481,
        "width": 600,
        "height": 600
      },
      "aspectRatio": 1,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://cdn.prod.website-files.com/69d56de91b59477a7776fadd%2F69de0adbce69e1d2029800e1_about-hero-1_mp4.mp4",
        "poster": "",
        "duration": 3.7
      }
    },
    {
      "id": "ld-46",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 34,
        "y": 31,
        "width": 127,
        "height": 28
      },
      "aspectRatio": 4.5,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 34,
    "cards": 2,
    "media": 3,
    "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 hero section inspired by the design evidence titled “The leadership behind Osmo”.

Purpose: hero section from the About page of Osmo.

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

Visual signature to preserve at the pattern level: rgb(255, 255, 255) with 1440×1267px root; flex. Inspect the crop for image and content hierarchy.

Components: Navigation Bar, Hero With Background Imagery, Primary Button, Outline Button, Feature Card, Product UI, Stat Block, Testimonial Card, FAQ Accordion, Footer, Soft Gradient Containers, Split Layout With Sticky Media.

Style direction: editorial, soft, minimal, gradient, glassmorphic.

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

Typography evidence: {"role":"display","size":"76px","family":"Tenor Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: Tenor Sans at 76px, used for the large prominent numbers in the stats section.","sampleId":"font-10","confidence":0.9,"lineHeight":"76px","letterSpacing":"-2.3px"} {"role":"heading","size":"56.8px","family":"Tenor Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Tenor Sans at 56.8px, used for primary section headlines to establish an elegant tone.","sampleId":"font-4","confidence":0.95,"lineHeight":"56.8px","letterSpacing":"-1.7px"} {"role":"body","size":"18.8px","family":"Dm Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: Dm Sans at 18.8px, providing clean and readable body copy across various sections.","sampleId":"font-5","confidence":0.9,"lineHeight":"26.3px","letterSpacing":"normal"} {"role":"mono","size":"15.4px","family":"Dm Mono","source":"computed","traits":"uppercase","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Dm Mono at 15.4px, used consistently in uppercase for buttons, navigation links, and small labels to provide a technical contrast.","sampleId":"font-9","confidence":0.95,"lineHeight":"15.4px","letterSpacing":"0.3px"}

Color evidence: {"hex":"#212121","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(33, 33, 33); AI role: Dark grey (#212121) used for primary typography on light backgrounds to ensure high contrast.","sampleId":"color-3","confidence":0.95} {"hex":"#FF8D5C","name":"primary action","role":"primary-action","source":"computed","evidence":"color-9: computed color(srgb 1 0.552941 0.360784); AI role: A vibrant peach/orange (#FF8D5C) used for the main call-to-action buttons to draw attention.","sampleId":"color-9","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for product UI mockups and inner cards resting on top of gradient backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#FBF8F0","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(251, 248, 240); AI role: A warm off-white (#FBF8F0) used as the underlying background color for many text-heavy sections.","sampleId":"color-4","confidence":0.85} {"hex":"#3C3C3C","name":"border","role":"border","source":"computed","evidence":"color-16: computed color(srgb 0.235294 0.235294 0.235294); AI role: A dark grey (#3C3C3C) applied as a thin border for secondary 'Learn more' outline buttons.","sampleId":"color-16","confidence":0.8}

Typography measured inside this section: {"id":"font-2","family":"Tenor Sans","fontStack":"\"Tenor Sans\", Arial, sans-serif","weight":"400","size":"43.2px","lineHeight":"43.2px","letterSpacing":"-1.3px","traits":"Regular","count":10,"contexts":[{"tag":"span","text":"Introducing Osmo Studio","top":3383,"property":"font"},{"tag":"h2","text":"Osmo combines AI, neuroscience, and perfumery expertise to teach computers how to read, write, and m","top":579,"property":"font"},{"tag":"h2","text":"Partner with us to launch your fragrance.","top":4182,"property":"font"}]} {"id":"font-4","family":"Tenor Sans","fontStack":"\"Tenor Sans\", Arial, sans-serif","weight":"400","size":"56.8px","lineHeight":"56.8px","letterSpacing":"-1.7px","traits":"Regular","count":3,"contexts":[{"tag":"h2","text":"We turn the science of scent into a platform for creativity.","top":451,"property":"font"},{"tag":"h2","text":"Create your first scent.","top":12310,"property":"font"},{"tag":"h2","text":"Stay in touch.","top":12894,"property":"font"}]} {"id":"font-5","family":"Dm Sans","fontStack":"\"Dm Sans\", Arial, sans-serif","weight":"400","size":"18.8px","lineHeight":"26.3px","letterSpacing":"normal","traits":"Regular","count":25,"contexts":[{"tag":"div","text":"Skip to main content","top":16,"property":"font"},{"tag":"p","text":"Every fragrance you create in Osmo Studio is custom-formulated and built specifically for your brand","top":4278,"property":"font"},{"tag":"strong","text":"The foundation behind everything we build—from Osmo Studio to our enterprise solutions—Olfactory Int","top":7422,"property":"font"}]} {"id":"font-8","family":"Dm Mono","fontStack":"\"Dm Mono\", Arial, sans-serif","weight":"400","size":"13.4px","lineHeight":"13.4px","letterSpacing":"0.3px","traits":"uppercase","count":6,"contexts":[{"tag":"div","text":"For Brands","top":36,"property":"font"},{"tag":"div","text":"Enterprise","top":36,"property":"font"},{"tag":"div","text":"Case Studies","top":36,"property":"font"}]} {"id":"font-9","family":"Dm Mono","fontStack":"\"Dm Mono\", Arial, sans-serif","weight":"400","size":"15.4px","lineHeight":"15.4px","letterSpacing":"0.3px","traits":"uppercase","count":27,"contexts":[{"tag":"div","text":"create a scent","top":37,"property":"font"},{"tag":"div","text":"Create a Scent","top":3574,"property":"font"},{"tag":"div","text":"Learn more","top":7639,"property":"font"}]}

Colors measured inside this section: {"id":"color-1","hex":"#FFFFFF","alpha":1,"cssValue":"rgb(255, 255, 255)","count":71,"contexts":[{"tag":"body","text":"::before, ::after { box-sizing: border-box; } .w-embed:before, .w-embed:after, .w-richtext:before, .","top":0,"property":"background"},{"tag":"a","text":"Skip to main content","top":8,"property":"control-background"},{"tag":"section","text":"document.addEventListener(\"DOMContentLoaded\", function () { gsap.registerPlugin(ScrollTrigger); cons","top":0,"property":"background"}]} {"id":"color-2","hex":"#1D1D1D","alpha":0.10196078431372549,"cssValue":"lab(12.7397 0.00464916 -0.000274181 / 0.1)","count":10,"contexts":[{"tag":"div","text":"","top":3020,"property":"background"},{"tag":"video","text":"","top":0,"property":"background"}]} {"id":"color-3","hex":"#212121","alpha":1,"cssValue":"rgb(33, 33, 33)","count":158,"contexts":[{"tag":"div","text":"Skip to main content","top":16,"property":"text"},{"tag":"path","text":"","top":31,"property":"svg-fill"},{"tag":"span","text":"Introducing Osmo Studio","top":3383,"property":"text"}]} {"id":"color-5","hex":"#000000","alpha":0.1607843137254902,"cssValue":"color(srgb 0 0 0 / 0.16)","count":1,"contexts":[{"tag":"div","text":"","top":0,"property":"background"}]} {"id":"color-9","hex":"#FF8D5C","alpha":1,"cssValue":"color(srgb 1 0.552941 0.360784)","count":3,"contexts":[{"tag":"div","text":"create a scent","top":17,"property":"background"}]}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":0,"width":1440,"height":1267},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[11.4,15.4,40],"representativeContentWidthsPx":[1230,1128,1017,1001,600,566,315]}; surfaces {"radii":["1440px"],"borders":[],"shadows":[]}; media [{"tag":"video","rect":{"x":156,"y":-266,"width":1128,"height":1128},"aspectRatio":1,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"video","rect":{"x":1113,"y":481,"width":600,"height":600},"aspectRatio":1,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":34,"y":31,"width":127,"height":28},"aspectRatio":4.5,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

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.