# Full-width Photographic Break Schema: Design Details SECTION.md v3.2 Website: Nokken Source: https://www.the-nokken.com/ Source section IDs: gap-86b17abe-6433-7438 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A single wide interior photograph gives the eye a rest between text-heavy sections and sets the mood without any copy. - The image has real depth, with desks and chairs in the foreground and window light behind, so it fills the width without feeling flat. - A thin margin in the warm canvas colour frames the photo, so it sits inside the page instead of colliding with the sections around it. What a screenshot can't show: - The recording showed no motion, and no type or spacing values were measured, so the exact margin size and image proportions are unknown. Borrow: Put one strong, wide photograph between dense text sections as a pacing break, and let a slim canvas-coloured margin frame it. Leave alone: Don't copy the specific wooden-desk interior shot, the warm cream and brown palette, or the small rotated sticky CTA tab that sits over it. ## Classification - Type: gallery - Layout: A single full-bleed image spanning the entire viewport width. - Styles: photographic, minimal - Confidence: 95% ## Purpose and structure A seamless edge-to-edge full-width photograph used as a visual break between text-heavy sections. Visual signature: A large, immersive interior shot showing wooden desks and chairs with large windows, filling the screen laterally. ## Components - image ## Typography - Display: nokken — 50px 200 - Heading: nokken — 25px 200 - Body: Acumin Pro — 13px 350 - Mono: Acumin Pro — 10px 600 ## Functional palette - Canvas: canvas #F3EAE4 - Text: text #000000 - Surface: surface #2B1913 - Muted-Text: muted text #C4B8AE ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 56.23/100 (Competent) Scored coverage: 65% - Typography: not_assessed — No typographic elements present in this crop apart from a small rotated sticky CTA tab, insufficient to assess type design choices. Next tier: No body or heading text is set within this section to evaluate. - Composition: 62 — Clean full-bleed photographic break with a thin canvas-colored margin framing the image, giving it a considered inset rather than true edge-to-edge bleed. The photo itself has strong depth and a balanced interior composition (desk, chairs, window light), but the section's design contribution is limited to selecting and framing a single image; there's no layout invention beyond that. Next tier: Would need an added compositional device (overlay text, grid interplay, asymmetric crop, layered elements) tying the photograph more deliberately into the page system rather than a standalone inset image. - Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Requires timestamped visible motion evidence to assess. - Content: 58 — The image performs its stated role as a pacing break between text-heavy sections and reinforces the brand's materials/lifestyle, but it carries no supporting copy, caption, or contextual integration beyond a floating CTA tab unrelated to the image content. Next tier: Needs some integrated content layer (caption, headline, product callout) that ties the image's meaning explicitly to surrounding narrative rather than functioning as pure décor. - Originality: 48 — A full-width lifestyle interior photo as a breather section is an extremely common pattern in editorial and furniture sites; nothing about the crop or framing here distinguishes it from standard practice. Next tier: Would require a distinctive treatment (unusual crop, interactive reveal, juxtaposition, graphic overlay) to move past a generic photographic break. - Adaptability: 55 — Structure is maximally simple (single image, fixed aspect container, consistent margin) so the skin (photo) is trivially swappable; this simplicity itself caps how much design value can transfer since there is little layout logic to abstract. Next tier: No additional structural components (text overlay, caption positioning, responsive crop logic) exist yet to generalize beyond basic image-container swap. Strengths: - Photograph has genuine depth and warm, considered styling (natural light, wood tones, layered textures) - Consistent canvas-color margin ties the image into the surrounding grid system rather than an abrupt bleed - Serves a clear pacing function as a visual rest between dense text sections Weaknesses: - No typographic or graphic layer integrated with the image itself - Pattern is a stock full-width lifestyle photo break with no distinguishing structural idea - Floating CTA tab feels bolted on rather than composed with the image - No motion evidence provided to assess transition behavior Why it does not reach the next tier: The section achieves competent, pleasant image-break execution but lacks any structural or conceptual device—overlay text, cropping logic, interactive reveal—that would make the format feel authored rather than a standard full-bleed photo insert. ## Adaptation guidance - Effort: Low - Guidance: Reuse as a generic full-width breather module: single image, fixed margin matching canvas color, no text overlay required. Swap photography freely since no caption or layout logic is coupled to the specific image content. What transfers: - Full-bleed image container with consistent inset margin - Simple section used purely as a pacing break between content blocks Dependencies: - Quality and mood of the specific photograph used - Presence of a floating side CTA tab, unrelated to this image's content ## 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%) - Typography and motion axes could not be scored due to lack of evidence in this crop - Only a single desktop crop was available, so responsive or mobile behavior is unknown ## 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: gallery - Source type: gallery - Structure: full-bleed - Layout: A single full-bleed image spanning the entire viewport width. - Styles: photographic, minimal - Components: image - Purpose: A seamless edge-to-edge full-width photograph used as a visual break between text-heavy sections. - Visual signature: A large, immersive interior shot showing wooden desks and chairs with large windows, filling the screen laterally. - Place on the page: 11 of 18, after Pricing (`the-nokken-com:C09_pricing_split`), before Other (`f78615fc-1607-417b-989d-b2597750400d`) ### Crop and composition - Deterministic crop dimensions are unavailable. - 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": [], "siteRoles": [ { "role": "display", "size": "50px", "family": "nokken", "source": "computed", "traits": "Regular", "weight": "200", "evidence": "font-3: computed CSS at 1440×1000; AI role: 50px 'nokken' custom font used for major section headings like 'Created for Operators'.", "sampleId": "font-3", "confidence": 0.95, "lineHeight": "60px", "letterSpacing": "1px" }, { "role": "heading", "size": "25px", "family": "nokken", "source": "computed", "traits": "Regular", "weight": "200", "evidence": "font-2: computed CSS at 1440×1000; AI role: 25px 'nokken' custom font used for secondary headings like 'The NKN-18'.", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "32.5px", "letterSpacing": "0.3px" }, { "role": "body", "size": "13px", "family": "Acumin Pro", "source": "computed", "traits": "Regular", "weight": "350", "evidence": "font-4: computed CSS at 1440×1000; AI role: 13px 'Acumin Pro' sans-serif used extensively for paragraph copy with a 26px line height for readability.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "26px", "letterSpacing": "0.1px" }, { "role": "mono", "size": "10px", "family": "Acumin Pro", "source": "computed", "traits": "uppercase", "weight": "600", "evidence": "font-12: computed CSS at 1440×1000; AI role: 10px 'Acumin Pro' with 600 weight and 1px letter spacing, styled uppercase for micro-copy and small CTAs.", "sampleId": "font-12", "confidence": 0.85, "lineHeight": "normal", "letterSpacing": "1px" } ] } ``` ### 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": [], "functionalPalette": [ { "hex": "#F3EAE4", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "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.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(0, 0, 0); AI role: #000000 (black) is used heavily for primary text, headings, and the pervasive grid lines.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#2B1913", "name": "surface", "role": "surface", "source": "computed", "evidence": "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.", "sampleId": "color-4", "confidence": 0.9 }, { "hex": "#C4B8AE", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-5: computed rgb(196, 184, 174); AI role: #C4B8AE used for secondary text elements within the dark footer surface.", "sampleId": "color-5", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px on all visible containers, images, and buttons.", "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.", "borderStyle": "1px solid #000000 used extensively to create a literal visible grid across the entire canvas.", "buttonStyle": "Minimalist, using 1px solid borders, sharp corners, transparent or solid black backgrounds, and tracked-out uppercase typography.", "cornerStyle": "Strictly sharp.", "contentWidth": "Full-bleed layout with internal vertical dividing lines creating multi-column text and image splits.", "spacingRhythm": "Generous and airy, relying on the rigid hairline grid to create structured padding around text blocks and images." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### 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 null ``` ### 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: unknownpx 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: Full-bleed image container with consistent inset margin; Simple section used purely as a pacing break between content blocks - Dependencies: Quality and mood of the specific photograph used; Presence of a floating side CTA tab, unrelated to this image's content - Guidance: Reuse as a generic full-width breather module: single image, fixed margin matching canvas color, no text overlay required. Swap photography freely since no caption or layout logic is coupled to the specific image content. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion. ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Full-width Photographic Break”. Purpose: A seamless edge-to-edge full-width photograph used as a visual break between text-heavy sections. Structure: full-bleed. Source layout label: A single full-bleed image spanning the entire viewport width.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: A large, immersive interior shot showing wooden desks and chairs with large windows, filling the screen laterally. Components: image. Style direction: photographic, minimal. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"50px","family":"nokken","source":"computed","traits":"Regular","weight":"200","evidence":"font-3: computed CSS at 1440×1000; AI role: 50px 'nokken' custom font used for major section headings like 'Created for Operators'.","sampleId":"font-3","confidence":0.95,"lineHeight":"60px","letterSpacing":"1px"} {"role":"heading","size":"25px","family":"nokken","source":"computed","traits":"Regular","weight":"200","evidence":"font-2: computed CSS at 1440×1000; AI role: 25px 'nokken' custom font used for secondary headings like 'The NKN-18'.","sampleId":"font-2","confidence":0.9,"lineHeight":"32.5px","letterSpacing":"0.3px"} {"role":"body","size":"13px","family":"Acumin Pro","source":"computed","traits":"Regular","weight":"350","evidence":"font-4: computed CSS at 1440×1000; AI role: 13px 'Acumin Pro' sans-serif used extensively for paragraph copy with a 26px line height for readability.","sampleId":"font-4","confidence":0.95,"lineHeight":"26px","letterSpacing":"0.1px"} {"role":"mono","size":"10px","family":"Acumin Pro","source":"computed","traits":"uppercase","weight":"600","evidence":"font-12: computed CSS at 1440×1000; AI role: 10px 'Acumin Pro' with 600 weight and 1px letter spacing, styled uppercase for micro-copy and small CTAs.","sampleId":"font-12","confidence":0.85,"lineHeight":"normal","letterSpacing":"1px"} Color evidence: {"hex":"#F3EAE4","name":"canvas","role":"canvas","source":"computed","evidence":"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.","sampleId":"color-1","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: #000000 (black) is used heavily for primary text, headings, and the pervasive grid lines.","sampleId":"color-2","confidence":0.95} {"hex":"#2B1913","name":"surface","role":"surface","source":"computed","evidence":"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.","sampleId":"color-4","confidence":0.9} {"hex":"#C4B8AE","name":"muted text","role":"muted-text","source":"computed","evidence":"color-5: computed rgb(196, 184, 174); AI role: #C4B8AE used for secondary text elements within the dark footer surface.","sampleId":"color-5","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Full-bleed image container with consistent inset margin; Simple section used purely as a pacing break between content blocks. Dependencies: Quality and mood of the specific photograph used; Presence of a floating side CTA tab, unrelated to this image's content. Adaptation guidance: Reuse as a generic full-width breather module: single image, fixed margin matching canvas color, no text overlay required. Swap photography freely since no caption or layout logic is coupled to the specific image content. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.