# Production Credits Footer Schema: Design Details SECTION.md v3.2 Website: Chandebootcamp Source: https://www.chandebootcamp.com/ Source section IDs: 07445d73-8d31-40c1-a7f4-777597de0cf4 Status: AI analysed; vocabulary promotion is automated ## Classification - Type: footer - Layout: Multi-column grid organizing small text credits, large abstract logos, and bottom action links. - Styles: minimal, corporate, retro - Confidence: 95% ## Purpose and structure A dark, highly structured footer containing production credits, partner logos, and final call-to-action buttons. Visual signature: A dark footer with dense columns of tiny credit text, a large abstract geometric logo, and a green pixelated gradient block. ## Components - production credits text - abstract partner logos - pixel gradient art - call to action buttons - social links ## Typography - Display: Phudu — 80px 700 - Heading: Phudu — 80px 700 - Body: Phudu — 14.4px 600 - Mono: Geist Mono — 12px 500 ## Functional palette - Primary-Action: primary action #68F12B - Canvas: canvas #F4F3EB - Text: text #000000 - Surface: surface #0F1513 - Muted-Text: muted text #838B89 ## Motion evidence - 36.0–45.0s — A testimonial quote and some abstract shapes are visible at the bottom. (90% confidence) ## Section quality Overall: 64.47/100 (Good) Scored coverage: 85% - Typography: 65 — Dense uppercase mono/Phudu credit columns with consistent tight letter-spacing create a distinct archival/terminal feel; hierarchy between credit names, CTA labels, and bracketed meta-links is clear and well-controlled, though the credits block itself is a fairly common 'everyone who worked on this' convention. Next tier: Needs a more distinctive typographic treatment beyond uppercase mono lists to separate from generic credit-roll footers. - Composition: 68 — Strong asymmetric grid: large negative space on the left balanced by a bold abstract geometric mark on the right, with a pixel-gradient block anchoring the bottom edge and a tight two-column CTA/meta footer beneath. The layering of dense text, graphic mark, and pixel field gives genuine visual rhythm and restraint despite high information density. Next tier: Relies on a single abstract logo plus one gradient block as the sole compositional counterweights; a next tier would need a more resolved spatial choreography tying the pixel field, logo, and credits into one unified system rather than three separate zones. - Motion: inconclusive — Gemini's motion note only vaguely mentions a testimonial and shapes visible between 36-45s with no specific timestamped change, transition, or parameter tied to this footer crop. Next tier: Specific timestamped visible motion evidence for this section is required before motion can be scored. - Content: 62 — Credits, partner CTAs, social links, and site index are logically grouped and legible at small sizes, serving the footer's informational purpose cleanly; the pixel-gradient canvas element adds a decorative flourish tied to the brand's visual language rather than raw content. Next tier: Content blocks remain conventional footer categories (credits/social/CTA/site index); elevating requires content elements that do more than list information, e.g. interactive or generative credit reveal. - Originality: 66 — The combination of a massive abstract geometric logo mark, a generative pixel-gradient canvas, and terminal-style bracketed labels gives the footer a specific, hard-to-template identity rather than a generic dark footer. Next tier: The underlying structure (credits column + CTA pair + link columns) is still a standard footer skeleton; true next-tier originality would need the layout itself, not just surface motifs, to depart from convention. - Adaptability: 60 — Deterministic facts show clear independent modules (credits text block, logo SVG, canvas pixel field, CTA buttons, link columns) with explicit rect/typography/color tokens, making skin vs structure separable at a basic level. Next tier: No animation parameters or interaction states are captured for the canvas/pixel field, so dependency on that bespoke asset's exact behavior can't be fully isolated from the layout. Strengths: - Clear three-zone composition balancing dense credit text, a large abstract geometric mark, and a pixel-gradient canvas - Consistent uppercase monospace/Phudu typographic system distinguishing meta-links, CTAs, and credits - Well-organized CTA and link grid with distinct color-coded pill buttons against near-black surface Weaknesses: - Footer structure (credits/social/CTA/site index) is a standard convention despite stylish surface treatment - No captured motion evidence specific to this crop, leaving the generative canvas/pixel field's behavior unverified - Reliance on a single abstract logo and one gradient block as the main visual counterweights to large areas of dense text Why it does not reach the next tier: The section achieves a polished, distinctive dark footer with a confident grid and a memorable abstract mark, but its underlying skeleton is a conventional credits/CTA/link footer, and no verified motion or deeper spatial integration between the graphic elements pushes it into genuinely rare territory. ## Adaptation guidance - Effort: Medium - Guidance: Recreate the layout skeleton (text block, mark, CTA row, link columns) freely, but swap in a brand-appropriate display font, a replacement abstract mark, and a simplified gradient/texture block if the generative canvas asset isn't available; preserve the bracketed-link and pill-button conventions as they're easily reskinned. What transfers: - Three-zone layout: dense text column, oversized abstract mark, gradient/texture canvas block - Pill-shaped CTA buttons paired side-by-side with icon-ampersand motif - Bracketed meta-link labeling convention for secondary navigation Dependencies: - Custom Phudu display font and Geist Mono for the distinct uppercase stacked look - Brand-specific abstract geometric logo SVG and generative pixel-gradient canvas asset - Near-black (#0F1513) surface and vibrant green (#68F12B) accent pairing for contrast ## 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 score withheld due to lack of specific timestamped evidence tied to this crop - No animation parameters supplied for the canvas pixel-gradient element, limiting confidence in its dynamic behavior - Single static crop may not capture full interaction states of CTA buttons or link hover effects ## 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: footer - Source type: footer - Structure: grid - Layout: Multi-column grid organizing small text credits, large abstract logos, and bottom action links. - Styles: minimal, corporate, retro - Components: production credits text, abstract partner logos, pixel gradient art, call to action buttons, social links - Purpose: A dark, highly structured footer containing production credits, partner logos, and final call-to-action buttons. - Visual signature: A dark footer with dense columns of tiny credit text, a large abstract geometric logo, and a green pixelated gradient block. ### Crop and composition - Crop: 1440×1033px; aspect ratio 1.394:1 - Page bounds: 13688–14721px of 14721px - 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": "80px", "family": "Phudu", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-2: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700. Used for major structural headings and high-impact visual text.", "sampleId": "font-2", "confidence": 0.95, "lineHeight": "57.6px", "letterSpacing": "-3.2px" }, { "role": "heading", "size": "80px", "family": "Phudu", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-7: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700 (similar to font-2 but slightly different usage context). Used for scroll-triggered changing text.", "sampleId": "font-7", "confidence": 0.9, "lineHeight": "64px", "letterSpacing": "-3.2px" }, { "role": "body", "size": "14.4px", "family": "Phudu", "source": "computed", "traits": "uppercase", "weight": "600", "evidence": "font-6: computed CSS at 1440×1000; AI role: Phudu, 14.4px, weight 600. Used for lists of names and smaller supplementary text.", "sampleId": "font-6", "confidence": 0.85, "lineHeight": "12.9px", "letterSpacing": "-0.3px" }, { "role": "mono", "size": "12px", "family": "Geist Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: Geist Mono, 12px, weight 500. Used for meta-information, links, and small captions.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "11.5px", "letterSpacing": "-0.2px" } ] } ``` ### 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": "#68F12B", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-12: computed rgb(104, 241, 43); AI role: #68F12B (vibrant green). Key brand and accent color, used in pixel blocks, buttons, and text highlights.", "sampleId": "color-12", "confidence": 0.95 }, { "hex": "#F4F3EB", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site.", "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. Primary text color on light backgrounds.", "sampleId": "color-1", "confidence": 0.9 }, { "hex": "#0F1513", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-8: computed rgb(15, 21, 19); AI role: #0F1513 (dark charcoal/near black). Used for contrasting background sections, particularly in the timeline and footer.", "sampleId": "color-8", "confidence": 0.85 }, { "hex": "#838B89", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds.", "sampleId": "color-24", "confidence": 0.85 } ] } ``` ### Design tokens ```json { "radius": "Primarily 0px for layout elements, 999px for pill buttons.", "density": "Varies significantly. Starts dense with pixel grids, opens up to sparse typography, and becomes very dense in the collage/timeline sections.", "evidence": "Visual inspection of layout structure, CSS values for borders/radius on interactive elements, and overall composition.", "borderStyle": "Mostly borderless, relying on stark color contrasts or pixel patterns to define edges. Some usage of bracketed text for links.", "buttonStyle": "Pill-shaped, solid fill (vibrant green or dark green), uppercase monospace or sans-serif text, flat appearance.", "cornerStyle": "Mix of sharp, brutalist corners (for images and grid blocks) and fully rounded pill shapes for buttons/badges.", "contentWidth": "Fluid, edge-to-edge layouts relying heavily on scroll position rather than a fixed container width.", "spacingRhythm": "Highly variable and dramatic. Uses full-viewport height sections combined with tight clusters in collage areas." } ``` ### 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": 1440, "captureBounds": { "top": 13688, "bottom": 14721, "pageHeight": 14721 } }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": { "radii": [], "borders": [], "shadows": [] } } ``` #### 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 { "root": null, "cards": [], "media": [], "bounds": { "top": 13688, "bottom": 14721, "pageHeight": 14721 }, "schema": "little-details-section-measurements-v1", "source": "saved DOM/CSS element and animation maps", "columns": [], "spacing": { "gapsPx": [], "representativeContentWidthsPx": [] }, "coverage": { "cards": 0, "media": 0, "animations": 0, "elementsInSection": 0 }, "surfaces": { "radii": [], "borders": [], "shadows": [] }, "animations": [], "capturedAt": "2026-10-21T18:08:16.518Z", "limitations": [ "Values describe the captured desktop viewport and may change at other breakpoints.", "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.", "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent." ], "viewportWidth": 1440 } ``` ### Observed motion 1. **observed sequence** — A testimonial quote and some abstract shapes are visible at the bottom. (36s–45s; 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: 1440px 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: Three-zone layout: dense text column, oversized abstract mark, gradient/texture canvas block; Pill-shaped CTA buttons paired side-by-side with icon-ampersand motif; Bracketed meta-link labeling convention for secondary navigation - Dependencies: Custom Phudu display font and Geist Mono for the distinct uppercase stacked look; Brand-specific abstract geometric logo SVG and generative pixel-gradient canvas asset; Near-black (#0F1513) surface and vibrant green (#68F12B) accent pairing for contrast - Guidance: Recreate the layout skeleton (text block, mark, CTA row, link columns) freely, but swap in a brand-appropriate display font, a replacement abstract mark, and a simplified gradient/texture block if the generative canvas asset isn't available; preserve the bracketed-link and pill-button conventions as they're easily reskinned. ### Evidence readiness - Coverage: 6/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples. ### Agent implementation prompt Create an original footer section inspired by the design evidence titled “Production Credits Footer”. Purpose: A dark, highly structured footer containing production credits, partner logos, and final call-to-action buttons. Structure: grid. Source layout label: Multi-column grid organizing small text credits, large abstract logos, and bottom action links.. 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 dark footer with dense columns of tiny credit text, a large abstract geometric logo, and a green pixelated gradient block. Components: production credits text, abstract partner logos, pixel gradient art, call to action buttons, social links. Style direction: minimal, corporate, retro. Observed crop: 1440×1033px (1.394:1). Treat this as evidence of composition, not a mandatory output size. Typography evidence: {"role":"display","size":"80px","family":"Phudu","source":"computed","traits":"uppercase","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700. Used for major structural headings and high-impact visual text.","sampleId":"font-2","confidence":0.95,"lineHeight":"57.6px","letterSpacing":"-3.2px"} {"role":"heading","size":"80px","family":"Phudu","source":"computed","traits":"uppercase","weight":"700","evidence":"font-7: computed CSS at 1440×1000; AI role: Phudu, 80px, weight 700 (similar to font-2 but slightly different usage context). Used for scroll-triggered changing text.","sampleId":"font-7","confidence":0.9,"lineHeight":"64px","letterSpacing":"-3.2px"} {"role":"body","size":"14.4px","family":"Phudu","source":"computed","traits":"uppercase","weight":"600","evidence":"font-6: computed CSS at 1440×1000; AI role: Phudu, 14.4px, weight 600. Used for lists of names and smaller supplementary text.","sampleId":"font-6","confidence":0.85,"lineHeight":"12.9px","letterSpacing":"-0.3px"} {"role":"mono","size":"12px","family":"Geist Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Geist Mono, 12px, weight 500. Used for meta-information, links, and small captions.","sampleId":"font-3","confidence":0.9,"lineHeight":"11.5px","letterSpacing":"-0.2px"} Color evidence: {"hex":"#68F12B","name":"primary action","role":"primary-action","source":"computed","evidence":"color-12: computed rgb(104, 241, 43); AI role: #68F12B (vibrant green). Key brand and accent color, used in pixel blocks, buttons, and text highlights.","sampleId":"color-12","confidence":0.95} {"hex":"#F4F3EB","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site.","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. Primary text color on light backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#0F1513","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(15, 21, 19); AI role: #0F1513 (dark charcoal/near black). Used for contrasting background sections, particularly in the timeline and footer.","sampleId":"color-8","confidence":0.85} {"hex":"#838B89","name":"muted text","role":"muted-text","source":"computed","evidence":"color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds.","sampleId":"color-24","confidence":0.85} No section-bounded typography samples were measured. No section-bounded color samples were measured. Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":[],"borders":[],"shadows":[]} Motion evidence: observed sequence: A testimonial quote and some abstract shapes are visible at the bottom. (90% confidence) Transfer these principles: Three-zone layout: dense text column, oversized abstract mark, gradient/texture canvas block; Pill-shaped CTA buttons paired side-by-side with icon-ampersand motif; Bracketed meta-link labeling convention for secondary navigation. Dependencies: Custom Phudu display font and Geist Mono for the distinct uppercase stacked look; Brand-specific abstract geometric logo SVG and generative pixel-gradient canvas asset; Near-black (#0F1513) surface and vibrant green (#68F12B) accent pairing for contrast. Adaptation guidance: Recreate the layout skeleton (text block, mark, CTA row, link columns) freely, but swap in a brand-appropriate display font, a replacement abstract mark, and a simplified gradient/texture block if the generative canvas asset isn't available; preserve the bracketed-link and pill-button conventions as they're easily reskinned. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.