# Dark venue details and newsletter Schema: Design Details SECTION.md v3.2 Website: Kelvin Source: https://kelvin.8b.com/ Source section IDs: d3f867ad-36ee-4a6f-a112-1502e2e5f8be Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A tall heat-mapped photo fills the left half and sets the mood, and its story matches the copy about being cold since 1998 and warm for three nights. - The right column stacks address, transit table, contact links and signup in order, with thin rules between blocks so dense information stays easy to scan. - Huge thin display type sits above small uppercase tracked labels and tabular body text, giving a clear hierarchy on the dark ground. What a screenshot can't show: - The recording showed no motion, so hover, focus and scroll behaviour are unknown. - No font sizes, letter spacing or gaps were measured, so the exact scale and padding can't be read from the image. Borrow: Treat one striking, on-concept image as the emotional anchor, then pair it with a calm, ruled stack of practical details. Leave alone: Don't copy the thermal-image treatment, the Kalnia thin display face or the gradient-underlined links; use your own image idea and a light serif such as a free high-contrast display serif. ## Classification - Type: contact - Layout: A 2-column split with a large image on the left and stacked typography/form inputs on the right. - Styles: bold, photographic, editorial - Confidence: 100% ## Purpose and structure A dark section containing a large atmospheric photo alongside location details, transit directions, and an email capture form. Visual signature: A glowing thermal image of columns paired with detailed tabular text and a clean email signup field on a dark background. ## Components - Large location image - Venue address - Transit directions table - Contact email and phone - Newsletter email input - Subscribe button ## 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: 65.76/100 (Good) Scored coverage: 85% - Typography: 66 — Clear hierarchy from huge thin-weight Kalnia display down to uppercase tracked labels and tabular body text; gradient underlines on email/phone add a distinctive touch. Letter-spacing and weight contrast are deliberate and legible, though the system is a fairly conventional editorial pairing. Next tier: Needs a more unusual typographic move beyond big serif headline over uppercase sans labels to feel singular rather than familiar editorial convention. - Composition: 68 — Confident 2-column split with a tall full-bleed thermal image anchoring the left and a disciplined right-hand stack of address, transit table, contact, and form; thin rule dividers organize dense information without clutter, and generous padding keeps it breathing on a dark canvas. Next tier: Layout is a standard left-image/right-text contact template; nothing in the grid or spatial relationship is distinctive enough to separate it from competent info-dense contact sections. - Motion: not_assessed — No motion data supplied (animations array empty, no timestamped moments), so motion cannot be scored. Next tier: Provide timestamped visible motion evidence (hover states, transitions, image treatment reveal) to assess. - Content: 65 — Content is tightly integrated: the thermal/heat-mapped photo directly reinforces the 'cold since 1998, warm for three nights' copy, and the transit table plus caption ground the section in real specificity rather than generic stock contact info. Next tier: Needs tighter visual-copy fusion beyond one striking image choice, e.g., content that changes the layout itself rather than sitting in a standard template. - Originality: 69 — The thermal/heat-vision treatment of an empty venue is a genuinely distinctive and on-concept choice for a contact section, converting a plain location photo into a mood/narrative device tied to festival branding. Next tier: Surrounding structure (table, form, labels) reverts to conventional patterns; originality is concentrated in one asset treatment rather than pervading the whole section idea. - Adaptability: 60 — Structure separates cleanly: image panel, address block, data table, contact links, and form are independent deterministic modules with explicit grid/column values, making skin vs structure substitution straightforward. Next tier: Reliance on a custom thermal-image treatment and specific underline/gradient accents ties some visual identity to bespoke assets, limiting pure skin-only reuse. Strengths: - Thermal-imaged venue photo creates a distinctive, on-narrative visual anchor for an otherwise standard contact layout - Clear information hierarchy across address, transit table, contact, and newsletter form using consistent label/value typographic pairing - Thin rule dividers and tabular alignment keep dense logistical content legible without clutter Weaknesses: - Overall 2-column contact/newsletter structure is a common pattern with no distinctive layout innovation - Motion cannot be assessed due to lack of supplied animation evidence - Originality is concentrated almost entirely in one image treatment rather than the whole section concept Why it does not reach the next tier: The section is well organized and features one memorable visual idea (the heat-mapped photo), but the surrounding grid, table, and form follow conventional editorial contact-page patterns, so it reads as polished and purposeful rather than conceptually singular. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the grid, table, and form structure directly; swap in a different striking photographic treatment if the thermal effect isn't available, and keep the label/value divider pattern since it is the main structural asset separable from the specific imagery. What transfers: - 2-column image/content split grid - Transit/info table with label-value rows and divider rules - Email capture form with inline button - Uppercase tracked label typography system Dependencies: - Custom thermal/heat-mapped photographic asset - Gradient underline accent styling on contact links - Specific Kalnia/Hubot Sans typeface pairing ## 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 evidence was supplied, so interactive or transition behavior is unknown - Exact gradient color values and hover states are not confirmed by deterministic data - Responsive/mobile behavior is not evidenced in this desktop crop ## 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: contact - Source type: contact - Structure: two-column - Layout: A 2-column split with a large image on the left and stacked typography/form inputs on the right. - Styles: bold, photographic, editorial - Components: Large location image, Venue address, Transit directions table, Contact email and phone, Newsletter email input, Subscribe button - Purpose: A dark section containing a large atmospheric photo alongside location details, transit directions, and an email capture form. - Visual signature: A glowing thermal image of columns paired with detailed tabular text and a clean email signup field on a dark background. - Place on the page: 10 of 11, after FAQ (`kelvin-8b-com:C09`), before Footer (`kelvin-8b-com:C11`) ### Crop and composition - Crop: 1440×1165px; aspect ratio 1.236:1 - Page bounds: 11309–12474px of 13551px - 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": [], "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 container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 11309, "bottom": 12474, "pageHeight": 13551 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "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": null, "cards": [], "media": [], "bounds": { "top": 11309, "bottom": 12474, "pageHeight": 13551 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 0 }, "surfaces": { "radii": [], "borders": [], "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: medium - What transfers: 2-column image/content split grid; Transit/info table with label-value rows and divider rules; Email capture form with inline button; Uppercase tracked label typography system - Dependencies: Custom thermal/heat-mapped photographic asset; Gradient underline accent styling on contact links; Specific Kalnia/Hubot Sans typeface pairing - Guidance: Reuse the grid, table, and form structure directly; swap in a different striking photographic treatment if the thermal effect isn't available, and keep the label/value divider pattern since it is the main structural asset separable from the specific imagery. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; timestamped authored motion. ### Agent implementation prompt Create an original contact section inspired by the design evidence titled “Dark venue details and newsletter”. Purpose: A dark section containing a large atmospheric photo alongside location details, transit directions, and an email capture form. Structure: two-column. Source layout label: A 2-column split with a large image on the left and stacked typography/form inputs on the 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: A glowing thermal image of columns paired with detailed tabular text and a clean email signup field on a dark background. Components: Large location image, Venue address, Transit directions table, Contact email and phone, Newsletter email input, Subscribe button. Style direction: bold, photographic, editorial. Observed crop: 1440×1165px (1.236: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} No section-bounded typography samples were measured. No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]} Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: 2-column image/content split grid; Transit/info table with label-value rows and divider rules; Email capture form with inline button; Uppercase tracked label typography system. Dependencies: Custom thermal/heat-mapped photographic asset; Gradient underline accent styling on contact links; Specific Kalnia/Hubot Sans typeface pairing. Adaptation guidance: Reuse the grid, table, and form structure directly; swap in a different striking photographic treatment if the thermal effect isn't available, and keep the label/value divider pattern since it is the main structural asset separable from the specific imagery. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.