# Large Stat with Floating Portraits Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: ce5a95bc-9a46-4b88-afb4-7394b3b04608 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - One oversized 80px, 800-weight uppercase statistic sits alone in a centered block, so it is the obvious focal point with a smaller 24px 'Join over' line above it. - Six 230x230 customer photos are scattered off-grid, some bleeding past the viewport edge, which gives the whitespace energy and makes the claim feel human. - Warm cream canvas with a deep purple number and quiet trust badges underneath keeps the section calm and credible. What a screenshot can't show: - On scroll, the images float in and reveal around the statistic (about 9–13s in the recording); it is a simple reveal, and no browser animation data was captured. - The display line height is tight at 76px for 80px type, with normal letter spacing, and the section has 80px top and bottom padding. Borrow: Surround one big number with human photos placed off-grid, so the proof and the claim work together. Leave alone: Don't copy the cream and purple palette, the Modena typeface (use a bold geometric sans instead), or the CBN and NDIC badges. ## Classification - Type: stats - Layout: Centered text block with absolute-positioned images scattered around the whitespace. - Styles: minimal, photographic - Confidence: 95% ## Purpose and structure A large central statistic surrounded by scattered, floating portrait photos of users. Visual signature: A prominent purple statistic in the center of ample whitespace, populated by floating rectangular lifestyle portraits. ## Components - large statistic text - floating portrait photos - trust badges ## 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 - 9.0–13.0s — As the user scrolls, a grid of images floats and reveals itself around the '8 MILLION CUSTOMERS' section. (90% confidence) ## Section quality Overall: 61.60/100 (Good) Scored coverage: 100% - Typography: 62 — Oversized 80px/800-weight uppercase display statistic against a 16px regular byline creates clear hierarchy; the 'Join over' line uses a smaller weight to subordinate itself to the number. Pairing is competent but the scale jump and typographic treatment is a common large-stat pattern, not a distinctive type system. Next tier: No unique type craft beyond scale contrast; letter-spacing, color, and baseline relationships are standard. - Composition: 66 — Six photographic squares are scattered asymmetrically around a centered text block, with deliberate off-grid placement (some bleeding past the viewport edge) that creates energetic negative space and avoids a predictable grid-of-cards feel. Low density and generous whitespace support the central statistic as the clear focal point. Next tier: Placement is still essentially six same-size, same-shape tiles on a plain field; no variation in image scale, overlap, or depth that would elevate it into a truly sculptural or dynamic arrangement. - Motion: 58 — Gemini reports a single specific timestamped moment (9–13s) of images floating/revealing as the user scrolls, which is a real but simple reveal-on-scroll behavior rather than a choreographed sequence. Next tier: Only one coarse motion beat is documented; no detail on stagger, easing, or individual image choreography that would indicate more sophisticated motion design. - Content: 60 — Diverse, authentic-feeling lifestyle photography of real customers directly reinforces the '8 million customers' claim, and trust badges (CBN, NDIC) are tucked unobtrusively below, integrating credibility signals without clutter. Next tier: Images are generic lifestyle stock-style shots with no captions, names, or specific proof points tying each photo to the claim, limiting narrative depth. - Originality: 58 — Floating customer-photo collage around a big stat number is a recognizable device used across many fintech/consumer sites; the scattered off-grid placement adds some flavor but the core idea is not a rare construct. Next tier: Lacks a distinctive interaction, framing device, or compositional twist that would make this memorable beyond 'stat plus photo scatter.' - Adaptability: 64 — Structure (central text, independently positioned image nodes with fixed size, trust badge row) is clearly decomposable: text content, image set, and badge icons are swappable without altering the layout skeleton, as shown by consistent 230x230 image dimensions and absolute positioning data. Next tier: Reliance on specific absolute pixel coordinates per image means re-flowing to different numbers of images or aspect ratios would require manual repositioning rather than a systematized grid. Strengths: - Clear singular focal point (the large purple statistic) anchored by generous whitespace - Asymmetric, off-grid placement of photo tiles avoids a rigid grid feel and keeps the eye moving - Trust badges are integrated subtly beneath the stat without competing for attention - Diverse, warm lifestyle photography reinforces the customer-count claim Weaknesses: - Floating photo-collage-around-a-stat is a common pattern seen across many sites - Only one coarse scroll-reveal motion beat is documented, no finer choreography evidence - Images are generic stock-style lifestyle shots with no individual captions or proof detail - Fixed absolute-pixel image positions limit systematic scalability to different image counts Why it does not reach the next tier: The section executes a well-known 'big stat plus scattered photos' convention competently and with pleasant whitespace, but lacks a distinctive interaction, layout twist, or typographic craft that would make it feel hard to substitute; motion evidence is too thin to confirm a sophisticated reveal sequence. ## Adaptation guidance - Effort: Medium - Guidance: Rebuild as a relative/percentage-positioned scatter system so image count and viewport size can vary, keep the centered stat as fixed anchor, and recreate the scroll reveal as a generic staggered fade/translate rather than copying exact coordinates. What transfers: - Centered oversized statistic with scattered photo tiles around it - Trust badge row placed beneath the stat - Low-density whitespace-driven layout Dependencies: - Fixed absolute pixel coordinates per image tile - Specific 230x230px square crop photography set - Exact scroll-triggered reveal timing/easing ## 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 coarse timestamped description, not frame-level detail - No visible evidence of hover or interaction states for the photo tiles - Exact animation easing, stagger timing, and transform parameters are not provided ## 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: stats - Source type: stats - Structure: centered single-column - Layout: Centered text block with absolute-positioned images scattered around the whitespace. - Styles: minimal, photographic - Components: large statistic text, floating portrait photos, trust badges - Purpose: A large central statistic surrounded by scattered, floating portrait photos of users. - Visual signature: A prominent purple statistic in the center of ample whitespace, populated by floating rectangular lifestyle portraits. - Place on the page: 4 of 11, after Logo strip (`kuda-com:C03_logo_marquee`), before Feature collection (`kuda-com:C05_feature_card`) ### Crop and composition - Crop: 1440×1760px; aspect ratio 0.818:1 - Page bounds: 1588–3348px 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": "80px", "weight": "800", "lineHeight": "76px", "letterSpacing": "normal", "sample": "8 million customers", "element": "h2", "occurrences": 1, "sourceId": "font-4" }, { "role": "card/subheading", "family": "modena", "stack": "modena, sans-serif", "size": "24px", "weight": "700", "lineHeight": "31.2px", "letterSpacing": "normal", "sample": "Join over", "element": "div", "occurrences": 1, "sourceId": "font-11" } ], "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": "#40196D", "cssValue": "rgb(64, 25, 109)", "alpha": 1, "appliedAs": [ "control-background", "background", "text" ], "occurrences": 10, "sourceId": "color-1" }, { "value": "#827D76", "cssValue": "rgb(130, 125, 118)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 6, "sourceId": "color-11" } ], "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×1760px; block; padding {"top":"80px","left":"0px","right":"0px","bottom":"80px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Representative content widths: 756, 378px. - Layout containers: 0; cards/surfaces: 0; media elements: 8; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 1588, "bottom": 3348, "pageHeight": 11487 } }, "container": { "size": "1440×1760px", "position": "x 0px, y 1588px", "display": "block", "positionMode": "static", "padding": { "top": "80px", "left": "0px", "right": "0px", "bottom": "80px" }, "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": "clip" }, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [ 756, 378 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · attachment-full size-full entered lazyloaded", "size": "230×230px", "position": "x 288px, y 1698px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI00117-e1783981569415-1536x1463.webp" }, { "element": "img · attachment-full size-full entered lazyloaded", "size": "230×230px", "position": "x 1227px, y 1858px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI04700-e1783981668293.webp" }, { "element": "img · attachment-full size-full entered lazyloaded", "size": "230×230px", "position": "x 994px, y 2314px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI05182-e1783981687542-1448x1536.webp" }, { "element": "img · attachment-full size-full entered lazyloaded", "size": "230×230px", "position": "x -35px, y 2485px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI00923-e1783981622383-1536x1393.webp" }, { "element": "img · attachment-full size-full entered lazyloaded", "size": "230×230px", "position": "x 1138px, y 2824px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI05994-e1783981709651-1536x1347.webp" }, { "element": "img · attachment-full size-full entered lazyloaded", "size": "230×230px", "position": "x 360px, y 2969px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/NSI02282-e1783981645397-1536x1453.webp" }, { "element": "img · entered lazyloaded", "size": "50×17px", "position": "x 863px, y 2273px", "aspectRatio": 2.9, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/themes/kuda/img/global/NDIC.svg" }, { "element": "img · entered lazyloaded", "size": "16×20px", "position": "x 701px, y 2269px", "aspectRatio": 0.8, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/themes/kuda/img/global/CBN.svg" } ] ``` #### 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-464", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 1588, "width": 1440, "height": 1760 }, "role": null, "label": "Join over 8 million customers Fully licensed by the CBN