# Odyssée — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.odysseeclinic.com.au/
Captured: 2026-10-10
CSS measured: 2026-10-10T04:51:01.309Z at 1440×1000 — https://www.odysseeclinic.com.au/
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

Odyssée Clinic uses a highly refined, editorial web design that evokes luxury and medical precision. The interface relies on full-bleed high-quality photography, minimal typography using a balanced pair of sans-serif and serif fonts, and a stark, warm off-white canvas. Motion design elements like scroll-triggered reveals and a unique rolling sphere animation create a polished, immersive storytelling experience.

## Classification

- Industry: health
- Site type: Landing
- Business model: Not identified
- Styles: editorial, minimal, luxury-medical
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: psTimes — weight 400; size 48px; line-height 48px; tracking normal; Regular (85% role confidence, computed values)
- Heading: psTimes — weight 400; size 18px; line-height 19.8px; tracking 0.4px; Regular (90% role confidence, computed values)
- Body: baselGrotesk — weight 400; size 14px; line-height 18.2px; tracking normal; Regular (90% role confidence, computed values)
- Mono: baselGrotesk — weight 400; size 12px; line-height 12px; tracking 0.4px; uppercase (80% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFCF8: color-1: computed rgb(255, 252, 248); AI role: The primary off-white background color used across the page (#FFFCF8). (95% role confidence, computed values)
- Text — text #1E305E: color-2: computed rgb(30, 48, 94); AI role: The dark blue used for primary typography and navigation text (#1E305E). (90% role confidence, computed values)
- Text — text #FFFFFF: color-4: computed rgb(255, 255, 255); AI role: White text used when overlaying dark imagery or sections (#FFFFFF). (85% 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": "baselGrotesk",
    "fontStack": "baselGrotesk, \"baselGrotesk Fallback\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 19,
    "contexts": [
      {
        "tag": "button",
        "text": "Menu",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book Consultation",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Consultation",
        "top": 14,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "An experience like no other",
        "top": 2885,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Bespoke treatment",
        "top": 2885,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Multi-modality efficiency",
        "top": 2885,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "19.8px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Medical aesthetics for timeless results.",
        "top": 511,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "baselGrotesk",
    "fontStack": "baselGrotesk, \"baselGrotesk Fallback\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 32,
    "contexts": [
      {
        "tag": "p",
        "text": "Clarity precedes creation. Begin your tailored journey with a bespoke plan guided by science, precis",
        "top": 2220,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "(1).",
        "top": 2883,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "(2).",
        "top": 2883,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "33.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 49,
    "contexts": [
      {
        "tag": "div",
        "text": "Every",
        "top": 4575,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "treatment",
        "top": 4575,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "at",
        "top": 4575,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "baselGrotesk",
    "fontStack": "baselGrotesk, \"baselGrotesk Fallback\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 49,
    "contexts": [
      {
        "tag": "div",
        "text": "B",
        "top": 4041,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "E",
        "top": 4041,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "S",
        "top": 4041,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "psTimes",
    "fontStack": "psTimes, \"psTimes Fallback\", serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 23,
    "contexts": [
      {
        "tag": "div",
        "text": "At",
        "top": 2040,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Odyssée,",
        "top": 2040,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "we",
        "top": 2040,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "baselGrotesk",
    "fontStack": "baselGrotesk, \"baselGrotesk Fallback\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 8641,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Terms of Use",
        "top": 8641,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Site by Nightjar",
        "top": 8641,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFCF8",
    "alpha": 1,
    "cssValue": "rgb(255, 252, 248)",
    "count": 5,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-M33W3S74\" height=\"0\" width=\"0\" style=\"d",
        "top": -42,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "MenuBook ConsultationMedical aesthetics for timeless results.TreatmentsConcernsAboutBook Consultatio",
        "top": -42,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Medical aesthetics for timeless results.TreatmentsConcernsAboutBook ConsultationMenu",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1E305E",
    "alpha": 1,
    "cssValue": "rgb(30, 48, 94)",
    "count": 139,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 13,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Menu",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Menu",
        "top": 0,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#28292A",
    "alpha": 1,
    "cssValue": "rgb(40, 41, 42)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7658,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 69,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 514,
        "property": "svg-fill"
      },
      {
        "tag": "h1",
        "text": "Medical aesthetics for timeless results.",
        "top": 511,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Treatments",
        "top": 500,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#E80A1C",
    "alpha": 1,
    "cssValue": "rgb(232, 10, 28)",
    "count": 1,
    "contexts": [
      {
        "tag": "aside",
        "text": "3:50PM NSWCurrently closed",
        "top": 8647,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1E325F",
    "alpha": 0.2,
    "cssValue": "oklab(0.320675 -0.00630422 -0.0848702 / 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2581,
        "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: Sparse and intentional, relying heavily on large margins and padding to create a sense of luxury and focus.
- Corner style: Sharp. Images are consistently unrounded.
- Radius: 0px
- Borders: Minimal, primarily using subtle 1px horizontal lines to separate certain sections (e.g., 'WHY ODYSSEE?' section).
- Buttons: Text-only with no visible boundaries; relies on typography and hover states (implied).
- Content width: Fluid full-width for imagery, constrained columns for text blocks to maintain readability.
- Density: Low density. Ample negative space allows individual visual and typographic elements to breathe.
- Evidence: Observations from document crops show large unbroken background areas, full-bleed images, and stark typographic hierarchies without bounding boxes.

## Sections

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

1. **Features — At Odyssée, we prioritise a personalised approach. Visit our Hunters…** (Home)
   Reusable feature composition from Home, organized around “At Odyssée, we prioritise a personalised approach. Visit our Hunters…”.
   Capture: 1440×311px; page bounds 2000–2311px of 9425px; source section ID: `f29fc18c-ba0b-462e-abea-ffbdbd692e94`; image: https://media.designdetails.io/library/0f267372ef537d4caa58579dc9e5d0457993fd35bfc52c323bf29bb9f8f2e7b8/section_crop-f29fc18c-2026-10-10T04-51-10-400Z.webp
   SECTION.md v3.2: `f29fc18c-ba0b-462e-abea-ffbdbd692e94` (deterministic evidence; editorial review pending)
2. **Features — Odyssée is founded upon a philosophy of integrity in our approach to…** (About)
   Reusable feature composition from About, organized around “Odyssée is founded upon a philosophy of integrity in our approach to…”.
   Capture: 1440×408px; page bounds 1024–1432px of 6697px; source section ID: `79e498dc-e363-4960-8ac7-1709426c867c`; image: https://media.designdetails.io/library/c003a05908b4a449fa1854efe58f1296bd34f4d00327d043d27faeebd22883dc/section_crop-79e498dc-2026-10-10T04-59-55-195Z.webp
   SECTION.md v3.2: `79e498dc-e363-4960-8ac7-1709426c867c` (deterministic evidence; editorial review pending)
3. **Features — WHY ODYSSÉE?** (Home)
   Reusable feature composition from Home, organized around “WHY ODYSSÉE?”.
   Capture: 1440×1000px; page bounds 2551–3551px of 9425px; source section ID: `cce9c923-815b-47c2-8639-b4c1dfda1961`; image: https://media.designdetails.io/library/ebf1261cf169d8d83f7d9910e3718162927b253d1fc55d4cf97a6cbbaa3dd5bd/section_crop-cce9c923-2026-10-10T04-51-11-835Z.webp
   SECTION.md v3.2: `cce9c923-815b-47c2-8639-b4c1dfda1961` (deterministic evidence; editorial review pending)
4. **Features — Your Odyssée Care Team** (About)
   Reusable feature composition from About, organized around “Your Odyssée Care Team”.
   Capture: 1440×1233px; page bounds 1552–2785px of 6697px; source section ID: `041c17d8-0521-47ab-ba62-2657160e017e`; image: https://media.designdetails.io/library/9072550050607a21a0c7bee18589af729accd114088277895e01189281a4030d/section_crop-041c17d8-2026-10-10T04-59-56-126Z.webp
   SECTION.md v3.2: `041c17d8-0521-47ab-ba62-2657160e017e` (deterministic evidence; editorial review pending)
5. **Features — Dr Jean-Paul Chung** (About)
   Reusable feature composition from About, organized around “Dr Jean-Paul Chung”.
   Capture: 1440×1215px; page bounds 2905–4120px of 6697px; source section ID: `8f459d3a-b678-47f7-80fc-1e761690f7c4`; image: https://media.designdetails.io/library/b7566869917f1291dbf9a7b9915a0cde06fa9f6aa96ee182a3c228d650d81fb2/section_crop-8f459d3a-2026-10-10T04-59-57-060Z.webp
   SECTION.md v3.2: `8f459d3a-b678-47f7-80fc-1e761690f7c4` (deterministic evidence; editorial review pending)
6. **Features — Odyssée Features** (About)
   Reusable feature composition from About, organized around “Odyssée Features”.
   Capture: 1440×1119px; page bounds 4240–5359px of 6697px; source section ID: `3d209c22-a5b4-4f35-92a1-001f9fa39395`; image: https://media.designdetails.io/library/408774b20e66c4f144d052fef531418afa8cfb52ad6f053e81dd7635fadb9c51/section_crop-3d209c22-2026-10-10T04-59-58-416Z.webp
   SECTION.md v3.2: `3d209c22-a5b4-4f35-92a1-001f9fa39395` (deterministic evidence; editorial review pending)
7. **Features — Every treatment at Odyssée is grounded in evidence-based medicine and…** (Home)
   Reusable feature composition from Home, organized around “Every treatment at Odyssée is grounded in evidence-based medicine and…”.
   Capture: 1440×216px; page bounds 4575–4791px of 9425px; source section ID: `cbbb67a7-17f5-43c3-b84d-82c1d594a2d8`; image: https://media.designdetails.io/library/44fa1cfed74ede8525729fd99bbb3f605740a070d065f71d1347c89668dcb01a/section_crop-cbbb67a7-2026-10-10T04-51-15-239Z.webp
   SECTION.md v3.2: `cbbb67a7-17f5-43c3-b84d-82c1d594a2d8` (deterministic evidence; editorial review pending)
8. **Features — Method, not myth.** (Home)
   Reusable feature composition from Home, organized around “Method, not myth.”.
   Capture: 1440×1316px; page bounds 4911–6227px of 9425px; source section ID: `7eced96b-40c4-44c7-83d0-3e6b06c4b6e4`; image: https://media.designdetails.io/library/ba087c441c10d7e9ce4d557c476e7966f1c43a36e7632306b001373c98569334/section_crop-7eced96b-2026-10-10T04-51-16-879Z.webp
   SECTION.md v3.2: `7eced96b-40c4-44c7-83d0-3e6b06c4b6e4` (deterministic evidence; editorial review pending)
9. **Features — BESPOKE MEDICAL AESTHETIC** (Home)
   Reusable feature composition from Home, organized around “BESPOKE MEDICAL AESTHETIC”.
   Capture: 1440×1100px; page bounds 6347–7447px of 9425px; source section ID: `493bde6e-31e9-4c11-95a8-087e36964e63`; image: https://media.designdetails.io/library/4aa72c109912d21f78c6769fa5d452d71523d7b90278158e8f51f068bbac9642/section_crop-493bde6e-2026-10-10T04-51-17-909Z.webp
   SECTION.md v3.2: `493bde6e-31e9-4c11-95a8-087e36964e63` (deterministic evidence; editorial review pending)
10. **Features — OUR APPROACH** (Home)
   Reusable feature composition from Home, organized around “OUR APPROACH”.
   Capture: 1440×429px; page bounds 7658–8087px of 9425px; source section ID: `e30ab3af-95fd-40ff-999b-fc487fcdf69e`; image: https://media.designdetails.io/library/9049221ce22e11641d932d68eb3074d47aaf20c432c41b72c8dfdbe56efbf559/section_crop-e30ab3af-2026-10-10T04-51-18-863Z.webp
   SECTION.md v3.2: `e30ab3af-95fd-40ff-999b-fc487fcdf69e` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/91e123c0aa558cb24e0b3452a178a922ebc5b0326f629dfe48484e2d761c95cd/desktop_full-bd99b80e-2026-10-10T04-51-01-321Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3b12ea3a1ce1da1fcd79846d914e3160f59fe12a3d9e454a18e7e8894805be90/mobile_full-bd99b80e-2026-10-10T04-51-40-639Z.webp
- Open Graph image: https://media.designdetails.io/library/d33bd239c4ff7a41ccba18f9b2e08aaf9dcb3abeaac5a20895bd634e4a0f7374/og_image-bd99b80e-2026-10-10T04-51-08-314Z.webp
- Full-page video: https://media.designdetails.io/library/adb274dd7706c7f4409b58e3d364981578ebcf10c7f066037ea803dc945f9480/motion-1791617603274.mp4
- Video poster: https://media.designdetails.io/library/3ca8b89735d926b965c1b2a23274c3edeb7d05be6abfd23c61516f22270b0629/motion-poster-1791617603274.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
- Text Link
- Footer
- Scroll Triggered Image Split
- Interactive Rolling Element

## Quality rubric

Overall: 67.3/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Odyssée Clinic executes a competent, tightly art-directed luxury-medical editorial site with one genuinely memorable device — the scroll-driven rolling logo sphere — and a recurring split-face image motif that gives several sections a shared conceptual thread. Typography, color, and layout are handled with consistency and restraint across the page's full length, and imagery is deliberately paired with supporting copy. However, outside the sphere and the split-face panels, the visual and motion vocabulary (numbered feature lists, serif pull-quotes over full-bleed photography, cream/navy palette, standard scroll reveals) is a well-worn template for this category, and color contributes almost no independent interest. The result is a well-made, good execution that stops short of the structural ambition and risk required for a 'strong' rating.

- Typography (15%): 68 — A controlled two-family system (psTimes serif for emotive statements, baselGrotesk sans for utility/body) is applied with a real hierarchy — 12px uppercase nav labels, 14px body, 18/32/48px serif display sizes — and consistent letter-spacing on small caps. It reads cleanly as editorial typesetting, but the pairing and scale steps are a familiar luxury-clinic formula rather than a distinctive voice.
- Color (10%): 60 — The palette is a safe, low-risk off-white canvas (#FFFCF8) with a single navy ink (#1E305E) for text and white for image overlays; the only departure is a single red status dot (#E80A1C) used once for 'Currently closed.' This is cohesive and on-brand for a clinical aesthetic but takes almost no chromatic risk and leans entirely on photography for visual interest.
- Layout (20%): 70 — The page shows a genuine editorial system carried across multiple sections: full-bleed hero with overlaid nav, numbered feature list ('(1) An experience like no other'), a recurring split-image motif pairing two different faces/crops, a philosophy section with asymmetric serif pull-quotes against product macro shots, a dual-image 'our approach' block, and a structured footer with address/hours/contact columns. The repetition of the split-panel device and consistent fluid-image/constrained-text column logic gives it coherence beyond a single hero moment.
- Motion (20%): 68 — Motion includes scroll-linked image splits/reveals, fading/translating text blocks, and a standout rolling 3D sphere with the brand mark that responds to scroll direction and reverses convincingly on scroll-up. This is more than a single scroll effect — it recurs with directional consistency across the recording — but the underlying techniques (crossfade/translate reveals, parallax-style carousel) are common patterns, and no evidence confirms frame-rate smoothness, easing quality, or input responsiveness beyond the capture.
- Originality (25%): 66 — The rolling logo sphere is a genuinely memorable, hard-to-substitute device tied directly to brand identity, and the recurring split-face motif (two different faces/crops bisecting the frame) gives a conceptual hook around transformation/duality. But these two ideas carry the entire originality case; everything else — numbered feature lists, serif pull-quotes over imagery, uppercase nav, footer hours table — is standard high-end clinic/editorial vocabulary seen across many comparable sites.
- Content (10%): 70 — Imagery and copy are purposefully matched: ingredient/gel macro shots sit beside skin close-ups under 'Method, not myth,' and the split-face panels visually literalize 'bespoke/medical/aesthetic' labels and the before/after transformation narrative implied by the brand name 'Odyssée.' The footer delivers concrete, scannable practical information (address, hours by day, contact, legal). This is a reasonably tight integration of photography, product detail, and copy toward a single brand narrative.

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

Full-bleed close-up portraits run edge to edge with a thin serif logo and nav floating over them, giving the skin itself room to show the results. The page settles into pale, airy sections with a quiet serif headline and small paragraphs, so the calm pacing and soft tones feel clinical and trustworthy rather than salesy.

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