# Newsletter CTA with laptop Schema: Design Details SECTION.md v3.2 Website: Arqé Source: https://arqe.ai/ Source section IDs: gap-4a0ce855-6903-7618 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The two-column split keeps the job simple: headline, muted paragraph and email form on the left, with the laptop on the right. - The laptop bleeds off the card's right edge, which adds some movement to an otherwise calm layout. - The dark card (#171717) sits on a darker canvas (#0A0A0A), and the near-white button is the brightest element, so the subscribe action stands out. An avatar stack adds social proof without clutter. What a screenshot can't show: - The recording showed no specific motion, so any hover or focus behaviour is unknown. - No font sizes, spacing or padding were measured, so the type scale and gaps can't be confirmed from the screenshot. Borrow: Put one clear action beside a product visual that bleeds off the card edge, and make the button the brightest thing on a dark surface. Leave alone: Don't copy the Suisse Intl typeface (a commercial font; a clean neutral grotesque like Inter would do), the exact dark palette, or the photo-collage laptop screen. ## Classification - Type: cta - Layout: A dark, rounded container with text and a form on the left, and a partial laptop mockup on the right. - Styles: minimal, photographic - Confidence: 95% ## Purpose and structure A call-to-action banner for newsletter signup featuring an email input and a device mockup. Visual signature: A wide dark card displaying 'Stay in the loop' next to a laptop showing a software interface. ## Components - Heading - Paragraph - Email input - Subscribe button - Avatar stack - Laptop mockup ## Typography - Display: Suisse Intl — 64px 500 - Heading: Suisse Intl — 38px 500 - Body: Suisse Intl — 15px 400 ## Functional palette - Surface: surface #171717 - Text: text #FFFFFF - Canvas: canvas #0A0A0A - Primary-Action: primary action #FAFAFA - Muted-Text: muted text #BBBBBB - Border: border #2A2A2A ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 59.65/100 (Competent) Scored coverage: 85% - Typography: 62 — Clean hierarchy with large display headline, muted paragraph, and consistent use of the Suisse Intl family across weights/sizes. Pleasant but standard CTA type treatment with no distinctive typographic moment. Next tier: No unique type-driven detail (e.g., custom ligatures, scale contrast, kinetic treatment) to elevate beyond polished default. - Composition: 64 — Balanced two-column layout: text/form block left, laptop mockup bleeding right edge of card creates mild dynamism. Rounded dark card against darker canvas gives subtle depth. Avatar stack adds social proof without clutter. Next tier: Layout is a common SaaS CTA pattern; mockup placement and spacing are competent but not inventive enough for a memorable composition. - Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Requires timestamped visible motion data to assess. - Content: 58 — Headline, supporting copy, functional email capture, and social proof avatar stack are integrated coherently, but the laptop screenshot content is generic placeholder-style UI unrelated to a specific narrative. Next tier: Mockup content feels like stock filler rather than a tailored demonstration of a specific product capability. - Originality: 52 — Dark card with floating device mockup and newsletter form is a widely-used SaaS template pattern; no distinguishing visual idea beyond the mockup's photo-collage screen contents. Next tier: Needs a differentiating structural or visual idea beyond the standard laptop-mockup-plus-form convention to move past familiar/competent territory. - Adaptability: 60 — Clear separation of structural zones (copy block, form, social proof, device mockup) that could be reskinned with different copy, product screenshot, or palette with minimal restructuring. Next tier: Dependence on a custom laptop mockup graphic and specific screen content limits trivial reuse without replacement assets. Strengths: - Clear left-right hierarchy separating message/action from visual proof - Avatar stack plus count line adds lightweight social proof without crowding the form - Consistent dark palette and rounded-corner system matches sitewide tokens Weaknesses: - Laptop mockup screen content reads as generic stock UI rather than a meaningful demonstration - Pattern (dark CTA card + device mockup + email form) is a common template convention - No distinguishing typographic or layout device to create a memorable moment - No motion evidence provided to evaluate any kinetic refinement Why it does not reach the next tier: The section executes a familiar newsletter-CTA template competently with good spacing and token consistency, but lacks any distinguishing idea, interaction, or content specificity that would make it feel purpose-built or hard to substitute. ## Adaptation guidance - Effort: Low - Guidance: Swap mockup imagery and copy while retaining column structure, spacing rhythm, and token-based dark palette; form and avatar stack are self-contained and reusable as-is. What transfers: - Two-column CTA structure with copy/form left and visual proof right - Dark rounded card on darker canvas pattern - Avatar stack plus trust line placement under form Dependencies: - Custom laptop mockup graphic and its screen content - Specific product screenshot imagery shown on device ## 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 data supplied, so any animated reveal or hover behavior is unassessed - Cannot verify exact mockup image fidelity or interactive states from a static crop ## 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: cta - Source type: cta - Structure: A dark, rounded container with text and a form on the left, and a partial laptop mockup on the right. - Layout: A dark, rounded container with text and a form on the left, and a partial laptop mockup on the right. - Styles: minimal, photographic - Components: Heading, Paragraph, Email input, Subscribe button, Avatar stack, Laptop mockup - Purpose: A call-to-action banner for newsletter signup featuring an email input and a device mockup. - Visual signature: A wide dark card displaying 'Stay in the loop' next to a laptop showing a software interface. - Place on the page: 9 of 10, after FAQ (`arqe-ai:faq_01`), before Footer (`arqe-ai:footer_01`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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": "64px", "family": "Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-16: computed CSS at 1440×1000; AI role: 64px Suisse Intl used for the main hero headline.", "sampleId": "font-16", "confidence": 0.95, "lineHeight": "66.6px", "letterSpacing": "-1.3px" }, { "role": "heading", "size": "38px", "family": "Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-2: computed CSS at 1440×1000; AI role: 38px Suisse Intl used for primary section headings like 'What creatives say'.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "41.8px", "letterSpacing": "-0.6px" }, { "role": "body", "size": "15px", "family": "Suisse Intl", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: 15px Suisse Intl used for general descriptive paragraphs.", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "21.8px", "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": "#171717", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(23, 23, 23); AI role: #171717 used as the background color for cards, pricing tables, and form containers.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-6: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important text to ensure high contrast.", "sampleId": "color-6", "confidence": 0.95 }, { "hex": "#0A0A0A", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(10, 10, 10); AI role: #0A0A0A used as the primary background color for the page body.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#FAFAFA", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-9: computed rgb(250, 250, 250); AI role: #FAFAFA used as the solid background for primary interactive buttons.", "sampleId": "color-9", "confidence": 0.9 }, { "hex": "#BBBBBB", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-7: computed rgb(187, 187, 187); AI role: #BBBBBB used for secondary text like testimonial quotes to establish visual hierarchy.", "sampleId": "color-7", "confidence": 0.85 }, { "hex": "#2A2A2A", "name": "border", "role": "border", "source": "computed", "evidence": "color-8: computed rgb(42, 42, 42); AI role: #2A2A2A used for subtle structural borders on elements.", "sampleId": "color-8", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Medium border radius applied to surface elements like cards and videos.", "density": "Comfortable density; large amounts of content (like testimonials or stock imagery) are organized into structured grids to avoid overwhelming the user.", "evidence": "Observations derived from the visual layout of bento boxes, button shapes, and container styles.", "borderStyle": "Subtle, low-contrast 1px solid borders used to define edges on dark surfaces without distracting from content.", "buttonStyle": "Pill-shaped (fully rounded), highly contrasting solid fills (white on dark) for primary actions, with subtle hover states likely applied.", "cornerStyle": "Consistent use of soft rounded corners on all containers, buttons, and media elements, balancing the stark typography.", "contentWidth": "Centered, max-width layout that constrains text blocks for readability while allowing media grids to expand wider.", "spacingRhythm": "Generous vertical spacing between major sections, with tighter, uniform gaps within bento grids and card layouts." } ``` ### 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 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: 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: low - What transfers: Two-column CTA structure with copy/form left and visual proof right; Dark rounded card on darker canvas pattern; Avatar stack plus trust line placement under form - Dependencies: Custom laptop mockup graphic and its screen content; Specific product screenshot imagery shown on device - Guidance: Swap mockup imagery and copy while retaining column structure, spacing rhythm, and token-based dark palette; form and avatar stack are self-contained and reusable as-is. ### 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; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion. ### Agent implementation prompt Create an original cta section inspired by the design evidence titled “Newsletter CTA with laptop”. Purpose: A call-to-action banner for newsletter signup featuring an email input and a device mockup. Structure: A dark, rounded container with text and a form on the left, and a partial laptop mockup on the right.. Source layout label: A dark, rounded container with text and a form on the left, and a partial laptop mockup on the right.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A wide dark card displaying 'Stay in the loop' next to a laptop showing a software interface. Components: Heading, Paragraph, Email input, Subscribe button, Avatar stack, Laptop mockup. Style direction: minimal, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"64px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-16: computed CSS at 1440×1000; AI role: 64px Suisse Intl used for the main hero headline.","sampleId":"font-16","confidence":0.95,"lineHeight":"66.6px","letterSpacing":"-1.3px"} {"role":"heading","size":"38px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: 38px Suisse Intl used for primary section headings like 'What creatives say'.","sampleId":"font-2","confidence":0.95,"lineHeight":"41.8px","letterSpacing":"-0.6px"} {"role":"body","size":"15px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: 15px Suisse Intl used for general descriptive paragraphs.","sampleId":"font-4","confidence":0.9,"lineHeight":"21.8px","letterSpacing":"normal"} Color evidence: {"hex":"#171717","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(23, 23, 23); AI role: #171717 used as the background color for cards, pricing tables, and form containers.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-6: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and important text to ensure high contrast.","sampleId":"color-6","confidence":0.95} {"hex":"#0A0A0A","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(10, 10, 10); AI role: #0A0A0A used as the primary background color for the page body.","sampleId":"color-3","confidence":0.9} {"hex":"#FAFAFA","name":"primary action","role":"primary-action","source":"computed","evidence":"color-9: computed rgb(250, 250, 250); AI role: #FAFAFA used as the solid background for primary interactive buttons.","sampleId":"color-9","confidence":0.9} {"hex":"#BBBBBB","name":"muted text","role":"muted-text","source":"computed","evidence":"color-7: computed rgb(187, 187, 187); AI role: #BBBBBB used for secondary text like testimonial quotes to establish visual hierarchy.","sampleId":"color-7","confidence":0.85} {"hex":"#2A2A2A","name":"border","role":"border","source":"computed","evidence":"color-8: computed rgb(42, 42, 42); AI role: #2A2A2A used for subtle structural borders on elements.","sampleId":"color-8","confidence":0.85} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Two-column CTA structure with copy/form left and visual proof right; Dark rounded card on darker canvas pattern; Avatar stack plus trust line placement under form. Dependencies: Custom laptop mockup graphic and its screen content; Specific product screenshot imagery shown on device. Adaptation guidance: Swap mockup imagery and copy while retaining column structure, spacing rhythm, and token-based dark palette; form and avatar stack are self-contained and reusable as-is. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.