# Filtered design portfolio grid Schema: Design Details SECTION.md v3.2 Website: Krea Source: https://www.krea.ai/krea-3 Source section IDs: b6468591-c63e-4903-a48e-6ef87e10c15f Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Mixing portrait and landscape cards across three columns gives the grid a magazine-like rhythm, and the generous whitespace lets each piece stand on its own. - A bold black title over a lighter gray subtitle, with the filter pills tucked just below, sets the hierarchy fast and keeps the colour in the artwork rather than the interface. - Each real piece (foil-stamped card, orange poster, re-lettered signage) carries a short caption, so the grid says something beyond stock imagery. What a screenshot can't show: - Images reveal on load over 700ms with a custom ease (0.2, 0.7, 0.2, 1), moving from blur(18px), brighter and desaturated to sharp. Heart icons pop in with an overshoot spring over 520ms after a 650ms delay. - Body text is 16px and 20px at weight 500, with 12.5px for the filter label. Line heights are 20.8px, 28px and 18.8px, and the section has 60px vertical padding. The recording itself showed no other motion. Borrow: Let images resolve from a blurred, washed-out state into focus, and keep the surrounding interface quiet so the work supplies the colour. Leave alone: Don't copy Krea's Suisse Intl typeface (a neo-grotesque; a free grotesque like Inter would do), its specific artwork, or its hold-to-see-the-source concept. ## Classification - Type: gallery - Layout: Top header and filter row above a multi-column masonry-style grid of differently sized image cards. - Styles: minimal, geometric, colourful - Confidence: 100% ## Purpose and structure A gallery showcasing diverse graphic design work, equipped with pill-shaped filter tags for categorized browsing. Visual signature: Grid of graphic design examples including a bright orange poster and a foil-stamped card. ## Components - heading - filter tag - image card - masonry grid ## 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 - No section-specific authored motion was established. ## Section quality Overall: 63.90/100 (Good) Scored coverage: 100% - Typography: 60 — Clear two-tier heading contrast (bold black title over lighter gray subtitle) and a muted descriptive paragraph establish hierarchy, but weights, sizes and spacing follow the familiar large-display-plus-gray-subhead pattern seen across the rest of the site with no distinct typographic treatment specific to this gallery. Next tier: Needs a typographic choice unique to the gallery context (e.g. captions, tags, or counters treated with more intention) rather than reusing the generic heading scale. - Composition: 66 — Asymmetric three-column grid mixes portrait and landscape image aspect ratios with generous whitespace and a clean filter row, giving the gallery a magazine-like rhythm rather than a rigid grid. Next tier: Column variation is still a fairly standard masonry pattern; without a more deliberate sizing logic or layering between cards it reads as competent rather than distinctive. - Motion: 62 — Deterministic animation data shows a blur/brightness/saturation reveal on image load (700ms, custom cubic-bezier) and spring-eased heart 'like' pop-ins (520ms, overshoot easing, delayed 650ms) — specific, intentional micro-interactions beyond a plain fade. Next tier: Motion is limited to load-in and a decorative heart icon; no interaction state change tied to the filter tabs or hover/swap behavior described in the copy is evidenced in the animation data. - Content: 66 — Real, well-chosen portfolio pieces (foil-stamped card, bold poster, re-lettered signage) each paired with a short descriptive caption that reinforces the 'swap the input, keep the layout' narrative, giving the grid a clear point beyond generic stock imagery. Next tier: Captions and categories are informative but minimal; richer metadata or visible interaction (e.g., the promised before/after reveal) would deepen content integration. - Originality: 58 — The filter-tab-plus-masonry-grid gallery is a very common portfolio pattern; the 'hold to see what it started from' concept is interesting but not visually evidenced in this static crop, so originality rests mostly on copy rather than demonstrated interaction. Next tier: Would need the hold/reveal interaction to be visually distinctive and confirmed, not just described, to feel non-generic. - Adaptability: 72 — Heading, filter pills, and image-card grid are cleanly separable structural primitives with standard rounded-corner image treatment and pill filters that can be restyled or re-themed with minimal structural change. Next tier: n/a for this axis at current tier Strengths: - Asymmetric column widths and image aspect ratios create a lively, magazine-style grid instead of a uniform tile wall - Specific, named portfolio pieces with contextual captions give the gallery a clear narrative ('swap the input, keep the layout') - Subtle, intentional load-in blur reveal and spring-eased heart micro-interaction add polish beyond a basic fade Weaknesses: - Typography reuses the site's generic heading/subhead scale with no bespoke treatment for gallery content - Filter-tabs-over-masonry-grid is a very common portfolio pattern - The headline 'hold to see what it started from' interaction is not visually confirmed by the deterministic motion evidence - Decorative heart icon animation feels like a stock micro-interaction rather than a considered detail Why it does not reach the next tier: The section is well-executed and purposeful but relies on a familiar gallery+filter structure and standard heading typography; nothing here is hard to substitute with a generic portfolio grid template, and the most original idea (hold-to-reveal source) isn't demonstrated in the visible motion data. ## Adaptation guidance - Effort: Medium - Guidance: Reskin the filter pills and card radii/shadows to match a new brand; swap imagery and captions while keeping the mixed-aspect-ratio grid logic and the blur load-in transition as the main transferable pattern. What transfers: - Pill-shaped filter tab row - Asymmetric masonry image grid with mixed aspect ratios - Blur/brightness image load-in reveal pattern - Caption-under-image metadata pattern Dependencies: - Specific curated portfolio imagery and captions - The 'hold to reveal original' interaction logic (not evidenced visually) - Heart icon like micro-interaction behavior ## 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 only from the blur reveal and heart animations explicitly supplied; the described hold-to-reveal interaction is not visible in the evidence - Static crop cannot confirm hover or filter-tab transition behavior - Only two of many grid images have full animation data ## 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: gallery - Source type: gallery - Structure: grid - Layout: Top header and filter row above a multi-column masonry-style grid of differently sized image cards. - Styles: minimal, geometric, colourful - Components: heading, filter tag, image card, masonry grid - Purpose: A gallery showcasing diverse graphic design work, equipped with pill-shaped filter tags for categorized browsing. - Visual signature: Grid of graphic design examples including a bright orange poster and a foil-stamped card. - Place on the page: 13 of 22, after Comparison (`krea-ai:C12`), before Feature collection (`krea-ai:C14`) ### Crop and composition - Crop: 1440×1010px; aspect ratio 1.426:1 - Page bounds: 11485–12495px 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": "body/supporting copy", "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": "16px", "weight": "500", "lineHeight": "20.8px", "letterSpacing": "normal", "sample": "Krea 3 renders 2K natively. Move the loupe over this 2K output to see its real pixels.", "element": "p", "occurrences": 25, "sourceId": "font-15" }, { "role": "card/subheading", "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": "20px", "weight": "500", "lineHeight": "28px", "letterSpacing": "normal", "sample": "Krea 3 Ultra is #4 on Arena's Multi-Image Edit leaderboard, with an Arena score of 1,435. Bars use t", "element": "p", "occurrences": 5, "sourceId": "font-19" }, { "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": "12.5px", "weight": "500", "lineHeight": "18.8px", "letterSpacing": "normal", "sample": "Type", "element": "span", "occurrences": 23, "sourceId": "font-33" } ], "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": "#F2F2F0", "cssValue": "rgb(242, 242, 240)", "alpha": 1, "appliedAs": [ "background", "control-background" ], "occurrences": 39, "sourceId": "color-2" } ], "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×1009px; block; padding {"top":"60px","left":"0px","right":"0px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px. - Representative content widths: 797, 757, 718, 474, 451, 383, 259px. - Layout containers: 5; cards/surfaces: 2; media elements: 12; browser animations: 3. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 11485, "bottom": 12495, "pageHeight": 21224 } }, "container": { "size": "1440×1009px", "position": "x 0px, y 11486px", "display": "block", "positionMode": "static", "padding": { "top": "60px", "left": "0px", "right": "0px", "bottom": "60px" }, "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": [], "representativeContentWidthsPx": [ 797, 757, 718, 474, 451, 383, 259 ] }, "columns": [ { "element": "button · svelte-85h3be", "size": "40×40px", "position": "x 1288px, y 11815px", "display": "grid", "template": "40px", "direction": "row", "gap": "normal" }, { "element": "button · svelte-85h3be", "size": "40×40px", "position": "x 1336px, y 11815px", "display": "grid", "template": "40px", "direction": "row", "gap": "normal" }, { "element": "span · ❤️", "size": "40×40px", "position": "x 391px, y 11889px", "display": "grid", "template": "40px", "direction": "row", "gap": "normal" }, { "element": "span · ❤️", "size": "40×40px", "position": "x 391px, y 12381px", "display": "grid", "template": "40px", "direction": "row", "gap": "normal" }, { "element": "div · AllPostersTypePackagingBrandingEditorialAds & social", "size": "757×60px", "position": "x 64px, y 11805px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "img · pic develop svelte-wjdfzo", "size": "259×346px", "position": "x 160px, y 11901px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "26px", "border": "0px solid rgb(229, 229, 229)", "shadow": "rgba(0, 0, 0, 0.45) 0px 24px 50px -30px", "background": "rgba(0, 0, 0, 0)" }, { "element": "img · pic mine svelte-wjdfzo", "size": "202×269px", "position": "x 1078px, y 11510px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "26px", "border": "0px solid rgb(229, 229, 229)", "shadow": "rgba(0, 0, 0, 0.45) 0px 24px 50px -30px", "background": "rgba(0, 0, 0, 0)" } ], "surfaces": { "radii": [ "999px", "26px", "50%" ], "borders": [], "shadows": [ "rgba(0, 0, 0, 0.45) 0px 24px 50px -30px", "rgb(255, 255, 255) 0px 0px 0px 4px" ] } } ``` #### Media treatment ```json [ { "element": "img · input svelte-85h3be", "size": "718×480px", "position": "x 467px, y 11893px", "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-landing-final/k3type-2-input.webp?v=2" }, { "element": "img · output svelte-85h3be", "size": "718×480px", "position": "x 467px, y 11893px", "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-landing-final/k3type-2-output.webp?v=2" }, { "element": "img · input svelte-85h3be", "size": "718×480px", "position": "x 1204px, y 11893px", "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-landing-final/k3type-3-input.webp?v=2" }, { "element": "img · output svelte-85h3be", "size": "718×480px", "position": "x 1204px, y 11893px", "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-landing-final/k3type-3-output.webp?v=2" }, { "element": "img · input svelte-85h3be", "size": "383×480px", "position": "x 64px, y 11893px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-landing-final/k3type-1-input.webp?v=2" }, { "element": "img · output svelte-85h3be", "size": "383×480px", "position": "x 64px, y 11893px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://s.krea.ai/k3-landing-final/k3type-1-output.webp?v=2" }, { "element": "img · pic develop svelte-wjdfzo", "size": "259×346px", "position": "x 160px, y 11901px", "aspectRatio": 0.7, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "26px", "overflow": "clip", "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-k3-voice-1-webp-1024.webp" }, { "element": "img · pic mine svelte-wjdfzo", "size": "202×269px", "position": "x 1078px, y 11510px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "26px", "overflow": "clip", "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-k3-voice-0-webp-1024.webp" }, { "element": "svg · svg", "size": "18×22px", "position": "x 1269px, y 11827px", "aspectRatio": 0.8, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "18×22px", "position": "x 1269px, y 12319px", "aspectRatio": 0.8, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 1300px, y 11827px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "16×16px", "position": "x 1348px, y 11827px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" } ] ``` #### Browser-exposed animation parameters ```json [ { "target": "pic develop svelte-wjdfzo", "delayMs": 0, "durationMs": 700, "easing": "linear", "iterations": 1, "direction": "normal", "fill": "both", "keyframes": [ { "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "blur(18px) brightness(1.4) saturate(0.5)", "offset": 0, "composite": "auto", "computedOffset": 0 }, { "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "none", "offset": 1, "composite": "replace", "computedOffset": 1 } ] }, { "target": "❤️", "delayMs": 650, "durationMs": 520, "easing": "linear", "iterations": 1, "direction": "normal", "fill": "both", "keyframes": [ { "scale": "0", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 0, "rotate": "-30deg", "opacity": "0", "composite": "auto", "computedOffset": 0 }, { "scale": "none", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 1, "rotate": "none", "opacity": "1", "composite": "replace", "computedOffset": 1 } ] }, { "target": "❤️", "delayMs": 650, "durationMs": 520, "easing": "linear", "iterations": 1, "direction": "normal", "fill": "both", "keyframes": [ { "scale": "0", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 0, "rotate": "-30deg", "opacity": "0", "composite": "auto", "computedOffset": 0 }, { "scale": "none", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 1, "rotate": "none", "opacity": "1", "composite": "replace", "computedOffset": 1 } ] } ] ``` ### 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-1501", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 11486, "width": 1440, "height": 1009 }, "role": null, "label": "Made for designersPosters, packs,brands, covers Swap the product, the photo or the brand and keep th", "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": "60px", "left": "0px", "right": "0px", "bottom": "60px" }, "overflow": "visible", "position": "static", "background": "rgb(255, 255, 255)" }, "cards": [ { "id": "ld-1806", "tag": "img", "rect": { "x": 160, "y": 11901, "width": 259, "height": 346 }, "role": null, "label": "pic develop svelte-wjdfzo", "border": "0px solid rgb(229, 229, 229)", "radius": "26px", "shadow": "rgba(0, 0, 0, 0.45) 0px 24px 50px -30px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" }, { "id": "ld-1763", "tag": "img", "rect": { "x": 1078, "y": 11510, "width": 202, "height": 269 }, "role": null, "label": "pic mine svelte-wjdfzo", "border": "0px solid rgb(229, 229, 229)", "radius": "26px", "shadow": "rgba(0, 0, 0, 0.45) 0px 24px 50px -30px", "padding": [ "0px", "0px", "0px", "0px" ], "background": "rgba(0, 0, 0, 0)" } ], "media": [ { "id": "ld-1546", "tag": "img", "rect": { "x": 467, "y": 11893, "width": 718, "height": 480 }, "role": null, "label": "input svelte-85h3be", "media": { "alt": "", "src": "https://s.krea.ai/k3-landing-final/k3type-2-input.webp?v=2", "naturalWidth": 1600, "naturalHeight": 1070 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.5, "objectPosition": "50% 50%" }, { "id": "ld-1547", "tag": "img", "rect": { "x": 467, "y": 11893, "width": 718, "height": 480 }, "role": null, "label": "output svelte-85h3be", "media": { "alt": "Maison Olive, foil-stamped", "src": "https://s.krea.ai/k3-landing-final/k3type-2-output.webp?v=2", "naturalWidth": 1600, "naturalHeight": 1070 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.5, "objectPosition": "50% 50%" }, { "id": "ld-1555", "tag": "img", "rect": { "x": 1204, "y": 11893, "width": 718, "height": 480 }, "role": null, "label": "input svelte-85h3be", "media": { "alt": "", "src": "https://s.krea.ai/k3-landing-final/k3type-3-input.webp?v=2", "naturalWidth": 1600, "naturalHeight": 1070 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.5, "objectPosition": "50% 50%" }, { "id": "ld-1556", "tag": "img", "rect": { "x": 1204, "y": 11893, "width": 718, "height": 480 }, "role": null, "label": "output svelte-85h3be", "media": { "alt": "Boulangerie sign, re-lettered", "src": "https://s.krea.ai/k3-landing-final/k3type-3-output.webp?v=2", "naturalWidth": 1600, "naturalHeight": 1070 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.5, "objectPosition": "50% 50%" }, { "id": "ld-1537", "tag": "img", "rect": { "x": 64, "y": 11893, "width": 383, "height": 480 }, "role": null, "label": "input svelte-85h3be", "media": { "alt": "", "src": "https://s.krea.ai/k3-landing-final/k3type-1-input.webp?v=2", "naturalWidth": 1276, "naturalHeight": 1600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-1538", "tag": "img", "rect": { "x": 64, "y": 11893, "width": 383, "height": 480 }, "role": null, "label": "output svelte-85h3be", "media": { "alt": "Night Shift poster, re-titled", "src": "https://s.krea.ai/k3-landing-final/k3type-1-output.webp?v=2", "naturalWidth": 1276, "naturalHeight": 1600 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-1806", "tag": "img", "rect": { "x": 160, "y": 11901, "width": 259, "height": 346 }, "role": null, "label": "pic develop svelte-wjdfzo", "media": { "alt": "Make it golden hour.", "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-k3-voice-1-webp-1024.webp", "naturalWidth": 768, "naturalHeight": 1024 }, "radius": "26px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.7, "objectPosition": "50% 50%" }, { "id": "ld-1763", "tag": "img", "rect": { "x": 1078, "y": 11510, "width": 202, "height": 269 }, "role": null, "label": "pic mine svelte-wjdfzo", "media": { "alt": "A golden retriever sitting on a sofa", "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-k3-voice-0-webp-1024.webp", "naturalWidth": 768, "naturalHeight": 1024 }, "radius": "26px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-1801", "tag": "svg", "rect": { "x": 1269, "y": 11827, "width": 18, "height": 22 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-1846", "tag": "svg", "rect": { "x": 1269, "y": 12319, "width": 18, "height": 22 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 0.8, "objectPosition": "50% 50%" }, { "id": "ld-1527", "tag": "svg", "rect": { "x": 1300, "y": 11827, "width": 16, "height": 16 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-1531", "tag": "svg", "rect": { "x": 1348, "y": 11827, "width": 16, "height": 16 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 11485, "bottom": 12495, "pageHeight": 21224 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-1526", "gap": "normal", "tag": "button", "rect": { "x": 1288, "y": 11815, "width": 40, "height": 40 }, "role": null, "label": "svelte-85h3be", "columns": "40px", "display": "grid", "direction": "row" }, { "id": "ld-1530", "gap": "normal", "tag": "button", "rect": { "x": 1336, "y": 11815, "width": 40, "height": 40 }, "role": null, "label": "svelte-85h3be", "columns": "40px", "display": "grid", "direction": "row" }, { "id": "ld-1807", "gap": "normal", "tag": "span", "rect": { "x": 391, "y": 11889, "width": 40, "height": 40 }, "role": null, "label": "❤️", "columns": "40px", "display": "grid", "direction": "row" }, { "id": "ld-1852", "gap": "normal", "tag": "span", "rect": { "x": 391, "y": 12381, "width": 40, "height": 40 }, "role": null, "label": "❤️", "columns": "40px", "display": "grid", "direction": "row" }, { "id": "ld-1509", "gap": "normal", "tag": "div", "rect": { "x": 64, "y": 11805, "width": 757, "height": 60 }, "role": "tablist", "label": "AllPostersTypePackagingBrandingEditorialAds & social", "columns": null, "display": "flex", "direction": "row" } ], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 797, 757, 718, 474, 451, 383, 259 ] }, "coverage": { "cards": 2, "media": 12, "animations": 3, "elementsInSection": 51 }, "surfaces": { "radii": [ "999px", "26px", "50%" ], "borders": [], "shadows": [ "rgba(0, 0, 0, 0.45) 0px 24px 50px -30px", "rgb(255, 255, 255) 0px 0px 0px 4px" ] }, "animations": [ { "id": "animation-45", "fill": "both", "easing": "linear", "target": { "id": "ld-1806", "tag": "img", "rect": { "x": 160, "y": 11901, "width": 259, "height": 346 }, "role": null, "label": "pic develop svelte-wjdfzo" }, "delayMs": 0, "direction": "normal", "keyframes": [ { "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "blur(18px) brightness(1.4) saturate(0.5)", "offset": 0, "composite": "auto", "computedOffset": 0 }, { "easing": "cubic-bezier(0.2, 0.7, 0.2, 1)", "filter": "none", "offset": 1, "composite": "replace", "computedOffset": 1 } ], "playState": "finished", "durationMs": 700, "iterations": 1, "playbackRate": 1 }, { "id": "animation-46", "fill": "both", "easing": "linear", "target": { "id": "ld-1807", "tag": "span", "rect": { "x": 391, "y": 11889, "width": 40, "height": 40 }, "role": null, "label": "❤️" }, "delayMs": 650, "direction": "normal", "keyframes": [ { "scale": "0", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 0, "rotate": "-30deg", "opacity": "0", "composite": "auto", "computedOffset": 0 }, { "scale": "none", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 1, "rotate": "none", "opacity": "1", "composite": "replace", "computedOffset": 1 } ], "playState": "finished", "durationMs": 520, "iterations": 1, "playbackRate": 1 }, { "id": "animation-48", "fill": "both", "easing": "linear", "target": { "id": "ld-1852", "tag": "span", "rect": { "x": 391, "y": 12381, "width": 40, "height": 40 }, "role": null, "label": "❤️" }, "delayMs": 650, "direction": "normal", "keyframes": [ { "scale": "0", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 0, "rotate": "-30deg", "opacity": "0", "composite": "auto", "computedOffset": 0 }, { "scale": "none", "easing": "cubic-bezier(0.34, 1.8, 0.64, 1)", "offset": 1, "rotate": "none", "opacity": "1", "composite": "replace", "computedOffset": 1 } ], "playState": "finished", "durationMs": 520, "iterations": 1, "playbackRate": 1 } ], "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 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: 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: medium - What transfers: Pill-shaped filter tab row; Asymmetric masonry image grid with mixed aspect ratios; Blur/brightness image load-in reveal pattern; Caption-under-image metadata pattern - Dependencies: Specific curated portfolio imagery and captions; The 'hold to reveal original' interaction logic (not evidenced visually); Heart icon like micro-interaction behavior - Guidance: Reskin the filter pills and card radii/shadows to match a new brand; swap imagery and captions while keeping the mixed-aspect-ratio grid logic and the blur load-in transition as the main transferable pattern. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion. ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Filtered design portfolio grid”. Purpose: A gallery showcasing diverse graphic design work, equipped with pill-shaped filter tags for categorized browsing. Structure: grid. Source layout label: Top header and filter row above a multi-column masonry-style grid of differently sized image cards.. 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: Grid of graphic design examples including a bright orange poster and a foil-stamped card. Components: heading, filter tag, image card, masonry grid. Style direction: minimal, geometric, colourful. Observed crop: 1440×1010px (1.426: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-15","size":"16px","count":25,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":10267,"text":"Krea 3 renders 2K natively. Move the loupe over this 2K output to see its real pixels.","property":"font"},{"tag":"span","top":12406,"text":"Night Shift poster, re-titled","property":"font"},{"tag":"span","top":12406,"text":"Maison Olive, foil-stamped","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":"20.8px","letterSpacing":"normal"} {"id":"font-19","size":"20px","count":5,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":3182,"text":"Krea 3 Ultra is #4 on Arena's Multi-Image Edit leaderboard, with an Arena score of 1,435. Bars use t","property":"font"},{"tag":"p","top":6597,"text":"Name a hex code and Krea 3 matches it on the product, and only on the product. Pick a swatch.","property":"font"},{"tag":"p","top":11669,"text":"Swap the product, the photo or the brand and keep the layout and type. Hold any piece to see what it","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":"28px","letterSpacing":"normal"} {"id":"font-33","size":"12.5px","count":23,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"span","top":12385,"text":"Type","property":"font"},{"tag":"span","top":12385,"text":"Type","property":"font"},{"tag":"span","top":12385,"text":"Type","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":"18.8px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-2","hex":"#F2F2F0","alpha":1,"count":39,"contexts":[{"tag":"div","top":6706,"text":"Original photo Make it #7EC8F2#FFC12E#D9C3A3#2F5D46#B9A3E8 Original photo","property":"background"},{"tag":"button","top":11815,"text":"","property":"control-background"}],"cssValue":"rgb(242, 242, 240)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":11486,"width":1440,"height":1009},"padding":{"top":"60px","left":"0px","right":"0px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[797,757,718,474,451,383,259]}; surfaces {"radii":["999px","26px","50%"],"borders":[],"shadows":["rgba(0, 0, 0, 0.45) 0px 24px 50px -30px","rgb(255, 255, 255) 0px 0px 0px 4px"]}; media [{"tag":"img","rect":{"x":467,"y":11893,"width":718,"height":480},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":467,"y":11893,"width":718,"height":480},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1204,"y":11893,"width":718,"height":480},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1204,"y":11893,"width":718,"height":480},"aspectRatio":1.5,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-1806","tag":"img","rect":{"x":160,"y":11901,"width":259,"height":346},"role":null,"label":"pic develop svelte-wjdfzo"},"delayMs":0,"durationMs":700,"easing":"linear","keyframes":[{"easing":"cubic-bezier(0.2, 0.7, 0.2, 1)","filter":"blur(18px) brightness(1.4) saturate(0.5)","offset":0,"composite":"auto","computedOffset":0},{"easing":"cubic-bezier(0.2, 0.7, 0.2, 1)","filter":"none","offset":1,"composite":"replace","computedOffset":1}]},{"target":{"id":"ld-1807","tag":"span","rect":{"x":391,"y":11889,"width":40,"height":40},"role":null,"label":"❤️"},"delayMs":650,"durationMs":520,"easing":"linear","keyframes":[{"scale":"0","easing":"cubic-bezier(0.34, 1.8, 0.64, 1)","offset":0,"rotate":"-30deg","opacity":"0","composite":"auto","computedOffset":0},{"scale":"none","easing":"cubic-bezier(0.34, 1.8, 0.64, 1)","offset":1,"rotate":"none","opacity":"1","composite":"replace","computedOffset":1}]},{"target":{"id":"ld-1852","tag":"span","rect":{"x":391,"y":12381,"width":40,"height":40},"role":null,"label":"❤️"},"delayMs":650,"durationMs":520,"easing":"linear","keyframes":[{"scale":"0","easing":"cubic-bezier(0.34, 1.8, 0.64, 1)","offset":0,"rotate":"-30deg","opacity":"0","composite":"auto","computedOffset":0},{"scale":"none","easing":"cubic-bezier(0.34, 1.8, 0.64, 1)","offset":1,"rotate":"none","opacity":"1","composite":"replace","computedOffset":1}]}] Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Pill-shaped filter tab row; Asymmetric masonry image grid with mixed aspect ratios; Blur/brightness image load-in reveal pattern; Caption-under-image metadata pattern. Dependencies: Specific curated portfolio imagery and captions; The 'hold to reveal original' interaction logic (not evidenced visually); Heart icon like micro-interaction behavior. Adaptation guidance: Reskin the filter pills and card radii/shadows to match a new brand; swap imagery and captions while keeping the mixed-aspect-ratio grid logic and the blur load-in transition as the main transferable pattern. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.