# Minimal text navigation

Schema: Design Details SECTION.md v3.2
Website: Kelvin
Source: https://kelvin.8b.com/
Source section IDs: b3a6b213-0dbd-47a6-920e-fa8f4ebb6e7b
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The logo sits left and the links and a solid black button sit right, so the eye finds the brand first and the action last.
- Type stays in one family with clear steps: a heavy 25.6px logotype, a small tracked-out uppercase tagline, and 15px semibold links.
- Warm off-white canvas, near-black text and a muted grey secondary tone keep the row calm, and the black button is the only heavy block.

What a screenshot can't show:
- The recording showed no motion, so hover and transition behavior is unconfirmed.
- Measured values: tagline 12px with 1.4px tracking, button label 13px at 1.2px tracking, side padding 43.2px, and link gaps of 24–25.6px.

Borrow: Let one dense, filled element anchor the end of an otherwise light text-only row so the call to action stands out without boxes or dividers.
Leave alone: Don't copy the multicolour underline strokes under the links, the Kelvin logotype with its tagline, or the cream and black palette; a free geometric sans like Inter or Manrope can stand in for Hubot Sans.

## Classification

- Type: navbar
- Layout: A single horizontal row spanning the full width with flexbox spacing between logo and links.
- Styles: minimal, typographic
- Confidence: 100%

## Purpose and structure

A simple, text-based top navigation bar with a logo on the left and a cluster of links on the right.

Visual signature: Clean, unboxed layout with a distinct black button on the right edge.

## Components

- Logo
- Navigation links
- Call to action button

## Typography

- Display: Kalnia — 86.4px 200
- Heading: Hubot Sans — 34.6px 800
- Body: Hubot Sans — 17px 400

## Functional palette

- Canvas: canvas #F1EDE4
- Text: text #110D19
- Muted-Text: muted text #5B5664

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 56.65/100 (Competent)
Scored coverage: 85%

- Typography: 56 — Clean pairing of condensed bold logotype with small tracked-out uppercase tagline and simple link labels; hierarchy is clear but the type choices themselves are conventional for a navbar. Next tier: Needs a more distinctive type treatment or scale contrast to move beyond standard navbar typesetting.
- Composition: 58 — Balanced flex layout with logo left, links and CTA right, consistent gaps, and a solid black CTA button anchoring the right edge; underline accents on hover-state links add a small detail layer. Next tier: Layout is a standard three-zone navbar pattern with no unexpected spatial idea or asymmetry to push it into memorable territory.
- Motion: not_assessed — No motion moments or timestamped animation evidence was supplied for this section. Next tier: Provide timestamped visible motion (e.g., hover states, scroll-triggered background change) to assess this axis.
- Content: 55 — Content is minimal and appropriate for a navbar: logo, tagline, five nav items, one CTA; integration is tidy but there is little content-driven personality beyond colorful underline accents on links. Next tier: Would need copy or iconography that gives the navbar a distinct voice beyond generic link labels.
- Originality: 52 — The multicolor underline strokes beneath each nav link are a small distinguishing detail, but the overall unboxed, logo-left/links-right/CTA-button layout is a very common pattern. Next tier: Needs a structural or interactive idea unique to this site beyond color accents on an otherwise standard layout.
- Adaptability: 62 — Deterministic DOM evidence shows a simple fixed flex header with clear padding, gap, and two child columns (logo link, nav), making the skin (colors, fonts, button style) separable from the row/flex structure. Next tier: Lacks documented responsive/breakpoint behavior or interaction states to confirm structure holds beyond desktop.

Strengths:
- Clear three-zone hierarchy (logo, nav links, CTA) with consistent flex gaps
- Distinct solid black CTA button creates a strong contrast anchor on the right edge
- Small colorful underline accents under nav links add a subtle branded detail

Weaknesses:
- Overall pattern is a very conventional unboxed navbar layout
- No motion evidence provided to assess interactivity
- Content is minimal with little differentiating voice
- Originality relies on a single small decorative detail (underline colors)

