# Osmo — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.osmo.ai/
Captured: 2026-10-07
CSS measured: 2026-10-07T06:41:41.661Z at 1440×1000 — https://www.osmo.ai/
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

The website presents an elegant, editorial, and soft aesthetic, heavily utilizing blurred, warm-toned gradients and high-quality photography or video backgrounds. The layout is spacious with a low information density, allowing the serif headings to stand out. UI elements feature large border radii, creating soft, card-like containers and pill-shaped buttons. Glassmorphism is used strategically over photographic backgrounds to maintain legibility while preserving visual context.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: AI, Software, Agency
- Styles: editorial, soft, minimal, gradient, glassmorphic
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Tenor Sans — weight 400; size 76px; line-height 76px; tracking -2.3px; Regular (90% role confidence, computed values)
- Heading: Tenor Sans — weight 400; size 56.8px; line-height 56.8px; tracking -1.7px; Regular (95% role confidence, computed values)
- Body: Dm Sans — weight 400; size 18.8px; line-height 26.3px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Dm Mono — weight 400; size 15.4px; line-height 15.4px; tracking 0.3px; uppercase (95% role confidence, computed values)

## Functional palette

- Text — text #212121: color-3: computed rgb(33, 33, 33); AI role: Dark grey (#212121) used for primary typography on light backgrounds to ensure high contrast. (95% role confidence, computed values)
- Primary Action — primary action #FF8D5C: 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. (95% role confidence, computed values)
- Surface — surface #FFFFFF: 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. (90% role confidence, computed values)
- Canvas — canvas #FBF8F0: 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. (85% role confidence, computed values)
- Border — border #3C3C3C: 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. (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": "Tenor Sans",
    "fontStack": "\"Tenor Sans\", Arial, sans-serif",
    "weight": "400",
    "size": "23.6px",
    "lineHeight": "23.6px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "span",
        "text": "Imagine",
        "top": 4445,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sample",
        "top": 4485,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Iterate",
        "top": 4525,
        "property": "font"
      }
    ]
  },
  {
    "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-3",
    "family": "Tenor Sans",
    "fontStack": "\"Tenor Sans\", Arial, sans-serif",
    "weight": "400",
    "size": "32.4px",
    "lineHeight": "30.8px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "Customize every element of your fragrance.",
        "top": 5387,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Refine your fragrance through guided iteration.",
        "top": 6097,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Launch market-winning fragrances at the speed of culture.",
        "top": 6770,
        "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-6",
    "family": "Dm Sans",
    "fontStack": "\"Dm Sans\", Arial, sans-serif",
    "weight": "400",
    "size": "15.1px",
    "lineHeight": "21.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "For the first time, you can turn any word, image, or idea into an unforgettable, custom fragrance fo",
        "top": 3451,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Describe your ideal fragrance using text, images, or simply your imagination. Our proprietary Olfact",
        "top": 4507,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "We formulate three custom fragrances based on your input and ship physical 2mL samples to your door ",
        "top": 4547,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Dm Mono",
    "fontStack": "\"Dm Mono\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Alice Panikian, Founder, Kindred",
        "top": 9910,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Tanja Deurloo, Founder & CEO, Annindriya Amsterdam",
        "top": 9849,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Jill Zachman, Founder, Tilted Chair",
        "top": 9787,
        "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"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Tenor Sans",
    "fontStack": "\"Tenor Sans\", Arial, sans-serif",
    "weight": "400",
    "size": "76px",
    "lineHeight": "76px",
    "letterSpacing": "-2.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "250K",
        "top": 7997,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3B",
        "top": 7997,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "5M",
        "top": 7971,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Dm Mono",
    "fontStack": "\"Dm Mono\", Arial, sans-serif",
    "weight": "400",
    "size": "11.4px",
    "lineHeight": "11.4px",
    "letterSpacing": "1.1px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 4448,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 4488,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 4528,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Tenor Sans",
    "fontStack": "\"Tenor Sans\", Arial, sans-serif",
    "weight": "400",
    "size": "16.5px",
    "lineHeight": "24.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "bloom.jpg",
        "top": 3305,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Notes: Woody",
        "top": 3584,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Green Field",
        "top": 4014,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "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-4",
    "hex": "#FBF8F0",
    "alpha": 1,
    "cssValue": "rgb(251, 248, 240)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Customize every element of your fragrance.Adjust notes, specify clean-beauty requirements, add or ex",
        "top": 5110,
        "property": "background"
      }
    ]
  },
  {
    "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-6",
    "hex": "#FFF4EE",
    "alpha": 1,
    "cssValue": "rgb(255, 244, 238)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Frequently asked questionsWhen using Osmo Studio are the fragrance formulas compliant & safe? Yes, a",
        "top": 10752,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFA178",
    "alpha": 1,
    "cssValue": "rgb(255, 161, 120)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#212121",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(33, 33, 33, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "function initTestimonialsSwiper() { const swiperGroups = document.querySelectorAll(\"[data-swiper-gro",
        "top": 9450,
        "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"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFC8AF",
    "alpha": 1,
    "cssValue": "rgb(255, 200, 175)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "3BMolecules mappedMolecules mapped",
        "top": 7753,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFDDCD",
    "alpha": 1,
    "cssValue": "rgb(255, 221, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "5MHuman annotations of smell recordedHuman annotations of smell recorded",
        "top": 7753,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFDDCC",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(255, 221, 205, 0.06)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "bloom.jpg",
        "top": 3276,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFDCCD",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(255, 221, 205, 0.14)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10848,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 11560,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFE6CC",
    "alpha": 0.0392156862745098,
    "cssValue": "color(srgb 1 0.866667 0.803922 / 0.0392157)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Create a Scent",
        "top": 12468,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#1F1F1F",
    "alpha": 0.1607843137254902,
    "cssValue": "rgba(33, 33, 33, 0.16)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10034,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#3C3C3C",
    "alpha": 1,
    "cssValue": "color(srgb 0.235294 0.235294 0.235294)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Learn more",
        "top": 7617,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#232323",
    "alpha": 0.2,
    "cssValue": "rgba(33, 33, 33, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4446,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major sections, with substantial padding within content cards to create a relaxed, breathable reading experience.
- Corner style: Distinctively soft and rounded, avoiding sharp angles almost entirely except for some internal UI mockups.
- Radius: Buttons use fully rounded pill shapes (likely 50vh/999px). Content cards and feature blocks use large border radii (estimated 24px-32px).
- Borders: 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.
- Buttons: Pill-shaped with uppercase monospaced text. Primary buttons are solid bright orange, while secondary buttons are transparent with a thin dark border.
- Content width: Mixed; hero and background imagery are full-bleed edge-to-edge, while text and card grid content is constrained to a centered maximum width.
- 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.

## Sections

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

1. **Hero — Science of Scent Hero** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with full-bleed atmospheric imagery, primary brand statement, integrated navigation, CTA, and scroll cue. The composition has a clear ending before the next content block.
   Capture: 1440×1005px; page bounds 0–1005px of 13672px; source section ID: `33d8d858-469d-473e-a349-df8d76462b7f`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/483b6a19d20e71c45d678783c111b8cabf9446bb3c8c41c9ab0dc1081e327841/33d8d858-469d-473e-a349-df8d76462b7f.webp
   SECTION.md v3.2: `33d8d858-469d-473e-a349-df8d76462b7f` (deterministic evidence; editorial review pending)
2. **Hero — The leadership behind Osmo** (About)
   Opening hero composition from About, organized around “The leadership behind Osmo”.
   Capture: 1440×1000px; page bounds 0–1000px of 8219px; source section ID: `8e4efbc9-bb5e-4023-b6dd-62618598c555`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f23f67f9397b6b25daf4e99d28d387ecd9b1323efdd629fcb2cb85f8eed169ec/section_crop-8e4efbc9-2026-10-07T06-49-40-780Z.webp
   SECTION.md v3.2: `8e4efbc9-bb5e-4023-b6dd-62618598c555` (deterministic evidence; editorial review pending)
3. **Features — Customize every element of your fragrance.** (Home)
   Reusable feature composition from Home, organized around “Customize every element of your fragrance.”.
   Capture: 1440×2580px; page bounds 4796–7376px of 13672px; source section ID: `ca435b38-23fc-4e14-bda2-b5b4509cd1eb`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3428e8176056543803e2b056e3a585f9d8c36d2e0e878cabc600e65ec9add6d0/section_crop-ca435b38-2026-10-07T06-41-51-086Z.webp
   SECTION.md v3.2: `ca435b38-23fc-4e14-bda2-b5b4509cd1eb` (deterministic evidence; editorial review pending)
4. **Features — Recent recognition** (Home)
   Reusable feature composition from Home, organized around “Recent recognition”.
   Capture: 1440×534px; page bounds 10218–10752px of 13672px; source section ID: `adcc8187-eec0-4c6c-8588-b2da0f6ea650`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/b3cebf9bd95aa60a5b28e25250233762355ac197ca5ce2eb4f42580bf8e4038e/section_crop-adcc8187-2026-10-07T06-41-55-280Z.webp
   SECTION.md v3.2: `adcc8187-eec0-4c6c-8588-b2da0f6ea650` (deterministic evidence; editorial review pending)
5. **Features — The latest from Osmo** (Home)
   Reusable feature composition from Home, organized around “The latest from Osmo”.
   Capture: 1440×744px; page bounds 11440–12184px of 13672px; source section ID: `c33fe804-461e-4413-aa96-69b78085f57d`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f00b5f0deff61850123791d217ddb0d665d866629ba1192895040c3ddc3f013b/section_crop-c33fe804-2026-10-07T06-41-56-994Z.webp
   SECTION.md v3.2: `c33fe804-461e-4413-aa96-69b78085f57d` (deterministic evidence; editorial review pending)
6. **Footer — Osmo Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Osmo Footer”.
   Capture: 1440×1000px; page bounds 12672–13672px of 13672px; source section ID: `e5ee1a03-ba32-449b-8c58-7ef0196fbca2`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/4c4a41990eed46448ce90bb42816c9747b117a8aea532da76a9e22e5bf1f467a/section_crop-e5ee1a03-2026-10-07T06-41-59-831Z.webp
   SECTION.md v3.2: `e5ee1a03-ba32-449b-8c58-7ef0196fbca2` (deterministic evidence; editorial review pending)
7. **Founder — Founder & CEO Note** (About)
   AI suggestion (96% confidence): Complete founder-letter component with a clear heading, personal narrative, signature, attribution, and supporting abstract imagery.
   Capture: 1440×588px; page bounds 756–1344px of 8219px; source section ID: `b814fb7b-21a5-4ed2-84c8-eca54f6e858c`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/ea3fcbc66ab25309f93b9a3cfc877b6f9cfbb50de0f91f295132f0039637e078/b814fb7b-21a5-4ed2-84c8-eca54f6e858c.webp
   SECTION.md v3.2: `b814fb7b-21a5-4ed2-84c8-eca54f6e858c` (deterministic evidence; editorial review pending)
8. **Stats — Olfactory Science Scale** (About)
   AI suggestion (98% confidence): Self-contained statistics section with a centered value statement and a complete four-card metrics row using distinctive icons and color treatment.
   Capture: 1440×609px; page bounds 1398–2007px of 8219px; source section ID: `123f32f6-9a98-4df9-88e5-b0cb95d3ef43`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/8b20226c5a7f6cef450cd1eee946b993c9709c69e3dd8bdef100a8f5018904ac/123f32f6-9a98-4df9-88e5-b0cb95d3ef43.webp
   SECTION.md v3.2: `123f32f6-9a98-4df9-88e5-b0cb95d3ef43` (deterministic evidence; editorial review pending)
9. **Team — Leadership Behind Osmo** (About)
   AI suggestion (91% confidence): Complete team-directory section with an introductory heading and four clearly bounded accordion groups for leadership, perfumery, directors, and advisors.
   Capture: 1440×621px; page bounds 3074–3695px of 8219px; source section ID: `8ff259ff-2c98-431f-aadc-2c5ae0d6c5db`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/c5b78dc61b3652f244abd4a18418b0194a147389c384f53dcc9e0edfdd5de373/8ff259ff-2c98-431f-aadc-2c5ae0d6c5db.webp
   SECTION.md v3.2: `8ff259ff-2c98-431f-aadc-2c5ae0d6c5db` (deterministic evidence; editorial review pending)
10. **Feature Grid — Our Values** (About)
   AI suggestion (98% confidence): Complete three-column values grid with distinctive icons, titled principles, supporting copy, and a clearly defined glowing container.
   Capture: 1440×591px; page bounds 3779–4370px of 8219px; source section ID: `5a48c6ed-e856-4e81-95bc-3b31e5882dbf`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/79d26f6974ad32ee1e6053799257128def38492006a500c266bb81d79bb059c5/5a48c6ed-e856-4e81-95bc-3b31e5882dbf.webp
   SECTION.md v3.2: `5a48c6ed-e856-4e81-95bc-3b31e5882dbf` (deterministic evidence; editorial review pending)
11. **Process — Partner with us to launch your fragrance** (Home)
   AI suggestion (98% confidence): Complete split-layout process section pairing a four-step fragrance launch workflow with a large atmospheric product-generation visual; both its beginning and ending are clearly visible.
   Capture: 1440×822px; page bounds 4004–4826px of 13672px; source section ID: `983d4d8a-af7a-42fe-a0c7-0c96943b3388`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/6d051e58dfca503ff96b736624cd15d5cbdcd38c339a156f151a1df21d2c37de/983d4d8a-af7a-42fe-a0c7-0c96943b3388.webp
   SECTION.md v3.2: `983d4d8a-af7a-42fe-a0c7-0c96943b3388` (deterministic evidence; editorial review pending)
12. **CTA — Join Our Team Careers Banner** (About)
   AI suggestion (98% confidence): Complete recruitment CTA with a distinctive full-width warm photographic backdrop, concise employer pitch, and clear Careers action.
   Capture: 1440×636px; page bounds 6733–7369px of 8219px; source section ID: `2c09d13f-c7ce-4e7f-a9fe-467d5ad99615`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/5b09d31de1b90350ab0bcb93d83c06c1c2cae32ca0edb1329d2c66c795932ee4/2c09d13f-c7ce-4e7f-a9fe-467d5ad99615.webp
   SECTION.md v3.2: `2c09d13f-c7ce-4e7f-a9fe-467d5ad99615` (deterministic evidence; editorial review pending)
13. **Stats — Olfactory Intelligence Platform Stats** (Home)
   AI suggestion (98% confidence): Complete, self-contained section introducing the OI technology, with supporting copy, a Learn More CTA, and a cohesive four-card metrics row.
   Capture: 1440×858px; page bounds 7324–8182px of 13672px; source section ID: `144b7f10-3075-4c99-bd4b-1199919aac70`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/982f143e11729e9d98e7c6b852be388c7d22fceeb05d4ac4ace9f3ebad145086/144b7f10-3075-4c99-bd4b-1199919aac70.webp
   SECTION.md v3.2: `144b7f10-3075-4c99-bd4b-1199919aac70` (deterministic evidence; editorial review pending)
14. **Footer — Stay in Touch Footer** (About)
   AI suggestion (99% confidence): Complete, substantial dark footer containing navigation groups, inquiry contacts, social links, brand mark, and legal links.
   Capture: 1440×828px; page bounds 7372–8200px of 8219px; source section ID: `d7c070ba-c206-4292-95ba-50d4bbf4faf3`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/d45fd1be4699fd9fc7b0c3e028d313f2933c841c7be202f23c94b96e7a9b126d/d7c070ba-c206-4292-95ba-50d4bbf4faf3.webp
   SECTION.md v3.2: `d7c070ba-c206-4292-95ba-50d4bbf4faf3` (deterministic evidence; editorial review pending)
15. **Feature Grid — Custom Fragrance Development Benefits** (Home)
   AI suggestion (98% confidence): Complete six-item feature grid with a clear headline, consistent icons, benefit titles, supporting copy, and a contained visual boundary.
   Capture: 1440×906px; page bounds 8292–9198px of 13672px; source section ID: `8c030860-213f-4480-8505-a1c178456e40`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/367f759ab8df63e4e67909bc4db92c2b6d99cb86b604deefd0b792f9206aa64d/8c030860-213f-4480-8505-a1c178456e40.webp
   SECTION.md v3.2: `8c030860-213f-4480-8505-a1c178456e40` (deterministic evidence; editorial review pending)
16. **Testimonials — Brand Leader Testimonial** (Home)
   AI suggestion (97% confidence): Self-contained testimonial showcase with section heading, scenic full-width backdrop, prominent glass quote panel, attribution, and carousel controls.
   Capture: 1440×972px; page bounds 9231–10203px of 13672px; source section ID: `094d6f75-e5cc-476f-b5a9-24145582b761`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/96778a442804e4bc812d8f6d3e0b481a20027cde5504cc59a8e24d19d5cafdd2/094d6f75-e5cc-476f-b5a9-24145582b761.webp
   SECTION.md v3.2: `094d6f75-e5cc-476f-b5a9-24145582b761` (deterministic evidence; editorial review pending)
17. **FAQ — Frequently Asked Questions** (Home)
   AI suggestion (98% confidence): Complete standalone FAQ module with a clear heading, five accordion rows, and a contained rounded background.
   Capture: 1440×690px; page bounds 10733–11423px of 13672px; source section ID: `4803b446-320b-42a8-804a-eee88dedef35`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/41867e898f0a48fce58693fd6a62cc4cd917e2dc92176a8b3b7ced41131f1f57/4803b446-320b-42a8-804a-eee88dedef35.webp
   SECTION.md v3.2: `4803b446-320b-42a8-804a-eee88dedef35` (deterministic evidence; editorial review pending)
18. **CTA — Create Your First Scent** (Home)
   AI suggestion (97% confidence): Complete conversion banner combining an immersive botanical image, concise value proposition, supporting copy, and a prominent action button.
   Capture: 1440×648px; page bounds 12164–12812px of 13672px; source section ID: `7b7fd6d5-a852-4ea2-b64a-6f107f2abcac`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/c05b42a89277665392818e42ef994bbc876fa63ef851a8be3552dd51c40c556b/7b7fd6d5-a852-4ea2-b64a-6f107f2abcac.webp
   SECTION.md v3.2: `7b7fd6d5-a852-4ea2-b64a-6f107f2abcac` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/515d8f8d172b54ca8073644e9ac905c21c4d4100887991ab6b50712241c9d310/desktop_full-15e05599-2026-10-07T06-41-41-675Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/b05f971d83cb0f2f5d6803e89a59728ca66c0993b093ff009f93f495fbcc9097/mobile_full-15e05599-2026-10-07T06-42-32-752Z.webp
- Open Graph image: Not captured
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/c96ab239b5ca20c48bb60334d68797684c82fe3a72d31d63cf750069b1d582de/motion-1791356778304.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2614fbc5eed9d9fe099d8266d0d67318630689671eac2acde5d341704ece5620/motion-poster-1791356778304.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero 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

## Quality rubric

Overall: 58.3/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Osmo delivers a polished, thematically coherent editorial-soft aesthetic with a consistent type/color/spacing system and genuine content-to-design integration (real product UI inside feature cards), but its motion vocabulary is repetitive and its overall structure and visual techniques (gradient cards, glassmorphism, pill buttons, stat rows) closely track the current AI-startup marketing template, keeping originality and motion variety below the threshold needed for a higher tier.

- Typography (15%): 64 — A clear three-part type system (Tenor Sans serif for headings/display, DM Sans for body, DM Mono uppercase for labels/buttons) is applied consistently across sections, with deliberate tight negative tracking on large serif sizes (56.8px, 76px) to create an editorial tone. Hierarchy is legible and sizes scale sensibly (23.6→32.4→43.2→56.8→76px). However, the pairing itself is a common contemporary SaaS convention (serif display + mono labels) rather than a distinctive typographic idea.
- Color (10%): 62 — A warm, narrow palette (off-white canvas #FBF8F0, near-black text #212121, peach/orange accent #FF8D5C with lighter tints #FFC8AF/#FFDDCD) is applied consistently and ties thematically to 'scent'. It is tasteful and legible, but the palette is safe and low-risk, staying within a single warm hue family without much tension or secondary color interest beyond the ocean-photo testimonial section.
- Layout (20%): 66 — Low-density, generously spaced sections combine full-bleed photographic/video moments with centered, width-constrained text and card grids. Recurring patterns—split text/sticky-media sections, soft gradient containers housing product UI, a four-up stat row, FAQ accordion, testimonial carousel—show a repeated, coherent spacing and radius system (large border radii, consistent card padding) across the full page length (13,672px). This is competent systemic layout, though the individual section types (hero, stats, split-feature, testimonial-over-photo, FAQ, footer) are familiar SaaS-marketing conventions rather than a structurally novel arrangement.
- Motion (20%): 56 — The hero uses a scroll-linked scale/reveal on the forest video, which is a reasonably crafted centerpiece. Beyond that, nearly every subsequent section relies on the same fade+translate-up entrance pattern (text, cards, footer columns), repeated at least five times per the observed moments. This is coherent but formulaic, a very common ScrollTrigger reveal technique seen broadly across contemporary sites, with no evidence of more varied interaction motion (hover states, cursor-based effects, parallax layering, or custom easing choices) beyond the single hero scrub.
- Originality (25%): 46 — The site adopts the now-standard 'AI startup' marketing template: full-bleed video hero, numbered-step split panel, soft gradient feature cards, four-stat row, glassmorphic testimonial-over-photo, FAQ accordion, dark footer. The thematic tie to scent (foggy forest, warm diffuse gradients suggesting aroma, product UI mockups for fragrance notes) provides some brand-specific flavor, and the gradient-container pattern applied to product UI is a nice touch, but the overall system is easily substitutable with other 2024-era AI SaaS sites (Linear/Webflow-adjacent aesthetics) and does not introduce hard-to-copy structural or interaction ideas.
- Content (10%): 66 — Content integration is handled well: the product's actual UI (note sliders, formula specs, sample-feedback inputs) is embedded directly inside the gradient cards to demonstrate real product functionality rather than abstract decoration, and photography (forest fog, beach golden hour) is thematically tied to the fragrance-creation narrative. Testimonials include specific attribution and the stat block ties large numbers to credibility claims. This is a solid, purposeful use of content within the design system.

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

## Curator notes

Misty forest photography and thin light text set a sensory, almost scentlike mood before the page shifts to warm coral and cream panels for the product mechanics. Orange data cards, dashboards, and quote blocks give the AI claims something concrete to point to, building trust as the page moves from feeling to proof.

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