# Horizontal photo card carousel Schema: Design Details SECTION.md v3.2 Website: Legora Source: https://legora.com/ Source section IDs: 085e27f3-10e6-47c5-bbd2-61f474fa5f2b Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A centered heading sits above a full-width track of tall photo cards, and the cropped cards at both edges show at a glance that the row scrolls. - The focal card is larger and taller than its neighbours, and it opens into a heading, short description and 'Read more' link, so the image and its copy stay together. - Dark text on a white canvas, muted gray body copy and a pale surface tone keep the photos as the only strong colour, and the arrows and dot indicator stay quiet. What a screenshot can't show: - The recording shows only user-driven horizontal scrolling, right then left, with arrow controls. No easing, stagger or timing detail was captured. - No font sizes, spacing or section padding were measured, so scale and gaps would have to be set by eye. Borrow: Make one card in a cropped-edge carousel larger and let it carry the text, so the row has a clear focal point and still invites scrolling. Leave alone: Don't copy Legora's dark green action colour, its Legora Sans typeface (use a clean neutral sans instead) or its industry photography and captions. ## Classification - Type: gallery - Layout: Centered heading with a full-width horizontal carousel and navigation arrows. - Styles: minimal, photographic - Confidence: 95% ## Purpose and structure A section featuring a horizontally scrollable carousel of photographic cards, each representing a different industry or practice area. Visual signature: A row of vertical photo cards partially cropped on the edges indicating horizontal scrolling. ## Components - heading - text-block - carousel - photo-card - slider-controls ## Typography - Display: Legora Sans Regular — 56.2px 400 - Heading: Legora Sans Regular — 41.2px 400 - Body: Legora Sans Regular — 15px 400 ## Functional palette - Text: text #0D1016 - Primary-Action: primary action #005032 - Canvas: canvas #FFFFFF - Muted-Text: muted text #68655E - Surface: surface #FAFAF9 - Surface: surface #E6E6E6 ## Motion evidence - 22.0–26.0s — The user manually scrolls right and then left through an image carousel, displaying different application interfaces. (90% confidence) - 63.0–66.0s — The user manually scrolls left and then right through the image carousel. (90% confidence) ## Section quality Overall: 57.15/100 (Competent) Scored coverage: 100% - Typography: 58 — Clean serif-free heading pairs with muted gray body copy; consistent with site system (Legora Sans), good scale contrast between heading, subheading, and card caption, but no distinctive typographic treatment beyond standard hierarchy. Next tier: Needs a more deliberate typographic moment (e.g., unique pairing, scale shift, or kinetic type) rather than default heading/body/caption stack to reach strong tier. - Composition: 62 — Center-aligned intro flows into an asymmetric carousel where the focal card is enlarged and taller, with flanking cards cropped at the edges to suggest continuation; dot indicator and arrow controls are clearly placed. The size contrast between center and side cards creates a believable focal hierarchy. Next tier: Layout is a fairly standard enlarged-center carousel pattern; needs a more unexpected grid relationship or asymmetry to move past 'polished but familiar' into 'memorable.' - Motion: 52 — Gemini confirms only user-driven horizontal scroll with left/right navigation at two timestamps; no easing, stagger, or transform detail is given beyond basic carousel movement. Next tier: Lacks any described transition detail (speed, easing, parallax, staggered reveal) that would differentiate this from a generic slider interaction. - Content: 55 — Each card pairs a labeled industry photo with a caption, and the focal card expands into a text block with heading, description, and 'Read more' link, integrating content and imagery coherently within the carousel mechanics. Next tier: The focal-card-to-copy transition is a common pattern; deeper content/visual fusion (e.g., varied copy per card without needing full re-layout) would lift this further. - Originality: 54 — The enlarged-focal-card carousel with industry photography is a recognizable pattern seen across many B2B marketing sites; execution is clean but not distinctive. Next tier: Would need an idea or interaction not already common to carousels (e.g., unconventional card shapes, novel navigation metaphor) to be considered original. - Adaptability: 60 — Structure (heading, carousel track, focal card with text, nav controls) is modular and separable from the specific photography and copy; radius, spacing, and image aspect ratios are documented, making the skin swappable. Next tier: Dependence on a specific enlarged-card behavior with precise sizing ratios ties the pattern closely to this exact visual rhythm, limiting instant portability without re-tuning widths. Strengths: - Clear focal hierarchy via size contrast between center card and flanking cropped cards - Legible content integration pairing photo, label, heading, description, and CTA on the active card - Calm, high-whitespace composition consistent with rest of site system Weaknesses: - Carousel pattern (enlarged center card, dot indicator, arrow nav) is a common off-the-shelf interaction - Motion evidence limited to manual scroll with no distinguishing transition detail - Typography relies on standard heading/body/caption scale without a unique treatment Why it does not reach the next tier: The section executes a well-worn enlarged-card carousel competently but does not introduce a distinctive layout idea, typographic signature, or documented motion nuance that would differentiate it from common industry-practice sliders. ## Adaptation guidance - Effort: Medium - Guidance: Rebuild as a track of fixed-width cards with one enlarged focal item revealing text content; swap photography and labels, keep caption overlay and 'Read more' link pattern, and recreate dot+arrow nav controls using the same minimal styling. What transfers: - Heading + subheading intro block above a horizontal carousel - Enlarged focal card with caption, heading, description, and link pattern - Dot indicator plus arrow navigation controls Dependencies: - Specific image aspect ratio (0.8) and card width ratios between focal and side cards - Pill-shaped radius and spacing tokens from the broader design system - Photography style (architectural/office photography) used per industry tag ## 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 axis based only on two generic scroll timestamps from Gemini, no transition timing or easing data - No deterministic animation parameters supplied, limiting confidence in motion polish assessment - Card content for non-focal items (beyond label) not visible in crop ## 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: gallery - Source type: gallery - Structure: centered single-column - Layout: Centered heading with a full-width horizontal carousel and navigation arrows. - Styles: minimal, photographic - Components: heading, text-block, carousel, photo-card, slider-controls - Purpose: A section featuring a horizontally scrollable carousel of photographic cards, each representing a different industry or practice area. - Visual signature: A row of vertical photo cards partially cropped on the edges indicating horizontal scrolling. - Place on the page: 4 of 9, after Feature collection (`legora-com:C03`), before Stats (`legora-com:C05`) ### Crop and composition - Crop: 1440×1236px; aspect ratio 1.165:1 - Page bounds: 4734–5970px of 11041px - 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": [], "siteRoles": [ { "role": "display", "size": "56.2px", "family": "Legora Sans Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: Large 56.2px text used for the main hero headline 'Legal work, without limits.'", "sampleId": "font-12", "confidence": 0.9, "lineHeight": "56.2px", "letterSpacing": "normal" }, { "role": "heading", "size": "41.2px", "family": "Legora Sans Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: 41.2px text used for major section headings like 'Introducing the Legora aOS™' and 'Our latest innovations'.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "41.2px", "letterSpacing": "-0.4px" }, { "role": "body", "size": "15px", "family": "Legora Sans Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: 15px Regular text used extensively for body copy and navigational elements.", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "19.5px", "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": "#0D1016", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(13, 16, 22); AI role: Dark color (#0D1016) used for primary text headings and body copy on light backgrounds.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#005032", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-7: computed rgb(0, 80, 50); AI role: Forest green used for the announcement bar, primary CTA buttons ('Book a demo'), and links.", "sampleId": "color-7", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(255, 255, 255); AI role: White background used extensively across major sections of the page.", "sampleId": "color-4", "confidence": 0.9 }, { "hex": "#68655E", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-10: computed rgb(104, 101, 94); AI role: Lighter gray text used for elements like 'Trusted by' and secondary information.", "sampleId": "color-10", "confidence": 0.85 }, { "hex": "#FAFAF9", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(250, 250, 249); AI role: Off-white background used for sections like the footer and specific content blocks.", "sampleId": "color-1", "confidence": 0.8 }, { "hex": "#E6E6E6", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(230, 230, 230); AI role: Light gray background used for elements like the 'Explore the Legora aOS' button background.", "sampleId": "color-2", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons and the labels next to the 3D cube appear to use a pill-shape radius.", "density": "Low density. The layout relies on significant whitespace to separate concepts and features.", "evidence": "Visual inspection of the screenshots shows distinct spacing blocks between headings and content, pill-shaped buttons for CTAs, and a clean, borderless aesthetic for most structural elements.", "borderStyle": "Minimal use of borders; structure is largely defined by spacing, background color changes, and typography.", "buttonStyle": "Pill-shaped, solid fill for primary actions (green), often including a small arrow icon.", "cornerStyle": "Combination of sharp corners on large background sections and rounded corners on smaller interactive elements like buttons and UI pills.", "contentWidth": "Content is generally centered and constrained within a readable max-width, though some sections (like the hero and footer) span full width.", "spacingRhythm": "Generous spacing between major sections, creating a calm, structured reading rhythm. Internal component padding is moderate." } ``` ### 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": 1440, "captureBounds": { "top": 4734, "bottom": 5970, "pageHeight": 11041 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### 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 { "root": null, "cards": [], "media": [], "bounds": { "top": 4734, "bottom": 5970, "pageHeight": 11041 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 0 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-23T18:19:33.968Z", "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." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **scroll** — The user manually scrolls right and then left through an image carousel, displaying different application interfaces. (22s–26s; 90% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — The user manually scrolls left and then right through the image carousel. (63s–66s; 90% 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: Heading + subheading intro block above a horizontal carousel; Enlarged focal card with caption, heading, description, and link pattern; Dot indicator plus arrow navigation controls - Dependencies: Specific image aspect ratio (0.8) and card width ratios between focal and side cards; Pill-shaped radius and spacing tokens from the broader design system; Photography style (architectural/office photography) used per industry tag - Guidance: Rebuild as a track of fixed-width cards with one enlarged focal item revealing text content; swap photography and labels, keep caption overlay and 'Read more' link pattern, and recreate dot+arrow nav controls using the same minimal styling. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples. ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Horizontal photo card carousel”. Purpose: A section featuring a horizontally scrollable carousel of photographic cards, each representing a different industry or practice area. Structure: centered single-column. Source layout label: Centered heading with a full-width horizontal carousel and navigation arrows.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: A row of vertical photo cards partially cropped on the edges indicating horizontal scrolling. Components: heading, text-block, carousel, photo-card, slider-controls. Style direction: minimal, photographic. Observed crop: 1440×1236px (1.165:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"56.2px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Large 56.2px text used for the main hero headline 'Legal work, without limits.'","sampleId":"font-12","confidence":0.9,"lineHeight":"56.2px","letterSpacing":"normal"} {"role":"heading","size":"41.2px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 41.2px text used for major section headings like 'Introducing the Legora aOS™' and 'Our latest innovations'.","sampleId":"font-3","confidence":0.95,"lineHeight":"41.2px","letterSpacing":"-0.4px"} {"role":"body","size":"15px","family":"Legora Sans Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 15px Regular text used extensively for body copy and navigational elements.","sampleId":"font-5","confidence":0.95,"lineHeight":"19.5px","letterSpacing":"normal"} Color evidence: {"hex":"#0D1016","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(13, 16, 22); AI role: Dark color (#0D1016) used for primary text headings and body copy on light backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#005032","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(0, 80, 50); AI role: Forest green used for the announcement bar, primary CTA buttons ('Book a demo'), and links.","sampleId":"color-7","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White background used extensively across major sections of the page.","sampleId":"color-4","confidence":0.9} {"hex":"#68655E","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(104, 101, 94); AI role: Lighter gray text used for elements like 'Trusted by' and secondary information.","sampleId":"color-10","confidence":0.85} {"hex":"#FAFAF9","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(250, 250, 249); AI role: Off-white background used for sections like the footer and specific content blocks.","sampleId":"color-1","confidence":0.8} {"hex":"#E6E6E6","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(230, 230, 230); AI role: Light gray background used for elements like the 'Explore the Legora aOS' button background.","sampleId":"color-2","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]} Motion evidence: scroll: The user manually scrolls right and then left through an image carousel, displaying different application interfaces. (90% confidence) scroll: The user manually scrolls left and then right through the image carousel. (90% confidence) Transfer these principles: Heading + subheading intro block above a horizontal carousel; Enlarged focal card with caption, heading, description, and link pattern; Dot indicator plus arrow navigation controls. Dependencies: Specific image aspect ratio (0.8) and card width ratios between focal and side cards; Pill-shaped radius and spacing tokens from the broader design system; Photography style (architectural/office photography) used per industry tag. Adaptation guidance: Rebuild as a track of fixed-width cards with one enlarged focal item revealing text content; swap photography and labels, keep caption overlay and 'Read more' link pattern, and recreate dot+arrow nav controls using the same minimal styling. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.