# 12 Events Highlights

Schema: Design Details SECTION.md v3.2
Website: Chandebootcamp
Source: https://www.chandebootcamp.com/
Source section IDs: d83927d0-5452-486f-bafd-40398ae49b67
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: editorial
- Layout: Horizontal split with image blocks and a distinct graphic title banner.
- Styles: retro, playful, geometric
- Confidence: 90%

## Purpose and structure

A graphic section introducing '12 Events at Bootcamp' with horizontal color bands and pixel grid art.

Visual signature: A banner with '12 EVENTS AT BOOTCAMP' surrounded by green pixel blocks and horizontal color stripes.

## Components

- pixel art banner
- horizontal color stripes
- circular bullet points
- image blocks

## 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

- No section-specific authored motion was established.

## Section quality

Overall: 61.12/100 (Good)
Scored coverage: 85%

- Typography: 62 — Bold Phudu uppercase display type with tight negative letter-spacing gives strong graphic presence, and the numeral-in-parentheses treatment adds a small distinctive detail, but only one size/weight is visible in this crop so hierarchy range is limited. Next tier: No secondary type pairing or scale contrast visible to demonstrate a fuller typographic system within this crop.
- Composition: 68 — Confident grid-based split of color-stripe column, dual photo column, and pixel-art/text block creates a clear, deliberate three-zone rhythm with strong figure-ground contrast between neon green, black, and photographic tone. Next tier: The arrangement, while tidy, is a fairly standard column-stacking pattern without an unexpected structural twist that would push it into strong/memorable territory.
- Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 60 — Photography of pottery-making is integrated into the grid cleanly and ties thematically to the bootcamp content, but the pixel-art pattern reads as decorative filler rather than content-derived. Next tier: Imagery and graphic pattern feel loosely connected; no evidence the pixel pattern encodes real content (e.g., schedule, event count) rather than being generic texture.
- Originality: 58 — The chunky pixel-block gradient and circular bullet dots add a retro-game texture that feels somewhat distinctive, but the overall formula—color stripes, photo collage, bold numeral headline—is a familiar editorial-section pattern. Next tier: Needs a more singular, hard-to-substitute visual conceit beyond pixel-texture and stripes to be memorable rather than merely decorative.
- Adaptability: 55 — The column-grid structure, color-stripe module, and pixel-pattern block are separable concepts that could be reskinned, but the circular dot motif and pixel grid are tightly coupled to this specific visual skin. Next tier: Pixel art and stripe patterns are bespoke graphic assets that would need redesign rather than simple token swaps to adapt cleanly.

Strengths:
- Clear three-column compositional split with strong contrast between color, photo, and graphic zones
- Bold condensed display type with tight tracking gives a confident headline presence
- Cohesive green/black/off-white palette reinforced across stripes, pixel blocks, and dots

Weaknesses:
- Pixel-art pattern functions as decoration without clear tie to actual event content
- Limited typographic range visible—only one display treatment shown
- Circular dot and stripe elements, while tidy, follow a conventional editorial-grid formula
- No motion evidence supplied to assess any scroll or reveal behavior

Why it does not reach the next tier: The section is well-organized and visually confident but relies on standard column-grid conventions and decorative pixel texture rather than a distinctive structural or conceptual idea, keeping it in the good/polished range rather than strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Preserve the column-split structure and headline treatment; the pixel-art texture and specific photography would need to be swapped for new brand-appropriate imagery and a comparable generated or custom graphic pattern.

What transfers:
- Three-column grid split with distinct color/photo/graphic zones
- Bold display headline with parenthetical numeral treatment
- Circular dot/stripe accent pattern as a section divider motif

Dependencies:
- Custom pixel-art gradient graphic asset
- Specific photography of pottery/craft content
- Phudu display font for headline impact

## 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 provided, so any scroll/reveal animation could not be evaluated
- Single crop limits assessment of full typographic hierarchy across the section
- Cannot verify whether pixel pattern is content-driven or purely decorative without additional context

