# Hero with floating UI mockups Schema: Design Details SECTION.md v3.2 Website: DualEntry Source: https://www.dualentry.com/ Source section IDs: 18d0b1cb-f83e-4b0d-a1fe-1f940c9ba231 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The two-column split puts a 56px headline, an 18px subline and a one-field email form on the left, so the visitor reads the offer and acts without scrolling. - Type stays in one family with light 300 weights for support text and a 400 headline, which gives a calm, clear hierarchy. - Overlapping laptop and phone mockups at an angle add depth on the right, and the logo strip across the bottom adds social proof beside a 4.9-star badge. What a screenshot can't show: - On load the laptop dashboard slides in from the right over about 2 seconds, then the phone appears beside it. - The headline has a tight 61.6px line height, body text uses 24–27px line heights, and gaps between elements are small (8, 10 and 16px). Borrow: Pair a short headline and a single-field form with a product visual that enters from the side, so the proof of the product arrives as the visitor reads. Leave alone: Don't copy the teal gradient, the Twklausanne typeface (use a light-weight neutral grotesque instead) or the angled laptop-and-phone frames with their video dashboards. ## Classification - Type: hero - Layout: Two-column split layout with text and form on the left, overlapping floating graphics on the right, above a full-width bottom logo strip. - Styles: gradient, corporate, minimal - Confidence: 100% ## Purpose and structure A split hero section with a teal gradient background, featuring a left-aligned headline and email capture form, and animated floating laptop and mobile device mockups on the right. A logo row anchors the bottom. Visual signature: Teal gradient background with 3D-angled floating laptop and phone screens next to an email input. ## Components - headline - email-capture-form - floating-device-mockup - logo-cloud ## Typography - Display: Twklausanne — 56px 400 - Heading: Twklausanne — 48px 400 - Body: Twklausanne — 16px 300 ## Functional palette - Text: text #1D1F20 - Canvas: canvas #FFFFFF - Border: border #E4EBEC - Surface: surface #1C1D1E ## Motion evidence - 0.0–2.0s — A laptop showing a dashboard slides in from the right, transitioning to display a mobile device interface alongside the laptop. (95% confidence) ## Section quality Overall: 57.00/100 (Competent) Scored coverage: 100% - Typography: 58 — Clean large Twklausanne display type with clear hierarchy (56px headline, 16px body/support), but pairing is a standard SaaS hero convention with no distinctive type treatment, scale contrast, or expressive detail. Next tier: Introduce a more considered type system (e.g., contrast in weight/style between headline and micro-copy, custom numeral treatment in the dashboard mockup) to move beyond generic SaaS hero typography. - Composition: 62 — Competent two-column split with left-aligned text/form balanced against overlapping laptop+phone mockups, anchored by a bottom logo strip; the diagonal laptop lid and phone overlap create some depth. But the layout is a very common SaaS pattern and the mockup placement feels templated rather than custom-composed. Next tier: Needs a more distinctive spatial arrangement or asymmetry that breaks from the standard left-text/right-device SaaS template to earn a strong rating. - Motion: 55 — Gemini confirms a single timestamped motion moment: laptop dashboard slides in from the right (0-2s) transitioning to show both laptop and phone. This is a simple, functional entrance animation with no additional choreography noted. Next tier: Only one basic slide-in transition is evidenced; additional layered or interactive motion (hover states, parallax, sequenced reveals) would be needed to score higher. - Content: 60 — Headline, subcopy, email capture form, social proof badge (4.9 stars), video dashboard mockups, and logo cloud are well integrated into a coherent conversion-focused narrative, with the live video content inside the device frames adding some realism. Next tier: Content integration is functional but formulaic; deeper product storytelling (e.g., contextual annotations, animated data callouts) would be needed for a higher tier. - Originality: 45 — This is a highly familiar SaaS hero formula: gradient background, left text/CTA, right floating device mockups, bottom logo strip. Nothing in the deterministic evidence suggests a distinctive idea beyond this template. Next tier: Would need a novel compositional conceit, unexpected material treatment, or interaction detail that isn't substitutable with countless other SaaS heroes. - Adaptability: 60 — Structure (headline, form, device mockups, logo row) is modular and clearly separable from the teal gradient skin; grid-based form and defined media rects support reuse, though the specific video assets and 3D-angled device framing are bespoke dependencies. Next tier: Tighter documentation of the mockup's 3D transform/perspective parameters would raise confidence in full skin/structure separation. Strengths: - Clear conversion-focused hierarchy with headline, subcopy, and email form immediately visible - Social proof badge and logo strip reinforce credibility without cluttering the primary message - Device mockups use live video content for added realism over static screenshots Weaknesses: - Highly conventional SaaS hero layout with no distinctive compositional or material idea - Only one simple entrance animation evidenced, with no further motion sophistication - Typography relies on standard scale/weight contrast rather than a distinctive system Why it does not reach the next tier: The section executes a well-worn SaaS hero formula cleanly but introduces no distinctive idea in type, layout, or motion that would make it memorable or hard to substitute with similar heroes elsewhere. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the split layout, form, and logo strip skeleton; replace the gradient skin and device mockup assets with new brand visuals and swap in site-specific product screenshots or videos. What transfers: - Two-column split layout with text/form left and device mockups right - Email capture form with adjacent CTA button - Bottom logo cloud strip for social proof Dependencies: - Teal gradient background texture - Custom 3D-angled device mockup assets with embedded video content - Specific dashboard UI content shown inside mockups ## 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 only on the single timestamped moment provided; other possible interactions (hover, scroll-triggered) are not evidenced - Exact animation easing/duration parameters not supplied, limiting motion detail assessment - Deterministic facts don't specify the 3D transform values used for the device mockup angle ## 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: hero - Source type: hero - Structure: two-column - Layout: Two-column split layout with text and form on the left, overlapping floating graphics on the right, above a full-width bottom logo strip. - Styles: gradient, corporate, minimal - Components: headline, email-capture-form, floating-device-mockup, logo-cloud - Purpose: A split hero section with a teal gradient background, featuring a left-aligned headline and email capture form, and animated floating laptop and mobile device mockups on the right. A logo row anchors the bottom. - Visual signature: Teal gradient background with 3D-angled floating laptop and phone screens next to an email input. - Place on the page: 2 of 9, after Navigation (`dualentry-com:C01`), before Feature collection (`dualentry-com:C03`) ### Crop and composition - Crop: 1440×788px; aspect ratio 1.827:1 - Page bounds: 110–898px of 6763px - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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": "section heading", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "56px", "weight": "400", "lineHeight": "61.6px", "letterSpacing": "normal", "sample": "The AI ERP to end month-end", "element": "h1", "occurrences": 1, "sourceId": "font-4" }, { "role": "body/supporting copy", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "16px", "weight": "300", "lineHeight": "24px", "letterSpacing": "normal", "sample": "Schedule demo", "element": "p", "occurrences": 55, "sourceId": "font-7" }, { "role": "body/supporting copy", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "11px", "weight": "300", "lineHeight": "14.9px", "letterSpacing": "normal", "sample": "By clicking \"Schedule Demo\" you agree to the use of your data in accordance with DualEntry's Privacy", "element": "p", "occurrences": 4, "sourceId": "font-10" }, { "role": "body/supporting copy", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "18px", "weight": "300", "lineHeight": "27px", "letterSpacing": "normal", "sample": "Automate your accounting, so you can focus on running the business.", "element": "p", "occurrences": 1, "sourceId": "font-12" }, { "role": "body/supporting copy", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "16px", "weight": "500", "lineHeight": "16px", "letterSpacing": "normal", "sample": "4.9 stars", "element": "p", "occurrences": 1, "sourceId": "font-13" }, { "role": "UI/supporting text", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "14px", "weight": "300", "lineHeight": "21px", "letterSpacing": "normal", "sample": "See customer stories", "element": "div", "occurrences": 54, "sourceId": "font-15" }, { "role": "UI/supporting text", "family": "Twklausanne", "stack": "Twklausanne, sans-serif", "size": "16px", "weight": "300", "lineHeight": "16px", "letterSpacing": "normal", "sample": "120+ reviews", "element": "div", "occurrences": 2, "sourceId": "font-17" } ], "siteRoles": [ { "role": "display", "size": "56px", "family": "Twklausanne", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "61.6px", "letterSpacing": "normal" }, { "role": "heading", "size": "48px", "family": "Twklausanne", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "52.8px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "Twklausanne", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.", "sampleId": "font-7", "confidence": 0.85, "lineHeight": "24px", "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": "#1D1F20", "cssValue": "rgb(29, 31, 32)", "alpha": 1, "appliedAs": [ "text", "svg-stroke" ], "occurrences": 183, "sourceId": "color-2" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.2)", "alpha": 0.2, "appliedAs": [ "border", "background" ], "occurrences": 13, "sourceId": "color-8" }, { "value": "#E4EBEC", "cssValue": "rgb(228, 235, 236)", "alpha": 1, "appliedAs": [ "border" ], "occurrences": 525, "sourceId": "color-9" }, { "value": "#2D3132", "cssValue": "rgb(45, 49, 50)", "alpha": 1, "appliedAs": [ "text", "svg-fill" ], "occurrences": 10, "sourceId": "color-10" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.5)", "alpha": 0.5019607843137255, "appliedAs": [ "background", "text" ], "occurrences": 18, "sourceId": "color-11" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.65)", "alpha": 0.6509803921568628, "appliedAs": [ "text" ], "occurrences": 6, "sourceId": "color-12" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.1)", "alpha": 0.10196078431372549, "appliedAs": [ "control-background", "background", "border" ], "occurrences": 7, "sourceId": "color-15" }, { "value": "#1C1D1E", "cssValue": "rgb(28, 29, 30)", "alpha": 1, "appliedAs": [ "svg-fill" ], "occurrences": 206, "sourceId": "color-18" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.25)", "alpha": 0.25098039215686274, "appliedAs": [ "border" ], "occurrences": 1, "sourceId": "color-21" }, { "value": "#000000", "cssValue": "rgb(0, 0, 0)", "alpha": 1, "appliedAs": [ "svg-fill" ], "occurrences": 32, "sourceId": "color-22" }, { "value": "#FFFFFF", "cssValue": "rgba(255, 255, 255, 0.3)", "alpha": 0.30196078431372547, "appliedAs": [ "border" ], "occurrences": 12, "sourceId": "color-25" }, { "value": "#1E2020", "cssValue": "rgba(29, 31, 32, 0.5)", "alpha": 0.5019607843137255, "appliedAs": [ "border" ], "occurrences": 1, "sourceId": "color-26" } ], "functionalPalette": [ { "hex": "#1D1F20", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#E4EBEC", "name": "border", "role": "border", "source": "computed", "evidence": "color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.", "sampleId": "color-9", "confidence": 0.9 }, { "hex": "#1C1D1E", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.", "sampleId": "color-18", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Medium border radius appears common on cards and buttons.", "density": "Moderate density; ample whitespace around main elements, but dense information packing within feature cards and footer links.", "evidence": "Observed via the bento-box feature grid, consistent button styling, and organized footer layout.", "borderStyle": "Subtle, thin solid borders (e.g., 1px) used to define cards and form elements.", "buttonStyle": "Solid white primary buttons on dark backgrounds, dark solid buttons on light backgrounds, with rounded corners.", "cornerStyle": "Consistent use of rounded corners on buttons, inputs, and feature cards.", "contentWidth": "Content is generally constrained to a central max-width, though background gradients and banners span full width.", "spacingRhythm": "Generous spacing between major sections, with tighter padding inside feature cards and UI components." } ``` ### 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. - Observed gaps: 8, 10, 16px. - Representative content widths: 1240, 490, 318, 310, 279px. - Layout containers: 1; cards/surfaces: 0; media elements: 12; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 110, "bottom": 898, "pageHeight": 6763 } }, "container": null, "spacing": { "observedGapsPx": [ 8, 10, 16 ], "representativeContentWidthsPx": [ 1240, 490, 318, 310, 279 ] }, "columns": [ { "element": "form · Please enter a valid business email address.Schedule demo", "size": "490×56px", "position": "x 100px, y 532px", "display": "grid", "template": "279.469px 202.516px", "direction": "row", "gap": "8px" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "1600px", "4px", "8px", "2px" ], "borders": [ "1px solid rgba(255, 255, 255, 0.2)", "1px solid rgba(255, 255, 255, 0.3)" ], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "video · Your browser does not support the video tag.", "size": "1440×800px", "position": "x 0px, y 67px", "aspectRatio": 1.8, "objectFit": "cover", "objectPosition": "50% 100%", "radius": "0px", "overflow": "clip", "source": "https://res.cloudinary.com/dly6ckatf/video/upload/v1792510235/herovideo_jqbstg.mov" }, { "element": "video · Your browser does not support the video tag.", "size": "310×174px", "position": "x 272px, y 589px", "aspectRatio": 1.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://famous-centaur-1835b7.netlify.app/Tooltip_preview_ytronb.webm" }, { "element": "video · Your browser does not support the video tag.", "size": "318×150px", "position": "x 721px, y 512px", "aspectRatio": 2.1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "source not captured" }, { "element": "svg · svg", "size": "168×24px", "position": "x 710px, y 838px", "aspectRatio": 7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "132×24px", "position": "x 741px, y 682px", "aspectRatio": 5.5, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "101×24px", "position": "x 978px, y 838px", "aspectRatio": 4.2, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "img · hero-v3_customer-logo-img is-bigger", "size": "71×32px", "position": "x -43px, y 834px", "aspectRatio": 2.2, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/6ada0f10883329570818931b_allaround%20children.png" }, { "element": "svg · svg", "size": "131×17px", "position": "x 479px, y 842px", "aspectRatio": 7.7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "76×24px", "position": "x 303px, y 838px", "aspectRatio": 3.2, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "img · hero-v3_customer-logo-img", "size": "75×24px", "position": "x 128px, y 838px", "aspectRatio": 3.1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/6ada0ebe9f7c45efd5619b1c_lynk.png" }, { "element": "svg · svg", "size": "53×24px", "position": "x 1319px, y 838px", "aspectRatio": 2.2, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "40×24px", "position": "x 1179px, y 838px", "aspectRatio": 1.7, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "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 { "root": null, "cards": [], "media": [ { "id": "ld-1540", "tag": "video", "rect": { "x": 0, "y": 67, "width": 1440, "height": 800 }, "role": null, "label": "Your browser does not support the video tag.", "media": { "src": "https://res.cloudinary.com/dly6ckatf/video/upload/v1792510235/herovideo_jqbstg.mov", "poster": "", "duration": 4 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.8, "objectPosition": "50% 100%" }, { "id": "ld-1503", "tag": "video", "rect": { "x": 272, "y": 589, "width": 310, "height": 174 }, "role": null, "label": "Your browser does not support the video tag.", "media": { "src": "https://famous-centaur-1835b7.netlify.app/Tooltip_preview_ytronb.webm", "poster": "", "duration": 5.005 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.8, "objectPosition": "50% 50%" }, { "id": "ld-1550", "tag": "video", "rect": { "x": 721, "y": 512, "width": 318, "height": 150 }, "role": null, "label": "Your browser does not support the video tag.", "media": { "src": "", "poster": "", "duration": null }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 2.1, "objectPosition": "50% 50%" }, { "id": "ld-1914", "tag": "svg", "rect": { "x": 710, "y": 838, "width": 168, "height": 24 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 7, "objectPosition": "50% 50%" }, { "id": "ld-1553", "tag": "svg", "rect": { "x": 741, "y": 682, "width": 132, "height": 24 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 5.5, "objectPosition": "50% 50%" }, { "id": "ld-1938", "tag": "svg", "rect": { "x": 978, "y": 838, "width": 101, "height": 24 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 4.2, "objectPosition": "50% 50%" }, { "id": "ld-1884", "tag": "img", "rect": { "x": -43, "y": 834, "width": 71, "height": 32 }, "role": null, "label": "hero-v3_customer-logo-img is-bigger", "media": { "alt": "", "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/6ada0f10883329570818931b_allaround%20children.png", "naturalWidth": 507, "naturalHeight": 228 }, "radius": "0px", "overflow": "clip", "objectFit": "fill", "aspectRatio": 2.2, "objectPosition": "50% 50%" }, { "id": "ld-1907", "tag": "svg", "rect": { "x": 479, "y": 842, "width": 131, "height": 17 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 7.7, "objectPosition": "50% 50%" }, { "id": "ld-1896", "tag": "svg", "rect": { "x": 303, "y": 838, "width": 76, "height": 24 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 3.2, "objectPosition": "50% 50%" }, { "id": "ld-1889", "tag": "img", "rect": { "x": 128, "y": 838, "width": 75, "height": 24 }, "role": null, "label": "hero-v3_customer-logo-img", "media": { "alt": "", "src": "https://cdn.prod.website-files.com/66bf861737ab5a556a15c52b/6ada0ebe9f7c45efd5619b1c_lynk.png", "naturalWidth": 439, "naturalHeight": 140 }, "radius": "0px", "overflow": "clip", "objectFit": "fill", "aspectRatio": 3.1, "objectPosition": "50% 50%" }, { "id": "ld-1971", "tag": "svg", "rect": { "x": 1319, "y": 838, "width": 53, "height": 24 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 2.2, "objectPosition": "50% 50%" }, { "id": "ld-1960", "tag": "svg", "rect": { "x": 1179, "y": 838, "width": 40, "height": 24 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1.7, "objectPosition": "50% 50%" } ], "bounds": { "top": 110, "bottom": 898, "pageHeight": 6763 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-1469", "gap": "8px", "tag": "form", "rect": { "x": 100, "y": 532, "width": 490, "height": 56 }, "role": null, "label": "Please enter a valid business email address.Schedule demo", "columns": "279.469px 202.516px", "display": "grid", "direction": "row" } ], "spacing": { "gapsPx": [ 8, 10, 16 ], "representativeContentWidthsPx": [ 1240, 490, 318, 310, 279 ] }, "coverage": { "cards": 0, "media": 12, "animations": 0, "elementsInSection": 57 }, "surfaces": { "radii": [ "1600px", "4px", "8px", "2px" ], "borders": [ "1px solid rgba(255, 255, 255, 0.2)", "1px solid rgba(255, 255, 255, 0.3)" ], "shadows": [] }, "animations": [], "capturedAt": "2026-10-29T16:48:55.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. **observed sequence** — A laptop showing a dashboard slides in from the right, transitioning to display a mobile device interface alongside the laptop. (0s–2s; 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: 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: Two-column split layout with text/form left and device mockups right; Email capture form with adjacent CTA button; Bottom logo cloud strip for social proof - Dependencies: Teal gradient background texture; Custom 3D-angled device mockup assets with embedded video content; Specific dashboard UI content shown inside mockups - Guidance: Reuse the split layout, form, and logo strip skeleton; replace the gradient skin and device mockup assets with new brand visuals and swap in site-specific product screenshots or videos. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original hero section inspired by the design evidence titled “Hero with floating UI mockups”. Purpose: A split hero section with a teal gradient background, featuring a left-aligned headline and email capture form, and animated floating laptop and mobile device mockups on the right. A logo row anchors the bottom. Structure: two-column. Source layout label: Two-column split layout with text and form on the left, overlapping floating graphics on the right, above a full-width bottom logo strip.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: Teal gradient background with 3D-angled floating laptop and phone screens next to an email input. Components: headline, email-capture-form, floating-device-mockup, logo-cloud. Style direction: gradient, corporate, minimal. Observed crop: 1440×788px (1.827:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"56px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.6px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'","sampleId":"font-2","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.","sampleId":"font-7","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"} Color evidence: {"hex":"#1D1F20","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.","sampleId":"color-3","confidence":0.9} {"hex":"#E4EBEC","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.","sampleId":"color-9","confidence":0.9} {"hex":"#1C1D1E","name":"surface","role":"surface","source":"computed","evidence":"color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.","sampleId":"color-18","confidence":0.85} Typography measured inside this section: {"id":"font-4","size":"56px","count":1,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"h1","top":325,"text":"The AI ERP to end month-end","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"61.6px","letterSpacing":"normal"} {"id":"font-7","size":"16px","count":55,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"p","top":548,"text":"Schedule demo","property":"font"},{"tag":"p","top":664,"text":"DualEntry in 3 min","property":"font"},{"tag":"video","top":589,"text":"Your browser does not support the video tag.","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"24px","letterSpacing":"normal"} {"id":"font-10","size":"11px","count":4,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"p","top":600,"text":"By clicking \"Schedule Demo\" you agree to the use of your data in accordance with DualEntry's Privacy","property":"font"},{"tag":"a","top":616,"text":"Privacy Notice","property":"font"},{"tag":"p","top":5713,"text":"By clicking \"Schedule Demo\" you agree to the use of your data in accordance with DualEntry's Privacy","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"14.9px","letterSpacing":"normal"} {"id":"font-12","size":"18px","count":1,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"p","top":473,"text":"Automate your accounting, so you can focus on running the business.","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"27px","letterSpacing":"normal"} {"id":"font-13","size":"16px","count":1,"family":"Twklausanne","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":265,"text":"4.9 stars","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"16px","letterSpacing":"normal"} {"id":"font-15","size":"14px","count":54,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"div","top":840,"text":"See customer stories","property":"font"},{"tag":"a","top":5939,"text":"General Ledger","property":"font"},{"tag":"a","top":5968,"text":"Close Management","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"21px","letterSpacing":"normal"} {"id":"font-17","size":"16px","count":2,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"div","top":265,"text":"120+ reviews","property":"font"},{"tag":"div","top":2348,"text":"Get started","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"16px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-2","hex":"#1D1F20","alpha":1,"count":183,"contexts":[{"tag":"p","top":64,"text":"Schedule demo","property":"text"},{"tag":"path","top":554,"text":"","property":"svg-stroke"},{"tag":"video","top":512,"text":"Your browser does not support the video tag.","property":"text"}],"cssValue":"rgb(29, 31, 32)"} {"id":"color-8","hex":"#FFFFFF","alpha":0.2,"count":13,"contexts":[{"tag":"a","top":253,"text":"4.9 stars120+ reviews","property":"border"},{"tag":"input","top":532,"text":"","property":"border"},{"tag":"div","top":801,"text":"Your browser does not support the video tag. See customer stories /* Initial styles for arrows insid","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.2)"} {"id":"color-9","hex":"#E4EBEC","alpha":1,"count":525,"contexts":[{"tag":"div","top":898,"text":"The accounting suite that runs while you lead.Multi-Entity Management One view, every entity.General","property":"border"},{"tag":"a","top":1139,"text":"Multi-Entity Management One view, every entity.","property":"border"}],"cssValue":"rgb(228, 235, 236)"} {"id":"color-10","hex":"#2D3132","alpha":1,"count":10,"contexts":[{"tag":"div","top":840,"text":"See customer stories","property":"text"},{"tag":"path","top":845,"text":"","property":"svg-fill"},{"tag":"h2","top":5072,"text":"Whatever you're running, we connect to it.","property":"text"}],"cssValue":"rgb(45, 49, 50)"} {"id":"color-11","hex":"#FFFFFF","alpha":0.5019607843137255,"count":18,"contexts":[{"tag":"div","top":667,"text":"","property":"background"},{"tag":"p","top":3539,"text":"finance team","property":"text"},{"tag":"span","top":6697,"text":"2026","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.5)"} {"id":"color-12","hex":"#FFFFFF","alpha":0.6509803921568628,"count":6,"contexts":[{"tag":"div","top":265,"text":"120+ reviews","property":"text"},{"tag":"p","top":473,"text":"Automate your accounting, so you can focus on running the business.","property":"text"},{"tag":"a","top":616,"text":"Privacy Notice","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.65)"} {"id":"color-15","hex":"#FFFFFF","alpha":0.10196078431372549,"count":7,"contexts":[{"tag":"a","top":253,"text":"4.9 stars120+ reviews","property":"control-background"},{"tag":"input","top":532,"text":"","property":"background"},{"tag":"div","top":6486,"text":"Get the latest AI finance insightsPlease enter a valid business email address.conversion_pageSubscri","property":"border"}],"cssValue":"rgba(255, 255, 255, 0.1)"} {"id":"color-18","hex":"#1C1D1E","alpha":1,"count":206,"contexts":[{"tag":"path","top":839,"text":"","property":"svg-fill"}],"cssValue":"rgb(28, 29, 30)"} Exact section measurements from the saved element map: spacing {"gapsPx":[8,10,16],"representativeContentWidthsPx":[1240,490,318,310,279]}; surfaces {"radii":["1600px","4px","8px","2px"],"borders":["1px solid rgba(255, 255, 255, 0.2)","1px solid rgba(255, 255, 255, 0.3)"],"shadows":[]}; media [{"tag":"video","rect":{"x":0,"y":67,"width":1440,"height":800},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 100%","radius":"0px"},{"tag":"video","rect":{"x":272,"y":589,"width":310,"height":174},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"video","rect":{"x":721,"y":512,"width":318,"height":150},"aspectRatio":2.1,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":710,"y":838,"width":168,"height":24},"aspectRatio":7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}] Motion evidence: observed sequence: A laptop showing a dashboard slides in from the right, transitioning to display a mobile device interface alongside the laptop. (95% confidence) Transfer these principles: Two-column split layout with text/form left and device mockups right; Email capture form with adjacent CTA button; Bottom logo cloud strip for social proof. Dependencies: Teal gradient background texture; Custom 3D-angled device mockup assets with embedded video content; Specific dashboard UI content shown inside mockups. Adaptation guidance: Reuse the split layout, form, and logo strip skeleton; replace the gradient skin and device mockup assets with new brand visuals and swap in site-specific product screenshots or videos. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.