Why it does not reach the next tier: The section executes a clean, functional navbar with one nice decorative touch (colored underlines) but the structure, typography, and content are all standard navbar conventions without a distinguishing idea or confirmed motion behavior that would elevate it to strong/memorable.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the flex row structure, gap spacing, and CTA button shape; swap logo, link labels, and accent colors to retheme for a different brand.

What transfers:
- Fixed flex header structure with logo-left, nav-right split
- Solid-color CTA button treatment on dark background
- Underline accent styling on nav links

Dependencies:
- Specific logo wordmark and tagline copy
- Custom color palette for underline accents
- Font pairing (condensed bold logo vs tracked uppercase tagline)

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No motion/animation evidence supplied
- No responsive or interaction-state data beyond desktop capture
- Cannot verify hover/scroll behavior claims

## 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: navigation
- Source type: navbar
- Structure: full-bleed
- Layout: A single horizontal row spanning the full width with flexbox spacing between logo and links.
- Styles: minimal, typographic
- Components: Logo, Navigation links, Call to action button
- Purpose: A simple, text-based top navigation bar with a logo on the left and a cluster of links on the right.
- Visual signature: Clean, unboxed layout with a distinct black button on the right edge.
- Place on the page: 1 of 11, before Hero (`kelvin-8b-com:C02`)

### Crop and composition

