# Elespacio — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.elespacio.net/
Captured: 2026-10-06
CSS measured: 2026-10-06T14:44:39.585Z at 1440×1000 — https://www.elespacio.net/
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

The design features a bold, playful, and colourful aesthetic anchored by large, high-contrast typography using 'Bricolage Grotesque'. The layout frequently employs a split-screen approach, pairing quirky imagery (such as a running figure with a horse head) with stacked, brightly coloured feature cards. Pill-shaped, fully rounded UI elements dominate the navigation menu, buttons, and form fields, creating a friendly and approachable feel. The scroll-linked animations add significant dynamism to the otherwise solid, flat-coloured blocks.

## Classification

- Industry: creative
- Site type: Portfolio
- Business model: E-commerce, AI, Portfolio
- Styles: playful, colourful, bold, typographic
- Platform: Webflow
- Technology: Not identified

## Typography

- Display: Bricolage Grotesque — weight 300; size 72px; line-height 74.9px; tracking -2.2px; Regular (95% role confidence, computed values)
- Heading: Bricolage Grotesque — weight 700; size 44px; line-height 45.7px; tracking -0.9px; Regular (90% role confidence, computed values)
- Body: Bricolage Grotesque — weight 300; size 28px; line-height 36.3px; tracking -0.3px; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #201E1F: color-1: computed rgb(32, 30, 31); AI role: Dark #201E1F used as the primary background colour for the majority of the page. (95% role confidence, computed values)
- Surface — surface #F4EFE8: color-2: computed rgb(244, 239, 232); AI role: Off-white #F4EFE8 used for large text blocks on dark backgrounds and as a surface colour for some sections. (90% role confidence, computed values)
- Surface — surface #FFABC8: color-3: computed rgb(255, 171, 200); AI role: Pink #FFABC8 used extensively in the footer and on specific feature cards. (90% role confidence, computed values)
- Primary Action — primary action #FC4109: color-4: computed rgb(252, 65, 9); AI role: Orange #FC4109 used for the contact form submit area and key highlight cards. (85% 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": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "72px",
    "lineHeight": "74.9px",
    "letterSpacing": "-2.2px",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "h1",
        "text": "Elespacio is the space where brand and performance connect.",
        "top": 813,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Beefeater",
        "top": 4652,
        "property": "font"
      },
      {
        "tag": "div",
        "text": ",",
        "top": 4652,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "44px",
    "lineHeight": "45.7px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "How we accelerate growth",
        "top": 1262,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Brandformance",
        "top": 1282,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "REEAL™",
        "top": 1894,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "36px",
    "lineHeight": "39.5px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "What we can do for you",
        "top": 3885,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "We partnered with",
        "top": 4572,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Trusted by the finest",
        "top": 5186,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Elespacio launches a new agency operating model",
        "top": 6519,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Why brand-agency relationships fail, and how to fix them",
        "top": 6175,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "The future of marketing is custom AI infrastructure, not AI shortcuts",
        "top": 6210,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "14px",
    "lineHeight": "14.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 32,
    "contexts": [
      {
        "tag": "p",
        "text": "Sophia Abenante",
        "top": 5435,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Marketing Manager, Cynosure Lutronic",
        "top": 5451,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Nurat Gbadamosi",
        "top": 5499,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "20px",
    "lineHeight": "23px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "span",
        "text": "Start a project",
        "top": 47,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Work as one",
        "top": 1693,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Let’s get REEAL™",
        "top": 2305,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "36px",
    "lineHeight": "39.5px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "p",
        "text": "“Their on-site team was amazing!”",
        "top": 5375,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Elespacio's efforts increased revenue and machine sales for the client, particularly during peak sa",
        "top": 5360,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“When I start a project with Elespacio, I know that it will be seamless.”",
        "top": 5360,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "We follow shifts in design, marketing, culture, and social media — then take a stand on what they me",
        "top": 5845,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Calle Escudellers 10Bis, Entr -1, 08002 Barcelona",
        "top": 7373,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Sparrstraße 20,13353 Berlin",
        "top": 7373,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "28px",
    "lineHeight": "36.3px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Most agencies split the space between brand and performance. Elespacio closes it. You get one team a",
        "top": 1351,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "REEAL™ is our five-week sprint from insight to strategy, turning scattered thinking into one clear d",
        "top": 1963,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "AI accelerates the heavy lifting. Research, auditing, first drafts, and optimisation. At Elespacio, ",
        "top": 2575,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "64px",
    "lineHeight": "60.8px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "We make room for your brand’s next move. See how Brandformance and REEAL™ shape the strategy to get ",
        "top": 3955,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "Project",
        "top": 5306,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Project",
        "top": 5306,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Project",
        "top": 5306,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Start a project",
        "top": 86,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Work as one",
        "top": 1737,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Let’s get REEAL™",
        "top": 2348,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "19.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Home",
        "top": 643,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Case Studies",
        "top": 742,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 790,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Sep 2026",
        "top": 6561,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Sep 2026",
        "top": 6217,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Sep 2026",
        "top": 6252,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "72px",
    "lineHeight": "74.9px",
    "letterSpacing": "-2.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "brand and performance connect",
        "top": 882,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "700",
    "size": "64px",
    "lineHeight": "60.8px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "strong",
        "text": "We make room for your brand’s next move",
        "top": 3955,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "300",
    "size": "20px",
    "lineHeight": "23px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "hello@elespacio.net",
        "top": 7290,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Bricolage Grotesque",
    "fontStack": "\"Bricolage Grotesque\", Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "See all",
        "top": 5796,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#201E1F",
    "alpha": 1,
    "cssValue": "rgb(32, 30, 31)",
    "count": 164,
    "contexts": [
      {
        "tag": "body",
        "text": "/* Webflow Global Resets */ /* ================================================ Global Reset & Base ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Home",
        "top": 577,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 790,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4EFE8",
    "alpha": 1,
    "cssValue": "rgb(244, 239, 232)",
    "count": 192,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 577,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Home",
        "top": 643,
        "property": "text"
      },
      {
        "tag": "h1",
        "text": "Elespacio is the space where brand and performance connect.",
        "top": 813,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFABC8",
    "alpha": 1,
    "cssValue": "rgb(255, 171, 200)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 32,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Applied AIAI accelerates the heavy lifting. Research, auditing, first drafts, and optimisation. At E",
        "top": 2453,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "The space for Brandformance.All Brandformance servicesContent & social mediaPerformance marketingEma",
        "top": 6701,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FC4109",
    "alpha": 1,
    "cssValue": "rgb(252, 65, 9)",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "Contact",
        "top": 920,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "REEAL™REEAL™ is our five-week sprint from insight to strategy, turning scattered thinking into one c",
        "top": 1842,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 7255,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#A67325",
    "alpha": 1,
    "cssValue": "rgb(166, 115, 37)",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Case Studies",
        "top": 728,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "People poweredWe don't pitch with one team and deliver with another. The senior people you meet at t",
        "top": 3065,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#5D9DC5",
    "alpha": 1,
    "cssValue": "rgb(93, 157, 197)",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Services",
        "top": 776,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "BrandformanceMost agencies split the space between brand and performance. Elespacio closes it. You g",
        "top": 1230,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#E7BFFF",
    "alpha": 1,
    "cssValue": "rgb(231, 191, 255)",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "About",
        "top": 872,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "ProjectHigh-end communication for Nespresso“When I start a project with Elespacio, I know that it wi",
        "top": 5266,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1C3D24",
    "alpha": 1,
    "cssValue": "rgb(28, 61, 36)",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "Insights",
        "top": 822,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "ProjectPerformance, data analytics and adtech for Cricut “Elespacio's efforts increased revenue and ",
        "top": 5266,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 9,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 40,
        "property": "svg-fill"
      }
    ]
  }
]
```

### 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 vertical spacing between major sections, with tight, clustered spacing within stacked elements like the nav and feature cards.
- Corner style: Fully rounded (pill-shaped) for interactive and container elements, mixed with sharp right angles on the large feature cards.
- Radius: Maximum corner radius resulting in semicircular ends on buttons, navigation items, and form fields.
- Borders: Thin (likely 1px) solid borders used to define empty or inactive pill shapes (e.g., 'Home' nav item, newsletter input).
- Buttons: Pill-shaped, typically featuring a solid background colour and often accompanied by a small arrow icon.
- Content width: Wide layouts that utilize the full viewport width, often splitting content into distinct left and right columns.
- Density: Low density with ample negative space around text and between distinct visual blocks, allowing the bold elements to breathe.
- Evidence: Visible throughout the navigation pills, the 'Start a project' button, the stacked coloured cards, and the generously padded footer.

## Sections

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

1. **Hero — Brand and performance connect** (Home)
   AI suggestion (94% confidence): Complete opening hero with agency branding, project CTA, prominent Cricut campaign visual, and a bold positioning statement; it ends before the growth-services content begins.
   Capture: 1440×1215px; page bounds 0–1215px of 7571px; source section ID: `4a6395d9-5c40-4221-8b9e-25b5dabf28fe`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/b26af59ba60db3161b6e455d5f414ec5e144e726468b20812922a8aa8f23a2c5/4a6395d9-5c40-4221-8b9e-25b5dabf28fe.webp
   SECTION.md v3.2: `4a6395d9-5c40-4221-8b9e-25b5dabf28fe` (deterministic evidence; editorial review pending)
2. **Hero — Opening screen** (Case Studies)
   Opening hero composition from Case Studies, organized around “Opening screen”.
   Capture: 1440×1000px; page bounds 0–1000px of 5014px; source section ID: `8824c098-f082-46ce-b86f-a1c528c6b6d7`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/289bedc3fd67a8de826f0b0f168cc2114d1858d756b94d9bdf384c800de5d2fe/section_crop-8824c098-2026-10-06T15-02-18-207Z.webp
   SECTION.md v3.2: `8824c098-f082-46ce-b86f-a1c528c6b6d7` (deterministic evidence; editorial review pending)
3. **Features — Elespacio is the space where brand and performance connect.** (Home)
   Reusable feature composition from Home, organized around “Elespacio is the space where brand and performance connect.”.
   Capture: 1440×385px; page bounds 733–1118px of 7571px; source section ID: `8a37161b-b143-4ca4-afc0-2fee0687aa3a`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/a569c5de34025a45c04791003e078ec85b1c97c5a14f88108bcf9bc1e3ad9742/section_crop-8a37161b-2026-10-06T14-44-51-144Z.webp
   SECTION.md v3.2: `8a37161b-b143-4ca4-afc0-2fee0687aa3a` (deterministic evidence; editorial review pending)
4. **Features — Brandformance** (Home)
   Reusable feature composition from Home, organized around “Brandformance”.
   Capture: 1440×2607px; page bounds 1118–3725px of 7571px; source section ID: `172fac6d-f975-49f1-9ad0-2a8cf3263d13`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2347ed0adc032ec6a545c9ffae83516222612cb8c985112eb3a633b5c2aeb7d7/section_crop-172fac6d-2026-10-06T14-44-52-060Z.webp
   SECTION.md v3.2: `172fac6d-f975-49f1-9ad0-2a8cf3263d13` (deterministic evidence; editorial review pending)
5. **Features — Trusted by the finest** (Home)
   Reusable feature composition from Home, organized around “Trusted by the finest”.
   Capture: 1440×600px; page bounds 5026–5626px of 7571px; source section ID: `d37cff93-1245-42c6-84bc-81fd317ec3f3`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/b7a0595ea918ab436652287e8755952ee466eb5b08c42e6a2cdf82629faa54a1/section_crop-d37cff93-2026-10-06T14-44-55-355Z.webp
   SECTION.md v3.2: `d37cff93-1245-42c6-84bc-81fd317ec3f3` (deterministic evidence; editorial review pending)
6. **CTA — What we can do for you** (Home)
   AI suggestion (93% confidence): Complete text-led services CTA with a clear eyebrow, bold value proposition, linked service names, and distinct light-background boundaries.
   Capture: 1440×666px; page bounds 3752–4418px of 7571px; source section ID: `6cb03445-3065-4286-9487-1455df463cc8`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/ec810fa697e8d310fea9acb1013798c158310e09129e0544f8cc61acc3be0844/6cb03445-3065-4286-9487-1455df463cc8.webp
   SECTION.md v3.2: `6cb03445-3065-4286-9487-1455df463cc8` (deterministic evidence; editorial review pending)
7. **Testimonials — Brand partner roster** (Home)
   AI-proposed category: client-list
AI suggestion (87% confidence): Self-contained social-proof block presenting a prominent curated list of recognizable client brands before the next testimonial area begins.
   Capture: 1440×654px; page bounds 4421–5075px of 7571px; source section ID: `e47a3c53-1dbe-445a-ab3f-e36705bd6bfb`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/c1506734cba4c103f5f5e4b49103c145c71575cdddb5029e984b7b1ead9319f8/e47a3c53-1dbe-445a-ab3f-e36705bd6bfb.webp
   SECTION.md v3.2: `e47a3c53-1dbe-445a-ab3f-e36705bd6bfb` (deterministic evidence; editorial review pending)
8. **Editorial — Industry Insights Editorial Grid** (Home)
   AI suggestion (96% confidence): Complete insights section with heading, description, link, and a finished three-article editorial layout featuring one dominant story and two supporting stories.
   Capture: 1440×844px; page bounds 5779–6623px of 7571px; source section ID: `75d9f1b5-3bf9-40ee-b820-3e39168d419b`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/acbb5aab4153ba28e392f2a89df637d98f04fb4b5fce47b652d1f3f16248f835/75d9f1b5-3bf9-40ee-b820-3e39168d419b.webp
   SECTION.md v3.2: `75d9f1b5-3bf9-40ee-b820-3e39168d419b` (deterministic evidence; editorial review pending)
9. **Footer — Brandformance Contact Footer** (Home)
   AI suggestion (98% confidence): Complete, substantial footer combining brand positioning, service filters, office locations, contact details, social links, newsletter action, and legal links.
   Capture: 1440×870px; page bounds 6701–7571px of 7571px; source section ID: `31ace503-d854-4217-bad1-18430218e16f`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2b9535559a4368aba21e7a3811dc397808247d6bd0716202915486228e5d6869/31ace503-d854-4217-bad1-18430218e16f.webp
   SECTION.md v3.2: `31ace503-d854-4217-bad1-18430218e16f` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/82806b9bcd4cc7199304fd6b821fd7cbf185009068e5991ddca86f24acdd3e86/desktop_full-6121e206-2026-10-06T14-44-39-595Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/eac34e214a4fc5631d970c40c3b36dab09fb621c3faa582b4ad25e3d1d9a4e63/mobile_full-6121e206-2026-10-06T14-45-26-401Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/18d0f254f611e437106134624dc527a44e2f275e94d9b117275ce2472d017d07/og_image-6121e206-2026-10-06T14-44-49-186Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/c6077e7f55f3e47fdd0068c40064e02bda6fa6878a1a5ce4862795d28feca4a1/motion-1791299203358.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/5ef5ed9333db6e52bf9342a3cac893b16f0573af57bbdf32642cf396be81cef9/motion-poster-1791299203358.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
- Primary Button
- Feature Card
- Editorial Card
- Footer
- Floating Stacked Navigation
- Pill Shaped Containers

## Quality rubric

Overall: 58.15/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Elespacio executes a confident, high-contrast visual identity — bold Grotesque type, a saturated colour-coded card system, and an ambitious multi-part scroll choreography — with enough consistency across sections to read as a genuine system rather than isolated flourishes. But nearly every component (floating pill nav, stacked colour cards, scroll-scrubbed hero video, outline-to-fill text reveal) belongs to a widely used contemporary agency-site vocabulary, and the repeated single-column card template across most sections keeps the experience feeling templated. The result is a competently built, polished site rather than one with distinctive, hard-to-substitute ideas.

- Typography (15%): 61 — A single family (Bricolage Grotesque) is deployed across a disciplined scale (14px to 72px) with consistent negative tracking and weight shifts (300/400/700) to build hierarchy from body copy to hero statements. This is competent and legible, but the hierarchy relies almost entirely on size/weight contrast within one typeface rather than any distinctive pairing, optical sizing, or expressive treatment beyond the outline-to-fill partner-list reveal.
- Color (10%): 58 — A clear, repeatable palette (dark canvas #201E1F, cream #F4EFE8, pink #FFABC8, orange #FC4109, blue #5D9DC5, mustard #A67325, purple #E7BFFF, green #1C3D24) is used to code distinct feature cards and the footer, giving the site a confident, saturated identity. However, the combination of flat primary-ish hues in blocky panels is a widely seen agency-site convention, and the palette's job is mostly to differentiate cards rather than express meaning or build subtlety (e.g., no tonal gradation, no restrained accent-vs-neutral logic).
- Layout (20%): 64 — The page uses several distinct structural ideas — a floating vertical pill-stack nav, a split hero pairing distorted product imagery with a statement headline, overlapping colour-card stacks, a full-bleed partner-name block, and horizontal-feeling testimonial cards — and these recur with enough consistency (pill shapes, full-width colour blocks, generous negative space) to form a system rather than one-off flourishes. Density is kept low and sections breathe, but the reliance on tall stacked single-column blocks for most content produces a very long, repetitive scroll with limited compositional variety within each block.
- Motion (20%): 65 — Motion is extensive and multi-part: a scroll-scrubbed video sequence in the hero, sequential card stacking/sliding, an outline-to-fill text reveal on the partner list, a vertical-scroll-driven horizontal card shift in testimonials, and a final image-stacking flourish at page top — with reverse-scroll parity reported. This is a genuine system of scroll-linked choreography rather than a single hero effect, which satisfies the bar for coherence across sections. However, no hover/interaction detail is evidenced, and the techniques (parallax stacking, text-fill reveal, scroll-hijacked horizontal movement) are now common in agency/Webflow scrollytelling, so despite the quantity, the vocabulary itself is familiar rather than exceptional.
- Originality (25%): 46 — The floating pill-stack navigation is a mildly distinctive idea, and the horse-headed running figure adds a quirky visual hook, but the overall language — stacked flat-colour feature cards, pill buttons/inputs everywhere, scroll-scrubbed hero video, outline-to-fill text reveal, oversized Grotesque display type on dark canvas — closely matches a now-common genre of 2023–2025 Webflow agency sites. No single idea here is hard to substitute; swapping the mascot image or palette would not change the underlying experience, which is built from recognizable, reusable components rather than a bespoke conceptual framework tied to Elespacio's specific positioning.
- Content (10%): 59 — Content is reasonably woven into the visual system: case-study results (Cricut ROAS stat) appear inside the scroll-scrubbed hero media, client testimonials sit inside colour-coded cards with real photography, and the partner list is treated as a typographic centerpiece rather than a logo wall. This shows intent to integrate copy and proof points into the design rather than bolting them on, though the feature cards (Brandformance, REEAL™, Applied AI, People powered) use fairly generic marketing copy inside identical templates, limiting how much the content itself drives distinct visual treatment.

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 near-black page lets bold blocks of blue, orange and pink carry each section, so case studies and services read like distinct cards rather than a wall of text. A repeating horse-and-model cutout and a fixed pill-shaped side menu give the long scroll a steady rhythm, helping visitors track where they are as results and client logos build credibility.

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