# Residences Floorplan List

Schema: Design Details SECTION.md v3.2
Website: Belgrade Arbor
Source: https://belgradearbor.rs/en
Source section IDs: gap-9d098ab3-5069-6074
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The 50/50 split gives the text list and the photograph equal weight, so a visitor can read the unit types and see a real interior at once.
- Type has three clear tiers: an italic serif label, regular serif list items in the accent gold, and small mono caps for labels, so hierarchy comes from style and colour rather than size jumps.
- A stat block and a pill CTA sit at the bottom of the list column, so the choice of unit leads straight to the request action, with plenty of whitespace around it.

What a screenshot can't show:
- The recording showed no motion, so the slider transition and arrow behaviour are unknown.
- No font sizes, letter spacing, line heights or spacing values were measured.

Borrow: Pair a quiet text menu with one large photograph and end the text column with a single count and action, so browsing leads into enquiry.
Leave alone: Don't copy the sage, cream and gold palette, the italic serif 'Studio' label, or the exact unit-list wording; use your own palette, typefaces and content.

## Classification

- Type: features
- Layout: 50/50 vertical split with a text menu list on the left and a full-height image on the right.
- Styles: minimal, editorial, photographic
- Confidence: 95%

## Purpose and structure

A split-screen layout listing apartment types on one side and showing an interior image gallery on the other.

Visual signature: A list of apartment sizes (Studio, One Bedroom, etc.) next to an interior living room shot with subtle left/right gallery arrows.

## Components

- text menu list
- split layout
- image slider
- navigation arrows
- call to action button

## Typography

- Display: editorialOld — 151.2px 400
- Heading: editorialOld — 48px 300
- Body: Work Sans — 16px 400
- Mono: Work Sans — 14px 400

## Functional palette

- Text: text #2E3A26
- Canvas: canvas #F4F0DB
- Accent: accent #A68150
- Surface: surface #60735C

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 65 — Italic serif 'Studio' label contrasts with regular-weight serif list items and small-caps mono labels, creating a legible three-tier hierarchy; color shift (accent gold for list vs dark text for labels) reinforces structure without being flashy. Next tier: Hierarchy is competent but relies on a single font pairing already established sitewide; no distinctive type-specific craft (e.g. custom ligatures, kerning, scale jumps) unique to this section.
- Composition: 62 — Clean 50/50 split with left menu anchored by whitespace, a stat block and CTA grounding the bottom, and a full-bleed photographic right panel with centered nav arrows; alignment and breathing room are well handled. Next tier: The split-screen list-plus-photo pattern is a common real-estate template; nothing in the visible crop (asymmetric framing, overlap, unusual grid) pushes composition past a standard, expected arrangement.
- Motion: not_assessed — No motion_moments or timestamped behavior were supplied for this section, so slider transition or arrow interaction cannot be verified. Next tier: Provide timestamped evidence of the image slider's transition behavior to assess motion quality.
- Content: 62 — Unit types, availability count, and a submit-request CTA are logically grouped and paired with a representative interior photo and slider, giving the list real purpose beyond decoration. Next tier: Content is informative but conventional for a listings section; no unique data visualization or interactive layering differentiates it from standard apartment-finder UIs.
- Originality: 55 — The italicized 'Studio' label and warm editorial palette add a touch of personality, but the overall split-list/gallery format is a well-worn real-estate convention. Next tier: Needs a structural or interaction idea (e.g. dynamic image change per hovered unit type, unconventional grid breaks) that isn't substitutable with any generic listings template.
- Adaptability: 68 — Structure cleanly separates into a left text-list module, a right image/slider module, and a bottom stat+CTA bar—each independently restyleable using the supplied tokens (canvas, accent, text colors, pill button style). Next tier: n/a for this axis score level; further improvement would require explicit component-level tokens (list spacing, slider timing) not present in current facts.

Strengths:
- Clear three-level typographic hierarchy (italic label, serif list, uppercase mono utility text) without added visual noise
- Logical grouping of unit list, availability count, and CTA into a single scannable left column
- Full-bleed photographic panel with unobtrusive circular nav arrows keeps focus on imagery

