# Call-to-action footer Schema: Design Details SECTION.md v3.2 Website: LxL Creative Source: https://www.lxlcreative.co.uk/ Source section IDs: 37afdbdc-e59b-4b0b-9489-2462d60dd922, 9b03aebf-8407-4bba-9c3d-3612633dbc36 Status: AI analysed; vocabulary promotion is automated ## Classification - Type: footer - Layout: centered - Styles: bold, typographic - Confidence: 100% ## Purpose and structure A bold, dark-themed footer featuring a prominent call to action to start a production, accompanied by a small video thumbnail. Visual signature: Centered, oversized typography 'GOT A PRODUCTION COMING UP?' beneath a compact, playing video element, framed by dark space and a red squiggle. ## Components - headline - call-to-action - video-thumbnail - social-links ## Typography - Display: Owners Wide — 54.9px 700 - Heading: Owners Wide — 22.9px 700 - Body: Manrope — 17.4px 500 ## Functional palette - Canvas: canvas #27201D - Primary-Action: primary action #FF5121 - Text: text #FCF2BD - Text: text #FFFFFF ## Motion evidence - 51.0–56.0s — A large text block 'GOT A PRODUCTION COMING UP? LETS DO SOMETHING GREAT TOGETHER' scrolls into view. A smaller video thumbnail above it shrinks slightly as it centers. (88% confidence) ## Section quality Overall: 61.15/100 (Good) Scored coverage: 100% - Typography: 66 — Confident, oversized uppercase display type (Owners Wide) is well-used for hierarchy, with a nice contrast hit from the cursive orange 'great' script breaking the block uppercase rhythm. This mixed-type moment gives the headline some personality beyond generic bold-caps CTAs, but overall it's a single centered block with no further typographic refinement (no varied tracking, no secondary supporting copy treatment). Next tier: Needs more typographic layering or unexpected scale/weight contrast beyond the single script accent to earn strong/memorable status. - Composition: 62 — Clean centered composition with generous negative space, a compact video thumbnail anchoring above the headline, and an organic red squiggle line breaking the geometry at the bottom-left. The squiggle is a nice unexpected compositional device, but the overall layout (centered stack: media, headline, button) is a common CTA-footer pattern without a distinctive structural idea. Next tier: Requires a more unexpected spatial relationship between elements (e.g., asymmetry, overlap, tension) rather than a straightforward centered stack to reach strong tier. - Motion: 55 — Gemini reports a specific timestamped moment (51–56s) where the headline scrolls into view and the video thumbnail shrinks slightly while centering — a modest but purposeful reveal sequence rather than a generic fade. Next tier: Only one simple scroll/shrink transition is evidenced; no secondary choreography, staggering, or distinctive timing that would push motion into polished/strong territory. - Content: 58 — The video thumbnail (behind-the-scenes production footage) directly supports the CTA's message about production work, giving the section a concrete, on-brand visual anchor rather than a stock or generic image. Next tier: Content is a single supporting thumbnail with no additional contextual detail (e.g., client name, case reference) that would deepen integration with the message. - Originality: 60 — The pairing of a small looping video above an oversized all-caps CTA headline, accented by a hand-drawn script word and an organic squiggle line, distinguishes this from a purely generic 'contact us' footer. Next tier: The core pattern (centered headline + button + social links) is still a familiar footer template; more distinctive structural or interactive originality is needed for strong tier. - Adaptability: 64 — Deterministic evidence shows clear separable layers: flex column root, discrete video/thumbnail media block, headline text, pill CTA button, and independent SVG squiggle/social icons — all with defined rects, making skin vs. structure separation straightforward. Next tier: Lack of documented interaction/animation parameters for the CTA button and icons limits certainty about how much behavioral logic (vs. static styling) needs to transfer. Strengths: - Confident oversized display typography paired with a cursive script accent breaks up an otherwise uniform uppercase block - Compact autoplaying video thumbnail reinforces the production/craft message directly - Organic red squiggle line injects an unexpected asymmetrical accent into an otherwise centered, symmetrical layout - Clear deterministic component separation (media, headline, button, icons) supports clean structural extraction Weaknesses: - Overall layout is a conventional centered CTA-footer stack common to many marketing sites - Motion evidence is limited to a single simple scroll/shrink transition with no secondary choreography - Content integration relies on one small thumbnail without deeper contextual tie-in - No documented interactive parameters (hover states, button animation) reduce certainty on adaptability of behavior Why it does not reach the next tier: The section is polished and coherent but relies on a familiar centered CTA template; achieving strong/memorable tier would need a more inventive spatial or interactive idea beyond the script-word and squiggle accents, plus richer, more varied motion choreography. ## Adaptation guidance - Effort: Medium - Guidance: Reproduce the centered stack structure (media block, headline with mixed type treatment, CTA button) and the scroll-triggered shrink/center motion; swap in different display font, palette, and squiggle graphic to retheme, but the underlying video player and script-accent typography require custom asset substitution. What transfers: - Centered flex layout with oversized uppercase display headline - Small autoplaying video thumbnail above headline pattern - Pill-shaped solid CTA button with icon - Organic accent line as a decorative background element - Cursive script word treatment for emphasis within headline Dependencies: - Custom Owners Wide font for display headline - Specific orange/cream/dark palette for accent and text contrast - Bespoke SVG squiggle asset - Video asset for thumbnail (bunny-player) requiring custom player integration ## 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 visible timestamped detail on button hover or icon interactions - Motion evidence limited to one scroll-in moment; cannot assess full animation richness - Cannot verify exact font rendering or color values beyond provided tokens ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: footer - Source type: footer - Structure: centered single-column - Layout: centered - Styles: bold, typographic - Components: headline, call-to-action, video-thumbnail, social-links - Purpose: A bold, dark-themed footer featuring a prominent call to action to start a production, accompanied by a small video thumbnail. - Visual signature: Centered, oversized typography 'GOT A PRODUCTION COMING UP?' beneath a compact, playing video element, framed by dark space and a red squiggle. ### Crop and composition - Crop: 1440×890px; aspect ratio 1.618:1 - Page bounds: 1000–1890px of 1890px - Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. ### 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": [ { "role": "UI/supporting text", "family": "Owners Wide", "stack": "\"Owners Wide\", Impact, sans-serif", "size": "15.4px", "weight": "700", "lineHeight": "18.5px", "letterSpacing": "normal", "sample": "Drag", "element": "span", "occurrences": 13, "sourceId": "font-1" }, { "role": "card/subheading", "family": "Owners Wide", "stack": "\"Owners Wide\", Impact, sans-serif", "size": "22.9px", "weight": "700", "lineHeight": "22.9px", "letterSpacing": "normal", "sample": "Activations", "element": "h3", "occurrences": 6, "sourceId": "font-2" }, { "role": "section heading", "family": "Owners Wide", "stack": "\"Owners Wide\", Impact, sans-serif", "size": "42.3px", "weight": "700", "lineHeight": "42.3px", "letterSpacing": "normal", "sample": "\"Through every twist, turn and curve ball, (and in our industry there are always a few), they always", "element": "div", "occurrences": 5, "sourceId": "font-3" }, { "role": "section heading", "family": "Owners Wide", "stack": "\"Owners Wide\", Impact, sans-serif", "size": "54.9px", "weight": "700", "lineHeight": "49.4px", "letterSpacing": "normal", "sample": "LxL produces 360° creative campaigns for some of the biggest names in entertainment. From key art to", "element": "p", "occurrences": 3, "sourceId": "font-4" }, { "role": "section heading", "family": "Scribo", "stack": "Scribo, Georgia, sans-serif", "size": "101.7px", "weight": "400", "lineHeight": "91.5px", "letterSpacing": "normal", "sample": "Why lxl", "element": "h2", "occurrences": 2, "sourceId": "font-5" }, { "role": "section heading", "family": "Manrope", "stack": "Manrope, Arial, sans-serif", "size": "28.6px", "weight": "600", "lineHeight": "28.6px", "letterSpacing": "normal", "sample": "From a garden shed to a creative hub in Soho, LxL is a nimble 360° agency with the ability to work a", "element": "p", "occurrences": 2, "sourceId": "font-7" }, { "role": "body/supporting copy", "family": "Manrope", "stack": "Manrope, Arial, sans-serif", "size": "17.4px", "weight": "500", "lineHeight": "24.4px", "letterSpacing": "normal", "sample": "From concept through to delivery, we create and produce campaigns that are thoughtful, collaborative", "element": "p", "occurrences": 12, "sourceId": "font-8" }, { "role": "body/supporting copy", "family": "Manrope", "stack": "Manrope, Arial, sans-serif", "size": "16.3px", "weight": "500", "lineHeight": "16.3px", "letterSpacing": "normal", "sample": "00:00", "element": "p", "occurrences": 3, "sourceId": "font-9" }, { "role": "UI/supporting text", "family": "Manrope", "stack": "Manrope, Arial, sans-serif", "size": "14.4px", "weight": "600", "lineHeight": "14.4px", "letterSpacing": "normal", "sample": "All services", "element": "div", "occurrences": 5, "sourceId": "font-11" }, { "role": "section heading", "family": "Scribo", "stack": "Scribo, Georgia, sans-serif", "size": "98.8px", "weight": "400", "lineHeight": "29.6px", "letterSpacing": "normal", "sample": "biggest", "element": "strong", "occurrences": 4, "sourceId": "font-12" }, { "role": "UI/supporting text", "family": "Manrope", "stack": "Manrope, Arial, sans-serif", "size": "13px", "weight": "600", "lineHeight": "18.2px", "letterSpacing": "normal", "sample": "Sound", "element": "span", "occurrences": 4, "sourceId": "font-13" }, { "role": "section heading", "family": "Scribo", "stack": "Scribo, Georgia, sans-serif", "size": "51.4px", "weight": "400", "lineHeight": "15.4px", "letterSpacing": "normal", "sample": "360°", "element": "strong", "occurrences": 1, "sourceId": "font-15" }, { "role": "section heading", "family": "Scribo", "stack": "Scribo, Georgia, sans-serif", "size": "45.7px", "weight": "400", "lineHeight": "45.7px", "letterSpacing": "normal", "sample": "Featured", "element": "div", "occurrences": 1, "sourceId": "font-16" } ], "siteRoles": [ { "role": "display", "size": "54.9px", "family": "Owners Wide", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-4: computed CSS at 1440×1000; AI role: Owners Wide at 54.9px, used for major structural section headings like 'Our services' and 'Got a production coming up?'.", "sampleId": "font-4", "confidence": 1, "lineHeight": "49.4px", "letterSpacing": "normal" }, { "role": "heading", "size": "22.9px", "family": "Owners Wide", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-2: computed CSS at 1440×1000; AI role: Owners Wide at 22.9px, used for card and subsection titles like 'Activations' and 'EPK'.", "sampleId": "font-2", "confidence": 0.85, "lineHeight": "22.9px", "letterSpacing": "normal" }, { "role": "body", "size": "17.4px", "family": "Manrope", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: Manrope at 17.4px, used for paragraph descriptions and body copy across the site.", "sampleId": "font-8", "confidence": 0.95, "lineHeight": "24.4px", "letterSpacing": "normal" } ] } ``` ### 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": [ { "value": "#27201D", "cssValue": "rgb(39, 32, 29)", "alpha": 1, "appliedAs": [ "background", "text" ], "occurrences": 16, "sourceId": "color-2" }, { "value": "#000000", "cssValue": "color(srgb 0 0 0 / 0.2)", "alpha": 0.2, "appliedAs": [ "background" ], "occurrences": 4, "sourceId": "color-3" }, { "value": "#055DFF", "cssValue": "rgb(5, 93, 255)", "alpha": 1, "appliedAs": [ "text", "background" ], "occurrences": 2, "sourceId": "color-6" }, { "value": "#D2E1EB", "cssValue": "color(srgb 0.824235 0.882588 0.922706)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 1, "sourceId": "color-7" }, { "value": "#FCF2BD", "cssValue": "color(srgb 0.988235 0.94902 0.741176 / 0.7)", "alpha": 0.7019607843137254, "appliedAs": [ "text" ], "occurrences": 15, "sourceId": "color-8" }, { "value": "#FFFFFF", "cssValue": "rgb(255, 255, 255)", "alpha": 1, "appliedAs": [ "text", "background" ], "occurrences": 49, "sourceId": "color-9" }, { "value": "#646464", "cssValue": "rgba(100, 100, 100, 0.2)", "alpha": 0.2, "appliedAs": [ "background" ], "occurrences": 1, "sourceId": "color-10" }, { "value": "#281E1E", "cssValue": "color(srgb 0.152941 0.12549 0.113725 / 0.2)", "alpha": 0.2, "appliedAs": [ "border" ], "occurrences": 16, "sourceId": "color-11" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.2)", "alpha": 0.2, "appliedAs": [ "background", "border" ], "occurrences": 26, "sourceId": "color-12" }, { "value": "#FFF5BA", "cssValue": "color(srgb 0.988235 0.94902 0.741176 / 0.1)", "alpha": 0.10196078431372547, "appliedAs": [ "background" ], "occurrences": 4, "sourceId": "color-13" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.1)", "alpha": 0.10196078431372547, "appliedAs": [ "control-background", "border" ], "occurrences": 5, "sourceId": "color-14" }, { "value": "#FAF0BE", "cssValue": "color(srgb 0.988235 0.94902 0.741176 / 0.2)", "alpha": 0.2, "appliedAs": [ "border" ], "occurrences": 16, "sourceId": "color-15" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.15)", "alpha": 0.14901960784313725, "appliedAs": [ "background" ], "occurrences": 1, "sourceId": "color-16" } ], "functionalPalette": [ { "hex": "#27201D", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(39, 32, 29); AI role: The dominant deep brownish-black (#27201D) serving as the main background color for the page body.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#FF5121", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-4: computed rgb(255, 81, 33); AI role: Vibrant orange (#FF5121) used for CTA buttons and the prominent SVG accent lines.", "sampleId": "color-4", "confidence": 1 }, { "hex": "#FCF2BD", "name": "text", "role": "text", "source": "computed", "evidence": "color-5: computed rgb(252, 242, 189); AI role: Pale cream/yellow (#FCF2BD) applied to primary headings, navigation links, and the main logo.", "sampleId": "color-5", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-9: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for secondary text overlays on images and alternate components.", "sampleId": "color-9", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Fully rounded (pill-shaped) for buttons and moderately rounded corners for image frames/cards.", "density": "Low density; the design prioritizes large empty spaces and oversized elements over information density.", "evidence": "Observed via CSS facts: button backgrounds (color-4), border-radius on cards, spacing around text blocks, and the overall viewport utilization in the screenshots.", "borderStyle": "Mostly borderless design relying on contrast between content and canvas, with occasional subtle translucent borders on minor interactive elements.", "buttonStyle": "Solid fill with the accent orange color, completely rounded ends (pill shape), paired with small, tracked-out sans-serif text and an arrow icon.", "cornerStyle": "Prominently rounded edges on all interactive and contained elements.", "contentWidth": "Wide layout that breaks traditional strict columns, utilizing asymmetrical split sections and fluid horizontal space.", "spacingRhythm": "Generous and airy rhythm with large vertical margins separating distinct content sections, allowing the oversized typography and graphics to breathe." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×6000px; flex; padding {"top":"0px","right":"0px","bottom":"0px","left":"0px"}; gap normal; background rgb(39, 32, 29); radius 0px. - Observed gaps: 6, 16, 20, 45.7px. - Representative content widths: 1371, 839, 774, 746, 576, 564, 549, 513px. - Layout containers: 7; cards/surfaces: 12; media elements: 12; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 1000, "bottom": 16396, "pageHeight": 16396 } }, "container": { "size": "1440×6000px", "position": "x 0px, y 4746px", "display": "flex", "positionMode": "relative", "padding": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }, "margin": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgb(39, 32, 29)", "radius": "0px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 6, 16, 20, 45.7 ], "representativeContentWidthsPx": [ 1371, 839, 774, 746, 576, 564, 549, 513 ] }, "columns": [ { "element": "div · \"Through every twist, turn and curve ball, (and in our industry there are always a few), they always", "size": "1371×300px", "position": "x 34px, y 14089px", "display": "grid", "template": "1371.41px", "direction": "row", "gap": "normal" }, { "element": "section · SoundLxL produces 360° creative campaigns for some of the biggest names in entertainment. From key a", "size": "1440×3746px", "position": "x 0px, y 1000px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" }, { "element": "section · Our servicesFrom concept through to delivery, we create and produce campaigns that are thoughtful, c", "size": "1440×6000px", "position": "x 0px, y 4746px", "display": "flex", "template": "not captured", "direction": "column", "gap": "normal" }, { "element": "div · Activations", "size": "290×363px", "position": "x 918px, y 5171px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" }, { "element": "div · Editorial", "size": "290×363px", "position": "x 918px, y 5171px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" }, { "element": "div · EPK", "size": "290×363px", "position": "x 918px, y 5171px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" }, { "element": "div · Unit", "size": "290×363px", "position": "x 918px, y 5171px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "div · Activations", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "a · clickable_link w-inline-block", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · Editorial", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "a · clickable_link w-inline-block", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · EPK", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "a · clickable_link w-inline-block", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · Unit", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "a · clickable_link w-inline-block", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · Social Campaigns", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "a · clickable_link w-inline-block", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "div · Key Art", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" }, { "element": "a · clickable_link w-inline-block", "size": "290×363px", "position": "x 918px, y 5171px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" } ], "surfaces": { "radii": [ "1440px", "12px", "16px" ], "borders": [ "1px solid color(srgb 0.152941 0.12549 0.113725 / 0.2)" ], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · u-image", "size": "1440×1100px", "position": "x 0px, y 11637px", "aspectRatio": 1.3, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69ef155883341bfdcff936e5/69f0c35b1c1bd2bf6aaf7283_project-hero_bake-off.avif" }, { "element": "svg · svg", "size": "1440×991px", "position": "x 0px, y 10696px", "aspectRatio": 1.5, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "source": "source not captured" }, { "element": "svg · svg", "size": "1440×872px", "position": "x 0px, y 13328px", "aspectRatio": 1.7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "source": "source not captured" }, { "element": "img · u-image", "size": "564×706px", "position": "x 726px, y 12943px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif" }, { "element": "img · u-image", "size": "564×706px", "position": "x 726px, y 12943px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif" }, { "element": "img · u-image", "size": "564×706px", "position": "x 726px, y 12943px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif" }, { "element": "img · u-image", "size": "564×706px", "position": "x 726px, y 12943px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif" }, { "element": "img · u-image", "size": "564×706px", "position": "x 726px, y 12943px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif" }, { "element": "img · u-image", "size": "564×706px", "position": "x 150px, y 14636px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/69ef20d5df869df8c6e0337c_home-hero-04.avif" }, { "element": "img · u-image", "size": "449×561px", "position": "x 150px, y 10911px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a6a080bf4ebee09cf462f56_Group%20Shot%20Edited%20(1).avif" }, { "element": "video · bunny-bg__video", "size": "549×366px", "position": "x 445px, y 1200px", "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "blob:https://www.lxlcreative.co.uk/10274772-72cf-4391-b233-4463fdb07ab3" }, { "element": "svg · svg", "size": "576×298px", "position": "x 0px, y 16098px", "aspectRatio": 1.9, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "source": "source not captured" } ] ``` #### 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 { "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "capturedAt": "2026-09-21T04:23:45.720Z", "viewportWidth": 1440, "bounds": { "top": 1000, "bottom": 16396, "pageHeight": 16396 }, "root": { "id": "ld-394", "tag": "section", "role": null, "label": "Our servicesFrom concept through to delivery, we create and produce campaigns that are thoughtful, c", "rect": { "x": 0, "y": 4746, "width": 1440, "height": 6000 }, "display": "flex", "position": "relative", "padding": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }, "margin": { "top": "0px", "right": "0px", "bottom": "0px", "left": "0px" }, "gap": "normal", "columns": null, "background": "rgb(39, 32, 29)", "radius": "0px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "overflow": "visible" }, "spacing": { "gapsPx": [ 6, 16, 20, 45.7 ], "representativeContentWidthsPx": [ 1371, 839, 774, 746, 576, 564, 549, 513 ] }, "columns": [ { "id": "ld-803", "tag": "div", "role": "list", "label": "\"Through every twist, turn and curve ball, (and in our industry there are always a few), they always", "rect": { "x": 34, "y": 14089, "width": 1371, "height": 300 }, "display": "grid", "columns": "1371.41px", "direction": "row", "gap": "normal" }, { "id": "ld-369", "tag": "section", "role": null, "label": "SoundLxL produces 360° creative campaigns for some of the biggest names in entertainment. From key a", "rect": { "x": 0, "y": 1000, "width": 1440, "height": 3746 }, "display": "flex", "columns": null, "direction": "column", "gap": "normal" }, { "id": "ld-394", "tag": "section", "role": null, "label": "Our servicesFrom concept through to delivery, we create and produce campaigns that are thoughtful, c", "rect": { "x": 0, "y": 4746, "width": 1440, "height": 6000 }, "display": "flex", "columns": null, "direction": "column", "gap": "normal" }, { "id": "ld-426", "tag": "div", "role": "listitem", "label": "Activations", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "display": "flex", "columns": null, "direction": "row", "gap": "normal" }, { "id": "ld-442", "tag": "div", "role": "listitem", "label": "Editorial", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "display": "flex", "columns": null, "direction": "row", "gap": "normal" }, { "id": "ld-458", "tag": "div", "role": "listitem", "label": "EPK", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "display": "flex", "columns": null, "direction": "row", "gap": "normal" }, { "id": "ld-474", "tag": "div", "role": "listitem", "label": "Unit", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "display": "flex", "columns": null, "direction": "row", "gap": "normal" } ], "cards": [ { "id": "ld-426", "tag": "div", "role": "listitem", "label": "Activations", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ] }, { "id": "ld-441", "tag": "a", "role": null, "label": "clickable_link w-inline-block", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "0px", "0px", "0px", "0px" ] }, { "id": "ld-442", "tag": "div", "role": "listitem", "label": "Editorial", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ] }, { "id": "ld-457", "tag": "a", "role": null, "label": "clickable_link w-inline-block", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "0px", "0px", "0px", "0px" ] }, { "id": "ld-458", "tag": "div", "role": "listitem", "label": "EPK", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ] }, { "id": "ld-473", "tag": "a", "role": null, "label": "clickable_link w-inline-block", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "0px", "0px", "0px", "0px" ] }, { "id": "ld-474", "tag": "div", "role": "listitem", "label": "Unit", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ] }, { "id": "ld-489", "tag": "a", "role": null, "label": "clickable_link w-inline-block", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "0px", "0px", "0px", "0px" ] }, { "id": "ld-490", "tag": "div", "role": "listitem", "label": "Social Campaigns", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ] }, { "id": "ld-505", "tag": "a", "role": null, "label": "clickable_link w-inline-block", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "0px", "0px", "0px", "0px" ] }, { "id": "ld-506", "tag": "div", "role": "listitem", "label": "Key Art", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "22.864px", "22.864px", "22.864px", "22.864px" ] }, { "id": "ld-521", "tag": "a", "role": null, "label": "clickable_link w-inline-block", "rect": { "x": 918, "y": 5171, "width": 290, "height": 363 }, "radius": "12px", "border": "0px none rgb(252, 242, 189)", "shadow": "none", "background": "rgba(0, 0, 0, 0)", "padding": [ "0px", "0px", "0px", "0px" ] } ], "surfaces": { "radii": [ "1440px", "12px", "16px" ], "borders": [ "1px solid color(srgb 0.152941 0.12549 0.113725 / 0.2)" ], "shadows": [] }, "media": [ { "id": "ld-677", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 0, "y": 11637, "width": 1440, "height": 1100 }, "aspectRatio": 1.3, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69ef155883341bfdcff936e5/69f0c35b1c1bd2bf6aaf7283_project-hero_bake-off.avif", "naturalWidth": 2160, "naturalHeight": 1350, "alt": "" } }, { "id": "ld-551", "tag": "svg", "role": null, "label": "svg", "rect": { "x": 0, "y": 10696, "width": 1440, "height": 991 }, "aspectRatio": 1.5, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "media": null }, { "id": "ld-770", "tag": "svg", "role": null, "label": "svg", "rect": { "x": 0, "y": 13328, "width": 1440, "height": 872 }, "aspectRatio": 1.7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "media": null }, { "id": "ld-755", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 726, "y": 12943, "width": 564, "height": 706 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif", "naturalWidth": 2000, "naturalHeight": 2500, "alt": "" } }, { "id": "ld-758", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 726, "y": 12943, "width": 564, "height": 706 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif", "naturalWidth": 2000, "naturalHeight": 2500, "alt": "" } }, { "id": "ld-761", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 726, "y": 12943, "width": 564, "height": 706 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif", "naturalWidth": 2000, "naturalHeight": 2500, "alt": "" } }, { "id": "ld-764", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 726, "y": 12943, "width": 564, "height": 706 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif", "naturalWidth": 2000, "naturalHeight": 2500, "alt": "" } }, { "id": "ld-767", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 726, "y": 12943, "width": 564, "height": 706 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a2050ec64a1b62a8f34ed1f_Home%20Page%20Why%20LxL.avif", "naturalWidth": 2000, "naturalHeight": 2500, "alt": "" } }, { "id": "ld-874", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 150, "y": 14636, "width": 564, "height": 706 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/69ef20d5df869df8c6e0337c_home-hero-04.avif", "naturalWidth": 2064, "naturalHeight": 2580, "alt": "Young person with curly red hair wearing a Kaizer Chiefs jacket over a white cable knit sweater." } }, { "id": "ld-527", "tag": "img", "role": null, "label": "u-image", "rect": { "x": 150, "y": 10911, "width": 449, "height": 561 }, "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "https://cdn.prod.website-files.com/69e88d0efafb70caf79fbd65/6a6a080bf4ebee09cf462f56_Group%20Shot%20Edited%20(1).avif", "naturalWidth": 1123, "naturalHeight": 1400, "alt": "" } }, { "id": "ld-374", "tag": "video", "role": null, "label": "bunny-bg__video", "rect": { "x": 445, "y": 1200, "width": 549, "height": 366 }, "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "media": { "src": "blob:https://www.lxlcreative.co.uk/10274772-72cf-4391-b233-4463fdb07ab3", "poster": "", "duration": 48.021333 } }, { "id": "ld-1018", "tag": "svg", "role": null, "label": "svg", "rect": { "x": 0, "y": 16098, "width": 576, "height": 298 }, "aspectRatio": 1.9, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "media": null } ], "animations": [], "coverage": { "elementsInSection": 184, "cards": 12, "media": 12, "animations": 0 }, "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ] } ``` ### Observed motion 1. **scroll** — A large text block 'GOT A PRODUCTION COMING UP? LETS DO SOMETHING GREAT TOGETHER' scrolls into view. A smaller video thumbnail above it shrinks slightly as it centers. (51s–56s; 88% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 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: 1440px 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: Centered flex layout with oversized uppercase display headline; Small autoplaying video thumbnail above headline pattern; Pill-shaped solid CTA button with icon; Organic accent line as a decorative background element; Cursive script word treatment for emphasis within headline - Dependencies: Custom Owners Wide font for display headline; Specific orange/cream/dark palette for accent and text contrast; Bespoke SVG squiggle asset; Video asset for thumbnail (bunny-player) requiring custom player integration - Guidance: Reproduce the centered stack structure (media block, headline with mixed type treatment, CTA button) and the scroll-triggered shrink/center motion; swap in different display font, palette, and squiggle graphic to retheme, but the underlying video player and script-accent typography require custom asset substitution. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original footer section inspired by the design evidence titled “Call-to-action footer”. Purpose: A bold, dark-themed footer featuring a prominent call to action to start a production, accompanied by a small video thumbnail. Structure: centered single-column. Source layout label: centered. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Centered, oversized typography 'GOT A PRODUCTION COMING UP?' beneath a compact, playing video element, framed by dark space and a red squiggle. Components: headline, call-to-action, video-thumbnail, social-links. Style direction: bold, typographic. Observed crop: 1440×890px (1.618:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"54.9px","family":"Owners Wide","source":"computed","traits":"uppercase","weight":"700","evidence":"font-4: computed CSS at 1440×1000; AI role: Owners Wide at 54.9px, used for major structural section headings like 'Our services' and 'Got a production coming up?'.","sampleId":"font-4","confidence":1,"lineHeight":"49.4px","letterSpacing":"normal"} {"role":"heading","size":"22.9px","family":"Owners Wide","source":"computed","traits":"uppercase","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: Owners Wide at 22.9px, used for card and subsection titles like 'Activations' and 'EPK'.","sampleId":"font-2","confidence":0.85,"lineHeight":"22.9px","letterSpacing":"normal"} {"role":"body","size":"17.4px","family":"Manrope","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: Manrope at 17.4px, used for paragraph descriptions and body copy across the site.","sampleId":"font-8","confidence":0.95,"lineHeight":"24.4px","letterSpacing":"normal"} Color evidence: {"hex":"#27201D","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(39, 32, 29); AI role: The dominant deep brownish-black (#27201D) serving as the main background color for the page body.","sampleId":"color-2","confidence":1} {"hex":"#FF5121","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(255, 81, 33); AI role: Vibrant orange (#FF5121) used for CTA buttons and the prominent SVG accent lines.","sampleId":"color-4","confidence":1} {"hex":"#FCF2BD","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(252, 242, 189); AI role: Pale cream/yellow (#FCF2BD) applied to primary headings, navigation links, and the main logo.","sampleId":"color-5","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-9: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for secondary text overlays on images and alternate components.","sampleId":"color-9","confidence":0.9} Typography measured inside this section: {"id":"font-1","family":"Owners Wide","fontStack":"\"Owners Wide\", Impact, sans-serif","weight":"700","size":"15.4px","lineHeight":"18.5px","letterSpacing":"normal","traits":"uppercase","count":13,"contexts":[{"tag":"span","text":"Drag","top":1,"property":"font"},{"tag":"div","text":"Steal","top":12505,"property":"font"},{"tag":"div","text":"SAS Rogue Heroes","top":12496,"property":"font"}]} {"id":"font-2","family":"Owners Wide","fontStack":"\"Owners Wide\", Impact, sans-serif","weight":"700","size":"22.9px","lineHeight":"22.9px","letterSpacing":"normal","traits":"uppercase","count":6,"contexts":[{"tag":"h3","text":"Activations","top":5461,"property":"font"},{"tag":"h3","text":"Editorial","top":5461,"property":"font"},{"tag":"h3","text":"EPK","top":5461,"property":"font"}]} {"id":"font-3","family":"Owners Wide","fontStack":"\"Owners Wide\", Impact, sans-serif","weight":"700","size":"42.3px","lineHeight":"42.3px","letterSpacing":"normal","traits":"uppercase","count":5,"contexts":[{"tag":"div","text":"\"Through every twist, turn and curve ball, (and in our industry there are always a few), they always","top":14066,"property":"font"},{"tag":"div","text":"\"Everything flows, from pre-production to the time on set, they are organised, lovely, professional ","top":14066,"property":"font"},{"tag":"div","text":"\"Working with LXL in Paris, London or Brussels is always a pleasure. Attentive, kind, professional, ","top":14066,"property":"font"}]} {"id":"font-4","family":"Owners Wide","fontStack":"\"Owners Wide\", Impact, sans-serif","weight":"700","size":"54.9px","lineHeight":"49.4px","letterSpacing":"normal","traits":"uppercase","count":3,"contexts":[{"tag":"p","text":"LxL produces 360° creative campaigns for some of the biggest names in entertainment. From key art to","top":3566,"property":"font"},{"tag":"h2","text":"Our services","top":5109,"property":"font"},{"tag":"h2","text":"Got a production coming up? Let’s do something great together.","top":15923,"property":"font"}]} {"id":"font-5","family":"Scribo","fontStack":"Scribo, Georgia, sans-serif","weight":"400","size":"101.7px","lineHeight":"91.5px","letterSpacing":"normal","traits":"Regular","count":2,"contexts":[{"tag":"h2","text":"Why lxl","top":12876,"property":"font"},{"tag":"h2","text":"Studios","top":14557,"property":"font"}]} {"id":"font-7","family":"Manrope","fontStack":"Manrope, Arial, sans-serif","weight":"600","size":"28.6px","lineHeight":"28.6px","letterSpacing":"normal","traits":"Regular","count":2,"contexts":[{"tag":"p","text":"From a garden shed to a creative hub in Soho, LxL is a nimble 360° agency with the ability to work a","top":11067,"property":"font"},{"tag":"h2","text":"Discover some of our favourite projects","top":12473,"property":"font"}]} {"id":"font-8","family":"Manrope","fontStack":"Manrope, Arial, sans-serif","weight":"500","size":"17.4px","lineHeight":"24.4px","letterSpacing":"normal","traits":"Regular","count":12,"contexts":[{"tag":"p","text":"From concept through to delivery, we create and produce campaigns that are thoughtful, collaborative","top":5228,"property":"font"},{"tag":"p","text":"Click below to learn more about our team.","top":11233,"property":"font"},{"tag":"p","text":"Whether we’re handling a single part of your campaign or the full 360°, we bring the expertise to ma","top":13218,"property":"font"}]} {"id":"font-9","family":"Manrope","fontStack":"Manrope, Arial, sans-serif","weight":"500","size":"16.3px","lineHeight":"16.3px","letterSpacing":"normal","traits":"Regular","count":3,"contexts":[{"tag":"p","text":"00:00","top":15811,"property":"font"},{"tag":"p","text":"/","top":15811,"property":"font"},{"tag":"p","text":"00:00","top":15811,"property":"font"}]} Colors measured inside this section: {"id":"color-2","hex":"#27201D","alpha":1,"cssValue":"rgb(39, 32, 29)","count":16,"contexts":[{"tag":"body","text":"::before, ::after { box-sizing: border-box; } .w-embed:before, .w-embed:after, .w-richtext:before, .","top":0,"property":"background"},{"tag":"section","text":"Real craft. ‍Real people.‍Real results.","top":0,"property":"background"},{"tag":"div","text":"Steal","top":12505,"property":"text"}]} {"id":"color-3","hex":"#000000","alpha":0.2,"cssValue":"color(srgb 0 0 0 / 0.2)","count":4,"contexts":[{"tag":"div","text":"","top":11637,"property":"background"}]} {"id":"color-6","hex":"#055DFF","alpha":1,"cssValue":"rgb(5, 93, 255)","count":2,"contexts":[{"tag":"h2","text":"Studios","top":14557,"property":"text"},{"tag":"div","text":"Where brands, music and culture meet.Campaigns, events and content for brands and creatives that wan","top":14613,"property":"background"}]} {"id":"color-7","hex":"#D2E1EB","alpha":1,"cssValue":"color(srgb 0.824235 0.882588 0.922706)","count":1,"contexts":[{"tag":"div","text":"","top":14613,"property":"background"}]} {"id":"color-8","hex":"#FCF2BD","alpha":0.7019607843137254,"cssValue":"color(srgb 0.988235 0.94902 0.741176 / 0.7)","count":15,"contexts":[{"tag":"p","text":"From concept through to delivery, we create and produce campaigns that are thoughtful, collaborative","top":5228,"property":"text"},{"tag":"div","text":"Katy Niker, Agent","top":14311,"property":"text"},{"tag":"span","text":"xxxx","top":16386,"property":"text"}]} {"id":"color-9","hex":"#FFFFFF","alpha":1,"cssValue":"rgb(255, 255, 255)","count":49,"contexts":[{"tag":"span","text":"Drag","top":1,"property":"text"},{"tag":"span","text":"","top":3507,"property":"background"},{"tag":"div","text":"All services","top":5359,"property":"text"}]} {"id":"color-10","hex":"#646464","alpha":0.2,"cssValue":"rgba(100, 100, 100, 0.2)","count":1,"contexts":[{"tag":"div","text":"","top":15700,"property":"background"}]} {"id":"color-11","hex":"#281E1E","alpha":0.2,"cssValue":"color(srgb 0.152941 0.12549 0.113725 / 0.2)","count":16,"contexts":[{"tag":"div","text":"Steal","top":12465,"property":"border"}]} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":4746,"width":1440,"height":6000},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,16,20,45.7],"representativeContentWidthsPx":[1371,839,774,746,576,564,549,513]}; surfaces {"radii":["1440px","12px","16px"],"borders":["1px solid color(srgb 0.152941 0.12549 0.113725 / 0.2)"],"shadows":[]}; media [{"tag":"img","rect":{"x":0,"y":11637,"width":1440,"height":1100},"aspectRatio":1.3,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":0,"y":10696,"width":1440,"height":991},"aspectRatio":1.5,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":0,"y":13328,"width":1440,"height":872},"aspectRatio":1.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":726,"y":12943,"width":564,"height":706},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}] Motion evidence: scroll: A large text block 'GOT A PRODUCTION COMING UP? LETS DO SOMETHING GREAT TOGETHER' scrolls into view. A smaller video thumbnail above it shrinks slightly as it centers. (88% confidence) Transfer these principles: Centered flex layout with oversized uppercase display headline; Small autoplaying video thumbnail above headline pattern; Pill-shaped solid CTA button with icon; Organic accent line as a decorative background element; Cursive script word treatment for emphasis within headline. Dependencies: Custom Owners Wide font for display headline; Specific orange/cream/dark palette for accent and text contrast; Bespoke SVG squiggle asset; Video asset for thumbnail (bunny-player) requiring custom player integration. Adaptation guidance: Reproduce the centered stack structure (media block, headline with mixed type treatment, CTA button) and the scroll-triggered shrink/center motion; swap in different display font, palette, and squiggle graphic to retheme, but the underlying video player and script-accent typography require custom asset substitution. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.