# Oversized wordmark footer Schema: Design Details SECTION.md v3.2 Website: Kelvin Source: https://kelvin.8b.com/ Source section IDs: ae779bb2-f85d-4918-88ba-a9d50f399faf Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The two-zone layout is clear: a light serif sign-off and compact link columns sit on top, and a giant wordmark fills the bottom edge. Because the two halves differ so much in scale, the hierarchy is obvious. - A thin serif message set against a heavy, condensed sans wordmark gives strong contrast in weight and style. The small uppercase link labels stay quiet beside the big type. - A warm off-white canvas with dark text keeps the footer calm, so the gradient wordmark is the only loud element. Generous top padding and flush side margins keep the grid tidy. What a screenshot can't show: - The recording showed no motion, so the footer appears static. - Measured type: the serif sign-off is about 62px at weight 200 with -1.2px tracking and a tight line height. The body links are 15px with roomy 23px leading, and the section has 158px top padding, 43px side padding and no bottom padding. Borrow: Pair one quiet, elegant message with a single oversized brand word that bleeds off the bottom edge, and keep everything else small. Leave alone: Do not copy the Kelvin gradient palette, the Hubot Sans and Kalnia pairing, or the 'See you in the heat' copy; use your own brand colours, a free condensed sans and a light serif alternative. ## Classification - Type: footer - Layout: Top row contains a large message on the left and link columns on the right; the bottom row is filled by edge-to-edge typography. - Styles: minimal, typographic, gradient - Confidence: 100% ## Purpose and structure A bright footer featuring a sign-off message, organized link columns, and a massive gradient logo filling the bottom edge. Visual signature: The bottom half is entirely consumed by a massive, colorful gradient version of the brand name, cropped at the bottom. ## Components - Sign-off heading - Navigation link columns - Social media links - Copyright and legal links - Giant gradient logo ## Typography - Display: Kalnia — 86.4px 200 - Heading: Hubot Sans — 34.6px 800 - Body: Hubot Sans — 17px 400 ## Functional palette - Canvas: canvas #F1EDE4 - Text: text #110D19 - Muted-Text: muted text #5B5664 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 64.88/100 (Good) Scored coverage: 85% - Typography: 69 — Contrast between the elegant serif sign-off ('See you in the heat.') and the massive condensed sans gradient wordmark creates clear hierarchy. Link columns use crisp uppercase labels with thin underlines, restrained and well-organized. Next tier: Needs a more distinctive type pairing or treatment beyond the common oversized-wordmark footer trope to push past strong/memorable. - Composition: 68 — Clean two-zone layout: top row balances left message against right-aligned link columns, bottom half entirely consumed by the cropped wordmark. Generous whitespace and alignment to grid is effective and confident. Next tier: Composition is a well-executed but familiar pattern (message + links + giant cropped logo); lacks an unexpected structural twist to feel singular. - Motion: not_assessed — No motion_moments or animation data supplied for this section. Next tier: Timestamped visible motion evidence needed to assess. - Content: 62 — Content is minimal and purposeful: sign-off line, grouped navigation, legal line, and brand name. Integration is clean but mostly conventional footer content with no distinguishing editorial detail. Next tier: Would need content that does more work than standard navigation/legal footer fare to feel memorable. - Originality: 58 — The giant gradient wordmark cropped at the bottom edge is a recognizable, fairly common trend in modern web footers (oversized logo type). Execution is tidy but the idea itself is well-worn. Next tier: Needs a differentiating mechanic beyond the now-common giant-gradient-wordmark pattern to be considered original. - Adaptability: 65 — Structure (message, nav columns, legal row, huge wordmark) is clearly modular and separable from the specific gradient/typeface skin; deterministic grid and spacing values are given. Next tier: Full transfer confidence limited by lack of responsive/breakpoint behavior data for how the giant wordmark reflows. Strengths: - Clear two-tier hierarchy between intimate sign-off message and monumental brand display - Clean grid alignment of link columns with consistent underline treatment - Confident use of negative space keeps the footer from feeling cluttered despite scale contrast Weaknesses: - Giant gradient cropped wordmark is a common contemporary footer trope, limiting originality - No motion evidence provided to assess interaction/reveal behavior - Content is standard footer fare (nav, social, legal) without a distinguishing element Why it does not reach the next tier: The section executes a familiar 'oversized gradient wordmark footer' pattern cleanly and with good restraint, but doesn't introduce a structural or conceptual twist that would make it feel hard to substitute; it reads as polished rather than singular. ## Adaptation guidance - Effort: Low - Guidance: Swap the wordmark asset, fonts, and gradient to retarget the brand while preserving the two-zone layout, column nav grid, and edge-cropped giant logotype treatment. What transfers: - Two-row structure: message+nav row over full-bleed cropped wordmark row - Column-based nav grouping with underline link styling - Hierarchy contrast between small serif heading and giant display wordmark Dependencies: - Custom brand gradient and wordmark asset - Specific serif/sans font pairing (Kalnia + Hubot Sans) - Exact crop ratio of the giant logo at viewport edge ## 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, so interactive or reveal behavior of the wordmark cannot be assessed - No responsive breakpoint data to confirm how the oversized wordmark reflows on smaller viewports ## 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: Top row contains a large message on the left and link columns on the right; the bottom row is filled by edge-to-edge typography. - Layout: Top row contains a large message on the left and link columns on the right; the bottom row is filled by edge-to-edge typography. - Styles: minimal, typographic, gradient - Components: Sign-off heading, Navigation link columns, Social media links, Copyright and legal links, Giant gradient logo - Purpose: A bright footer featuring a sign-off message, organized link columns, and a massive gradient logo filling the bottom edge. - Visual signature: The bottom half is entirely consumed by a massive, colorful gradient version of the brand name, cropped at the bottom. - Place on the page: 11 of 11, after Contact (`kelvin-8b-com:C10`) ### Crop and composition - Crop: 1440×1077px; aspect ratio 1.337:1 - Page bounds: 12474–13551px of 13551px - 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": "section heading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "34.6px", "weight": "800", "lineHeight": "31.8px", "letterSpacing": "0.2px", "sample": "Northern Wire", "element": "span", "occurrences": 4, "sourceId": "font-2" }, { "role": "section heading", "family": "Kalnia", "stack": "Kalnia, Georgia, serif", "size": "61.9px", "weight": "200", "lineHeight": "63.2px", "letterSpacing": "-1.2px", "sample": "“The first festival where the crowd is the light show. You watch a room warm up in real time.”", "element": "p", "occurrences": 1, "sourceId": "font-18" }, { "role": "UI/supporting text", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "15px", "weight": "400", "lineHeight": "23.3px", "letterSpacing": "normal", "sample": "Review of Kelvin 2026", "element": "span", "occurrences": 1, "sourceId": "font-28" } ], "siteRoles": [ { "role": "display", "size": "86.4px", "family": "Kalnia", "source": "computed", "traits": "Regular", "weight": "200", "evidence": "font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'", "sampleId": "font-5", "confidence": 0.95, "lineHeight": "88.1px", "letterSpacing": "-1.7px" }, { "role": "heading", "size": "34.6px", "family": "Hubot Sans", "source": "computed", "traits": "uppercase", "weight": "800", "evidence": "font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "31.8px", "letterSpacing": "0.2px" }, { "role": "body", "size": "17px", "family": "Hubot Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.", "sampleId": "font-12", "confidence": 0.95, "lineHeight": "26.4px", "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": [], "functionalPalette": [ { "hex": "#F1EDE4", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#110D19", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#5B5664", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.", "sampleId": "color-4", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px, no border-radius visible.", "density": "Low density; ample negative space emphasizes the scale of the typography and vibrancy of the images.", "evidence": "Visual inspection of stat blocks (fine lines), button shapes (sharp), and section pacing confirms these tokens.", "borderStyle": "Thin (1px), solid borders used extensively as structural dividers in lists, stats, and tables.", "buttonStyle": "Solid, sharp-edged rectangles (often black on light, or white on dark) containing bold, uppercase, highly-tracked sans-serif text.", "cornerStyle": "Strictly sharp corners across all buttons, images, and layout containers.", "contentWidth": "Wide max-width with elements often breaking the grid or spanning full viewport width, but maintaining alignment down central columns.", "spacingRhythm": "Generous spacing with large macro-margins between sections, allowing the large typography and imagery to breathe." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root: 1440×1377px; block; padding {"top":"158.4px","left":"43.2px","right":"43.2px","bottom":"0px"}; gap normal; background rgb(241, 237, 228); radius 0px. - Observed gaps: 4px. - Representative content widths: 940, 634, 240px. - Layout containers: 1; cards/surfaces: 1; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 12474, "bottom": 13551, "pageHeight": 13551 } }, "container": { "size": "1440×1377px", "position": "x 0px, y 12800px", "display": "block", "positionMode": "relative", "padding": { "top": "158.4px", "left": "43.2px", "right": "43.2px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgb(241, 237, 228)", "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "none", "overflow": "clip" }, "spacing": { "observedGapsPx": [ 4 ], "representativeContentWidthsPx": [ 940, 634, 240 ] }, "columns": [ { "element": "p · Northern WireReview of Kelvin 2026", "size": "240×93px", "position": "x 1031px, y 13244px", "display": "grid", "template": "203.25px", "direction": "row", "gap": "4px" } ] } ``` #### Cards and surfaces ```json { "cards": [ { "element": "p · Northern WireReview of Kelvin 2026", "size": "240×93px", "position": "x 1031px, y 13244px", "padding": [ "16px", "17.6px", "16px", "17.6px" ], "radius": "0px", "border": "1px solid rgb(17, 13, 25)", "shadow": "none", "background": "rgb(241, 237, 228)" } ], "surfaces": { "radii": [], "borders": [ "1px solid rgb(17, 13, 25)" ], "shadows": [] } } ``` #### Media treatment ```json [] ``` #### 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-300", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 12800, "width": 1440, "height": 1377 }, "role": null, "label": "“The first festival where the crowd is the light show. You watch a room warm up in real time.” North", "border": "0px none rgb(17, 13, 25)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "158.4px", "left": "43.2px", "right": "43.2px", "bottom": "0px" }, "overflow": "clip", "position": "relative", "background": "rgb(241, 237, 228)" }, "cards": [ { "id": "ld-304", "tag": "p", "rect": { "x": 1031, "y": 13244, "width": 240, "height": 93 }, "role": null, "label": "Northern WireReview of Kelvin 2026", "border": "1px solid rgb(17, 13, 25)", "radius": "0px", "shadow": "none", "padding": [ "16px", "17.6px", "16px", "17.6px" ], "background": "rgb(241, 237, 228)" } ], "media": [], "bounds": { "top": 12474, "bottom": 13551, "pageHeight": 13551 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-304", "gap": "4px", "tag": "p", "rect": { "x": 1031, "y": 13244, "width": 240, "height": 93 }, "role": null, "label": "Northern WireReview of Kelvin 2026", "columns": "203.25px", "display": "grid", "direction": "row" } ], "spacing": { "gapsPx": [ 4 ], "representativeContentWidthsPx": [ 940, 634, 240 ] }, "coverage": { "cards": 1, "media": 0, "animations": 0, "elementsInSection": 9 }, "surfaces": { "radii": [], "borders": [ "1px solid rgb(17, 13, 25)" ], "shadows": [] }, "animations": [], "capturedAt": "2026-11-01T08:13:50.678Z", "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: Two-row structure: message+nav row over full-bleed cropped wordmark row; Column-based nav grouping with underline link styling; Hierarchy contrast between small serif heading and giant display wordmark - Dependencies: Custom brand gradient and wordmark asset; Specific serif/sans font pairing (Kalnia + Hubot Sans); Exact crop ratio of the giant logo at viewport edge - Guidance: Swap the wordmark asset, fonts, and gradient to retarget the brand while preserving the two-zone layout, column nav grid, and edge-cropped giant logotype treatment. ### 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 “Oversized wordmark footer”. Purpose: A bright footer featuring a sign-off message, organized link columns, and a massive gradient logo filling the bottom edge. Structure: Top row contains a large message on the left and link columns on the right; the bottom row is filled by edge-to-edge typography.. Source layout label: Top row contains a large message on the left and link columns on the right; the bottom row is filled by edge-to-edge typography.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: The bottom half is entirely consumed by a massive, colorful gradient version of the brand name, cropped at the bottom. Components: Sign-off heading, Navigation link columns, Social media links, Copyright and legal links, Giant gradient logo. Style direction: minimal, typographic, gradient. Observed crop: 1440×1077px (1.337:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"86.4px","family":"Kalnia","source":"computed","traits":"Regular","weight":"200","evidence":"font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'","sampleId":"font-5","confidence":0.95,"lineHeight":"88.1px","letterSpacing":"-1.7px"} {"role":"heading","size":"34.6px","family":"Hubot Sans","source":"computed","traits":"uppercase","weight":"800","evidence":"font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.","sampleId":"font-2","confidence":0.9,"lineHeight":"31.8px","letterSpacing":"0.2px"} {"role":"body","size":"17px","family":"Hubot Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.","sampleId":"font-12","confidence":0.95,"lineHeight":"26.4px","letterSpacing":"normal"} Color evidence: {"hex":"#F1EDE4","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#110D19","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.","sampleId":"color-2","confidence":0.9} {"hex":"#5B5664","name":"muted text","role":"muted-text","source":"computed","evidence":"color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.","sampleId":"color-4","confidence":0.8} Typography measured inside this section: {"id":"font-2","size":"34.6px","count":4,"family":"Hubot Sans","traits":"uppercase","weight":"800","contexts":[{"tag":"span","top":13261,"text":"Northern Wire","property":"font"},{"tag":"h3","top":14788,"text":"Friday pass","property":"font"},{"tag":"h3","top":14788,"text":"Saturday pass","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"31.8px","letterSpacing":"0.2px"} {"id":"font-18","size":"61.9px","count":1,"family":"Kalnia","traits":"Regular","weight":"200","contexts":[{"tag":"p","top":12959,"text":"“The first festival where the crowd is the light show. You watch a room warm up in real time.”","property":"font"}],"fontStack":"Kalnia, Georgia, serif","lineHeight":"63.2px","letterSpacing":"-1.2px"} {"id":"font-28","size":"15px","count":1,"family":"Hubot Sans","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":13297,"text":"Review of Kelvin 2026","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"23.3px","letterSpacing":"normal"} No section-bounded color samples were measured. Exact section measurements from the saved element map: root {"rect":{"x":0,"y":12800,"width":1440,"height":1377},"padding":{"top":"158.4px","left":"43.2px","right":"43.2px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"clip"}; spacing {"gapsPx":[4],"representativeContentWidthsPx":[940,634,240]}; surfaces {"radii":[],"borders":["1px solid rgb(17, 13, 25)"],"shadows":[]} Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Two-row structure: message+nav row over full-bleed cropped wordmark row; Column-based nav grouping with underline link styling; Hierarchy contrast between small serif heading and giant display wordmark. Dependencies: Custom brand gradient and wordmark asset; Specific serif/sans font pairing (Kalnia + Hubot Sans); Exact crop ratio of the giant logo at viewport edge. Adaptation guidance: Swap the wordmark asset, fonts, and gradient to retarget the brand while preserving the two-zone layout, column nav grid, and edge-cropped giant logotype treatment. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.