Weaknesses:
- No motion evidence provided, so slider interaction/transition quality cannot be judged
- Split-screen list-plus-photo format is a common real-estate template with little structural novelty
- Right-side image lacks visible caption or unit-type linkage cues, reducing clarity of the list-to-image relationship

Why it does not reach the next tier: The section executes a familiar real-estate pattern cleanly with solid typographic and spatial discipline, but nothing here—layout, interaction, or content logic—departs from expected conventions enough to feel memorable or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the list content and photography while keeping the proportional split, label hierarchy (italic label > list items > mono utility text), and bottom stat/CTA row; slider mechanics would need to be rebuilt generically.

What transfers:
- Left-aligned text menu list with tiered typographic hierarchy
- 50/50 split layout pairing list and photographic panel
- Stat callout + CTA button bar beneath the list

Dependencies:
- Specific interior photography for the right panel
- Editorial serif/sans font pairing and accent gold color for visual tone

## 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%)
- No timestamped motion data available to verify slider or arrow interaction behavior
- No deterministic spacing/grid metrics specific to this section beyond general site tokens

## 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: features
- Source type: features
- Structure: two-column
- Layout: 50/50 vertical split with a text menu list on the left and a full-height image on the right.
- Styles: minimal, editorial, photographic
- Components: text menu list, split layout, image slider, navigation arrows, call to action button
- Purpose: A split-screen layout listing apartment types on one side and showing an interior image gallery on the other.
- Visual signature: A list of apartment sizes (Studio, One Bedroom, etc.) next to an interior living room shot with subtle left/right gallery arrows.
- Place on the page: 6 of 14, after Other (`belgradearbor-rs:C07`), before Other (`2ea909c1-ca9d-4058-9ed1-41e1d97414d3`)

