# Service Integration Cards Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: 133a9b5a-51e4-4d66-8a1c-31800c350186 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three equal off-white cards sit under one bold uppercase headline, and each card mocks a different interface (icon grid, selectable list, floating logo cluster), so the grid stays varied but tidy. - Real brand logos inside believable mini-UIs make the benefit clear without extra copy, and their colour pops against the quiet cream canvas. - Consistent 24px card padding, a small 6px radius and generous 40px section padding keep the dense icon content calm and easy to scan. What a screenshot can't show: - Icons fade in together as the section scrolls fully into view, around 2 seconds, with no stagger or distinctive easing noted. - The card headline measures 32px at weight 800 with 32px line height, while body copy is 16px; cards are about 453px wide with 10px and 40px gaps. Borrow: Give each card in a uniform grid its own small interface mockup, so the shell repeats but the content shows a different use each time. Leave alone: Don't copy the Studio Sandcastle cream and purple palette, the modena display face (use a heavy geometric sans instead), or its specific telecom and streaming logo set. ## Classification - Type: feature-grid - Layout: Section title and link above a three-column grid of light cards. - Styles: minimal - Confidence: 95% ## Purpose and structure A grid of three light-colored cards detailing service integrations like bill payments, featuring scattered brand icons. Visual signature: Three off-white cards containing scattered, colorful service provider icons and list UI elements. ## Components - section headline - three feature cards - service provider logos - UI list elements ## 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 - 23.0–25.0s — Icons representing services like Airtime, Electricity, and Gift Cards fade in as the section becomes fully visible. (90% confidence) ## Section quality Overall: 58.75/100 (Competent) Scored coverage: 100% - Typography: 58 — Oversized bold uppercase headline (80/56px modena) sets strong contrast against small 16px body copy, consistent with the page's type scale. Card titles and labels are legible with clear hierarchy, but the treatment within the section itself is fairly conventional feature-card typography with no distinctive pairing beyond the global display style. Next tier: Needs a more deliberate typographic idea specific to this grid (e.g. varied weight/scale within cards) rather than reapplying the site's generic heading/body pair. - Composition: 64 — Clean three-column grid with consistent card padding (24px), shared radius (6px), and a believable internal logic: each card mocks a distinct UI pattern (icon grid, list with selection state, floating logo cluster) rather than repeating the same layout three times. The varied interior treatments against a uniform card shell show real compositional care. Next tier: The three interior patterns, while varied, are still fairly standard dashboard-preview clichés; nothing in the arrangement surprises or creates a unique visual rhythm beyond tidy alignment. - Motion: 52 — Only evidence is icons fading in as the section enters view (23–25s), a common scroll-reveal with no distinguishing timing, stagger, or easing detail supplied. Next tier: No evidence of choreographed stagger, hover states, or interaction-driven motion beyond a basic fade-in to justify a higher score. - Content: 60 — Real brand logos (Airtel, MTN, Spotify, Apple, PlayStation, etc.) integrated into plausible mini-interfaces (list with checkbox selection, icon grid) give the cards authentic product context rather than placeholder content. Next tier: Content is informative but purely illustrative/static; it doesn't demonstrate deeper product storytelling or interactivity beyond a visual mockup. - Originality: 55 — The three-card feature grid showing bill-pay categories is a familiar fintech marketing pattern; the varied internal mockups (phone list, selectable list, floating logos) add some flavor but the overall idea is not distinctive to this product. Next tier: Needs a unique visual or interactive device unlikely to appear in a generic competitor site; currently it closely follows a standard SaaS/fintech feature-card template. - Adaptability: 62 — Structure is cleanly separable: fixed 453px-wide cards in a 3-col flex row, consistent 6px radius, 24px padding, and distinct content blocks (icon/list/logo) that map easily to a reusable card component with swappable children. Next tier: Dependency on multiple bespoke image assets (phone icons, gift card PNGs) at fixed aspect ratios limits plug-and-play reuse without replacing those assets. Strengths: - Three internally varied card layouts (icon grid, selectable list, logo cluster) avoid visual monotony despite shared card shell - Real recognizable brand icons lend concrete, believable content to an otherwise generic feature section - Consistent spacing, padding, and radius tokens across all three cards show disciplined systemization Weaknesses: - Pattern itself (three-card bill-pay feature grid) is a common fintech marketing trope with no distinguishing visual hook - Motion evidence limited to a basic fade-in with no distinguishing choreography - Reliance on bespoke image assets reduces pure CSS/token reusability of the card internals Why it does not reach the next tier: The section is well-executed and tidy but relies on a familiar three-card feature-grid convention and a generic fade-in; nothing here is hard to substitute or memorable enough to clear the 'strong/memorable' threshold. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the card shell (flex column, 453px width, 6px radius, 24px padding) and the concept of distinct interior UI mockups per card; swap in the client's own brand icons and category content. What transfers: - Three-column card grid structure with consistent padding and radius - Pattern of varied interior mockups per card (icon grid / list / logo cluster) - Global type scale pairing oversized headline with small body copy Dependencies: - Brand/service logo image assets (Airtel, MTN, Spotify, etc.) - Specific product mockup images (airtime, electricity, gift card PNGs) - Purple accent color used for selected list state ## 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 fade-in timestamp; no data on hover or interaction states - No visible evidence of card click/expand behavior despite chevron affordance - Mobile/responsive behavior not observed in this desktop crop ## 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: grid - Layout: Section title and link above a three-column grid of light cards. - Styles: minimal - Components: section headline, three feature cards, service provider logos, UI list elements - Purpose: A grid of three light-colored cards detailing service integrations like bill payments, featuring scattered brand icons. - Visual signature: Three off-white cards containing scattered, colorful service provider icons and list UI elements. - Place on the page: 8 of 11, after Feature collection (`kuda-com:C07_feature_card`), before Comparison (`kuda-com:C09_comparison`) ### Crop and composition - Crop: 1440×834px; aspect ratio 1.727:1 - Page bounds: 7593–8427px of 11487px - 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": "section heading", "family": "modena", "stack": "modena, sans-serif", "size": "32px", "weight": "800", "lineHeight": "32px", "letterSpacing": "normal", "sample": "Pay bills with less stress", "element": "h2", "occurrences": 2, "sourceId": "font-3" } ], "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": "#F5EFE6", "cssValue": "rgb(245, 239, 230)", "alpha": 1, "appliedAs": [ "background", "control-background" ], "occurrences": 6, "sourceId": "color-7" }, { "value": "#827D76", "cssValue": "rgb(130, 125, 118)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 6, "sourceId": "color-11" }, { "value": "#EDE7DD", "cssValue": "oklab(0.930708 0.00348729 0.0150211 / 0.5)", "alpha": 0.5019607843137255, "appliedAs": [ "control-background", "background" ], "occurrences": 4, "sourceId": "color-15" } ], "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×834px; block; padding {"top":"40px","left":"0px","right":"0px","bottom":"40px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 10, 40px. - Representative content widths: 495, 453, 324, 277px. - Layout containers: 3; cards/surfaces: 3; media elements: 11; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 7593, "bottom": 8427, "pageHeight": 11487 } }, "container": { "size": "1440×834px", "position": "x 0px, y 7593px", "display": "block", "positionMode": "static", "padding": { "top": "40px", "left": "0px", "right": "0px", "bottom": "40px" }, "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": [ 10, 40 ], "representativeContentWidthsPx": [ 495, 453, 324, 277 ] }, "columns": [ { "element": "a ·