# Classical figure slicing pear Schema: Design Details SECTION.md v3.2 Website: Pear Source: https://pear.no/ Source section IDs: 68f146bd-180d-43fe-9744-6e970bafcd92 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Text sits in the open negative space of the painting, so the copy and the hand holding the pear never collide. - A large serif statement set against small tracked mono labels like 'THE MODEL' gives a clear editorial hierarchy. - The slicing image acts as a literal metaphor for the copy about sharing what the work earns, so the picture carries the argument. What a screenshot can't show: - In the recording, the figure appears holding the pear and knife from about 9 to 12 seconds. From 12 to 16 seconds the pear is cut in half and dissolves into blue sky. - No font sizes, letter spacing or spacing values were measured, so the type scale is not confirmed. Borrow: Make the illustration act out the headline, then let a single timed change, such as the cut, deliver the point. Leave alone: Don't copy the green-velvet classical figure, the golden pear, or the Flecha serif; a free high-contrast serif would be a safer base for your own concept. ## Classification - Type: editorial - Layout: Asymmetric illustration with text placed in open negative space. - Styles: editorial, illustrative - Confidence: 95% ## Purpose and structure An illustrative tableau showing a classical figure holding a golden pear and a knife, continuing the storytelling narrative. Visual signature: Man in a green velvet tunic preparing to slice a golden pear with a knife. ## Components - narrative illustration - typography ## 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 - 9.0–12.0s — Transitions to a figure in green velvet holding the golden pear and a knife, with the text 'We share in what it earns.' (95% confidence) - 12.0–16.0s — The figure cuts the golden pear in half, which dissolves into a blue sky. (95% confidence) ## Section quality Overall: 66.55/100 (Good) Scored coverage: 100% - Typography: 66 — Flecha serif display paired with mono uppercase labels creates a clear editorial hierarchy; large serif statements ('We rank it.', 'We share in what it earns.') contrast nicely against small tracked labels like 'THE MODEL' and 'REVENUE SHARE'. Sizing and restraint feel deliberate, though the pairing itself is a familiar editorial convention. Next tier: Needs more typographic invention beyond the standard large-serif/small-mono split to feel distinctive rather than a well-executed pattern. - Composition: 74 — Strong asymmetric placement of text in negative space against the painted figure, with a thin crosshair/grid overlay adding technical tension against the classical imagery. The pear and knife repeat as compositional anchors across the two stacked frames, and copy is positioned to interact with the hand/pear without colliding. Next tier: The grid-over-painting device and text placement, while elegant, is close to a known editorial-tech trope; would need a more unexpected spatial relationship or tighter integration of UI marks with the figure to reach exceptional. - Motion: 68 — Gemini's timestamps describe a specific, purposeful transition: the figure appears holding pear and knife, then cuts the pear which dissolves into blue sky — a literal visual metaphor tied to the copy ('what it earns'). Next tier: A single metaphor-driven cut/dissolve is effective but not enough incident or layered choreography to be memorable at a higher tier; more supporting motion detail (hand, grid, type) would push it further. - Content: 65 — Copy ('We share in what it earns', 'No hours billed — we co-own the outcome') is tightly integrated with the slicing/sharing visual metaphor, reinforcing a revenue-share value proposition through imagery rather than literal iconography. Next tier: The metaphor is clear but fairly on-the-nose (slicing a pear = sharing earnings); greater subtlety or a second layer of meaning would elevate integration further. - Originality: 69 — Combining painterly classical portraiture with a technical grid overlay and SaaS-style labels is an unusual juxtaposition that creates genuine distinctiveness compared to typical tech-marketing sections. Next tier: The classical-painting-as-metaphor device, while uncommon in SaaS contexts, is recognizable as a now-common 'AI-art meets corporate copy' trend; needs more unique execution details to be irreplaceable. - Adaptability: 55 — The grid/crosshair overlay, mono label tags, and text-in-negative-space pattern could transfer to other hero/narrative sections with different imagery, but the entire concept depends on the specific painted illustration and its narrative pairing with copy. Next tier: No separable deterministic component data (no spacing, radii, or surface tokens for this section) limits confidence in stating layout could be cleanly decoupled from the proprietary artwork. Strengths: - Distinct juxtaposition of classical oil-painting imagery with a precise technical grid overlay and mono-label UI chrome - Clear, purposeful visual metaphor (slicing pear = revenue share) tightly tied to the copy - Confident use of negative space to let typography breathe against a dense, detailed illustration - Consistent small-label + large-serif-statement hierarchy that reads instantly at a glance Weaknesses: - Relies heavily on a custom, hard-to-replace illustrated asset central to its identity - Metaphor execution (knife cutting pear) is a bit literal/on-the-nose for the earned-revenue message - No deterministic spacing, radius, or token data captured for this specific section, limiting precision of adaptability claims - Typography pairing, while clean, follows a familiar editorial convention Why it does not reach the next tier: The section achieves strong visual and conceptual coherence but the central device — painterly illustration with a literal object-based metaphor and grid overlay — sits within a recognizable contemporary design trend rather than introducing a structurally novel idea; to reach exceptional it would need either a more unexpected metaphor, more intricate interplay between the grid/UI marks and the figure, or layered motion beyond a single cut-and-dissolve. ## Adaptation guidance - Effort: High - Guidance: Reuse the typographic hierarchy and grid-overlay/negative-space composition pattern on new imagery, but the core narrative metaphor and bespoke illustration would need full re-creation for a different brand story. What transfers: - Mono-label + large-serif headline hierarchy - Grid/crosshair overlay pattern over full-bleed imagery - Negative-space text placement strategy - Cut/dissolve motion transition concept Dependencies: - Custom painted/illustrated figure artwork specific to brand narrative - Specific object metaphor (pear and knife) tied to copy meaning - Exact animation timing for the slice-to-sky dissolve ## 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 deterministic spacing, radius, or surface measurements were captured for this specific crop - Motion detail limited to two Gemini-described timestamped beats; finer choreography unknown - Exact typographic color/weight values for this crop are inferred from sitewide samples, not confirmed for this section ## 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: Asymmetric illustration with text placed in open negative space. - Layout: Asymmetric illustration with text placed in open negative space. - Styles: editorial, illustrative - Components: narrative illustration, typography - Purpose: An illustrative tableau showing a classical figure holding a golden pear and a knife, continuing the storytelling narrative. - Visual signature: Man in a green velvet tunic preparing to slice a golden pear with a knife. - Place on the page: 8 of 22, after Feature collection (`6955eb67-2102-48be-97b4-5352da31b7fc`), before Process (`b55dee41-7e22-4f7b-845f-ce3a1f25c334`) ### Crop and composition - Crop: 1440×1410px; aspect ratio 1.021:1 - Page bounds: 6786–8196px of 24000px - 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": "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": 6786, "bottom": 8196, "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": 6786, "bottom": 8196, "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** — Transitions to a figure in green velvet holding the golden pear and a knife, with the text 'We share in what it earns.' (9s–12s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **observed sequence** — The figure cuts the golden pear in half, which dissolves into a blue sky. (12s–16s; 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: high - What transfers: Mono-label + large-serif headline hierarchy; Grid/crosshair overlay pattern over full-bleed imagery; Negative-space text placement strategy; Cut/dissolve motion transition concept - Dependencies: Custom painted/illustrated figure artwork specific to brand narrative; Specific object metaphor (pear and knife) tied to copy meaning; Exact animation timing for the slice-to-sky dissolve - Guidance: Reuse the typographic hierarchy and grid-overlay/negative-space composition pattern on new imagery, but the core narrative metaphor and bespoke illustration would need full re-creation for a different brand story. ### 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 “Classical figure slicing pear”. Purpose: An illustrative tableau showing a classical figure holding a golden pear and a knife, continuing the storytelling narrative. Structure: Asymmetric illustration with text placed in open negative space.. Source layout label: Asymmetric illustration with text placed in open negative space.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Man in a green velvet tunic preparing to slice a golden pear with a knife. Components: narrative illustration, typography. Style direction: editorial, illustrative. Observed crop: 1440×1410px (1.021: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: Transitions to a figure in green velvet holding the golden pear and a knife, with the text 'We share in what it earns.' (95% confidence) observed sequence: The figure cuts the golden pear in half, which dissolves into a blue sky. (95% confidence) Transfer these principles: Mono-label + large-serif headline hierarchy; Grid/crosshair overlay pattern over full-bleed imagery; Negative-space text placement strategy; Cut/dissolve motion transition concept. Dependencies: Custom painted/illustrated figure artwork specific to brand narrative; Specific object metaphor (pear and knife) tied to copy meaning; Exact animation timing for the slice-to-sky dissolve. Adaptation guidance: Reuse the typographic hierarchy and grid-overlay/negative-space composition pattern on new imagery, but the core narrative metaphor and bespoke illustration would need full re-creation for a different brand story. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.