# Pear tree canopy background Schema: Design Details SECTION.md v3.2 Website: Pear Source: https://pear.no/ Source section IDs: 60928c0d-6ca0-4814-a53d-dc5b801e2f10 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A full-bleed canopy photo gives the section depth and texture, while the text sits in open negative space so it stays legible over the busy foliage. - The golden pear sits off-center and ties directly to the copy 'We build it', so the image carries the message instead of just decorating. - Type is restricted to three tiers: a small mono label, a large serif headline and an italic secondary line, with a thin grid and corner ticks adding a technical layer. What a screenshot can't show: - In the recording, the grafting scene dissolves into the pear canopy between about 5 and 9 seconds, and the golden pear and 'We build it.' fade in. No other motion was captured. - No font sizes, spacing or line heights were measured, so the scale shown here is only visual. Borrow: Place a short text block in the quiet area of a rich photograph, and choose one focal detail in the image that echoes the message. Leave alone: Don't copy the pear and orchard metaphor, the golden pear, the Flecha serif or the dark-and-cream palette; use your own image concept and a free editorial serif in a similar style. ## Classification - Type: editorial - Layout: Full-bleed background image with centered short text overlay. - Styles: editorial, photographic - Confidence: 95% ## Purpose and structure A dense, rich photographic background of a pear tree canopy with sparse typography overlaid. Visual signature: Lush green pear tree branches filled with green pears and dark foliage. ## Components - background image - short text element ## 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 grafting scene transitions into a dense pear tree filled with green pears and one golden pear. The text 'We build it.' appears. (95% confidence) ## Section quality Overall: 64.40/100 (Good) Scored coverage: 100% - Typography: 68 — The serif display 'We build it.' in Flecha M against the photographic canopy, paired with a small mono label and italic-weight secondary line, shows a clear type hierarchy restrained to three tiers. Letter-forms interplay nicely with branch silhouettes but the text itself is minimal and unremarkable in treatment. Next tier: No distinctive kerning, scale contrast, or type-to-image integration beyond simple overlay placement to justify higher score. - Composition: 74 — Strong full-bleed photographic composition: the golden pear is placed off-center at a visual sweet spot, a thin technical grid with corner ticks overlays the organic image creating tension between engineered precision and nature, and text sits in open negative space rather than competing with foliage. The layering of mono label, headline, and subcopy in the lower third is deliberate and legible against the busy photo. Next tier: Needs more dynamic framing or layered depth (e.g., parallax, varied scale) to move from a well-composed static hero to something more inventive structurally. - Motion: 55 — Gemini documents one transition: grafting scene dissolving into the pear canopy with the golden pear and headline fade-in between 5-9s. This is a single straightforward crossfade/reveal, functional but not elaborate. Next tier: Only one simple transition point is evidenced; no parallax, staggered reveals, or sustained motion choreography is documented to earn a higher tier. - Content: 65 — The golden pear functions as a found metaphor (hidden quality/opportunity) tied directly to the copy 'We build it' and 'Tailored software, built to be found,' giving the image a narrative purpose beyond decoration. Next tier: The metaphor, while apt, is a single visual pun; it doesn't extend into deeper content layering or copy sophistication to reach strong/memorable territory. - Originality: 62 — Using an orchard/pear metaphor for a software brand is an unusual and specific choice, with the gilded pear as a clever easter-egg-like detail layered against a technical grid overlay — a reasonably distinctive concept. Next tier: Lush photographic nature-backdrop-with-overlay-text is still a familiar editorial pattern; only the pear-gold detail and grid overlay push it past generic, not into landmark distinctiveness. - Adaptability: 58 — Structure (full-bleed media + centered/lower-third text block + grid overlay) is clearly separable from the specific photographic asset and brand metaphor, and typography/token facts (fonts, colors, corner style) are deterministically documented. Next tier: Heavy dependency on a bespoke, highly specific photographic asset (golden pear detail) limits transferability of the core visual impact even though the skeleton pattern is generic. Strengths: - Golden pear as a found visual metaphor directly reinforcing the copy 'We build it' / 'built to be found' - Thin technical grid with corner ticks overlaid on an organic photograph creates a nice engineered-vs-natural tension - Clear typographic hierarchy (mono label, serif display, small subcopy) kept sparse against a dense background - Full-bleed photography with text placed in genuine negative space for legibility Weaknesses: - Only one documented motion transition, limiting assessment of any sustained choreography - Core composition relies heavily on stock-like orchard photography rather than designed graphic elements - Text treatment itself is minimal/standard overlay type with no unique typographic manipulation - Pattern (full-bleed nature photo + centered text) is a familiar editorial trope Why it does not reach the next tier: The section achieves a coherent, well-placed metaphor and disciplined composition, but the photographic hero-with-overlay-text pattern, single simple transition, and lack of typographic or structural invention keep it from strong/memorable territory; nothing here is hard to substitute beyond the specific asset choice. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the full-bleed-image-plus-grid-overlay-plus-lower-third-text skeleton with any brand's own striking photography and a one-line narrative metaphor; the grid overlay and type hierarchy are easy to port, but a comparably strong hero image/metaphor must be sourced or commissioned. What transfers: - Full-bleed photographic background with lower-third text block layout - Thin grid-line overlay treatment with corner tick marks - Three-tier type hierarchy: mono label, serif display, small subcopy - Crossfade-style scene transition pattern Dependencies: - Bespoke high-quality photographic/CGI asset (pear tree with golden pear detail) - Flecha M/S and GT Standard Mono custom font licenses - Brand-specific metaphor requiring content strategy work to adapt ## 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 assessed from a single Gemini-documented transition; no information on scroll-triggered behavior beyond that window - No deterministic spacing/radius/shadow measurements were provided for this specific crop beyond general site tokens - Cannot verify exact image treatment (color grading parameters, video vs static) from static crop alone ## 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: centered single-column - Layout: Full-bleed background image with centered short text overlay. - Styles: editorial, photographic - Components: background image, short text element - Purpose: A dense, rich photographic background of a pear tree canopy with sparse typography overlaid. - Visual signature: Lush green pear tree branches filled with green pears and dark foliage. - Place on the page: 6 of 22, after Process (`pear-no:editorial_grafting_process`), before Feature collection (`6955eb67-2102-48be-97b4-5352da31b7fc`) ### Crop and composition - Crop: 1440×888px; aspect ratio 1.622:1 - Page bounds: 4680–5568px of 24000px - Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. ### 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": 4680, "bottom": 5568, "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": 4680, "bottom": 5568, "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. **entrance** — The grafting scene transitions into a dense pear tree filled with green pears and one golden pear. The text 'We build it.' appears. (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 background with lower-third text block layout; Thin grid-line overlay treatment with corner tick marks; Three-tier type hierarchy: mono label, serif display, small subcopy; Crossfade-style scene transition pattern - Dependencies: Bespoke high-quality photographic/CGI asset (pear tree with golden pear detail); Flecha M/S and GT Standard Mono custom font licenses; Brand-specific metaphor requiring content strategy work to adapt - Guidance: Reuse the full-bleed-image-plus-grid-overlay-plus-lower-third-text skeleton with any brand's own striking photography and a one-line narrative metaphor; the grid overlay and type hierarchy are easy to port, but a comparably strong hero image/metaphor must be sourced or commissioned. ### 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 “Pear tree canopy background”. Purpose: A dense, rich photographic background of a pear tree canopy with sparse typography overlaid. Structure: centered single-column. Source layout label: Full-bleed background image with centered short text overlay.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Lush green pear tree branches filled with green pears and dark foliage. Components: background image, short text element. Style direction: editorial, photographic. Observed crop: 1440×888px (1.622: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: entrance: The grafting scene transitions into a dense pear tree filled with green pears and one golden pear. The text 'We build it.' appears. (95% confidence) Transfer these principles: Full-bleed photographic background with lower-third text block layout; Thin grid-line overlay treatment with corner tick marks; Three-tier type hierarchy: mono label, serif display, small subcopy; Crossfade-style scene transition pattern. Dependencies: Bespoke high-quality photographic/CGI asset (pear tree with golden pear detail); Flecha M/S and GT Standard Mono custom font licenses; Brand-specific metaphor requiring content strategy work to adapt. Adaptation guidance: Reuse the full-bleed-image-plus-grid-overlay-plus-lower-third-text skeleton with any brand's own striking photography and a one-line narrative metaphor; the grid overlay and type hierarchy are easy to port, but a comparably strong hero image/metaphor must be sourced or commissioned. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.