# Classical figures on scaffolding Schema: Design Details SECTION.md v3.2 Website: Pear Source: https://pear.no/ Source section IDs: 2abe1710-681c-4ffe-b039-1c3a4a3e8d66 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A full-bleed classical painting sits against a flat saturated blue field, so the image carries the story while the text stays calm and readable. - The three-tier text stack of mono uppercase label, large serif headline and smaller body copy is easy to scan, with white type reading cleanly on the blue. - The scaffolding and blueprint imagery matches the copy about building technical infrastructure, and thin vertical tick lines echo the scaffold and link image to text. What a screenshot can't show: - The recording shows the blue sky shifting into figures on scaffolding building a giant golden pear, then turning into a blueprint, between about 16 and 21 seconds. - No font sizes, spacing or line heights were measured, so the exact type scale and gaps are unknown. Borrow: Pick one image metaphor that literally illustrates the copy, then add a quiet grid or tick-line device so the flat text area feels tied to the artwork. Leave alone: Do not copy the Renaissance-style painting, the golden pear, the saturated blue or the Flecha and GT Standard fonts; a free serif and clean sans could stand in. ## Classification - Type: editorial - Layout: Full-bleed illustration with floating text to the right. - Styles: editorial, illustrative - Confidence: 95% ## Purpose and structure An illustrative section showing classical figures on a wooden scaffold reading blueprints and painting. Visual signature: Figures in classical garb standing on wooden construction scaffolding reading blueprints. ## Components - narrative illustration - text overlay ## 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 - 16.0–21.0s — The blue sky transitions to a scene of classical figures on scaffolding building a giant golden pear. The scene turns into a blueprint. (95% confidence) ## Section quality Overall: 69.29/100 (Good) Scored coverage: 85% - Typography: 65 — Clear three-tier hierarchy (mono uppercase label, large serif display headline, smaller body paragraph) with good legibility against the saturated blue field, but the actual type choices (Flecha M/S, GT Standard) are conventional editorial pairings without distinctive detailing beyond size and weight contrast. Next tier: No unique type treatment (e.g., custom ligatures, optical sizing, kerning play) beyond standard scale-based hierarchy to push past polished-but-familiar. - Composition: 72 — Strong asymmetric split between full-bleed classical painting and a flat color field carrying floating text, reinforced by thin vertical tick/grid lines that visually echo the scaffolding motif and tie the two halves together conceptually. Next tier: The grid-line device, while thoughtful, is a single repeated motif; a next tier would need additional compositional surprises (e.g., varied scale shifts, layered depth) beyond this one unifying device. - Motion: inconclusive — Gemini's motion note describes a transition involving a 'golden pear' and blueprint morph that does not clearly correspond to the static scaffold/painting imagery visible in this crop; no timestamped change is confirmed to belong specifically to this section's content. Next tier: Need a motion description with timestamps that unambiguously shows what changes within this specific crop's boundaries. - Content: 74 — The classical painting of figures reading blueprints on scaffolding directly mirrors the copy about designing and building technical infrastructure — a legible, well-matched metaphor rather than decorative stock imagery. Next tier: Content integration is strong but singular; it relies on one clever metaphor rather than multiple reinforcing content layers (e.g., annotations, data callouts) that would elevate it further. - Originality: 76 — Pairing a Renaissance-style oil painting with flat-color modern SaaS copy and technical grid overlays is an unusual, specific concept not reducible to a generic template pattern. Next tier: The core device (painting + flat color + overlay text) is compelling but a single idea; landmark-tier work would extend this concept across more inventive variations or deeper system logic. - Adaptability: 60 — The structural skeleton (full-bleed media left, floating text column with connecting tick marks right, mono label + headline + body stack) is clearly separable from the specific painting asset and could be reskinned with other imagery. Next tier: Heavy reliance on a bespoke painted illustration as the semantic anchor makes the concept's impact hard to preserve without an equivalently custom asset, limiting generic reuse. Strengths: - Clever conceptual pairing of classical painting with modern technical copy - Thoughtful grid/tick-mark motif visually bridging illustration and text zones - Clear three-level typographic hierarchy against a high-contrast color field Weaknesses: - Motion evidence doesn't clearly map to this crop's visible content - Typography relies on conventional serif/mono pairing without distinctive detailing - Concept depends on a single bespoke illustration asset, limiting easy reuse Why it does not reach the next tier: The section has a strong unifying idea and clean execution, but the typographic treatment is standard, the motion can't be verified against this specific crop, and the composition leans on one repeated device rather than multiple layered strategies needed for a 'strong/memorable' or higher rating. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the split layout and tick-mark connector system with any high-quality bespoke image that supports a conceptual metaphor; the type stack and grid device translate directly, but impact depends on sourcing or commissioning an equally specific illustration. What transfers: - Full-bleed media left / floating text column right layout - Vertical tick-mark rail connecting label, headline, and body copy - Mono uppercase label + large serif headline + body paragraph hierarchy Dependencies: - Bespoke painted illustration matching the brand's conceptual metaphor - Specific flat accent color (blue) contrasting the image - Custom font family (Flecha M/S) for headline distinctiveness ## 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 data for this exact crop is ambiguous and not confirmed - No deterministic spacing, radius, or shadow data supplied for this section - Font and color facts are inferred from global page tokens, not confirmed as unique to 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: full-bleed - Layout: Full-bleed illustration with floating text to the right. - Styles: editorial, illustrative - Components: narrative illustration, text overlay - Purpose: An illustrative section showing classical figures on a wooden scaffold reading blueprints and painting. - Visual signature: Figures in classical garb standing on wooden construction scaffolding reading blueprints. - Place on the page: 15 of 22, after Feature collection (`c182aac0-60b1-4952-a6a8-c8387f921b47`), before Pricing (`17360d68-3e5e-4a81-8d1d-2b26be67f00c`) ### Crop and composition - Crop: 1440×768px; aspect ratio 1.875:1 - Page bounds: 17190–17958px 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": 17190, "bottom": 17958, "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": 17190, "bottom": 17958, "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 blue sky transitions to a scene of classical figures on scaffolding building a giant golden pear. The scene turns into a blueprint. (16s–21s; 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 media left / floating text column right layout; Vertical tick-mark rail connecting label, headline, and body copy; Mono uppercase label + large serif headline + body paragraph hierarchy - Dependencies: Bespoke painted illustration matching the brand's conceptual metaphor; Specific flat accent color (blue) contrasting the image; Custom font family (Flecha M/S) for headline distinctiveness - Guidance: Reuse the split layout and tick-mark connector system with any high-quality bespoke image that supports a conceptual metaphor; the type stack and grid device translate directly, but impact depends on sourcing or commissioning an equally specific illustration. ### 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 figures on scaffolding”. Purpose: An illustrative section showing classical figures on a wooden scaffold reading blueprints and painting. Structure: full-bleed. Source layout label: Full-bleed illustration with floating text to the right.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Figures in classical garb standing on wooden construction scaffolding reading blueprints. Components: narrative illustration, text overlay. Style direction: editorial, illustrative. Observed crop: 1440×768px (1.875: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 blue sky transitions to a scene of classical figures on scaffolding building a giant golden pear. The scene turns into a blueprint. (95% confidence) Transfer these principles: Full-bleed media left / floating text column right layout; Vertical tick-mark rail connecting label, headline, and body copy; Mono uppercase label + large serif headline + body paragraph hierarchy. Dependencies: Bespoke painted illustration matching the brand's conceptual metaphor; Specific flat accent color (blue) contrasting the image; Custom font family (Flecha M/S) for headline distinctiveness. Adaptation guidance: Reuse the split layout and tick-mark connector system with any high-quality bespoke image that supports a conceptual metaphor; the type stack and grid device translate directly, but impact depends on sourcing or commissioning an equally specific illustration. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.