# Multi-column mega footer Schema: Design Details SECTION.md v3.2 Website: Krea Source: https://www.krea.ai/krea-3 Source section IDs: c7a96bcc-440d-4b65-9fcd-d5532328ec46, dee84169-ca86-4b0a-80fe-39bd82cc94cc Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Link groups sit in a clean left-aligned grid with bold headers over muted gray links, so a very large sitemap stays easy to scan. - Logical groupings (tools, models, solutions, resources) make the footer useful, and an icon row breaks up the long lists. - A quiet palette of black text, #737373 secondary text and light #E5E5E5 borders keeps dense content calm, with a slim bottom strip for social and legal links. What a screenshot can't show: - Links are set at 14px, weight 500, with -0.4px letter spacing, and the copyright line drops to 12px. - Gaps are tight at 8px, and column widths run from about 250px to 1312px. - The recording shows only a plain scroll to the bottom, with no hover or reveal motion. Borrow: Give a big sitemap order with consistent small type, one strong header weight, muted link color and generous column gaps. Leave alone: Don't copy Krea's AI-assistant icon row, its Suisse-style typeface (use a neutral grotesque like Inter instead) or the giant faded wordmark idea. ## Classification - Type: footer - Layout: Complex multi-column grid of text links layered over an enormous background watermark, followed by a bottom strip for social and legal links. - Styles: minimal, typographic - Confidence: 100% ## Purpose and structure A massive, multi-column sitemap footer layered over giant faded background typography, concluding with social icons and copyright links. Visual signature: Extensive column layout of small text links over a giant faded 'KREA' watermark. ## Components - link list - large typography - social icon - button ## Typography - Display: Krea 3 Suisse Intl — 132px 500 - Heading: Krea 3 Suisse Intl — 100px 500 - Body: Suisse Intl — 20px 500 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #000000 - Primary-Action: primary action #2E6CF6 - Surface: surface #111111 - Muted-Text: muted text #737373 - Border: border #E5E5E5 ## Motion evidence - 37.0–49.0s — Scrolling down through the extensive footer links menu to the very bottom of the page. (92% confidence) ## Section quality Overall: 56.24/100 (Competent) Scored coverage: 85% - Typography: 56 — Consistent small-size link typography with clear weight contrast between bold section headers and muted gray links establishes basic hierarchy, but the type treatment is purely functional and interchangeable with countless other footers; no distinctive scale, tracking, or pairing choice evident in the crops. Next tier: Needs a distinctive typographic move (unusual scale contrast, custom header treatment) rather than standard bold-label/gray-link convention to read as more than competent. - Composition: 60 — A clean four-to-five column grid with consistent left alignment, generous column gaps, and logical grouping (Create, Edit, Enhance, Krea, Resources, Video/Image Models) gives the dense sitemap real organizational clarity, plus a nice touch with the 'Ask AI about Krea' icon row breaking up the list monotony. Next tier: Grid is well-executed but entirely conventional mega-footer structure; needs an unexpected spatial idea (asymmetry, a bold focal element, unconventional bottom bar treatment) to move beyond solid organization into memorable composition. - Motion: inconclusive — Gemini's only motion moment is a generic scroll-through to reveal the footer, which is viewport scrolling rather than a designed animation of the section itself; no timestamped entrance, hover, or reveal behavior specific to this footer is supplied. Next tier: Would need specific evidence of an actual animated behavior (e.g., link hover states, watermark parallax, icon transitions) tied to timestamps to be scored. - Content: 60 — The footer integrates an unusually complete sitemap (product tools, models, solutions, resources) plus social icons, legal links, and a distinctive AI-assistant icon row, giving it real utility beyond boilerplate link dumping. Next tier: Content breadth is good but presentation remains a straightforward list format; elevating requires a content-presentation idea (e.g., inline descriptions, visual previews) that makes the density feel curated rather than exhaustive. - Originality: 38 — This is a highly conventional SaaS mega-footer pattern (multi-column sitemap, bottom legal/social strip) seen across countless product sites; the described giant faded 'KREA' watermark is not actually visible in either supplied crop, so originality must be judged on what is shown, which is generic. Next tier: Would need the watermark or another visually distinguishing device to actually appear in evidence and be confirmed deterministically to argue for a higher originality tier. - Adaptability: 66 — The link-list grid, icon rows, and bottom bar are cleanly separable structural components with generic deterministic properties (flex rows, consistent gaps, pill-radius icons) that could be restyled or reflowed with low structural risk. Next tier: Adaptability is already high for this pattern type; axis is capped by the section's generic nature rather than any remaining extraction barrier. Strengths: - Comprehensive, well-grouped sitemap covering products, models, solutions, and resources without feeling chaotic - Clean, consistent grid alignment with generous gaps gives the dense link list breathing room - Small 'Ask AI about Krea' icon row adds a functional, slightly distinctive touch amid standard link columns Weaknesses: - Visual treatment (gray links, bold black headers) is a generic, widely-used footer convention - Claimed giant faded watermark is not visible in the supplied crops, undermining the section's stated visual signature - No distinguishing typographic or motion detail elevates it above a standard dense footer - Bottom legal/social strip is a conventional pattern with no unique framing Why it does not reach the next tier: The section executes a comprehensive sitemap footer cleanly and legibly, but every visible element—grid structure, type hierarchy, icon row, bottom bar—follows a well-worn convention without a confirmed distinctive visual device (the described watermark isn't evidenced in the crops), so it cannot exceed competent/good territory. ## Adaptation guidance - Effort: Low - Guidance: Recreate the grid structure (column headers in bold, links in muted gray, consistent gap spacing) and bottom social/legal strip; swap in site-specific link content and brand color/type tokens. What transfers: - Multi-column grouped link grid pattern - Bold header + muted link color hierarchy convention - Bottom strip layout combining copyright, legal links, and social icons Dependencies: - Specific link taxonomy and product naming tied to this company's offerings - Any underlying watermark/background typography asset if it exists sitewide ## 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 evidence only covers generic page scrolling, not an actual footer animation - The described giant faded watermark is not visible in the provided crops, so originality judgment is based on what's actually shown - No color/spacing deterministic data specific to the footer's link/header distinction was supplied beyond generic palette tokens ## 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: footer - Source type: footer - Structure: grid - Layout: Complex multi-column grid of text links layered over an enormous background watermark, followed by a bottom strip for social and legal links. - Styles: minimal, typographic - Components: link list, large typography, social icon, button - Purpose: A massive, multi-column sitemap footer layered over giant faded background typography, concluding with social icons and copyright links. - Visual signature: Extensive column layout of small text links over a giant faded 'KREA' watermark. - Place on the page: 22 of 22, after FAQ (`krea-ai:C21`) ### Crop and composition - Crop: 960×600px; aspect ratio 1.6:1 - Page bounds: 19384–20134px of 21224px - Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system. ### 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": [ { "role": "card/subheading", "family": "Krea 3 Suisse Intl", "stack": "\"Krea 3 Suisse Intl\", sans-serif", "size": "14px", "weight": "500", "lineHeight": "20px", "letterSpacing": "-0.4px", "sample": "Create", "element": "h3", "occurrences": 9, "sourceId": "font-2" }, { "role": "section heading", "family": "Krea 3 Suisse Intl", "stack": "\"Krea 3 Suisse Intl\", sans-serif", "size": "14px", "weight": "500", "lineHeight": "16.8px", "letterSpacing": "-0.4px", "sample": "Krea 3 on this page", "element": "h2", "occurrences": 1, "sourceId": "font-14" }, { "role": "UI/supporting text", "family": "Suisse Intl", "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "size": "12px", "weight": "500", "lineHeight": "16px", "letterSpacing": "normal", "sample": "© 2026 Krea", "element": "span", "occurrences": 14, "sourceId": "font-40" } ], "siteRoles": [ { "role": "display", "size": "132px", "family": "Krea 3 Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.", "sampleId": "font-34", "confidence": 1, "lineHeight": "116.2px", "letterSpacing": "-2.6px" }, { "role": "heading", "size": "100px", "family": "Krea 3 Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.", "sampleId": "font-8", "confidence": 1, "lineHeight": "96px", "letterSpacing": "-3px" }, { "role": "body", "size": "20px", "family": "Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.", "sampleId": "font-19", "confidence": 0.95, "lineHeight": "28px", "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": [ { "value": "#F5F5F5", "cssValue": "rgb(245, 245, 245)", "alpha": 1, "appliedAs": [ "background", "control-background" ], "occurrences": 21, "sourceId": "color-13" }, { "value": "#F6F2EA", "cssValue": "rgb(246, 242, 234)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 5, "sourceId": "color-15" } ], "functionalPalette": [ { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.", "sampleId": "color-4", "confidence": 1 }, { "hex": "#2E6CF6", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.", "sampleId": "color-31", "confidence": 1 }, { "hex": "#111111", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).", "sampleId": "color-5", "confidence": 0.9 }, { "hex": "#737373", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.", "sampleId": "color-17", "confidence": 0.9 }, { "hex": "#E5E5E5", "name": "border", "role": "border", "source": "computed", "evidence": "color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.", "sampleId": "color-32", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large radii (e.g., 20px-30px) for main content blocks/images, and full-round (50% or 999px) for buttons, tabs, and tags.", "density": "Low density. The layout prioritizes large imagery and massive text over packing in information, allowing each feature to breathe.", "evidence": "Observed via pill buttons, massive display fonts (font-34, font-6), large rounded media frames, and stark black/white section transitions.", "borderStyle": "Mostly borderless, relying on background contrast (dark/light) or subtle, thin light-gray borders (e.g., color-32) for delineating form fields or specific card boundaries.", "buttonStyle": "Pill-shaped. Primary actions use solid vibrant blue (color-31) or stark contrasting black/white depending on the section's canvas. Secondary actions use subtle grays or frosted glass effects (color-18, color-38).", "cornerStyle": "Consistent use of fully rounded (pill-shaped) elements for buttons and tags, combined with distinct rounded corners on large media cards and form containers.", "contentWidth": "Responsive, centering content in a wide max-width container but allowing large media elements and bold typography to bleed towards the edges.", "spacingRhythm": "Generous vertical spacing between major sections, utilizing massive typographic scaling to define rhythm. Elements within cards have tighter, functional padding." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×1090px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(255, 255, 255); radius 0px. - Observed gaps: 8px. - Representative content widths: 1312, 1144, 1080, 296, 290, 261, 249, 248px. - Layout containers: 8; cards/surfaces: 0; media elements: 12; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 19384, "bottom": 21224, "pageHeight": 21224 } }, "container": { "size": "1440×1090px", "position": "x 0px, y 20134px", "display": "block", "positionMode": "relative", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgb(255, 255, 255)", "radius": "0px", "border": "0px solid rgb(229, 229, 229)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 8 ], "representativeContentWidthsPx": [ 1312, 1144, 1080, 296, 290, 261, 249, 248 ] }, "columns": [ { "element": "ul · Krea 3 pricingBenchmarksUse casesRegional editsExact hex colorsImage referencesCharacter consistency", "size": "1080×88px", "position": "x 180px, y 19480px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" }, { "element": "div · K r e a 3", "size": "1440×318px", "position": "x 0px, y 19729px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" }, { "element": "li · AI Image Generator", "size": "296×20px", "position": "x 64px, y 20282px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" }, { "element": "li · AI Video Generator", "size": "296×20px", "position": "x 64px, y 20316px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" }, { "element": "li · Image to Video", "size": "296×20px", "position": "x 64px, y 20350px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" }, { "element": "li · Krea Agent New", "size": "296×20px", "position": "x 64px, y 20384px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" }, { "element": "li · Ad Studio New", "size": "296×20px", "position": "x 64px, y 20418px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" }, { "element": "li · Sketch to Image", "size": "296×20px", "position": "x 64px, y 20452px", "display": "flex", "template": "not captured", "direction": "row", "gap": "8px" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "9999px", "3.35544e+07px" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "svg · svg", "size": "20×20px", "position": "x 1140px, y 21164px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "20×20px", "position": "x 1212px, y 21164px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "20×20px", "position": "x 1248px, y 21164px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "20×20px", "position": "x 1284px, y 21164px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "20×20px", "position": "x 1320px, y 21164px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "20×20px", "position": "x 1356px, y 21164px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 64px, y 21052px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 96px, y 21052px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 128px, y 21052px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 160px, y 21052px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 192px, y 21052px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 1178px, y 21166px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" } ] ``` #### 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 { "root": { "id": "ld-3060", "gap": "normal", "tag": "footer", "rect": { "x": 0, "y": 20134, "width": 1440, "height": 1090 }, "role": null, "label": "Create AI Image Generator AI Video Generator Image to Video Krea Agent NewAd Studio NewSketch to Ima", "border": "0px solid rgb(229, 229, 229)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "visible", "position": "relative", "background": "rgb(255, 255, 255)" }, "cards": [], "media": [ { "id": "ld-3263", "tag": "svg", "rect": { "x": 1140, "y": 21164, "width": 20, "height": 20 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3271", "tag": "svg", "rect": { "x": 1212, "y": 21164, "width": 20, "height": 20 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3275", "tag": "svg", "rect": { "x": 1248, "y": 21164, "width": 20, "height": 20 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3279", "tag": "svg", "rect": { "x": 1284, "y": 21164, "width": 20, "height": 20 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3283", "tag": "svg", "rect": { "x": 1320, "y": 21164, "width": 20, "height": 20 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3287", "tag": "svg", "rect": { "x": 1356, "y": 21164, "width": 20, "height": 20 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3219", "tag": "svg", "rect": { "x": 64, "y": 21052, "width": 16, "height": 16 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3223", "tag": "svg", "rect": { "x": 96, "y": 21052, "width": 16, "height": 16 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3227", "tag": "svg", "rect": { "x": 128, "y": 21052, "width": 16, "height": 16 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3236", "tag": "svg", "rect": { "x": 160, "y": 21052, "width": 16, "height": 16 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3240", "tag": "svg", "rect": { "x": 192, "y": 21052, "width": 16, "height": 16 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-3267", "tag": "svg", "rect": { "x": 1178, "y": 21166, "width": 16, "height": 16 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 19384, "bottom": 21224, "pageHeight": 21224 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-3015", "gap": "8px", "tag": "ul", "rect": { "x": 180, "y": 19480, "width": 1080, "height": 88 }, "role": null, "label": "Krea 3 pricingBenchmarksUse casesRegional editsExact hex colorsImage referencesCharacter consistency", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3047", "gap": "normal", "tag": "div", "rect": { "x": 0, "y": 19729, "width": 1440, "height": 318 }, "role": "group", "label": "K r e a 3", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3068", "gap": "8px", "tag": "li", "rect": { "x": 64, "y": 20282, "width": 296, "height": 20 }, "role": null, "label": "AI Image Generator", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3070", "gap": "8px", "tag": "li", "rect": { "x": 64, "y": 20316, "width": 296, "height": 20 }, "role": null, "label": "AI Video Generator", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3072", "gap": "8px", "tag": "li", "rect": { "x": 64, "y": 20350, "width": 296, "height": 20 }, "role": null, "label": "Image to Video", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3074", "gap": "8px", "tag": "li", "rect": { "x": 64, "y": 20384, "width": 296, "height": 20 }, "role": null, "label": "Krea Agent New", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3077", "gap": "8px", "tag": "li", "rect": { "x": 64, "y": 20418, "width": 296, "height": 20 }, "role": null, "label": "Ad Studio New", "columns": null, "display": "flex", "direction": "row" }, { "id": "ld-3080", "gap": "8px", "tag": "li", "rect": { "x": 64, "y": 20452, "width": 296, "height": 20 }, "role": null, "label": "Sketch to Image", "columns": null, "display": "flex", "direction": "row" } ], "spacing": { "gapsPx": [ 8 ], "representativeContentWidthsPx": [ 1312, 1144, 1080, 296, 290, 261, 249, 248 ] }, "coverage": { "cards": 0, "media": 12, "animations": 0, "elementsInSection": 240 }, "surfaces": { "radii": [ "9999px", "3.35544e+07px" ], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-31T06:25:43.715Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **scroll** — Scrolling down through the extensive footer links menu to the very bottom of the page. (37s–49s; 92% 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: 1440px 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: Multi-column grouped link grid pattern; Bold header + muted link color hierarchy convention; Bottom strip layout combining copyright, legal links, and social icons - Dependencies: Specific link taxonomy and product naming tied to this company's offerings; Any underlying watermark/background typography asset if it exists sitewide - Guidance: Recreate the grid structure (column headers in bold, links in muted gray, consistent gap spacing) and bottom social/legal strip; swap in site-specific link content and brand color/type tokens. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original footer section inspired by the design evidence titled “Multi-column mega footer”. Purpose: A massive, multi-column sitemap footer layered over giant faded background typography, concluding with social icons and copyright links. Structure: grid. Source layout label: Complex multi-column grid of text links layered over an enormous background watermark, followed by a bottom strip for social and legal links.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system. Visual signature to preserve at the pattern level: Extensive column layout of small text links over a giant faded 'KREA' watermark. Components: link list, large typography, social icon, button. Style direction: minimal, typographic. Observed crop: 960×600px (1.6:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"132px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.","sampleId":"font-34","confidence":1,"lineHeight":"116.2px","letterSpacing":"-2.6px"} {"role":"heading","size":"100px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-3px"} {"role":"body","size":"20px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.","sampleId":"font-19","confidence":0.95,"lineHeight":"28px","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) used extensively as the primary background for light sections.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.","sampleId":"color-4","confidence":1} {"hex":"#2E6CF6","name":"primary action","role":"primary-action","source":"computed","evidence":"color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.","sampleId":"color-31","confidence":1} {"hex":"#111111","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).","sampleId":"color-5","confidence":0.9} {"hex":"#737373","name":"muted text","role":"muted-text","source":"computed","evidence":"color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.","sampleId":"color-17","confidence":0.9} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.","sampleId":"color-32","confidence":0.8} Typography measured inside this section: {"id":"font-2","size":"14px","count":9,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h3","top":20246,"text":"Create","property":"font"},{"tag":"h3","top":20656,"text":"Video Models","property":"font"},{"tag":"h3","top":20246,"text":"Edit","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"20px","letterSpacing":"-0.4px"} {"id":"font-14","size":"14px","count":1,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":19444,"text":"Krea 3 on this page","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"16.8px","letterSpacing":"-0.4px"} {"id":"font-40","size":"12px","count":14,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"span","top":21166,"text":"© 2026 Krea","property":"font"},{"tag":"a","top":21166,"text":"Terms","property":"font"},{"tag":"a","top":21166,"text":"Privacy","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"16px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-13","hex":"#F5F5F5","alpha":1,"count":21,"contexts":[{"tag":"div","top":1779,"text":"GPT Image 2🍌 Nano Banana Pro","property":"background"},{"tag":"a","top":19480,"text":"Krea 3 pricing","property":"control-background"}],"cssValue":"rgb(245, 245, 245)"} {"id":"color-15","hex":"#F6F2EA","alpha":1,"count":5,"contexts":[{"tag":"span","top":19681,"text":"K","property":"text"}],"cssValue":"rgb(246, 242, 234)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":20134,"width":1440,"height":1090},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8],"representativeContentWidthsPx":[1312,1144,1080,296,290,261,249,248]}; surfaces {"radii":["9999px","3.35544e+07px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":1140,"y":21164,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1212,"y":21164,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1248,"y":21164,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1284,"y":21164,"width":20,"height":20},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}] Motion evidence: scroll: Scrolling down through the extensive footer links menu to the very bottom of the page. (92% confidence) Transfer these principles: Multi-column grouped link grid pattern; Bold header + muted link color hierarchy convention; Bottom strip layout combining copyright, legal links, and social icons. Dependencies: Specific link taxonomy and product naming tied to this company's offerings; Any underlying watermark/background typography asset if it exists sitewide. Adaptation guidance: Recreate the grid structure (column headers in bold, links in muted gray, consistent gap spacing) and bottom social/legal strip; swap in site-specific link content and brand color/type tokens. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.