# Laptop Product Demo Schema: Design Details SECTION.md v3.2 Website: Hebbia Source: https://www.hebbia.com/ Source section IDs: 09210d3c-660a-42d9-a61f-8043348b8e0a Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A single centered laptop gives the section one clear focal point, so the eye goes straight to the product. - The glowing screen stands out against the near-black canvas (#0E0B0B), so the interface looks lit and sharp without extra decoration. - Mockup frame, screen content and dark backdrop are separate layers, so you can swap the UI screenshot without redoing the layout. What a screenshot can't show: - The recording showed no motion, so any scroll, hover or tilt behavior is unknown. - No type sizes or spacing were measured, so text scale and padding can't be confirmed. Borrow: Put one lit product screen inside a device frame on a dark field, and let the glow carry the emphasis. Leave alone: Don't copy Hebbia's specific chat/agent interface, its dark-and-blue palette, or its Edict Display and Selecta Upright fonts; use your own product UI and a free serif or grotesque instead. ## Classification - Type: features - Layout: Centered prominent image subject. - Styles: Not classified - Confidence: 95% ## Purpose and structure A large product demonstration shown within a 3D laptop mockup. Visual signature: A glowing laptop screen displaying the product interface on a dark, shadowy surface. ## Components - device-mockup - ui-screen ## Typography - Display: Edict Display — 73.2px 390 - Heading: Edict Display Variable Roman — 45.4px 400 - Body: Selecta Upright — 14px 90 ## Functional palette - Canvas: canvas #0E0B0B - Text: text #FFFFFF - Primary-Action: primary action #465BFF - Muted-Text: muted text #868686 - Border: border #E5E5E5 - Surface: surface #262626 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 54.10/100 (Competent) Scored coverage: 50% - Typography: inconclusive — The site-wide type tokens (Edict Display, Selecta Upright) are supplied but no evidence confirms they are actually used within this specific crop; the visible text is a tiny screenshot within the laptop UI, not the section's own typographic system. Next tier: Need confirmation of which typographic tokens, if any, are rendered as real section copy versus embedded screenshot pixels. - Composition: 58 — A single centered laptop mockup on a dark void is a clean, competent product-demo composition with clear focal hierarchy, but it is also one of the most common SaaS hero/feature patterns and offers no distinctive spatial idea beyond centering a device. Next tier: Lacks a distinguishing compositional choice (asymmetry, layered depth, supporting copy interplay, or scale contrast) that would elevate it past a generic centered-mockup trope. - Motion: not_assessed — motion_moments is empty and no timestamped visible changes were supplied, so no motion claim can be evaluated. Next tier: Requires Gemini-supplied timestamped motion evidence (e.g., screen content transitions, camera drift, parallax) to assess. - Content: inconclusive — The screen content (a chat/agent UI) is illustrative of the product, but with only a static crop it's unclear how this integrates with surrounding narrative text or whether it's purely decorative chrome. Next tier: Need visibility into accompanying headline/copy relationship and how the screen content narrates a specific product capability. - Originality: 48 — Glowing 3D laptop mockups on dark cinematic backgrounds are an extremely well-worn SaaS marketing convention; nothing here (angle, lighting, UI skin) departs from that template in a memorable way. Next tier: Would need an unexpected framing, interaction, or stylistic twist on the device-mockup cliché to earn originality credit. - Adaptability: 55 — The structural idea (centered device shell containing a swappable UI screenshot) is clearly separable: mockup chrome, screen content, and background are distinct layers per the visual signature and component list. Next tier: No spacing/radius/shadow measurements were captured (cards, surfaces, media arrays are empty), leaving exact mockup proportions and depth-cueing details unspecified for faithful reuse. Strengths: - Clear single-focal hierarchy directing attention to the product screen - Component separation (device-mockup vs ui-screen) supports reuse of the shell independent of screen content Weaknesses: - Highly conventional 'glowing laptop on dark background' presentation with no distinguishing composition - No motion evidence provided despite this being a plausible site for subtle animated demo transitions - Measurement/coverage data for this section is nearly empty (no cards, media, or animation records), limiting confidence in any deeper claims - Unclear integration with surrounding copy or narrative context Why it does not reach the next tier: The section executes a familiar device-mockup trope competently but without any structural, typographic, or interaction detail that pushes it beyond genre convention; no supplied evidence (motion, copy integration, unique framing) demonstrates the added craft needed for a 'good' or higher rating. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the shell+screen separation pattern with a different device asset and a generic UI screenshot placeholder; recreate the dark background and glow via CSS lighting/gradient rather than relying on the original render, and verify motion/copy pairing before treating this as more than a static image swap. What transfers: - Centered device-mockup shell as a container for arbitrary product UI screenshots - Dark void background with glow-lit subject staging Dependencies: - Specific 3D laptop asset/render used for the mockup - The actual product screenshot content shown on screen - Any lighting/shadow rendering technique used to create the glow effect, which is unconfirmed but visually implied ## 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%) - No motion timestamps supplied, so any animated behavior of the section is unknown - Section measurement coverage is minimal (2 elements, no cards/media/animation records), limiting fine-grained evidence - Palette/typography tokens are site-wide and not confirmed to apply directly within this crop's on-screen content ## 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: centered single-column - Layout: Centered prominent image subject. - Styles: Not identified - Components: device-mockup, ui-screen - Purpose: A large product demonstration shown within a 3D laptop mockup. - Visual signature: A glowing laptop screen displaying the product interface on a dark, shadowy surface. - Place on the page: 10 of 11, after Feature collection (`hebbia-com:security_compliance_badges`), before Footer (`hebbia-com:site_footer`) ### Crop and composition - Crop: 1440×929px; aspect ratio 1.55:1 - Page bounds: 7235–8164px of 8961px - 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": "73.2px", "family": "Edict Display", "source": "computed", "traits": "uppercase", "weight": "390", "evidence": "font-1: computed CSS at 1440×1000; AI role: Edict Display, 73.2px, used for massive hero headers.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "65.9px", "letterSpacing": "1.8px" }, { "role": "heading", "size": "45.4px", "family": "Edict Display Variable Roman", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: Edict Display Variable Roman, 45.4px, used for secondary section headers.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "50px", "letterSpacing": "0.5px" }, { "role": "body", "size": "14px", "family": "Selecta Upright", "source": "computed", "traits": "Regular", "weight": "90", "evidence": "font-9: computed CSS at 1440×1000; AI role: Selecta Upright, 14px, widely used (count 301) for UI text and smaller body copy.", "sampleId": "font-9", "confidence": 0.9, "lineHeight": "20px", "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": "#0E0B0B", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(14, 11, 11); AI role: #0E0B0B used extensively as the dark background.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary reading text on dark backgrounds.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#465BFF", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-22: computed rgb(70, 91, 255); AI role: #465BFF used for primary CTA buttons.", "sampleId": "color-22", "confidence": 0.9 }, { "hex": "#868686", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-18: computed rgb(134, 134, 134); AI role: #868686 used for secondary, less prominent text.", "sampleId": "color-18", "confidence": 0.85 }, { "hex": "#E5E5E5", "name": "border", "role": "border", "source": "computed", "evidence": "color-10: computed rgb(229, 229, 229); AI role: #E5E5E5 used for fine 1px borders in the UI tables.", "sampleId": "color-10", "confidence": 0.85 }, { "hex": "#262626", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-4: computed rgb(38, 38, 38); AI role: #262626 used for backgrounds of UI cards and table elements.", "sampleId": "color-4", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Small border radii (approx 4-8px) applied to buttons, input fields, and embedded UI mockups.", "density": "Low density in marketing copy areas to emphasize typography, contrasting with high density in the product UI data tables.", "evidence": "DOM/CSS confirms font-1 (Edict Display, 73.2px) and color-1 (#0E0B0B). Visuals show #465BFF buttons and tight table layouts within the product screenshots.", "borderStyle": "Subtle, solid 1px borders (#E5E5E5) used primarily within the light-themed product UI mockups to separate table rows and columns.", "buttonStyle": "Solid fill with contrasting text (blue with white text, or white with dark text), featuring slight corner rounding.", "cornerStyle": "Mix of sharp edges for full-width sections and subtly rounded corners for floating UI cards and buttons.", "contentWidth": "Main content is centrally constrained with a standard max-width, while background elements and certain UI grids bleed near the edges.", "spacingRhythm": "Generous vertical macro-spacing separates main narrative sections, while micro-spacing within UI mockups is tight and structured to mimic complex software." } ``` ### 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": 7235, "bottom": 8164, "pageHeight": 8961 } }, "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": 7235, "bottom": 8164, "pageHeight": 8961 }, "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": 2 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-09-21T04:23:48.957Z", "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 No timestamped authored motion is attached. Use only restrained baseline transitions. 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: Centered device-mockup shell as a container for arbitrary product UI screenshots; Dark void background with glow-lit subject staging - Dependencies: Specific 3D laptop asset/render used for the mockup; The actual product screenshot content shown on screen; Any lighting/shadow rendering technique used to create the glow effect, which is unconfirmed but visually implied - Guidance: Reuse the shell+screen separation pattern with a different device asset and a generic UI screenshot placeholder; recreate the dark background and glow via CSS lighting/gradient rather than relying on the original render, and verify motion/copy pairing before treating this as more than a static image swap. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; timestamped authored motion. ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Laptop Product Demo”. Purpose: A large product demonstration shown within a 3D laptop mockup. Structure: centered single-column. Source layout label: Centered prominent image subject.. 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 glowing laptop screen displaying the product interface on a dark, shadowy surface. Components: device-mockup, ui-screen. Style direction: No style labels supplied. Observed crop: 1440×929px (1.55:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"73.2px","family":"Edict Display","source":"computed","traits":"uppercase","weight":"390","evidence":"font-1: computed CSS at 1440×1000; AI role: Edict Display, 73.2px, used for massive hero headers.","sampleId":"font-1","confidence":0.95,"lineHeight":"65.9px","letterSpacing":"1.8px"} {"role":"heading","size":"45.4px","family":"Edict Display Variable Roman","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Edict Display Variable Roman, 45.4px, used for secondary section headers.","sampleId":"font-2","confidence":0.9,"lineHeight":"50px","letterSpacing":"0.5px"} {"role":"body","size":"14px","family":"Selecta Upright","source":"computed","traits":"Regular","weight":"90","evidence":"font-9: computed CSS at 1440×1000; AI role: Selecta Upright, 14px, widely used (count 301) for UI text and smaller body copy.","sampleId":"font-9","confidence":0.9,"lineHeight":"20px","letterSpacing":"normal"} Color evidence: {"hex":"#0E0B0B","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(14, 11, 11); AI role: #0E0B0B used extensively as the dark background.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary reading text on dark backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#465BFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-22: computed rgb(70, 91, 255); AI role: #465BFF used for primary CTA buttons.","sampleId":"color-22","confidence":0.9} {"hex":"#868686","name":"muted text","role":"muted-text","source":"computed","evidence":"color-18: computed rgb(134, 134, 134); AI role: #868686 used for secondary, less prominent text.","sampleId":"color-18","confidence":0.85} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-10: computed rgb(229, 229, 229); AI role: #E5E5E5 used for fine 1px borders in the UI tables.","sampleId":"color-10","confidence":0.85} {"hex":"#262626","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(38, 38, 38); AI role: #262626 used for backgrounds of UI cards and table elements.","sampleId":"color-4","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":[]} Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Centered device-mockup shell as a container for arbitrary product UI screenshots; Dark void background with glow-lit subject staging. Dependencies: Specific 3D laptop asset/render used for the mockup; The actual product screenshot content shown on screen; Any lighting/shadow rendering technique used to create the glow effect, which is unconfirmed but visually implied. Adaptation guidance: Reuse the shell+screen separation pattern with a different device asset and a generic UI screenshot placeholder; recreate the dark background and glow via CSS lighting/gradient rather than relying on the original render, and verify motion/copy pairing before treating this as more than a static image swap. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.