# Amenities Feature List Schema: Design Details SECTION.md v3.2 Website: Belgrade Arbor Source: https://belgradearbor.rs/en Source section IDs: gap-9d098ab3-10074-11075 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The 50/50 split gives the short amenity list plenty of empty space, while the dense overhead garden photo on the right provides strong contrast. - Mixing serif and sans weights in the list, with an italic first item and a gold accent marking the active state, builds a clear editorial hierarchy. - A small uppercase label and a short description sit under the list, so the photo reads as real evidence of the amenities rather than decoration. What a screenshot can't show: - The recording showed no motion, so hover, active-state switching and any image change are unknown. - No font sizes, letter spacing, line heights or section padding were measured. Borrow: Pair a short, well-spaced text menu with one full-height photo that shows what the items describe, and mark the active item with a single accent colour. Leave alone: Don't copy the olive, cream and gold palette, the terraced-garden photograph or the italic-serif first item; use your own palette, imagery and typefaces. ## 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 building amenities on one side and showing an outdoor image on the other. Visual signature: A list of amenities (Rooftop, Private fitness space, etc.) next to an overhead shot of a terraced garden walkway. ## Components - text list - split layout - full-height image ## 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: 61.82/100 (Good) Scored coverage: 85% - Typography: 64 — Clear hierarchy using italic serif for first list item, mixed-weight serif/sans list, gold accent color distinguishing active state, and small uppercase label pairing with body copy below. Legible and editorial but fairly standard type pairing for the genre. Next tier: Needs more distinctive typographic treatment or scale contrast to move beyond familiar editorial list conventions. - Composition: 66 — Clean 50/50 split with generous negative space on the left anchoring a short list against a dense, diagonal overhead photograph on the right; the divide gives strong figure-ground contrast and the list's vertical rhythm is well controlled. Next tier: The left column has a large unused void beneath the list and above the description, making the composition feel unresolved rather than deliberately spacious; tighter integration of list, divider, and body text would strengthen the layout. - Motion: not_assessed — No motion_moments or timestamped behavior supplied for this section. Next tier: Needs specific timestamped evidence of visible animated change to assess. - Content: 62 — Amenity list is paired with a contextually relevant photo (rooftop garden/walkway) and a supporting description block, giving the text-image pairing real substantiation rather than decorative filler. Next tier: Only one amenity ('Rooftop') is elaborated with copy; the rest of the list lacks matching detail, making the content feel incomplete rather than a fully resolved system. - Originality: 55 — Split-screen text list beside full-bleed image is a common real-estate/editorial pattern; the gold accent list and serif italic touch add some character but the structural idea itself is familiar. Next tier: Lacks a distinguishing structural or interactive idea beyond the standard list/image split seen across property marketing sites. - Adaptability: 60 — The list, divider, description block, and image are cleanly separable regions with consistent tokens (canvas, accent, text colors) that could be reskinned or restructured with moderate effort. Next tier: Lack of visible interactive/motion behavior (e.g., hover-to-change-image) limits insight into how state changes would need to be decoupled. Strengths: - Strong figure-ground contrast between calm text column and dense photographic texture - Effective use of accent gold color to differentiate list items from active/emphasized state - Contextually matched photography reinforcing the amenity being described Weaknesses: - Large unused vertical void in the left column breaks visual rhythm - Only one list item has supporting body copy, leaving the list feel unfinished - Structural pattern (list + full-height image) is a common convention without a distinguishing twist - No evidence of interactive or motion behavior tying list items to image changes Why it does not reach the next tier: The section is competently composed and typographically coherent but relies on a conventional split-list-and-photo pattern without an original structural or interactive device, and the incomplete copy treatment across list items undermines full editorial resolution needed for a 'strong' rating. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the split structure and list/accent pattern; add per-item copy or hover-triggered image swaps to complete the content system and justify the layout's negative space. What transfers: - 50/50 split layout with text list and full-height image - Accent color list with italic serif lead item - Divider line separating list from description block Dependencies: - High-quality overhead/editorial photography matching each amenity - Enough copy content to fill out each list item consistently ## 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 motion data supplied, so interactive behavior (e.g., list hover swapping image) could not be assessed - Single static crop limits judgment of how the section behaves across its full scroll height ## 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 list, split layout, full-height image - Purpose: A split-screen layout listing building amenities on one side and showing an outdoor image on the other. - Visual signature: A list of amenities (Rooftop, Private fitness space, etc.) next to an overhead shot of a terraced garden walkway. - Place on the page: 11 of 14, after Other (`belgradearbor-rs:C06`), before Gallery (`belgradearbor-rs:C09`) ### 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: medium - What transfers: 50/50 split layout with text list and full-height image; Accent color list with italic serif lead item; Divider line separating list from description block - Dependencies: High-quality overhead/editorial photography matching each amenity; Enough copy content to fill out each list item consistently - Guidance: Reuse the split structure and list/accent pattern; add per-item copy or hover-triggered image swaps to complete the content system and justify the layout's negative space. ### 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 “Amenities Feature List”. Purpose: A split-screen layout listing building amenities on one side and showing an outdoor image 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 amenities (Rooftop, Private fitness space, etc.) next to an overhead shot of a terraced garden walkway. Components: text list, split layout, full-height image. 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: 50/50 split layout with text list and full-height image; Accent color list with italic serif lead item; Divider line separating list from description block. Dependencies: High-quality overhead/editorial photography matching each amenity; Enough copy content to fill out each list item consistently. Adaptation guidance: Reuse the split structure and list/accent pattern; add per-item copy or hover-triggered image swaps to complete the content system and justify the layout's negative space. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.