# Alternating large feature mockups Schema: Design Details SECTION.md v3.2 Website: Formable Source: https://formabledocs.com/ Source section IDs: gap-961cca88-1980-6864 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The zig-zag layout puts a short text block opposite a large screenshot in a roughly 50/50 split, so the eye follows an easy reading path down a long page. - Each mockup shows real product UI (redlining, e-signature, document dashboard) beside matching copy, so every claim comes with proof. - A bold heading over muted small body text, on a white canvas with generous whitespace and soft shadows, keeps the screenshots as the focus. What a screenshot can't show: - In the recording, each panel fades or scrolls into view in turn, roughly 3 to 4 seconds apart between 8s and 19s. It is a simple scroll reveal with no more elaborate motion. - No type sizes or spacing were measured, so exact scale and padding are unknown. Borrow: Pair every feature claim with a large, real interface image on alternating sides, and keep the text short so the product does the persuading. Leave alone: Don't copy Formable's blue accent, its specific contract-themed screenshots, or its off-edge cropping of mockups; use your own palette, product visuals and a clean, consistent crop. ## Classification - Type: other - Layout: Alternating side-by-side zig-zag layout with text on one side and a large screenshot on the other. - Styles: minimal, soft - Confidence: 95% ## Purpose and structure A long scrolling sequence of product features, pairing large interface mockups with descriptive text. Visual signature: Large, detailed software screenshots with soft drop shadows alternating sides. ## Components - mockup - text-block - heading ## Typography - Display: __Inter_f367f3 — 61.6px 550 - Heading: __Inter_f367f3 — 44px 550 - Body: __Inter_86e644 — 15.8px 400 - Mono: None — 11px 400 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #1A1C1E - Muted-Text: muted text #656873 - Accent: accent #2D4FFF - Surface: surface #F5F5F5 - Primary-Action: primary action #141518 - Border: border #E5E5E5 ## Motion evidence - 8.0–12.0s — AI review interface mockup fades in. (95% confidence) - 12.0–16.0s — Contract writing section scrolls into view. (95% confidence) - 16.0–19.0s — Negotiation process section appears. (95% confidence) ## Section quality Overall: 58.35/100 (Competent) Scored coverage: 100% - Typography: 62 — Clear two-tier hierarchy (bold ~24px headings over muted small body text) with tight, consistent letter spacing per deterministic tokens, but headings here are smaller/plainer than hero display type and labels (eyebrow caps) are generic small-caps conventions, not distinctive. Next tier: Needs a more differentiated or purposeful type treatment (e.g. varied weight/scale interplay, callouts) beyond standard heading/body pairing to earn strong tier. - Composition: 64 — Consistent zig-zag alternation of text block and large mockup with generous whitespace and 50/50 column rhythm gives a controlled, breathable reading path across a long scroll; repetition is clean but fairly formulaic and the mockups are cropped/bleeding off-canvas inconsistently (e.g. right-edge clipping in several screenshots), undermining polish. Next tier: Would need tighter mockup framing/containment and some variation in rhythm (scale, overlap, asymmetry) to feel more considered rather than a template repeated four times. - Motion: 58 — Gemini supplies specific timestamped fade-in and scroll-reveal transitions for sequential panels (8-19s), indicating a simple, competent scroll-triggered reveal pattern but nothing beyond basic fade/scroll-into-view. Next tier: No evidence of staggered, parallax, or interactive motion tied to scroll progress that would elevate beyond a standard fade/scroll reveal. - Content: 60 — Screenshots are genuine, feature-specific product UI (redlining, e-signature, document dashboard) tightly paired with matching copy, giving real product proof rather than generic imagery. Next tier: Mockups are dense and somewhat cropped/overlapping with low legibility at this scale, keeping the integration functional rather than exceptional. - Originality: 48 — The alternating text/screenshot zig-zag with soft shadow is an extremely common SaaS marketing pattern seen across the industry; nothing here reinterprets it distinctively. Next tier: Needs a distinguishing structural or visual device (unique framing, interaction, layout break) that departs from the default alternating-feature template. - Adaptability: 55 — Structure (alternating text/image, heading+body, CTA) is modular and separable from skin given defined tokens (radius, border, spacing), but the pattern depends heavily on having a continuous supply of matching UI screenshots sized correctly for each panel. Next tier: Lacks additional deterministic detail on breakpoint behavior or mobile stacking to confirm adaptability beyond desktop evidence. Strengths: - Consistent alternating layout creates an easy, predictable scanning rhythm for long feature list - Generous negative space keeps focus on each screenshot and heading pairing - Genuine, feature-matched product screenshots reinforce claims directly Weaknesses: - Highly conventional zig-zag feature pattern with no distinguishing visual idea - Several screenshots appear cropped/clipped at the viewport edge, hurting polish - Motion evidence only shows basic fade/scroll reveal, nothing more sophisticated - Heading/body type pairing is functional but unremarkable relative to the site's hero type Why it does not reach the next tier: The section executes a widely-used SaaS alternating-feature template competently and cleanly, but lacks any structural or visual twist, refined type scale variation, or motion sophistication that would make it feel bespoke rather than a well-produced but generic pattern. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the alternating column grid and heading/body typographic hierarchy, but replace product screenshots with new ones sized precisely to the container to avoid edge clipping, and consider adding a distinguishing visual detail (e.g. varied scale, overlap, or framing) to differentiate from default SaaS feature sections. What transfers: - Alternating text/image column structure - Heading + muted body + eyebrow label pattern - Scroll-triggered fade-in sequencing for successive panels Dependencies: - Requires a continuous supply of accurately-cropped, feature-specific product screenshots per panel - Relies on sufficient vertical scroll length to deliver sequential reveals ## 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 from Gemini-reported fades only, no finer detail on easing/stagger - No mobile or breakpoint evidence provided, limiting certainty on adaptability - Screenshot content partially cropped in the crop image, limiting full legibility assessment ## 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: other - Source type: other - Structure: Alternating side-by-side zig-zag layout with text on one side and a large screenshot on the other. - Layout: Alternating side-by-side zig-zag layout with text on one side and a large screenshot on the other. - Styles: minimal, soft - Components: mockup, text-block, heading - Purpose: A long scrolling sequence of product features, pairing large interface mockups with descriptive text. - Visual signature: Large, detailed software screenshots with soft drop shadows alternating sides. - Place on the page: 4 of 11, after Other (`634bb690-5328-41f7-bc3e-313642be2942`), before Feature collection (`formabledocs-com:dark-integrations-panel`) ### 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": "61.6px", "family": "__Inter_f367f3", "source": "computed", "traits": "Regular", "weight": "550", "evidence": "font-4: computed CSS at 1440×1000; AI role: Inter at 61.6px with prominent -2.5px letter spacing, used for the main hero h1.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "62.8px", "letterSpacing": "-2.5px" }, { "role": "heading", "size": "44px", "family": "__Inter_f367f3", "source": "computed", "traits": "Regular", "weight": "550", "evidence": "font-1: computed CSS at 1440×1000; AI role: Inter at 44px with 550 weight and -0.6px letter spacing, used for primary section headings.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "51px", "letterSpacing": "-0.6px" }, { "role": "body", "size": "15.8px", "family": "__Inter_86e644", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Inter at 15.8px with 400 weight and standard letter spacing, handling primary descriptive paragraphs.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "23.8px", "letterSpacing": "0px" }, { "role": "mono", "size": "11px", "family": null, "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-14: computed CSS at 1440×1000; AI role: ui-monospace stack at 11px, explicitly used for formatting API paths and JSON content.", "sampleId": "font-14", "confidence": 0.95, "lineHeight": "17.1px", "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": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) serves as the default background for the majority of the page and document body.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#1A1C1E", "name": "text", "role": "text", "source": "computed", "evidence": "color-6: computed color(srgb 0.101961 0.109804 0.117647); AI role: A deep near-black (#1A1C1E) applied to primary headings and high-contrast text elements.", "sampleId": "color-6", "confidence": 0.95 }, { "hex": "#656873", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-10: computed rgb(101, 104, 115); AI role: A mid-grey (#656873) used for secondary body copy, establishing hierarchy beneath the main headings.", "sampleId": "color-10", "confidence": 0.9 }, { "hex": "#2D4FFF", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-18: computed rgb(45, 79, 255); AI role: A distinct blue (#2D4FFF) applied sparingly to specific text elements, active states, and svg strokes to draw attention.", "sampleId": "color-18", "confidence": 0.9 }, { "hex": "#F5F5F5", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(245, 245, 245); AI role: A light grey (#F5F5F5) used to distinguish specific content blocks, such as the Security section.", "sampleId": "color-5", "confidence": 0.85 }, { "hex": "#141518", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-20: computed rgb(20, 21, 24); AI role: Very dark (#141518) control-background applied to primary CTA buttons like 'Sign up'.", "sampleId": "color-20", "confidence": 0.85 }, { "hex": "#E5E5E5", "name": "border", "role": "border", "source": "computed", "evidence": "color-42: computed rgb(229, 229, 229); AI role: Light grey (#E5E5E5) utilized for subtle borders around UI cards and structural separations.", "sampleId": "color-42", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Standard border radii appearing in the 6px to 12px range for buttons and UI cards, maintaining a friendly yet professional aesthetic.", "density": "Low density overall, heavily prioritizing negative space to focus attention on typography and isolated interface elements.", "evidence": "Observed via the distinct separation of the 'Contract writing' and 'Negotiation' sections, the pill-shaped 'Sign up' button, and the 1px light borders enclosing the API code block.", "borderStyle": "Subtle, low-opacity 1px solid borders (often using translucent black or light grey) to delineate panels without adding visual clutter.", "buttonStyle": "Pill-shaped or rounded-rectangle solid buttons with high contrast fills (often black or very dark grey) and light text, paired with subtle ghost or outline variants for secondary actions.", "cornerStyle": "Softly rounded corners applied consistently to buttons, floating mockups, and surface containers.", "contentWidth": "Utilizes a wide maximum container width, frequently splitting the layout into 50/50 columns for text and complementary visuals.", "spacingRhythm": "Generous vertical macro-spacing between logical sections, often utilizing wide margins and padding to create a relaxed, breathable reading experience." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion 1. **observed sequence** — AI review interface mockup fades in. (8s–12s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — Contract writing section scrolls into view. (12s–16s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 3. **entrance** — Negotiation process section appears. (16s–19s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: medium - What transfers: Alternating text/image column structure; Heading + muted body + eyebrow label pattern; Scroll-triggered fade-in sequencing for successive panels - Dependencies: Requires a continuous supply of accurately-cropped, feature-specific product screenshots per panel; Relies on sufficient vertical scroll length to deliver sequential reveals - Guidance: Reuse the alternating column grid and heading/body typographic hierarchy, but replace product screenshots with new ones sized precisely to the container to avoid edge clipping, and consider adding a distinguishing visual detail (e.g. varied scale, overlap, or framing) to differentiate from default SaaS feature sections. ### 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 other section inspired by the design evidence titled “Alternating large feature mockups”. Purpose: A long scrolling sequence of product features, pairing large interface mockups with descriptive text. Structure: Alternating side-by-side zig-zag layout with text on one side and a large screenshot on the other.. Source layout label: Alternating side-by-side zig-zag layout with text on one side and a large screenshot on the other.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Large, detailed software screenshots with soft drop shadows alternating sides. Components: mockup, text-block, heading. Style direction: minimal, soft. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"61.6px","family":"__Inter_f367f3","source":"computed","traits":"Regular","weight":"550","evidence":"font-4: computed CSS at 1440×1000; AI role: Inter at 61.6px with prominent -2.5px letter spacing, used for the main hero h1.","sampleId":"font-4","confidence":0.95,"lineHeight":"62.8px","letterSpacing":"-2.5px"} {"role":"heading","size":"44px","family":"__Inter_f367f3","source":"computed","traits":"Regular","weight":"550","evidence":"font-1: computed CSS at 1440×1000; AI role: Inter at 44px with 550 weight and -0.6px letter spacing, used for primary section headings.","sampleId":"font-1","confidence":0.95,"lineHeight":"51px","letterSpacing":"-0.6px"} {"role":"body","size":"15.8px","family":"__Inter_86e644","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Inter at 15.8px with 400 weight and standard letter spacing, handling primary descriptive paragraphs.","sampleId":"font-6","confidence":0.9,"lineHeight":"23.8px","letterSpacing":"0px"} {"role":"mono","size":"11px","family":null,"source":"computed","traits":"Regular","weight":"400","evidence":"font-14: computed CSS at 1440×1000; AI role: ui-monospace stack at 11px, explicitly used for formatting API paths and JSON content.","sampleId":"font-14","confidence":0.95,"lineHeight":"17.1px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) serves as the default background for the majority of the page and document body.","sampleId":"color-1","confidence":0.95} {"hex":"#1A1C1E","name":"text","role":"text","source":"computed","evidence":"color-6: computed color(srgb 0.101961 0.109804 0.117647); AI role: A deep near-black (#1A1C1E) applied to primary headings and high-contrast text elements.","sampleId":"color-6","confidence":0.95} {"hex":"#656873","name":"muted text","role":"muted-text","source":"computed","evidence":"color-10: computed rgb(101, 104, 115); AI role: A mid-grey (#656873) used for secondary body copy, establishing hierarchy beneath the main headings.","sampleId":"color-10","confidence":0.9} {"hex":"#2D4FFF","name":"accent","role":"accent","source":"computed","evidence":"color-18: computed rgb(45, 79, 255); AI role: A distinct blue (#2D4FFF) applied sparingly to specific text elements, active states, and svg strokes to draw attention.","sampleId":"color-18","confidence":0.9} {"hex":"#F5F5F5","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(245, 245, 245); AI role: A light grey (#F5F5F5) used to distinguish specific content blocks, such as the Security section.","sampleId":"color-5","confidence":0.85} {"hex":"#141518","name":"primary action","role":"primary-action","source":"computed","evidence":"color-20: computed rgb(20, 21, 24); AI role: Very dark (#141518) control-background applied to primary CTA buttons like 'Sign up'.","sampleId":"color-20","confidence":0.85} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-42: computed rgb(229, 229, 229); AI role: Light grey (#E5E5E5) utilized for subtle borders around UI cards and structural separations.","sampleId":"color-42","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: observed sequence: AI review interface mockup fades in. (95% confidence) scroll: Contract writing section scrolls into view. (95% confidence) entrance: Negotiation process section appears. (95% confidence) Transfer these principles: Alternating text/image column structure; Heading + muted body + eyebrow label pattern; Scroll-triggered fade-in sequencing for successive panels. Dependencies: Requires a continuous supply of accurately-cropped, feature-specific product screenshots per panel; Relies on sufficient vertical scroll length to deliver sequential reveals. Adaptation guidance: Reuse the alternating column grid and heading/body typographic hierarchy, but replace product screenshots with new ones sized precisely to the container to avoid edge clipping, and consider adding a distinguishing visual detail (e.g. varied scale, overlap, or framing) to differentiate from default SaaS feature sections. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.