# Belgrade Arbor — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://belgradearbor.rs/en
Captured: 2026-10-18
CSS measured: 2026-10-18T03:26:35.297Z at 1440×1000 — https://belgradearbor.rs/en
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

Belgrade Arbor employs an elegant, editorial aesthetic defined by expansive use of light space, sophisticated serif typography (`font-4`, `font-15`), and a restrained, earthy color palette. The layout heavily utilizes full-width, immersive background visuals combined with floating, overlapping content layers. Pinned scrolling elements create a sophisticated, magazine-like reading experience. Delicate details, such as subtle outlines and fine typography, complement the high-quality 3D architectural renderings that serve as the focal point.

## Classification

- Industry: other
- Site type: Landing
- Business model: Agency
- Styles: editorial, minimal, corporate, luxury-real-estate, earth-tones
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: editorialOld — weight 400; size 151.2px; line-height 151.2px; tracking normal; uppercase (95% role confidence, computed values)
- Heading: editorialOld — weight 300; size 48px; line-height 52.7px; tracking 1px; Regular (90% role confidence, computed values)
- Body: Work Sans — weight 400; size 16px; line-height 19.2px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Work Sans — weight 400; size 14px; line-height 21px; tracking 0.3px; uppercase (70% role confidence, computed values)

## Functional palette

