# Staggered Portfolio Showcase Grid Schema: Design Details SECTION.md v3.2 Website: PostGeneric Source: https://postgeneric.com/ Source section IDs: gap-a1228e87-1881-10131 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The zigzag rhythm alternates large images, small device crops and text blocks, so a long scroll stays easy to follow. - Each project repeats one unit of icon, title, short sentence and type label such as Web App or Mobile Game, which makes the gallery scan like a credible index. - A serif headline against a clean sans body gives clear editorial contrast, while the white canvas, pale lavender surfaces and deep indigo text keep the screenshots in focus. What a screenshot can't show: - The recording only shows a plain scroll from about 11s to 27s, with no visible reveals, parallax or hover states. - No font sizes, line heights or spacing values were measured, so the exact scale and gaps are unknown. Borrow: Build the zigzag from one repeatable case-study unit and flip its side each time, so the layout feels varied but follows a simple rule. Leave alone: Don't copy the indigo and lavender palette, the Instrument Serif and Neue Montreal pairing (use a free high-contrast serif with a neutral grotesque instead), or the project names and screenshots. ## Classification - Type: gallery - Layout: Asymmetrical, zigzagging grid combining alternating large images, small device mockups, and text blocks. - Styles: minimal, photographic, editorial - Confidence: 97% ## Purpose and structure A comprehensive portfolio gallery featuring staggered layouts of project thumbnails, device mockups, and brief descriptions. Visual signature: A visually dynamic, asymmetrical arrangement of UI designs and device mockups flowing down the page. ## Components - section headline - project thumbnails - device mockups - project titles - project descriptions ## Typography - Display: neueMontreal — 326.9px 900 - Heading: Instrument Serif — 80.5px 400 - Body: neueMontreal — 16px 500 - Mono: neueMontreal — 15px 500 ## Functional palette - Text: text #1F0B53 - Canvas: canvas #FFFFFF - Surface: surface #F2F1F8 - Canvas: canvas #10032E ## Motion evidence - 11.0–27.0s — The page scrolls down to show various projects in a grid layout, featuring web apps, mobile apps, and digital wallets, with titles like 'Unraven', 'Next App', and 'Vestberry'. (98% confidence) ## Section quality Overall: 60.41/100 (Good) Scored coverage: 85% - Typography: 62 — Instrument Serif headline paired with neueMontreal body creates clear editorial contrast and hierarchy; consistent use of small icon + title + subtitle pattern across project blocks is clean but repetitive without much typographic variation within the grid itself. Next tier: Typography within the repeating project blocks lacks hierarchy variation or expressive treatment beyond the single headline; all entries use identical scale and weight. - Composition: 65 — Alternating left/right placement of device mockups, large images, and small secondary screenshots creates a legible zigzag rhythm across a long scroll, with generous whitespace and consistent three-column anchor (icon/title block, primary image, secondary device crop) giving the grid order despite asymmetry. Next tier: The alternation pattern becomes fully predictable after a few entries, and each project unit uses the same three-part template without variation in scale, cropping, or grouping that would elevate it beyond a competent template repeated many times. - Motion: inconclusive — Gemini only notes a generic scroll-down description without distinct timestamped visual changes (reveals, parallax, hover states) to assess motion quality. Next tier: Need specific timestamped evidence of how individual project blocks animate in (fade, stagger timing, mockup parallax) to score motion. - Content: 60 — Each case study pairs a short descriptive sentence with concrete project type labels (Web App, Mobile Game, etc.) and real screenshots, giving the gallery functional credibility as a portfolio index. Next tier: Descriptions are uniformly brief and generic in structure; no differentiation in content depth, metrics, or storytelling that would distinguish stronger case studies from weaker ones. - Originality: 58 — The zigzag portfolio grid with device mockups and small type labels is a familiar pattern seen widely in agency portfolios; execution is tidy but doesn't introduce a distinctive structural or visual idea. Next tier: No unexpected layout device, interaction, or visual treatment that departs from the standard stacked case-study template used across countless portfolio sites. - Adaptability: 55 — The repeating icon/title/description + image + secondary image unit is a clearly separable template that could be reskinned with different imagery and copy, and the alternating layout logic is deterministic and reusable. Next tier: No deterministic detail on responsive/mobile behavior or interaction states is supplied, limiting confidence in how cleanly the skin separates from behavior across breakpoints. Strengths: - Clear alternating zigzag rhythm sustained across a long scroll without feeling cluttered - Consistent three-part unit (label/title, primary visual, secondary device crop) gives each project a legible identity - Generous whitespace and restrained palette keep focus on the project imagery Weaknesses: - Each project block follows an identical template with no variation in scale or treatment - Motion cannot be assessed due to lack of specific timestamped detail - Typography hierarchy inside each unit is flat and repetitive - Concept is a common portfolio-grid pattern without a distinguishing structural idea Why it does not reach the next tier: The section is a well-executed but formulaic alternating case-study list; it lacks a distinctive structural idea, internal typographic variation, or confirmed motion sophistication that would push it into strong/memorable territory. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the repeating three-part unit (icon/title/description, primary image, secondary mockup) and the alternating left-right placement logic as a reusable case-study template; swap in new project imagery, icons, and copy while preserving the whitespace rhythm and serif/sans type pairing for hierarchy. What transfers: - Alternating left/right project block layout - Icon + title + short description label pattern - Primary image paired with secondary device-mockup crop Dependencies: - Specific project screenshots and device mockup assets - Brand icon set per project ## 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 quality unassessed due to lack of specific timestamped interaction evidence - No deterministic data on responsive behavior across breakpoints - Cannot verify exact spacing or image treatment specifics beyond general observation ## 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: gallery - Source type: gallery - Structure: grid - Layout: Asymmetrical, zigzagging grid combining alternating large images, small device mockups, and text blocks. - Styles: minimal, photographic, editorial - Components: section headline, project thumbnails, device mockups, project titles, project descriptions - Purpose: A comprehensive portfolio gallery featuring staggered layouts of project thumbnails, device mockups, and brief descriptions. - Visual signature: A visually dynamic, asymmetrical arrangement of UI designs and device mockups flowing down the page. - Place on the page: 5 of 9, after Stats (`postgeneric-com:C05`), before Feature collection (`postgeneric-com:C03`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system. ### 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": "326.9px", "family": "neueMontreal", "source": "computed", "traits": "Regular", "weight": "900", "evidence": "font-30: computed CSS at 1440×1000; AI role: neueMontreal at a massive 326.9px used for the background brand text in the footer.", "sampleId": "font-30", "confidence": 0.95, "lineHeight": "255px", "letterSpacing": "-14.3px" }, { "role": "heading", "size": "80.5px", "family": "Instrument Serif", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: Instrument Serif at 80.5px used for prominent section headers like 'Proof that taste still matters'.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "80.5px", "letterSpacing": "-1px" }, { "role": "body", "size": "16px", "family": "neueMontreal", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-9: computed CSS at 1440×1000; AI role: neueMontreal at 16px used for standard paragraph text describing portfolio projects.", "sampleId": "font-9", "confidence": 0.9, "lineHeight": "24.8px", "letterSpacing": "-0.4px" }, { "role": "mono", "size": "15px", "family": "neueMontreal", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-24: computed CSS at 1440×1000; AI role: neueMontreal at 15px used for navigation links; while not strictly monospaced, it serves as the functional UI font.", "sampleId": "font-24", "confidence": 0.7, "lineHeight": "22.5px", "letterSpacing": "normal" } ] } ``` ### 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": "#1F0B53", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(31, 11, 83); AI role: Deep purple/blue (#1F0B53) is used as the primary text color, providing high contrast against light backgrounds.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used as the primary background color for the main content areas.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#F2F1F8", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(242, 241, 248); AI role: Light lavender (#F2F1F8) is used for the background of testimonial cards and the secondary pricing card.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#10032E", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-6: computed rgb(16, 3, 46); AI role: Very dark blue (#10032E) is used as the background for the primary, emphasized pricing card.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons feature fully rounded (pill-shaped) radii. Cards (pricing, testimonials) feature moderate border-radii, likely around 16px-24px.", "density": "Low density. The design prioritizes whitespace and large typographic/visual elements over packing information tightly.", "evidence": "Observation of padding around text blocks, the distinct pill shape of all clickable CTAs, the lack of visible borders on cards, and the expansive layout structure.", "borderStyle": "Borders are largely absent. Separation is achieved through background color shifts (e.g., white vs. light lavender) rather than explicit border lines.", "buttonStyle": "Buttons are consistently pill-shaped. Variations include solid white with dark text on colored backgrounds, and solid dark with white text on light backgrounds. Ghost/outline styles are also present.", "cornerStyle": "Smooth, rounded corners are a key motif, softening the UI.", "contentWidth": "Content is generally centered within a constrained max-width container, with some elements (like images or background typography) breaking out for dramatic effect.", "spacingRhythm": "Generous spacing with large vertical margins between distinct sections (e.g., between portfolio items and pricing). Padding within cards is ample to maintain a breathable layout." } ``` ### 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": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### 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 null ``` ### Observed motion 1. **scroll** — The page scrolls down to show various projects in a grid layout, featuring web apps, mobile apps, and digital wallets, with titles like 'Unraven', 'Next App', and 'Vestberry'. (11s–27s; 98% 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: unknownpx 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: Alternating left/right project block layout; Icon + title + short description label pattern; Primary image paired with secondary device-mockup crop - Dependencies: Specific project screenshots and device mockup assets; Brand icon set per project - Guidance: Reuse the repeating three-part unit (icon/title/description, primary image, secondary mockup) and the alternating left-right placement logic as a reusable case-study template; swap in new project imagery, icons, and copy while preserving the whitespace rhythm and serif/sans type pairing for hierarchy. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Staggered Portfolio Showcase Grid”. Purpose: A comprehensive portfolio gallery featuring staggered layouts of project thumbnails, device mockups, and brief descriptions. Structure: grid. Source layout label: Asymmetrical, zigzagging grid combining alternating large images, small device mockups, and text blocks.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system. Visual signature to preserve at the pattern level: A visually dynamic, asymmetrical arrangement of UI designs and device mockups flowing down the page. Components: section headline, project thumbnails, device mockups, project titles, project descriptions. Style direction: minimal, photographic, editorial. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"326.9px","family":"neueMontreal","source":"computed","traits":"Regular","weight":"900","evidence":"font-30: computed CSS at 1440×1000; AI role: neueMontreal at a massive 326.9px used for the background brand text in the footer.","sampleId":"font-30","confidence":0.95,"lineHeight":"255px","letterSpacing":"-14.3px"} {"role":"heading","size":"80.5px","family":"Instrument Serif","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Instrument Serif at 80.5px used for prominent section headers like 'Proof that taste still matters'.","sampleId":"font-6","confidence":0.9,"lineHeight":"80.5px","letterSpacing":"-1px"} {"role":"body","size":"16px","family":"neueMontreal","source":"computed","traits":"Regular","weight":"500","evidence":"font-9: computed CSS at 1440×1000; AI role: neueMontreal at 16px used for standard paragraph text describing portfolio projects.","sampleId":"font-9","confidence":0.9,"lineHeight":"24.8px","letterSpacing":"-0.4px"} {"role":"mono","size":"15px","family":"neueMontreal","source":"computed","traits":"Regular","weight":"500","evidence":"font-24: computed CSS at 1440×1000; AI role: neueMontreal at 15px used for navigation links; while not strictly monospaced, it serves as the functional UI font.","sampleId":"font-24","confidence":0.7,"lineHeight":"22.5px","letterSpacing":"normal"} Color evidence: {"hex":"#1F0B53","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(31, 11, 83); AI role: Deep purple/blue (#1F0B53) is used as the primary text color, providing high contrast against light backgrounds.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used as the primary background color for the main content areas.","sampleId":"color-3","confidence":0.9} {"hex":"#F2F1F8","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(242, 241, 248); AI role: Light lavender (#F2F1F8) is used for the background of testimonial cards and the secondary pricing card.","sampleId":"color-2","confidence":0.85} {"hex":"#10032E","name":"canvas","role":"canvas","source":"computed","evidence":"color-6: computed rgb(16, 3, 46); AI role: Very dark blue (#10032E) is used as the background for the primary, emphasized pricing card.","sampleId":"color-6","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: scroll: The page scrolls down to show various projects in a grid layout, featuring web apps, mobile apps, and digital wallets, with titles like 'Unraven', 'Next App', and 'Vestberry'. (98% confidence) Transfer these principles: Alternating left/right project block layout; Icon + title + short description label pattern; Primary image paired with secondary device-mockup crop. Dependencies: Specific project screenshots and device mockup assets; Brand icon set per project. Adaptation guidance: Reuse the repeating three-part unit (icon/title/description, primary image, secondary mockup) and the alternating left-right placement logic as a reusable case-study template; swap in new project imagery, icons, and copy while preserving the whitespace rhythm and serif/sans type pairing for hierarchy. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.