# Feature Image with Sliding UI Overlay Schema: Design Details SECTION.md v3.2 Website: Google Health App Source: https://healthapp.google/ Source section IDs: gap-689119a5-7468-8790 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A calm canvas with a large, tightly tracked heading sits above a full-bleed photo, so the text and image each get their own space. - The calendar card is centered over the photo with enough contrast to read clearly, and its cycle-tracking content matches the feature being described. - The card slides up once and settles, a single purposeful reveal that adds depth without crowding the photograph. What a screenshot can't show: - The card slides upward from the bottom of the section onto the image as it comes into view, over roughly 11 seconds of the recording (20–31s). - No font sizes, letter spacing or section padding were measured, so exact type scale and spacing are unknown. Borrow: Let a single floating UI card rise over a full-bleed photo as the section scrolls in, so the product appears inside real life. Leave alone: Don't copy the blue wristband close-up, the cycle-tracking calendar content, or the Google-style off-white canvas and blue accent; use your own imagery, card content and palette. ## Classification - Type: features - Layout: Text header above a full-width image container featuring an animated floating UI overlay. - Styles: photographic, minimal - Confidence: 96% ## Purpose and structure A full-width lifestyle image where a prominent UI card slides up into view on scroll. Visual signature: Close-up of a person's torso and arm wearing a blue band, with a calendar UI card hovering in the foreground. ## Components - heading - background-image - ui-card ## Typography - Display: Google Sans — 80px 400 - Heading: Google Sans — 64px 400 - Body: Google Sans — 20px 400 - Mono: Google Sans — 12px 400 ## Functional palette - Surface: surface #FFFFFF - Primary-Action: primary action #4285F4 - Canvas: canvas #F6F5F1 - Text: text #1F1F1F ## Motion evidence - 20.0–31.0s — A UI element (a calendar) slides upwards from the bottom of the section to rest on top of the background image as it comes into full view. (95% confidence) ## Section quality Overall: 60.80/100 (Good) Scored coverage: 100% - Typography: 62 — Clean large display heading with tight letter-spacing and clear hierarchy against the image, consistent with site-level type scale; competent but not a distinctive typographic treatment within this crop. Next tier: Heading is a single static line with no unique treatment (scale contrast, mixed weights, kinetic type) that would elevate it beyond standard marketing header. - Composition: 65 — Well-balanced layout: text block floats on calm canvas, then full-bleed photographic image anchors a centered UI card with legible contrast against the lifestyle photo, showing clear figure-ground control. Next tier: Composition relies on a conventional center-card-over-photo pattern; lacks an unexpected compositional move (asymmetry, layered depth, interactive framing) to feel memorable rather than familiar. - Motion: 58 — Gemini supplies a specific timestamped motion moment (20–31s) where the calendar card slides upward into place over the image, a single clear and purposeful reveal. Next tier: Only one simple slide-up transition is evidenced; no secondary choreography, easing nuance, or multi-stage sequencing is described to push this into strong/memorable motion territory. - Content: 60 — The UI card content (calendar, cycle tracking data) is directly relevant to the feature being communicated and integrates legibly atop the photograph, giving the section a clear purpose. Next tier: Content integration is a straightforward overlay card; no interplay between image and data beyond placement (e.g., contextual annotations, motion tied to content changes) that would mark it as exceptional. - Originality: 58 — The sliding card-over-lifestyle-photo pattern is a familiar device used across many product marketing sites; the cycle-health UI content is specific but the structural idea itself is common. Next tier: No distinctive structural or interaction twist beyond the now-common 'UI card over photo, slides on scroll' pattern seen broadly in tech product marketing. - Adaptability: 60 — The structure (heading + full-bleed image + centered floating card with slide-up motion) is clearly separable from its specific skin (photo, blue band, calendar data) and could be reapplied to other feature reveals with different imagery and card content. Next tier: Reliance on a bespoke lifestyle photograph and specific app UI mockup means true structural extraction still requires replacing proprietary visual assets, which is a minor dependency but not a blocker to moderate adaptability. Strengths: - Clear visual hierarchy separating intro text from image-based feature demonstration - Legible, well-contrasted UI card readable against a complex photographic background - Purposeful motion moment (card sliding into view) tied to scroll progression that reinforces narrative pacing Weaknesses: - Pattern of 'floating UI card over lifestyle photo with slide-up reveal' is a widely used device, limiting distinctiveness - Heading typography is static and conventional with no unique scale or weight interplay - Single motion event with no additional choreography or layered reveals described Why it does not reach the next tier: The section executes a clean, competent feature reveal with good contrast and a believable supporting motion moment, but the structural idea—text header, full-bleed photo, centered sliding UI card—is a very common pattern in app/product marketing and doesn't introduce a distinctive compositional, typographic, or motion idea that would make it feel hard to substitute. ## Adaptation guidance - Effort: Medium - Guidance: Retain the header-then-full-bleed-photo-then-sliding-card skeleton and the single upward slide motion timing; swap in new photography and a different UI card design relevant to another feature while preserving the overlay placement and contrast approach. What transfers: - Heading + full-bleed image + centered floating card layout structure - Slide-up reveal motion pattern on scroll - Card-over-photo contrast approach for legibility Dependencies: - Specific lifestyle photograph of wrist/device - Proprietary cycle-health UI card content and data - Google Sans typography and blue/pink/teal palette tokens ## Living vocabulary - No reusable vocabulary candidates were supported by this section. Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented. ## Provenance and limitations - Section boundaries and naming: Gemini Pro visual observation - Motion observations: Gemini Pro direct-video analysis - Quality judgment: Claude - Exact design facts: browser/CSS extraction at website scope - Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%) - Motion scored from a single Gemini-described event; no finer detail on easing or secondary animation provided - Exact font files, precise color values, and shadow/radius specifics not independently verifiable from crop alone - Crop spans a long vertical page region, so framing of transition entry/exit beyond the described window is unknown ## 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: features - Structure: full-bleed - Layout: Text header above a full-width image container featuring an animated floating UI overlay. - Styles: photographic, minimal - Components: heading, background-image, ui-card - Purpose: A full-width lifestyle image where a prominent UI card slides up into view on scroll. - Visual signature: Close-up of a person's torso and arm wearing a blue band, with a calendar UI card hovering in the foreground. - Place on the page: 5 of 10, after Feature collection (`healthapp-google:C07`), before Other (`healthapp-google:C09`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays. ### 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": "Google Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-8: computed CSS at 1440×1000; AI role: 80px Google Sans, used for the largest introductory hero text.", "sampleId": "font-8", "confidence": 1, "lineHeight": "96px", "letterSpacing": "-0.8px" }, { "role": "heading", "size": "64px", "family": "Google Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-2: computed CSS at 1440×1000; AI role: 64px Google Sans, used for major section headings like 'Bring all your data into one place'.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "73.6px", "letterSpacing": "-0.5px" }, { "role": "body", "size": "20px", "family": "Google Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-11: computed CSS at 1440×1000; AI role: 20px Google Sans, used for standard body copy, such as the description of privacy controls.", "sampleId": "font-11", "confidence": 0.9, "lineHeight": "26px", "letterSpacing": "-0.2px" }, { "role": "mono", "size": "12px", "family": "Google Sans", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-9: computed CSS at 1440×1000; AI role: 12px uppercase Google Sans used in the footer. Lacks a true monospace font, but serves the utility/meta text role.", "sampleId": "font-9", "confidence": 0.7, "lineHeight": "14.4px", "letterSpacing": "normal" } ] } ``` ### Exact color evidence The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate. ```json { "sectionUsage": [], "functionalPalette": [ { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively for floating UI cards, mobile phone mockups, and pill backgrounds.", "sampleId": "color-5", "confidence": 0.95 }, { "hex": "#4285F4", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-18: computed rgb(66, 133, 244); AI role: Google Blue (#4285F4) used for primary Call to Action buttons like 'Download' and 'Try it now'.", "sampleId": "color-18", "confidence": 0.95 }, { "hex": "#F6F5F1", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(246, 245, 241); AI role: Off-white (#F6F5F1) used as a primary background color for large sections of the page.", "sampleId": "color-4", "confidence": 0.9 }, { "hex": "#1F1F1F", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(31, 31, 31); AI role: Dark grey (#1F1F1F) used for primary body copy and headings against light backgrounds.", "sampleId": "color-2", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear fully rounded (pill). Cards have large radii (likely 16px-24px).", "density": "Low density. High reliance on negative space and large typographic scales to communicate a calm, clear message.", "evidence": "Observation of DOM sizes (fonts up to 80px), heavily rounded corner visuals in crops, and distinct separation of content blocks.", "borderStyle": "Mostly borderless to emphasize floating elements and shadows. Subtle 1px borders used for delineating FAQ items or footer elements.", "buttonStyle": "Solid fill primary buttons in blue. Pill-shaped geometry. White text.", "cornerStyle": "Heavily rounded, pill-shaped corners on buttons and badges. Distinctly rounded, almost squircle-like corners on floating UI cards and mobile phone device mockups.", "contentWidth": "Varies. Hero and specific feature sections are full-bleed (edge-to-edge). Informational sections (like FAQs or privacy) appear constrained to a central column.", "spacingRhythm": "Generous vertical spacing between major sections, often full viewport height for feature reveals. Large internal padding within floating UI cards." } ``` ### 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. **observed sequence** — A UI element (a calendar) slides upwards from the bottom of the section to rest on top of the background image as it comes into full view. (20s–31s; 95% 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: Heading + full-bleed image + centered floating card layout structure; Slide-up reveal motion pattern on scroll; Card-over-photo contrast approach for legibility - Dependencies: Specific lifestyle photograph of wrist/device; Proprietary cycle-health UI card content and data; Google Sans typography and blue/pink/teal palette tokens - Guidance: Retain the header-then-full-bleed-photo-then-sliding-card skeleton and the single upward slide motion timing; swap in new photography and a different UI card design relevant to another feature while preserving the overlay placement and contrast approach. ### 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 “Feature Image with Sliding UI Overlay”. Purpose: A full-width lifestyle image where a prominent UI card slides up into view on scroll. Structure: full-bleed. Source layout label: Text header above a full-width image container featuring an animated floating UI overlay.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Close-up of a person's torso and arm wearing a blue band, with a calendar UI card hovering in the foreground. Components: heading, background-image, ui-card. Style direction: photographic, minimal. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"80px","family":"Google Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: 80px Google Sans, used for the largest introductory hero text.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-0.8px"} {"role":"heading","size":"64px","family":"Google Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 64px Google Sans, used for major section headings like 'Bring all your data into one place'.","sampleId":"font-2","confidence":0.95,"lineHeight":"73.6px","letterSpacing":"-0.5px"} {"role":"body","size":"20px","family":"Google Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-11: computed CSS at 1440×1000; AI role: 20px Google Sans, used for standard body copy, such as the description of privacy controls.","sampleId":"font-11","confidence":0.9,"lineHeight":"26px","letterSpacing":"-0.2px"} {"role":"mono","size":"12px","family":"Google Sans","source":"computed","traits":"uppercase","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: 12px uppercase Google Sans used in the footer. Lacks a true monospace font, but serves the utility/meta text role.","sampleId":"font-9","confidence":0.7,"lineHeight":"14.4px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively for floating UI cards, mobile phone mockups, and pill backgrounds.","sampleId":"color-5","confidence":0.95} {"hex":"#4285F4","name":"primary action","role":"primary-action","source":"computed","evidence":"color-18: computed rgb(66, 133, 244); AI role: Google Blue (#4285F4) used for primary Call to Action buttons like 'Download' and 'Try it now'.","sampleId":"color-18","confidence":0.95} {"hex":"#F6F5F1","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(246, 245, 241); AI role: Off-white (#F6F5F1) used as a primary background color for large sections of the page.","sampleId":"color-4","confidence":0.9} {"hex":"#1F1F1F","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(31, 31, 31); AI role: Dark grey (#1F1F1F) used for primary body copy and headings against light backgrounds.","sampleId":"color-2","confidence":0.9} 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: observed sequence: A UI element (a calendar) slides upwards from the bottom of the section to rest on top of the background image as it comes into full view. (95% confidence) Transfer these principles: Heading + full-bleed image + centered floating card layout structure; Slide-up reveal motion pattern on scroll; Card-over-photo contrast approach for legibility. Dependencies: Specific lifestyle photograph of wrist/device; Proprietary cycle-health UI card content and data; Google Sans typography and blue/pink/teal palette tokens. Adaptation guidance: Retain the header-then-full-bleed-photo-then-sliding-card skeleton and the single upward slide motion timing; swap in new photography and a different UI card design relevant to another feature while preserving the overlay placement and contrast approach. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.