# Interactive chat widget demo Schema: Design Details SECTION.md v3.2 Website: Fernand Source: https://getfernand.com/ Source section IDs: gap-470480f1-10128-11642 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A realistic chat widget sits centered on a soft backdrop, so the product reads as real rather than as a flat screenshot. - The configuration strip directly beneath the preview links cause to effect, and the controls stay close enough to the widget to read as one unit. - Calm neutrals (white canvas, pale surface cards, dark navy text) with one bright blue action color keep attention on the demo, and the 3-column card grid below explains each feature. What a screenshot can't show: - From 28–31s, an automated sequence clicks Accent color, Theme and Knowledge base, and the widget above updates immediately with each click. - No font sizes, spacing or animation timings were measured, so exact values are unknown. Borrow: Put a live preview directly above its controls so each toggle visibly changes the product and proves the claim. Leave alone: Don't copy Fernand's floral backdrop, its blue accent, or its specific widget content; use your own imagery, palette and a free Inter-like sans. ## Classification - Type: feature-grid - Layout: Centered chat UI above a horizontal row of configuration toggles, followed by a 3-column grid of feature cards. - Styles: minimal, soft - Confidence: 98% ## Purpose and structure A centered chat widget mockup over a soft background, positioned above an interactive configuration panel and a grid of feature cards. Visual signature: A realistic chat box preview resting on a soft floral background, immediately above a strip of UI configuration controls. ## Components - chat widget mockup - interactive toggles - color pickers - feature cards ## Typography - Display: Inter — 38px 400 - Heading: Inter — 30px 400 - Body: Inter — 16px 400 ## Functional palette - Text: text #1A2035 - Canvas: canvas #FFFFFF - Muted-Text: muted text #717583 - Primary-Action: primary action #00A0FF - Surface: surface #F7FAFC - Surface: surface #151618 ## Motion evidence - 28.0–31.0s — An automated sequence toggles various settings located below a chat widget preview. As the settings for 'Accent color', 'Theme', and 'Knowledge base' are virtually clicked, the chat widget above immediately updates its appearance to reflect the selected configuration. (96% confidence) ## Section quality Overall: 64.85/100 (Good) Scored coverage: 100% - Typography: 62 — Clean type hierarchy using Inter across eyebrow, headline, subhead, and card titles; consistent weight/size scale per deterministic tokens, but nothing distinctive beyond standard SaaS hierarchy. Next tier: No typographic personality or expressive scale contrast beyond the standard display/heading/body system. - Composition: 68 — Strong layered composition: floating chat mockup centered on a soft gradient/floral backdrop, with a configuration strip directly beneath feeding into a clean 3x2 card grid. Good alignment, whitespace, and visual flow from demo to controls to feature explanation. Next tier: Grid of feature cards below is a fairly conventional icon+title+text pattern that doesn't push composition further; background art is decorative rather than integrated with the control logic. - Motion: 66 — Gemini supplies a specific timestamped interaction (28–31s) where toggling Accent color, Theme, and Knowledge base settings live-updates the chat widget preview above, directly demonstrating cause-and-effect UI binding. Next tier: Only one documented interaction window; no detail on transition easing, timing, or additional state changes (behavior, position, live chat toggle) to confirm breadth of the live-preview system. - Content: 65 — Widget mockup content (menu items, search, bot message, outbound prompt) is concretely tied to the product's actual use case, reinforcing the feature claims with a believable simulated interface rather than generic placeholder UI. Next tier: Feature card copy below is standard benefit-listing; integration between demo content and copy is functional but not conceptually novel. - Originality: 68 — The live, directly-manipulable widget preview tied to visible toggles is a genuinely product-specific idea that goes beyond a static screenshot, giving real interactive proof rather than marketing claims. Next tier: The underlying pattern (control panel driving a live preview) is an established SaaS convention; execution is solid but not reinventing the format. - Adaptability: 60 — Structure (preview + controls + feature grid) is clearly separable: swap product screenshot, toggle set, and card content independently without breaking the pattern. Next tier: Dependent on having a working live-preview mechanism (JS state binding) which is a non-trivial reusable dependency, not just a skin swap. Strengths: - Live-updating widget preview driven directly by visible toggle controls, giving tangible proof of customization rather than a static mockup - Clear three-tier vertical flow: hero demo → interactive config strip → supporting feature grid - Calm, generous whitespace keeps focus on the product artifact rather than competing visual noise Weaknesses: - Feature card grid below uses a generic icon-title-paragraph pattern seen across countless SaaS sites - Background floral/gradient art is purely decorative and disconnected from the functional demo above it - Typography system, while consistent, offers no distinct personality Why it does not reach the next tier: The live-preview interaction is a genuine strength, but the surrounding card grid and typographic treatment default to conventional SaaS patterns, and only one interaction window is confirmed, preventing certainty about the depth of the demo system. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the vertical structure and toggle-to-preview binding concept, but build custom mock UI and toggle set relevant to the new product; the feature grid at the bottom can be restyled freely without affecting the core demo mechanic. What transfers: - Preview-above, controls-below, grid-below layout structure - Pattern of toggle controls bound to a live visual preview - Card grid rhythm and icon+title+description formatting Dependencies: - Functional state-binding logic connecting toggles to the widget's live rendering - Realistic widget mockup content specific to the product being demoed ## 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 only one 3-second timestamped window; full range of toggle interactions and transition behavior unconfirmed - No deterministic spacing, radius, or shadow values supplied for the card grid or control strip - Cannot verify exact animation timing/easing for the live-preview update ## 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-grid - Structure: centered single-column - Layout: Centered chat UI above a horizontal row of configuration toggles, followed by a 3-column grid of feature cards. - Styles: minimal, soft - Components: chat widget mockup, interactive toggles, color pickers, feature cards - Purpose: A centered chat widget mockup over a soft background, positioned above an interactive configuration panel and a grid of feature cards. - Visual signature: A realistic chat box preview resting on a soft floral background, immediately above a strip of UI configuration controls. - Place on the page: 13 of 16, after Testimonials (`6d1c76a6-9179-4c5e-9d92-9c677de038d4`), before Feature collection (`getfernand-com:calm-workflow-grid`) ### Crop and composition - Deterministic crop dimensions are unavailable. - 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": "38px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: 38px Inter used for the main hero headline 'The free customer support platform...'.", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "48px", "letterSpacing": "normal" }, { "role": "heading", "size": "30px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: 30px Inter used for section headings like 'Consolidate all your support channels...'.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "38px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "Inter", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Inter used for standard paragraph text describing features.", "sampleId": "font-7", "confidence": 0.9, "lineHeight": "26px", "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": "#1A2035", "name": "text", "role": "text", "source": "computed", "evidence": "color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text.", "sampleId": "color-5", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#717583", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions.", "sampleId": "color-6", "confidence": 0.9 }, { "hex": "#00A0FF", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free').", "sampleId": "color-24", "confidence": 0.9 }, { "hex": "#F7FAFC", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#151618", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background.", "sampleId": "color-7", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large radii on UI mockups and smaller, but noticeable, radii on buttons and smaller cards.", "density": "Low density; the design prioritizes whitespace and clear separation of elements over packing information tightly.", "evidence": "Observation of layout structure in screenshots, consistent application of border-radius in UI elements, and distinct button variations.", "borderStyle": "Subtle, light borders (e.g., color-8, color-35) used to define cards and form elements without adding visual noise.", "buttonStyle": "Solid fill for primary actions, outline or subtle backgrounds for secondary actions, often with rounded corners.", "cornerStyle": "Consistent use of rounded corners on buttons, cards, and product UI mockups.", "contentWidth": "Centered content with a constrained maximum width to ensure readability, though background images/gradients often bleed to the edges.", "spacingRhythm": "Generous spacing with significant whitespace between major sections, contributing to the 'calm' aesthetic." } ``` ### 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. **interaction** — An automated sequence toggles various settings located below a chat widget preview. As the settings for 'Accent color', 'Theme', and 'Knowledge base' are virtually clicked, the chat widget above immediately updates its appearance to reflect the selected configuration. (28s–31s; 96% 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: Preview-above, controls-below, grid-below layout structure; Pattern of toggle controls bound to a live visual preview; Card grid rhythm and icon+title+description formatting - Dependencies: Functional state-binding logic connecting toggles to the widget's live rendering; Realistic widget mockup content specific to the product being demoed - Guidance: Reuse the vertical structure and toggle-to-preview binding concept, but build custom mock UI and toggle set relevant to the new product; the feature grid at the bottom can be restyled freely without affecting the core demo mechanic. ### 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 “Interactive chat widget demo”. Purpose: A centered chat widget mockup over a soft background, positioned above an interactive configuration panel and a grid of feature cards. Structure: centered single-column. Source layout label: Centered chat UI above a horizontal row of configuration toggles, followed by a 3-column grid of feature cards.. 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 realistic chat box preview resting on a soft floral background, immediately above a strip of UI configuration controls. Components: chat widget mockup, interactive toggles, color pickers, feature cards. Style direction: minimal, soft. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"38px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 38px Inter used for the main hero headline 'The free customer support platform...'.","sampleId":"font-5","confidence":0.95,"lineHeight":"48px","letterSpacing":"normal"} {"role":"heading","size":"30px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 30px Inter used for section headings like 'Consolidate all your support channels...'.","sampleId":"font-3","confidence":0.9,"lineHeight":"38px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Inter used for standard paragraph text describing features.","sampleId":"font-7","confidence":0.9,"lineHeight":"26px","letterSpacing":"normal"} Color evidence: {"hex":"#1A2035","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text.","sampleId":"color-5","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#717583","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions.","sampleId":"color-6","confidence":0.9} {"hex":"#00A0FF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free').","sampleId":"color-24","confidence":0.9} {"hex":"#F7FAFC","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas.","sampleId":"color-2","confidence":0.85} {"hex":"#151618","name":"surface","role":"surface","source":"computed","evidence":"color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background.","sampleId":"color-7","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: interaction: An automated sequence toggles various settings located below a chat widget preview. As the settings for 'Accent color', 'Theme', and 'Knowledge base' are virtually clicked, the chat widget above immediately updates its appearance to reflect the selected configuration. (96% confidence) Transfer these principles: Preview-above, controls-below, grid-below layout structure; Pattern of toggle controls bound to a live visual preview; Card grid rhythm and icon+title+description formatting. Dependencies: Functional state-binding logic connecting toggles to the widget's live rendering; Realistic widget mockup content specific to the product being demoed. Adaptation guidance: Reuse the vertical structure and toggle-to-preview binding concept, but build custom mock UI and toggle set relevant to the new product; the feature grid at the bottom can be restyled freely without affecting the core demo mechanic. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.