# Horizontal Scroll Product Gallery Schema: Design Details SECTION.md v3.2 Website: Square Kiosk Source: https://squareup.com/us/en/hardware/kiosk Source section IDs: gap-e52e4aab-3953-6061 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Large rounded image cards with alternating blue and black backgrounds create a clear rhythm across the row, and macro hardware shots make each feature feel tangible. - Short captions sit bottom-left in generous negative space, so the photography leads and the copy supports it. - Partial cards peeking at the edges signal that the row scrolls, and the oversized tight-tracked headline above sets a clear two-tier hierarchy. What a screenshot can't show: - The recording shows only a plain horizontal scroll through the cards, roughly 19 to 30 seconds in, with no other motion identified. - Measured type and spacing weren't captured; the review reports an 80px headline and 13–15px card captions. Borrow: Pair full-bleed rounded image cards with tiny bottom-left captions, and let the next card peek at the edge to show the row scrolls. Leave alone: Don't copy Square's blue and black card colours, its specific hardware close-ups, or its exact headline treatment; use your own product imagery and palette. ## Classification - Type: gallery - Layout: Full-width horizontal scrolling carousel with overlapping or adjacent large image cards. - Styles: minimal, photographic - Confidence: 92% ## Purpose and structure A horizontal scrolling gallery displaying large, detailed product shots and hardware features within rounded containers. Visual signature: Large rounded image cards sliding horizontally across a light background. ## Components - horizontal carousel - large image cards - navigation arrows - text overlays ## Typography - Display: Cash Sans — 80px 400 - Heading: Cash Sans — 36px 400 - Body: Cash Sans — 15px 400 - Mono: Cash Sans Mono — 13px 500 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #000000 - Primary-Action: primary action #004BFF - Canvas: canvas #1A1A1A - Surface: surface #F7F7F5 - Muted-Text: muted text #767676 ## Motion evidence - 19.0–30.0s — User scrolls through a horizontal carousel showcasing different hardware features and close-up shots. (90% confidence) ## Section quality Overall: 61.70/100 (Good) Scored coverage: 100% - Typography: 62 — Large 80px display headline with tight letter-spacing sits confidently above small caption text inside cards; clear two-tier hierarchy (headline vs. 15px/13px card copy) but caption text is quite small and secondary relative to the dominant imagery. Next tier: Caption typography inside cards needs more weight or scale variation to feel intentional rather than an afterthought label on top of photography. - Composition: 68 — Full-bleed horizontal cards with alternating color backgrounds (blue, black) and large rounded-corner product photography create strong rhythm; text is tucked bottom-left with generous negative space, and partial next/previous cards peeking at edges reinforce the scroll affordance. Next tier: Composition relies on a single repeated card template (image right, text bottom-left) without variation in scale or framing between cards, limiting it from feeling truly crafted versus modular. - Motion: 58 — Gemini confirms a horizontal scroll of cards between 19-30s showing different hardware close-ups, a clear and functional but conventional carousel interaction. Next tier: No evidence of easing, parallax, snap behavior, or secondary motion detail beyond basic horizontal translation to justify a higher score. - Content: 65 — Product photography is tightly art-directed (macro shots of ports, camera, speaker, hinge) paired with short benefit-driven captions, integrating hardware storytelling directly into the visual flow. Next tier: Captions are generic marketing copy ('Smart self-service...', 'No bad side') rather than specific technical callouts, keeping content integration functional rather than distinctive. - Originality: 55 — Horizontal scrolling product galleries with large rounded cards and macro hardware shots are a common pattern in hardware marketing sites; execution is clean but structurally familiar. Next tier: No distinctive interaction, layout twist, or visual device beyond the now-standard full-bleed horizontal carousel to set it apart from comparable product pages. - Adaptability: 60 — Card structure (background color block + image + text overlay) is modular and reusable with token-driven radius, color, and type values supplied in the deterministic facts, making reskinning feasible. Next tier: Dependence on bespoke macro product photography for each card ties the visual impact tightly to specific assets rather than fully generic skinning. Strengths: - Confident oversized display headline establishes section intent before the gallery begins - Alternating saturated and dark card backgrounds create visual rhythm across the scroll - Rounded full-bleed cards with peeking edge cards clearly signal horizontal scroll affordance Weaknesses: - Caption text is small and visually subordinate to the point of near invisibility against imagery - Repeated single card template across the gallery limits visual variety - Horizontal scroll carousel pattern is common in product marketing, offering little structural novelty Why it does not reach the next tier: The section is well-built and clean but relies on a familiar template (oversized headline + repeating full-bleed horizontal cards) without a distinguishing compositional or interaction idea, and motion evidence shows only basic horizontal translation. ## Adaptation guidance - Effort: Medium - Guidance: Swap in new photography and background colors per card while keeping the same card proportions, rounded corners, and bottom-left text placement; the scroll mechanism and card template are brand-agnostic. What transfers: - Full-bleed rounded card module with image + overlay text - Horizontal scroll carousel structure with peeking edge cards - Alternating background color blocking per card Dependencies: - Custom macro product photography for each card - Specific color-blocked backgrounds matched to each product shot ## 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 scored from Gemini's single timestamped description only, without easing or interaction detail - Full card sequence beyond the two visible cards not evaluated - No direct view of hover or arrow-click behavior ## 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: full-bleed - Layout: Full-width horizontal scrolling carousel with overlapping or adjacent large image cards. - Styles: minimal, photographic - Components: horizontal carousel, large image cards, navigation arrows, text overlays - Purpose: A horizontal scrolling gallery displaying large, detailed product shots and hardware features within rounded containers. - Visual signature: Large rounded image cards sliding horizontally across a light background. - Place on the page: 3 of 9, after Feature collection (`squareup-com:editorial-scroll-video`), before Feature collection (`squareup-com:categorized-feature-grid`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays. ### 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": "80px", "family": "Cash Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: 80px Cash Sans used for major section statements like 'Built to stand out'.", "sampleId": "font-4", "confidence": 1, "lineHeight": "72px", "letterSpacing": "-3.2px" }, { "role": "heading", "size": "36px", "family": "Cash Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: 36px Cash Sans used for subsection headers in the sticky scroll area.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "36px", "letterSpacing": "-1.1px" }, { "role": "body", "size": "15px", "family": "Cash Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: 15px Cash Sans used for standard descriptive paragraph text.", "sampleId": "font-1", "confidence": 1, "lineHeight": "22px", "letterSpacing": "-0.3px" }, { "role": "mono", "size": "13px", "family": "Cash Sans Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-13: computed CSS at 1440×1000; AI role: 13px uppercase Cash Sans Mono used for small eyebrow labels like 'How kiosk works'.", "sampleId": "font-13", "confidence": 0.9, "lineHeight": "18px", "letterSpacing": "1.3px" } ] } ``` ### 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": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background used for major content sections.", "sampleId": "color-3", "confidence": 1 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(0, 0, 0); AI role: Black text used primarily across the light sections of the page.", "sampleId": "color-4", "confidence": 1 }, { "hex": "#004BFF", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-5: computed rgb(0, 75, 255); AI role: Vibrant blue (#004BFF) used for the hero background and primary CTA buttons.", "sampleId": "color-5", "confidence": 1 }, { "hex": "#1A1A1A", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(26, 26, 26); AI role: Dark gray (#1A1A1A) used for the footer and specific dark-themed product sections.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#F7F7F5", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(247, 247, 245); AI role: Light gray (#F7F7F5) used as background for feature cards.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#767676", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-10: computed rgb(118, 118, 118); AI role: Gray text (#767676) used for secondary descriptive copy.", "sampleId": "color-10", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Buttons are fully rounded (pill shape), while content cards and image frames use large radii (approx 16px-24px).", "density": "Low density, utilizing significant negative space to emphasize large text and product imagery.", "evidence": "Visible in the pill-shaped 'Buy now' buttons, the soft corners of the feature grid cards, and the expansive padding in the 'Built to stand out' section.", "borderStyle": "Mostly borderless design relying on background color differences, with occasional thin, subtle borders on form/footer elements.", "buttonStyle": "Pill-shaped, using solid vibrant fills for primary actions and transparent backgrounds with borders for secondary.", "cornerStyle": "Prominent use of large border radii, creating soft, friendly shapes that contrast with the stark typography.", "contentWidth": "Content is generally constrained to a large central max-width, while backgrounds often bleed to the edges.", "spacingRhythm": "Generous vertical spacing between distinct sections (often >100px), with tighter padding inside grid collections." } ``` ### 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** — User scrolls through a horizontal carousel showcasing different hardware features and close-up shots. (19s–30s; 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: 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: Full-bleed rounded card module with image + overlay text; Horizontal scroll carousel structure with peeking edge cards; Alternating background color blocking per card - Dependencies: Custom macro product photography for each card; Specific color-blocked backgrounds matched to each product shot - Guidance: Swap in new photography and background colors per card while keeping the same card proportions, rounded corners, and bottom-left text placement; the scroll mechanism and card template are brand-agnostic. ### 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 gallery section inspired by the design evidence titled “Horizontal Scroll Product Gallery”. Purpose: A horizontal scrolling gallery displaying large, detailed product shots and hardware features within rounded containers. Structure: full-bleed. Source layout label: Full-width horizontal scrolling carousel with overlapping or adjacent large image cards.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Large rounded image cards sliding horizontally across a light background. Components: horizontal carousel, large image cards, navigation arrows, text overlays. Style direction: minimal, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"80px","family":"Cash Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: 80px Cash Sans used for major section statements like 'Built to stand out'.","sampleId":"font-4","confidence":1,"lineHeight":"72px","letterSpacing":"-3.2px"} {"role":"heading","size":"36px","family":"Cash Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 36px Cash Sans used for subsection headers in the sticky scroll area.","sampleId":"font-2","confidence":0.95,"lineHeight":"36px","letterSpacing":"-1.1px"} {"role":"body","size":"15px","family":"Cash Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: 15px Cash Sans used for standard descriptive paragraph text.","sampleId":"font-1","confidence":1,"lineHeight":"22px","letterSpacing":"-0.3px"} {"role":"mono","size":"13px","family":"Cash Sans Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-13: computed CSS at 1440×1000; AI role: 13px uppercase Cash Sans Mono used for small eyebrow labels like 'How kiosk works'.","sampleId":"font-13","confidence":0.9,"lineHeight":"18px","letterSpacing":"1.3px"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background used for major content sections.","sampleId":"color-3","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Black text used primarily across the light sections of the page.","sampleId":"color-4","confidence":1} {"hex":"#004BFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(0, 75, 255); AI role: Vibrant blue (#004BFF) used for the hero background and primary CTA buttons.","sampleId":"color-5","confidence":1} {"hex":"#1A1A1A","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(26, 26, 26); AI role: Dark gray (#1A1A1A) used for the footer and specific dark-themed product sections.","sampleId":"color-2","confidence":0.95} {"hex":"#F7F7F5","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(247, 247, 245); AI role: Light gray (#F7F7F5) used as background for feature cards.","sampleId":"color-1","confidence":0.9} {"hex":"#767676","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(118, 118, 118); AI role: Gray text (#767676) used for secondary descriptive copy.","sampleId":"color-10","confidence":0.85} 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: User scrolls through a horizontal carousel showcasing different hardware features and close-up shots. (90% confidence) Transfer these principles: Full-bleed rounded card module with image + overlay text; Horizontal scroll carousel structure with peeking edge cards; Alternating background color blocking per card. Dependencies: Custom macro product photography for each card; Specific color-blocked backgrounds matched to each product shot. Adaptation guidance: Swap in new photography and background colors per card while keeping the same card proportions, rounded corners, and bottom-left text placement; the scroll mechanism and card template are brand-agnostic. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.