### 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": "151.2px",
      "family": "editorialOld",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-15: computed CSS at 1440×1000; AI role: The primary display serif used for massive hero titles like 'BELGRADE ARBOR'.",
      "sampleId": "font-15",
      "confidence": 0.95,
      "lineHeight": "151.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "editorialOld",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: The elegant, lighter serif used for section headings like 'RESIDENCES' and list items.",
      "sampleId": "font-4",
      "confidence": 0.9,
      "lineHeight": "52.7px",
      "letterSpacing": "1px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Work Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: The clean, functional sans-serif used for descriptive paragraphs and smaller text elements.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "19.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "14px",
      "family": "Work Sans",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-14: computed CSS at 1440×1000; AI role: Used for smaller, utilitarian uppercase elements like navigation links and labels, providing a technical contrast to the serifs.",
      "sampleId": "font-14",
      "confidence": 0.7,
      "lineHeight": "21px",
      "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": [],
  "functionalPalette": [
    {
      "hex": "#2E3A26",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(46, 58, 38); AI role: A dark, muted green used as the primary text color against the lighter backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#F4F0DB",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-8: computed rgb(244, 240, 219); AI role: A warm off-white used as the primary background color for text-heavy sections.",
      "sampleId": "color-8",
      "confidence": 0.9
    },
    {
      "hex": "#A68150",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-7: computed rgb(166, 129, 80); AI role: A muted gold/bronze color used for major headings, highlighting text, and graphic elements like the map pins.",
      "sampleId": "color-7",
      "confidence": 0.85
    },
    {
      "hex": "#60735C",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-12: computed rgb(96, 115, 92); AI role: A mid-tone green used for specific background sections, like the '11 retail and hospitality units' block.",
      "sampleId": "color-12",
      "confidence": 0.7
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Visible border radii on floating image cards and pill-shaped interactive elements.",
  "density": "Low density. The design prioritizes whitespace and large imagery over compact information delivery.",
  "evidence": "Visual inspection reveals large areas of `color-8` canvas, pill-shaped `color-11` nav bars, thin border lines on the newsletter form, and large `font-15` text.",
  "borderStyle": "Subtle, fine lines used sparingly; forms use thin bottom borders (`color-2`), and some containers have delicate outlines.",
  "buttonStyle": "Pill-shaped, often ghost or outline styles, integrating seamlessly into the minimalist aesthetic.",
  "cornerStyle": "A mix of sharp corners for structural elements and pronounced, rounded corners (pill shapes) for floating images, navigation bars, and buttons.",
  "contentWidth": "Fluid layouts that utilize the full viewport width, specifically for background images and parallax scenes, contrasted with constrained text columns.",
  "spacingRhythm": "Generous spacing with significant margins and padding; elements are given ample room to breathe, emphasizing an editorial layout."
}
```

### 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: low
- What transfers: Left-aligned text menu list with tiered typographic hierarchy; 50/50 split layout pairing list and photographic panel; Stat callout + CTA button bar beneath the list
- Dependencies: Specific interior photography for the right panel; Editorial serif/sans font pairing and accent gold color for visual tone
- Guidance: Swap the list content and photography while keeping the proportional split, label hierarchy (italic label > list items > mono utility text), and bottom stat/CTA row; slider mechanics would need to be rebuilt generically.

### 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 features section inspired by the design evidence titled “Residences Floorplan List”.

Purpose: A split-screen layout listing apartment types on one side and showing an interior image gallery on the other.

Structure: two-column. Source layout label: 50/50 vertical split with a text menu list on the left and a full-height image on the right.. 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 list of apartment sizes (Studio, One Bedroom, etc.) next to an interior living room shot with subtle left/right gallery arrows.

Components: text menu list, split layout, image slider, navigation arrows, call to action button.

Style direction: minimal, editorial, photographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"151.2px","family":"editorialOld","source":"computed","traits":"uppercase","weight":"400","evidence":"font-15: computed CSS at 1440×1000; AI role: The primary display serif used for massive hero titles like 'BELGRADE ARBOR'.","sampleId":"font-15","confidence":0.95,"lineHeight":"151.2px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"editorialOld","source":"computed","traits":"Regular","weight":"300","evidence":"font-4: computed CSS at 1440×1000; AI role: The elegant, lighter serif used for section headings like 'RESIDENCES' and list items.","sampleId":"font-4","confidence":0.9,"lineHeight":"52.7px","letterSpacing":"1px"} {"role":"body","size":"16px","family":"Work Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: The clean, functional sans-serif used for descriptive paragraphs and smaller text elements.","sampleId":"font-1","confidence":0.9,"lineHeight":"19.2px","letterSpacing":"normal"} {"role":"mono","size":"14px","family":"Work Sans","source":"computed","traits":"uppercase","weight":"400","evidence":"font-14: computed CSS at 1440×1000; AI role: Used for smaller, utilitarian uppercase elements like navigation links and labels, providing a technical contrast to the serifs.","sampleId":"font-14","confidence":0.7,"lineHeight":"21px","letterSpacing":"0.3px"}

Color evidence: {"hex":"#2E3A26","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(46, 58, 38); AI role: A dark, muted green used as the primary text color against the lighter backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#F4F0DB","name":"canvas","role":"canvas","source":"computed","evidence":"color-8: computed rgb(244, 240, 219); AI role: A warm off-white used as the primary background color for text-heavy sections.","sampleId":"color-8","confidence":0.9} {"hex":"#A68150","name":"accent","role":"accent","source":"computed","evidence":"color-7: computed rgb(166, 129, 80); AI role: A muted gold/bronze color used for major headings, highlighting text, and graphic elements like the map pins.","sampleId":"color-7","confidence":0.85} {"hex":"#60735C","name":"surface","role":"surface","source":"computed","evidence":"color-12: computed rgb(96, 115, 92); AI role: A mid-tone green used for specific background sections, like the '11 retail and hospitality units' block.","sampleId":"color-12","confidence":0.7}

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: Left-aligned text menu list with tiered typographic hierarchy; 50/50 split layout pairing list and photographic panel; Stat callout + CTA button bar beneath the list.

Dependencies: Specific interior photography for the right panel; Editorial serif/sans font pairing and accent gold color for visual tone.

Adaptation guidance: Swap the list content and photography while keeping the proportional split, label hierarchy (italic label > list items > mono utility text), and bottom stat/CTA row; slider mechanics would need to be rebuilt generically.

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