# Multi-column Footer with Giant Wordmark Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: 1f41eb27-4bf1-47be-a464-f0de8148ea91 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A four-column link grid with muted small-caps labels above bold dark links gives a clear, scannable hierarchy and plenty of whitespace. - The full-width condensed wordmark in deep purple (#40196D) on a pale lilac surface (#EED3F8) closes the page with confident scale and a strong brand moment. - Content covers products, legal, offices and social links, so the footer works as a complete reference without feeling crowded. What a screenshot can't show: - The recording showed no motion or animations, so there are no hover or scroll effects to copy. - Legal text is measured at 12px with 16.8px line height in regular weight, and the section has 0px padding, so spacing comes from the inner blocks. Content widths measured 1392px, 336px and 266px. Borrow: End a dense, practical footer with one oversized wordmark so the utility links stay orderly and the brand gets a bold final impression. Leave alone: Don't copy Kuda's purple-on-lilac palette, its cut-out letter counters, or the Suisse typeface; use a free neutral grotesque and your own logotype treatment. ## Classification - Type: footer - Layout: Multi-column link grid positioned above a giant full-width wordmark. - Styles: bold, typographic - Confidence: 95% ## Purpose and structure A large footer section with multiple columns of links, bottomed out by an oversized brand wordmark. Visual signature: A light purple footer block dominated by massive, dark purple typography spelling out the brand name at the bottom. ## Components - link columns - column headers - giant logo wordmark - copyright text ## 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 - No section-specific authored motion was established. ## Section quality Overall: 61.71/100 (Good) Scored coverage: 85% - Typography: 65 — Clear three-tier type hierarchy: muted small-caps category labels, bold dark link text, and a massive condensed display wordmark spanning full width. Letterform contrast (purple fill vs cutout counters) in the wordmark is a deliberate graphic touch, but overall type choices (bold grotesque for links, oversized logotype) are a familiar footer pattern rather than a distinctive system. Next tier: Needs a more unexpected type pairing or treatment within the link grid itself to elevate beyond the common 'giant wordmark footer' trope. - Composition: 66 — Four-column link grid with consistent alignment, generous whitespace, and a clean baseline before the wordmark block creates good order and breathing room. The giant wordmark anchors the bottom with full-bleed scale, giving a confident visual close. However the column spacing/grouping (Personal/Business Banking split) and legal text placement beneath the wordmark feel like a standard template layout without a distinguishing compositional idea. Next tier: Lacks a unique structural move (asymmetry, overlap, unconventional grid) that would push it past a well-executed but conventional footer layout. - Motion: not_assessed — No motion_moments or animation data were supplied for this section; Gemini provided no timestamped visible changes to evaluate. Next tier: Provide timestamped evidence of any hover states, link transitions, or wordmark reveal animation to assess motion. - Content: 58 — Content is comprehensive and well-organized (product links, legal/compliance links, contact/office addresses, social links) appropriate for a regulated fintech footer, integrated cleanly into the grid. It's functional and complete but purely utilitarian with no narrative or brand-voice integration beyond the logotype. Next tier: Would need some integrated brand messaging, tagline, or contextual content beyond standard link taxonomy to feel more considered. - Originality: 55 — Giant wordmark footers are a well-established pattern across many modern sites (seen widely in SaaS/fintech/agency sites); the counter-cutout treatment here is a nice detail but not a novel idea. The four-column with oversized logo below is largely expected execution of a known convention. Next tier: Needs a genuinely new structural or interaction idea distinct from the now-common 'giant logotype footer' convention to be considered original. - Adaptability: 62 — Structure (grid of labeled link columns + full-width wordmark graphic) is modular and clearly separable from the specific brand skin; swapping palette, logotype, and link content would be straightforward given the deterministic tokens (colors, type roles, radii) supplied. Next tier: Dependency on a custom SVG wordmark asset for the signature visual means full replication requires bespoke type-to-shape artwork, limiting a purely CSS-based transfer. Strengths: - Clear, legible four-column information architecture with consistent label/link hierarchy - Full-bleed oversized wordmark creates a strong, confident closing visual anchor - Generous whitespace and consistent alignment keep a large amount of legal/informational content organized Weaknesses: - Giant wordmark footer is now a common pattern, reducing distinctiveness - No motion evidence provided, so any interactive polish on links is unverifiable - Layout and column grouping follow a conventional template without a unique structural twist - Content is purely functional link taxonomy with no brand voice or narrative layer Why it does not reach the next tier: The section executes a now-familiar giant-wordmark footer convention competently and cleanly, but lacks a distinguishing structural, typographic, or interactive idea that would make it feel hard to substitute; it reads as well-built rather than memorable. ## Adaptation guidance - Effort: Low - Guidance: Reuse the grid structure and category-label/link hierarchy as-is; swap the SVG wordmark for the target brand's name set in a similarly bold condensed display face, and remap palette tokens to the new brand system. What transfers: - Four-column link grid with label/header typographic hierarchy - Full-width oversized logotype treatment as a closing visual anchor - Separation of informational columns (product, legal, contact, social) into clear groups Dependencies: - Custom SVG wordmark artwork shaped to the brand's specific logotype - Brand-specific purple palette and letter-cutout counter styling ## 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 motion or interaction evidence supplied, so hover/transition quality is unassessed - Cannot verify exact spacing, font metrics, or animation parameters beyond what's stated - Judgment based on a single static crop; responsive/mobile behavior 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: footer - Source type: footer - Structure: full-bleed - Layout: Multi-column link grid positioned above a giant full-width wordmark. - Styles: bold, typographic - Components: link columns, column headers, giant logo wordmark, copyright text - Purpose: A large footer section with multiple columns of links, bottomed out by an oversized brand wordmark. - Visual signature: A light purple footer block dominated by massive, dark purple typography spelling out the brand name at the bottom. - Place on the page: 11 of 11, after Call to action (`kuda-com:C10_cta`) ### Crop and composition - Crop: 1440×1154px; aspect ratio 1.248:1 - Page bounds: 10333–11487px of 11487px - 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": [ { "role": "body/supporting copy", "family": "suisse", "stack": "suisse, sans-serif", "size": "12px", "weight": "400", "lineHeight": "16.8px", "letterSpacing": "normal", "sample": "Kuda Microfinance Bank Limited is incorporated in Nigeria (RC No: 796975) and is licensed by the Cen", "element": "p", "occurrences": 1, "sourceId": "font-8" } ], "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": "#EED3F8", "cssValue": "rgb(238, 211, 248)", "alpha": 1, "appliedAs": [ "control-background", "background" ], "occurrences": 31, "sourceId": "color-3" } ], "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×1154px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(238, 211, 248); radius 0px. - Representative content widths: 1392, 336, 266px. - Layout containers: 0; cards/surfaces: 0; media elements: 1; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 10333, "bottom": 11487, "pageHeight": 11487 } }, "container": { "size": "1440×1154px", "position": "x 0px, y 10333px", "display": "block", "positionMode": "static", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgb(238, 211, 248)", "radius": "0px", "border": "0px solid rgb(27, 22, 29)", "shadow": "none", "overflow": "hidden" }, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [ 1392, 336, 266 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "svg · svg", "size": "1392×352px", "position": "x 24px, y 11054px", "aspectRatio": 4, "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-764", "gap": "normal", "tag": "footer", "rect": { "x": 0, "y": 10333, "width": 1440, "height": 1154 }, "role": null, "label": "Personal Banking Explore Personal Loan App Investments Kuda Card Kuda Premium Savings Transfers Busi", "border": "0px solid rgb(27, 22, 29)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "hidden", "position": "static", "background": "rgb(238, 211, 248)" }, "cards": [], "media": [ { "id": "ld-847", "tag": "svg", "rect": { "x": 24, "y": 11054, "width": 1392, "height": 352 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 4, "objectPosition": "50% 50%" } ], "bounds": { "top": 10333, "bottom": 11487, "pageHeight": 11487 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 1392, 336, 266 ] }, "coverage": { "cards": 0, "media": 1, "animations": 0, "elementsInSection": 61 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-29T17:28:55.406Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion No timestamped authored motion is attached. Use only restrained baseline transitions. 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: 1440px 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: low - What transfers: Four-column link grid with label/header typographic hierarchy; Full-width oversized logotype treatment as a closing visual anchor; Separation of informational columns (product, legal, contact, social) into clear groups - Dependencies: Custom SVG wordmark artwork shaped to the brand's specific logotype; Brand-specific purple palette and letter-cutout counter styling - Guidance: Reuse the grid structure and category-label/link hierarchy as-is; swap the SVG wordmark for the target brand's name set in a similarly bold condensed display face, and remap palette tokens to the new brand system. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion. ### Agent implementation prompt Create an original footer section inspired by the design evidence titled “Multi-column Footer with Giant Wordmark”. Purpose: A large footer section with multiple columns of links, bottomed out by an oversized brand wordmark. Structure: full-bleed. Source layout label: Multi-column link grid positioned above a giant full-width wordmark.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: A light purple footer block dominated by massive, dark purple typography spelling out the brand name at the bottom. Components: link columns, column headers, giant logo wordmark, copyright text. Style direction: bold, typographic. Observed crop: 1440×1154px (1.248:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"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"} Color evidence: {"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} Typography measured inside this section: {"id":"font-8","size":"12px","count":1,"family":"suisse","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":11430,"text":"Kuda Microfinance Bank Limited is incorporated in Nigeria (RC No: 796975) and is licensed by the Cen","property":"font"}],"fontStack":"suisse, sans-serif","lineHeight":"16.8px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-3","hex":"#EED3F8","alpha":1,"count":31,"contexts":[{"tag":"a","top":469,"text":"Download Kuda","property":"control-background"},{"tag":"div","top":1476,"text":"