# Stacked Video Features Schema: Design Details SECTION.md v3.2 Website: 1X Technologies | Safe humanoids for the home Source: https://www.1x.tech/ Source section IDs: gap-3dca089f-1000-3000 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each full-width cinematic block carries just one short label, so the photography does the talking and the page reads quickly. - Labels sit in a consistent left-aligned spot with a bold word paired with a lighter detail, e.g. 'Careers' and '88 Open roles', giving a clear two-level hierarchy with legible contrast. - The human-and-robot pairings are framed with care, and the stacked blocks set a steady editorial rhythm against a muted, neutral page. What a screenshot can't show: - The background videos loop quietly, with a man and robot swaying back-to-back for about 3 seconds, then a robot vacuuming back and forth for about 5 seconds. - No scroll choreography or animated text was recorded, and type sizes and spacing weren't measured. Borrow: Let one strong ambient video fill the block and add only a small, high-contrast label so the image carries the message. Leave alone: Don't copy the robot-in-knitwear imagery, the NEO and Careers labels, or the 1X brand look; use your own subject matter and a free neutral grotesque like Inter. ## Classification - Type: features - Layout: Vertically stacked full-width media blocks with minimal text overlays. - Styles: minimal, photographic - Confidence: 90% ## Purpose and structure Multiple stacked full-width video sections highlighting Careers and Experience. Visual signature: Large cinematic shots of robots and humans with subtle typographic labels. ## Components - Full-width media blocks - Text overlays ## Typography - Display: ABCDiatypeMedium — 44px 500 - Heading: ABCDiatypeMedium — 11px 500 - Body: ABCDiatype — 14px 400 - Mono: ABCDiatype — 10px 400 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #222222 - Surface: surface #F7F7F7 ## Motion evidence - 3.0–6.0s — The background video plays, showing a man and a robot standing back-to-back with subtle movements. (95% confidence) - 6.0–11.0s — The background video plays, depicting a robot operating a vacuum cleaner back and forth across the floor. (95% confidence) ## Section quality Overall: 60.50/100 (Good) Scored coverage: 100% - Typography: 62 — Clean two-weight labeling ('Careers' bold / '88 Open roles' lighter) creates a simple hierarchy with confident negative tracking on the large display face, but the type treatment is minimal and mostly functional rather than distinctive. Next tier: Needs a more considered type-image interplay or unique scale relationships to move past polished-but-generic labeling. - Composition: 68 — Strong cinematic full-bleed staging with consistent left-aligned label placement against a muted color-blocked background, giving a coherent editorial rhythm across stacked slides; the human-robot pairing composition is genuinely well-framed. Next tier: Repetition of the same label position across both blocks limits variety; more compositional variation or transition logic between blocks would push it toward memorable. - Motion: 55 — Gemini's timestamps confirm subtle ambient background motion (idle robot/human sway, vacuum motion) but nothing beyond simple looping video playback is described. Next tier: No evidence of choreographed reveal, parallax, or transition motion tied to scroll; only ambient video loops are confirmed. - Content: 58 — Text labels ('Careers 88 Open roles', 'Experience NEO') are integrated directly onto photography with legible contrast, functioning as clear section identifiers, but the copy is sparse and generic beyond naming the section. Next tier: Lacks any supporting copy or detail that deepens the narrative beyond a label; would need richer text-image relationship to rise. - Originality: 60 — The uncanny robot-in-knitwear imagery is a distinctive brand asset, but the layout mechanic itself—stacked full-bleed photo sections with corner labels—is a common pattern seen across many premium sites. Next tier: Original photography elevates mood but the section's structural idea is not itself novel enough for a higher originality score. - Adaptability: 57 — The stacked full-bleed block with corner label and optional email capture is a fairly separable pattern; deterministic facts (typography, pill button, borders) are clear enough to extract skin from structure. Next tier: Behavior/motion parameters are not fully specified, and video-driven backgrounds are asset-dependent, capping easy transferability. Strengths: - Distinctive, uncanny human-robot photography that sets a strong mood - Consistent left-aligned label placement giving each full-bleed block a clear identity - Restrained typographic weight contrast that establishes label hierarchy without clutter Weaknesses: - Ambient video motion is minimal and not scroll-driven based on available evidence - Label copy is thin, offering little content depth beyond naming the section - Structural pattern (stacked full-bleed photo blocks with corner text) is common and not novel on its own - Repetitive layout between blocks reduces variety across the section Why it does not reach the next tier: To reach strong/memorable the section would need either more sophisticated choreographed motion, richer copy integration, or compositional variation between the stacked blocks rather than repeating the same label formula twice. ## Adaptation guidance - Effort: Medium - Guidance: Recreate the stacked full-bleed block structure and label typography hierarchy, but substitute in-house photography/video and adjust the muted palette to match target brand; ambient motion can be approximated with a simple looping background video without exact parameter matching. What transfers: - Full-bleed stacked media block structure with corner-anchored label overlay - Two-tier label typography (bold primary + lighter secondary) pattern - Pill-shaped CTA/email capture placement within a media block Dependencies: - Proprietary robot/human photography and video assets driving the mood - Specific muted blue-gray palette tied to brand imagery - Exact video loop content for ambient motion ## 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 assessment limited to two ambient timestamps; no confirmation of scroll-triggered or transition animation - No deterministic data on exact spacing, video duration, or transition mechanics between stacked blocks ## 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: full-bleed - Layout: Vertically stacked full-width media blocks with minimal text overlays. - Styles: minimal, photographic - Components: Full-width media blocks, Text overlays - Purpose: Multiple stacked full-width video sections highlighting Careers and Experience. - Visual signature: Large cinematic shots of robots and humans with subtle typographic labels. - Place on the page: 3 of 5, after Hero (`1x-tech:product_hero_home`), before Form (`bf36028a-3b9e-4440-a396-baaf1e3829b3`) ### 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": "44px", "family": "ABCDiatypeMedium", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-2: computed CSS at 1440×1000; AI role: ABCDiatypeMedium at 44px used for primary large headings ('NEO', 'Careers 88 Open roles').", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "44px", "letterSpacing": "-1.3px" }, { "role": "heading", "size": "11px", "family": "ABCDiatypeMedium", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-7: computed CSS at 1440×1000; AI role: ABCDiatypeMedium at 11px uppercase used for navigation links.", "sampleId": "font-7", "confidence": 0.8, "lineHeight": "20px", "letterSpacing": "0.9px" }, { "role": "body", "size": "14px", "family": "ABCDiatype", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: ABCDiatype at 14px used for secondary text like '$200 Deposit' and the 'Order' button label.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "19.6px", "letterSpacing": "normal" }, { "role": "mono", "size": "10px", "family": "ABCDiatype", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: ABCDiatype at 10px uppercase, used for small UI labels and footer links. (Technically sans-serif, but fulfills a distinct small-caps utility role).", "sampleId": "font-6", "confidence": 0.7, "lineHeight": "10px", "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 the body and the initial top section.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#222222", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(34, 34, 34); AI role: Dark gray/black used for text in the initial hero and the footer background.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#F7F7F7", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-4: computed rgb(247, 247, 247); AI role: Light gray (F7F7F7) used for text over dark backgrounds and subtle borders.", "sampleId": "color-4", "confidence": 0.6 } ] } ``` ### Design tokens ```json { "radius": "The 'Order' button appears highly rounded (pill-shaped), contrasting with the sharp full-bleed edges of the layout.", "density": "Very sparse. High negative space within each full-screen viewport.", "evidence": "Based on visual layout of full-viewport images, the CSS border color for the footer, and the shape of the 'Order' button.", "borderStyle": "Borders are minimal, used as delicate separators (e.g., the 0.05 opacity color-9 border on the footer) or input underlines (color-4 border for email).", "buttonStyle": "Solid pill shape with contrasting text, placed unobtrusively.", "cornerStyle": "Slight rounding on interactive elements, specifically the primary 'Order' pill button.", "contentWidth": "Full-bleed edge-to-edge for media, with text elements constrained by internal margins or floating specific coordinates.", "spacingRhythm": "Sections are rigidly sized to the viewport height, creating a very paced, slide-like rhythm rather than a continuous textual flow." } ``` ### 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. **observed sequence** — The background video plays, showing a man and a robot standing back-to-back with subtle movements. (3s–6s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **observed sequence** — The background video plays, depicting a robot operating a vacuum cleaner back and forth across the floor. (6s–11s; 95% 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 stacked media block structure with corner-anchored label overlay; Two-tier label typography (bold primary + lighter secondary) pattern; Pill-shaped CTA/email capture placement within a media block - Dependencies: Proprietary robot/human photography and video assets driving the mood; Specific muted blue-gray palette tied to brand imagery; Exact video loop content for ambient motion - Guidance: Recreate the stacked full-bleed block structure and label typography hierarchy, but substitute in-house photography/video and adjust the muted palette to match target brand; ambient motion can be approximated with a simple looping background video without exact parameter matching. ### 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 “Stacked Video Features”. Purpose: Multiple stacked full-width video sections highlighting Careers and Experience. Structure: full-bleed. Source layout label: Vertically stacked full-width media blocks with minimal text overlays.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Large cinematic shots of robots and humans with subtle typographic labels. Components: Full-width media blocks, Text overlays. Style direction: minimal, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"44px","family":"ABCDiatypeMedium","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: ABCDiatypeMedium at 44px used for primary large headings ('NEO', 'Careers 88 Open roles').","sampleId":"font-2","confidence":0.9,"lineHeight":"44px","letterSpacing":"-1.3px"} {"role":"heading","size":"11px","family":"ABCDiatypeMedium","source":"computed","traits":"uppercase","weight":"500","evidence":"font-7: computed CSS at 1440×1000; AI role: ABCDiatypeMedium at 11px uppercase used for navigation links.","sampleId":"font-7","confidence":0.8,"lineHeight":"20px","letterSpacing":"0.9px"} {"role":"body","size":"14px","family":"ABCDiatype","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: ABCDiatype at 14px used for secondary text like '$200 Deposit' and the 'Order' button label.","sampleId":"font-3","confidence":0.9,"lineHeight":"19.6px","letterSpacing":"normal"} {"role":"mono","size":"10px","family":"ABCDiatype","source":"computed","traits":"uppercase","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: ABCDiatype at 10px uppercase, used for small UI labels and footer links. (Technically sans-serif, but fulfills a distinct small-caps utility role).","sampleId":"font-6","confidence":0.7,"lineHeight":"10px","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 the body and the initial top section.","sampleId":"color-3","confidence":0.9} {"hex":"#222222","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(34, 34, 34); AI role: Dark gray/black used for text in the initial hero and the footer background.","sampleId":"color-1","confidence":0.9} {"hex":"#F7F7F7","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(247, 247, 247); AI role: Light gray (F7F7F7) used for text over dark backgrounds and subtle borders.","sampleId":"color-4","confidence":0.6} 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: observed sequence: The background video plays, showing a man and a robot standing back-to-back with subtle movements. (95% confidence) observed sequence: The background video plays, depicting a robot operating a vacuum cleaner back and forth across the floor. (95% confidence) Transfer these principles: Full-bleed stacked media block structure with corner-anchored label overlay; Two-tier label typography (bold primary + lighter secondary) pattern; Pill-shaped CTA/email capture placement within a media block. Dependencies: Proprietary robot/human photography and video assets driving the mood; Specific muted blue-gray palette tied to brand imagery; Exact video loop content for ambient motion. Adaptation guidance: Recreate the stacked full-bleed block structure and label typography hierarchy, but substitute in-house photography/video and adjust the muted palette to match target brand; ambient motion can be approximated with a simple looping background video without exact parameter matching. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.