# Standard Navbar with Top Banner Schema: Design Details SECTION.md v3.2 Website: Studio Sandcastle Source: https://www.kuda.com/ Source section IDs: 040d9ccf-06ce-482a-9f6e-6a01b02f0c63 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The thin grey banner above the white bar carries one promotional line, so the offer gets seen without crowding the navigation. - Logo and toggle sit on the left while utilities and the solid purple 'Join' button sit on the right, so the main action is easy to spot. - Type stays at one size with a weight contrast: 400 for links and banner copy, 600 for the button, which gives hierarchy without extra styles. What a screenshot can't show: - The recording showed no motion, so hover, sticky or banner-dismiss behaviour is unknown. - Measured text is 14px on 19.6px line height with normal letter spacing, and the only measured gap is 4px. Borrow: Put a quiet, low-contrast announcement strip above a plain navbar and keep one saturated button as the only strong focal point. Leave alone: Don't copy the Kuda purple and warm cream palette or the commercial Suisse typeface; use a neutral grotesque sans such as Inter with your own brand colour. ## Classification - Type: navbar - Layout: Full-width banner above a split-content navbar (logo/links left, buttons right). - Styles: minimal - Confidence: 95% ## Purpose and structure A clean top navigation bar with an announcement banner, logo, links, and authentication buttons. Visual signature: Thin grey announcement banner sitting above a clean white navigation bar with right-aligned purple buttons. ## Components - top announcement banner - logo - navigation links - login button - signup button ## 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: 50.71/100 (Competent) Scored coverage: 85% - Typography: 52 — Simple, legible sans-serif text used for nav links, banner copy, and buttons; hierarchy is functional (bold CTA button, regular links) but there is no distinctive typographic treatment visible in this crop beyond standard navbar conventions. Next tier: No evidence of custom type scale, weight contrast, or expressive letterforms within this crop to justify a higher score. - Composition: 54 — Clean, conventional split layout: logo and nav controls left, utility links and CTA right, with a thin banner stacked above. Spacing is even and the purple CTA creates a clear focal point, but the structure is a standard industry pattern with no distinguishing spatial idea. Next tier: Needs an unconventional grouping, asymmetry, or spatial device beyond the standard logo-left/CTA-right pattern to read as memorable. - Motion: not_assessed — No animation data or timestamped motion evidence was supplied for this section. Next tier: Timestamped visible motion evidence is required before motion can be scored. - Content: 50 — Banner message and nav labels are coherent and purposeful (promotional banner, personal/business toggle, help/sign-in/join), integrated into a standard navbar container without any unique presentation. Next tier: Content placement and framing would need a more deliberate integration with the banner beyond a stacked strip to feel intentional rather than default. - Originality: 38 — This is a textbook SaaS/fintech navbar pattern (announcement bar + logo + toggle + CTA) seen across countless sites, with no distinguishing visual or interaction idea evident in the crop. Next tier: Lacks any structural, visual, or interaction twist that departs from the generic top-nav template. - Adaptability: 58 — The deterministic facts show simple borderless containers, solid button fills, and standard spacing tokens, making the skin (colors, radius, button style) easy to swap onto an equivalent structure. Next tier: Reaching higher would require documented interaction states (hover, dropdown behavior) to fully decouple behavior from skin. Strengths: - Clear visual hierarchy separating promotional banner from primary navigation - Right-aligned purple CTA stands out against neutral background for quick scanning - Restrained color and spacing keep the bar uncluttered Weaknesses: - Pattern is a generic, widely-used navbar template with no distinguishing idea - No visible motion or interaction evidence to assess dynamic behavior - Typography is purely functional with no notable scale or expressive treatment in this crop Why it does not reach the next tier: The section executes a competent, clean, conventional navbar but introduces no structural, typographic, or interaction idea that would make it memorable or hard to substitute; it reads as a standard template component. ## Adaptation guidance - Effort: Low - Guidance: Swap the logo, recolor the CTA and banner background, and restyle the toggle control while keeping the same left/right grouping and banner-stack structure. What transfers: - Banner-above-navbar structural pattern - Left logo/toggle, right utility-links/CTA grouping - Solid-fill CTA button treatment Dependencies: - Specific purple brand color and logo mark - Exact copy of the promotional banner ## 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 provided to assess transitions or interactions - Crop shows only the collapsed/default state, not hover, dropdown, or scroll behavior - No mobile or responsive view provided to assess adaptability across breakpoints ## 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: navigation - Source type: navbar - Structure: two-column - Layout: Full-width banner above a split-content navbar (logo/links left, buttons right). - Styles: minimal - Components: top announcement banner, logo, navigation links, login button, signup button - Purpose: A clean top navigation bar with an announcement banner, logo, links, and authentication buttons. - Visual signature: Thin grey announcement banner sitting above a clean white navigation bar with right-aligned purple buttons. - Place on the page: 1 of 11, before Hero (`kuda-com:C02_hero`) ### Crop and composition - Crop: 1440×128px; aspect ratio 11.25:1 - Page bounds: 0–128px 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": "action label", "family": "suisse", "stack": "suisse, sans-serif", "size": "14px", "weight": "400", "lineHeight": "19.6px", "letterSpacing": "normal", "sample": "Premium customers: earn 20% a year on a 3-month Locked Savings plan. Limited availability. Learn mor", "element": "p", "occurrences": 31, "sourceId": "font-5" }, { "role": "UI/supporting text", "family": "suisse", "stack": "suisse, sans-serif", "size": "14px", "weight": "600", "lineHeight": "19.6px", "letterSpacing": "normal", "sample": "Join Kuda", "element": "a", "occurrences": 41, "sourceId": "font-12" } ], "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": "#40196D", "cssValue": "rgb(64, 25, 109)", "alpha": 1, "appliedAs": [ "control-background", "background", "text" ], "occurrences": 10, "sourceId": "color-1" }, { "value": "#FCF7F2", "cssValue": "rgb(252, 247, 242)", "alpha": 1, "appliedAs": [ "background", "text" ], "occurrences": 10, "sourceId": "color-2" }, { "value": "#1B161D", "cssValue": "rgb(27, 22, 29)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 107, "sourceId": "color-6" }, { "value": "#F5EFE6", "cssValue": "rgb(245, 239, 230)", "alpha": 1, "appliedAs": [ "background", "control-background" ], "occurrences": 6, "sourceId": "color-7" }, { "value": "#EEE7DD", "cssValue": "rgb(238, 231, 221)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 1, "sourceId": "color-10" }, { "value": "#000000", "cssValue": "rgb(0, 0, 0)", "alpha": 1, "appliedAs": [ "svg-fill" ], "occurrences": 27, "sourceId": "color-12" }, { "value": "#DFD8CD", "cssValue": "rgb(223, 216, 205)", "alpha": 1, "appliedAs": [ "control-background" ], "occurrences": 1, "sourceId": "color-13" } ], "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×128px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Observed gaps: 4px. - Representative content widths: 686px. - Layout containers: 0; cards/surfaces: 0; media elements: 3; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 0, "bottom": 128, "pageHeight": 11487 } }, "container": { "size": "1440×128px", "position": "x 0px, y 0px", "display": "block", "positionMode": "fixed", "padding": { "top": "0px", "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": [ 4 ], "representativeContentWidthsPx": [ 686 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "4px" ], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "svg · svg", "size": "84×30px", "position": "x 24px, y 71px", "aspectRatio": 2.8, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "9×9px", "position": "x 1404px, y 17px", "aspectRatio": 1, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "hidden", "source": "source not captured" }, { "element": "svg · svg", "size": "10×6px", "position": "x 211px, y 83px", "aspectRatio": 1.7, "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-4", "gap": "normal", "tag": "header", "rect": { "x": 0, "y": 0, "width": 1440, "height": 128 }, "role": null, "label": "Premium customers: earn 20% a year on a 3-month Locked Savings plan. Limited availability. Learn mor", "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": "visible", "position": "fixed", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-20", "tag": "svg", "rect": { "x": 24, "y": 71, "width": 84, "height": 30 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 2.8, "objectPosition": "50% 50%" }, { "id": "ld-12", "tag": "svg", "rect": { "x": 1404, "y": 17, "width": 9, "height": 9 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" }, { "id": "ld-50", "tag": "svg", "rect": { "x": 211, "y": 83, "width": 10, "height": 6 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1.7, "objectPosition": "50% 50%" } ], "bounds": { "top": 0, "bottom": 128, "pageHeight": 11487 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [ 4 ], "representativeContentWidthsPx": [ 686 ] }, "coverage": { "cards": 0, "media": 3, "animations": 0, "elementsInSection": 22 }, "surfaces": { "radii": [ "4px" ], "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: Banner-above-navbar structural pattern; Left logo/toggle, right utility-links/CTA grouping; Solid-fill CTA button treatment - Dependencies: Specific purple brand color and logo mark; Exact copy of the promotional banner - Guidance: Swap the logo, recolor the CTA and banner background, and restyle the toggle control while keeping the same left/right grouping and banner-stack structure. ### 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 navigation section inspired by the design evidence titled “Standard Navbar with Top Banner”. Purpose: A clean top navigation bar with an announcement banner, logo, links, and authentication buttons. Structure: two-column. Source layout label: Full-width banner above a split-content navbar (logo/links left, buttons 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: Thin grey announcement banner sitting above a clean white navigation bar with right-aligned purple buttons. Components: top announcement banner, logo, navigation links, login button, signup button. Style direction: minimal. Observed crop: 1440×128px (11.25: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-5","size":"14px","count":31,"family":"suisse","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":12,"text":"Premium customers: earn 20% a year on a 3-month Locked Savings plan. Limited availability. Learn mor","property":"font"},{"tag":"a","top":10,"text":"Learn more.","property":"font"},{"tag":"button","top":62,"text":"Personal","property":"font"}],"fontStack":"suisse, sans-serif","lineHeight":"19.6px","letterSpacing":"normal"} {"id":"font-12","size":"14px","count":41,"family":"suisse","traits":"Regular","weight":"600","contexts":[{"tag":"a","top":62,"text":"Join Kuda","property":"font"},{"tag":"a","top":469,"text":"Download Kuda","property":"font"},{"tag":"a","top":3587,"text":"Send money","property":"font"}],"fontStack":"suisse, sans-serif","lineHeight":"19.6px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-1","hex":"#40196D","alpha":1,"count":10,"contexts":[{"tag":"a","top":62,"text":"Join Kuda","property":"control-background"},{"tag":"div","top":597,"text":"","property":"background"},{"tag":"h2","top":2134,"text":"8 million customers","property":"text"}],"cssValue":"rgb(64, 25, 109)"} {"id":"color-2","hex":"#FCF7F2","alpha":1,"count":10,"contexts":[{"tag":"body","top":0,"text":"