# Kelvin — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://kelvin.8b.com/
Captured: 2026-11-01
CSS measured: 2026-11-01T08:13:47.068Z at 1440×1000 — https://kelvin.8b.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website for Kelvin festival features a striking, high-contrast design centered around thermal imaging aesthetics. It pairs a stark palette of light beige and deep black with vivid, full-spectrum gradients (pinks, oranges, yellows, blues) applied to photography and oversized typography. The layout is editorial and bold, utilizing fine borders for structure, sharp corners, and a sophisticated mix of a wide, lightweight serif for display text alongside a robust, geometric sans-serif for headings and body copy.

## Classification

- Industry: entertainment
- Site type: Landing, Other
- Business model: Not identified
- Styles: bold, typographic, colourful, editorial, gradient, high-contrast, technical-scientific
- Platform: Custom code
- Technology: GSAP

## Typography

- Display: Kalnia — weight 200; size 86.4px; line-height 88.1px; tracking -1.7px; Regular (95% role confidence, computed values)
- Heading: Hubot Sans — weight 800; size 34.6px; line-height 31.8px; tracking 0.2px; uppercase (90% role confidence, computed values)
- Body: Hubot Sans — weight 400; size 17px; line-height 26.4px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #F1EDE4: color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page. (95% role confidence, computed values)
- Text — text #110D19: 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. (90% role confidence, computed values)
- Muted Text — muted text #5B5664: color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "650",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "1.4px",
    "traits": "uppercase",
    "count": 56,
    "contexts": [
      {
        "tag": "span",
        "text": "Sound in heat · 2027",
        "top": 27,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Live in heat",
        "top": 127,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Centrale Noord · Rotterdam",
        "top": 166,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "800",
    "size": "34.6px",
    "lineHeight": "31.8px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Northern Wire",
        "top": 13261,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Friday pass",
        "top": 14788,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Saturday pass",
        "top": 14788,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "300",
    "size": "112px",
    "lineHeight": "91.8px",
    "letterSpacing": "-1.1px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Infrared",
        "top": 5871,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Visible",
        "top": 5791,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "300",
    "size": "120.6px",
    "lineHeight": "98.9px",
    "letterSpacing": "-1.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Centrale Noord",
        "top": 16162,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "86.4px",
    "lineHeight": "88.1px",
    "letterSpacing": "-1.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Every set is filmed in heat. The room paints itself.",
        "top": 1460,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "300",
    "size": "85px",
    "lineHeight": "69.7px",
    "letterSpacing": "-0.8px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Ultraviolet",
        "top": 5927,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "74.9px",
    "lineHeight": "76.4px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Pick your temperature",
        "top": 14267,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "60.5px",
    "lineHeight": "61.7px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Three nights, three wavelengths",
        "top": 5473,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "57.6px",
    "lineHeight": "58.8px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Before you come",
        "top": 15424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "51.8px",
    "lineHeight": "52.9px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Last July, seen in heat",
        "top": 6901,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "50.4px",
    "lineHeight": "51.4px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Six in the frame, forty‑one in the hall",
        "top": 2406,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "p",
        "text": "The cameras follow the people who make the room warm. This summer that means live electronics, a thr",
        "top": 3139,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Slow heat. Live sets with long builds, the hall warming one degree at a time.",
        "top": 5980,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The full spectrum. The long night, both floors open until four.",
        "top": 5900,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "450",
    "size": "20.9px",
    "lineHeight": "29.6px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Three nights of music, filmed through thermal cameras and projected back into a former power station",
        "top": 137,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Six thermal cameras hang from the gantry of an old turbine hall. They see no faces and no clothes, o",
        "top": 1853,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Bruma, Field Hum, Hollow Coast, Tamsin Rhee, Kaito Mori, Night Swim, Saskia Veld, Port Siren, Elan M",
        "top": 5066,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "300",
    "size": "102.4px",
    "lineHeight": "84px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "1900 K",
        "top": 14662,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "3200 K",
        "top": 14662,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "5600 K",
        "top": 14662,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "800",
    "size": "41.6px",
    "lineHeight": "38.3px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "€54",
        "top": 14955,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "€68",
        "top": 14955,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "€149",
        "top": 14955,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "800",
    "size": "66.2px",
    "lineHeight": "60.9px",
    "letterSpacing": "0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "23—25July",
        "top": 207,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "63.4px",
    "lineHeight": "64.6px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "See you in the heat.",
        "top": 17329,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Kalnia",
    "fontStack": "Kalnia, Georgia, serif",
    "weight": "200",
    "size": "61.9px",
    "lineHeight": "63.2px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "“The first festival where the crowd is the light show. You watch a room warm up in real time.”",
        "top": 12959,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2027 Kelvin Festival Foundation, Rotterdam",
        "top": 17542,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Kelvin Narrow\", sans-serif",
    "weight": "300",
    "size": "564px",
    "lineHeight": "564px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "K",
        "top": 416,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "E",
        "top": 416,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "L",
        "top": 416,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "550",
    "size": "17px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "dd",
        "text": "Doors and camera room",
        "top": 6371,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "Leo Marchetti",
        "top": 6416,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "Ines Aalto",
        "top": 6461,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "800",
    "size": "27.4px",
    "lineHeight": "25.2px",
    "letterSpacing": "0.1px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Ines Aalto",
        "top": 2956,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Leo Marchetti",
        "top": 2919,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Pia Sol",
        "top": 2948,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "600",
    "size": "20.8px",
    "lineHeight": "32.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "summary",
        "text": "Am I filmed?",
        "top": 15425,
        "property": "font"
      },
      {
        "tag": "summary",
        "text": "Can I stay out of the picture?",
        "top": 15495,
        "property": "font"
      },
      {
        "tag": "summary",
        "text": "Is the hall accessible?",
        "top": 15565,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "700",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "1.2px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Passes",
        "top": 23,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get passes",
        "top": 291,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Choose",
        "top": 14967,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "300",
    "size": "92.2px",
    "lineHeight": "75.6px",
    "letterSpacing": "-0.9px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "3",
        "top": 2061,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "41",
        "top": 2061,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "6",
        "top": 2061,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "700",
    "size": "34px",
    "lineHeight": "52.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Kelvin",
        "top": 415,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "800",
    "size": "25.6px",
    "lineHeight": "23.6px",
    "letterSpacing": "0.1px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Kelvin",
        "top": 18,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "23.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Review of Kelvin 2026",
        "top": 13297,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "650",
    "size": "12px",
    "lineHeight": "18.6px",
    "letterSpacing": "1.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Email",
        "top": 16938,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "600",
    "size": "17px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "a",
        "text": "See the lineup",
        "top": 283,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "hello@kelvin-festival.com",
        "top": 15082,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "hello@kelvin-festival.com",
        "top": 15592,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "600",
    "size": "15px",
    "lineHeight": "23.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Lineup",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Nights",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Archive",
        "top": 17,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "600",
    "size": "32px",
    "lineHeight": "49.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "hello@kelvin-festival.com",
        "top": 16718,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "+31 10 555 0193",
        "top": 16781,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "Hubot Sans",
    "fontStack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Accessibility",
        "top": 17542,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Privacy and filming",
        "top": 17542,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F1EDE4",
    "alpha": 1,
    "cssValue": "rgb(241, 237, 228)",
    "count": 115,
    "contexts": [
      {
        "tag": "body",
        "text": "KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit Kel",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "header",
        "text": "KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit",
        "top": -2,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Passes",
        "top": 23,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#110D19",
    "alpha": 1,
    "cssValue": "rgb(17, 13, 25)",
    "count": 157,
    "contexts": [
      {
        "tag": "header",
        "text": "KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit",
        "top": -2,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Kelvin",
        "top": 18,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Lineup",
        "top": 17,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#2D18A8",
    "alpha": 1,
    "cssValue": "rgb(45, 24, 168)",
    "count": 19,
    "contexts": [
      {
        "tag": "figure",
        "text": "Live in heat",
        "top": 110,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#5B5664",
    "alpha": 1,
    "cssValue": "rgb(91, 86, 100)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Sound in heat · 2027",
        "top": 27,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "The cameras follow the people who make the room warm. This summer that means live electronics, a thr",
        "top": 3139,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Also in the hall",
        "top": 5066,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#BCB6C6",
    "alpha": 1,
    "cssValue": "rgb(188, 182, 198)",
    "count": 32,
    "contexts": [
      {
        "tag": "p",
        "text": "2027 · three nights",
        "top": 338,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "nights in July",
        "top": 2144,
        "property": "text"
      },
      {
        "tag": "li",
        "text": "Entry Friday 19:00–02:00",
        "top": 14836,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 3,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 80,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F2EDE4",
    "alpha": 0.45098039215686275,
    "cssValue": "color(srgb 0.945098 0.929412 0.894118 / 0.45)",
    "count": 12,
    "contexts": [
      {
        "tag": "li",
        "text": "Candle light1900 K Friday passEntry Friday 19:00–02:00Cloakroom and free waterCamera room every hour",
        "top": 14619,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F0EDE3",
    "alpha": 0.4,
    "cssValue": "color(srgb 0.945098 0.929412 0.894118 / 0.4)",
    "count": 6,
    "contexts": [
      {
        "tag": "ul",
        "text": "3nights in July 41acts on two floors 6thermal cameras 40metres of projection wall",
        "top": 2041,
        "property": "border"
      },
      {
        "tag": "dl",
        "text": "TramLine 8 to Kraanweg, then six minutes on foot along the water. Night busB4 and B7 leave from the ",
        "top": 16404,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "TramLine 8 to Kraanweg, then six minutes on foot along the water.",
        "top": 16405,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#110E1A",
    "alpha": 0.34901960784313724,
    "cssValue": "color(srgb 0.0666667 0.0509804 0.0980392 / 0.35)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "19:00Doors and camera room",
        "top": 6363,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#F1EEE5",
    "alpha": 0.34901960784313724,
    "cssValue": "color(srgb 0.945098 0.929412 0.894118 / 0.35)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "16:00Doors",
        "top": 6397,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous spacing with large macro-margins between sections, allowing the large typography and imagery to breathe.
- Corner style: Strictly sharp corners across all buttons, images, and layout containers.
- Radius: 0px, no border-radius visible.
- Borders: Thin (1px), solid borders used extensively as structural dividers in lists, stats, and tables.
- Buttons: Solid, sharp-edged rectangles (often black on light, or white on dark) containing bold, uppercase, highly-tracked sans-serif text.
- Content width: Wide max-width with elements often breaking the grid or spanning full viewport width, but maintaining alignment down central columns.
- 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.

## Sections

Gallery section count: 11. Each entry corresponds to one gallery capture.

1. **Navbar — Kelvin Navbar** (Home)
   A thin bar pairs the logo and date with four links and a dark button, so the main action stands out.
   Capture: 1440×64px; page bounds 0–64px of 13551px; source section ID: `b3a6b213-0dbd-47a6-920e-fa8f4ebb6e7b`; image: https://media.designdetails.io/library/b68e5de06c665f8e9515144e1140f36fa73f6743ea45d9fb73df8325bac69414/b3a6b213-0dbd-47a6-920e-fa8f4ebb6e7b.webp
   SECTION.md v3.2: `b3a6b213-0dbd-47a6-920e-fa8f4ebb6e7b` (deterministic evidence; editorial review pending)
2. **Hero — Giant gradient wordmark with poster** (Home)
   An oversized rainbow wordmark behind a thermal-camera poster sets the festival's look at once, while a date card and button give the key facts.
   Capture: 1440×936px; page bounds 64–1000px of 13551px; source section ID: `c1719082-aa61-44ae-88b8-c7edec904a33`; image: https://media.designdetails.io/library/f08bc5bb147dfc24198438d279e15f85728d9634d6e1246b244b744a9bc1d191/c1719082-aa61-44ae-88b8-c7edec904a33.webp
   SECTION.md v3.2: `c1719082-aa61-44ae-88b8-c7edec904a33` (deterministic evidence; editorial review pending)
3. **Stats — Concept statement with four figures** (Home)
   A large serif statement explains the idea, and a row of four numbers beneath gives the festival's scale at a glance.
   Capture: 1440×1318px; page bounds 1000–2318px of 13551px; source section ID: `d4f2bc2a-8d82-4895-a606-c5ebd4dda1ad`; image: https://media.designdetails.io/library/b0b7339552c4a6c182a37777ced07ebf98ffde5ecacd33168d88d77d4dd46f40/d4f2bc2a-8d82-4895-a606-c5ebd4dda1ad.webp
   SECTION.md v3.2: `d4f2bc2a-8d82-4895-a606-c5ebd4dda1ad` (deterministic evidence; editorial review pending)
4. **Gallery — Collage of artist thermal portraits** (Home)
   Overlapping colour-filtered portraits with name and slot labels show the lineup visually, and a text list covers the smaller acts.
   Capture: 1440×2295px; page bounds 2318–4613px of 13551px; source section ID: `f19e7da0-451e-4091-b0b5-99f2b8ba1898`; image: https://media.designdetails.io/library/4ca0eca83e5637fbec05ff67fabe681205a56e8b5cf38c72491b63f27e37fad2/f19e7da0-451e-4091-b0b5-99f2b8ba1898.webp
   SECTION.md v3.2: `f19e7da0-451e-4091-b0b5-99f2b8ba1898` (deterministic evidence; editorial review pending)
5. **Process — Three night cards with schedules** (Home)
   Each night gets its own colour-coded card with a timed running order, so visitors can compare the evenings and plan.
   Capture: 1440×1492px; page bounds 4613–6105px of 13551px; source section ID: `1af696b9-d45b-4b19-bdcf-0571a2eb3626`; image: https://media.designdetails.io/library/4fad696cec6502ba8db62dadd7581d4133d0e0b629e1ec6a2d1158b1afacbe24/1af696b9-d45b-4b19-bdcf-0571a2eb3626.webp
   SECTION.md v3.2: `1af696b9-d45b-4b19-bdcf-0571a2eb3626` (deterministic evidence; editorial review pending)
6. **Gallery — Split view of heat and light** (Home)
   Pairing a normal crowd photo with its thermal version across a divider shows how the cameras change what the audience sees.
   Capture: 1440×2000px; page bounds 6105–8105px of 13551px; source section ID: `4dc74997-2a58-4fa5-a035-d7648e8dea4e`; image: https://media.designdetails.io/library/8a4a428afdc6ece2cffa5b6378b9fdc724c8fd097d205e014d7765990c77de6a/4dc74997-2a58-4fa5-a035-d7648e8dea4e.webp
   SECTION.md v3.2: `4dc74997-2a58-4fa5-a035-d7648e8dea4e` (deterministic evidence; editorial review pending)
7. **Testimonials — Press quote with attendee comments** (Home)
   One large serif press quote leads, and two small attendee quotes with names add smaller-scale proof beneath it.
   Capture: 1440×1377px; page bounds 8105–9482px of 13551px; source section ID: `7b7fb8fd-48bb-4cc3-b894-cc60a7a84a2d`; image: https://media.designdetails.io/library/9ccef78d0a2ca592803ffffe4e4b0f4ff651e4a4a00b1c0b8f4693f576f5a899/7b7fb8fd-48bb-4cc3-b894-cc60a7a84a2d.webp
   SECTION.md v3.2: `7b7fb8fd-48bb-4cc3-b894-cc60a7a84a2d` (deterministic evidence; editorial review pending)
8. **Pricing — Three colour-coded pass cards** (Home)
   Each pass has a temperature-coded gradient header, a short perk list and a clear price, so the three options are easy to compare.
   Capture: 1440×1089px; page bounds 9482–10571px of 13551px; source section ID: `6dfd6fe2-8075-44a9-95e3-c8fed5d24eaa`; image: https://media.designdetails.io/library/28b77c16fe691f866035eaf087db1ef37c2c7b10221c1f168c8ffb5dce859cac/6dfd6fe2-8075-44a9-95e3-c8fed5d24eaa.webp
   SECTION.md v3.2: `6dfd6fe2-8075-44a9-95e3-c8fed5d24eaa` (deterministic evidence; editorial review pending)
9. **FAQ — Accordion of visitor questions** (Home)
   Ruled rows with plus icons keep six common questions compact, and the heading column carries a contact line for anything missing.
   Capture: 1440×738px; page bounds 10571–11309px of 13551px; source section ID: `7e06d403-e846-487a-bc0f-c1c79d991c69`; image: https://media.designdetails.io/library/e7665c24918d25ba0e4823350888ed3b2c4946b91b3ea9b4a2e13cf1850b333a/7e06d403-e846-487a-bc0f-c1c79d991c69.webp
   SECTION.md v3.2: `7e06d403-e846-487a-bc0f-c1c79d991c69` (deterministic evidence; editorial review pending)
10. **Contact — Venue details with email signup** (Home)
   A thermal photo of the venue sits beside a travel table, contact lines and a newsletter field, putting practical information in one place.
   Capture: 1440×1165px; page bounds 11309–12474px of 13551px; source section ID: `d3f867ad-36ee-4a6f-a112-1502e2e5f8be`; image: https://media.designdetails.io/library/6e70a973dbb82bb9e361629f3ae33da67545271ed75f97a763c920d630349091/d3f867ad-36ee-4a6f-a112-1502e2e5f8be.webp
   SECTION.md v3.2: `d3f867ad-36ee-4a6f-a112-1502e2e5f8be` (deterministic evidence; editorial review pending)
11. **Footer — Sign-off with links and wordmark** (Home)
   A short closing line sits above two small link columns, and the repeated gradient wordmark brings the page back to its opening.
   Capture: 1440×1077px; page bounds 12474–13551px of 13551px; source section ID: `ae779bb2-f85d-4918-88ba-a9d50f399faf`; image: https://media.designdetails.io/library/517499e39b4f6c6e59310bcb5805ef15de1cc7533f2c52b7ae208cf15ffa246d/ae779bb2-f85d-4918-88ba-a9d50f399faf.webp
   SECTION.md v3.2: `ae779bb2-f85d-4918-88ba-a9d50f399faf` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/199788c002ce3f28dc0d84456e2c28de5df4b0470eb540d30bfb4be104f9d133/desktop_full-57bee486-2026-11-01T08-13-47-080Z.webp
- Mobile screenshot: https://media.designdetails.io/library/26a4625a7f21d8c84b28bd81e72598f53b0c40fabbef8b981e7f7dd76d0c59d8/mobile_full-57bee486-2026-11-01T08-14-28-750Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/1af4d8c0fd91fbc89ecf4b091aa80c8e0e218a521386fc197cec88661de58a92/motion-1793521493588.mp4
- Video poster: https://media.designdetails.io/library/562c9c5534622b165d2e34b16de462de84e4f7050fdfe479e1c36a36c67b2a44/motion-poster-1793521493588.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Stat Block
- Feature Collection
- Pricing Table
- FAQ Accordion
- Newsletter Form
- Footer
- Primary Button
- Text Link
- Thermal Gradient Text Mask
- Fine Line Dividers

## Quality rubric

Overall: 72.38/100 (Strong)
Evidence coverage: 80%
Judge tier: Strong
Verdict: Kelvin builds its entire identity around one clear metaphor — thermal imaging and literal color-temperature values — and carries it with unusual discipline through typography, palette, pricing-tier naming, FAQ content, and testimonial copy. The restrained beige/black base makes the thermal gradient feel earned rather than arbitrary, and the serif/sans pairing gives the page a legible, editorial hierarchy sustained across a long scroll of distinct sections (hero, stat block, lineup grid, night schedules, archive toggle, pricing, FAQ, footer). This is a genuinely coherent system, not a single styled hero. What keeps it from the top tiers is that motion and interaction — a major component of how such a concept-forward site would normally prove its craft — are completely unverified, and several of the supporting components (accordion, three-card pricing, newsletter form) are conventional patterns rather than extensions of the thermal premise itself. The originality here lives mostly in concept and copy; without confirmed bespoke interaction or motion to match, it reads as a strong, well-executed editorial site built on a smart idea rather than a landmark end-to-end experience.

- Typography (15%): 70 — A deliberate two-voice system: a thin-weight serif (Kalnia, weight 200, tight negative tracking from -1px to -1.7px) carries emotive editorial headlines at large sizes (51–120px), while Hubot Sans spans a wide weight range (300–800) for data, labels, buttons and body copy. Uppercase micro-labels consistently use wide positive tracking (1.2–1.4px) to read as technical/data callouts, reinforcing the thermal-instrument concept. Body copy sits at a readable 17px/26.4px. The system is legible and role-consistent across many instances rather than a one-off hero treatment.
- Color (10%): 72 — A disciplined two-tone base (#F1EDE4 beige, #110D19 near-black) is used for 90%+ of surfaces, with a full-spectrum thermal gradient reserved specifically for the wordmark, photography treatment, and pricing tier bands — directly reinforcing the concept rather than acting as decoration. This restraint-plus-payoff structure is more considered than typical 'colorful hero' treatments.
- Layout (20%): 70 — Editorial rhythm alternates beige and near-black full-bleed sections, uses fine 1px dividers to structure stat blocks, schedules, and FAQ, and varies pacing with a giant background wordmark, a tilted photo-stack lineup grid, and a three-column night schedule. The structure is sustained across the full page rather than confined to a hero.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference, so easing, transitions, hover states, scroll-triggered reveals, or responsiveness of behavior cannot be verified.
- Originality (25%): 74 — The site commits fully to a single conceptual device — thermal-camera aesthetics and literal color-temperature values — and threads it through naming (candle light/tungsten/daylight pass tiers at 1900K/3200K/5600K), copy ('the room paints itself', 'filmed in heat'), a HEAT/LIGHT toggle, and photography treatment. This is a genuinely unifying idea sustained across the full page rather than a single gimmick. However, the visual grammar used to deliver it (oversized type, masked wordmark, fine-line editorial grid, rotated polaroid stacks) is a familiar contemporary web-design idiom, so originality rests mainly on concept and copy rather than novel interaction or structural invention.
- Content (10%): 77 — Content and design are fused rather than merely adjacent: thermal photography is both the literal subject matter and the decorative system, pass names map to real color-temperature values with matching gradient bands, FAQ entries address filming/privacy concerns specific to the thermal-camera premise, and testimonials are themed around 'seeing yourself in heat.' This is a strong example of copy, imagery, and visual system reinforcing a single narrative.

Coverage: 80% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A huge rainbow-gradient wordmark splits the page into a cream top and black bottom, echoing the thermal imagery used throughout in hot pink, yellow and blue. Large serif headlines and bold stat numbers pace the long page into clear chapters, while thermal-camera crowd photos make the heat concept easy to grasp at a glance.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.