# Dark Premium Benefit Cards Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: c9404b4d-3311-46af-9783-10b3814b3b23 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three equal tall cards under a centered header give a calm, symmetrical grid that reads in seconds. - Each card pairs one benefit statement with a mini illustration that demonstrates it, such as a notification stack, a coin gauge or a voucher stack, so no generic icons are needed. - Deep purple cards with white text stand out sharply against the warm off-white canvas, and the 56px extra-bold headline sits clearly above the smaller card copy. What a screenshot can't show: - The three cards slide up from the bottom into view together over about one second, at roughly 17–18s in the recording. - The headline measures 56px at weight 800 with a tight 56px line height, and card text is 28px bold at 33.6px line height. Section padding is 50px top and bottom, with a 10px gap. Borrow: Give each card in a feature grid its own small illustration that shows the benefit in action, then reveal the cards together with one simple slide-up. Leave alone: Don't copy the purple-and-cream palette, the Modena typeface (use a bold geometric sans instead) or the cashback, coin and voucher illustrations. ## Classification - Type: feature-grid - Layout: Centered section header above a three-column grid of tall cards. - Styles: bold, corporate - Confidence: 95% ## Purpose and structure A grid of three dark purple feature cards displaying premium benefits with illustrative UI snippets. Visual signature: Three tall, dark purple cards with white text and abstract UI graphics sitting on a light background. ## Components - section headline - three feature cards - UI element illustrations - card text descriptions ## 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 - 17.0–18.0s — Three dark purple cards displaying app features slide up into view from the bottom. (92% confidence) ## Section quality Overall: 56.25/100 (Competent) Scored coverage: 100% - Typography: 58 — Bold uppercase 56-80px display headline contrasts cleanly with 16px body/card text, giving clear hierarchy, but the card headline sizing and weight are generic bold sans treatment without distinctive type craft or scale pairing beyond standard practice. Next tier: Needs more deliberate type-scale relationships or custom treatment within the cards (e.g. varied weights, numerals, kerning) rather than uniform bold centered text to earn a higher score. - Composition: 62 — Clean three-column symmetric grid with a centered header, consistent card proportions, and each card showing a distinct illustrative payload (notification stack, gauge/counter, voucher stack) that visually differentiates the three benefits while maintaining grid discipline. Next tier: Illustration placement is center-bottom and fairly conventional within each dark card; nothing breaks the grid or creates a unique spatial idea beyond the standard feature-card template to push into strong/memorable territory. - Motion: 52 — Gemini confirms a single timestamped motion moment: three cards sliding up into view together at 17.0–18.0s, a simple, common reveal. Next tier: Only one uniform group entrance motion is evidenced; no staggered timing, hover/interaction micro-motion, or motion tied to the UI illustrations (e.g. gauge animating) is confirmed, which keeps it at a basic competent level. - Content: 60 — Each card pairs a specific benefit statement with a bespoke mini-illustration (cashback notification cards, circular coin gauge, discount voucher stack) that visually demonstrates the feature rather than using generic icons. Next tier: The illustrations are static mockup-style screenshots dropped into a template rather than integrated custom graphics with consistent illustration language across the three cards, limiting polish. - Originality: 48 — Dark purple benefit cards with white centered text and floating UI snippets is a widely used fintech-marketing pattern; the specific mini-illustrations add some flavor but the overall card/grid structure is highly familiar. Next tier: Would need a distinctive structural or interaction idea—unconventional grid breakup, unique card shape, or illustration style—that isn't interchangeable with countless other SaaS/fintech feature grids. - Adaptability: 55 — The three-column card structure, centered header, and color/illustration slots are clearly separable: swap copy, swap illustration images, and the dark purple skin could be restyled without altering the layout grid. Next tier: Dependency on three bespoke illustration assets (PNG mockups of app UI) ties content tightly to the brand's actual product screens, requiring custom art replacement work to adapt cleanly. Strengths: - Clear three-column hierarchy with bold centered headline framing the grid - Each card uses a distinct illustrative element tailored to its specific benefit - Consistent dark purple surface creates strong figure-ground contrast against light page background Weaknesses: - Pattern (dark cards + white text + floating UI snippet) is a common fintech template - Only one simple group slide-up motion is evidenced, no micro-interactions confirmed - Illustrations read as static product screenshots rather than a unified illustration system - Card headline typography is generic bold-centered treatment with no distinctive type craft Why it does not reach the next tier: The section executes a well-worn feature-card formula competently with good hierarchy and tailored illustrations, but lacks a distinctive structural idea, richer motion choreography, or type/illustration craft that would make it feel hard to substitute or memorable beyond its category norms. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the grid/header/card skeleton and swap in new copy and illustrations; replace the purple skin with any brand color, but expect to commission new illustration assets since the current ones are tightly coupled to Kuda's actual product UI. What transfers: - Three-column card grid with centered header pattern - Dark surface card against light page background contrast approach - Pairing benefit copy with an illustrative payload per card Dependencies: - Three custom illustration/mockup assets specific to the product features shown - Brand-specific purple color token for card surfaces - Slide-up entrance animation timing tied to scroll trigger ## 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 only from one Gemini-confirmed timestamp; no hover or secondary motion evidence provided - No deterministic animation parameters (easing, duration, stagger) were supplied for the slide-up reveal - Illustration details are described qualitatively from the screenshot, not confirmed via DOM animation data ## 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 section header above a three-column grid of tall cards. - Styles: bold, corporate - Components: section headline, three feature cards, UI element illustrations, card text descriptions - Purpose: A grid of three dark purple feature cards displaying premium benefits with illustrative UI snippets. - Visual signature: Three tall, dark purple cards with white text and abstract UI graphics sitting on a light background. - Place on the page: 6 of 11, after Feature collection (`kuda-com:C05_feature_card`), before Feature collection (`kuda-com:C07_feature_card`) ### Crop and composition - Crop: 1440×1043px; aspect ratio 1.381:1 - Page bounds: 4296–5339px 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": "card/subheading", "family": "modena", "stack": "modena, sans-serif", "size": "28px", "weight": "700", "lineHeight": "33.6px", "letterSpacing": "normal", "sample": "Earn cashback on bills, and access exclusive rewards", "element": "div", "occurrences": 6, "sourceId": "font-10" } ], "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": [], "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×1043px; block; padding {"top":"50px","left":"0px","right":"0px","bottom":"50px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 10px. - Representative content widths: 636, 329px. - Layout containers: 0; cards/surfaces: 0; media elements: 5; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 4296, "bottom": 5339, "pageHeight": 11487 } }, "container": { "size": "1440×1043px", "position": "x 0px, y 4296px", "display": "block", "positionMode": "static", "padding": { "top": "50px", "left": "0px", "right": "0px", "bottom": "50px" }, "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": "hidden" }, "spacing": { "observedGapsPx": [ 10 ], "representativeContentWidthsPx": [ 636, 329 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · attachment-full size-full entered lazyloaded", "size": "329×272px", "position": "x 86px, y 4909px", "aspectRatio": 1.2, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/09/CASHBACK-TILES-UPDATED.png" }, { "element": "img · attachment-full size-full entered lazyloaded", "size": "329×264px", "position": "x 1025px, y 4913px", "aspectRatio": 1.2, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/Discounts-Premium.png" }, { "element": "picture ·