## 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: Horizontal split with image blocks and a distinct graphic title banner.
- Styles: retro, playful, geometric
- Components: pixel art banner, horizontal color stripes, circular bullet points, image blocks
- Purpose: A graphic section introducing '12 Events at Bootcamp' with horizontal color bands and pixel grid art.
- Visual signature: A banner with '12 EVENTS AT BOOTCAMP' surrounded by green pixel blocks and horizontal color stripes.

### Crop and composition

- Crop: 1440×585px; aspect ratio 2.462:1
- Page bounds: 6955–7540px of 14721px
- 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": [
    {
      "role": "section heading",
      "family": "Phudu",
      "stack": "Phudu, ui-sans-serif, system-ui, sans-serif",
      "size": "80px",
      "weight": "700",
      "lineHeight": "64px",
      "letterSpacing": "-3.2px",
      "sample": "Amid",
      "element": "span",
      "occurrences": 47,
      "sourceId": "font-7"
    }
  ],
  "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": [
    {
      "value": "#F4F3EB",
      "cssValue": "rgb(244, 243, 235)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 3,
      "sourceId": "color-3"
    },
    {
      "value": "#E0E0D8",
      "cssValue": "rgb(224, 224, 216)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 8,
      "sourceId": "color-9"
    }
  ],
  "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.
- Representative content widths: 330px.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 6955,
      "bottom": 7540,
      "pageHeight": 14721
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      330
    ]
  },
  "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": 6955,
    "bottom": 7540,
    "pageHeight": 14721
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      330
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 0,
    "animations": 0,
    "elementsInSection": 13
  },
  "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

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: 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-column grid split with distinct color/photo/graphic zones; Bold display headline with parenthetical numeral treatment; Circular dot/stripe accent pattern as a section divider motif
- Dependencies: Custom pixel-art gradient graphic asset; Specific photography of pottery/craft content; Phudu display font for headline impact
- Guidance: Preserve the column-split structure and headline treatment; the pixel-art texture and specific photography would need to be swapped for new brand-appropriate imagery and a comparable generated or custom graphic pattern.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original editorial section inspired by the design evidence titled “12 Events Highlights”.

Purpose: A graphic section introducing '12 Events at Bootcamp' with horizontal color bands and pixel grid art.

Structure: two-column. Source layout label: Horizontal split with image blocks and a distinct graphic title banner.. 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: A banner with '12 EVENTS AT BOOTCAMP' surrounded by green pixel blocks and horizontal color stripes.

Components: pixel art banner, horizontal color stripes, circular bullet points, image blocks.

Style direction: retro, playful, geometric.

Observed crop: 1440×585px (2.462: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}

Typography measured inside this section: {"id":"font-7","size":"80px","count":47,"family":"Phudu","traits":"uppercase","weight":"700","contexts":[{"tag":"span","top":7425,"text":"Amid","property":"font"},{"tag":"span","top":7425,"text":"the","property":"font"},{"tag":"span","top":7425,"text":"relentless","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"64px","letterSpacing":"-3.2px"}

Colors measured inside this section: {"id":"color-3","hex":"#F4F3EB","alpha":1,"count":3,"contexts":[{"tag":"body","top":0,"text":"PAGE Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized","property":"background"},{"tag":"span","top":974,"text":"Scroll more","property":"text"},{"tag":"section","top":7421,"text":"Amid the relentless (rise of AI). we long for a space rooted in nature, a place of deep (stillness).","property":"background"}],"cssValue":"rgb(244, 243, 235)"} {"id":"color-9","hex":"#E0E0D8","alpha":1,"count":8,"contexts":[{"tag":"i","top":7439,"text":"","property":"background"}],"cssValue":"rgb(224, 224, 216)"}

Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[330]}; surfaces {"radii":[],"borders":[],"shadows":[]}

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Three-column grid split with distinct color/photo/graphic zones; Bold display headline with parenthetical numeral treatment; Circular dot/stripe accent pattern as a section divider motif.

Dependencies: Custom pixel-art gradient graphic asset; Specific photography of pottery/craft content; Phudu display font for headline impact.

Adaptation guidance: Preserve the column-split structure and headline treatment; the pixel-art texture and specific photography would need to be swapped for new brand-appropriate imagery and a comparable generated or custom graphic pattern.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.