- Text — text #2E3A26: color-2: computed rgb(46, 58, 38); AI role: A dark, muted green used as the primary text color against the lighter backgrounds. (95% role confidence, computed values)
- Canvas — canvas #F4F0DB: color-8: computed rgb(244, 240, 219); AI role: A warm off-white used as the primary background color for text-heavy sections. (90% role confidence, computed values)
- Accent — accent #A68150: 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. (85% role confidence, computed values)
- Surface — surface #60735C: 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. (70% 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": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 228,
    "contexts": [
      {
        "tag": "div",
        "text": "At",
        "top": 10120,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "one",
        "top": 10120,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "of",
        "top": 10120,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 52,
    "contexts": [
      {
        "tag": "p",
        "text": "Railway Station",
        "top": 11563,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Savremena Elementary School",
        "top": 11460,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "West 65",
        "top": 11506,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "30px",
    "letterSpacing": "0.4px",
    "traits": "uppercase",
    "count": 36,
    "contexts": [
      {
        "tag": "div",
        "text": "W",
        "top": 11040,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "h",
        "top": 11040,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "a",
        "top": 11040,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "48px",
    "lineHeight": "52.7px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "11 retail and hospitality units",
        "top": 15758,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "retail and hospitality units",
        "top": 15750,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "11 retail and hospitality units",
        "top": 15758,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "55.9px",
    "lineHeight": "55.9px",
    "letterSpacing": "1.1px",
    "traits": "Regular",
    "count": 202,
    "contexts": [
      {
        "tag": "div",
        "text": "R",
        "top": 11134,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "a",
        "top": 11134,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "i",
        "top": 11134,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "51.9px",
    "lineHeight": "57.1px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 91,
    "contexts": [
      {
        "tag": "div",
        "text": "I",
        "top": 16456,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "n",
        "top": 16456,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "B",
        "top": 16456,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "500",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 89,
    "contexts": [
      {
        "tag": "div",
        "text": "P",
        "top": 24550,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "r",
        "top": 24550,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 24550,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "400",
    "size": "159.8px",
    "lineHeight": "159.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 40,
    "contexts": [
      {
        "tag": "div",
        "text": "L",
        "top": 10720,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "o",
        "top": 10720,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "c",
        "top": 10720,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": null,
    "fontStack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 39,
    "contexts": [
      {
        "tag": "div",
        "text": "F",
        "top": 25637,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "o",
        "top": 25637,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "r",
        "top": 25637,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "55.9px",
    "lineHeight": "61.5px",
    "letterSpacing": "1.1px",
    "traits": "italic",
    "count": 34,
    "contexts": [
      {
        "tag": "span",
        "text": "Railway Station",
        "top": 11223,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Savremena Elementary School",
        "top": 11378,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "West 65",
        "top": 11455,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "55.9px",
    "lineHeight": "69.9px",
    "letterSpacing": "1.1px",
    "traits": "uppercase",
    "count": 27,
    "contexts": [
      {
        "tag": "div",
        "text": "J",
        "top": 25450,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "O",
        "top": 25450,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "I",
        "top": 25450,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "55.9px",
    "lineHeight": "61.5px",
    "letterSpacing": "1.1px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "80",
        "top": 13958,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "22",
        "top": 13958,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "78",
        "top": 13958,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "99.9px",
    "lineHeight": "99.9px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 19484,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "B",
        "top": 19484,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "B",
        "top": 26232,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Menu",
        "top": 42,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Inquire",
        "top": 42,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Inquire",
        "top": 63,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "400",
    "size": "151.2px",
    "lineHeight": "151.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "B",
        "top": 769,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 769,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "l",
        "top": 769,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "400",
    "size": "119.9px",
    "lineHeight": "119.9px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "V",
        "top": 19194,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "i",
        "top": 19194,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 19194,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "239.8px",
    "lineHeight": "239.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Y",
        "top": 16137,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "o",
        "top": 16137,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "u",
        "top": 16137,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "400",
    "size": "127.9px",
    "lineHeight": "127.9px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "A",
        "top": 17826,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "m",
        "top": 17826,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 17826,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 226,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3D Experience",
        "top": 274,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Residences",
        "top": 322,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "editorialOld",
    "fontStack": "editorialOld, \"editorialOld Fallback\"",
    "weight": "300",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 293,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3D Experience",
        "top": 341,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Residences",
        "top": 389,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "label",
        "text": "First name*",
        "top": 25672,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Last name*",
        "top": 25672,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Email*",
        "top": 25749,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 1906,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 25452,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "3D Experience",
        "top": 25487,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Residences",
        "top": 25523,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "ENG",
        "top": 717,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "SRB",
        "top": 717,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Work Sans",
    "fontStack": "\"Work Sans\", \"Work Sans Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "1.6px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "View all",
        "top": 13553,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Let's begin",
        "top": 25917,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 6,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 414,
        "property": "svg-fill"
      },
      {
        "tag": "image",
        "text": "",
        "top": 1158,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#2E3A26",
    "alpha": 1,
    "cssValue": "rgb(46, 58, 38)",
    "count": 230,
    "contexts": [
      {
        "tag": "div",
        "text": "W",
        "top": 11040,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Railway Station",
        "top": 11223,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Railway Station",
        "top": 11794,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FDFBEF",
    "alpha": 1,
    "cssValue": "rgb(253, 251, 239)",
    "count": 1,
    "contexts": [
      {
        "tag": "body",
        "text": "(self.__next_s=self.__next_s||[]).push([0,{\"children\":\"(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push(",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "oklab(0 0 0 / 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 10000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#314759",
    "alpha": 1,
    "cssValue": "rgb(49, 71, 89)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "The way of livingYour rootsIn Belgrade Arbor, each residence is crafted not merely for living, but a",
        "top": 16074,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#CCBF99",
    "alpha": 1,
    "cssValue": "rgb(204, 191, 153)",
    "count": 96,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 226,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "ENG",
        "top": 717,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "L",
        "top": 10720,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#A68150",
    "alpha": 1,
    "cssValue": "rgb(166, 129, 80)",
    "count": 311,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 35,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "R",
        "top": 11134,
        "property": "text"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 11528,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F4F0DB",
    "alpha": 1,
    "cssValue": "rgb(244, 240, 219)",
    "count": 314,
    "contexts": [
      {
        "tag": "span",
        "text": "Inquire",
        "top": 42,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "B",
        "top": 769,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E7FD55",
    "alpha": 1,
    "cssValue": "rgb(231, 253, 85)",
    "count": 42,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 293,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "T",
        "top": 16047,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFF4D6",
    "alpha": 1,
    "cssValue": "rgb(255, 244, 214)",
    "count": 48,
    "contexts": [
      {
        "tag": "span",
        "text": "Menu",
        "top": 42,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "W",
        "top": 15070,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Adaptable to various types of businesses, with an optimal layout and natural lighting that fosters a",
        "top": 15827,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#1F251E",
    "alpha": 0.8,
    "cssValue": "lab(14.2482 -4.74556 4.24002 / 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "MenuInquireInquireHomeHome3D Experience3D ExperienceResidencesResidencesBusinessBusinessRetail Space",
        "top": 24,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#60735C",
    "alpha": 1,
    "cssValue": "rgb(96, 115, 92)",
    "count": 71,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 49,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "InquireInquire",
        "top": 32,
        "property": "border"
      },
      {
        "tag": "path",
        "text": "",
        "top": 49,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#9BD4D7",
    "alpha": 1,
    "cssValue": "rgb(155, 212, 215)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 414,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#2D3925",
    "alpha": 0.4,
    "cssValue": "lab(22.8568 -8.53087 10.7725 / 0.4)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 13542,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 431,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 431,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#A58250",
    "alpha": 0.4,
    "cssValue": "lab(56.7899 10.2213 32.1475 / 0.4)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Railway StationRailway StationSavremena Elementary SchoolSavremena Elementary SchoolWest 65West 65Ai",
        "top": 11070,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#3C3C3C",
    "alpha": 1,
    "cssValue": "rgb(60, 60, 60)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "View all",
        "top": 13553,
        "property": "text"
      }
    ]
  }
]
```

### 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: Generous spacing with significant margins and padding; elements are given ample room to breathe, emphasizing an editorial layout.
- Corner style: A mix of sharp corners for structural elements and pronounced, rounded corners (pill shapes) for floating images, navigation bars, and buttons.
- Radius: Visible border radii on floating image cards and pill-shaped interactive elements.
- Borders: Subtle, fine lines used sparingly; forms use thin bottom borders (`color-2`), and some containers have delicate outlines.
- Buttons: Pill-shaped, often ghost or outline styles, integrating seamlessly into the minimalist aesthetic.
- Content width: Fluid layouts that utilize the full viewport width, specifically for background images and parallax scenes, contrasted with constrained text columns.
- 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.

## Sections

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

1. **Hero — Belgrade Arbor Architectural Hero** (Home)
   AI suggestion (92% confidence): Complete opening hero with a full-width architectural rendering, compact centered navigation, oversized project title, and a clear transition into the next interior/location section.
   Capture: 1440×1998px; page bounds 0–1998px of 15116px; source section ID: `76965627-bbf2-4336-b125-632fa164bf64`; image: https://media.designdetails.io/library/504f2524ff0633da21d0afc3cf2e2b4c072cced4c203d82644d93cdbbab57746/76965627-bbf2-4336-b125-632fa164bf64.webp
   SECTION.md v3.2: `76965627-bbf2-4336-b125-632fa164bf64` (deterministic evidence; editorial review pending)
2. **Features — LOCATION** (Home)
   Reusable feature composition from Home, organized around “LOCATION”.
   Capture: 1440×1000px; page bounds 2000–3000px of 15116px; source section ID: `1073bf4a-e6f6-46ef-90d8-7d4fcb7dc85e`; image: https://media.designdetails.io/library/55f268c258fbcbc6f6e3149a52275b83ddf2248027dde93023dcbb82a78f958c/section_crop-1073bf4a-2026-10-18T03-26-46-275Z.webp
   SECTION.md v3.2: `1073bf4a-e6f6-46ef-90d8-7d4fcb7dc85e` (deterministic evidence; editorial review pending)
3. **Features — Belgrade Arbor Features** (Home)
   Reusable feature composition from Home, organized around “Belgrade Arbor Features”.
   Capture: 1440×1074px; page bounds 3000–4074px of 15116px; source section ID: `fd321af3-9ebb-49d2-abf4-787529dcde11`; image: https://media.designdetails.io/library/5d5deb50e37648cc2c1a42767fa8fb9ca41f289c5bfee700c05ccb2069bed07f/section_crop-fd321af3-2026-10-18T03-26-47-295Z.webp
   SECTION.md v3.2: `fd321af3-9ebb-49d2-abf4-787529dcde11` (deterministic evidence; editorial review pending)
4. **Features — OFFICE SPACES AND RETAILS** (Home)
   Reusable feature composition from Home, organized around “OFFICE SPACES AND RETAILS”.
   Capture: 1440×1000px; page bounds 6074–7074px of 15116px; source section ID: `2ea909c1-ca9d-4058-9ed1-41e1d97414d3`; image: https://media.designdetails.io/library/d117edb3dc723d1ec2670cfc068398cefbd91d9de5ef0f4145866a74234cb0d5/section_crop-2ea909c1-2026-10-18T03-26-50-259Z.webp
   SECTION.md v3.2: `2ea909c1-ca9d-4058-9ed1-41e1d97414d3` (deterministic evidence; editorial review pending)
5. **Features — YOUR ROOTS** (Home)
   Reusable feature composition from Home, organized around “YOUR ROOTS”.
   Capture: 1440×1000px; page bounds 8074–9074px of 15116px; source section ID: `a52bdcb0-6f05-4701-abbd-8231f8b56c41`; image: https://media.designdetails.io/library/a0086f33b2530a190385cea654fd96229b1bff41198b60c591b8b8e07497d1aa/section_crop-a52bdcb0-2026-10-18T03-26-52-474Z.webp
   SECTION.md v3.2: `a52bdcb0-6f05-4701-abbd-8231f8b56c41` (deterministic evidence; editorial review pending)
6. **Features — AMENITIES** (Home)
   Reusable feature composition from Home, organized around “AMENITIES”.
   Capture: 1440×1000px; page bounds 9074–10074px of 15116px; source section ID: `680fe7d3-8c14-40ac-89e6-0b8ce00df4c5`; image: https://media.designdetails.io/library/f12aa0469648b1675fa0d3df9ae6d69f14c4486dfa9e6357fe93e94f94d83615/section_crop-680fe7d3-2026-10-18T03-26-53-483Z.webp
   SECTION.md v3.2: `680fe7d3-8c14-40ac-89e6-0b8ce00df4c5` (deterministic evidence; editorial review pending)
7. **Editorial — Residences Overview** (Home)
   AI suggestion (96% confidence): Complete, self-contained residence introduction with a prominent title, interior image, atmospheric background, and supporting descriptive copy; it ends cleanly before the apartment-type selector begins.
   Capture: 1440×981px; page bounds 4088–5069px of 15116px; source section ID: `13e36c68-6f4d-4407-ad18-4aa30722562e`; image: https://media.designdetails.io/library/b511eda762f36aa6ab18992e0b6c43a420348d655c6484221cd5228188118fb3/13e36c68-6f4d-4407-ad18-4aa30722562e.webp
   SECTION.md v3.2: `13e36c68-6f4d-4407-ad18-4aa30722562e` (deterministic evidence; editorial review pending)
8. **Features — Office Spaces and Retail** (Home)
   AI suggestion (97% confidence): Complete commercial-property showcase with a bold image-led heading, overview copy, inset imagery, space-category selector, unit count, supporting description, and CTA. Its full beginning and ending are visible and the composition is distinctive enough to reuse.
   Capture: 1440×2019px; page bounds 6076–8095px of 15116px; source section ID: `b7575491-6bb1-44fd-b2b0-59df38e8ed6b`; image: https://media.designdetails.io/library/07522441468528ebe75ab083c53a38a818d1e0c681199ba1d9cab800644e0f55/b7575491-6bb1-44fd-b2b0-59df38e8ed6b.webp
   SECTION.md v3.2: `b7575491-6bb1-44fd-b2b0-59df38e8ed6b` (deterministic evidence; editorial review pending)
9. **Gallery — View From Above — Rooftop Plans** (Home)
   AI suggestion (96% confidence): Complete, self-contained visual gallery with a prominent heading and two large aerial architectural views labeled A and B; it has clear boundaries before the following installment-plan section.
   Capture: 1440×2001px; page bounds 11075–13076px of 15116px; source section ID: `1fe9c87c-be7d-49a9-9826-ea69f6bad000`; image: https://media.designdetails.io/library/adf117a9d6830ca4484ab250306091319393576995f15bd5fc8fea45acf8cf3a/1fe9c87c-be7d-49a9-9826-ea69f6bad000.webp
   SECTION.md v3.2: `1fe9c87c-be7d-49a9-9826-ea69f6bad000` (deterministic evidence; editorial review pending)
10. **Footer — Belgrade Arbor community signup footer** (Home)
   AI suggestion (98% confidence): Complete, substantial page footer combining a newsletter form, site and social links, project disclaimer and contact details over a distinctive architectural image, with branding and copyright at the bottom.
   Capture: 1440×1039px; page bounds 14077–15116px of 15116px; source section ID: `87d4f15c-a803-4722-bc62-92f462f2b31b`; image: https://media.designdetails.io/library/567199ab793652429e05ac92da4d115c234347f240a6819a32a046c3bb884bcb/87d4f15c-a803-4722-bc62-92f462f2b31b.webp
   SECTION.md v3.2: `87d4f15c-a803-4722-bc62-92f462f2b31b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/a80c2b30c3b3a58a36a4823882796754fb520ab6f174bbf4aefffcc3c679f9d9/desktop_full-0dd74ebc-2026-10-18T03-26-35-322Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1c75d148dc38794f6de8cacf49db3005be2eaf338ab2920cfb0954adca55be02/mobile_full-0dd74ebc-2026-10-18T03-27-46-654Z.webp
- Open Graph image: https://media.designdetails.io/library/86dd74f13752468b937e54fa8660cbf4e7d1217b94c618451a12898a14d69b86/og_image-0dd74ebc-2026-10-18T03-26-44-350Z.webp
- Full-page video: https://media.designdetails.io/library/4a1ec62347c1bd078e3cd5737c1b5f81e7895eaff35f0480f7f435d2ef3dd260/motion-1792294576658.mp4
- Video poster: https://media.designdetails.io/library/4d66e41b6c7575de5e493ff6e57f10aaaa22c199881b528d7f1bc088818341f9/motion-poster-1792294576658.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
- Testimonial Card
- Primary Button
- Text Link
- Newsletter Form
- Footer
- Scroll Pinned Text Section
- Floating Image Block
- Interactive Map Overlay

## Quality rubric

Overall: 55.05/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Belgrade Arbor delivers a polished, on-brand luxury real-estate microsite built on a genuinely repeated layout/motion system — pinned label lists paired with parallax imagery and a horizontal pan — rather than a single hero trick, which is commendable. However, the palette is marred by an inconsistent neon accent, the display type scale reads as fluid rather than deliberately art-directed, and multiple sections show headline text colliding illegibly with overlapping photography. Combined with a scrollytelling toolkit that is now standard for this genre rather than distinctive, the overall execution lands solidly in the competent range: professional and functional, but short of the coherence and restraint required for a 'strong' rating.

- Typography (15%): 58 — A conventional but competently handled luxury-editorial pairing: a tall serif (editorialOld) for massive display statements against Work Sans for body/utility copy. The display sizes recorded (48px, 51.9px, 55.9px, 99.9px, 119.9px, 127.9px, 151.2px, 159.8px, 239.8px) look like fluid/clamp()-driven scaling rather than a deliberately art-directed type scale with discrete steps, which slightly undercuts the sense of intentional hierarchy despite the dramatic size swings.
- Color (10%): 60 — A cohesive earth-tone system (deep olive-green text, warm off-white canvas, bronze/gold accent) carries the 'arbor' concept consistently across sections, but a single saturated neon yellow-green (#E7FD55) used for 'Wing A' highlighting and scattered text breaks the otherwise restrained palette without an obvious system-level justification.
- Layout (20%): 56 — The site repeats a legible structural pattern — pinned label list on one side, traveling/floating imagery on the other — across Location, Residences, Business, and Amenities sections, which shows systemic thinking rather than a one-off hero trick. However, several screenshots show floating rounded-corner image cards overlapping and partially obscuring large headline text ('YOUR ROOTS', 'AMENITIES') in a way that reads as collision rather than intentional contrast, hurting legibility and polish.
- Motion (20%): 62 — The scroll-driven system (pinned text with parallax image slide-ins, a horizontal pan triggered by vertical scroll in the 'View From Above' section, and reversible playback when scrolling up) is applied across multiple distinct sections, showing more than a single decorative effect. This is a genuine scrollytelling mechanism, but the same technique also produces the text/image overlap problems noted in Layout, and no hover, easing quality, or performance evidence is available to confirm refined execution.
- Originality (25%): 45 — Scroll-pinned label lists paired with sliding parallax imagery, plus a horizontal-pan-on-vertical-scroll reveal, are now a recognizable formula within high-end real estate/agency microsites. The execution is professional but does not introduce a hard-to-substitute idea beyond this established scrollytelling toolkit; the architectural renderings and editorial type pairing are expected rather than surprising for this genre.
- Content (10%): 55 — Property information (unit counts, floor-plan categories, installment percentages, amenities, location pins, downloadable building permit) is woven into the visual flow reasonably well and tied to supporting imagery, but the same overlapping headline/image placements that hurt Layout also reduce how cleanly some content reads against its background.

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

A huge serif wordmark sits over a render of the building's tree-like facade, then gives way to a deep green panel that lets the eye rest before each section restarts. Cream backgrounds, numbered dividers and short bulleted lists for location, floor plans and amenities keep a long property brochure easy to scan room by room.

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