# Founder portrait and philosophy Schema: Design Details SECTION.md v3.2 Website: Pash Source: https://www.pash.website/ Source section IDs: gap-5dc75a4c-14497-15837 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - An oversized condensed uppercase headline in saturated blue sits on a warm off-white canvas, and the staggered, offset lines make the statement feel composed rather than simply stacked. - The text block at top left and the inset black-and-white portrait at bottom right balance each other diagonally, so the section feels weighted without being symmetrical. - Small bracketed captions and tags anchor the corners, and a modest body paragraph gives a clear three-step hierarchy from headline to label to copy. What a screenshot can't show: - The recording showed no motion for this section, so any entrance or scroll effects are unknown. - No font sizes, letter spacing or spacing values were measured, so the scale shown is only what a screenshot suggests. Borrow: Pair one massive, single-colour type statement with a small monochrome portrait placed on the opposite diagonal, and let tiny labels frame the edges. Leave alone: Don't copy the exact electric blue on pale olive-cream, the bracketed tag device, or the condensed uppercase display face; a free condensed grotesque like Anton or Barlow Condensed in your own palette would serve. ## Classification - Type: founder - Layout: Split-feel layout with large text on the top left and an inset portrait on the bottom right. - Styles: minimal, editorial, typographic - Confidence: 95% ## Purpose and structure A personal introduction featuring large blue typography about launches and a black-and-white portrait of the founder. Visual signature: Off-white background carrying a heavy typographic statement counterbalanced by a monochrome portrait. ## Components - founder portrait - large heading - text paragraph ## 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: 66.41/100 (Good) Scored coverage: 85% - Typography: 74 — Oversized condensed uppercase display type with staggered line alignment creates a strong, confident statement; mixed scale between massive headline, small caption labels, and body paragraph shows deliberate hierarchy. Letter-stacking of 'LAUNCHES' and offset right-aligned line reads as a considered typographic composition rather than default stacking. Next tier: Relies on a single weight/family contrast (display vs small caption) without more nuanced type pairing or kerning refinement to push into exceptional territory. - Composition: 68 — Asymmetric split between overflowing typography and a grounded bottom-right portrait creates tension and balance; the bracketed caption and tag anchor the corners, giving the canvas a considered edge-to-edge structure. Next tier: The paragraph block floats somewhat disconnected in empty space with awkward indent-stepping that reads as unresolved rather than intentional, holding it back from a tighter, fully resolved grid. - Motion: not_assessed — No timestamped motion evidence supplied for this section. Next tier: Requires timestamped before/after visual change evidence to assess motion. - Content: 65 — Portrait and quote work together to humanize the founder claim; the monochrome photo contrasts cleanly against the blue-on-off-white type system, integrating personal content into the site's established visual language. Next tier: Photo is a fairly generic studio headshot crop with no unique framing or interaction with the typography beyond basic placement. - Originality: 62 — Oversized blue uppercase display type overflowing margins and a bracket-tagged caption are a distinct stylistic choice, but the founder-portrait-plus-big-statement pattern is a now-familiar editorial trope in portfolio sites. Next tier: Needs a more singular or unexpected device beyond scale and color to feel truly novel rather than a well-executed version of a common layout. - Adaptability: 60 — Clear separable layers: display text block, caption/tag components, paragraph block, and portrait image are structurally distinct and tokens (color, type, radius) are deterministic and reusable. Next tier: Precise line-staggering and overflow behavior of the display text depend on specific font metrics and container widths, making exact structural adaptation non-trivial without the original typeface. Strengths: - Oversized condensed uppercase display type with confident scale and color contrast - Asymmetric layout balancing massive text against a grounded portrait - Consistent bracket-tag and caption system reinforcing the site's visual language Weaknesses: - Paragraph text block placement feels loosely anchored in empty space - Portrait is a conventional monochrome headshot without distinctive framing or interaction with type - Pattern of big-statement-plus-founder-photo is a common editorial trope Why it does not reach the next tier: The section is well-executed but leans on familiar editorial conventions (oversized type statement + monochrome founder portrait) without a singular structural or conceptual device that would make it feel irreplaceable or surprising. ## Adaptation guidance - Effort: Medium - Guidance: Separate the display headline, caption tags, and paragraph as independent text layers from the image block; swap the condensed typeface and portrait while preserving the scale hierarchy and color system to retain the section's character. What transfers: - Oversized uppercase display typography system - Bracketed caption/tag convention - Asymmetric text-image split composition Dependencies: - Specific condensed typeface for display text - Exact color token #004CFF for text/links - Portrait image asset ## 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 evidence supplied, so motion axis is not assessed - Exact font metrics and container behavior not verifiable from static crop alone ## 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: founder - Source type: founder - Structure: two-column - Layout: Split-feel layout with large text on the top left and an inset portrait on the bottom right. - Styles: minimal, editorial, typographic - Components: founder portrait, large heading, text paragraph - Purpose: A personal introduction featuring large blue typography about launches and a black-and-white portrait of the founder. - Visual signature: Off-white background carrying a heavy typographic statement counterbalanced by a monochrome portrait. - Place on the page: 10 of 14, after Process (`pash-website:S04-stacking-process`), before Other (`pash-website:S05-validation-stats`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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: Oversized uppercase display typography system; Bracketed caption/tag convention; Asymmetric text-image split composition - Dependencies: Specific condensed typeface for display text; Exact color token #004CFF for text/links; Portrait image asset - Guidance: Separate the display headline, caption tags, and paragraph as independent text layers from the image block; swap the condensed typeface and portrait while preserving the scale hierarchy and color system to retain the section's character. ### 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 founder section inspired by the design evidence titled “Founder portrait and philosophy”. Purpose: A personal introduction featuring large blue typography about launches and a black-and-white portrait of the founder. Structure: two-column. Source layout label: Split-feel layout with large text on the top left and an inset portrait on the bottom right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: Off-white background carrying a heavy typographic statement counterbalanced by a monochrome portrait. Components: founder portrait, large heading, text paragraph. Style direction: minimal, editorial, typographic. 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: Oversized uppercase display typography system; Bracketed caption/tag convention; Asymmetric text-image split composition. Dependencies: Specific condensed typeface for display text; Exact color token #004CFF for text/links; Portrait image asset. Adaptation guidance: Separate the display headline, caption tags, and paragraph as independent text layers from the image block; swap the condensed typeface and portrait while preserving the scale hierarchy and color system to retain the section's character. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.