# 3D City Project Cards & Portfolio Schema: Design Details SECTION.md v3.2 Website: Zero University Source: https://www.zero.university/ Source section IDs: gap-bd723041-5174-11798 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A full-bleed 3D city render gives the section depth and a clear sense of place, while the white cards sit on top as crisp, readable foreground. - Each card holds a concrete project brief with real tools and company names, so the content feels credible rather than placeholder. - A serif headline with a script accent word sets the hierarchy, and small mono labels on the cards keep the detail tidy against the busy illustration. What a screenshot can't show: - Cards slide up from the bottom and stack over the city during scroll, taking about 8 seconds of scrolling (16s to 24s in the recording). - The UI mockup then slides up on the right over about 3 seconds (24s to 27s). No measured font sizes or spacing were captured. Borrow: Layer a rich illustrated backdrop under plain white cards that stack on scroll, so the background sets the story and the cards carry the facts. Leave alone: Don't copy the brand-tower city, the green accent (#0E895A), or the serif plus Caveat-style script pairing; use your own illustrated world and typefaces. ## Classification - Type: editorial - Layout: Full-bleed background illustrations overlaid with scrolling cards, transitioning into a split-layout presentation. - Styles: illustrative, bold, photographic - Confidence: 90% ## Purpose and structure A scroll-driven narrative section moving from 3D architectural renders of corporate campuses with stacking project cards, into a UI mockup presentation. Visual signature: Detailed 3D city buildings serving as a backdrop for stacking white project requirement cards. ## Components - card - image - typography - mockup ## Typography - Display: STK Bureau Serif Book — 96px 400 - Heading: Caveat — 32px 400 - Body: Google Sans Flex — 26px 500 - Mono: PP Supply Mono Regular — 16px 400 ## Functional palette - Text: text #1B2C22 - Canvas: canvas #FFFFFF - Surface: surface #262424 - Accent: accent #0E895A ## Motion evidence - 16.0–24.0s — As the page scrolls downwards over a 3D city background, individual project cards slide upwards from the bottom of the screen and stack on top of each other. (95% confidence) - 24.0–27.0s — While scrolling, a UI mockup appears on the right side of the screen, sliding upwards into position. (90% confidence) ## Section quality Overall: 63.35/100 (Good) Scored coverage: 100% - Typography: 62 — The serif headline with the handwritten Caveat accent ('Scenarios', 'Abilities') creates a clear hierarchy and a distinctive editorial tone, paired with clean mono labels on cards. The combination is polished but the pairing itself (serif display + script accent) is a now-common pattern, not a singular typographic idea. Next tier: Would need more inventive integration of type with the 3D scene itself (e.g., type reacting to or embedded in the environment) rather than sitting as a conventional header block above it. - Composition: 68 — Strong full-bleed 3D city illustration anchoring floating white cards is a confident, well-art-directed composition with good depth and layering; recognizable brand towers (OpenAI, Samsung, Nike, Duolingo) add narrative texture. However the card stacking and right-aligned placement is a fairly standard SaaS narrative-scroll layout, and the transition into the mockup split-layout at the end feels like a separate, less integrated composition bolted on. Next tier: Needs tighter visual/structural fusion between the city metaphor and the UI mockup section, and more compositional risk-taking than cards-floating-on-a-skyline. - Motion: 60 — Gemini supplies two specific timestamped motions: cards sliding up and stacking over the city background, then a mockup sliding into view. This is a clean, purposeful scroll-driven reveal that reinforces narrative progression, but it is a widely-used stacking-card scroll pattern without distinctive timing or physicality described. Next tier: Would need described secondary motion detail (parallax on the city itself, card rotation/easing nuance, staggered reveal of card contents) to read as more than a standard stack-on-scroll effect. - Content: 65 — The cards contain concrete, specific project briefs tied to real companies and tools (Cursor, NextJS, Codex, Jupyter), which gives the content genuine credibility and specificity rather than generic placeholder copy. Next tier: Content specificity is strong but presentation of that content (card internal typographic hierarchy, icon usage) stays conventional; elevating it would require more considered internal card design to match the ambition of the surrounding scene. - Originality: 66 — Using a rendered 3D city as the backdrop for a portfolio/project pitch is a memorable and distinct idea that elevates this above generic SaaS card grids; the building-as-brand-tower device is a clever storytelling touch. Next tier: The idea is original but execution leans on a familiar stacking-card UI pattern laid over the illustration rather than inventing new interaction logic specific to the city concept. - Adaptability: 58 — The structure (illustrated backdrop + overlaid card stack + closing mockup split) is describable and separable: background asset, card component, mockup component are distinct layers with clear roles. Next tier: Heavy dependence on a custom, high-cost 3D city illustration makes the skin difficult to swap without commissioning equivalent bespoke art, limiting how cleanly the pattern could be reused generically. Strengths: - Custom 3D city illustration gives the section a distinctive, non-generic backdrop - Specific, credible project brief copy tied to real brand names and tools - Clear scroll narrative progression from scenario cards to portfolio mockup - Handwritten accent type adds editorial warmth against the architectural render Weaknesses: - Card stacking-on-scroll is a common interaction pattern without unique physicality - Transition into the mockup/portfolio section feels loosely stitched to the city narrative - Heavy reliance on bespoke 3D asset makes the pattern hard to separate from its specific visual skin - Card internal typography/icon treatment is conventional relative to the ambition of the backdrop Why it does not reach the next tier: The section pairs a genuinely distinctive illustrated environment with content, but the interaction mechanics (card stacking, mockup slide-in) and internal card typography remain standard patterns; to reach strong/memorable tier the motion and card design would need matching ambition and tighter fusion between the two halves. ## Adaptation guidance - Effort: High - Guidance: The compositional skeleton (background scene + stacking cards + closing mockup) can be reused with a different backdrop, but replicating the effect requires commissioning comparable bespoke 3D illustration; without it the section loses most of its distinctiveness. What transfers: - Layered narrative structure: full-bleed scene backdrop with overlaid stacking content cards - Card component holding role, task description, and tool icons - Progression from scenario cards into a portfolio/mockup reveal Dependencies: - Custom 3D architectural illustration asset - Brand-specific building/tower artwork - Specific card copy tied to named companies and tools ## 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 scoring relies solely on two Gemini-described timestamps; finer animation easing/timing is unknown - Exact typography-to-background layering interactions cannot be verified without video - No deterministic data on card shadow, radius, or spacing values beyond general token descriptions ## 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: two-column - Layout: Full-bleed background illustrations overlaid with scrolling cards, transitioning into a split-layout presentation. - Styles: illustrative, bold, photographic - Components: card, image, typography, mockup - Purpose: A scroll-driven narrative section moving from 3D architectural renders of corporate campuses with stacking project cards, into a UI mockup presentation. - Visual signature: Detailed 3D city buildings serving as a backdrop for stacking white project requirement cards. - Place on the page: 4 of 9, after Feature collection (`zero-university:career-paths-list`), before Feature collection (`e9e4fb2f-535a-4b0f-8fc0-0ef3a5b2ee01`) ### 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": "96px", "family": "STK Bureau Serif Book", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-1: computed CSS at 1440×1000; AI role: STK Bureau Serif Book, 96px, heavily tracked (-4.8px) used for the largest, most impactful statements.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "96px", "letterSpacing": "-4.8px" }, { "role": "heading", "size": "32px", "family": "Caveat", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-16: computed CSS at 1440×1000; AI role: Caveat, 32px script font used frequently for subheadings, annotations, and accented text.", "sampleId": "font-16", "confidence": 0.9, "lineHeight": "25.6px", "letterSpacing": "-1.3px" }, { "role": "body", "size": "26px", "family": "Google Sans Flex", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-7: computed CSS at 1440×1000; AI role: Google Sans Flex, 26px, used for explanatory text within the floating scenario cards.", "sampleId": "font-7", "confidence": 0.85, "lineHeight": "36.4px", "letterSpacing": "-0.5px" }, { "role": "mono", "size": "16px", "family": "PP Supply Mono Regular", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-8: computed CSS at 1440×1000; AI role: PP Supply Mono Regular, 16px uppercase, used for specific technical labels and job titles within cards.", "sampleId": "font-8", "confidence": 0.95, "lineHeight": "25.6px", "letterSpacing": "-0.3px" } ] } ``` ### 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": "#1B2C22", "name": "text", "role": "text", "source": "computed", "evidence": "color-10: computed rgb(27, 44, 34); AI role: Very dark green/black (#1B2C22) used for the primary serif typography.", "sampleId": "color-10", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) is the computed background for the document and main text sections.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#262424", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-9: computed rgb(38, 36, 36); AI role: Dark gray (#262424) used for floating elements like the persistent bottom bar and buttons.", "sampleId": "color-9", "confidence": 0.85 }, { "hex": "#0E895A", "name": "accent", "role": "accent", "source": "computed", "evidence": "color-5: computed rgb(14, 137, 90); AI role: Green (#0E895A) is used prominently in the footer and for the handwritten accent text.", "sampleId": "color-5", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Buttons appear pill-shaped (fully rounded). Scenario cards have large, smooth border radii.", "density": "Very low density. The design intentionally isolates single messages or components to focus attention during the scroll.", "evidence": "Visual inspection of the crops reveals large margins around text, pill-shaped 'Join Beta' buttons, and full-width imagery.", "borderStyle": "Generally borderless; relies on shadows and layering for separation, except for faint structural lines in the career list.", "buttonStyle": "Pill-shaped, flat, dark background with light text.", "cornerStyle": "Cards and buttons heavily utilize rounded corners.", "contentWidth": "Content is frequently centered, with floating elements breaking a strict grid. Backgrounds are full-bleed.", "spacingRhythm": "Relies on massive vertical spacing to isolate elements during the scroll sequence." } ``` ### 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** — As the page scrolls downwards over a 3D city background, individual project cards slide upwards from the bottom of the screen and stack on top of each other. (16s–24s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — While scrolling, a UI mockup appears on the right side of the screen, sliding upwards into position. (24s–27s; 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: high - What transfers: Layered narrative structure: full-bleed scene backdrop with overlaid stacking content cards; Card component holding role, task description, and tool icons; Progression from scenario cards into a portfolio/mockup reveal - Dependencies: Custom 3D architectural illustration asset; Brand-specific building/tower artwork; Specific card copy tied to named companies and tools - Guidance: The compositional skeleton (background scene + stacking cards + closing mockup) can be reused with a different backdrop, but replicating the effect requires commissioning comparable bespoke 3D illustration; without it the section loses most of its distinctiveness. ### 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 editorial section inspired by the design evidence titled “3D City Project Cards & Portfolio”. Purpose: A scroll-driven narrative section moving from 3D architectural renders of corporate campuses with stacking project cards, into a UI mockup presentation. Structure: two-column. Source layout label: Full-bleed background illustrations overlaid with scrolling cards, transitioning into a split-layout presentation.. 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: Detailed 3D city buildings serving as a backdrop for stacking white project requirement cards. Components: card, image, typography, mockup. Style direction: illustrative, bold, photographic. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"96px","family":"STK Bureau Serif Book","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: STK Bureau Serif Book, 96px, heavily tracked (-4.8px) used for the largest, most impactful statements.","sampleId":"font-1","confidence":0.95,"lineHeight":"96px","letterSpacing":"-4.8px"} {"role":"heading","size":"32px","family":"Caveat","source":"computed","traits":"Regular","weight":"400","evidence":"font-16: computed CSS at 1440×1000; AI role: Caveat, 32px script font used frequently for subheadings, annotations, and accented text.","sampleId":"font-16","confidence":0.9,"lineHeight":"25.6px","letterSpacing":"-1.3px"} {"role":"body","size":"26px","family":"Google Sans Flex","source":"computed","traits":"Regular","weight":"500","evidence":"font-7: computed CSS at 1440×1000; AI role: Google Sans Flex, 26px, used for explanatory text within the floating scenario cards.","sampleId":"font-7","confidence":0.85,"lineHeight":"36.4px","letterSpacing":"-0.5px"} {"role":"mono","size":"16px","family":"PP Supply Mono Regular","source":"computed","traits":"uppercase","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: PP Supply Mono Regular, 16px uppercase, used for specific technical labels and job titles within cards.","sampleId":"font-8","confidence":0.95,"lineHeight":"25.6px","letterSpacing":"-0.3px"} Color evidence: {"hex":"#1B2C22","name":"text","role":"text","source":"computed","evidence":"color-10: computed rgb(27, 44, 34); AI role: Very dark green/black (#1B2C22) used for the primary serif typography.","sampleId":"color-10","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) is the computed background for the document and main text sections.","sampleId":"color-3","confidence":0.9} {"hex":"#262424","name":"surface","role":"surface","source":"computed","evidence":"color-9: computed rgb(38, 36, 36); AI role: Dark gray (#262424) used for floating elements like the persistent bottom bar and buttons.","sampleId":"color-9","confidence":0.85} {"hex":"#0E895A","name":"accent","role":"accent","source":"computed","evidence":"color-5: computed rgb(14, 137, 90); AI role: Green (#0E895A) is used prominently in the footer and for the handwritten accent text.","sampleId":"color-5","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: As the page scrolls downwards over a 3D city background, individual project cards slide upwards from the bottom of the screen and stack on top of each other. (95% confidence) scroll: While scrolling, a UI mockup appears on the right side of the screen, sliding upwards into position. (90% confidence) Transfer these principles: Layered narrative structure: full-bleed scene backdrop with overlaid stacking content cards; Card component holding role, task description, and tool icons; Progression from scenario cards into a portfolio/mockup reveal. Dependencies: Custom 3D architectural illustration asset; Brand-specific building/tower artwork; Specific card copy tied to named companies and tools. Adaptation guidance: The compositional skeleton (background scene + stacking cards + closing mockup) can be reused with a different backdrop, but replicating the effect requires commissioning comparable bespoke 3D illustration; without it the section loses most of its distinctiveness. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.