# Integration ecosystem landscape Schema: Design Details SECTION.md v3.2 Website: Fernand Source: https://getfernand.com/ Source section IDs: gap-470480f1-7105-8334 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The arc of small circular logos gives the integrations a clear shape, so the list reads as an ecosystem and not a grid. - Flat, minimal logo chips sit against the rich painted landscape, which creates strong contrast between UI and illustration. - Vertical rhythm moves cleanly from centered heading to subcopy to CTA to logos to art, with the blue primary action standing out on white. What a screenshot can't show: - The recording showed no motion, so any floating or drifting of the logos is unconfirmed. - No type sizes or spacing were measured, so exact scale and gaps are unknown. Borrow: Place a flat, modular UI cluster over one immersive illustrated scene so the product facts stay crisp while the art sets the mood. Leave alone: Don't copy the painted mountain landscape with its uniformed traveler or the exact arc layout; use your own scene tied to your product, and Inter can be swapped for a similar free sans. ## Classification - Type: logo-cloud - Layout: Centered heading over an arched constellation of small circular logos, bottomed out by a full-width painted landscape illustration. - Styles: illustrative, minimal - Confidence: 95% ## Purpose and structure Floating integration logos arranged in an arc over a scenic painted landscape featuring a character. Visual signature: An arched network of small icons floating in the sky above a rich, painted mountain landscape with a traveler. ## Components - floating logos - painted landscape - character illustration - heading ## 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 - No section-specific authored motion was established. ## Section quality Overall: 58.41/100 (Competent) Scored coverage: 85% - Typography: 58 — Standard Inter heading/body hierarchy matches site tokens; clean centered type with no distinctive treatment beyond default sizing and spacing. Next tier: No custom type scale, weight contrast, or treatment distinguishes this from any generic SaaS heading block. - Composition: 65 — Arc arrangement of logo chips against a full-bleed painted landscape creates a clear focal contrast between flat UI elements and illustrative depth, with reasonable vertical rhythm from heading to CTA to logos to art. Next tier: The logo arc floats somewhat arbitrarily over the illustration with weak integration between the two layers (no shadow, horizon alignment, or scale logic tying icons to the scene), and chat bubble overlays feel bolted on rather than composed. - Motion: not_assessed — No timestamped motion evidence supplied for this section. Next tier: Requires timestamped visible motion data to assess. - Content: 55 — Heading, subcopy, CTA, and integration logos are legible and purposeful, but the painted landscape with a uniformed character is tonally disconnected from the integrations message and reads as decorative filler. Next tier: Illustration needs a clearer conceptual link to the integration/stack messaging rather than generic scenic art. - Originality: 62 — Pairing a technical integrations list with a painterly landscape and traveler figure is an unusual juxtaposition for this section type, giving it a distinct visual signature relative to typical logo-cloud grids. Next tier: The idea is novel in placement but execution (arc of plain icon chips, stock-illustration feel) doesn't push the concept further with custom interaction, narrative payoff, or deeper visual integration. - Adaptability: 50 — Heading, CTA, and logo chips are modular and swappable, but the full-bleed painted illustration is a bespoke asset that anchors the whole section's mood and cannot be cheaply replaced without redesigning the layout. Next tier: Tight coupling between illustration-specific proportions/colors and the floating UI elements limits clean separation of skin from structure. Strengths: - Clear two-layer structure: functional UI info (heading/CTA/logos) over an immersive illustrative backdrop - Logo chips are consistently styled, legible, small UI objects that don't compete with the art - Arc placement gives some visual rhythm above the horizon line Weaknesses: - Painted landscape and uniformed traveler have no evident conceptual tie to 'integrations with your stack' - Floating logo chips look disconnected from the illustration beneath them, with no shadow, perspective, or anchoring - Chat bubble overlays appear pasted on top of the art without compositional integration - Overall layout and typography are otherwise generic marketing-page defaults Why it does not reach the next tier: The section relies on a visually striking but conceptually loose illustration; without tighter integration between the integration-logo system and the landscape metaphor, and without any distinguishing typographic or motion craft, it stays at a polished-but-ordinary level rather than becoming a memorable, considered idea. ## Adaptation guidance - Effort: Medium - Guidance: Keep the heading/CTA/logo-chip structure as a reusable pattern; swap the bespoke illustration for any full-bleed scenic or abstract background and the layout will hold, but the emotional tone will change significantly since the art currently carries most of the section's distinctiveness. What transfers: - Heading + subcopy + CTA block above a logo cloud - Arc/grid arrangement of rounded icon chips - Full-bleed illustrative background behind a UI content block Dependencies: - Custom painted landscape illustration asset - Specific brand integration icon set ## 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 timestamped motion data provided, so animation behavior is unassessed - Cannot verify exact font-weight or spacing values beyond the generic tokens supplied - Illustration content and intent are inferred from a single 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: logo-cloud - Source type: logo-cloud - Structure: centered single-column - Layout: Centered heading over an arched constellation of small circular logos, bottomed out by a full-width painted landscape illustration. - Styles: illustrative, minimal - Components: floating logos, painted landscape, character illustration, heading - Purpose: Floating integration logos arranged in an arc over a scenic painted landscape featuring a character. - Visual signature: An arched network of small icons floating in the sky above a rich, painted mountain landscape with a traveler. - Place on the page: 10 of 16, after Feature collection (`getfernand-com:automation-feature-grid`), before Feature collection (`getfernand-com:knowledge-base-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 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: medium - What transfers: Heading + subcopy + CTA block above a logo cloud; Arc/grid arrangement of rounded icon chips; Full-bleed illustrative background behind a UI content block - Dependencies: Custom painted landscape illustration asset; Specific brand integration icon set - Guidance: Keep the heading/CTA/logo-chip structure as a reusable pattern; swap the bespoke illustration for any full-bleed scenic or abstract background and the layout will hold, but the emotional tone will change significantly since the art currently carries most of the section's distinctiveness. ### 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 logo-cloud section inspired by the design evidence titled “Integration ecosystem landscape”. Purpose: Floating integration logos arranged in an arc over a scenic painted landscape featuring a character. Structure: centered single-column. Source layout label: Centered heading over an arched constellation of small circular logos, bottomed out by a full-width painted landscape illustration.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: An arched network of small icons floating in the sky above a rich, painted mountain landscape with a traveler. Components: floating logos, painted landscape, character illustration, heading. Style direction: illustrative, minimal. 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. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Heading + subcopy + CTA block above a logo cloud; Arc/grid arrangement of rounded icon chips; Full-bleed illustrative background behind a UI content block. Dependencies: Custom painted landscape illustration asset; Specific brand integration icon set. Adaptation guidance: Keep the heading/CTA/logo-chip structure as a reusable pattern; swap the bespoke illustration for any full-bleed scenic or abstract background and the layout will hold, but the emotional tone will change significantly since the art currently carries most of the section's distinctiveness. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.