# Overhead architectural blueprint Schema: Design Details SECTION.md v3.2 Website: Pear Source: https://pear.no/ Source section IDs: 35db916c-ec09-44fa-9d9b-5267f40d30a3 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The illustration sits low on the left of a mostly empty cream canvas, and the open space makes the lopsided layout feel intentional and editorial. - The top-down drawing has clear internal order: dome at the centre, scaffolding around it, then small tools and figures that tell the construction story. - A single small uppercase mono label with wide tracking adds a quiet caption and doesn't compete with the artwork. What a screenshot can't show: - The recording shows the drawing changing to an overhead view between about 21 and 24 seconds, but the exact transition (scale, fade or swap) isn't described. - No type sizes, spacing or padding were measured, so label size and tracking values are unknown. Borrow: Let one detailed illustration carry the story, anchor it off-centre, and leave the rest of the canvas empty with a tiny label for context. Leave alone: Don't copy the golden dome and scaffolding artwork, the vintage blueprint drawing style, or the cream and near-black palette; use your own subject and illustration. ## Classification - Type: editorial - Layout: Illustration anchored to the bottom left of a mostly empty cream canvas. - Styles: editorial, illustrative, retro - Confidence: 95% ## Purpose and structure A top-down view of the golden dome construction, styled as a vintage architectural blueprint or sketch. Visual signature: Top-down view of a golden dome on a marble base surrounded by wooden scaffolding and loose tools. ## Components - narrative illustration ## 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 - 21.0–24.0s — The architectural drawing transitions with an overhead view of the structure. (95% confidence) ## Section quality Overall: 62.47/100 (Good) Scored coverage: 85% - Typography: 58 — Only a single small uppercase mono label ('THE TERMS') with wide tracking is visible in the crop, consistent with the deterministic mono token. It's clean and legible but there is too little typographic content here to demonstrate hierarchy or range beyond one label. Next tier: Needs visible secondary/body text or a display headline pairing to show typographic hierarchy within this crop. - Composition: 68 — Strong asymmetric composition: a detailed top-down illustration anchored bottom-left against a vast cream negative-space field creates a confident, editorial tension. The illustration itself has clear internal hierarchy (dome, scaffolding, figures, tools) and the empty space reads as deliberate rather than accidental. Next tier: The empty right two-thirds feels unresolved without knowing what follows it in scroll; no secondary compositional element anchors the right side within this crop, capping impact below strong/memorable territory. - Motion: inconclusive — Gemini's motion note is vague ('transitions with an overhead view') without a specific describable visible change (e.g., scale, position, reveal mechanics), so motion cannot be scored. Next tier: Needs specific timestamped description of what visibly changes (pan, zoom, parallax, draw-on reveal) to assess motion quality. - Content: 65 — The illustration is well-integrated as the sole content focus, doing narrative work (construction process) without competing UI clutter. The small label grounds it contextually. Next tier: Lacks supporting copy or caption content visible in-crop to demonstrate how illustration and text integrate as a system. - Originality: 66 — A vintage architectural/blueprint-style top-down illustration of dome construction is a distinctive narrative device, more specific and crafted than generic photography or stock iconography, lending real character to the section. Next tier: Illustration style and motif, while well-executed, is a recognizable genre (vintage technical illustration) rather than a wholly novel structural idea; needs more unique framing device or interaction to push into memorable territory. - Adaptability: 55 — The deterministic facts show reusable tokens (mono uppercase label style, sharp corners, cream/dark palette) but the core asset is a bespoke illustration, so only the layout shell and label treatment transfer cleanly. Next tier: No spacing, grid, or breakpoint data provided for the illustration placement itself, limiting confidence in how reliably the asymmetric layout adapts. Strengths: - Confident asymmetric layout using large negative space to let the illustration breathe - Distinctive, narrative-driven illustration style (vintage overhead blueprint) that feels bespoke rather than templated - Minimal, restrained labeling keeps focus on the imagery Weaknesses: - Very sparse typographic content visible, making hierarchy hard to judge - Motion description too vague to assess quality - Large right-side negative space feels unresolved without more context from adjacent content - No visible body copy or supporting text integrated with the illustration in this crop Why it does not reach the next tier: The composition and illustration show genuine editorial intent, but the crop lacks enough typographic interplay, resolved use of the empty space, and verifiable motion detail to earn a strong/memorable rating; it reads as a confident single beat rather than a fully realized layout moment. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the asymmetric placement and label styling for any large illustrative or photographic centerpiece set against open space, but replace the bespoke illustration with new artwork matched to the new context. What transfers: - Asymmetric bottom-left anchored layout with generous negative space - Uppercase monospace label treatment with wide tracking - Cream background with dark line-art illustration contrast Dependencies: - Bespoke hand-illustrated artwork specific to the dome construction narrative - Exact illustration content and composition cannot be substituted without losing meaning ## 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%) - Only a single small text label is visible, limiting typography assessment - Motion description lacks specific visible change detail - No spacing or grid measurement data provided for this section - Right two-thirds of the crop is empty, obscuring how the section resolves ## 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: Illustration anchored to the bottom left of a mostly empty cream canvas. - Layout: Illustration anchored to the bottom left of a mostly empty cream canvas. - Styles: editorial, illustrative, retro - Components: narrative illustration - Purpose: A top-down view of the golden dome construction, styled as a vintage architectural blueprint or sketch. - Visual signature: Top-down view of a golden dome on a marble base surrounded by wooden scaffolding and loose tools. - Place on the page: 22 of 22, after Gallery (`8daae0fb-4707-49ff-b396-7119591cab09`) ### Crop and composition - Crop: 1440×510px; aspect ratio 2.824:1 - Page bounds: 23490–24000px 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": 23490, "bottom": 24000, "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": 23490, "bottom": 24000, "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 architectural drawing transitions with an overhead view of the structure. (21s–24s; 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: Asymmetric bottom-left anchored layout with generous negative space; Uppercase monospace label treatment with wide tracking; Cream background with dark line-art illustration contrast - Dependencies: Bespoke hand-illustrated artwork specific to the dome construction narrative; Exact illustration content and composition cannot be substituted without losing meaning - Guidance: Reuse the asymmetric placement and label styling for any large illustrative or photographic centerpiece set against open space, but replace the bespoke illustration with new artwork matched to the new context. ### 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 “Overhead architectural blueprint”. Purpose: A top-down view of the golden dome construction, styled as a vintage architectural blueprint or sketch. Structure: Illustration anchored to the bottom left of a mostly empty cream canvas.. Source layout label: Illustration anchored to the bottom left of a mostly empty cream canvas.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Top-down view of a golden dome on a marble base surrounded by wooden scaffolding and loose tools. Components: narrative illustration. Style direction: editorial, illustrative, retro. Observed crop: 1440×510px (2.824: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 architectural drawing transitions with an overhead view of the structure. (95% confidence) Transfer these principles: Asymmetric bottom-left anchored layout with generous negative space; Uppercase monospace label treatment with wide tracking; Cream background with dark line-art illustration contrast. Dependencies: Bespoke hand-illustrated artwork specific to the dome construction narrative; Exact illustration content and composition cannot be substituted without losing meaning. Adaptation guidance: Reuse the asymmetric placement and label styling for any large illustrative or photographic centerpiece set against open space, but replace the bespoke illustration with new artwork matched to the new context. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.