# Case study rows Schema: Design Details SECTION.md v3.2 Website: Pash Source: https://www.pash.website/ Source section IDs: gap-5dc75a4c-5818-9042 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Full-width rows alternate light, dark and black backgrounds, and the image swaps sides, which gives the list a steady editorial rhythm. - Each row has a clear hierarchy: a large uppercase condensed project name, small all-caps industry and role text, then the country, so the index scans quickly. - Photos that tie to the real work (satellite, building, crowd) make each project credible, and bracketed view links give every row the same clear action. What a screenshot can't show: - The recording showed no motion, so hover states, scroll reveals and transitions are unknown. - No font sizes, spacing or padding were measured, so the exact type scale and row heights can't be confirmed. Borrow: Use one repeating row module of title, small metadata, image and a link, and let the background tone and image side change to set the pacing. Leave alone: Don't copy Pash's cream, blue and black palette, its condensed uppercase headline face or its bracketed link style; use your own type, such as a free condensed grotesque, and your own link treatment. ## Classification - Type: gallery - Layout: Stacked horizontal rows spanning the width of the page, alternating in background tone. - Styles: minimal, photographic, bold - Confidence: 85% ## Purpose and structure A list of wide case study projects featuring alternating light and dark backgrounds, project titles, and teaser images. Visual signature: Sequential horizontal blocks showing varying project photography next to minimal text. ## Components - case study rows - project images - project details - view links ## Typography - Display: Base Neue Trial SuperCn — 360px 600 - Heading: Base Neue Trial SuperCn — 100px 600 - Body: Base Neue Trial — 16px 500 ## Functional palette - Primary-Action: primary action #004CFF - Canvas: canvas #E3E4D8 - Text: text #000000 - Border: border #222222 ## Motion evidence - No section-specific authored motion was established. ## Section quality Overall: 61.82/100 (Good) Scored coverage: 85% - Typography: 64 — Uppercase condensed headline face for project names paired with small all-caps metadata lines and bracketed link text creates a clear, confident typographic voice with good hierarchy between title, role/industry, and country. The monospaced bracket link convention is a nice systemized detail, but the type itself is a single stylistic trick repeated across rows rather than nuanced pairing. Next tier: Needs more variation in scale/weight relationships or a secondary refinement (e.g. kerning, numerals, micro-labels) beyond the repeated bracket-link/title pattern to earn strong-tier typographic distinction. - Composition: 66 — Alternating light/dark/black full-bleed rows with image-left-or-right rhythm and generous whitespace produce a confident, editorial pacing. The grid is consistent and legible, with text block and image occupying clearly separated zones. However the layout is a fairly conventional alternating two-column case-study list seen across many portfolio sites, limiting distinctiveness. Next tier: Would need an unexpected layout break, asymmetry, or overlap device unique to this section to move past a well-executed but familiar alternating-row pattern. - Motion: not_assessed — No timestamped motion evidence was supplied for this section; the crop is a static tall screenshot. Next tier: Provide specific timestamped visible motion (hover states, image reveals, link underline animation) to assess this axis. - Content: 62 — Each row pairs a named client, industry/role line, and country with a representative photo, giving a credible, scannable case-study index. Images (satellite, building, crowd) feel tied to real work rather than generic stock, which supports the content integration. Next tier: Needs tighter visual/textual integration (e.g. captions describing outcome, varied image framing per project) rather than a uniform image-right template to reach strong tier. - Originality: 55 — Alternating-background case study rows with bracket-styled view links is a recognizable contemporary portfolio pattern; competently executed but not a novel structural idea. Next tier: Would need a distinguishing mechanic (unconventional grid break, interactive reveal, unexpected pairing of text/image) that isn't just a cleaner version of a common pattern. - Adaptability: 60 — The row structure (title/meta block + image + link) is modular and could be reused with different projects or color schemes; alternating backgrounds are a clear, separable skin layer from the repeating row logic. Next tier: Dependency on large custom condensed display font and specific imagery tone (duotone/blue overlays) ties visual identity closely to brand assets, limiting skin/structure separation at a higher tier. Strengths: - Clear alternating light/dark/black rhythm that paces scroll through multiple case studies - Consistent, legible hierarchy of title, role, and location text per row - Bracketed link convention adds a small systemized, confident detail Weaknesses: - Pattern (alternating row case-study list) is common across portfolio sites - Uniform image-right/text-left template across rows reduces visual variety - No motion evidence provided, so interactive behavior is unknown - Images, while fitting tonally, are uniformly duotone-treated without further distinguishing treatment Why it does not reach the next tier: The section executes a familiar alternating case-study row pattern cleanly with good hierarchy and pacing, but lacks a distinguishing structural or interactive idea, varied layout rhythm, or unexpected detail that would push it from polished-familiar into memorable territory. ## Adaptation guidance - Effort: Medium - Guidance: Keep the row alternation and text/link block structure; swap in a different typeface and image treatment and the pattern will still read clearly, but hover/link states and motion timing need separate definition since none was observed. What transfers: - Alternating background row structure - Title + metadata + bracketed link content block pattern - Full-bleed image pairing per row Dependencies: - Custom condensed display typeface for titles - Specific blue/duotone image treatment - Exact background color values (canvas, black, dark gray) ## 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 motion timestamps supplied, so interactive/hover behavior could not be scored - Exact spacing, radius, and color values beyond provided tokens are assumed consistent with site-wide deterministic facts - Crop is a tall vertical slice so overall pacing of full case study list beyond visible frame is unknown ## 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: horizontal sequence - Layout: Stacked horizontal rows spanning the width of the page, alternating in background tone. - Styles: minimal, photographic, bold - Components: case study rows, project images, project details, view links - Purpose: A list of wide case study projects featuring alternating light and dark backgrounds, project titles, and teaser images. - Visual signature: Sequential horizontal blocks showing varying project photography next to minimal text. - Place on the page: 6 of 14, after Other (`9ca132b3-3db8-42e6-bded-0c0ba9d85734`), before Other (`pash-website:S03-typographic-statement`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control. ### 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": "360px", "family": "Base Neue Trial SuperCn", "source": "computed", "traits": "uppercase", "weight": "600", "evidence": "font-4: computed CSS at 1440×1000; AI role: 360px 'Base Neue Trial SuperCn' used for massive, screen-filling text.", "sampleId": "font-4", "confidence": 0.95, "lineHeight": "306px", "letterSpacing": "normal" }, { "role": "heading", "size": "100px", "family": "Base Neue Trial SuperCn", "source": "computed", "traits": "uppercase", "weight": "600", "evidence": "font-3: computed CSS at 1440×1000; AI role: 100px 'Base Neue Trial SuperCn' used for primary section headings.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "80px", "letterSpacing": "normal" }, { "role": "body", "size": "16px", "family": "Base Neue Trial", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-9: computed CSS at 1440×1000; AI role: 16px 'Base Neue Trial' used for standard paragraph reading text.", "sampleId": "font-9", "confidence": 0.9, "lineHeight": "20.8px", "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": "#004CFF", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-2: computed rgb(0, 76, 255); AI role: #004CFF (electric blue) used extensively for primary text, links, and active elements.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#E3E4D8", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(227, 228, 216); AI role: #E3E4D8 used as the primary light background color for main sections.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: #000000 used for text on light backgrounds and as a dark canvas in inverted sections.", "sampleId": "color-1", "confidence": 0.85 }, { "hex": "#222222", "name": "border", "role": "border", "source": "computed", "evidence": "color-6: computed rgb(34, 34, 34); AI role: #222222 used for section borders and subtle dividers.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px", "density": "Very low density. The layout is expansive, giving the oversized typography and imagery room to breathe.", "evidence": "Observed via DOM/CSS facts for typography sizing (360px, 160px), flat color usage, and visual inspection of sharp image crops and bracketed button text.", "borderStyle": "Thin, solid 1px borders used sparingly as horizontal rules to divide content sections.", "buttonStyle": "Raw text links enclosed in square brackets (e.g., [ VIEW CASESTUDY ]), heavily relying on typographic indication rather than contained shapes.", "cornerStyle": "Sharp, 90-degree straight edges throughout; no rounded corners are visible on images or UI elements.", "contentWidth": "Edge-to-edge typography that utilizes the full viewport width, interspersed with centered, constrained text blocks.", "spacingRhythm": "Generous vertical spacing between massive typographic blocks, creating a distinct pacing as users scroll." } ``` ### 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 No timestamped authored motion is attached. Use only restrained baseline transitions. 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 background row structure; Title + metadata + bracketed link content block pattern; Full-bleed image pairing per row - Dependencies: Custom condensed display typeface for titles; Specific blue/duotone image treatment; Exact background color values (canvas, black, dark gray) - Guidance: Keep the row alternation and text/link block structure; swap in a different typeface and image treatment and the pattern will still read clearly, but hover/link states and motion timing need separate definition since none was observed. ### 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; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion. ### Agent implementation prompt Create an original gallery section inspired by the design evidence titled “Case study rows”. Purpose: A list of wide case study projects featuring alternating light and dark backgrounds, project titles, and teaser images. Structure: horizontal sequence. Source layout label: Stacked horizontal rows spanning the width of the page, alternating in background tone.. Preserve the sense of continuation with a visible next item, progress cue, or directional control. Visual signature to preserve at the pattern level: Sequential horizontal blocks showing varying project photography next to minimal text. Components: case study rows, project images, project details, view links. Style direction: minimal, photographic, bold. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"360px","family":"Base Neue Trial SuperCn","source":"computed","traits":"uppercase","weight":"600","evidence":"font-4: computed CSS at 1440×1000; AI role: 360px 'Base Neue Trial SuperCn' used for massive, screen-filling text.","sampleId":"font-4","confidence":0.95,"lineHeight":"306px","letterSpacing":"normal"} {"role":"heading","size":"100px","family":"Base Neue Trial SuperCn","source":"computed","traits":"uppercase","weight":"600","evidence":"font-3: computed CSS at 1440×1000; AI role: 100px 'Base Neue Trial SuperCn' used for primary section headings.","sampleId":"font-3","confidence":0.9,"lineHeight":"80px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Base Neue Trial","source":"computed","traits":"Regular","weight":"500","evidence":"font-9: computed CSS at 1440×1000; AI role: 16px 'Base Neue Trial' used for standard paragraph reading text.","sampleId":"font-9","confidence":0.9,"lineHeight":"20.8px","letterSpacing":"normal"} Color evidence: {"hex":"#004CFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(0, 76, 255); AI role: #004CFF (electric blue) used extensively for primary text, links, and active elements.","sampleId":"color-2","confidence":0.95} {"hex":"#E3E4D8","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(227, 228, 216); AI role: #E3E4D8 used as the primary light background color for main sections.","sampleId":"color-3","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: #000000 used for text on light backgrounds and as a dark canvas in inverted sections.","sampleId":"color-1","confidence":0.85} {"hex":"#222222","name":"border","role":"border","source":"computed","evidence":"color-6: computed rgb(34, 34, 34); AI role: #222222 used for section borders and subtle dividers.","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. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Alternating background row structure; Title + metadata + bracketed link content block pattern; Full-bleed image pairing per row. Dependencies: Custom condensed display typeface for titles; Specific blue/duotone image treatment; Exact background color values (canvas, black, dark gray). Adaptation guidance: Keep the row alternation and text/link block structure; swap in a different typeface and image treatment and the pattern will still read clearly, but hover/link states and motion timing need separate definition since none was observed. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.