# Oversized gradient typographic hero Schema: Design Details SECTION.md v3.2 Website: Kelvin Source: https://kelvin.8b.com/ Source section IDs: c1719082-aa61-44ae-88b8-c7edec904a33 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A single huge wordmark (564px, light weight) fills the background while a tall 420×560 portrait sits across it, so the type and image read as one layered poster. - Supporting text is tiny by comparison: 12px tracked caps labels, a ~21px intro line, and a bold 66px date stack. This contrast makes the scale difference feel intentional and keeps the info easy to find. - Info is placed asymmetrically, with text left, image centre and dates right, on a warm off-white canvas with dark text, so the gradient letters are the only strong colour. What a screenshot can't show: - The wordmark drifts upward and shrinks slightly over about 4 seconds while the portrait slides down against it. - The image layer runs a 6-second ease-in-out alternate loop, moving from roughly +30% to -44% vertically, so the swap never rests. Borrow: Layer a framed image over oversized type and move the two in opposite directions, so the overlap feels alive and ties to the concept. Leave alone: Don't copy the thermal heat-map gradient, the Kelvin name or the thin oval motif; for the type, use a free geometric sans in place of Hubot Sans. ## Classification - Type: hero - Layout: Background-filling large text with absolute-positioned elements overlapping the central composition. - Styles: bold, gradient, typographic, colourful - Confidence: 100% ## Purpose and structure A bold hero section featuring massive, screen-filling gradient typography with an overlapping rectangular image and text details. Visual signature: A giant, colorful gradient wordmark that is partially obscured by a central portrait image. ## Components - Oversized wordmark - Central image poster - Text box with event details - Call to action buttons ## 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 - 0.0–4.0s — The large 'KELVIN' text translates upwards and scales down slightly, while the central portrait image translates downwards relative to the text. (95% confidence) ## Section quality Overall: 65.95/100 (Good) Scored coverage: 100% - Typography: 68 — Giant gradient wordmark 'KELVIN' creates strong scale-driven hierarchy, paired with crisp uppercase labels (LIVE IN HEAT, date block) in a condensed sans. The gradient fill ties the type to the thermal-camera concept rather than being decorative alone, but the supporting type (body copy, date stack) is conventional festival-poster styling. Next tier: Needs a more distinctive typeface pairing or custom letterforms beyond a stock gradient treatment to move past familiar festival-poster conventions. - Composition: 72 — Strong oversized-type-plus-overlapping-image composition: the thermal/visible image stack bisects the wordmark at the crossbar height, three info blocks are placed with deliberate asymmetric balance (left text, center image column, right date block), and a thin ellipse outline ties the eye to the headline tag. The layering of image over text is a genuine structural idea, not just decoration. Next tier: Grid is still a fairly standard three-column hero; to reach exceptional it would need more unexpected spatial tension or a less predictable placement of the info blocks relative to the type mass. - Motion: 58 — Deterministic animation data confirms the visible/thermal image layer cross-fades or shifts via translateY on a 6s alternate loop, and Gemini's timestamped observation confirms the big wordmark translates/scales while the image moves opposite in the first 4 seconds. This is a competent parallax-driven reveal tied to the thermal concept, but it's a single simple loop, not layered or scroll-driven choreography. Next tier: Add more varied, concept-tied motion (e.g., thermal sweep syncing further with scroll, text gradient hue-shift) beyond one translateY loop to earn higher distinction. - Content: 65 — Content (thermal-camera concept, venue, dates, CTAs) is tightly integrated into the visual gimmick — the thermal/visible photo swap literally embodies the 'Live in Heat' copy, giving thematic coherence between words and imagery. Next tier: Secondary content blocks (dates, description) are placed in generic boxed cards that don't share the same visual language as the thermal imagery, limiting full integration. - Originality: 70 — The combination of a giant gradient wordmark literally bisected by a stacked thermal/portrait image, with a thin oval motif linking the tagline, is a distinctive, well-considered idea specific to the event's concept rather than a generic trend application. Next tier: Oversized gradient type and overlapping hero image are established hero patterns; without a further twist unique to this execution (e.g. interactive thermal reveal on hover/scroll-linked), it stays in the strong tier rather than wow. - Adaptability: 60 — Structure is clearly separable: oversized text layer, image stack layer, and two boxed info panels are distinct DOM elements with independent positioning, fonts and colors documented, making it feasible to reskin with a different name/gradient/image set. Next tier: Dependency on a specific thermal/visible image pair effect and precise type-to-image vertical alignment makes full structural reuse non-trivial without matching assets. Strengths: - Oversized gradient wordmark bisected by stacked thermal/visible portrait imagery creates a strong, thematically-tied focal point - Three-zone asymmetric layout (text card, image column, date block) achieves balance despite extreme scale differences - Motion directly reinforces the thermal-camera concept rather than being generic parallax Weaknesses: - Supporting UI elements (buttons, date card) use fairly generic boxed-with-border styling that contrasts with the bold hero concept - Single translateY loop is the only confirmed motion, limiting dynamism - Secondary type and card components feel templated compared to the standout wordmark treatment Why it does not reach the next tier: The section has a genuinely distinctive core idea (thermal image bisecting gradient type) but surrounding components (date card, text card, buttons) default to generic bordered-box conventions, and motion is confirmed to be a single simple loop, keeping the whole short of the exceptional tier. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the layered type+image overlap structure and three-zone grid; swap imagery/gradient, keep boxed info-card styling only if brand tone matches, otherwise redesign the card chrome. What transfers: - Oversized gradient wordmark overlapped by a centered image stack - Three-zone layout: left descriptive card, center image/type stack, right date card - translateY loop animation on the central image layer Dependencies: - Specific thermal-camera-style image pair (visible + thermal) sourced for this event - Gradient color stops tuned to this brand's palette - Exact vertical alignment of image block against type crossbar height ## 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 scoring limited to the single animation and timestamp range supplied - No deterministic data on hover/scroll-triggered behavior beyond the 6s loop - Exact gradient stops and gradient technique (CSS vs SVG) not specified ## 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: hero - Source type: hero - Structure: Background-filling large text with absolute-positioned elements overlapping the central composition. - Layout: Background-filling large text with absolute-positioned elements overlapping the central composition. - Styles: bold, gradient, typographic, colourful - Components: Oversized wordmark, Central image poster, Text box with event details, Call to action buttons - Purpose: A bold hero section featuring massive, screen-filling gradient typography with an overlapping rectangular image and text details. - Visual signature: A giant, colorful gradient wordmark that is partially obscured by a central portrait image. - Place on the page: 2 of 11, after Navigation (`kelvin-8b-com:C01`), before Stats (`kelvin-8b-com:C03`) ### Crop and composition - Crop: 1440×936px; aspect ratio 1.538:1 - Page bounds: 64–1000px 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": "body/supporting copy", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "12px", "weight": "650", "lineHeight": "15.6px", "letterSpacing": "1.4px", "sample": "Sound in heat · 2027", "element": "span", "occurrences": 56, "sourceId": "font-1" }, { "role": "card/subheading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "20.9px", "weight": "450", "lineHeight": "29.6px", "letterSpacing": "-0.1px", "sample": "Three nights of music, filmed through thermal cameras and projected back into a former power station", "element": "p", "occurrences": 8, "sourceId": "font-13" }, { "role": "section heading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "66.2px", "weight": "800", "lineHeight": "60.9px", "letterSpacing": "0.3px", "sample": "23—25July", "element": "p", "occurrences": 1, "sourceId": "font-16" }, { "role": "section heading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Kelvin Narrow\", sans-serif", "size": "564px", "weight": "300", "lineHeight": "564px", "letterSpacing": "normal", "sample": "K", "element": "span", "occurrences": 18, "sourceId": "font-20" }, { "role": "UI/supporting text", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "13px", "weight": "700", "lineHeight": "13px", "letterSpacing": "1.2px", "sample": "Passes", "element": "span", "occurrences": 6, "sourceId": "font-24" }, { "role": "section heading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "34px", "weight": "700", "lineHeight": "52.7px", "letterSpacing": "normal", "sample": "Kelvin", "element": "span", "occurrences": 1, "sourceId": "font-26" }, { "role": "UI/supporting text", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "17px", "weight": "600", "lineHeight": "26.4px", "letterSpacing": "normal", "sample": "See the lineup", "element": "a", "occurrences": 10, "sourceId": "font-30" } ], "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": [ { "value": "#2D18A8", "cssValue": "rgb(45, 24, 168)", "alpha": 1, "appliedAs": [ "background" ], "occurrences": 19, "sourceId": "color-3" }, { "value": "#BCB6C6", "cssValue": "rgb(188, 182, 198)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 32, "sourceId": "color-5" }, { "value": "#000000", "cssValue": "rgb(0, 0, 0)", "alpha": 1, "appliedAs": [ "svg-fill" ], "occurrences": 3, "sourceId": "color-6" } ], "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×1000px; grid; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(241, 237, 228); radius 0px. - Representative content widths: 720, 420, 293, 253, 241px. - Layout containers: 1; cards/surfaces: 0; media elements: 3; browser animations: 1. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 64, "bottom": 1000, "pageHeight": 13551 } }, "container": { "size": "1440×1000px", "position": "x 0px, y 0px", "display": "grid", "positionMode": "relative", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "1440px", "background": "rgb(241, 237, 228)", "radius": "0px", "border": "0px none rgb(17, 13, 25)", "shadow": "none", "overflow": "clip" }, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [ 720, 420, 293, 253, 241 ] }, "columns": [ { "element": "section · KelvinKELVIN Live in heat Centrale Noord · Rotterdam 23—25July 2027 · three nights Three nights of m", "size": "1440×1000px", "position": "x 0px, y 0px", "display": "grid", "template": "1440px", "direction": "row", "gap": "normal" } ] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [ "1px solid rgb(17, 13, 25)" ], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · m-photo-heat__img", "size": "420×560px", "position": "x 510px, y 110px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 30%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1586907835000-f692bbd4c9e0?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60" }, { "element": "img · m-photo-heat__visible", "size": "420×560px", "position": "x 510px, y 110px", "aspectRatio": 0.8, "objectFit": "cover", "objectPosition": "50% 30%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1586907835000-f692bbd4c9e0?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60" }, { "element": "svg · svg", "size": "720×150px", "position": "x 360px, y 80px", "aspectRatio": 4.8, "objectFit": "fill", "objectPosition": "50% 50%", "radius": "0px", "overflow": "visible", "source": "source not captured" } ] ``` #### Browser-exposed animation parameters ```json [ { "target": "m-photo-heat__visible", "delayMs": 0, "durationMs": 6000, "easing": "linear", "iterations": null, "direction": "alternate", "fill": "none", "keyframes": [ { "easing": "ease-in-out", "offset": 0, "composite": "auto", "transform": "translateY(29.9%)", "computedOffset": 0 }, { "easing": "ease-in-out", "offset": 1, "composite": "auto", "transform": "translateY(-44.2%)", "computedOffset": 1 } ] } ] ``` ### 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-38", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 0, "width": 1440, "height": 1000 }, "role": null, "label": "KelvinKELVIN Live in heat Centrale Noord · Rotterdam 23—25July 2027 · three nights Three nights of m", "border": "0px none rgb(17, 13, 25)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": "1440px", "display": "grid", "padding": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "overflow": "clip", "position": "relative", "background": "rgb(241, 237, 228)" }, "cards": [], "media": [ { "id": "ld-58", "tag": "img", "rect": { "x": 510, "y": 110, "width": 420, "height": 560 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "A woman with long hair and pink-framed glasses, seen through a thermal camera", "src": "https://images.unsplash.com/photo-1586907835000-f692bbd4c9e0?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60", "naturalWidth": 400, "naturalHeight": 643 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 30%" }, { "id": "ld-60", "tag": "img", "rect": { "x": 510, "y": 110, "width": 420, "height": 560 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1586907835000-f692bbd4c9e0?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8N3x8cG9ydHJhaXQlMjBzdW5nbGFzc2VzJTIwc3R1ZGlvfGVufDF8MXx8fDE3OTEwNjMwMTB8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=400&q=60", "naturalWidth": 400, "naturalHeight": 643 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 0.8, "objectPosition": "50% 30%" }, { "id": "ld-63", "tag": "svg", "rect": { "x": 360, "y": 80, "width": 720, "height": 150 }, "role": null, "label": "svg", "media": null, "radius": "0px", "overflow": "visible", "objectFit": "fill", "aspectRatio": 4.8, "objectPosition": "50% 50%" } ], "bounds": { "top": 64, "bottom": 1000, "pageHeight": 13551 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-38", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 0, "width": 1440, "height": 1000 }, "role": null, "label": "KelvinKELVIN Live in heat Centrale Noord · Rotterdam 23—25July 2027 · three nights Three nights of m", "columns": "1440px", "display": "grid", "direction": "row" } ], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 720, 420, 293, 253, 241 ] }, "coverage": { "cards": 0, "media": 3, "animations": 1, "elementsInSection": 20 }, "surfaces": { "radii": [], "borders": [ "1px solid rgb(17, 13, 25)" ], "shadows": [] }, "animations": [ { "id": "animation-3", "fill": "none", "easing": "linear", "target": { "id": "ld-60", "tag": "img", "rect": { "x": 510, "y": 110, "width": 420, "height": 560 }, "role": null, "label": "m-photo-heat__visible" }, "delayMs": 0, "direction": "alternate", "keyframes": [ { "easing": "ease-in-out", "offset": 0, "composite": "auto", "transform": "translateY(29.9%)", "computedOffset": 0 }, { "easing": "ease-in-out", "offset": 1, "composite": "auto", "transform": "translateY(-44.2%)", "computedOffset": 1 } ], "playState": "running", "durationMs": 6000, "iterations": null, "playbackRate": 1 } ], "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 1. **observed sequence** — The large 'KELVIN' text translates upwards and scales down slightly, while the central portrait image translates downwards relative to the text. (0s–4s; 95% 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: medium - What transfers: Oversized gradient wordmark overlapped by a centered image stack; Three-zone layout: left descriptive card, center image/type stack, right date card; translateY loop animation on the central image layer - Dependencies: Specific thermal-camera-style image pair (visible + thermal) sourced for this event; Gradient color stops tuned to this brand's palette; Exact vertical alignment of image block against type crossbar height - Guidance: Reuse the layered type+image overlap structure and three-zone grid; swap imagery/gradient, keep boxed info-card styling only if brand tone matches, otherwise redesign the card chrome. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original hero section inspired by the design evidence titled “Oversized gradient typographic hero”. Purpose: A bold hero section featuring massive, screen-filling gradient typography with an overlapping rectangular image and text details. Structure: Background-filling large text with absolute-positioned elements overlapping the central composition.. Source layout label: Background-filling large text with absolute-positioned elements overlapping the central composition.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A giant, colorful gradient wordmark that is partially obscured by a central portrait image. Components: Oversized wordmark, Central image poster, Text box with event details, Call to action buttons. Style direction: bold, gradient, typographic, colourful. Observed crop: 1440×936px (1.538: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-1","size":"12px","count":56,"family":"Hubot Sans","traits":"uppercase","weight":"650","contexts":[{"tag":"span","top":27,"text":"Sound in heat · 2027","property":"font"},{"tag":"span","top":127,"text":"Live in heat","property":"font"},{"tag":"p","top":166,"text":"Centrale Noord · Rotterdam","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"15.6px","letterSpacing":"1.4px"} {"id":"font-13","size":"20.9px","count":8,"family":"Hubot Sans","traits":"Regular","weight":"450","contexts":[{"tag":"p","top":137,"text":"Three nights of music, filmed through thermal cameras and projected back into a former power station","property":"font"},{"tag":"p","top":1853,"text":"Six thermal cameras hang from the gantry of an old turbine hall. They see no faces and no clothes, o","property":"font"},{"tag":"p","top":5066,"text":"Bruma, Field Hum, Hollow Coast, Tamsin Rhee, Kaito Mori, Night Swim, Saskia Veld, Port Siren, Elan M","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"29.6px","letterSpacing":"-0.1px"} {"id":"font-16","size":"66.2px","count":1,"family":"Hubot Sans","traits":"uppercase","weight":"800","contexts":[{"tag":"p","top":207,"text":"23—25July","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"60.9px","letterSpacing":"0.3px"} {"id":"font-20","size":"564px","count":18,"family":"Hubot Sans","traits":"uppercase","weight":"300","contexts":[{"tag":"span","top":416,"text":"K","property":"font"},{"tag":"span","top":416,"text":"E","property":"font"},{"tag":"span","top":416,"text":"L","property":"font"}],"fontStack":"\"Hubot Sans\", \"Kelvin Narrow\", sans-serif","lineHeight":"564px","letterSpacing":"normal"} {"id":"font-24","size":"13px","count":6,"family":"Hubot Sans","traits":"uppercase","weight":"700","contexts":[{"tag":"span","top":23,"text":"Passes","property":"font"},{"tag":"span","top":291,"text":"Get passes","property":"font"},{"tag":"span","top":14967,"text":"Choose","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"13px","letterSpacing":"1.2px"} {"id":"font-26","size":"34px","count":1,"family":"Hubot Sans","traits":"Regular","weight":"700","contexts":[{"tag":"span","top":415,"text":"Kelvin","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"52.7px","letterSpacing":"normal"} {"id":"font-30","size":"17px","count":10,"family":"Hubot Sans","traits":"Regular","weight":"600","contexts":[{"tag":"a","top":283,"text":"See the lineup","property":"font"},{"tag":"a","top":15082,"text":"hello@kelvin-festival.com","property":"font"},{"tag":"a","top":15592,"text":"hello@kelvin-festival.com","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"26.4px","letterSpacing":"normal"} Colors measured inside this section: {"id":"color-3","hex":"#2D18A8","alpha":1,"count":19,"contexts":[{"tag":"figure","top":110,"text":"Live in heat","property":"background"}],"cssValue":"rgb(45, 24, 168)"} {"id":"color-5","hex":"#BCB6C6","alpha":1,"count":32,"contexts":[{"tag":"p","top":338,"text":"2027 · three nights","property":"text"},{"tag":"span","top":2144,"text":"nights in July","property":"text"},{"tag":"li","top":14836,"text":"Entry Friday 19:00–02:00","property":"text"}],"cssValue":"rgb(188, 182, 198)"} {"id":"color-6","hex":"#000000","alpha":1,"count":3,"contexts":[{"tag":"svg","top":80,"text":"","property":"svg-fill"}],"cssValue":"rgb(0, 0, 0)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":0,"width":1440,"height":1000},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":"1440px","overflow":"clip"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[720,420,293,253,241]}; surfaces {"radii":[],"borders":["1px solid rgb(17, 13, 25)"],"shadows":[]}; media [{"tag":"img","rect":{"x":510,"y":110,"width":420,"height":560},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 30%","radius":"0px"},{"tag":"img","rect":{"x":510,"y":110,"width":420,"height":560},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 30%","radius":"0px"},{"tag":"svg","rect":{"x":360,"y":80,"width":720,"height":150},"aspectRatio":4.8,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-60","tag":"img","rect":{"x":510,"y":110,"width":420,"height":560},"role":null,"label":"m-photo-heat__visible"},"delayMs":0,"durationMs":6000,"easing":"linear","keyframes":[{"easing":"ease-in-out","offset":0,"composite":"auto","transform":"translateY(29.9%)","computedOffset":0},{"easing":"ease-in-out","offset":1,"composite":"auto","transform":"translateY(-44.2%)","computedOffset":1}]}] Motion evidence: observed sequence: The large 'KELVIN' text translates upwards and scales down slightly, while the central portrait image translates downwards relative to the text. (95% confidence) Transfer these principles: Oversized gradient wordmark overlapped by a centered image stack; Three-zone layout: left descriptive card, center image/type stack, right date card; translateY loop animation on the central image layer. Dependencies: Specific thermal-camera-style image pair (visible + thermal) sourced for this event; Gradient color stops tuned to this brand's palette; Exact vertical alignment of image block against type crossbar height. Adaptation guidance: Reuse the layered type+image overlap structure and three-zone grid; swap imagery/gradient, keep boxed info-card styling only if brand tone matches, otherwise redesign the card chrome. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.