# Day 2 & 3 Schedule Schema: Design Details SECTION.md v3.2 Website: Chandebootcamp Source: https://www.chandebootcamp.com/ Source section IDs: gap-b8eec8f6-9845-11426 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each day repeats one clear pattern of date label, headline and photo collage, so the schedule is easy to scan and easy to extend. - The background flips from cream to near-black at each date change, which marks the transition without needing extra labels. - Bold condensed uppercase display type contrasts with small mono-style meta numbers, and the four-quadrant collage pairs night and daytime photos to show the mood shift. What a screenshot can't show: - The recording shows only text and images visible while scrolling, with no specific transform, easing or timing, so there is no motion detail to copy. - No font sizes, letter spacing, line heights or section spacing were measured. Borrow: Use a strong background-value flip plus a repeatable date-headline-collage block to separate chapters of a sequence clearly. Leave alone: Don't copy the pixel-art dividers, the dot row, the neon green accent with cream and near-black palette, or the Phudu typeface; use a similar free condensed display sans instead. ## Classification - Type: process - Layout: Stacked schedule blocks alternating typography and photo collages. - Styles: editorial, bold, photographic - Confidence: 90% ## Purpose and structure Continuation of the schedule for '03 OCT' and '04 OCT' with activity details and photo collages. Visual signature: Schedules for 03 and 04 OCT featuring a split photo collage of a night gathering and daytime walk. ## Components - date typography - schedule details - photo grid - pixel art dividers - circular graphic row ## 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 - 26.0–35.0s — Texts like '02 OCT' and '03 OCT' are visible, along with related images and descriptions. (95% confidence) ## Section quality Overall: 64.71/100 (Good) Scored coverage: 85% - Typography: 66 — Bold condensed uppercase display type (Phudu) establishes a confident editorial voice, with strong scale contrast between date labels, headline copy, and mono-style meta numbers (D-2 8-23). Consistent centered stacking gives rhythm, but letterforms and treatment don't go beyond a strong display-font choice applied uniformly. Next tier: No variation in type behavior (weight, size modulation, kerning tricks) beyond swapping background color; a tier above would need typographic invention tied to content meaning. - Composition: 68 — Layout alternates full-bleed typographic blocks with a four-quadrant photo collage, break in background value (cream to near-black) marks date transitions clearly, and the pixel-pattern divider and dot row give textured punctuation at the bottom. Asymmetric left/right date labels anchor the grid well, and the collage's split-image conceit (night scene paired with daylight images) is a deliberate compositional idea. Next tier: The grid itself is a fairly standard quadrant collage; no unexpected proportion, overlap, or scale shift elevates it past a well-executed but conventional stacked-block structure. - Motion: inconclusive — Gemini's motion note only confirms that text and images are visible in a scroll window, with no specific described transform, easing, or sequencing detail. Next tier: Need timestamped specifics of how the collage pieces, pixel bar, or dot row animate (reveal order, direction, speed) to assess motion quality. - Content: 65 — Photos of the night gathering and daytime walk are tightly integrated into a grid that itself communicates a mood shift between events, and the pixel/dot graphics double as both decoration and progress markers tied to schedule content. Next tier: Imagery is observational documentation rather than art-directed photography; integration is competent collage-making rather than content shaping the structure in a surprising way. - Originality: 63 — The split quadrant collage married to a pixelated pattern bar and a dot-row footer gives a distinct graphic identity beyond generic schedule copy, and the color flip between cream and near-black per day segment is a memorable device. Next tier: Pixel-grid dividers and dot rows are a recognizable genre of event-site decoration; nothing here reinvents the schedule-block format itself. - Adaptability: 60 — The structure (date label + headline + collage + next date label) is a clear repeatable pattern that could be reskinned with different photography and copy relatively directly. Next tier: Dependence on the specific pixel-grid asset, dot-row footer, and brand green accent ties the look tightly to this brand's visual system, limiting plug-and-play reuse. Strengths: - Bold oversized condensed type creates strong hierarchy between dates, headlines, and meta labels - Background value flip (cream/black) effectively signals a day transition without extra copy - Quadrant photo collage juxtaposing night and day imagery is a clear, legible compositional idea - Pixel-pattern divider and dot-row footer add a distinct decorative identity tied to the brand Weaknesses: - Photo collage is a standard four-quadrant grid without unusual scale or overlap - No confirmed motion detail beyond generic scroll visibility - Imagery is documentary rather than art-directed, limiting content-driven impact - Reliance on proprietary pixel/dot graphics ties the look closely to this specific brand system Why it does not reach the next tier: The section is well-crafted and cohesive but relies on a conventional stacked schedule + quadrant collage format; nothing here surprises structurally or typographically enough to be memorable beyond a polished execution of a known pattern, and motion evidence is too thin to credit any animation sophistication. ## Adaptation guidance - Effort: Medium - Guidance: Reusable as a schedule/timeline block pattern: keep the date-label-to-headline-to-collage sequencing and background value shift, but replace the pixel/dot graphic assets and accent color with a new brand's own decorative system to avoid visual lock-in. What transfers: - Alternating date-label + headline + collage block structure - Background value shift to mark temporal transitions - Quadrant photo collage framing for pairing contrasting moments Dependencies: - Custom pixel-grid divider graphic - Brand-specific dot-row footer pattern - Phudu display typeface and vibrant green accent color ## 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 deterministic motion data (easing, duration, sequencing) was supplied, so animation quality could not be scored - Photo collage positions were observed from a static crop; interactive carousel behavior inferred from arrow icons is unconfirmed ## 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: steps - Source type: process - Structure: Stacked schedule blocks alternating typography and photo collages. - Layout: Stacked schedule blocks alternating typography and photo collages. - Styles: editorial, bold, photographic - Components: date typography, schedule details, photo grid, pixel art dividers, circular graphic row - Purpose: Continuation of the schedule for '03 OCT' and '04 OCT' with activity details and photo collages. - Visual signature: Schedules for 03 and 04 OCT featuring a split photo collage of a night gathering and daytime walk. - Place on the page: 8 of 12, after Process (`6dda3ea6-46c0-45dc-b03e-3ee424b523e7`), before Gallery (`chandebootcamp-com:C06`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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": 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. **observed sequence** — Texts like '02 OCT' and '03 OCT' are visible, along with related images and descriptions. (26s–35s; 95% 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 date-label + headline + collage block structure; Background value shift to mark temporal transitions; Quadrant photo collage framing for pairing contrasting moments - Dependencies: Custom pixel-grid divider graphic; Brand-specific dot-row footer pattern; Phudu display typeface and vibrant green accent color - Guidance: Reusable as a schedule/timeline block pattern: keep the date-label-to-headline-to-collage sequencing and background value shift, but replace the pixel/dot graphic assets and accent color with a new brand's own decorative system to avoid visual lock-in. ### 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 steps section inspired by the design evidence titled “Day 2 & 3 Schedule”. Purpose: Continuation of the schedule for '03 OCT' and '04 OCT' with activity details and photo collages. Structure: Stacked schedule blocks alternating typography and photo collages.. Source layout label: Stacked schedule blocks alternating typography and photo collages.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Schedules for 03 and 04 OCT featuring a split photo collage of a night gathering and daytime walk. Components: date typography, schedule details, photo grid, pixel art dividers, circular graphic row. Style direction: editorial, bold, photographic. No deterministic crop dimensions were attached. 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. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: observed sequence: Texts like '02 OCT' and '03 OCT' are visible, along with related images and descriptions. (95% confidence) Transfer these principles: Alternating date-label + headline + collage block structure; Background value shift to mark temporal transitions; Quadrant photo collage framing for pairing contrasting moments. Dependencies: Custom pixel-grid divider graphic; Brand-specific dot-row footer pattern; Phudu display typeface and vibrant green accent color. Adaptation guidance: Reusable as a schedule/timeline block pattern: keep the date-label-to-headline-to-collage sequencing and background value shift, but replace the pixel/dot graphic assets and accent color with a new brand's own decorative system to avoid visual lock-in. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.