- Crop: 1440×64px; aspect ratio 22.5:1
- Page bounds: 0–64px of 13551px
- Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "body/supporting copy",
      "family": "Hubot Sans",
      "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
      "size": "12px",
      "weight": "650",
      "lineHeight": "15.6px",
      "letterSpacing": "1.4px",
      "sample": "Sound in heat · 2027",
      "element": "span",
      "occurrences": 56,
      "sourceId": "font-1"
    },
    {
      "role": "UI/supporting text",
      "family": "Hubot Sans",
      "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
      "size": "13px",
      "weight": "700",
      "lineHeight": "13px",
      "letterSpacing": "1.2px",
      "sample": "Passes",
      "element": "span",
      "occurrences": 6,
      "sourceId": "font-24"
    },
    {
      "role": "card/subheading",
      "family": "Hubot Sans",
      "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
      "size": "25.6px",
      "weight": "800",
      "lineHeight": "23.6px",
      "letterSpacing": "0.1px",
      "sample": "Kelvin",
      "element": "span",
      "occurrences": 1,
      "sourceId": "font-27"
    },
    {
      "role": "UI/supporting text",
      "family": "Hubot Sans",
      "stack": "\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif",
      "size": "15px",
      "weight": "600",
      "lineHeight": "23.3px",
      "letterSpacing": "normal",
      "sample": "Lineup",
      "element": "a",
      "occurrences": 4,
      "sourceId": "font-31"
    }
  ],
  "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": "#F1EDE4",
      "cssValue": "rgb(241, 237, 228)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 115,
      "sourceId": "color-1"
    },
    {
      "value": "#110D19",
      "cssValue": "rgb(17, 13, 25)",
      "alpha": 1,
      "appliedAs": [
        "border",
        "text"
      ],
      "occurrences": 157,
      "sourceId": "color-2"
    },
    {
      "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×64px; flex; padding {"top":"0px","left":"43.2px","right":"43.2px","bottom":"0px"}; gap 24px; background rgb(241, 237, 228); radius 0px.
- Observed gaps: 11.2, 24, 25.6px.
- Representative content widths: 264, 245px.
- Layout containers: 3; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 0,
      "bottom": 64,
      "pageHeight": 13551
    }
  },
  "container": {
    "size": "1440×64px",
    "position": "x 0px, y 0px",
    "display": "flex",
    "positionMode": "fixed",
    "padding": {
      "top": "0px",
      "left": "43.2px",
      "right": "43.2px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "24px",
    "columns": "not captured",
    "background": "rgb(241, 237, 228)",
    "radius": "0px",
    "border": "not captured",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      11.2,
      24,
      25.6
    ],
    "representativeContentWidthsPx": [
      264,
      245
    ]
  },
  "columns": [
    {
      "element": "header · KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit",
      "size": "1440×64px",
      "position": "x 0px, y 0px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "24px"
    },
    {
      "element": "a · KelvinSound in heat · 2027",
      "size": "245×25px",
      "position": "x 43px, y 19px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "11.2px"
    },
    {
      "element": "nav · Lineup Nights Archive Visit",
      "size": "264×25px",
      "position": "x 1012px, y 19px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "25.6px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [
      "1px solid rgb(17, 13, 25)"
    ],
    "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-9",
    "gap": "24px",
    "tag": "header",
    "rect": {
      "x": 0,
      "y": 0,
      "width": 1440,
      "height": 64
    },
    "role": null,
    "label": "KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit",
    "border": "",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "flex",
    "padding": {
      "top": "0px",
      "left": "43.2px",
      "right": "43.2px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "fixed",
    "background": "rgb(241, 237, 228)"
  },
  "cards": [],
  "media": [],
  "bounds": {
    "top": 0,
    "bottom": 64,
    "pageHeight": 13551
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-9",
      "gap": "24px",
      "tag": "header",
      "rect": {
        "x": 0,
        "y": 0,
        "width": 1440,
        "height": 64
      },
      "role": null,
      "label": "KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-10",
      "gap": "11.2px",
      "tag": "a",
      "rect": {
        "x": 43,
        "y": 19,
        "width": 245,
        "height": 25
      },
      "role": null,
      "label": "KelvinSound in heat · 2027",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-13",
      "gap": "25.6px",
      "tag": "nav",
      "rect": {
        "x": 1012,
        "y": 19,
        "width": 264,
        "height": 25
      },
      "role": null,
      "label": "Lineup Nights Archive Visit",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      11.2,
      24,
      25.6
    ],
    "representativeContentWidthsPx": [
      264,
      245
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 0,
    "animations": 0,
    "elementsInSection": 11
  },
  "surfaces": {
    "radii": [],
    "borders": [
      "1px solid rgb(17, 13, 25)"
    ],
    "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: low
- What transfers: Fixed flex header structure with logo-left, nav-right split; Solid-color CTA button treatment on dark background; Underline accent styling on nav links
- Dependencies: Specific logo wordmark and tagline copy; Custom color palette for underline accents; Font pairing (condensed bold logo vs tracked uppercase tagline)
- Guidance: Reuse the flex row structure, gap spacing, and CTA button shape; swap logo, link labels, and accent colors to retheme for a different brand.

### 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 navigation section inspired by the design evidence titled “Minimal text navigation”.

Purpose: A simple, text-based top navigation bar with a logo on the left and a cluster of links on the right.

Structure: full-bleed. Source layout label: A single horizontal row spanning the full width with flexbox spacing between logo and links.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: Clean, unboxed layout with a distinct black button on the right edge.

Components: Logo, Navigation links, Call to action button.

Style direction: minimal, typographic.

Observed crop: 1440×64px (22.5:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"86.4px","family":"Kalnia","source":"computed","traits":"Regular","weight":"200","evidence":"font-5: computed CSS at 1440×1000; AI role: Kalnia (serif), 200 weight, 86.4px. Used for elegant, prominent section headings like 'Every set is filmed in heat.'","sampleId":"font-5","confidence":0.95,"lineHeight":"88.1px","letterSpacing":"-1.7px"} {"role":"heading","size":"34.6px","family":"Hubot Sans","source":"computed","traits":"uppercase","weight":"800","evidence":"font-2: computed CSS at 1440×1000; AI role: Hubot Sans, 800 weight, 34.6px uppercase. Used for strong subheadings and pricing titles.","sampleId":"font-2","confidence":0.9,"lineHeight":"31.8px","letterSpacing":"0.2px"} {"role":"body","size":"17px","family":"Hubot Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-12: computed CSS at 1440×1000; AI role: Hubot Sans, 400 weight, 17px. Used for standard descriptive paragraphs and text blocks.","sampleId":"font-12","confidence":0.95,"lineHeight":"26.4px","letterSpacing":"normal"}

Color evidence: {"hex":"#F1EDE4","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(241, 237, 228); AI role: Light beige (#F1EDE4) used as the primary background for the upper half of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#110D19","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(17, 13, 25); AI role: Dark (#110D19) used for high-contrast typography on light backgrounds and as the canvas for the dark sections.","sampleId":"color-2","confidence":0.9} {"hex":"#5B5664","name":"muted text","role":"muted-text","source":"computed","evidence":"color-4: computed rgb(91, 86, 100); AI role: Grey (#5B5664) used for secondary paragraph text and subtitles to lower visual hierarchy.","sampleId":"color-4","confidence":0.8}

Typography measured inside this section: {"id":"font-1","size":"12px","count":56,"family":"Hubot Sans","traits":"uppercase","weight":"650","contexts":[{"tag":"span","top":27,"text":"Sound in heat · 2027","property":"font"},{"tag":"span","top":127,"text":"Live in heat","property":"font"},{"tag":"p","top":166,"text":"Centrale Noord · Rotterdam","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"15.6px","letterSpacing":"1.4px"} {"id":"font-24","size":"13px","count":6,"family":"Hubot Sans","traits":"uppercase","weight":"700","contexts":[{"tag":"span","top":23,"text":"Passes","property":"font"},{"tag":"span","top":291,"text":"Get passes","property":"font"},{"tag":"span","top":14967,"text":"Choose","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"13px","letterSpacing":"1.2px"} {"id":"font-27","size":"25.6px","count":1,"family":"Hubot Sans","traits":"uppercase","weight":"800","contexts":[{"tag":"span","top":18,"text":"Kelvin","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"23.6px","letterSpacing":"0.1px"} {"id":"font-31","size":"15px","count":4,"family":"Hubot Sans","traits":"Regular","weight":"600","contexts":[{"tag":"a","top":17,"text":"Lineup","property":"font"},{"tag":"a","top":17,"text":"Nights","property":"font"},{"tag":"a","top":17,"text":"Archive","property":"font"}],"fontStack":"\"Hubot Sans\", \"Arial Narrow\", Arial, sans-serif","lineHeight":"23.3px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-1","hex":"#F1EDE4","alpha":1,"count":115,"contexts":[{"tag":"body","top":0,"text":"KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit Kel","property":"background"},{"tag":"header","top":-2,"text":"KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit","property":"background"},{"tag":"span","top":23,"text":"Passes","property":"text"}],"cssValue":"rgb(241, 237, 228)"} {"id":"color-2","hex":"#110D19","alpha":1,"count":157,"contexts":[{"tag":"header","top":-2,"text":"KelvinSound in heat · 2027 Lineup Nights Archive Visit Passes Lineup Nights Archive Passes Visit","property":"border"},{"tag":"span","top":18,"text":"Kelvin","property":"text"},{"tag":"a","top":17,"text":"Lineup","property":"text"}],"cssValue":"rgb(17, 13, 25)"} {"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":0,"width":1440,"height":64},"padding":{"top":"0px","left":"43.2px","right":"43.2px","bottom":"0px"},"gap":"24px","columns":null,"overflow":"visible"}; spacing {"gapsPx":[11.2,24,25.6],"representativeContentWidthsPx":[264,245]}; surfaces {"radii":[],"borders":["1px solid rgb(17, 13, 25)"],"shadows":[]}

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Fixed flex header structure with logo-left, nav-right split; Solid-color CTA button treatment on dark background; Underline accent styling on nav links.

Dependencies: Specific logo wordmark and tagline copy; Custom color palette for underline accents; Font pairing (condensed bold logo vs tracked uppercase tagline).

Adaptation guidance: Reuse the flex row structure, gap spacing, and CTA button shape; swap logo, link labels, and accent colors to retheme for a different brand.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.