# App Download CTA with Illustration Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: 248327d9-2163-4425-90d1-c0ba824b1d87 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The split layout puts a short headline and two store badges on the left and a large hand-drawn scene on the right, so the action is clear and the artwork gets the space. - The colored-pencil illustration of people and palm trees holding an oversized purple logo adds warmth and personality that flat badge-only CTAs lack. - The warm cream canvas and deep purple primary tie the artwork to the brand, and the heavy headline gives a clear entry point. What a screenshot can't show: - The recording shows one entrance over about 3 seconds (29–32s): the logo and background image slide in while the download buttons appear, with no further sequencing. - The measured headline is 32px at weight 800 with 32px line height in the modena family, and the section has 40px top padding with none at the sides or bottom. Borrow: Pair a brief, direct call to action with one oversized, characterful illustration that carries the brand mark, so the artwork does the persuading. Leave alone: Don't copy the Kuda purple logo, the palm-tree colored-pencil scene or the modena typeface; use your own illustration and a free geometric or grotesque sans with heavy weights instead. ## Classification - Type: cta - Layout: Split layout with CTA text and buttons on the left, and a large graphical illustration on the right. - Styles: illustrative, colourful, hand-drawn - Confidence: 95% ## Purpose and structure A bold call-to-action section featuring app download buttons paired with a large, colorful hand-drawn illustration. Visual signature: A colorful, vibrant illustration of people and palm trees holding a giant purple logo, positioned next to app download buttons. ## Components - cta headline - body copy - app store badges - large colorful illustration - giant logo graphic ## 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 - 29.0–32.0s — A large 'KUDA' logo and background image slide in, accompanied by download buttons for the app. (93% confidence) ## Section quality Overall: 58.20/100 (Competent) Scored coverage: 100% - Typography: 58 — Uses the site's uppercase display heading (56-80px weight 800) and clean body copy at standard 16px; hierarchy is clear but treatment is generic and identical to other sections, no bespoke pairing or detail for this CTA specifically. Next tier: Needs a typographic choice unique to this moment (e.g., scale contrast with the illustration, custom kerning on headline) rather than reused global heading styles. - Composition: 62 — Clear split layout with text block left and large square illustration right; illustration bleeds to edge creating good contrast against whitespace, but the crop shows a visible duplicate/stacked content bug (repeated headline/buttons below), which undermines composition integrity as captured. Next tier: Would need tighter integration between text block and image (e.g., overlap, asymmetry, or dynamic grid) instead of a static even split, and the layout bug resolved. - Motion: 48 — Gemini reports only a basic slide-in of the logo/background and buttons appearing, a single generic entrance with no distinctive choreography or sequencing detail. Next tier: Needs multiple staged or physics-tuned motion beats (e.g., illustration elements animating independently, staggered badge reveals) to feel considered rather than a single slide-in. - Content: 55 — Headline, supporting copy, and both app store badges are present and functional, giving the CTA necessary information, but copy is generic boilerplate without specific incentive or detail tied to the illustration. Next tier: Copy and illustration could be more tightly thematically linked (e.g., caption referencing the scene) to feel purpose-built rather than templated. - Originality: 65 — The large hand-drawn colored-pencil illustration of people with palm trees holding an oversized logo is a distinctive, non-generic art direction choice that stands out from typical flat app-badge CTAs. Next tier: Illustration alone carries originality; the surrounding layout and type are standard, so the section depends entirely on the artwork rather than compositional or interaction innovation to earn a higher tier. - Adaptability: 60 — Structure (left text column, right square media, two badges) is simple and clearly separable from the specific illustration asset; tokens like color and type come from global system already documented. Next tier: True reusability is capped by heavy reliance on the specific commissioned illustration as the only scroll/visual anchor; no other adaptable visual device is present. Strengths: - Distinctive hand-drawn, colorful illustration gives the CTA a unique art-directed visual signature uncommon in app-download sections - Clear, simple split layout separates message and call-to-action from supporting visual - Legible consistent use of the site's global type and color tokens Weaknesses: - Crop shows duplicated headline/body/button content stacked beneath the main block, suggesting a layout or loading bug undermining the section as captured - Motion is a single generic slide-in with no distinguishing choreography - Copy is generic boilerplate not tailored to the visual concept - Section relies entirely on the illustration for interest; layout and typography are otherwise templated Why it does not reach the next tier: The idea of a vibrant illustrated CTA is appealing but execution leans on reused global styles and a single simple reveal; the visible content duplication and lack of integration between type, copy, and the artwork keep it from feeling intentionally crafted at a strong/memorable level. ## Adaptation guidance - Effort: Low - Guidance: Reuse the two-column CTA skeleton and badge component; swap in a new illustration or photo sized to the same square media slot and restate the headline/body copy using the same type tokens. What transfers: - Split layout with text block and square media panel - Dual app store badge pairing pattern - Global type and color tokens Dependencies: - Custom hand-drawn illustration asset - Brand-specific logo lockup embedded in the artwork ## 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 description limited to a single timestamped entrance, so full animation behavior is unknown - Apparent content duplication may be a capture artifact rather than actual page behavior - No deterministic data on interaction states (hover/focus) for buttons ## 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: cta - Source type: cta - Structure: two-column - Layout: Split layout with CTA text and buttons on the left, and a large graphical illustration on the right. - Styles: illustrative, colourful, hand-drawn - Components: cta headline, body copy, app store badges, large colorful illustration, giant logo graphic - Purpose: A bold call-to-action section featuring app download buttons paired with a large, colorful hand-drawn illustration. - Visual signature: A colorful, vibrant illustration of people and palm trees holding a giant purple logo, positioned next to app download buttons. - Place on the page: 10 of 11, after Comparison (`kuda-com:C09_comparison`), before Footer (`kuda-com:C11_footer`) ### Crop and composition - Crop: 1440×1104px; aspect ratio 1.304:1 - Page bounds: 9229–10333px of 11487px - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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": "#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×1104px; block; padding {"top":"40px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Representative content widths: 1064, 264px. - Layout containers: 0; cards/surfaces: 0; media elements: 3; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 9229, "bottom": 10333, "pageHeight": 11487 } }, "container": { "size": "1440×1104px", "position": "x 0px, y 9229px", "display": "block", "positionMode": "static", "padding": { "top": "40px", "left": "0px", "right": "0px", "bottom": "0px" }, "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": [], "representativeContentWidthsPx": [ 1064, 264 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · attachment-full size-full entered lazyloaded", "size": "1064×1064px", "position": "x 376px, y 9269px", "aspectRatio": 1, "objectFit": "cover", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/uploads/2026/07/Frame-2147226606-1-1536x1536.webp" }, { "element": "img · entered lazyloaded", "size": "135×40px", "position": "x 188px, y 9701px", "aspectRatio": 3.4, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/themes/kuda/img/global/google-store.svg" }, { "element": "img · entered lazyloaded", "size": "119×40px", "position": "x 61px, y 9701px", "aspectRatio": 3, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "clip", "source": "https://www.kuda.com/wp-content/themes/kuda/img/global/app-store.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-744", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 9229, "width": 1440, "height": 1104 }, "role": null, "label": "Download the app Join the millions of people who use Kuda to spend, save, borrow, and get more from ", "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": "40px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "visible", "position": "static", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-762", "tag": "img", "rect": { "x": 376, "y": 9269, "width": 1064, "height": 1064 }, "role": null, "label": "attachment-full size-full entered lazyloaded", "media": { "alt": "", "src": "https://www.kuda.com/wp-content/uploads/2026/07/Frame-2147226606-1-1536x1536.webp", "naturalWidth": 1439, "naturalHeight": 1439 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-755", "tag": "img", "rect": { "x": 188, "y": 9701, "width": 135, "height": 40 }, "role": null, "label": "entered lazyloaded", "media": { "alt": "Google Store", "src": "https://www.kuda.com/wp-content/themes/kuda/img/global/google-store.svg", "naturalWidth": 108, "naturalHeight": 32 }, "radius": "0px", "overflow": "clip", "objectFit": "fill", "aspectRatio": 3.4, "objectPosition": "50% 50%" }, { "id": "ld-758", "tag": "img", "rect": { "x": 61, "y": 9701, "width": 119, "height": 40 }, "role": null, "label": "entered lazyloaded", "media": { "alt": "App Store", "src": "https://www.kuda.com/wp-content/themes/kuda/img/global/app-store.svg", "naturalWidth": 95, "naturalHeight": 32 }, "radius": "0px", "overflow": "clip", "objectFit": "fill", "aspectRatio": 3, "objectPosition": "50% 50%" } ], "bounds": { "top": 9229, "bottom": 10333, "pageHeight": 11487 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 1064, 264 ] }, "coverage": { "cards": 0, "media": 3, "animations": 0, "elementsInSection": 8 }, "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 1. **entrance** — A large 'KUDA' logo and background image slide in, accompanied by download buttons for the app. (29s–32s; 93% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 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: Split layout with text block and square media panel; Dual app store badge pairing pattern; Global type and color tokens - Dependencies: Custom hand-drawn illustration asset; Brand-specific logo lockup embedded in the artwork - Guidance: Reuse the two-column CTA skeleton and badge component; swap in a new illustration or photo sized to the same square media slot and restate the headline/body copy using the same type tokens. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original cta section inspired by the design evidence titled “App Download CTA with Illustration”. Purpose: A bold call-to-action section featuring app download buttons paired with a large, colorful hand-drawn illustration. Structure: two-column. Source layout label: Split layout with CTA text and buttons on the left, and a large graphical illustration on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: A colorful, vibrant illustration of people and palm trees holding a giant purple logo, positioned next to app download buttons. Components: cta headline, body copy, app store badges, large colorful illustration, giant logo graphic. Style direction: illustrative, colourful, hand-drawn. Observed crop: 1440×1104px (1.304: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-3","size":"32px","count":2,"family":"modena","traits":"uppercase","weight":"800","contexts":[{"tag":"h2","top":7633,"text":"Pay bills with less stress","property":"font"},{"tag":"h2","top":9512,"text":"Download the app","property":"font"}],"fontStack":"modena, sans-serif","lineHeight":"32px","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":"