# Detailed UI Mockup (Prospect) Schema: Design Details SECTION.md v3.2 Website: Zero Source: https://zero.inc/ Source section IDs: gap-c70c04fa-4574-5569 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The headline and muted subhead sit on the left while a large table-plus-chat mockup overlaps toward the right, so the product is the clear focus. - The mockup uses specific content such as fit scores, why-now reasons and a real-sounding AI chat transcript, which makes it feel like working software. - A restrained palette of white surfaces, grey canvas and dark maroon text, with dense small body text against a heavy headline, keeps the hierarchy clear. What a screenshot can't show: - The recording shows only the page scrolling past the mockup between about 16s and 18s, with no distinct reveal, parallax or hover effect. - Font sizes, letter spacing and section padding were not measured, so exact values are unknown. Borrow: Pair a short headline block with a large, believable product panel that overlaps its neighbours, filled with specific data rather than placeholder text. Leave alone: Don't copy the dotted globe graphic, the dark maroon and grey palette, or the company-prospecting table and chat content; use your own product's data and visual device. ## Classification - Type: feature-card - Layout: Full-width section with a headline on the left and a large, overlapping application UI mockup dominating the space. - Styles: minimal, corporate - Confidence: 90% ## Purpose and structure A large product UI showcase displaying a data table and an AI chat interface sidebar. Visual signature: A high-fidelity software interface showing a list of companies and a contextual AI assistant sidebar. ## Components - heading - ui-mockup - data-table - chat-interface ## Typography - Display: geomanist — 60px 700 - Heading: geomanist — 48px 700 - Body: Geist — 18.4px 400 - Mono: Geist — 13px 400 ## Functional palette - Surface: surface #FFFFFF - Text: text #2E0000 - Primary-Action: primary action #2E0000 - Canvas: canvas #ECE9EA - Muted-Text: muted text #646464 - Border: border #F0F0F0 ## Motion evidence - 16.0–18.0s — The view scrolls over a detailed breakdown of the feature via a large UI mockup. (90% confidence) ## Section quality Overall: 62.00/100 (Good) Scored coverage: 85% - Typography: 62 — Clear hierarchy between heavy display headline, muted subhead, and dense mono/body text inside the mockup. Good contrast of scale but letter-spacing and weight choices are standard SaaS convention rather than distinctive. Next tier: Needs a more deliberate typographic idea beyond standard heading-plus-dense-table pairing to feel memorable. - Composition: 68 — Headline/subhead anchored left, with a large table-plus-chat UI mockup overlapping to the right in a believable product-screenshot layout; dotted globe graphic and color blocking add depth. The overlap of chat panel and table creates a credible sense of a real application, with good use of negative space above. Next tier: Composition reads as a well-executed but conventional 'headline + app screenshot' pattern; lacks an unexpected spatial or layering device that would push it into strong/memorable territory. - Motion: inconclusive — Only a generic scroll-over description with no specific timestamped visible change (e.g., reveal, parallax, hover) is supplied. Next tier: Need concrete timestamped motion behavior (e.g., chat messages animating in, table rows highlighting) to assess. - Content: 65 — The mockup content (ICP fit scores, why-now reasons, AI chat transcript) is specific and functionally integrated, giving the section real product credibility rather than generic placeholder data. Next tier: Content is convincing but still a fairly standard dashboard-plus-chat demonstration; doesn't show a unique interaction or outcome that differentiates it further. - Originality: 58 — The dual-pane 'table + AI assistant sidebar' format is common in current AI SaaS marketing; the dotted-map decorative element is a nice touch but not enough to escape a familiar genre. Next tier: Would need a distinctive compositional or interaction idea not already seen across many AI-tool landing pages. - Adaptability: 55 — Structure (headline block + floating UI panel) is clearly separable from skin (colors, fonts, specific data), but the UI mockup itself carries heavy product-specific content that limits reusability without substantial rebuild. Next tier: Mockup-heavy content reduces how cleanly the layout pattern transfers without full re-creation of a bespoke interface. Strengths: - Credible, specific product UI content (ICP fit scores, AI chat transcript) that reinforces the headline's claim - Clear two-tier hierarchy between marketing copy and embedded application screenshot - Decorative dotted globe element adds subtle visual interest without competing with the UI Weaknesses: - Overall pattern (headline + large app screenshot with AI sidebar) is a common SaaS marketing convention - No confirmed specific motion behavior to evaluate beyond generic scroll - Typography choices are competent but not distinctive - Mockup-heavy composition limits template-level reusability Why it does not reach the next tier: The section executes a familiar 'headline plus layered app screenshot' format competently with nice supporting details, but without a distinguishing compositional or typographic idea, or confirmed motion sophistication, it stays in the good/polished range rather than reaching strong/memorable. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the headline-plus-overlapping-mockup composition and two-pane UI metaphor; replace the table/chat content and decorative graphic with new product data and brand skin. What transfers: - Left-aligned headline and subhead block paired with an overlapping application mockup - Two-pane UI concept (data table + contextual assistant panel) as a generic layout idea Dependencies: - Specific dashboard data (company names, ICP scores, chat transcript) tied to this product - Dotted map decorative graphic and brand color palette ## 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 confirmed timestamped motion detail provided beyond a generic scroll description - Exact spacing, shadow, and radius values for the mockup panels not deterministically specified ## 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: feature-card - Structure: full-bleed - Layout: Full-width section with a headline on the left and a large, overlapping application UI mockup dominating the space. - Styles: minimal, corporate - Components: heading, ui-mockup, data-table, chat-interface - Purpose: A large product UI showcase displaying a data table and an AI chat interface sidebar. - Visual signature: A high-fidelity software interface showing a list of companies and a contextual AI assistant sidebar. - Place on the page: 7 of 14, after Feature collection (`zero-inc:revenue_motion_accordion`), before Feature collection (`8cf66beb-e8e9-4e15-a5b7-9258b21bdb38`) ### 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": "60px", "family": "geomanist", "source": "computed", "traits": "Regular", "weight": "700", "evidence": "font-4: computed CSS at 1440×1000; AI role: Geomanist 700 at 60px, used for the largest section heading.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "58.8px", "letterSpacing": "-2.1px" }, { "role": "heading", "size": "48px", "family": "geomanist", "source": "computed", "traits": "Regular", "weight": "700", "evidence": "font-1: computed CSS at 1440×1000; AI role: Geomanist 700 at 48px, used extensively for primary section headings.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "50.4px", "letterSpacing": "-1.2px" }, { "role": "body", "size": "18.4px", "family": "Geist", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: Geist 400 at 18.4px, used for legible, mid-sized descriptive paragraphs.", "sampleId": "font-12", "confidence": 0.9, "lineHeight": "27.6px", "letterSpacing": "normal" }, { "role": "mono", "size": "13px", "family": "Geist", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-7: computed CSS at 1440×1000; AI role: Geist 400 at 13px, used frequently within the dense product UI mockups.", "sampleId": "font-7", "confidence": 0.85, "lineHeight": "18.9px", "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": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: #FFFFFF used for floating product cards, navigation, and UI panel backgrounds.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#2E0000", "name": "text", "role": "text", "source": "computed", "evidence": "color-11: computed rgb(46, 0, 0); AI role: #2E0000 (deep red/brown) used for main headings and strong contrast text.", "sampleId": "color-11", "confidence": 0.9 }, { "hex": "#2E0000", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-11: computed rgb(46, 0, 0); AI role: #2E0000 also serves as the background color for solid primary buttons like 'Start for free'.", "sampleId": "color-11", "confidence": 0.9 }, { "hex": "#ECE9EA", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(236, 233, 234); AI role: #ECE9EA used as a soft, warm gray background for upper sections of the page.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#646464", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-10: computed rgb(100, 100, 100); AI role: #646464 used for secondary information and text within the UI mockups.", "sampleId": "color-10", "confidence": 0.85 }, { "hex": "#F0F0F0", "name": "border", "role": "border", "source": "computed", "evidence": "color-9: computed rgb(240, 240, 240); AI role: #F0F0F0 used for subtle borders around inputs and UI panels.", "sampleId": "color-9", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Primary buttons use full border-radius (pill shape). Product UI panels use approximately 12px-16px border-radius.", "density": "The overall marketing page has a relaxed density with large typographic blocks. Conversely, the embedded product mockups exhibit high information density, typical of a B2B SaaS tool.", "evidence": "Observations derived from button shapes in the nav, heading spacing, and the layout of the UI cards presented.", "borderStyle": "Mostly borderless design for marketing components, relying on shadows. Subtle, 1px solid borders (light gray) are used within the UI mockups to separate data rows and panes.", "buttonStyle": "Primary actions are solid dark reddish-brown (#2E0000) with white text, pill-shaped. Secondary actions are often pill-shaped outlines or ghost buttons with light hover states.", "cornerStyle": "Consistent rounded corners. Sharp corners are avoided. UI elements have moderate rounding, while buttons and chips are fully pill-shaped.", "contentWidth": "Main container appears wide but constrained, likely around 1200px max-width, allowing UI mockups to break out or stretch across the viewport slightly.", "spacingRhythm": "Generous vertical rhythm between major marketing sections (likely 120px+). Internal 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": 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** — The view scrolls over a detailed breakdown of the feature via a large UI mockup. (16s–18s; 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: Left-aligned headline and subhead block paired with an overlapping application mockup; Two-pane UI concept (data table + contextual assistant panel) as a generic layout idea - Dependencies: Specific dashboard data (company names, ICP scores, chat transcript) tied to this product; Dotted map decorative graphic and brand color palette - Guidance: Reuse the headline-plus-overlapping-mockup composition and two-pane UI metaphor; replace the table/chat content and decorative graphic with new product data and brand skin. ### 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 “Detailed UI Mockup (Prospect)”. Purpose: A large product UI showcase displaying a data table and an AI chat interface sidebar. Structure: full-bleed. Source layout label: Full-width section with a headline on the left and a large, overlapping application UI mockup dominating the space.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: A high-fidelity software interface showing a list of companies and a contextual AI assistant sidebar. Components: heading, ui-mockup, data-table, chat-interface. Style direction: minimal, corporate. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"60px","family":"geomanist","source":"computed","traits":"Regular","weight":"700","evidence":"font-4: computed CSS at 1440×1000; AI role: Geomanist 700 at 60px, used for the largest section heading.","sampleId":"font-4","confidence":0.95,"lineHeight":"58.8px","letterSpacing":"-2.1px"} {"role":"heading","size":"48px","family":"geomanist","source":"computed","traits":"Regular","weight":"700","evidence":"font-1: computed CSS at 1440×1000; AI role: Geomanist 700 at 48px, used extensively for primary section headings.","sampleId":"font-1","confidence":0.95,"lineHeight":"50.4px","letterSpacing":"-1.2px"} {"role":"body","size":"18.4px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Geist 400 at 18.4px, used for legible, mid-sized descriptive paragraphs.","sampleId":"font-12","confidence":0.9,"lineHeight":"27.6px","letterSpacing":"normal"} {"role":"mono","size":"13px","family":"Geist","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Geist 400 at 13px, used frequently within the dense product UI mockups.","sampleId":"font-7","confidence":0.85,"lineHeight":"18.9px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: #FFFFFF used for floating product cards, navigation, and UI panel backgrounds.","sampleId":"color-1","confidence":0.95} {"hex":"#2E0000","name":"text","role":"text","source":"computed","evidence":"color-11: computed rgb(46, 0, 0); AI role: #2E0000 (deep red/brown) used for main headings and strong contrast text.","sampleId":"color-11","confidence":0.9} {"hex":"#2E0000","name":"primary action","role":"primary-action","source":"computed","evidence":"color-11: computed rgb(46, 0, 0); AI role: #2E0000 also serves as the background color for solid primary buttons like 'Start for free'.","sampleId":"color-11","confidence":0.9} {"hex":"#ECE9EA","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(236, 233, 234); AI role: #ECE9EA used as a soft, warm gray background for upper sections of the page.","sampleId":"color-2","confidence":0.85} {"hex":"#646464","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(100, 100, 100); AI role: #646464 used for secondary information and text within the UI mockups.","sampleId":"color-10","confidence":0.85} {"hex":"#F0F0F0","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(240, 240, 240); AI role: #F0F0F0 used for subtle borders around inputs and UI panels.","sampleId":"color-9","confidence":0.8} 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: The view scrolls over a detailed breakdown of the feature via a large UI mockup. (90% confidence) Transfer these principles: Left-aligned headline and subhead block paired with an overlapping application mockup; Two-pane UI concept (data table + contextual assistant panel) as a generic layout idea. Dependencies: Specific dashboard data (company names, ICP scores, chat transcript) tied to this product; Dotted map decorative graphic and brand color palette. Adaptation guidance: Reuse the headline-plus-overlapping-mockup composition and two-pane UI metaphor; replace the table/chat content and decorative graphic with new product data and brand skin. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.