# Animated metadata tagging feature Schema: Design Details SECTION.md v3.2 Website: Frontify Source: https://www.frontify.com/ Source section IDs: gap-ea0cf7e3-1288-6258 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The section tells the product story in order: one uploaded image, then a tidy 4x2 grid, then text tags over each card. This shows what the feature does without explaining it. - A centered serif headline over restrained sans copy gives a clear hierarchy, and the small UI labels read as part of the product mock. - Cards are the same size with generous spacing, so the colorful photos stay orderly on a neutral off-white canvas. What a screenshot can't show: - The recording shows a single image expanding into a grid and then tag layers animating over it, between roughly 12 and 25 seconds. Exact easing, stagger and per-tag timing weren't captured. - No type sizes or spacing values were measured. Borrow: Stage a feature as a short before-and-after sequence inside a believable interface mock, so the motion itself explains what the product does. Leave alone: Don't copy Frontify's Cranny serif, its magenta and orange accents, or its exact image set; a free high-contrast serif and your own palette and imagery would work. ## Classification - Type: feature-grid - Layout: Centered introductory text followed by a dynamic grid of portrait-oriented images. - Styles: minimal, photographic - Confidence: 96% ## Purpose and structure A product feature demonstration where a single uploaded image expands into a grid of images, which are then overlaid with generated text tags. Visual signature: Grid of colorful images appearing sequentially with animated text badges sliding in over them. ## Components - headline - image grid - animated text overlays - upload interface mock ## Typography - Display: Cranny — 80px 300 - Heading: Cranny — 60.8px 400 - Body: ABC Diatype — 18px 400 ## Functional palette - Canvas: canvas #F0F0EB - Text: text #111110 - Canvas: canvas #000000 - Surface: surface #E1E1DB - Accent: accent #B60AE3 - Accent: accent #FF3B00 ## Motion evidence - 12.0–25.0s — A single image expands into a grid, followed by text layers animating over the images to simulate metadata generation. (92% confidence) ## Section quality Overall: 63.05/100 (Good) Scored coverage: 100% - Typography: 62 — Clean serif display headline (Cranny) paired with restrained sans body copy and small UI labels creates clear hierarchy, but treatment is largely standard product-marketing convention with no distinctive type craft within the grid itself. Next tier: Needs more deliberate typographic interplay between the small metadata labels and the image grid, not just a generic headline/body pairing. - Composition: 68 — Strong narrative staging: single centered image, expansion into a breadcrumb-framed file browser, then a tidy 4x2 grid with consistent card sizing and breathing room. Negative space and alignment are well controlled across the sequence. Next tier: Grid itself is a conventional file-manager layout; nothing in the spatial arrangement is distinct enough to separate it from typical SaaS dashboard patterns. - Motion: 65 — Gemini confirms a timestamped sequence (12–25s) of single image expanding into a grid followed by animated text-tag overlays, which is a legible, purposeful choreography demonstrating the product's function. Next tier: Without specifics on easing, stagger timing, or overlay transition polish, it's impossible to confirm motion craft beyond a functional reveal. - Content: 64 — Content (headline, upload mock, file browser chrome, tag labels) is tightly integrated to narrate the actual product capability step by step, giving the section clear purpose. Next tier: The imagery and copy serve demonstration only; no unique editorial or brand voice elevates it past functional product-tour content. - Originality: 58 — The upload-to-grid-to-tags narrative is a sensible way to visualize metadata tagging, but the file-browser UI, card grid, and badge animation are common patterns seen across many SaaS product sites. Next tier: Lacks a signature visual device (e.g., distinctive tag styling, unexpected transition, or unique grid choreography) that would make this sequence hard to mistake for a competitor's demo. - Adaptability: 60 — Structure (headline, upload mock, breadcrumb bar, image grid, tag overlay state) is modular and the skin (palette, type) is clearly separable from the underlying interaction logic. Next tier: Dependency on specific product screenshots and real asset thumbnails ties the demonstration closely to this product, limiting clean extraction without new imagery. Strengths: - Clear step-by-step visual narrative from single upload to full metadata-tagged grid - Consistent card sizing and alignment across the grid for a tidy, legible layout - Restrained palette and generous negative space keep focus on the product demonstration Weaknesses: - File-browser chrome and grid layout follow common SaaS dashboard conventions - No distinctive visual treatment for the tag badges beyond a generic sliding overlay - Typography pairing is competent but not uniquely crafted for this section Why it does not reach the next tier: The sequence is coherent and purposeful but relies on familiar file-manager and tag-overlay patterns without a signature detail that would make it memorable or hard to replicate. ## Adaptation guidance - Effort: Medium - Guidance: Keep the staged reveal structure (single image → grid → tag overlay) but replace product screenshots with generic placeholder imagery and restyle badges to avoid reliance on proprietary UI chrome. What transfers: - Upload-to-grid narrative structure - Breadcrumb file browser framing - Sequential reveal of metadata tags over thumbnails Dependencies: - Specific product screenshots/thumbnail imagery - Brand-specific color accents for tag badges - Underlying file browser UI chrome ## 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 score relies on Gemini's single timestamped description without detail on easing or stagger timing - No deterministic spacing/radius values specific to this section were supplied, limiting precision on composition scoring ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: features - Source type: feature-grid - Structure: centered single-column - Layout: Centered introductory text followed by a dynamic grid of portrait-oriented images. - Styles: minimal, photographic - Components: headline, image grid, animated text overlays, upload interface mock - Purpose: A product feature demonstration where a single uploaded image expands into a grid of images, which are then overlaid with generated text tags. - Visual signature: Grid of colorful images appearing sequentially with animated text badges sliding in over them. - Place on the page: 4 of 12, after Logo strip (`frontify-com:logo-cloud_6195338e`), before Feature collection (`frontify-com:features_32fa8644`) ### 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": "80px", "family": "Cranny", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-2: computed CSS at 1440×1000; AI role: Large 80px serif (Cranny) used for the main hero headline.", "sampleId": "font-2", "confidence": 1, "lineHeight": "80px", "letterSpacing": "normal" }, { "role": "heading", "size": "60.8px", "family": "Cranny", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: 60.8px serif (Cranny) used for secondary section headings.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "66.9px", "letterSpacing": "normal" }, { "role": "body", "size": "18px", "family": "ABC Diatype", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 18px sans-serif (ABC Diatype) used for primary body copy.", "sampleId": "font-6", "confidence": 1, "lineHeight": "23.4px", "letterSpacing": "0.2px" } ] } ``` ### 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": "#F0F0EB", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(240, 240, 235); AI role: #F0F0EB warm off-white used as the primary background for most sections.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#111110", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(17, 17, 16); AI role: #111110 near-black used for primary text and headings.", "sampleId": "color-3", "confidence": 1 }, { "hex": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-20: computed rgb(0, 0, 0); AI role: #000000 solid black used for the footer background.", "sampleId": "color-20", "confidence": 0.9 }, { "hex": "#E1E1DB", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-4: computed rgb(225, 225, 219); AI role: #E1E1DB slightly darker off-white used for form inputs and secondary surfaces.", "sampleId": "color-4", "confidence": 0.85 }, { "hex": "#B60AE3", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-21: computed rgb(182, 10, 227); AI role: #B60AE3 vivid purple used for small UI highlights (like the magic wand icon).", "sampleId": "color-21", "confidence": 0.8 }, { "hex": "#FF3B00", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-18: computed rgb(255, 59, 0); AI role: #FF3B00 vivid orange used for specific text highlights or small graphic elements.", "sampleId": "color-18", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear to use full capsule/pill radii; product UI mockups use ~8px to ~16px border radii.", "density": "Low density, utilizing significant negative space to draw focus to central interactive elements and typography.", "evidence": "Observation of buttons, section spacing, and border treatments across the main scrollable area.", "borderStyle": "Mostly borderless design relying on subtle background color shifts. Thin 1px solid borders are used sparingly on specific form elements.", "buttonStyle": "Pill-shaped, mostly solid dark fills for primary actions, or transparent with thin borders for secondary actions.", "cornerStyle": "Mix of fully rounded pill shapes for buttons/inputs and moderate border radii for product cards/images.", "contentWidth": "Centered content with a constrained maximum width to maintain readability, especially for text blocks.", "spacingRhythm": "Generous vertical rhythm with large padding between distinct sections and relaxed line heights in body text." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion 1. **interaction** — A single image expands into a grid, followed by text layers animating over the images to simulate metadata generation. (12s–25s; 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: 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: Upload-to-grid narrative structure; Breadcrumb file browser framing; Sequential reveal of metadata tags over thumbnails - Dependencies: Specific product screenshots/thumbnail imagery; Brand-specific color accents for tag badges; Underlying file browser UI chrome - Guidance: Keep the staged reveal structure (single image → grid → tag overlay) but replace product screenshots with generic placeholder imagery and restyle badges to avoid reliance on proprietary UI chrome. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Animated metadata tagging feature”. Purpose: A product feature demonstration where a single uploaded image expands into a grid of images, which are then overlaid with generated text tags. Structure: centered single-column. Source layout label: Centered introductory text followed by a dynamic grid of portrait-oriented images.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Grid of colorful images appearing sequentially with animated text badges sliding in over them. Components: headline, image grid, animated text overlays, upload interface mock. Style direction: minimal, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"80px","family":"Cranny","source":"computed","traits":"Regular","weight":"300","evidence":"font-2: computed CSS at 1440×1000; AI role: Large 80px serif (Cranny) used for the main hero headline.","sampleId":"font-2","confidence":1,"lineHeight":"80px","letterSpacing":"normal"} {"role":"heading","size":"60.8px","family":"Cranny","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: 60.8px serif (Cranny) used for secondary section headings.","sampleId":"font-1","confidence":0.95,"lineHeight":"66.9px","letterSpacing":"normal"} {"role":"body","size":"18px","family":"ABC Diatype","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 18px sans-serif (ABC Diatype) used for primary body copy.","sampleId":"font-6","confidence":1,"lineHeight":"23.4px","letterSpacing":"0.2px"} Color evidence: {"hex":"#F0F0EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(240, 240, 235); AI role: #F0F0EB warm off-white used as the primary background for most sections.","sampleId":"color-1","confidence":1} {"hex":"#111110","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(17, 17, 16); AI role: #111110 near-black used for primary text and headings.","sampleId":"color-3","confidence":1} {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-20: computed rgb(0, 0, 0); AI role: #000000 solid black used for the footer background.","sampleId":"color-20","confidence":0.9} {"hex":"#E1E1DB","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(225, 225, 219); AI role: #E1E1DB slightly darker off-white used for form inputs and secondary surfaces.","sampleId":"color-4","confidence":0.85} {"hex":"#B60AE3","name":"accent","role":"accent","source":"computed","evidence":"color-21: computed rgb(182, 10, 227); AI role: #B60AE3 vivid purple used for small UI highlights (like the magic wand icon).","sampleId":"color-21","confidence":0.8} {"hex":"#FF3B00","name":"accent","role":"accent","source":"computed","evidence":"color-18: computed rgb(255, 59, 0); AI role: #FF3B00 vivid orange used for specific text highlights or small graphic elements.","sampleId":"color-18","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: interaction: A single image expands into a grid, followed by text layers animating over the images to simulate metadata generation. (92% confidence) Transfer these principles: Upload-to-grid narrative structure; Breadcrumb file browser framing; Sequential reveal of metadata tags over thumbnails. Dependencies: Specific product screenshots/thumbnail imagery; Brand-specific color accents for tag badges; Underlying file browser UI chrome. Adaptation guidance: Keep the staged reveal structure (single image → grid → tag overlay) but replace product screenshots with generic placeholder imagery and restyle badges to avoid reliance on proprietary UI chrome. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.