# Split Portrait Gallery

Schema: Design Details SECTION.md v3.2
Website: Odyssée
Source: https://www.odysseeclinic.com.au/
Source section IDs: gap-1e20fe62-3551-4575
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Two full-bleed portrait photos in a two-column grid fill the screen, so the imagery carries the whole section with no clutter.
- Matching offset-split crops across both panels give a repeated visual rhythm that feels deliberate rather than like two photos dropped side by side.
- Small, tracked uppercase white labels (BESPOKE / MEDICAL / AESTHETIC) sit on the images and state the brand message without competing with the photos.

What a screenshot can't show:
- The recording showed no motion, and no type sizes, letter spacing or spacing were measured, so hover, scroll and exact label sizing are unknown.

Borrow: Apply one consistent crop or framing treatment to every image in a split layout so the pair reads as a single designed unit, then add minimal overlay labels.
Leave alone: Don't copy the offset-horizon crop photography itself, the cream and navy palette, or the mono label typeface; use your own imagery and a free mono such as Space Mono or IBM Plex Mono.

## Classification

- Type: gallery
- Layout: Two-column grid containing edge-to-edge portrait images.
- Styles: photographic, editorial
- Confidence: 85%

## Purpose and structure

Two large portrait-oriented photographs displayed side-by-side.

Visual signature: A bold, dual-image layout that fills the screen with aesthetic photography.

## Components

- portrait images

## Typography

- Display: psTimes — 48px 400
- Heading: psTimes — 18px 400
- Body: baselGrotesk — 14px 400
- Mono: baselGrotesk — 12px 400

## Functional palette

- Canvas: canvas #FFFCF8
- Text: text #1E305E
- Text: text #FFFFFF

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 63.71/100 (Good)
Scored coverage: 85%

- Typography: 58 — Small uppercase white labels (BESPOKE / MEDICAL / AESTHETIC) overlay the images, using the mono/utility typeface at small size with tracked letterspacing. Functional but minimal typographic presence; hierarchy is simple and legible, not elaborate. Next tier: No typographic interplay with the imagery beyond basic overlay labels; no scale contrast or compositional integration with the split-image device.
- Composition: 74 — The deliberate split/mirrored crop within each image (a doubled, offset horizon line across both panels) creates a distinctive, intentional visual rhythm rather than a plain side-by-side gallery. The two-column full-bleed layout with matching offset-split framing in both images is a considered, repeatable compositional idea that reads as a deliberate design device, not just two photos placed together. Next tier: The device itself is clever but single-note; no further layering, asymmetry, or additional compositional beats keep it from feeling like a more fully resolved editorial spread.
- Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: No timestamped visible motion data provided to assess.
- Content: 62 — Photography is purposeful and on-brand for a medical aesthetics site, with labels reinforcing the brand message (bespoke/medical/aesthetic). Content fits the editorial tone but is essentially imagery plus minimal text, not a built-out content structure. Next tier: No additional content elements (copy, context, hierarchy) beyond three words and two images to demonstrate richer content integration.
- Originality: 68 — The offset/split-crop technique applied identically across both images is a specific, recognizable idea that elevates it above a generic two-column gallery, though the underlying device (stacked offset crop) is a known editorial trick rather than a wholly novel invention. Next tier: The device, while distinctive, is a single recognizable technique rather than a fully original compositional system; lacks additional unexpected details to push into 'wow' territory.
- Adaptability: 55 — The two-column full-bleed grid with overlay labels is a clearly separable structural pattern (grid + overlay text), but the core visual impact depends entirely on the specific offset-crop photographic treatment, which is a proprietary asset-level decision, not a reusable structural behavior. Next tier: Structure (grid, label overlay) is simple and portable, but the signature visual (offset split crop) cannot be abstracted into a generic pattern without the same photographic treatment.

Strengths:
- Distinctive offset/split-crop photographic treatment applied consistently across both panels
- Full-bleed two-column layout creates strong visual impact and scale
- Minimal uppercase label overlay reinforces brand messaging without clutter

Weaknesses:
- Typography role is minimal and purely functional, with no deeper hierarchy
- Motion cannot be assessed due to lack of evidence
- Structural pattern is simple and depends heavily on a specific photographic effect for its distinctiveness
- Content is limited to two images and three words, offering little textual richness

Why it does not reach the next tier: The section relies on one clever but singular compositional trick (the stacked/offset crop) without further layering, typographic ambition, or content depth to sustain a 'strong' or higher rating across all axes; adaptability is capped because the signature effect is asset-bound.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the full-bleed two-column grid and the small uppercase overlay label placement; replicate the offset-crop effect with the new site's own photography to preserve the signature visual, or substitute a different intentional crop treatment if the original effect cannot be reproduced.

What transfers:
- Two-column full-bleed grid structure
- Overlay label pattern with small uppercase text at bottom-left/center/right positions

