# Grafting hands process detail Schema: Design Details SECTION.md v3.2 Website: Pear Source: https://pear.no/ Source section IDs: 04f42684-1434-4fb3-994c-1f3a1cd7a443 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A full-bleed macro photograph of hands grafting a branch carries the whole idea, so no extra decoration is needed. - Crisp white serif headline and small uppercase mono labels sit in the photo's dark, quiet areas, giving clear hierarchy and strong legibility. - Fine crosshair and grid marks with sparse corner labels add a technical layer over the organic image, matching the copy about building software. What a screenshot can't show: - The recording shows the grafting scene morphing into a dense pear tree between about 5 and 9 seconds, tied to scrolling. - No font sizes, spacing or CSS animations were measured, so exact type scale and timing curves are unknown. Borrow: Use one tactile photograph as a metaphor for your product, then let a scroll-driven transition carry the story from the act to its result. Leave alone: Don't copy the pear and grafting imagery, the Flecha S serif, or the exact crosshair overlay; use your own subject and a free editorial serif with a mono label face instead. ## Classification - Type: editorial - Layout: Full-bleed close-up photograph. - Styles: editorial, photographic - Confidence: 95% ## Purpose and structure A close-up photographic tableau showing hands grafting a branch, serving as a visual metaphor in the scrolling narrative. Visual signature: Close-up of hands using a knife and wrapping tape to graft a small tree branch. ## Components - full-width image - scroll animation ## Typography - Display: Flecha M — 77.1px 300 - Heading: Flecha S — 26.6px 400 - Body: GT Standard L — 15.4px 400 - Mono: GT Standard Mono — 9.2px 400 ## Functional palette - Text: text #FFFFFF - Primary-Action: primary action #F2F1ED - Text: text #2E2109 - Surface: surface #0B0A09 ## Motion evidence - 5.0–9.0s — The scene shows hands grafting a small branch onto a larger one, which then transitions into a dense pear tree. (95% confidence) ## Section quality Overall: 63.70/100 (Good) Scored coverage: 100% - Typography: 62 — The serif 'We build it.' headline (Flecha S) paired with uppercase mono labels ('THE MODEL', 'CUSTOM SOFTWARE') shows restrained, purposeful hierarchy against the photograph, with crisp white text floating cleanly over dark foliage. Next tier: Only two short lines of type are visible; no body copy or richer hierarchy is shown to demonstrate more sophisticated typographic control. - Composition: 72 — Full-bleed macro photography of hands grafting a branch transitioning into a dense pear tree creates a strong visual metaphor; the overlaid technical crosshair/grid marks and sparse corner labels give an intentional, considered layer atop the organic imagery, and text is placed with confidence in negative space. Next tier: The composition relies heavily on the strength of the photograph itself; without more distinctive layout invention beyond grid marks and corner labels, it doesn't clear the exceptional threshold. - Motion: 58 — Gemini confirms a timestamped transition (5–9s) where the grafting scene morphs into a dense pear tree, a clear narrative-driven visual change tied to scroll, which is a deliberate storytelling device rather than decorative motion. Next tier: Only one coarse transition is documented; no detail on easing, pacing, or additional choreographed beats to justify a higher score. - Content: 68 — The grafting-to-orchard imagery functions as a coherent metaphor for 'building' custom software, tightly integrating narrative copy ('We build it,' 'Tailored software, built to be') with the visual story beat. Next tier: The metaphor, while apt, is a single illustrative beat rather than a layered content system; no supporting data or deeper narrative texture is shown. - Originality: 65 — Using a classical-feeling hand-grafting photograph as a metaphor for software building is a distinctive conceptual choice, elevated by the fine art-style hand rendering and technical grid overlay that avoids generic stock-photo treatment. Next tier: The underlying device (full-bleed photo + scroll-triggered image swap + minimal label) is a known editorial pattern; nothing here is structurally unprecedented. - Adaptability: 55 — The grid overlay, mono labels, and text placement rules are clearly separable from the specific photographic asset, and the deterministic tokens (sharp corners, mono uppercase labels, serif display type) are reusable. Next tier: No spacing, radius, or animation parameter data was captured (all empty in measurements), limiting certainty about how cleanly the skin separates from structure. Strengths: - Strong single visual metaphor (grafting) tied directly to content message - Clean typographic restraint with serif headline against complex photographic background - Scroll-triggered image transition reinforces narrative progression Weaknesses: - Relies on one photographic asset's inherent quality rather than compositional invention - Limited typographic range shown (only headline + labels) - Sparse deterministic motion/spacing evidence limits confidence in animation sophistication - Technical grid overlay is a familiar editorial device, not a novel system Why it does not reach the next tier: The section achieves a coherent metaphor and clean restraint, but the composition leans on the photograph's inherent strength and a single scroll transition rather than demonstrating layered, hard-to-substitute design decisions across more content or richer interaction. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the full-bleed metaphor-photo + minimal label + serif statement layout with any strong sequential photography; replace the grid-mark overlay with a brand's own technical motif and substitute fonts while preserving the uppercase mono label and serif display contrast. What transfers: - Full-bleed photographic metaphor structure - Serif display headline over mono uppercase labels pattern - Crosshair/grid overlay marks as structural motif - Scroll-triggered image transition concept Dependencies: - Specific grafting/orchard photography asset - Proprietary fonts (Flecha M/S, GT Standard L/Mono) - Exact scroll transition timing and easing ## 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 spacing, radius, or shadow measurements were captured for this section - Only one motion transition was timestamped, limiting assessment of overall animation craft - Exact font rendering and color values are inferred from site-wide tokens, not this crop specifically ## 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: editorial - Source type: editorial - Structure: full-bleed - Layout: Full-bleed close-up photograph. - Styles: editorial, photographic - Components: full-width image, scroll animation - Purpose: A close-up photographic tableau showing hands grafting a branch, serving as a visual metaphor in the scrolling narrative. - Visual signature: Close-up of hands using a knife and wrapping tape to graft a small tree branch. - Place on the page: 5 of 22, after Process (`b3ecac88-85e0-4a9b-8c33-8288d2ab477f`), before Feature collection (`pear-no:editorial_tree_canopy`) ### Crop and composition - Crop: 1440×1734px; aspect ratio 0.83:1 - Page bounds: 2946–4680px of 24000px - 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": "77.1px", "family": "Flecha M", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-7: computed CSS at 1440×1000; AI role: Flecha M at 77.1px used for massive headline statements.", "sampleId": "font-7", "confidence": 1, "lineHeight": "77.1px", "letterSpacing": "normal" }, { "role": "heading", "size": "26.6px", "family": "Flecha S", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-11: computed CSS at 1440×1000; AI role: Flecha S at 26.6px used for secondary italicized statements and section intros.", "sampleId": "font-11", "confidence": 0.9, "lineHeight": "30.6px", "letterSpacing": "-0.5px" }, { "role": "body", "size": "15.4px", "family": "GT Standard L", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: GT Standard L at 15.4px used for paragraphs explaining the model.", "sampleId": "font-5", "confidence": 0.9, "lineHeight": "20px", "letterSpacing": "-0.1px" }, { "role": "mono", "size": "9.2px", "family": "GT Standard Mono", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: GT Standard Mono at 9.2px used extensively for labels, badges, and structural UI text.", "sampleId": "font-10", "confidence": 1, "lineHeight": "9.2px", "letterSpacing": "0.4px" } ] } ``` ### 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": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(255, 255, 255); AI role: White text is primary over the dark and richly colored painted backgrounds.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#F2F1ED", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-6: computed rgb(242, 241, 237); AI role: Off-white background used for the 'Request Partnership' primary call to action.", "sampleId": "color-6", "confidence": 0.9 }, { "hex": "#2E2109", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(46, 33, 9); AI role: Dark brown used for text when the background transitions to lighter areas, like the parchment scenes.", "sampleId": "color-4", "confidence": 0.85 }, { "hex": "#0B0A09", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(11, 10, 9); AI role: Used for dark backgrounds in non-image sections or dark button fills.", "sampleId": "color-1", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "No visible border radius used in the primary UI elements.", "density": "Extremely low density; the design prioritizes large-scale imagery and negative space over information density.", "evidence": "Visual observation of the sharp 'REQUEST PARTNERSHIP' button, the 1px grid lines visible in all screenshots, and the full-width painted backgrounds.", "borderStyle": "Thin, 1px translucent or solid white lines used to draw a technical grid over the organic imagery.", "buttonStyle": "Solid color fills with high contrast text, sharp corners, and monospace uppercase typography. Often paired with a subtle arrow icon.", "cornerStyle": "Strictly sharp, 0px corners on buttons, inputs, and layout boundaries.", "contentWidth": "Full bleed edge-to-edge for media, while text floats within invisible inset grid columns.", "spacingRhythm": "Sparse rhythm relying on viewport heights; text blocks are positioned openly against expansive backgrounds rather than in tight containers." } ``` ### 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": 1440, "captureBounds": { "top": 2946, "bottom": 4680, "pageHeight": 24000 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "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": null, "cards": [], "media": [], "bounds": { "top": 2946, "bottom": 4680, "pageHeight": 24000 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 0 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-09-21T04:24:01.335Z", "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 1. **observed sequence** — The scene shows hands grafting a small branch onto a larger one, which then transitions into a dense pear tree. (5s–9s; 95% 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: 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: medium - What transfers: Full-bleed photographic metaphor structure; Serif display headline over mono uppercase labels pattern; Crosshair/grid overlay marks as structural motif; Scroll-triggered image transition concept - Dependencies: Specific grafting/orchard photography asset; Proprietary fonts (Flecha M/S, GT Standard L/Mono); Exact scroll transition timing and easing - Guidance: Reuse the full-bleed metaphor-photo + minimal label + serif statement layout with any strong sequential photography; replace the grid-mark overlay with a brand's own technical motif and substitute fonts while preserving the uppercase mono label and serif display contrast. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples. ### Agent implementation prompt Create an original editorial section inspired by the design evidence titled “Grafting hands process detail”. Purpose: A close-up photographic tableau showing hands grafting a branch, serving as a visual metaphor in the scrolling narrative. Structure: full-bleed. Source layout label: Full-bleed close-up photograph.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Close-up of hands using a knife and wrapping tape to graft a small tree branch. Components: full-width image, scroll animation. Style direction: editorial, photographic. Observed crop: 1440×1734px (0.83:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"77.1px","family":"Flecha M","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: Flecha M at 77.1px used for massive headline statements.","sampleId":"font-7","confidence":1,"lineHeight":"77.1px","letterSpacing":"normal"} {"role":"heading","size":"26.6px","family":"Flecha S","source":"computed","traits":"Regular","weight":"400","evidence":"font-11: computed CSS at 1440×1000; AI role: Flecha S at 26.6px used for secondary italicized statements and section intros.","sampleId":"font-11","confidence":0.9,"lineHeight":"30.6px","letterSpacing":"-0.5px"} {"role":"body","size":"15.4px","family":"GT Standard L","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: GT Standard L at 15.4px used for paragraphs explaining the model.","sampleId":"font-5","confidence":0.9,"lineHeight":"20px","letterSpacing":"-0.1px"} {"role":"mono","size":"9.2px","family":"GT Standard Mono","source":"computed","traits":"uppercase","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: GT Standard Mono at 9.2px used extensively for labels, badges, and structural UI text.","sampleId":"font-10","confidence":1,"lineHeight":"9.2px","letterSpacing":"0.4px"} Color evidence: {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White text is primary over the dark and richly colored painted backgrounds.","sampleId":"color-2","confidence":0.9} {"hex":"#F2F1ED","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(242, 241, 237); AI role: Off-white background used for the 'Request Partnership' primary call to action.","sampleId":"color-6","confidence":0.9} {"hex":"#2E2109","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(46, 33, 9); AI role: Dark brown used for text when the background transitions to lighter areas, like the parchment scenes.","sampleId":"color-4","confidence":0.85} {"hex":"#0B0A09","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(11, 10, 9); AI role: Used for dark backgrounds in non-image sections or dark button fills.","sampleId":"color-1","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]} Motion evidence: observed sequence: The scene shows hands grafting a small branch onto a larger one, which then transitions into a dense pear tree. (95% confidence) Transfer these principles: Full-bleed photographic metaphor structure; Serif display headline over mono uppercase labels pattern; Crosshair/grid overlay marks as structural motif; Scroll-triggered image transition concept. Dependencies: Specific grafting/orchard photography asset; Proprietary fonts (Flecha M/S, GT Standard L/Mono); Exact scroll transition timing and easing. Adaptation guidance: Reuse the full-bleed metaphor-photo + minimal label + serif statement layout with any strong sequential photography; replace the grid-mark overlay with a brand's own technical motif and substitute fonts while preserving the uppercase mono label and serif display contrast. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.