# Interactive Editorial & FAQ Schema: Design Details SECTION.md v3.2 Website: Nothin' Source: https://www.noth.in/ Source section IDs: gap-7f44d17e-9564-11434 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A large, centred elevator photo sets an eerie mood and gives the section one clear focal point before anything else appears. - Sparse floating letters and two small offset images use generous negative space to create a loose, playful rhythm. - Strict black-and-white palette and small mono single-letter FAQ headers keep the surreal photography as the main visual interest. What a screenshot can't show: - In the recording, a cluster of images follows the cursor for roughly 9 seconds (23–32s) before the page scrolls on. - No type sizes, spacing or animation timings were measured, so those values are unknown. Borrow: Pair one dominant, strange photograph with a few small cursor-reactive elements so the interaction feels like part of the mood before the practical content begins. Leave alone: Don't copy the tinsel-covered elevator figure, the sausage and exercise-ball images, or the glitch-repeated text; make your own odd imagery and keep headline copy from clipping. ## Classification - Type: faq - Layout: A large central atmospheric image followed by sparse, scattered UI elements and widely spaced FAQ headers. - Styles: photographic, playful, editorial - Confidence: 88% ## Purpose and structure An eccentric editorial block featuring a character in an elevator, scattered falling letters, and an interactive FAQ introduction. Visual signature: A person covered in tinsel holding a briefcase inside an elevator, leading into an interactive scattering of letters and small images. ## Components - Hero image - Floating letters - FAQ header - Button ## Typography - Display: Ppneuemontreal — 72px 500 - Heading: Ppneuemontreal — 36px 500 - Body: Ppneuemontreal Book — 16.2px 400 - Mono: IBM Plex Mono — 10.8px 500 ## Functional palette - Canvas: canvas #000000 - Text: text #FFFFFF - Canvas: canvas #FFFFFF - Text: text #000000 ## Motion evidence - 23.0–32.0s — The user hovers over a collection of images that follow the cursor's movement before scrolling down. (92% confidence) ## Section quality Overall: 62.20/100 (Good) Scored coverage: 100% - Typography: 56 — Multiple small type treatments (glitch-repeated phrases, mono FAQ letters, clipped body paragraph) show some intentional layering, but sizes are small, hierarchy is thin, and the main statement is visibly cut off mid-sentence ('beyond t'), undermining typographic polish. Next tier: Needs a resolved, uncut text block and clearer size/weight hierarchy rather than relying on glitch-text novelty alone. - Composition: 72 — A tightly centered, symmetrical elevator shot with a heavily textured figure, scattered floating letters, and two small offset images creates a distinct, unsettling visual rhythm with strong use of negative space before transitioning into a sparse FAQ zone. Next tier: The lower FAQ area (bare letters, generic placeholder) feels unresolved compared to the strong upper composition, preventing a fully cohesive single-section read. - Motion: 60 — Gemini supplies one specific timestamped behavior (23–32s, images following cursor before scroll) which is a concrete interactive detail, though it's the only motion evidence for a tall, dense crop. Next tier: Only one motion moment is documented; without additional timestamped detail on the glitch-text animation or FAQ reveal, the full motion system can't be judged as more than serviceable. - Content: 52 — The juxtaposition of sausages and an exercise ball against the eerie figure reads as deliberately absurd, but their placement feels arbitrary rather than integrated with the FAQ copy, and the headline text is visibly clipped, weakening the sense of intentional content craft. Next tier: Needs legible, complete copy and a clearer rationale tying the random images to the FAQ content for content integration to read as purposeful. - Originality: 78 — A tinsel-covered figure in an elevator holding a briefcase, paired with scattering corrupted text and unrelated stock-like photos, is a genuinely unusual, hard-to-template combination rarely seen in FAQ sections. Next tier: The payoff FAQ list itself (bare letters, placeholder 'No items found') is generic and undercuts the otherwise bold originality of the top half. - Adaptability: 54 — The glitch-letter typographic pattern and single-letter FAQ category tabs are structurally separable concepts, but the overall effect leans heavily on a specific surreal photographic asset and oddly-placed stock images that are not easily substituted without losing the section's identity. Next tier: Would need the imagery and copy fully decoupled from the one-off photographic concept to demonstrate clean skin/structure separation. Strengths: - Bold, unsettling central image used as a visual anchor for an otherwise minimal page - Scattered glitch-text treatment adds a distinct, uneasy tone uncommon in FAQ sections - Documented cursor-following image interaction adds a concrete interactive moment Weaknesses: - Headline copy is visibly cut off mid-sentence, breaking polish - FAQ list area is near-empty with a generic 'No items found' placeholder, weakening the payoff - Image choices (sausages, exercise ball) feel arbitrarily placed rather than purposefully integrated - Typography sizes are small and secondary to the imagery rather than contributing their own hierarchy Why it does not reach the next tier: The upper composition and originality are strong, but incomplete copy, an unresolved placeholder-filled FAQ area, and loosely justified content pairings keep this from reading as a fully executed, memorable section. ## Adaptation guidance - Effort: Medium - Guidance: Keep the glitch-text and tab-letter structure but replace the photographic concept and placeholder content with a fully resolved image and populated FAQ list to preserve the mood without inheriting its unfinished state. What transfers: - Glitch-repeated overlay text pattern - Single-letter tab navigation above a FAQ list - Centered atmospheric hero image leading into a minimal interactive list Dependencies: - The specific surreal photographic subject and styling - The particular random stock images used as accents - Exact FAQ list behavior/content which is currently empty/placeholder ## Living vocabulary - No reusable vocabulary candidates were supported by this section. Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented. ## Provenance and limitations - Section boundaries and naming: Gemini Pro visual observation - Motion observations: Gemini Pro direct-video analysis - Quality judgment: Claude - Exact design facts: browser/CSS extraction at website scope - Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%) - Motion scored from a single Gemini-reported interaction window; no other animation detail available - Cannot verify whether clipped text and empty FAQ list are a live bug or final design intent - No deterministic spacing/color data specific to this section beyond site-wide tokens ## 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: faq - Source type: faq - Structure: A large central atmospheric image followed by sparse, scattered UI elements and widely spaced FAQ headers. - Layout: A large central atmospheric image followed by sparse, scattered UI elements and widely spaced FAQ headers. - Styles: photographic, playful, editorial - Components: Hero image, Floating letters, FAQ header, Button - Purpose: An eccentric editorial block featuring a character in an elevator, scattered falling letters, and an interactive FAQ introduction. - Visual signature: A person covered in tinsel holding a briefcase inside an elevator, leading into an interactive scattering of letters and small images. - Place on the page: 7 of 9, after Other (`noth-in:C03`), before FAQ (`67baf536-9cd2-4ca3-b02d-96d4858591f5`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### Exact typography evidence The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements. ```json { "sectionScale": [], "siteRoles": [ { "role": "display", "size": "72px", "family": "Ppneuemontreal", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-8: computed CSS at 1440×1000; AI role: 72px Ppneuemontreal used for large statements like 'Most brands produce content.' and 'Forms follow'.", "sampleId": "font-8", "confidence": 0.9, "lineHeight": "72px", "letterSpacing": "-0.7px" }, { "role": "heading", "size": "36px", "family": "Ppneuemontreal", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-14: computed CSS at 1440×1000; AI role: 36px Ppneuemontreal used for intermediate headings like 'Good brands communicate.'", "sampleId": "font-14", "confidence": 0.85, "lineHeight": "39.6px", "letterSpacing": "-0.4px" }, { "role": "body", "size": "16.2px", "family": "Ppneuemontreal Book", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: 16.2px Ppneuemontreal Book used extensively for paragraph text.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "16.2px", "letterSpacing": "normal" }, { "role": "mono", "size": "10.8px", "family": "IBM Plex Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-7: computed CSS at 1440×1000; AI role: IBM Plex Mono used for project titles like 'Utopia' and 'Aurbse'.", "sampleId": "font-7", "confidence": 0.8, "lineHeight": "10.8px", "letterSpacing": "0.3px" } ] } ``` ### 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": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: Black used extensively for the background of major sections.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(255, 255, 255); AI role: White text on black backgrounds.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(255, 255, 255); AI role: White used for the background of the initial hero section.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: Black text on white backgrounds.", "sampleId": "color-1", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "0px for media containers; high border-radius (e.g., 50vw) for outline buttons.", "density": "Very sparse. High use of negative space to isolate and emphasize massive typographic elements or imagery.", "evidence": "Visual inspection shows black and white canvas inversions, sharp-edged project photos, pill buttons ('BOOK A CALL'), and huge text ('NOTHIN'').", "borderStyle": "Thin, semi-transparent borders used sparingly, mainly on CTA buttons.", "buttonStyle": "Pill-shaped, transparent background with a thin border and uppercase tracking text.", "cornerStyle": "Sharp corners on images and video frames; fully rounded (pill) shapes for interactive buttons.", "contentWidth": "Full-bleed for the massive text and some videos, mixed with constrained, inset text blocks.", "spacingRhythm": "Highly variable and asymmetric, utilizing massive whitespace around text blocks and scattered positioning for 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 1. **scroll** — The user hovers over a collection of images that follow the cursor's movement before scrolling down. (23s–32s; 92% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 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: medium - What transfers: Glitch-repeated overlay text pattern; Single-letter tab navigation above a FAQ list; Centered atmospheric hero image leading into a minimal interactive list - Dependencies: The specific surreal photographic subject and styling; The particular random stock images used as accents; Exact FAQ list behavior/content which is currently empty/placeholder - Guidance: Keep the glitch-text and tab-letter structure but replace the photographic concept and placeholder content with a fully resolved image and populated FAQ list to preserve the mood without inheriting its unfinished state. ### 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 - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original faq section inspired by the design evidence titled “Interactive Editorial & FAQ”. Purpose: An eccentric editorial block featuring a character in an elevator, scattered falling letters, and an interactive FAQ introduction. Structure: A large central atmospheric image followed by sparse, scattered UI elements and widely spaced FAQ headers.. Source layout label: A large central atmospheric image followed by sparse, scattered UI elements and widely spaced FAQ headers.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: A person covered in tinsel holding a briefcase inside an elevator, leading into an interactive scattering of letters and small images. Components: Hero image, Floating letters, FAQ header, Button. Style direction: photographic, playful, editorial. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"72px","family":"Ppneuemontreal","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 72px Ppneuemontreal used for large statements like 'Most brands produce content.' and 'Forms follow'.","sampleId":"font-8","confidence":0.9,"lineHeight":"72px","letterSpacing":"-0.7px"} {"role":"heading","size":"36px","family":"Ppneuemontreal","source":"computed","traits":"Regular","weight":"500","evidence":"font-14: computed CSS at 1440×1000; AI role: 36px Ppneuemontreal used for intermediate headings like 'Good brands communicate.'","sampleId":"font-14","confidence":0.85,"lineHeight":"39.6px","letterSpacing":"-0.4px"} {"role":"body","size":"16.2px","family":"Ppneuemontreal Book","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 16.2px Ppneuemontreal Book used extensively for paragraph text.","sampleId":"font-3","confidence":0.9,"lineHeight":"16.2px","letterSpacing":"normal"} {"role":"mono","size":"10.8px","family":"IBM Plex Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-7: computed CSS at 1440×1000; AI role: IBM Plex Mono used for project titles like 'Utopia' and 'Aurbse'.","sampleId":"font-7","confidence":0.8,"lineHeight":"10.8px","letterSpacing":"0.3px"} Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Black used extensively for the background of major sections.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White text on black backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White used for the background of the initial hero section.","sampleId":"color-2","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Black text on white backgrounds.","sampleId":"color-1","confidence":0.9} 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. Motion evidence: scroll: The user hovers over a collection of images that follow the cursor's movement before scrolling down. (92% confidence) Transfer these principles: Glitch-repeated overlay text pattern; Single-letter tab navigation above a FAQ list; Centered atmospheric hero image leading into a minimal interactive list. Dependencies: The specific surreal photographic subject and styling; The particular random stock images used as accents; Exact FAQ list behavior/content which is currently empty/placeholder. Adaptation guidance: Keep the glitch-text and tab-letter structure but replace the photographic concept and placeholder content with a fully resolved image and populated FAQ list to preserve the mood without inheriting its unfinished state. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.