# Trust Badges Ticker Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: bbbe6356-7509-4349-ba33-f72a9328be68 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each ticker item pairs one short claim, like a rating, user count or award, with a small matching icon chip, so the proof reads at a glance. - Quiet 16px regular muted-grey text on the warm cream canvas keeps the band unobtrusive, and the purple icon chips add a single accent that ties it to the brand. - Even 16px gaps between icon and text groups give the row a steady rhythm, and the generous 80px of padding above and below keeps the thin band from feeling cramped. What a screenshot can't show: - The recording showed no specific motion, so scroll speed, direction and any pause on hover are unknown. - Body text measures 16px with a 23.2px line height and normal letter spacing; items run about 242 to 456px wide. Borrow: Put credibility facts in a slim, low-contrast band of repeating icon-plus-stat units so they build trust without competing with the main message. Leave alone: Don't copy the Suisse typeface, the cream and plum palette or the lilac icon chips; use a free neutral grotesque such as Inter with your own accent colour. ## Classification - Type: logo-marquee - Layout: Full-width horizontal scrolling text and icon band. - Styles: minimal - Confidence: 85% ## Purpose and structure A slim, horizontally scrolling ticker displaying app store ratings, user counts, and awards. Visual signature: A very thin band of continuous scrolling text and small purple icons. ## Components - scrolling text - star rating icons - award icons ## 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: 48.65/100 (Serviceable) Scored coverage: 85% - Typography: 48 — Simple small-scale body text (muted grey) used consistently for ticker items; legible but purely functional with no typographic craft beyond basic sizing and color choices. Next tier: No distinctive weight, scale, or treatment differentiates this from default UI text. - Composition: 50 — Clean, evenly spaced icon+text groupings in a single horizontal row with consistent gaps (16px) and rounded icon chips create a tidy, minimal band, but the layout is a standard trust-bar pattern with no compositional tension or hierarchy. Next tier: Lacks any structural variation, framing, or layered depth that would elevate it beyond a generic ticker row. - Motion: inconclusive — Section is identified as a scrolling marquee but no animation data, timestamps, or specific visible motion changes were supplied. Next tier: Provide timestamped evidence of scroll speed, direction, looping behavior, or easing to assess motion quality. - Content: 52 — Content items (ratings, customer count, award) are credible trust signals clearly paired with matching icons (star, person, trophy), giving functional clarity and relevance. Next tier: Content is purely factual/generic trust-badge copy with no narrative framing or unique presentation to deepen integration. - Originality: 35 — This is a ubiquitous SaaS/fintech trust-bar pattern (icon chip + stat text, repeating marquee) seen across countless sites with no distinguishing concept. Next tier: Needs a novel structural or visual idea beyond the standard rounded-icon-chip ticker to feel non-interchangeable. - Adaptability: 58 — Structure is simple and modular (repeating icon+text groups in a flex row with defined gap and rect data), making it straightforward to reskin with different icons/text/colors while preserving the pattern. Next tier: Lack of animation/timing specs and card-level styling tokens limits full behavioral portability. Strengths: - Clear, consistent icon-to-text pairing aids quick scanning of trust signals - Restrained minimal styling keeps the band from competing with primary content - Even spacing and compact height make it an unobtrusive, functional UI strip Weaknesses: - Highly generic trust-bar/marquee pattern with no distinguishing visual or structural idea - Typography is purely utilitarian with no hierarchy or craft - No motion specifics provided to evaluate scrolling execution - Icon chips and copy feel templated rather than purpose-designed for this brand Why it does not reach the next tier: The section executes a common pattern cleanly but introduces no compositional tension, typographic distinction, or conceptual originality; it reads as interchangeable boilerplate rather than a considered design moment. ## Adaptation guidance - Effort: Low - Guidance: Reskin by swapping icon chip color and icon assets per brand, retain flex row with consistent gap, and re-source or redesign scroll timing since no animation parameters were captured. What transfers: - Repeating icon+label group structure - Flex row with fixed gap spacing - Rounded icon chip container pattern Dependencies: - Specific SVG icon set (star, person, trophy) - Brand purple icon chip color - Marquee/scroll animation implementation (undocumented) ## 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/animation data supplied to assess scroll behavior quality - Crop shows only a single frame of a presumably looping ticker - Typography and color evidence is limited to a narrow strip, not full section context ## 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: logo-marquee - Source type: logo-marquee - Structure: full-bleed - Layout: Full-width horizontal scrolling text and icon band. - Styles: minimal - Components: scrolling text, star rating icons, award icons - Purpose: A slim, horizontally scrolling ticker displaying app store ratings, user counts, and awards. - Visual signature: A very thin band of continuous scrolling text and small purple icons. - Place on the page: 3 of 11, after Hero (`kuda-com:C02_hero`), before Stats (`kuda-com:C04_stats`) ### Crop and composition - Crop: 1440×192px; aspect ratio 7.5:1 - Page bounds: 1396–1588px 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": "UI/supporting text", "family": "suisse", "stack": "suisse, sans-serif", "size": "16px", "weight": "400", "lineHeight": "23.2px", "letterSpacing": "normal", "sample": "Rated 4.8 stars on the App Store", "element": "div", "occurrences": 29, "sourceId": "font-6" } ], "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" }, { "value": "#B3A3C5", "cssValue": "rgb(179, 163, 197)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 28, "sourceId": "color-8" } ], "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×192px; block; padding {"top":"80px","left":"0px","right":"0px","bottom":"80px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 16px. - Representative content widths: 456, 408, 290, 276, 242px. - Layout containers: 4; cards/surfaces: 0; media elements: 4; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 1396, "bottom": 1588, "pageHeight": 11487 } }, "container": { "size": "1440×192px", "position": "x 0px, y 1396px", "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": "hidden" }, "spacing": { "observedGapsPx": [ 16 ], "representativeContentWidthsPx": [ 456, 408, 290, 276, 242 ] }, "columns": [ { "element": "div ·