# Minimal global navigation Schema: Design Details SECTION.md v3.2 Website: Krea Source: https://www.krea.ai/krea-3 Source section IDs: 48836086-13b5-49d9-9489-4cc4323d7c41 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Logo mark on the left and one pill button on the right sit in a flex row with space-between, so the eye has only two places to go. - The single 'Contact sales' action is set at 16px, weight 500, on a 24px line height, which keeps the label clear and readable. - With 40px side padding and no top or bottom padding, the bar stays thin and leaves the page below to carry the content. What a screenshot can't show: - The recording showed no motion, so any sticky or scroll behaviour is unconfirmed. - Hover and focus states for the button are not visible. Borrow: Cut a header down to a mark and one clear action so it frames the page without competing with it. Leave alone: Don't copy Krea's logo mark or its commercial Suisse Intl typeface; use a free neutral grotesque such as Inter instead. ## Classification - Type: navbar - Layout: Flex row with space-between alignment. - Styles: minimal, bold - Confidence: 100% ## Purpose and structure A minimal white navigation bar containing a logo on the left and a 'Contact sales' button on the right. Visual signature: Thin white strip at the top with minimal UI elements. ## Components - logo - button - link ## Typography - Display: Krea 3 Suisse Intl — 132px 500 - Heading: Krea 3 Suisse Intl — 100px 500 - Body: Suisse Intl — 20px 500 ## Functional palette - Canvas: canvas #FFFFFF - Text: text #000000 - Primary-Action: primary action #2E6CF6 - Surface: surface #111111 - Muted-Text: muted text #737373 - Border: border #E5E5E5 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 48.76/100 (Serviceable) Scored coverage: 85% - Typography: 48 — Only typography visible is the pill button label 'Contact sales'; no evidence of distinctive type treatment, scale, or hierarchy within this crop—just a default-looking button label. Next tier: No meaningful typographic system is visible in this crop beyond a single button label; would need visible nav links or wordmark treatment to assess further. - Composition: 52 — Simple flex row with logo mark at left and a single pill CTA at right, floating over a busy photographic background rather than a clean canvas, which undercuts the 'minimal white navbar' framing from the summary. Next tier: Composition is a basic space-between bar with no secondary nav items, breadcrumbs, or layered hierarchy shown; needs more structural complexity or a more deliberate relationship to the background to feel considered rather than default. - Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Requires timestamped visible motion data (e.g., scroll-triggered background change, sticky behavior transition) to assess. - Content: 45 — Content is minimal to the point of being nearly empty: one icon mark and one CTA button; no nav links, no wordmark text, no utility content integrated. Next tier: Needs richer, purposeful content integration (nav items, status indicators, contextual elements) tied to the page rather than a bare logo and button. - Originality: 40 — A logo-left, CTA-right header is an extremely common pattern with no distinguishing detail evident in this crop—pill button and icon mark are standard conventions. Next tier: Nothing in the deterministic evidence or crop suggests a distinctive interaction, shape, or layout choice that departs from default navbar templates. - Adaptability: 58 — The sticky header structure, flex layout, and pill button styling are clearly separable from the specific background imagery and brand mark, making the skeleton easy to reskin. Next tier: Would need visible nav link structure and responsive breakpoint behavior to confirm deeper structural adaptability beyond the two-element skeleton. Strengths: - Clean flex space-between structure separating logo and CTA is simple and easy to reuse - Pill-shaped button is clearly legible against a busy background due to solid white fill and contrast Weaknesses: - Minimal content (just icon + single button) leaves little for designers to evaluate as a crafted system - No visible nav links or secondary wayfinding elements in this crop - Background imagery clashes with the 'minimal white navbar' framing, undermining a clean minimal read - No distinguishing typographic or interaction details evident Why it does not reach the next tier: The section is a bare-bones header with only a logo mark and single button; without visible nav links, distinctive type, or any motion/interaction detail, it reads as a default template rather than a crafted design moment. ## Adaptation guidance - Effort: Low - Guidance: Reuse the sticky flex container and pill button pattern; swap in new logo and link set, and pair with a plain background rather than imagery to achieve a true minimal look. What transfers: - Sticky flex header skeleton with logo-left, action-right alignment - Pill-shaped button styling convention Dependencies: - Specific background photography/pattern seen behind the bar - Brand icon mark ## 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%) - Crop shows a very short vertical slice (88px) of a long page, limiting visibility of full nav content - No nav links or additional header elements are visible to assess completeness - No motion timestamps provided to evaluate sticky/transition behavior ## 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: Flex row with space-between alignment. - Layout: Flex row with space-between alignment. - Styles: minimal, bold - Components: logo, button, link - Purpose: A minimal white navigation bar containing a logo on the left and a 'Contact sales' button on the right. - Visual signature: Thin white strip at the top with minimal UI elements. - Place on the page: 1 of 22, before Hero (`krea-ai:C02`) ### Crop and composition - Crop: 1440×88px; aspect ratio 16.364:1 - Page bounds: 0–88px of 21224px - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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 Intl", "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "size": "16px", "weight": "500", "lineHeight": "24px", "letterSpacing": "normal", "sample": "Contact sales", "element": "a", "occurrences": 53, "sourceId": "font-28" }, { "role": "UI/supporting text", "family": "not captured", "stack": "system-ui, sans-serif", "size": "11.5px", "weight": "500", "lineHeight": "11.5px", "letterSpacing": "normal", "sample": "1", "element": "span", "occurrences": 40, "sourceId": "font-29" } ], "siteRoles": [ { "role": "display", "size": "132px", "family": "Krea 3 Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.", "sampleId": "font-34", "confidence": 1, "lineHeight": "116.2px", "letterSpacing": "-2.6px" }, { "role": "heading", "size": "100px", "family": "Krea 3 Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.", "sampleId": "font-8", "confidence": 1, "lineHeight": "96px", "letterSpacing": "-3px" }, { "role": "body", "size": "20px", "family": "Suisse Intl", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.", "sampleId": "font-19", "confidence": 0.95, "lineHeight": "28px", "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": "#FFFFFF", "cssValue": "rgb(255, 255, 255)", "alpha": 1, "appliedAs": [ "background", "svg-fill" ], "occurrences": 219, "sourceId": "color-1" }, { "value": "#111111", "cssValue": "rgb(17, 17, 17)", "alpha": 1, "appliedAs": [ "background", "text" ], "occurrences": 36, "sourceId": "color-5" }, { "value": "#000000", "cssValue": "rgba(0, 0, 0, 0.3)", "alpha": 0.30196078431372547, "appliedAs": [ "svg-fill" ], "occurrences": 1, "sourceId": "color-9" } ], "functionalPalette": [ { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.", "sampleId": "color-4", "confidence": 1 }, { "hex": "#2E6CF6", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.", "sampleId": "color-31", "confidence": 1 }, { "hex": "#111111", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).", "sampleId": "color-5", "confidence": 0.9 }, { "hex": "#737373", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.", "sampleId": "color-17", "confidence": 0.9 }, { "hex": "#E5E5E5", "name": "border", "role": "border", "source": "computed", "evidence": "color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.", "sampleId": "color-32", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large radii (e.g., 20px-30px) for main content blocks/images, and full-round (50% or 999px) for buttons, tabs, and tags.", "density": "Low density. The layout prioritizes large imagery and massive text over packing in information, allowing each feature to breathe.", "evidence": "Observed via pill buttons, massive display fonts (font-34, font-6), large rounded media frames, and stark black/white section transitions.", "borderStyle": "Mostly borderless, relying on background contrast (dark/light) or subtle, thin light-gray borders (e.g., color-32) for delineating form fields or specific card boundaries.", "buttonStyle": "Pill-shaped. Primary actions use solid vibrant blue (color-31) or stark contrasting black/white depending on the section's canvas. Secondary actions use subtle grays or frosted glass effects (color-18, color-38).", "cornerStyle": "Consistent use of fully rounded (pill-shaped) elements for buttons and tags, combined with distinct rounded corners on large media cards and form containers.", "contentWidth": "Responsive, centering content in a wide max-width container but allowing large media elements and bold typography to bleed towards the edges.", "spacingRhythm": "Generous vertical spacing between major sections, utilizing massive typographic scaling to define rhythm. Elements within cards have tighter, functional padding." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×88px; flex; padding {"top":"0px","left":"40px","right":"40px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px. - Layout containers: 3; cards/surfaces: 0; media elements: 1; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 0, "bottom": 88, "pageHeight": 21224 } }, "container": { "size": "1440×88px", "position": "x 0px, y 0px", "display": "flex", "positionMode": "sticky", "padding": { "top": "0px", "left": "40px", "right": "40px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "-88px" }, "gap": "normal", "columns": "not captured", "background": "rgba(0, 0, 0, 0)", "radius": "0px", "border": "0px solid rgb(229, 229, 229)", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [ { "element": "a · active-scale-95 fixed top-8 left-[clamp(20px,3vw,40px)] z-51 grid place-items-center text-white mix-", "size": "24×24px", "position": "x 40px, y 32px", "display": "grid", "template": "24px", "direction": "row", "gap": "normal" }, { "element": "span · 6", "size": "22×22px", "position": "x 593px, y 19px", "display": "grid", "template": "10px", "direction": "row", "gap": "normal" }, { "element": "header · Contact sales", "size": "1440×88px", "position": "x 0px, y 0px", "display": "flex", "template": "not captured", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [ "3.35544e+07px", "14px 14px 14px 4px" ], "borders": [], "shadows": [ "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px" ] } } ``` #### Media treatment ```json [ { "element": "svg · svg", "size": "24×24px", "position": "x 40px, y 32px", "aspectRatio": 1, "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-13", "gap": "normal", "tag": "header", "rect": { "x": 0, "y": 0, "width": 1440, "height": 88 }, "role": null, "label": "Contact sales", "border": "0px solid rgb(229, 229, 229)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "-88px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "flex", "padding": { "top": "0px", "left": "40px", "right": "40px", "bottom": "0px" }, "overflow": "visible", "position": "sticky", "background": "rgba(0, 0, 0, 0)" }, "cards": [], "media": [ { "id": "ld-8", "tag": "svg", "rect": { "x": 40, "y": 32, "width": 24, "height": 24 }, "role": "img", "label": "svg", "media": null, "radius": "0px", "overflow": "hidden", "objectFit": "fill", "aspectRatio": 1, "objectPosition": "50% 50%" } ], "bounds": { "top": 0, "bottom": 88, "pageHeight": 21224 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-7", "gap": "normal", "tag": "a", "rect": { "x": 40, "y": 32, "width": 24, "height": 24 }, "role": null, "label": "active-scale-95 fixed top-8 left-[clamp(20px,3vw,40px)] z-51 grid place-items-center text-white mix-", "columns": "24px", "display": "grid", "direction": "row" }, { "id": "ld-71", "gap": "normal", "tag": "span", "rect": { "x": 593, "y": 19, "width": 22, "height": 22 }, "role": null, "label": "6", "columns": "10px", "display": "grid", "direction": "row" }, { "id": "ld-13", "gap": "normal", "tag": "header", "rect": { "x": 0, "y": 0, "width": 1440, "height": 88 }, "role": null, "label": "Contact sales", "columns": null, "display": "flex", "direction": "row" } ], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 1, "animations": 0, "elementsInSection": 5 }, "surfaces": { "radii": [ "3.35544e+07px", "14px 14px 14px 4px" ], "borders": [], "shadows": [ "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px" ] }, "animations": [], "capturedAt": "2026-10-31T06:25:43.715Z", "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: Sticky flex header skeleton with logo-left, action-right alignment; Pill-shaped button styling convention - Dependencies: Specific background photography/pattern seen behind the bar; Brand icon mark - Guidance: Reuse the sticky flex container and pill button pattern; swap in new logo and link set, and pair with a plain background rather than imagery to achieve a true minimal look. ### 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 “Minimal global navigation”. Purpose: A minimal white navigation bar containing a logo on the left and a 'Contact sales' button on the right. Structure: Flex row with space-between alignment.. Source layout label: Flex row with space-between alignment.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Thin white strip at the top with minimal UI elements. Components: logo, button, link. Style direction: minimal, bold. Observed crop: 1440×88px (16.364:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"132px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.","sampleId":"font-34","confidence":1,"lineHeight":"116.2px","letterSpacing":"-2.6px"} {"role":"heading","size":"100px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-3px"} {"role":"body","size":"20px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.","sampleId":"font-19","confidence":0.95,"lineHeight":"28px","letterSpacing":"normal"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.","sampleId":"color-4","confidence":1} {"hex":"#2E6CF6","name":"primary action","role":"primary-action","source":"computed","evidence":"color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.","sampleId":"color-31","confidence":1} {"hex":"#111111","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).","sampleId":"color-5","confidence":0.9} {"hex":"#737373","name":"muted text","role":"muted-text","source":"computed","evidence":"color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.","sampleId":"color-17","confidence":0.9} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.","sampleId":"color-32","confidence":0.8} Typography measured inside this section: {"id":"font-28","size":"16px","count":53,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"a","top":20,"text":"Contact sales","property":"font"},{"tag":"a","top":900,"text":"Try Krea 3","property":"font"},{"tag":"a","top":900,"text":"See what it can do","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"24px","letterSpacing":"normal"} {"id":"font-29","size":"11.5px","count":40,"family":null,"traits":"Regular","weight":"500","contexts":[{"tag":"span","top":309,"text":"1","property":"font"},{"tag":"span","top":271,"text":"1","property":"font"},{"tag":"span","top":4,"text":"2","property":"font"}],"fontStack":"system-ui, sans-serif","lineHeight":"11.5px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-1","hex":"#FFFFFF","alpha":1,"count":219,"contexts":[{"tag":"body","top":0,"text":"