# Phone UI over Video Background Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: e34d5752-c346-4f74-8a19-c95f1ecbc614 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A single centered stack of headline, subcopy, CTA and phone gives the eye one clear path down the section. - The bright phone UI sits on a darkened full-bleed video, so the product screen has strong contrast while the footage stays ambient. - The phone shows real product screens such as a confirmation view and buttons, which makes the feature claim believable. What a screenshot can't show: - The phone screens scroll horizontally from about 13s to 15s as the page scrolls, while the beach video loops quietly behind. - The headline measures 56px at weight 800 with a 56px line height (1:1), the body is 18px on 26px, and the CTA label is 14px at weight 600. Section padding is 24px top and bottom, with 24px gaps. Borrow: Put one bright, believable product screen over a dimmed ambient video, and let the screen's own content carry the story. Leave alone: Don't copy Kuda's purple and cream palette, its Modena and Suisse typefaces (use a heavy geometric sans and a neutral grotesque instead), or the beach footage. ## Classification - Type: feature-card - Layout: Centered text and phone mockup overlaid on a full-width background video. - Styles: photographic - Confidence: 95% ## Purpose and structure A large feature highlight displaying a phone mockup floating over a full-bleed video background. Visual signature: A bright phone interface mockup hovering centrally over a darkened beach video background. ## Components - full bleed video background - centered headline - phone UI mockup - interactive carousel indicator ## Typography - Display: modena — 80px 800 - Heading: modena — 56px 800 - Body: suisse — 16px 400 ## Functional palette - Canvas: canvas #FCF7F2 - Primary-Action: primary action #40196D - Text: text #1B161D - Muted-Text: muted text #827D76 - Surface: surface #EED3F8 ## Motion evidence - 13.0–15.0s — A stylized phone interface scrolls horizontally, displaying different screens or features as the user scrolls down. (85% confidence) ## Section quality Overall: 58.55/100 (Competent) Scored coverage: 100% - Typography: 62 — Oversized uppercase display headline (SEND) establishes clear hierarchy against body copy, consistent with the documented type scale (80px/56px display vs 16px body). Clean, legible, but a fairly standard big-word-over-media treatment with no distinctive type craft beyond scale contrast. Next tier: Needs more typographic personality or interplay (e.g. kinetic type, varied weight pairing) to move beyond a conventional bold headline on video. - Composition: 65 — Centered phone mockup floating over full-bleed video with clear vertical stacking (headline, subcopy, CTA, phone, carousel dots) creates a calm, legible focal hierarchy. Negative space and the dark overlay give good contrast and breathing room between the UI card and background motion. Next tier: Composition is a very familiar template (headline + CTA + floating phone over lifestyle video); needs an unexpected spatial choice or layering to feel more distinct. - Motion: 58 — Gemini confirms a timestamped horizontal scroll of phone screens (13s-15s) plus the ambient looping beach video, giving the section a subtle layered motion feel tied to scroll interaction. Next tier: Motion is a single functional carousel transition plus background loop; lacks bespoke choreography or transition polish that would elevate it further. - Content: 60 — Phone mockup content (confirmation screen, CTA buttons) is tightly integrated with the brand message and demonstrates the actual product output, giving credibility to the feature claim. Next tier: Content integration is functional but generic app-screenshot-in-device-frame; no unique framing or storytelling device ties content to the background scene. - Originality: 48 — Phone-mockup-over-lifestyle-video is an extremely common fintech/app marketing pattern; nothing in the composition, carousel indicator, or copy treatment departs from this well-worn convention. Next tier: Requires a distinguishing visual idea beyond the standard device-mockup-over-background-video formula. - Adaptability: 55 — Structure separates cleanly into background media, headline/CTA stack, phone mockup card, and carousel nav per the DOM measurements, making skin-vs-structure separation feasible. Next tier: Dependency on a specific phone-frame asset and matching video content ties the visual identity closely to this brand's media library. Strengths: - Clear visual hierarchy with centered headline, CTA, and phone mockup stacked over video - Documented carousel/pagination (1,2,3) gives functional context for multi-feature storytelling - Dark video overlay ensures legibility of white text and purple accents Weaknesses: - Highly conventional phone-mockup-over-background-video layout common across fintech marketing sites - Limited typographic or layout innovation beyond scale contrast - Motion is restricted to a single scroll-triggered carousel transition Why it does not reach the next tier: The section executes a well-worn feature-card formula cleanly but introduces no distinguishing structural or visual idea; every element (headline, CTA, phone frame, dot nav) is interchangeable with countless similar fintech sections. ## Adaptation guidance - Effort: Medium - Guidance: Reusable as a generic feature-showcase template: swap background video/photo and phone screen content, keep headline-CTA-mockup-dots structure and carousel motion behavior. What transfers: - Centered headline/CTA/mockup vertical stack over full-bleed background media - Horizontal scroll-through phone screen carousel pattern - Dot-based pagination/indicator component Dependencies: - Specific phone UI screenshots/video asset - Brand-specific lifestyle video footage - Exact phone frame radius and dimensions (13px radius, 200x430 card) ## Living vocabulary - No reusable vocabulary candidates were supported by this section. Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented. ## Provenance and limitations - Section boundaries and naming: Gemini Pro visual observation - Motion observations: Gemini Pro direct-video analysis - Quality judgment: Claude - Exact design facts: browser/CSS extraction at website scope - Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%) - No visible card hover/transition timing data beyond the single Gemini-reported scroll moment - Animation details (easing, duration) for the carousel not available in deterministic data - Cannot verify exact font-rendering of headline in this crop beyond general type 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: features - Source type: feature-card - Structure: centered single-column - Layout: Centered text and phone mockup overlaid on a full-width background video. - Styles: photographic - Components: full bleed video background, centered headline, phone UI mockup, interactive carousel indicator - Purpose: A large feature highlight displaying a phone mockup floating over a full-bleed video background. - Visual signature: A bright phone interface mockup hovering centrally over a darkened beach video background. - Place on the page: 5 of 11, after Stats (`kuda-com:C04_stats`), before Feature collection (`kuda-com:C06_feature_grid`) ### Crop and composition - Crop: 1440×948px; aspect ratio 1.519:1 - Page bounds: 3348–4296px of 11487px - 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": [ { "role": "section heading", "family": "modena", "stack": "modena, sans-serif", "size": "56px", "weight": "800", "lineHeight": "56px", "letterSpacing": "normal", "sample": "More from your money, More for your life", "element": "h2", "occurrences": 4, "sourceId": "font-2" }, { "role": "body/supporting copy", "family": "suisse", "stack": "suisse, sans-serif", "size": "18px", "weight": "400", "lineHeight": "26.1px", "letterSpacing": "normal", "sample": "Send money fast, spend with confidence, and save automatically with Kuda.", "element": "p", "occurrences": 18, "sourceId": "font-7" }, { "role": "UI/supporting text", "family": "suisse", "stack": "suisse, sans-serif", "size": "14px", "weight": "600", "lineHeight": "19.6px", "letterSpacing": "normal", "sample": "Join Kuda", "element": "a", "occurrences": 41, "sourceId": "font-12" } ], "siteRoles": [ { "role": "display", "size": "80px", "family": "modena", "source": "computed", "traits": "uppercase", "weight": "800", "evidence": "font-4: computed CSS at 1440×1000; AI role: The largest font at 80px, weight 800, uppercase, used for high-impact numbers.", "sampleId": "font-4", "confidence": 1, "lineHeight": "76px", "letterSpacing": "normal" }, { "role": "heading", "size": "56px", "family": "modena", "source": "computed", "traits": "uppercase", "weight": "800", "evidence": "font-2: computed CSS at 1440×1000; AI role: 56px, weight 800, uppercase, used for primary section titles.", "sampleId": "font-2", "confidence": 1, "lineHeight": "56px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "suisse", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 16px Suisse sans-serif used for standard informational text and descriptions.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "23.2px", "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": "#FCF7F2", "cssValue": "rgb(252, 247, 242)", "alpha": 1, "appliedAs": [ "background", "text" ], "occurrences": 10, "sourceId": "color-2" }, { "value": "#000000", "cssValue": "oklab(0 0 0 / 0.2)", "alpha": 0.2, "appliedAs": [ "::after-background" ], "occurrences": 1, "sourceId": "color-4" }, { "value": "#FFF2F2", "cssValue": "oklab(0.978604 0.0032815 0.00792193 / 0.08)", "alpha": 0.0784313725490196, "appliedAs": [ "control-background" ], "occurrences": 3, "sourceId": "color-14" }, { "value": "#FFFFFF", "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.6)", "alpha": 0.6, "appliedAs": [ "border" ], "occurrences": 4, "sourceId": "color-17" }, { "value": "#CC77E9", "cssValue": "rgb(204, 119, 233)", "alpha": 1, "appliedAs": [ "svg-stroke" ], "occurrences": 1, "sourceId": "color-18" } ], "functionalPalette": [ { "hex": "#FCF7F2", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(252, 247, 242); AI role: The dominant off-white background color (#FCF7F2) used across the page body.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#40196D", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-1: computed rgb(64, 25, 109); AI role: Deep purple (#40196D) used for the primary CTA buttons and brand emphasis.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#1B161D", "name": "text", "role": "text", "source": "computed", "evidence": "color-6: computed rgb(27, 22, 29); AI role: Dark color (#1B161D) used for primary body text and most headings on light backgrounds.", "sampleId": "color-6", "confidence": 0.9 }, { "hex": "#827D76", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-11: computed rgb(130, 125, 118); AI role: Grey (#827D76) used for secondary text elements like 'Fully licensed by the CBN'.", "sampleId": "color-11", "confidence": 0.8 }, { "hex": "#EED3F8", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(238, 211, 248); AI role: Lighter purple (#EED3F8) used as a background for the footer and secondary buttons.", "sampleId": "color-3", "confidence": 0.7 } ] } ``` ### Design tokens ```json { "radius": "Small border-radius (approx 4-8px) on primary buttons; medium to large border-radius on floating UI cards and feature blocks.", "density": "Low density, breathable layout utilizing large typographic scales and ample whitespace.", "evidence": "Visual inspection reveals an off-white canvas with dark purple functional accents. Structural containers use large corner radii, while primary typography is oversized and highly legible.", "borderStyle": "Mostly borderless, relying heavily on color contrast to define shapes and containers.", "buttonStyle": "Solid filled backgrounds with contrasting text; primary buttons use the brand purple.", "cornerStyle": "Mixed: mostly rounded corners on interactive elements and cards, with hard edges on full-bleed background containers.", "contentWidth": "Centered constrained text content mixed with full-width bleeding backgrounds and media.", "spacingRhythm": "Generous vertical spacing between major sections, with tighter grouping inside feature cards." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×948px; block; padding {"top":"24px","left":"0px","right":"0px","bottom":"24px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 24px. - Representative content widths: 1392, 967, 484px. - Layout containers: 1; cards/surfaces: 1; media elements: 5; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 3348, "bottom": 4296, "pageHeight": 11487 } }, "container": { "size": "1440×948px", "position": "x 0px, y 3348px", "display": "block", "positionMode": "static", "padding": { "top": "24px", "left": "0px", "right": "0px", "bottom": "24px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px solid rgb(27, 22, 29)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [ 24 ], "representativeContentWidthsPx": [ 1392, 967, 484 ] }, "columns": [ { "element": "nav · 1 2 3", "size": "1392×40px", "position": "x 24px, y 4149px", "display": "flex", "template": "not captured", "direction": "row", "gap": "24px" } ] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "video · video", "size": "200×430px", "position": "x 620px, y 3677px", "padding": [ "0px", "0px", "0px", "0px" ], "radius": "13px", "border": "0px solid rgb(27, 22, 29)", "shadow": "none", "background": "rgba(0, 0, 0, 0)" } ], "surfaces": { "radii": [ "4px", "13px", "100%" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · attachment-full size-full entered lazyloaded", "size": "1392×900px", "position": "x 24px, y 3372px", "aspectRatio": 1.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI03079-1536x1024.webp" }, { "element": "video · video", "size": "200×430px", "position": "x 620px, y 3677px", "aspectRatio": 0.5, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "13px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/SEND-corrected.mp4" }, { "element": "svg · svg", "size": "40×40px", "position": "x 636px, y 4149px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "40×40px", "position": "x 700px, y 4149px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "40×40px", "position": "x 764px, y 4149px", "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-498", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 3348, "width": 1440, "height": 948 }, "role": null, "label": "