Dependencies:
- The offset/split-crop photographic treatment is essential to the section's visual identity and must be recreated with custom image editing
- Original photography of comparable style and framing

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion not assessed due to absent timestamped evidence
- Exact color and spacing values for overlay text not independently verifiable from crop alone

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: gallery
- Source type: gallery
- Structure: two-column
- Layout: Two-column grid containing edge-to-edge portrait images.
- Styles: photographic, editorial
- Components: portrait images
- Purpose: Two large portrait-oriented photographs displayed side-by-side.
- Visual signature: A bold, dual-image layout that fills the screen with aesthetic photography.
- Place on the page: 6 of 12, after Feature collection (`odysseeclinic-com-au:carousel_features_c03`), before Other (`odysseeclinic-com-au:centered_text_c07`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### 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": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "48px",
      "family": "psTimes",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: Large serif text used for emphasis, such as 'At Odyssée, we prioritise...' set in psTimes at 48px.",
      "sampleId": "font-7",
      "confidence": 0.85,
      "lineHeight": "48px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "18px",
      "family": "psTimes",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Used for main title text like 'Medical aesthetics for timeless results.' set in psTimes serif at 18px.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "19.8px",
      "letterSpacing": "0.4px"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "baselGrotesk",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Standard paragraph text used for descriptions ('Clarity precedes creation...') set in baselGrotesk sans-serif at 14px.",
      "sampleId": "font-4",
      "confidence": 0.9,
      "lineHeight": "18.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "baselGrotesk",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Used for utility navigation and small uppercase labels like 'MENU' and 'BOOK CONSULTATION', set in baselGrotesk at 12px.",
      "sampleId": "font-1",
      "confidence": 0.8,
      "lineHeight": "12px",
      "letterSpacing": "0.4px"
    }
  ]
}
```

### 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": [],
  "functionalPalette": [
    {
      "hex": "#FFFCF8",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 252, 248); AI role: The primary off-white background color used across the page (#FFFCF8).",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#1E305E",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(30, 48, 94); AI role: The dark blue used for primary typography and navigation text (#1E305E).",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed rgb(255, 255, 255); AI role: White text used when overlaying dark imagery or sections (#FFFFFF).",
      "sampleId": "color-4",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px",
  "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.",
  "borderStyle": "Minimal, primarily using subtle 1px horizontal lines to separate certain sections (e.g., 'WHY ODYSSEE?' section).",
  "buttonStyle": "Text-only with no visible boundaries; relies on typography and hover states (implied).",
  "cornerStyle": "Sharp. Images are consistently unrounded.",
  "contentWidth": "Fluid full-width for imagery, constrained columns for text blocks to maintain readability.",
  "spacingRhythm": "Sparse and intentional, relying heavily on large margins and padding to create a sense of luxury and focus."
}
```

### Reconstruction specification

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

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### 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
null
```

### 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: unknownpx 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: medium
- What transfers: Two-column full-bleed grid structure; Overlay label pattern with small uppercase text at bottom-left/center/right positions
- Dependencies: The offset/split-crop photographic treatment is essential to the section's visual identity and must be recreated with custom image editing; Original photography of comparable style and framing
- Guidance: Reuse the full-bleed two-column grid and the small uppercase overlay label placement; replicate the offset-crop effect with the new site's own photography to preserve the signature visual, or substitute a different intentional crop treatment if the original effect cannot be reproduced.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original gallery section inspired by the design evidence titled “Split Portrait Gallery”.

Purpose: Two large portrait-oriented photographs displayed side-by-side.

Structure: two-column. Source layout label: Two-column grid containing edge-to-edge portrait images.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: A bold, dual-image layout that fills the screen with aesthetic photography.

Components: portrait images.

Style direction: photographic, editorial.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"48px","family":"psTimes","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Large serif text used for emphasis, such as 'At Odyssée, we prioritise...' set in psTimes at 48px.","sampleId":"font-7","confidence":0.85,"lineHeight":"48px","letterSpacing":"normal"} {"role":"heading","size":"18px","family":"psTimes","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: Used for main title text like 'Medical aesthetics for timeless results.' set in psTimes serif at 18px.","sampleId":"font-3","confidence":0.9,"lineHeight":"19.8px","letterSpacing":"0.4px"} {"role":"body","size":"14px","family":"baselGrotesk","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Standard paragraph text used for descriptions ('Clarity precedes creation...') set in baselGrotesk sans-serif at 14px.","sampleId":"font-4","confidence":0.9,"lineHeight":"18.2px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"baselGrotesk","source":"computed","traits":"uppercase","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Used for utility navigation and small uppercase labels like 'MENU' and 'BOOK CONSULTATION', set in baselGrotesk at 12px.","sampleId":"font-1","confidence":0.8,"lineHeight":"12px","letterSpacing":"0.4px"}

Color evidence: {"hex":"#FFFCF8","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 252, 248); AI role: The primary off-white background color used across the page (#FFFCF8).","sampleId":"color-1","confidence":0.95} {"hex":"#1E305E","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(30, 48, 94); AI role: The dark blue used for primary typography and navigation text (#1E305E).","sampleId":"color-2","confidence":0.9} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White text used when overlaying dark imagery or sections (#FFFFFF).","sampleId":"color-4","confidence":0.85}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

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

Transfer these principles: Two-column full-bleed grid structure; Overlay label pattern with small uppercase text at bottom-left/center/right positions.

Dependencies: The offset/split-crop photographic treatment is essential to the section's visual identity and must be recreated with custom image editing; Original photography of comparable style and framing.

Adaptation guidance: Reuse the full-bleed two-column grid and the small uppercase overlay label placement; replicate the offset-crop effect with the new site's own photography to preserve the signature visual, or substitute a different intentional crop treatment if the original effect cannot be reproduced.

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