# Sticky service cards scroll Schema: Design Details SECTION.md v3.2 Website: LxL Creative Source: https://www.lxlcreative.co.uk/ Source section IDs: gap-830d97d2-4746-10746 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The left block (script 'Our' over bold uppercase 'SERVICES', short description, CTA) stays pinned while the cards move, so the message and the action are always in view. - Portrait cards with readable category labels give the right column a steady rhythm and tie each image to a specific service. - A warm dark canvas with cream text and one orange accent gives clear contrast, and the orange squiggle links the card column together. What a screenshot can't show: - In the recording (about 20s to 32s) the left panel stays fixed while the cards scroll upward and the orange squiggle animates behind them; exact easing and speed aren't measured. - No font sizes, spacing or line heights were captured, so the type scale and gaps are unknown. Borrow: Pin a short message and CTA beside a scrolling image feed, and add one animated line behind the feed to connect the items. Leave alone: Don't copy the orange squiggle, the dark brown and cream palette, or the script-plus-wide-bold headline pairing (Owners Wide); use your own accent motif and a free wide grotesque instead. ## Classification - Type: features - Layout: sidebar-main - Styles: photographic - Confidence: 100% ## Purpose and structure A dynamic scrolling section where the left-hand text remains sticky while a sequence of service image cards scrolls vertically on the right. Visual signature: Dark background with a persistent 'Our SERVICES' text block on the left and a continuous feed of portrait-oriented project cards on the right, decorated with an orange squiggle line. ## Components - sticky-container - headline - image-card - call-to-action ## 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 - 20.0–32.0s — The left side ('Our Services' text) becomes sticky while the right side displays a series of vertical image cards that scroll upwards. An orange squiggly line animates behind the cards. (98% confidence) ## Section quality Overall: 60.75/100 (Good) Scored coverage: 100% - Typography: 58 — Combines a script accent 'Our' with bold uppercase Owners Wide for 'SERVICES', a clear and legible display/body pairing consistent with site tokens. Hierarchy is functional but the pairing is a fairly common editorial trope and lacks unique refinement within this section alone. Next tier: To reach 60+, typography would need more distinctive scale contrast, custom kerning, or a treatment unique to this section rather than a repeated site-wide heading pattern. - Composition: 65 — Sidebar-main asymmetry with a persistent sticky text block against a vertically scrolling card feed creates clear figure-ground separation and a legible reading path. The orange squiggle threading behind the cards adds a connective graphic motif that ties the scrolling column together. Cards are consistently portrait-framed with readable label overlays, giving a coherent rhythm. Next tier: Composition stays fairly conventional (sticky-left/scroll-right is a common pattern); to move to strong/memorable it would need a more distinctive spatial arrangement, varied card scale/depth, or interplay between sticky text and cards beyond simple overlap. - Motion: 62 — Gemini's timestamped description confirms a sticky left panel with vertically scrolling cards and an animating squiggle line behind them, a specific and visible choreography rather than a generic reveal. Next tier: Reaching strong tier requires more evidence of nuanced timing, easing, or reactive transitions (e.g., text change on card focus) beyond a single continuous scroll and background line animation. - Content: 60 — Text block (headline, description, CTA) is paired directly with corresponding service imagery, and each card is labeled with its service category, giving good content-to-visual mapping across the scroll. Next tier: The sticky text stays identical/static regardless of which card is in view; deeper integration (e.g., text changing per active card) would raise this axis. - Originality: 57 — The sticky-left/scrolling-right services list is a well-established pattern seen across many portfolio and agency sites; the squiggle accent is a nice touch but not sufficient to feel hard to substitute. Next tier: Needs a more distinctive interaction or layout twist beyond the squiggle motif to separate it from ubiquitous sticky-scroll service sections. - Adaptability: 62 — The sticky-container/headline/image-card/CTA structure is clearly modular and separable from the specific dark photographic skin; deterministic tokens (radius, spacing, color roles) are well-documented and portable. Next tier: Full separation confidence is limited by the lack of documented card-to-card transition timing/easing specifics, which affects clean re-skinning of the motion behavior. Strengths: - Clear sticky-left/scrolling-right structural hierarchy with legible content mapping - Distinctive orange squiggle motif threading behind the scrolling cards adds visual continuity - Consistent portrait card framing and label typography throughout the scroll sequence Weaknesses: - Sticky text content remains static and does not respond to which card is active, limiting deeper content integration - Overall interaction pattern (sticky text + scrolling cards) is common across agency/portfolio sites, limiting originality - Motion evidence describes only a single continuous scroll effect without finer choreography detail Why it does not reach the next tier: The section executes a familiar sticky-scroll services pattern competently with a nice decorative squiggle, but lacks a distinctive structural or interactive twist, dynamic content coupling, or unconventional composition needed to feel memorable or hard to substitute. ## Adaptation guidance - Effort: Medium - Guidance: Retain the sticky-left/scrolling-right skeleton and card labeling convention, but swap photography, palette, and accent line asset; consider making sidebar text dynamically respond to the active card to increase content integration in an adapted version. What transfers: - Sticky-container plus scrolling image-card list structure - Headline/description/CTA sidebar pairing with consistent labeling on cards - Decorative background accent line motif independent of specific artwork Dependencies: - Reliance on a supply of curated portrait project photography for each service card - Specific brand color palette (orange accent, cream text, dark canvas) for visual identity - Custom squiggle SVG asset for the connective line motif ## 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%) - Motion assessed from a single Gemini-observed timestamp range without exact easing or per-card transition detail - No sectionDesign-specific deterministic tokens provided beyond site-wide facts, limiting axis-specific certainty on spacing/radius specifics ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: features - Source type: features - Structure: asymmetric two-column - Layout: sidebar-main - Styles: photographic - Components: sticky-container, headline, image-card, call-to-action - Purpose: A dynamic scrolling section where the left-hand text remains sticky while a sequence of service image cards scrolls vertically on the right. - Visual signature: Dark background with a persistent 'Our SERVICES' text block on the left and a continuous feed of portrait-oriented project cards on the right, decorated with an orange squiggle line. - Place on the page: 4 of 11, after Other (`lxlcreative-co-uk:video-showreel`), before Other (`lxlcreative-co-uk:agency-intro`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Keep one region persistent or visually anchored while the main region carries the changing 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": [], "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": [], "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 container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion 1. **scroll** — The left side ('Our Services' text) becomes sticky while the right side displays a series of vertical image cards that scroll upwards. An orange squiggly line animates behind the cards. (20s–32s; 98% 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: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: medium - What transfers: Sticky-container plus scrolling image-card list structure; Headline/description/CTA sidebar pairing with consistent labeling on cards; Decorative background accent line motif independent of specific artwork - Dependencies: Reliance on a supply of curated portrait project photography for each service card; Specific brand color palette (orange accent, cream text, dark canvas) for visual identity; Custom squiggle SVG asset for the connective line motif - Guidance: Retain the sticky-left/scrolling-right skeleton and card labeling convention, but swap photography, palette, and accent line asset; consider making sidebar text dynamically respond to the active card to increase content integration in an adapted version. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Sticky service cards scroll”. Purpose: A dynamic scrolling section where the left-hand text remains sticky while a sequence of service image cards scrolls vertically on the right. Structure: asymmetric two-column. Source layout label: sidebar-main. Keep one region persistent or visually anchored while the main region carries the changing content. Visual signature to preserve at the pattern level: Dark background with a persistent 'Our SERVICES' text block on the left and a continuous feed of portrait-oriented project cards on the right, decorated with an orange squiggle line. Components: sticky-container, headline, image-card, call-to-action. Style direction: photographic. No deterministic crop dimensions were attached. 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} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: scroll: The left side ('Our Services' text) becomes sticky while the right side displays a series of vertical image cards that scroll upwards. An orange squiggly line animates behind the cards. (98% confidence) Transfer these principles: Sticky-container plus scrolling image-card list structure; Headline/description/CTA sidebar pairing with consistent labeling on cards; Decorative background accent line motif independent of specific artwork. Dependencies: Reliance on a supply of curated portrait project photography for each service card; Specific brand color palette (orange accent, cream text, dark canvas) for visual identity; Custom squiggle SVG asset for the connective line motif. Adaptation guidance: Retain the sticky-left/scrolling-right skeleton and card labeling convention, but swap photography, palette, and accent line asset; consider making sidebar text dynamically respond to the active card to increase content integration in an adapted version. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.