# Large typography with lower stats Schema: Design Details SECTION.md v3.2 Website: Kelvin Source: https://kelvin.8b.com/ Source section IDs: d4f2bc2a-8d82-4895-a606-c5ebd4dda1ad Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Three clear type tiers: a huge cropped gradient wordmark bleeding off the top, a light 86px serif statement, and 92px thin numerals for the stats. - The vertical stack reads in order, from big lettering to statement to a four-column stat row, with plenty of empty space around the gradient letters. - The copy is concrete ('Six thermal cameras hang from the gantry…'), so the stats back up the story instead of floating free. What a screenshot can't show: - The recording showed no motion and no browser animations, so any reveal or hover behaviour is unknown. - Measured details: the statement is 86.4px at weight 200 with -1.7px tracking and 88px line height; body copy is 20.9px on 29.6px lines; stat numerals are 92px at weight 300; the columns are 338px wide with 8px gaps; the section has 43px side padding and 158px bottom padding. Borrow: Crop an oversized decorative word at the edge, then step the type down through a statement to small numerals so scale alone sets the hierarchy. Leave alone: Don't copy the thermal-camera gradient palette, the Kalnia and Hubot Sans pairing, or the music-venue copy; a light high-contrast serif and a neutral grotesque would work as free alternatives. ## Classification - Type: stats - Layout: Vertical stack of oversized decorative text, an intro paragraph, and a 4-column row of numerical stats. - Styles: bold, gradient, typographic - Confidence: 100% ## Purpose and structure A dark section dominated by large cropped gradient text at the top, leading into a concept statement and a row of four statistics. Visual signature: Striking dark background contrasting with bright gradient letters that fade into the dark, ending with clean numeric figures. ## Components - Decorative cropped letters - Large statement text - Supporting paragraph - Four-column statistics row ## 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: 69.82/100 (Good) Scored coverage: 85% - Typography: 74 — Strong serif display type (Kalnia, 200 weight) layered against oversized gradient wordmark letters creates a confident, editorial hierarchy; the thin-weight serif pairs well with the uppercase tracked sans for stats and labels, and scale contrast between the three text tiers (massive cropped wordmark, large serif statement, small stat numerals) is well controlled. Next tier: The stat numerals and labels, while clean, use fairly conventional treatment; to reach exceptional the type system would need a more distinctive numeral style or kerning/optical refinement unique to this section rather than a reused display font. - Composition: 72 — The vertical stack moves logically from oversized cropped lettering to statement text to a grounded four-column stat row, with the cropped wordmark bleeding off the top edge for scale and the hairline rule anchoring the stats; negative space is used deliberately to let the gradient letters breathe. Next tier: The paragraph block is isolated at the right with no strong grid relationship to the stats row or heading beyond proximity, slightly weakening the sense of a unified compositional system. - Motion: not_assessed — No motion evidence supplied; motion_moments is empty and no timestamped animation data exists for this section. Next tier: Provide timestamped visible motion evidence (e.g., gradient letter reveal, stat count-up) to assess this axis. - Content: 69 — Copy is tightly written and specific ('Six thermal cameras hang from the gantry of an old turbine hall'), and the stats translate abstract claims into concrete production facts that reinforce the narrative established by the heading. Next tier: The content is well-written but functions as a fairly standard stats-block pattern; it doesn't integrate visually with the imagery/typography beyond placement, limiting it from feeling like one inseparable idea. - Originality: 70 — The cropped, bleeding gradient wordmark overlapping the serif statement text is a distinctive move that isn't just large type or a trendy palette — it creates genuine depth and a layered reading experience uncommon in typical stat sections. Next tier: The stat row itself reverts to a conventional four-column numeral+label pattern seen across many sites, pulling down the section's overall distinctiveness from a landmark-level original system. - Adaptability: 62 — The structure (giant cropped word, statement, divider, 4-col stat grid) is clearly separable from its specific gradient and serif skin; the grid columns and spacing are deterministically defined (338px columns, 8px gaps), making structural reuse straightforward. Next tier: Reliance on a custom gradient treatment applied to cropped oversized lettering is a distinctive asset-dependent effect that requires bespoke recreation, preventing a higher adaptability score. Strengths: - Oversized cropped gradient wordmark creates striking depth and scale overlapping the statement text - Clear three-tier typographic hierarchy from massive display lettering to statement serif to compact stat numerals - Specific, concrete copy that reinforces the stat row rather than generic filler text - Deterministic grid (4 even columns, consistent gap) gives a tidy, legible stats presentation Weaknesses: - Stat row pattern (number + label in a row) is a common convention not elevated beyond typical implementations - Supporting paragraph sits somewhat disconnected from the stats and heading without a binding grid relationship - No motion evidence available to assess reveal or transition behavior Why it does not reach the next tier: The layered cropped-wordmark device is genuinely original, but the lower half of the section (paragraph plus four-column stats) reverts to a standard, easily-found pattern, and without confirmed motion the section cannot demonstrate the kind of fully resolved, hard-to-substitute execution required for exceptional tier. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the stack order and stat grid proportions directly; swap in brand fonts and colors while keeping the large cropped-letter-behind-statement layering technique, which is the section's distinguishing structural idea. What transfers: - Vertical stack structure: giant cropped word, statement text, divider, stat grid - Four-column even-width stat grid with consistent gap - Typographic hierarchy pairing serif display with uppercase tracked sans labels Dependencies: - Custom gradient treatment on oversized cropped lettering - Specific serif font (Kalnia) for emotional statement tone - Dark canvas background needed for gradient-on-black contrast effect ## 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 not assessed due to lack of timestamped evidence - Exact gradient color stops and font rendering details not independently verifiable from static crop - Judgment limited to this single crop; broader page context not considered ## 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: stats - Source type: stats - Structure: Vertical stack of oversized decorative text, an intro paragraph, and a 4-column row of numerical stats. - Layout: Vertical stack of oversized decorative text, an intro paragraph, and a 4-column row of numerical stats. - Styles: bold, gradient, typographic - Components: Decorative cropped letters, Large statement text, Supporting paragraph, Four-column statistics row - Purpose: A dark section dominated by large cropped gradient text at the top, leading into a concept statement and a row of four statistics. - Visual signature: Striking dark background contrasting with bright gradient letters that fade into the dark, ending with clean numeric figures. - Place on the page: 3 of 11, after Hero (`kelvin-8b-com:C02`), before Gallery (`kelvin-8b-com:C04`) ### Crop and composition - Crop: 1440×1318px; aspect ratio 1.093:1 - Page bounds: 1000–2318px 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": "Kalnia", "stack": "Kalnia, Georgia, serif", "size": "86.4px", "weight": "200", "lineHeight": "88.1px", "letterSpacing": "-1.7px", "sample": "Every set is filmed in heat. The room paints itself.", "element": "h2", "occurrences": 1, "sourceId": "font-5" }, { "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": "92.2px", "weight": "300", "lineHeight": "75.6px", "letterSpacing": "-0.9px", "sample": "3", "element": "span", "occurrences": 4, "sourceId": "font-25" } ], "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": "#BCB6C6", "cssValue": "rgb(188, 182, 198)", "alpha": 1, "appliedAs": [ "text" ], "occurrences": 32, "sourceId": "color-5" }, { "value": "#F0EDE3", "cssValue": "color(srgb 0.945098 0.929412 0.894118 / 0.4)", "alpha": 0.4, "appliedAs": [ "border" ], "occurrences": 6, "sourceId": "color-8" } ], "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×1318px; block; padding {"top":"0px","left":"43.2px","right":"43.2px","bottom":"158.4px"}; gap normal; background rgb(17, 13, 25); radius 0px. - Observed gaps: 8px. - Representative content widths: 1354, 1124, 550, 338, 322, 254, 241px. - Layout containers: 5; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": 1440, "captureBounds": { "top": 1000, "bottom": 2318, "pageHeight": 13551 } }, "container": { "size": "1440×1318px", "position": "x 0px, y 1000px", "display": "block", "positionMode": "relative", "padding": { "top": "0px", "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(17, 13, 25)", "radius": "0px", "border": "0px none rgb(241, 237, 228)", "shadow": "none", "overflow": "clip" }, "spacing": { "observedGapsPx": [ 8 ], "representativeContentWidthsPx": [ 1354, 1124, 550, 338, 322, 254, 241 ] }, "columns": [ { "element": "ul · 3nights in July 41acts on two floors 6thermal cameras 40metres of projection wall", "size": "1354×119px", "position": "x 43px, y 2041px", "display": "grid", "template": "338.406px 338.406px 338.406px 338.406px", "direction": "row", "gap": "normal" }, { "element": "li · 3nights in July", "size": "338×118px", "position": "x 43px, y 2042px", "display": "grid", "template": "322.406px", "direction": "row", "gap": "8px" }, { "element": "li · 41acts on two floors", "size": "338×118px", "position": "x 382px, y 2042px", "display": "grid", "template": "322.406px", "direction": "row", "gap": "8px" }, { "element": "li · 6thermal cameras", "size": "338×118px", "position": "x 720px, y 2042px", "display": "grid", "template": "322.406px", "direction": "row", "gap": "8px" }, { "element": "li · 40metres of projection wall", "size": "338×118px", "position": "x 1058px, y 2042px", "display": "grid", "template": "322.406px", "direction": "row", "gap": "8px" } ] } ``` #### 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": { "id": "ld-77", "gap": "normal", "tag": "section", "rect": { "x": 0, "y": 1000, "width": 1440, "height": 1318 }, "role": null, "label": "KELVIN Every set is filmed in heat. The room paints itself. Six thermal cameras hang from the gantry", "border": "0px none rgb(241, 237, 228)", "margin": { "top": "0px", "left": "0px", "right": "0px", "bottom": "0px" }, "radius": "0px", "shadow": "none", "columns": null, "display": "block", "padding": { "top": "0px", "left": "43.2px", "right": "43.2px", "bottom": "158.4px" }, "overflow": "clip", "position": "relative", "background": "rgb(17, 13, 25)" }, "cards": [], "media": [], "bounds": { "top": 1000, "bottom": 2318, "pageHeight": 13551 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [ { "id": "ld-96", "gap": "normal", "tag": "ul", "rect": { "x": 43, "y": 2041, "width": 1354, "height": 119 }, "role": null, "label": "3nights in July 41acts on two floors 6thermal cameras 40metres of projection wall", "columns": "338.406px 338.406px 338.406px 338.406px", "display": "grid", "direction": "row" }, { "id": "ld-97", "gap": "8px", "tag": "li", "rect": { "x": 43, "y": 2042, "width": 338, "height": 118 }, "role": null, "label": "3nights in July", "columns": "322.406px", "display": "grid", "direction": "row" }, { "id": "ld-100", "gap": "8px", "tag": "li", "rect": { "x": 382, "y": 2042, "width": 338, "height": 118 }, "role": null, "label": "41acts on two floors", "columns": "322.406px", "display": "grid", "direction": "row" }, { "id": "ld-103", "gap": "8px", "tag": "li", "rect": { "x": 720, "y": 2042, "width": 338, "height": 118 }, "role": null, "label": "6thermal cameras", "columns": "322.406px", "display": "grid", "direction": "row" }, { "id": "ld-106", "gap": "8px", "tag": "li", "rect": { "x": 1058, "y": 2042, "width": 338, "height": 118 }, "role": null, "label": "40metres of projection wall", "columns": "322.406px", "display": "grid", "direction": "row" } ], "spacing": { "gapsPx": [ 8 ], "representativeContentWidthsPx": [ 1354, 1124, 550, 338, 322, 254, 241 ] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 22 }, "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: Vertical stack structure: giant cropped word, statement text, divider, stat grid; Four-column even-width stat grid with consistent gap; Typographic hierarchy pairing serif display with uppercase tracked sans labels - Dependencies: Custom gradient treatment on oversized cropped lettering; Specific serif font (Kalnia) for emotional statement tone; Dark canvas background needed for gradient-on-black contrast effect - Guidance: Reuse the stack order and stat grid proportions directly; swap in brand fonts and colors while keeping the large cropped-letter-behind-statement layering technique, which is the section's distinguishing structural idea. ### 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 stats section inspired by the design evidence titled “Large typography with lower stats”. Purpose: A dark section dominated by large cropped gradient text at the top, leading into a concept statement and a row of four statistics. Structure: Vertical stack of oversized decorative text, an intro paragraph, and a 4-column row of numerical stats.. Source layout label: Vertical stack of oversized decorative text, an intro paragraph, and a 4-column row of numerical stats.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Striking dark background contrasting with bright gradient letters that fade into the dark, ending with clean numeric figures. Components: Decorative cropped letters, Large statement text, Supporting paragraph, Four-column statistics row. Style direction: bold, gradient, typographic. Observed crop: 1440×1318px (1.093: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-5","size":"86.4px","count":1,"family":"Kalnia","traits":"Regular","weight":"200","contexts":[{"tag":"h2","top":1460,"text":"Every set is filmed in heat. The room paints itself.","property":"font"}],"fontStack":"Kalnia, Georgia, serif","lineHeight":"88.1px","letterSpacing":"-1.7px"} {"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-25","size":"92.2px","count":4,"family":"Hubot Sans","traits":"uppercase","weight":"300","contexts":[{"tag":"span","top":2061,"text":"3","property":"font"},{"tag":"span","top":2061,"text":"41","property":"font"},{"tag":"span","top":2061,"text":"6","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"75.6px","letterSpacing":"-0.9px"} Colors measured inside this section: {"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-8","hex":"#F0EDE3","alpha":0.4,"count":6,"contexts":[{"tag":"ul","top":2041,"text":"3nights in July 41acts on two floors 6thermal cameras 40metres of projection wall","property":"border"},{"tag":"dl","top":16404,"text":"TramLine 8 to Kraanweg, then six minutes on foot along the water. Night busB4 and B7 leave from the ","property":"border"},{"tag":"div","top":16405,"text":"TramLine 8 to Kraanweg, then six minutes on foot along the water.","property":"border"}],"cssValue":"color(srgb 0.945098 0.929412 0.894118 / 0.4)"} Exact section measurements from the saved element map: root {"rect":{"x":0,"y":1000,"width":1440,"height":1318},"padding":{"top":"0px","left":"43.2px","right":"43.2px","bottom":"158.4px"},"gap":"normal","columns":null,"overflow":"clip"}; spacing {"gapsPx":[8],"representativeContentWidthsPx":[1354,1124,550,338,322,254,241]}; surfaces {"radii":[],"borders":[],"shadows":[]} Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Vertical stack structure: giant cropped word, statement text, divider, stat grid; Four-column even-width stat grid with consistent gap; Typographic hierarchy pairing serif display with uppercase tracked sans labels. Dependencies: Custom gradient treatment on oversized cropped lettering; Specific serif font (Kalnia) for emotional statement tone; Dark canvas background needed for gradient-on-black contrast effect. Adaptation guidance: Reuse the stack order and stat grid proportions directly; swap in brand fonts and colors while keeping the large cropped-letter-behind-statement layering technique, which is the section's distinguishing structural idea. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.