# Tiered schedule cards Schema: Design Details SECTION.md v3.2 Website: Kelvin Source: https://kelvin.8b.com/ Source section IDs: 1af696b9-d45b-4b19-bdcf-0571a2eb3626 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each card gets its own saturated colour and a photo recoloured to match its theme, so the three nights read as distinct and the concept is clear at a glance. - The oversized card titles, set at 85–112px in light, tightly tracked sans, dominate each panel and contrast with the small body text and a light serif heading. - Every card shares one structure (label, title, description, image, timetable), so the vertical offsets add rhythm without hurting legibility, and the left-aligned heading gives the eye an anchor. What a screenshot can't show: - The cards slide upward into place as the section enters view, over roughly 3 seconds in the recording, with no other motion noticed. - The heading is 60.5px light serif with -1.2px tracking, titles run 85–112px with tight line height (about 0.82), body text is 17–21px, and section padding is 158px top and bottom. Borrow: Tie each card's colour and image treatment to its content theme, and keep one repeated internal structure so strong colour and staggered placement stay readable. Leave alone: Don't copy the thermal-imaging spectrum idea, the pink/yellow/purple palette or the Kalnia and Hubot Sans pairing; use a free light serif and a neutral grotesque instead. ## Classification - Type: process - Layout: A 3-column grid where cards are offset vertically, accompanied by a left-aligned heading and intro paragraph. - Styles: colourful, bold, typographic - Confidence: 100% ## Purpose and structure Three vibrant, color-coded vertical cards detailing daily schedules, presented in a staggered layout. Visual signature: Three distinct, intensely colored vertical panels (pink, yellow, purple) containing images and timelines. ## Components - Section heading - Introductory text - Three vertical schedule cards - Timetable lists ## 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 - 15.0–18.0s — Three vertical schedule cards translate upwards into their final positions as the section comes into view. (95% confidence) ## Section quality Overall: 65.15/100 (Good) Scored coverage: 100% - Typography: 68 — Large serif display (Kalnia, light weight, tight tracking) paired with bold uppercase condensed sans headlines on each card (INFRARED/VISIBLE/ULTRAVIOLET) gives a clear two-tier hierarchy; card title size dominates the card and reads instantly against colour-saturated backgrounds, but the pairing itself is a fairly standard elegant-serif/bold-sans combo. Next tier: Needs a more unexpected typographic treatment (e.g. variable weight shifts, kinetic type tied to the spectrum concept) to move past a competent, if handsome, hierarchy. - Composition: 65 — Three vertically offset cards against a left-aligned heading/intro create an asymmetric but legible rhythm; consistent internal structure (eyebrow label, big title, description, image, timetable) gives each card parity despite staggering. Next tier: The staggered three-card layout is a recognizable pattern; nothing in the arrangement itself (spacing, offsets, scale variation) is distinct enough to separate it from generic agency-style tiered cards. - Motion: 54 — Gemini confirms a single specific motion moment: the three cards translate upward into position between 15–18s as the section enters view. This is a plain, common reveal with no distinguishing stagger detail or secondary motion reported. Next tier: Only one generic translate-in event is evidenced; no staggered timing, hover states, or secondary motion on the timetable/images is confirmed, which caps this at a basic reveal. - Content: 72 — Content is tightly integrated with concept: each card's photo is recoloured in a heat-map/thermal palette matching its wavelength name (pink/orange for infrared, yellow/pink for visible, purple/blue for ultraviolet), and the timetable lists are real, specific schedule data rather than placeholder text. Next tier: While the image treatment supports the concept well, the timetable/list styling itself is plain thin-line dividers with no further content-driven device to push it toward exceptional integration. - Originality: 73 — The spectrum metaphor—infrared/visible/ultraviolet mapped to thermal-imaging-style photo treatments and matching gradient card backgrounds—is a genuinely specific conceptual idea rather than a generic colour choice, giving the section a distinct identity tied to its content. Next tier: The underlying card/list/image structure is a common vertical-card pattern; without the colour-and-image concept it would be unremarkable, so originality rests on one clever device rather than pervasive inventive details. - Adaptability: 58 — The card component (label, title, description, image, timetable list) is clearly modular and the grid/offset positions are deterministic and reusable with any copy or schedule data. Next tier: The core identity depends on the thermal/heat-map image filter and specific gradient-per-card mapping, which are harder to decouple from the visual skin without losing the section's conceptual point. Strengths: - Spectrum concept (infrared/visible/ultraviolet) consistently ties colour, typography and recoloured imagery together - Clear per-card hierarchy: eyebrow label, bold display title, description, image, and real timetable data - Elegant serif section heading contrasts effectively with bold condensed card titles Weaknesses: - Staggered three-card layout is a common pattern without a distinguishing structural twist - Only one generic translate-up entrance animation is evidenced, with no secondary or staggered motion confirmed - Thin-line timetable dividers are plain and don't extend the section's visual concept into its data presentation Why it does not reach the next tier: The section's single strong idea (colour-matched thermal imagery per night) is well executed but surrounded by a conventional staggered-card composition and only one plain entrance animation, so it lacks the pervasive, hard-to-substitute detail work needed for a 70+ memorable rating. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the card schema (label, title, description, image, timetable) and staggered grid as-is; the colour/image concept requires sourcing or generating comparable themed imagery and a matching gradient system to preserve the section's identity. What transfers: - Card structure: eyebrow label + large title + description + image + timetable list - Three-column staggered grid layout with offset vertical positions - Heading + intro paragraph pairing above the card row Dependencies: - Thermal/heat-map image filter effect tied to each card's theme - Specific per-card gradient backgrounds (pink/orange, yellow/pink, purple/blue) mapped to the spectrum concept - Condensed bold uppercase display font for card titles ## 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 scored from a single Gemini-reported event; any additional stagger or hover interactions are unconfirmed - No deterministic evidence of radius/shadow/animation parameters beyond what's stated, so finer execution details are unassessed ## 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: steps - Source type: process - Structure: grid - Layout: A 3-column grid where cards are offset vertically, accompanied by a left-aligned heading and intro paragraph. - Styles: colourful, bold, typographic - Components: Section heading, Introductory text, Three vertical schedule cards, Timetable lists - Purpose: Three vibrant, color-coded vertical cards detailing daily schedules, presented in a staggered layout. - Visual signature: Three distinct, intensely colored vertical panels (pink, yellow, purple) containing images and timelines. - Place on the page: 5 of 11, after Gallery (`kelvin-8b-com:C04`), before Gallery (`kelvin-8b-com:C06`) ### Crop and composition - Crop: 1440×1492px; aspect ratio 0.965:1 - Page bounds: 4613–6105px of 13551px - Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system. ### 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": "112px", "weight": "300", "lineHeight": "91.8px", "letterSpacing": "-1.1px", "sample": "Infrared", "element": "h3", "occurrences": 2, "sourceId": "font-3" }, { "role": "section heading", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "85px", "weight": "300", "lineHeight": "69.7px", "letterSpacing": "-0.8px", "sample": "Ultraviolet", "element": "h3", "occurrences": 1, "sourceId": "font-6" }, { "role": "section heading", "family": "Kalnia", "stack": "Kalnia, Georgia, serif", "size": "60.5px", "weight": "200", "lineHeight": "61.7px", "letterSpacing": "-1.2px", "sample": "Three nights, three wavelengths", "element": "h2", "occurrences": 1, "sourceId": "font-8" }, { "role": "body/supporting copy", "family": "Hubot Sans", "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif", "size": "17px", "weight": "400", "lineHeight": "26.4px", "letterSpacing": "normal", "sample": "The cameras follow the people who make the room warm. This summer that means live electronics, a thr", "element": "p", "occurrences": 27, "sourceId": "font-12" }, { "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" } ], "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": "#5B5664", "cssValue": "rgb(91, 86, 100)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 20, "sourceId": "color-4" } ], "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×1491px; block; padding {"top":"158.4px","left":"43.2px","right":"43.2px","bottom":"158.4px"}; gap normal; background rgb(241, 237, 228); radius 0px. - Representative content widths: 757, 728, 548, 476, 462, 383px. - Layout containers: 0; cards/surfaces: 0; media elements: 2; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 4613, "bottom": 6105, "pageHeight": 13551 } }, "container": { "size": "1440×1491px", "position": "x 0px, y 5314px", "display": "block", "positionMode": "relative", "padding": { "top": "158.4px", "left": "43.2px", "right": "43.2px", "bottom": "158.4px" }, "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "gap": "normal", "columns": "not captured", "background": "rgb(241, 237, 228)", "radius": "0px", "border": "not captured", "shadow": "none", "overflow": "visible" }, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [ 757, 728, 548, 476, 462, 383 ] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### Media treatment ```json [ { "element": "img · m-photo-heat__img", "size": "462×347px", "position": "x 489px, y 5947px", "aspectRatio": 1.3, "objectFit": "cover", "objectPosition": "50% 82%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60" }, { "element": "img · m-photo-heat__visible", "size": "462×347px", "position": "x 489px, y 5947px", "aspectRatio": 1.3, "objectFit": "cover", "objectPosition": "50% 82%", "radius": "0px", "overflow": "clip", "source": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60" } ] ``` #### 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-167", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 5314, "width": 1440, "height": 1491 }, "role": null, "label": "Three nights, three wavelengths Each night is tuned to a part of the spectrum the cameras can read, ", "border": "", "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": "158.4px" }, "overflow": "visible", "position": "relative", "background": "rgb(241, 237, 228)" }, "cards": [], "media": [ { "id": "ld-202", "tag": "img", "rect": { "x": 489, "y": 5947, "width": 462, "height": 347 }, "role": null, "label": "m-photo-heat__img", "media": { "alt": "A DJ in headphones and sunglasses behind the decks, in heat colours", "src": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60", "naturalWidth": 700, "naturalHeight": 1050 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.3, "objectPosition": "50% 82%" }, { "id": "ld-204", "tag": "img", "rect": { "x": 489, "y": 5947, "width": 462, "height": 347 }, "role": null, "label": "m-photo-heat__visible", "media": { "alt": "", "src": "https://images.unsplash.com/photo-1653423954398-7a83c64049f6?ixid=M3w0Mzc5fDB8MXxzZWFyY2h8Nnx8ZGolMjBwZXJmb3JtaW5nfGVufDF8MXx8fDE3OTEwNjMwMzh8MA&ixlib=rb-4.1.0&auto=format&fit=crop&w=700&q=60", "naturalWidth": 700, "naturalHeight": 1050 }, "radius": "0px", "overflow": "clip", "objectFit": "cover", "aspectRatio": 1.3, "objectPosition": "50% 82%" } ], "bounds": { "top": 4613, "bottom": 6105, "pageHeight": 13551 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [ 757, 728, 548, 476, 462, 383 ] }, "coverage": { "cards": 0, "media": 2, "animations": 0, "elementsInSection": 16 }, "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 1. **observed sequence** — Three vertical schedule cards translate upwards into their final positions as the section comes into view. (15s–18s; 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: Card structure: eyebrow label + large title + description + image + timetable list; Three-column staggered grid layout with offset vertical positions; Heading + intro paragraph pairing above the card row - Dependencies: Thermal/heat-map image filter effect tied to each card's theme; Specific per-card gradient backgrounds (pink/orange, yellow/pink, purple/blue) mapped to the spectrum concept; Condensed bold uppercase display font for card titles - Guidance: Reuse the card schema (label, title, description, image, timetable) and staggered grid as-is; the colour/image concept requires sourcing or generating comparable themed imagery and a matching gradient system to preserve the section's identity. ### Evidence readiness - Coverage: 7/7 - Can build: Yes - Missing facts: None ### Agent implementation prompt Create an original steps section inspired by the design evidence titled “Tiered schedule cards”. Purpose: Three vibrant, color-coded vertical cards detailing daily schedules, presented in a staggered layout. Structure: grid. Source layout label: A 3-column grid where cards are offset vertically, accompanied by a left-aligned heading and intro paragraph.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system. Visual signature to preserve at the pattern level: Three distinct, intensely colored vertical panels (pink, yellow, purple) containing images and timelines. Components: Section heading, Introductory text, Three vertical schedule cards, Timetable lists. Style direction: colourful, bold, typographic. Observed crop: 1440×1492px (0.965: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-3","size":"112px","count":2,"family":"Hubot Sans","traits":"uppercase","weight":"300","contexts":[{"tag":"h3","top":5871,"text":"Infrared","property":"font"},{"tag":"h3","top":5791,"text":"Visible","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"91.8px","letterSpacing":"-1.1px"} {"id":"font-6","size":"85px","count":1,"family":"Hubot Sans","traits":"uppercase","weight":"300","contexts":[{"tag":"h3","top":5927,"text":"Ultraviolet","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"69.7px","letterSpacing":"-0.8px"} {"id":"font-8","size":"60.5px","count":1,"family":"Kalnia","traits":"Regular","weight":"200","contexts":[{"tag":"h2","top":5473,"text":"Three nights, three wavelengths","property":"font"}],"fontStack":"Kalnia, Georgia, serif","lineHeight":"61.7px","letterSpacing":"-1.2px"} {"id":"font-12","size":"17px","count":27,"family":"Hubot Sans","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":3139,"text":"The cameras follow the people who make the room warm. This summer that means live electronics, a thr","property":"font"},{"tag":"p","top":5980,"text":"Slow heat. Live sets with long builds, the hall warming one degree at a time.","property":"font"},{"tag":"p","top":5900,"text":"The full spectrum. The long night, both floors open until four.","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"26.4px","letterSpacing":"normal"} {"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"} Colors measured inside this section: {"id":"color-4","hex":"#5B5664","alpha":1,"count":20,"contexts":[{"tag":"span","top":27,"text":"Sound in heat · 2027","property":"text"},{"tag":"p","top":3139,"text":"The cameras follow the people who make the room warm. This summer that means live electronics, a thr","property":"text"},{"tag":"h3","top":5066,"text":"Also in the hall","property":"text"}],"cssValue":"rgb(91, 86, 100)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5314,"width":1440,"height":1491},"padding":{"top":"158.4px","left":"43.2px","right":"43.2px","bottom":"158.4px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[757,728,548,476,462,383]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":489,"y":5947,"width":462,"height":347},"aspectRatio":1.3,"objectFit":"cover","objectPosition":"50% 82%","radius":"0px"},{"tag":"img","rect":{"x":489,"y":5947,"width":462,"height":347},"aspectRatio":1.3,"objectFit":"cover","objectPosition":"50% 82%","radius":"0px"}] Motion evidence: observed sequence: Three vertical schedule cards translate upwards into their final positions as the section comes into view. (95% confidence) Transfer these principles: Card structure: eyebrow label + large title + description + image + timetable list; Three-column staggered grid layout with offset vertical positions; Heading + intro paragraph pairing above the card row. Dependencies: Thermal/heat-map image filter effect tied to each card's theme; Specific per-card gradient backgrounds (pink/orange, yellow/pink, purple/blue) mapped to the spectrum concept; Condensed bold uppercase display font for card titles. Adaptation guidance: Reuse the card schema (label, title, description, image, timetable) and staggered grid as-is; the colour/image concept requires sourcing or generating comparable themed imagery and a matching gradient system to preserve the section's identity. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.