# Portfolio Projects and Experience Feed Schema: Design Details SECTION.md v3.2 Website: Graham McDonnell Source: https://greymac.com/ Source section IDs: gap-1c97bf59-2796-11893 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Content types decide the layout: data-heavy partners, awards and events sit in light rounded panels, while projects get full-bleed cinematic cards on the black canvas. - Alternating dense tables with large photography gives the long feed a steady editorial rhythm and builds credibility step by step. - A light serif display face with italic accents over a clean sans, plus small restrained table type, makes the hierarchy clear. What a screenshot can't show: - The recording shows a video reel autoplaying in a rounded container and logos, awards and project cards revealing as you scroll, but no distinctive timing or easing was captured. - No font sizes, spacing or padding were measured, so exact scale and rhythm are unknown. Borrow: Let each content type choose its own container, such as light panels for tabular proof and full-bleed imagery for stories, so a long page stays varied and easy to scan. Leave alone: Don't copy the black and pale grey palette, the IvyPresto and Neue Montreal pairing (use a free light serif with a neutral sans instead), or the car and magazine-cover imagery. ## Classification - Type: gallery - Layout: A vertical stack of diverse blocks including a video container, logo grid, tabular lists, and large full-width project cards. - Styles: photographic, editorial, minimal, corporate - Confidence: 95% ## Purpose and structure A lengthy, continuous feed of portfolio highlights, partner logos, awards, and speaking engagements. Visual signature: A rich mix of large imagery (cars, magazine covers, landscapes) interspersed with clean, tabular lists for awards and events. ## Components - video-container - logo-grid - award-list - project-cards - event-list - press-links ## Typography - Display: IvyPresto Display Light — 122.6px 300 - Heading: Neue Montreal Medium — 80px 500 - Body: Hedvig Letters Serif — 14.4px 400 ## Functional palette - Canvas: canvas #000000 - Surface: surface #F2F4F8 - Text: text #424242 - Text: text #FFFFFF - Muted-Text: muted text #888888 ## Motion evidence - 11.0–14.0s — Scrolling reveals a video reel playing automatically within a rounded rectangular container. (90% confidence) - 14.0–18.0s — Notable Partners with brand logos and Industry Recognition awards scroll into view. (95% confidence) - 19.0–30.0s — Large project highlight cards with specific titles and imagery appear during scroll. (98% confidence) - 31.0–35.0s — Events & Conferences section comes into view, listing various speaking engagements. (90% confidence) ## Section quality Overall: 61.85/100 (Good) Scored coverage: 100% - Typography: 68 — Strong display/heading pairing (IvyPresto Display Light with Neue Montreal Medium) creates clear editorial hierarchy on project cards, with elegant large-scale titles and italicized accents ('CONCEPTS', 'HUMAN'). Tabular award/event lists use smaller, restrained type that contrasts well against the display type. However, repeated card compositions reuse the same formula throughout, limiting typographic variety across the long feed. Next tier: Would need more distinctive type treatment variation across cards rather than one repeated template to reach strong/memorable territory. - Composition: 65 — Clear vertical rhythm alternating dense tabular data blocks (partners, awards, events) with full-bleed cinematic project cards gives the feed a structured editorial cadence. Rounded white panels separate data sections from the black canvas cleanly. But the project cards are visually repetitive in structure (image + overlaid title + caption), and the sheer length of the feed risks monotony without stronger compositional variation. Next tier: Needs more structural variation between project cards and tighter curation of list density to feel considered rather than a long undifferentiated scroll. - Motion: 58 — Gemini confirms an autoplaying video reel in a rounded container and sequential scroll-triggered reveals of logos, awards, and project cards, but these are standard scroll-reveal behaviors without distinctive timing, easing, or interaction detail supplied. Next tier: No evidence of bespoke transition choreography, parallax, or hover-state motion beyond generic scroll reveals. - Content: 62 — Content integration is coherent: awards, partners, press, and project imagery are organized into a logical credibility-building narrative. Tabular data (awards/events) is well separated from imagery-heavy storytelling cards, letting content types dictate layout. Next tier: Would need tighter editorial curation or unique presentation per content type rather than relying on one repeated card/list pattern throughout. - Originality: 55 — The overall approach—logo grids, tabular award lists, big cinematic project cards with serif/sans title pairing—is a familiar editorial portfolio convention seen across many creative-agency sites. Execution is polished but the pattern itself is not distinctive. Next tier: Lacks a signature structural or interaction idea that couldn't be substituted with any other agency portfolio template. - Adaptability: 60 — The modular block structure (video container, logo grid, award list, project card, event list) is clearly separable into reusable components with consistent skinning via defined type and color tokens, making structure/skin separation feasible. Next tier: Heavy reliance on specific photographic/video assets for project cards ties visual impact to asset quality, limiting clean separation without those assets. Strengths: - Clear typographic hierarchy pairing serif display and medium sans for project titles - Logical content segmentation between dense tabular credibility data and immersive project imagery - Consistent rounded-panel system separating dark canvas from light content surfaces Weaknesses: - Repetitive card template across the entire project section reduces variety over a very long scroll - Originality is conventional for creative-agency portfolio feeds - Motion evidence limited to generic scroll reveals with no distinctive choreography - Extremely long feed length risks diminishing impact through repetition Why it does not reach the next tier: The section demonstrates solid editorial structure and competent typographic pairing, but the repeated card formula, conventional award/logo list patterns, and absence of any distinctive motion or layout surprise keep it at a polished-but-familiar level rather than memorable. ## Adaptation guidance - Effort: Medium - Guidance: Reusable as a component system (video reel, logo grid, tabular list, project card) with swappable imagery and copy; typography and color tokens need replacement to avoid visual sameness across many project cards. What transfers: - Alternating tabular data block and full-bleed image card rhythm - Rounded white panel system for light-on-dark contrast - Logo grid and award list layout pattern Dependencies: - High-quality photographic/video assets for project cards - Licensed fonts (IvyPresto Display, Neue Montreal, Hedvig Letters Serif) - Specific brand/award/partner logo content ## 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 assessment relies solely on Gemini's generic scroll-reveal descriptions without granular timing or easing detail - Cannot verify exact font rendering, image treatments, or interaction behavior beyond supplied timestamps - Extremely long crop makes it hard to assess total pacing/rhythm with full confidence ## 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: full-bleed - Layout: A vertical stack of diverse blocks including a video container, logo grid, tabular lists, and large full-width project cards. - Styles: photographic, editorial, minimal, corporate - Components: video-container, logo-grid, award-list, project-cards, event-list, press-links - Purpose: A lengthy, continuous feed of portfolio highlights, partner logos, awards, and speaking engagements. - Visual signature: A rich mix of large imagery (cars, magazine covers, landscapes) interspersed with clean, tabular lists for awards and events. - Place on the page: 3 of 5, after Hero (`0740131b-e880-4ac0-8eea-13b1a234b16e`), before Call to action (`greymac-com:contact_cta_footer`) ### Crop and composition - Deterministic crop dimensions are unavailable. - 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": "122.6px", "family": "IvyPresto Display Light", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-15: computed CSS at 1440×1000; AI role: IvyPresto Display Light, 122.6px, used for very large title 'SPHERE' inside a project card.", "sampleId": "font-15", "confidence": 0.9, "lineHeight": "122.6px", "letterSpacing": "normal" }, { "role": "heading", "size": "80px", "family": "Neue Montreal Medium", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-16: computed CSS at 1440×1000; AI role: Neue Montreal Medium, 80px, used for large headings like 'THE' inside project cards.", "sampleId": "font-16", "confidence": 0.9, "lineHeight": "80px", "letterSpacing": "-2.4px" }, { "role": "body", "size": "14.4px", "family": "Hedvig Letters Serif", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: Hedvig Letters Serif, 14.4px, used for descriptive paragraphs in sections.", "sampleId": "font-10", "confidence": 0.85, "lineHeight": "23px", "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": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black (#000000) used as the primary background color for the page.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#F2F4F8", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(242, 244, 248); AI role: Light grey/white (#F2F4F8) used as the background for large content panels.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#424242", "name": "text", "role": "text", "source": "computed", "evidence": "color-7: computed rgb(66, 66, 66); AI role: Dark grey (#424242) used for headings and text on light surfaces.", "sampleId": "color-7", "confidence": 0.85 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for text on the dark canvas.", "sampleId": "color-5", "confidence": 0.85 }, { "hex": "#888888", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-9: computed rgb(136, 136, 136); AI role: Medium grey (#888888) used for secondary text like '( INTRO )'.", "sampleId": "color-9", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large border-radius on the white content panels, creating a 'card' feel within the page.", "density": "Low density, relying on ample whitespace and large typography to structure information.", "evidence": "Observed via the large rounded corners on the white sections separating them from the dark background, generous padding around text blocks, and the pill shape of the 'Get in touch' button.", "borderStyle": "Subtle borders used for separators in lists (e.g., awards, press).", "buttonStyle": "Pill-shaped, solid dark background with white text and an icon.", "cornerStyle": "Combination of sharp edges for full-width elements and large rounded corners for content surfaces.", "contentWidth": "Centered content with significant side margins on desktop, varying width depending on the section (e.g., logo grid vs single paragraph).", "spacingRhythm": "Large vertical spacing between sections, generous padding inside the rounded white panels." } ``` ### 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** — Scrolling reveals a video reel playing automatically within a rounded rectangular container. (11s–14s; 90% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — Notable Partners with brand logos and Industry Recognition awards scroll into view. (14s–18s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 3. **scroll** — Large project highlight cards with specific titles and imagery appear during scroll. (19s–30s; 98% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 4. **observed sequence** — Events & Conferences section comes into view, listing various speaking engagements. (31s–35s; 90% 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 tabular data block and full-bleed image card rhythm; Rounded white panel system for light-on-dark contrast; Logo grid and award list layout pattern - Dependencies: High-quality photographic/video assets for project cards; Licensed fonts (IvyPresto Display, Neue Montreal, Hedvig Letters Serif); Specific brand/award/partner logo content - Guidance: Reusable as a component system (video reel, logo grid, tabular list, project card) with swappable imagery and copy; typography and color tokens need replacement to avoid visual sameness across many project cards. ### 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 “Portfolio Projects and Experience Feed”. Purpose: A lengthy, continuous feed of portfolio highlights, partner logos, awards, and speaking engagements. Structure: full-bleed. Source layout label: A vertical stack of diverse blocks including a video container, logo grid, tabular lists, and large full-width project cards.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: A rich mix of large imagery (cars, magazine covers, landscapes) interspersed with clean, tabular lists for awards and events. Components: video-container, logo-grid, award-list, project-cards, event-list, press-links. Style direction: photographic, editorial, minimal, corporate. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"122.6px","family":"IvyPresto Display Light","source":"computed","traits":"Regular","weight":"300","evidence":"font-15: computed CSS at 1440×1000; AI role: IvyPresto Display Light, 122.6px, used for very large title 'SPHERE' inside a project card.","sampleId":"font-15","confidence":0.9,"lineHeight":"122.6px","letterSpacing":"normal"} {"role":"heading","size":"80px","family":"Neue Montreal Medium","source":"computed","traits":"Regular","weight":"500","evidence":"font-16: computed CSS at 1440×1000; AI role: Neue Montreal Medium, 80px, used for large headings like 'THE' inside project cards.","sampleId":"font-16","confidence":0.9,"lineHeight":"80px","letterSpacing":"-2.4px"} {"role":"body","size":"14.4px","family":"Hedvig Letters Serif","source":"computed","traits":"Regular","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: Hedvig Letters Serif, 14.4px, used for descriptive paragraphs in sections.","sampleId":"font-10","confidence":0.85,"lineHeight":"23px","letterSpacing":"0.4px"} Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black (#000000) used as the primary background color for the page.","sampleId":"color-2","confidence":0.95} {"hex":"#F2F4F8","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(242, 244, 248); AI role: Light grey/white (#F2F4F8) used as the background for large content panels.","sampleId":"color-1","confidence":0.9} {"hex":"#424242","name":"text","role":"text","source":"computed","evidence":"color-7: computed rgb(66, 66, 66); AI role: Dark grey (#424242) used for headings and text on light surfaces.","sampleId":"color-7","confidence":0.85} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for text on the dark canvas.","sampleId":"color-5","confidence":0.85} {"hex":"#888888","name":"muted text","role":"muted-text","source":"computed","evidence":"color-9: computed rgb(136, 136, 136); AI role: Medium grey (#888888) used for secondary text like '( INTRO )'.","sampleId":"color-9","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: Scrolling reveals a video reel playing automatically within a rounded rectangular container. (90% confidence) scroll: Notable Partners with brand logos and Industry Recognition awards scroll into view. (95% confidence) scroll: Large project highlight cards with specific titles and imagery appear during scroll. (98% confidence) observed sequence: Events & Conferences section comes into view, listing various speaking engagements. (90% confidence) Transfer these principles: Alternating tabular data block and full-bleed image card rhythm; Rounded white panel system for light-on-dark contrast; Logo grid and award list layout pattern. Dependencies: High-quality photographic/video assets for project cards; Licensed fonts (IvyPresto Display, Neue Montreal, Hedvig Letters Serif); Specific brand/award/partner logo content. Adaptation guidance: Reusable as a component system (video reel, logo grid, tabular list, project card) with swappable imagery and copy; typography and color tokens need replacement to avoid visual sameness across many project cards. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.