# Installment Pricing Plan Schema: Design Details SECTION.md v3.2 Website: Belgrade Arbor Source: https://belgradearbor.rs/en Source section IDs: gap-9d098ab3-13076-14077 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The split layout pairs a full-height evening render with a solid green panel, so the image sets the real-estate mood while the list carries the facts. - Large italic serif percentages in a vivid accent colour stand out against plain sans stage labels, which makes the payment milestones easy to scan. - Hairline rules separate each row, and a pill download button closes the list with a clear next step. What a screenshot can't show: - The recording showed no motion for this section, so any hover or scroll behaviour is unknown. - No font sizes, letter spacing or spacing values were measured, so the type scale and row gaps here are only visual impressions. Borrow: Give the key figure in a list a distinct typographic voice, such as italic serif numerals, so people can scan the sequence at a glance. Leave alone: Don't copy the dark green panel with its accent numerals, or the evening building render; choose your own palette, imagery and a free serif such as a Playfair-style or Cormorant-style face. ## Classification - Type: pricing - Layout: Split layout with a full-height image on the left and a solid background with a timeline list on the right. - Styles: minimal, editorial, corporate - Confidence: 95% ## Purpose and structure A breakdown of the payment schedule presented as a timeline list next to a building render. Visual signature: A list of percentages (20%, 30%, 10%) describing payment milestones on a green background, paired with an evening building render. ## Components - percentage list - timeline layout - full-height image - solid background - download 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.35/100 (Good) Scored coverage: 85% - Typography: 66 — Clear hierarchy between the serif display heading, italic serif percentage numerals in a vivid accent color, and clean sans labels. The italic numeral treatment for percentages is a distinctive, deliberate choice that elevates an otherwise plain list. Next tier: Numeral treatment is strong but the supporting label type and heading remain generic editorial defaults; no further refinement (optical sizing, varied weight pairing) is visible to push into exceptional territory. - Composition: 64 — Simple, confident split layout: full-bleed image left, dense green panel right with a clean vertical list separated by hairline rules, pill CTA anchoring the bottom. Good use of negative space below the list balances the panel. Next tier: The right-side list is a straightforward vertical stack with even rhythm; no asymmetry, scale variation, or secondary visual anchor beyond the list and button to create a truly memorable composition. - Motion: not_assessed — No motion evidence supplied for this section. Next tier: Timestamped visible motion changes are required to assess this axis. - Content: 62 — Payment milestones are clearly itemized with percentage, stage label, and a supporting building render that reinforces the real-estate context; a building-permit download button adds practical utility. Next tier: Content is informative but purely tabular; no supporting context (dates, totals, disclaimers) or richer integration with the image is present to elevate perceived depth. - Originality: 60 — The italic serif numerals against a dark green field are a mild stylistic twist on a standard pricing-timeline pattern, but the overall structure (image + list + button) is a common real-estate template. Next tier: Lacks a structural or interactive idea beyond typographic styling that would make the section feel genuinely novel rather than a skinned standard layout. - Adaptability: 58 — The list/timeline structure, image-panel split, and button component are modular and could be reskinned with different palette/typography relatively easily given the deterministic tokens provided. Next tier: No interaction or responsive behavior evidence supplied, limiting confidence in how cleanly the pattern decouples across breakpoints. Strengths: - Distinctive italic serif numerals that create a strong visual anchor for the percentages - Clean hairline-separated list rhythm against a confident dark green field - Effective split layout pairing an atmospheric building render with structured pricing data Weaknesses: - Vertical list layout is a conventional pricing/timeline pattern without a unique structural idea - No visible motion or interaction evidence to assess dynamic behavior - Content is limited to a flat percentage breakdown with no additional context or depth Why it does not reach the next tier: The typographic numeral treatment is appealing but the composition and content remain a standard list-plus-image template; without a more distinctive structural or interactive idea, or richer content integration, the section stays within the good/polished range rather than strong/memorable. ## Adaptation guidance - Effort: Low - Guidance: Reuse the list/rule structure and numeral emphasis pattern with a different palette and image; swap labels and percentages for other milestone data. What transfers: - Split image/panel layout - Vertical timeline list with hairline separators - Italic serif numeral styling for emphasis Dependencies: - Specific building render image - Dark green panel palette and accent color ## 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 timestamps provided, so motion axis is unscored - No interaction or responsive behavior evidence supplied ## 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: pricing - Source type: pricing - Structure: two-column - Layout: Split layout with a full-height image on the left and a solid background with a timeline list on the right. - Styles: minimal, editorial, corporate - Components: percentage list, timeline layout, full-height image, solid background, download button - Purpose: A breakdown of the payment schedule presented as a timeline list next to a building render. - Visual signature: A list of percentages (20%, 30%, 10%) describing payment milestones on a green background, paired with an evening building render. - Place on the page: 13 of 14, after Gallery (`belgradearbor-rs:C09`), before Footer (`belgradearbor-rs:C10`) ### 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: Split image/panel layout; Vertical timeline list with hairline separators; Italic serif numeral styling for emphasis - Dependencies: Specific building render image; Dark green panel palette and accent color - Guidance: Reuse the list/rule structure and numeral emphasis pattern with a different palette and image; swap labels and percentages for other milestone data. ### 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 pricing section inspired by the design evidence titled “Installment Pricing Plan”. Purpose: A breakdown of the payment schedule presented as a timeline list next to a building render. Structure: two-column. Source layout label: Split layout with a full-height image on the left and a solid background with a timeline list 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 percentages (20%, 30%, 10%) describing payment milestones on a green background, paired with an evening building render. Components: percentage list, timeline layout, full-height image, solid background, download button. Style direction: minimal, editorial, corporate. 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: Split image/panel layout; Vertical timeline list with hairline separators; Italic serif numeral styling for emphasis. Dependencies: Specific building render image; Dark green panel palette and accent color. Adaptation guidance: Reuse the list/rule structure and numeral emphasis pattern with a different palette and image; swap labels and percentages for other milestone data. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.