# Nokken — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.the-nokken.com/
Captured: 2026-10-18
CSS measured: 2026-10-18T03:24:28.216Z at 1440×1000 — https://nokken.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: anthropic/claude-sonnet-5

## Design direction

Nokken features a highly structured, editorial design language defined by a strict hairline grid that divides the canvas into distinct panels. The aesthetic is minimalist and architectural, utilizing an earthy, neutral palette of soft beige, stark black, and deep brown. Typography plays a central role, contrasting a delicate, large-scale custom serif (Nokken) against a clean, small-scale sans-serif (Acumin Pro). High-quality environmental photography is juxtaposed with minimalist, looping white line illustrations on dark backgrounds, reinforcing a premium, sustainable hospitality narrative.

## Classification

- Industry: travel
- Site type: Landing, Store
- Business model: Shopping, Software, Agency
- Styles: editorial, minimal, photographic, illustrative, architectural
- Platform: Squarespace
- Technology: Not identified

## Typography

- Display: nokken — weight 200; size 50px; line-height 60px; tracking 1px; Regular (95% role confidence, computed values)
- Heading: nokken — weight 200; size 25px; line-height 32.5px; tracking 0.3px; Regular (90% role confidence, computed values)
- Body: Acumin Pro — weight 350; size 13px; line-height 26px; tracking 0.1px; Regular (95% role confidence, computed values)
- Mono: Acumin Pro — weight 600; size 10px; line-height normal; tracking 1px; uppercase (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #F3EAE4: color-1: computed rgb(243, 234, 228); AI role: #F3EAE4 (light beige) serves as the primary background color for the majority of the page sections. (95% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: #000000 (black) is used heavily for primary text, headings, and the pervasive grid lines. (95% role confidence, computed values)
- Surface — surface #2B1913: color-4: computed rgb(43, 25, 19); AI role: #2B1913 (deep brown) is used as a high-contrast background for the footer and specific illustration panels. (90% role confidence, computed values)
- Muted Text — muted text #C4B8AE: color-5: computed rgb(196, 184, 174); AI role: #C4B8AE used for secondary text elements within the dark footer surface. (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": "nokken",
    "fontStack": "nokken",
    "weight": "200",
    "size": "35px",
    "lineHeight": "45.5px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h3",
        "text": "+Nokken creates the most efficient & economic platform possible for hotel operators & landowners to ",
        "top": 1076,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Discover the range",
        "top": 4223,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "NKN-KONEKT",
        "top": 9376,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "200",
    "size": "25px",
    "lineHeight": "32.5px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h1",
        "text": "A future of innovation in adaptable architecture",
        "top": 2659,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "The NKN-18",
        "top": 4304,
        "property": "font"
      },
      {
        "tag": "h1",
        "text": "Connection Module",
        "top": 9456,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "200",
    "size": "50px",
    "lineHeight": "60px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "Created forOperators",
        "top": 1525,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Our Latest ProductNKN-Softshell",
        "top": 2497,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "The NokkenBusiness Platform",
        "top": 4887,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "350",
    "size": "13px",
    "lineHeight": "26px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "p",
        "text": "We know the world of hospitality, travel and tourism has changed beyond recognition in the last 10 y",
        "top": 1686,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Thats why we believe Nokken is the solution - By not only building modular (allowing flexibility in ",
        "top": 1803,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Couple these facts with the demand for non-urban hospitality offerings and the requirements for envi",
        "top": 2024,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "350",
    "size": "12px",
    "lineHeight": "26px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "All copyright, design rights and intellectual property rights existing in our designs and products a",
        "top": 12664,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The Nokken Group is proud to be a member and support the aims and objectives of the trade organisati",
        "top": 12780,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Copyright © (Nokken Group) 2024. Click here for Nokken is a registered trademark design. US patent a",
        "top": 12870,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Nokken acquires Space of Mind | News",
        "top": 10,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "700",
    "size": "13px",
    "lineHeight": "26px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 38,
    "contexts": [
      {
        "tag": "strong",
        "text": "By not only building modular (allowing flexibility in both speed and scalability) but combining bran",
        "top": 1808,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Nokken; The next generation of cabins",
        "top": 2081,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "to combine the best in design with a product that is desirable, eco-conscious and considerate",
        "top": 2120,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "500",
    "size": "17px",
    "lineHeight": "22.1px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Social",
        "top": 12395,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Contact",
        "top": 12395,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Cabins",
        "top": 12395,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "350",
    "size": "13px",
    "lineHeight": "26px",
    "letterSpacing": "0.1px",
    "traits": "italic",
    "count": 2,
    "contexts": [
      {
        "tag": "em",
        "text": "Example shown",
        "top": 9602,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "Example shown",
        "top": 9602,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "200",
    "size": "22px",
    "lineHeight": "37.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "a",
        "text": "The Cabins",
        "top": 198,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "The Nokken Difference",
        "top": 236,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Nokken Business Platform",
        "top": 273,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "200",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "a",
        "text": "Instagram",
        "top": 12434,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "LinkedIn",
        "top": 12459,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Contact Us",
        "top": 12434,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "600",
    "size": "10px",
    "lineHeight": "normal",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Learn more",
        "top": 4543,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "download more details ➝",
        "top": 9657,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "download more details ➝",
        "top": 9724,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "700",
    "size": "14px",
    "lineHeight": "26px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "+ Order Your Nokken",
        "top": 614,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "nokken",
    "fontStack": "nokken",
    "weight": "300",
    "size": "13px",
    "lineHeight": "60px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "⌂ Special Projects Dept",
        "top": 81,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Acumin Pro",
    "fontStack": "\"Acumin Pro\", sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "1.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Subscribe",
        "top": 12317,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F3EAE4",
    "alpha": 1,
    "cssValue": "rgb(243, 234, 228)",
    "count": 148,
    "contexts": [
      {
        "tag": "section",
        "text": "Scroll",
        "top": 34,
        "property": "background"
      },
      {
        "tag": "figure",
        "text": "",
        "top": 275,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "The Cabins With a range of options and styles to choose, plus a whole host of customisations, Nokken",
        "top": 3075,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 186,
    "contexts": [
      {
        "tag": "a",
        "text": "The Cabins",
        "top": 198,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "+ Order Your Nokken",
        "top": 614,
        "property": "control-background"
      },
      {
        "tag": "section",
        "text": "Scroll",
        "top": 34,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F2E9E3",
    "alpha": 1,
    "cssValue": "rgb(242, 233, 227)",
    "count": 5,
    "contexts": [
      {
        "tag": "section",
        "text": "+Nokken creates the most efficient & economic platform possible for hotel operators & landowners to ",
        "top": 1001,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#2B1913",
    "alpha": 1,
    "cssValue": "rgb(43, 25, 19)",
    "count": 2,
    "contexts": [
      {
        "tag": "body",
        "text": "The CabinsThe Nokken DifferenceNokken Business PlatformSpace of Mind by NokkenSuper SaunaSpecificati",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "{\"secureUrl\":\"https://perch-bison-bhsd.squarespace.com\",\"collectionId\":null,\"formFieldFormats\":{\"ini",
        "top": 12267,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#C4B8AE",
    "alpha": 1,
    "cssValue": "rgb(196, 184, 174)",
    "count": 5,
    "contexts": [
      {
        "tag": "main",
        "text": "The CabinsThe Nokken DifferenceNokken Business PlatformSpace of Mind by NokkenSuper SaunaSpecificati",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Social",
        "top": 12395,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#222222",
    "alpha": 1,
    "cssValue": "rgb(34, 34, 34)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Nokken acquires Space of Mind | News",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "h3",
        "text": "+Nokken creates the most efficient & economic platform possible for hotel operators & landowners to ",
        "top": 1076,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#CCCCCC",
    "alpha": 1,
    "cssValue": "rgb(204, 204, 204)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "All copyright, design rights and intellectual property rights existing in our designs and products a",
        "top": 12664,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#CFCFCF",
    "alpha": 1,
    "cssValue": "rgb(207, 207, 207)",
    "count": 11,
    "contexts": [
      {
        "tag": "a",
        "text": "Instagram",
        "top": 12434,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 7,
    "contexts": [
      {
        "tag": "a",
        "text": "+ Order Your Nokken",
        "top": 614,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Nokken acquires Space of Mind | News",
        "top": 10,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Subscribe",
        "top": 12317,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FF5E52",
    "alpha": 1,
    "cssValue": "rgb(255, 94, 82)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "⌂ Special Projects Dept",
        "top": 81,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(0, 0, 0, 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 0,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#4A4A4A",
    "alpha": 1,
    "cssValue": "rgb(74, 74, 74)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 78,
        "property": "background"
      }
    ]
  }
]
```

### 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 and airy, relying on the rigid hairline grid to create structured padding around text blocks and images.
- Corner style: Strictly sharp.
- Radius: 0px on all visible containers, images, and buttons.
- Borders: 1px solid #000000 used extensively to create a literal visible grid across the entire canvas.
- Buttons: Minimalist, using 1px solid borders, sharp corners, transparent or solid black backgrounds, and tracked-out uppercase typography.
- Content width: Full-bleed layout with internal vertical dividing lines creating multi-column text and image splits.
- Density: Low to medium. The strict grid allows for large areas of negative space alongside dense paragraphs.
- Evidence: Measured 0px border-radius, #000000 border colors, full-width section spanning in desktop crops, and distinct 1px line separators.

## Sections

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

1. **Features — + Nokken creates the most efficient & economic platform possible for…** (Home)
   Reusable feature composition from Home, organized around “+ Nokken creates the most efficient & economic platform possible for…”.
   Capture: 1440×424px; page bounds 1001–1425px of 12972px; source section ID: `d5dd2ced-d042-4664-9da6-6dd1ad398c8a`; image: https://media.designdetails.io/library/8a91239ec317ec3b6e6b2386c97d8eafe7616274945d65af2dff62dd9a993461/section_crop-d5dd2ced-2026-10-18T03-24-41-365Z.webp
   SECTION.md v3.2: `d5dd2ced-d042-4664-9da6-6dd1ad398c8a` (deterministic evidence; editorial review pending)
2. **Features — Our Latest Product NKN-Softshell** (Home)
   Reusable feature composition from Home, organized around “Our Latest Product NKN-Softshell”.
   Capture: 1440×678px; page bounds 2397–3075px of 12972px; source section ID: `e452f8c8-2b73-4368-956b-304b6814269f`; image: https://media.designdetails.io/library/604ac7d1172fdf4e664b962fb5dfd12ac9d0172ce7fa4bdf45c0d675b9a20ac8/section_crop-e452f8c8-2026-10-18T03-24-43-307Z.webp
   SECTION.md v3.2: `e452f8c8-2b73-4368-956b-304b6814269f` (deterministic evidence; editorial review pending)
3. **Features — The Nokken Business Platform** (Home)
   Reusable feature composition from Home, organized around “The Nokken Business Platform”.
   Capture: 1440×649px; page bounds 4787–5436px of 12972px; source section ID: `cf81c662-7ef9-4515-b0fc-ffb3ea54dcbb`; image: https://media.designdetails.io/library/bf8a842d0ee33b76eb57925d7df8cb687ae0c08f61a94dfbd2ccbae14b685178/section_crop-cf81c662-2026-10-18T03-24-46-259Z.webp
   SECTION.md v3.2: `cf81c662-7ef9-4515-b0fc-ffb3ea54dcbb` (deterministic evidence; editorial review pending)
4. **Features — Nokken Features** (Home)
   Reusable feature composition from Home, organized around “Nokken Features”.
   Capture: 1440×245px; page bounds 5436–5681px of 12972px; source section ID: `3cb8d268-4bc4-4c9c-9adb-eb99854141cd`; image: https://media.designdetails.io/library/a7e927cf9606ad41e71403627ad47851163ee3c1fe0cab74c24f051690687f0b/section_crop-3cb8d268-2026-10-18T03-24-47-226Z.webp
   SECTION.md v3.2: `3cb8d268-4bc4-4c9c-9adb-eb99854141cd` (deterministic evidence; editorial review pending)
5. **Hero — Nokken Hospitality Platform Hero** (Home)
   AI suggestion (94% confidence): Complete opening composition with brand navigation, a large architectural image, and a centered mission statement that clearly establishes the offering.
   Capture: 1440×1386px; page bounds 39–1425px of 12972px; source section ID: `75639e4f-8f97-4436-a768-84e31d0656f2`; image: https://media.designdetails.io/library/a1186e79ab15609a4ce2bbfb21e8fd3b2ff78d83cf3eef5a9c10b4583aec74aa/75639e4f-8f97-4436-a768-84e31d0656f2.webp
   SECTION.md v3.2: `75639e4f-8f97-4436-a768-84e31d0656f2` (deterministic evidence; editorial review pending)
6. **Editorial — Created for Operators** (Home)
   AI suggestion (92% confidence): Self-contained split editorial section pairing a substantial operator-focused narrative and read-more link with a large modular cabin rendering.
   Capture: 1440×972px; page bounds 1428–2400px of 12972px; source section ID: `faee6043-1242-4030-8e32-43a601ea2dbe`; image: https://media.designdetails.io/library/31df9e64f928e5bf9dbd5768d51ee31cef6eef15240b5789459ceb4ac4921717/faee6043-1242-4030-8e32-43a601ea2dbe.webp
   SECTION.md v3.2: `faee6043-1242-4030-8e32-43a601ea2dbe` (deterministic evidence; editorial review pending)
7. **Gallery — The Cabins Visual Showcase** (Home)
   AI suggestion (94% confidence): Complete three-image architectural gallery with a dominant cabin image, supporting detail shots, and integrated descriptive copy and link.
   Capture: 1440×960px; page bounds 3080–4040px of 12972px; source section ID: `ef3999f6-1c36-42a4-a635-f1e8c4e66aa4`; image: https://media.designdetails.io/library/84beb7d6cb8284189e5a0986be58c1fdda0f10ad4976092073bffd121c1cd46e/ef3999f6-1c36-42a4-a635-f1e8c4e66aa4.webp
   SECTION.md v3.2: `ef3999f6-1c36-42a4-a635-f1e8c4e66aa4` (deterministic evidence; editorial review pending)
8. **Feature Card — Discover the Range — NKN-18** (Home)
   AI suggestion (96% confidence): Complete split-layout product feature pairing a clear heading, model description, CTA, and isolated product rendering.
   Capture: 1440×750px; page bounds 4040–4790px of 12972px; source section ID: `df77898b-a521-498e-87e0-1175061f260b`; image: https://media.designdetails.io/library/77739842b392b81677d985657cba7bca272edd5f4637e10ba61f9bcf437c0566/df77898b-a521-498e-87e0-1175061f260b.webp
   SECTION.md v3.2: `df77898b-a521-498e-87e0-1175061f260b` (deterministic evidence; editorial review pending)
9. **Pricing — Cabin Pricing and Specifications** (Home)
   AI suggestion (98% confidence): Complete split-layout pricing section with a clear price, supporting purchase details, brochure/specification links, and a substantial product interior image.
   Capture: 1440×750px; page bounds 5683–6433px of 12972px; source section ID: `f225c3c2-d141-4d7f-aa6c-e88368ec4825`; image: https://media.designdetails.io/library/f6ea1234f8ca5749cb3c319594e83a06471e149d86f963f46c7b4fee93c44faf/f225c3c2-d141-4d7f-aa6c-e88368ec4825.webp
   SECTION.md v3.2: `f225c3c2-d141-4d7f-aa6c-e88368ec4825` (deterministic evidence; editorial review pending)
10. **Editorial — Live Sustainably** (Home)
   AI suggestion (94% confidence): Complete sustainability story combining a prominent heading, explanatory philosophy and materials copy, a read-more link, and distinctive hand-and-nature artwork.
   Capture: 1440×759px; page bounds 7438–8197px of 12972px; source section ID: `87592203-3077-403d-ad96-1e9448ce37e1`; image: https://media.designdetails.io/library/c592e6e802f5beae398a829db18fe43bf14396435f7b281561209819b6e1d2d1/87592203-3077-403d-ad96-1e9448ce37e1.webp
   SECTION.md v3.2: `87592203-3077-403d-ad96-1e9448ce37e1` (deterministic evidence; editorial review pending)
11. **Product Demo — NKN-18 Room Capsule Product Detail** (Home)
   AI suggestion (98% confidence): Complete interactive-style product showcase with cabin diagrams, carousel controls, specifications, dimensions, and a details download CTA.
   Capture: 1440×786px; page bounds 9153–9939px of 12972px; source section ID: `b115e840-dba1-429a-a935-a9c1ce948900`; image: https://media.designdetails.io/library/19badc137f1139a78195ca49fd608fc01a7321aadbe14cc7f98978a7921de31e/b115e840-dba1-429a-a935-a9c1ce948900.webp
   SECTION.md v3.2: `b115e840-dba1-429a-a935-a9c1ce948900` (deterministic evidence; editorial review pending)
12. **Features — Hospitality Style, Commercial Grade** (Home)
   AI suggestion (94% confidence): Self-contained quality feature section pairing a strong editorial headline and supporting copy with a distinctive hospitality illustration.
   Capture: 1440×768px; page bounds 9942–10710px of 12972px; source section ID: `f66d605f-5306-48d3-8804-bccff00ce9a8`; image: https://media.designdetails.io/library/739487f6c5a42459dcc4525a3a5008152b035150d11e4cfb0cadde287015b282/f66d605f-5306-48d3-8804-bccff00ce9a8.webp
   SECTION.md v3.2: `f66d605f-5306-48d3-8804-bccff00ce9a8` (deterministic evidence; editorial review pending)
13. **Blog — Nokken Field Reports** (Home)
   AI suggestion (98% confidence): Complete editorial promotion with a publication image, clear Field Reports heading, descriptive copy, and a reading CTA in a balanced split layout.
   Capture: 1440×610px; page bounds 11660–12270px of 12972px; source section ID: `7d82d79c-6410-435d-a000-809e875f9e9f`; image: https://media.designdetails.io/library/04c10d6fa0038acdefda8f87cab4a05b962a69aa2e5318e37d08f6c89cdff454/7d82d79c-6410-435d-a000-809e875f9e9f.webp
   SECTION.md v3.2: `7d82d79c-6410-435d-a000-809e875f9e9f` (deterministic evidence; editorial review pending)
14. **Footer — Nokken Site Footer** (Home)
   AI suggestion (99% confidence): Complete, substantial footer containing a subscribe action, grouped navigation links, sustainability badge, legal copy, copyright information, and prominent brand mark.
   Capture: 1440×700px; page bounds 12272–12972px of 12972px; source section ID: `458d8aeb-d505-4928-8778-57b340624f2d`; image: https://media.designdetails.io/library/4faea5c8b29a44ad66a58223523261af445aeda5d10f85d107ef648781a68191/458d8aeb-d505-4928-8778-57b340624f2d.webp
   SECTION.md v3.2: `458d8aeb-d505-4928-8778-57b340624f2d` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/b992fb94a91c464fe14845a2c55421f94bd6e42e202c7536426bf23efb64fc09/desktop_full-7e35a503-2026-10-18T03-24-28-240Z.webp
- Mobile screenshot: https://media.designdetails.io/library/4490350598e7fc0b63b95d9cbecb93ada13c15e0fd63d8a377e9a03f0d033f33/mobile_full-7e35a503-2026-10-18T03-25-27-525Z.jpg
- Open Graph image: https://media.designdetails.io/library/76730a12b0a45e8047e677b52a1be9016f432456fa57010106a4e908273ba6bc/og_image-7e35a503-2026-10-18T03-24-36-777Z.webp
- Full-page video: https://media.designdetails.io/library/35c86a149267a94274b273f0c5a4c14548cc43a3dc2de39244b138aed65bb10d/motion-1792294187485.mp4
- Video poster: https://media.designdetails.io/library/2a12744bf1f8ac18e972a424d7124448cebded2a59c4f6401ea0564d254d56a3/motion-poster-1792294187485.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 With Background Imagery
- Logo Strip
- Carousel
- Footer
- Outline Button
- Hairline Grid Layout
- Sticky Side CTA

## Quality rubric

Overall: 61.05/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Nokken executes a confident, well-structured editorial brand site: a persistent hairline grid, a considered type pairing, and a restrained earthy palette combine with real product content (specs, pricing, press credibility) to form a coherent, purposeful system across a long page. Bespoke looping line-drawing illustrations add welcome personality. However, the overall visual and structural vocabulary—visible grid, thin serif over sans body, muted palette, full-bleed photography, sticky order tab—closely follows an established premium-editorial template, and the observed motion is mostly simple scroll reveals rather than a demonstrably refined interaction system. The result is competent-to-good, polished execution within a familiar idiom rather than a landmark or highly original digital experience.

- Typography (15%): 66 — A clear two-family system pairs a delicate custom serif ('nokken', weight 200) for display/heading roles against a functional sans-serif (Acumin Pro) for body and micro-copy, with a sensible scale (50px/60px display down to 13px/26px body) and deliberate uppercase tracked micro-copy for CTAs. The hierarchy is legible and consistent across dozens of recorded instances, though the system itself—thin serif display + workhorse sans body—is a common premium-editorial formula rather than a distinctive typographic idea.
- Color (10%): 64 — A tightly restrained, on-brand palette of warm beige canvas, black ink/grid lines, and deep brown surface creates a cohesive, calm, premium-eco mood that is consistent across 148+ sampled background instances and the footer. The single coral accent is used sparingly for a secondary nav link. The palette is tasteful and disciplined but is a familiar earthy-neutral formula common to sustainable/hospitality branding rather than a distinctive color idea.
- Layout (20%): 72 — A persistent 1px hairline grid divides the full ~13,000px page into consistent modular panels—alternating image/text splits, full-width quote blocks, logo strips, and a dark footer—maintained across nine captured crops from hero to footer. The grid is not merely decorative; it structures content width, image/text pairing, and visual rhythm consistently, which is a genuine coherent system across multiple sections, supporting the higher end of this axis.
- Motion (20%): 58 — Observed motion consists of generic scroll-triggered fade/slide-up reveals plus two bespoke looping line-drawing animations (hand-and-sprout, figure jumping into bed) that reinforce brand narrative on dark panels. The line drawings are a nice custom illustrative touch, but no evidence supports claims about easing quality, hover/interactive states, or frame-rate smoothness—only two animation types were captured across a 45s+ recording, and the rest is passive scroll reveal.
- Originality (25%): 49 — The visible structural grid, thin serif display type over muted earth palette, full-bleed hero photography, horizontal press-logo strip, and sticky vertical order tab are all recognizable conventions of premium editorial/architecture-adjacent brand sites. The looping line-drawing illustrations are the single most distinctive element, injecting some bespoke personality, but they are a secondary decorative layer rather than a structural innovation, and the rest of the execution closely follows an established high-end template formula.
- Content (10%): 65 — Specific, substantive content—technical specs (dimensions, sqm), pricing figures, named architect collaboration (BIG), press logos, and a 'Field Reports' editorial section—is woven directly into the grid modules rather than existing as filler, giving the design a purposeful informational backbone appropriate to a B2B hospitality product site.

Coverage: 100% 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
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A warm blush background sets off crisp dark cabin photography, letting the timber and black steel textures read as premium without extra decoration. Two column splits and a centered serif statement break the long page into calm chapters, while a dark brown band and sustainability icon later shift the mood for variety.

## 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.