# Chandebootcamp — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.chandebootcamp.com/
Captured: 2026-10-21
CSS measured: 2026-10-21T18:08:12.051Z at 1440×1000 — https://www.chandebootcamp.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

A highly stylized, experimental website blending a brutalist and digital/pixel art aesthetic. It uses a stark color palette centered around vibrant green (#68F12B), off-white, and dark charcoal/black, supported by bold, varied typography (Phudu for display and Geist Mono for utility). The layout relies heavily on continuous scroll animations, revealing content through dramatic visual transitions, dynamic grids, and playful, interactive elements like a custom butterfly cursor and fanning 'poster stack' effects.

## Classification

- Industry: creative
- Site type: Landing
- Business model: Agency
- Styles: brutalist, retro, typographic, editorial, digital-pixel-art, scrapbook-collage
- Platform: Custom code
- Technology: GSAP, Three.js

## Typography

- Display: Phudu — weight 700; size 80px; line-height 57.6px; tracking -3.2px; uppercase (95% role confidence, computed values)
- Heading: Phudu — weight 700; size 80px; line-height 64px; tracking -3.2px; uppercase (90% role confidence, computed values)
- Body: Phudu — weight 600; size 14.4px; line-height 12.9px; tracking -0.3px; uppercase (85% role confidence, computed values)
- Mono: Geist Mono — weight 500; size 12px; line-height 11.5px; tracking -0.2px; uppercase (90% role confidence, computed values)

## Functional palette

- Primary Action — primary action #68F12B: 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. (95% role confidence, computed values)
- Canvas — canvas #F4F3EB: color-3: computed rgb(244, 243, 235); AI role: #F4F3EB (off-white). Primary background color for large sections of the site. (90% role confidence, computed values)
- Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: #000000. Primary text color on light backgrounds. (90% role confidence, computed values)
- Surface — surface #0F1513: 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. (85% role confidence, computed values)
- Muted Text — muted text #838B89: color-24: computed rgb(131, 139, 137); AI role: #838B89. Used for less prominent text elements or list items on dark backgrounds. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "36px",
    "lineHeight": "28.1px",
    "letterSpacing": "-0.7px",
    "traits": "uppercase",
    "count": 14,
    "contexts": [
      {
        "tag": "h3",
        "text": "06 years",
        "top": 1894,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Chande.",
        "top": 2364,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Art director",
        "top": 8576,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "80px",
    "lineHeight": "57.6px",
    "letterSpacing": "-3.2px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "ChandeBootcampBy. Mingg",
        "top": 560,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "(©26)",
        "top": 730,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "12px",
    "lineHeight": "11.5px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "[ UIUX design community ]",
        "top": 2142,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The design community was founded by Khac Mingg Nguyen - a UI/UX designer living in Vietnam. We maint",
        "top": 2178,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "[ Mingg Patreon ]",
        "top": 2290,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "10.5px",
    "lineHeight": "10.1px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "figcaption",
        "text": "Video recap",
        "top": 963,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "[ Social ]",
        "top": 21039,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "[ Site index ]",
        "top": 21039,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "13.8px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "2-4 OctoberKe Retreat - Hanoi, VN",
        "top": 762,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A community connecting eventfor Vietnamese designers.In the most peaceful way.",
        "top": 802,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "2-4 OctoberKe Retreat - Hanoi, VN",
        "top": 762,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "14.4px",
    "lineHeight": "12.9px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 62,
    "contexts": [
      {
        "tag": "span",
        "text": "Kenny Ho / minhsharing / HuyML / Ha Nguyen / Tam Do",
        "top": 20345,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Kenny Ho",
        "top": 20340,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "minhsharing",
        "top": 20340,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "80px",
    "lineHeight": "64px",
    "letterSpacing": "-3.2px",
    "traits": "uppercase",
    "count": 47,
    "contexts": [
      {
        "tag": "span",
        "text": "Amid",
        "top": 7425,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "the",
        "top": 7425,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "relentless",
        "top": 7425,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "79.5px",
    "lineHeight": "62px",
    "letterSpacing": "-3.2px",
    "traits": "uppercase",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": "An event for",
        "top": 1394,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "all designers",
        "top": 1448,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "to connect.",
        "top": 1510,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "15px",
    "lineHeight": "13.5px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 16,
    "contexts": [
      {
        "tag": "em",
        "text": "Become a partner",
        "top": 20973,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "Register for the next event",
        "top": 20973,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CHANDE",
        "top": 17,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "10.5px",
    "lineHeight": "10.3px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "25",
        "top": 326,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hoangz",
        "top": 326,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "26",
        "top": 576,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "11.8px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Scroll more",
        "top": 974,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "We don't say who will",
        "top": 8128,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "be replaced (by AI).",
        "top": 8139,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "10.5px",
    "lineHeight": "10.1px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore Gallery",
        "top": 9074,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "About us",
        "top": 9074,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Agenda",
        "top": 15397,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Phudu",
    "fontStack": "Phudu, ui-sans-serif, system-ui, sans-serif",
    "weight": "700",
    "size": "60px",
    "lineHeight": "46.8px",
    "letterSpacing": "-1.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "“Chande's free spirit shows in the unguarded moments: the games, the half-formed ideas, laughing at ",
        "top": 19006,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Google Sans Flex",
    "fontStack": "\"Google Sans Flex\", Phudu, sans-serif",
    "weight": "700",
    "size": "51.6px",
    "lineHeight": "37.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "©",
        "top": 714,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "10.5px",
    "lineHeight": "10.3px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "[ Mingg Patreon ]",
        "top": 21037,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "[ Back to top ][ → ]",
        "top": 21037,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "[ 3D: Hummingbird — gelmi.com.br ]",
        "top": 21111,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 82,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1588,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 1535,
        "property": "svg-fill"
      },
      {
        "tag": "i",
        "text": "",
        "top": 4124,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFEF8",
    "alpha": 1,
    "cssValue": "rgb(255, 254, 248)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "(12) Events",
        "top": 9590,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "[ {\"num\":\"01\",\"name\":\"Poster 1\",\"img\":\"assets/img/cms/index/poster-stack-1-en.webp\",\"x\":-0.25,\"y\":-0",
        "top": 9739,
        "property": "background"
      },
      {
        "tag": "canvas",
        "text": "",
        "top": 9739,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F4F3EB",
    "alpha": 1,
    "cssValue": "rgb(244, 243, 235)",
    "count": 3,
    "contexts": [
      {
        "tag": "body",
        "text": "PAGE Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Scroll more",
        "top": 974,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Amid the relentless (rise of AI). we long for a space rooted in nature, a place of deep (stillness).",
        "top": 7421,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#C3C4BD",
    "alpha": 1,
    "cssValue": "rgb(195, 196, 189)",
    "count": 4,
    "contexts": [
      {
        "tag": "section",
        "text": "Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized byMi",
        "top": 60,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1581,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#0E1313",
    "alpha": 0.21176470588235294,
    "cssValue": "rgba(15, 21, 19, 0.21)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized byMi",
        "top": 60,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#4A3520",
    "alpha": 1,
    "cssValue": "rgb(74, 53, 32)",
    "count": 1,
    "contexts": [
      {
        "tag": "img",
        "text": "",
        "top": 4073,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#101810",
    "alpha": 0.12549019607843137,
    "cssValue": "rgba(15, 21, 19, 0.125)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "04Oct02Oct D-38-12D-112-20 Agenda Bootcamp Day 0112h-22h Kick-offSettle inGet to know each otherWork",
        "top": 15379,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#0F1513",
    "alpha": 1,
    "cssValue": "rgb(15, 21, 19)",
    "count": 43,
    "contexts": [
      {
        "tag": "figcaption",
        "text": "Video recap",
        "top": 963,
        "property": "text"
      },
      {
        "tag": "g",
        "text": "",
        "top": 1608,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1608,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E0E0D8",
    "alpha": 1,
    "cssValue": "rgb(224, 224, 216)",
    "count": 8,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 7439,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#182220",
    "alpha": 1,
    "cssValue": "rgb(24, 34, 32)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 560,
        "property": "background"
      },
      {
        "tag": "figcaption",
        "text": "25Hoangz",
        "top": 310,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1654,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#2E3B3A",
    "alpha": 1,
    "cssValue": "rgb(46, 59, 58)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "04",
        "top": 15560,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#68F12B",
    "alpha": 1,
    "cssValue": "rgb(104, 241, 43)",
    "count": 44,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 1104,
        "property": "background"
      },
      {
        "tag": "figcaption",
        "text": "27Yen",
        "top": 810,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1581,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#343332",
    "alpha": 1,
    "cssValue": "rgb(52, 51, 50)",
    "count": 9,
    "contexts": [
      {
        "tag": "h1",
        "text": "ChandeBootcampBy. Mingg",
        "top": 560,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "(©26)",
        "top": 730,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "©",
        "top": 714,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#112020",
    "alpha": 1,
    "cssValue": "rgb(17, 32, 32)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "(12) Eventsat bootcamp",
        "top": 9559,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#40CE00",
    "alpha": 1,
    "cssValue": "rgb(64, 206, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 17749,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#171717",
    "alpha": 1,
    "cssValue": "rgb(23, 23, 23)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1654,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#192121",
    "alpha": 1,
    "cssValue": "rgb(25, 33, 33)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 21015,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#131313",
    "alpha": 1,
    "cssValue": "rgb(19, 19, 19)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 560,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 60,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "[ Leno & Annie ]",
        "top": 19739,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Co-founder Lumen Studio",
        "top": 19766,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#F5F0E3",
    "alpha": 1,
    "cssValue": "rgb(245, 240, 227)",
    "count": 38,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 1104,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 4124,
        "property": "::after-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3764,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#161D1D",
    "alpha": 1,
    "cssValue": "rgb(22, 29, 29)",
    "count": 1,
    "contexts": [
      {
        "tag": "article",
        "text": "06 years [ UIUX design community ] The design community was founded by Khac Mingg Nguyen - a UI/UX d",
        "top": 1864,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#192423",
    "alpha": 1,
    "cssValue": "rgb(25, 36, 35)",
    "count": 1,
    "contexts": [
      {
        "tag": "article",
        "text": "Chande. [ Chande by Mingg Patreon ] Chande is our community's annual event, where each year brings d",
        "top": 2334,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#1B2524",
    "alpha": 1,
    "cssValue": "rgb(27, 37, 36)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1102,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#838B89",
    "alpha": 1,
    "cssValue": "rgb(131, 139, 137)",
    "count": 62,
    "contexts": [
      {
        "tag": "span",
        "text": "Kenny Ho / minhsharing / HuyML / Ha Nguyen / Tam Do",
        "top": 20345,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#0E1813",
    "alpha": 1,
    "cssValue": "rgb(14, 24, 19)",
    "count": 19,
    "contexts": [
      {
        "tag": "p",
        "text": "2-4 OctoberKe Retreat - Hanoi, VN",
        "top": 762,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "We don't say who will",
        "top": 8128,
        "property": "text"
      },
      {
        "tag": "li",
        "text": "Art director",
        "top": 8576,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(255, 255, 255, 0.3)",
    "count": 26,
    "contexts": [
      {
        "tag": "p",
        "text": "[ UIUX design community ]",
        "top": 2142,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "[ Mingg Patreon ]",
        "top": 2290,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "[ Leno & Annie ]Co-founder Lumen Studio",
        "top": 19742,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#236C3C",
    "alpha": 1,
    "cssValue": "rgb(35, 108, 60)",
    "count": 5,
    "contexts": [
      {
        "tag": "figcaption",
        "text": "26Buixxii",
        "top": 560,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Explore Gallery",
        "top": 9074,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "02 CHILL & FUN ABOUT",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#1C2E22",
    "alpha": 1,
    "cssValue": "rgb(28, 46, 34)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 560,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 4035,
        "property": "::before-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3855,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#2C3A38",
    "alpha": 1,
    "cssValue": "rgb(44, 58, 56)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Register for the next event",
        "top": 20946,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "01 WORKJAM GALLERY",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#E9E2C8",
    "alpha": 1,
    "cssValue": "rgb(233, 226, 200)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "25",
        "top": 326,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "",
        "top": 4080,
        "property": "::after-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3810,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#0D1712",
    "alpha": 1,
    "cssValue": "rgb(13, 23, 18)",
    "count": 6,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 4080,
        "property": "::before-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3810,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#5C6161",
    "alpha": 1,
    "cssValue": "rgb(92, 97, 97)",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "06 years",
        "top": 1894,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#DAD0A7",
    "alpha": 1,
    "cssValue": "rgb(218, 208, 167)",
    "count": 6,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 4035,
        "property": "::after-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3855,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#FAB700",
    "alpha": 1,
    "cssValue": "rgb(250, 183, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1518,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#E1E0D8",
    "alpha": 1,
    "cssValue": "rgb(225, 224, 216)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "2-4 OctoberKe Retreat - Hanoi, VN",
        "top": 762,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#2E4A39",
    "alpha": 1,
    "cssValue": "rgb(46, 74, 57)",
    "count": 6,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 3991,
        "property": "::before-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3901,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#97A180",
    "alpha": 1,
    "cssValue": "rgb(151, 161, 128)",
    "count": 6,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 3991,
        "property": "::after-background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 3901,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#E1E1E1",
    "alpha": 1,
    "cssValue": "rgb(225, 225, 225)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "[ {\"num\":\"01\",\"name\":\"Poster 1\",\"img\":\"assets/img/cms/index/poster-stack-1-en.webp\",\"x\":-0.25,\"y\":-0",
        "top": 9739,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#245535",
    "alpha": 1,
    "cssValue": "rgb(36, 85, 53)",
    "count": 7,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 19,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "CHANDE",
        "top": 17,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#F65500",
    "alpha": 1,
    "cssValue": "rgb(246, 85, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1518,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#5E6464",
    "alpha": 1,
    "cssValue": "rgb(94, 100, 100)",
    "count": 8,
    "contexts": [
      {
        "tag": "a",
        "text": "Facebook",
        "top": 21072,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#F8E7BF",
    "alpha": 1,
    "cssValue": "rgb(248, 231, 191)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1608,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(255, 255, 255, 0.08)",
    "count": 2,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 21216,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#151611",
    "alpha": 1,
    "cssValue": "rgb(21, 22, 17)",
    "count": 1,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 1536,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#102A19",
    "alpha": 1,
    "cssValue": "rgb(16, 42, 25)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "27",
        "top": 826,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#F5F5EB",
    "alpha": 0.2,
    "cssValue": "rgba(244, 243, 235, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 973,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Highly variable and dramatic. Uses full-viewport height sections combined with tight clusters in collage areas.
- Corner style: Mix of sharp, brutalist corners (for images and grid blocks) and fully rounded pill shapes for buttons/badges.
- Radius: Primarily 0px for layout elements, 999px for pill buttons.
- Borders: Mostly borderless, relying on stark color contrasts or pixel patterns to define edges. Some usage of bracketed text for links.
- Buttons: Pill-shaped, solid fill (vibrant green or dark green), uppercase monospace or sans-serif text, flat appearance.
- Content width: Fluid, edge-to-edge layouts relying heavily on scroll position rather than a fixed container width.
- 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.

## Sections

Gallery section count: 8. Each entry corresponds to one gallery capture.

1. **Hero — Chande Bootcamp Event Hero** (Home)
   AI suggestion (97% confidence): Complete, visually distinctive event landing hero with integrated navigation, layered attendee portraits, bold event branding, date/location details, and recap prompt. It ends cleanly before the next editorial section begins.
   Capture: 1440×1173px; page bounds 0–1173px of 14721px; source section ID: `78c1479e-1757-4784-9ecf-5471cad82387`; image: https://media.designdetails.io/library/508124ecea23e1f54b9db927d8e2a18df2f8c3da4e20518310d3d8bd4250fb98/78c1479e-1757-4784-9ecf-5471cad82387.webp
   SECTION.md v3.2: `78c1479e-1757-4784-9ecf-5471cad82387` (deterministic evidence; editorial review pending)
2. **Features — AN EVENT FOR ALL DESIGNERS TO CONNECT. LISTEN & SHARE** (Home)
   Reusable feature composition from Home, organized around “AN EVENT FOR ALL DESIGNERS TO CONNECT. LISTEN & SHARE”.
   Capture: 1440×506px; page bounds 1148–1654px of 14721px; source section ID: `4e532504-df87-49ee-b742-2dd314a990cc`; image: https://media.designdetails.io/library/828f79a1ce5a8f87e3d1326bb0e6b8096599a3a5050a1a40613e749ea9b4fb43/section_crop-4e532504-2026-10-21T18-08-22-663Z.webp
   SECTION.md v3.2: `4e532504-df87-49ee-b742-2dd314a990cc` (deterministic evidence; editorial review pending)
3. **Features — 06 YEARS** (Home)
   Reusable feature composition from Home, organized around “06 YEARS”.
   Capture: 1440×1142px; page bounds 1654–2796px of 14721px; source section ID: `b7cf0152-eea6-4279-b78f-d88df758b71c`; image: https://media.designdetails.io/library/f4284c74f82f0e11b4db406970b461011bc0250d6c8af226a1cc5fa8522db471/section-manual-b7cf0152-eea6-4279-b78f-d88df758b71c-1792644833263.webp
   SECTION.md v3.2: `b7cf0152-eea6-4279-b78f-d88df758b71c` (deterministic evidence; editorial review pending)
4. **Features — KICK-OFF SETTLE IN GET TO KNOW EACH OTHER WORKSHOP-001: DAS BY LUMEN…** (Home)
   Reusable feature composition from Home, organized around “KICK-OFF SETTLE IN GET TO KNOW EACH OTHER WORKSHOP-001: DAS BY LUMEN…”.
   Capture: 1440×1006px; page bounds 8839–9845px of 14721px; source section ID: `77ca7f2c-d015-4a2f-b1bf-6ae50294229d`; image: https://media.designdetails.io/library/9217a739eb821dec50f5eacbc83b3d2989b48fd45896e0e3b70110df96636f61/section-manual-77ca7f2c-d015-4a2f-b1bf-6ae50294229d-1792644816755.webp
   SECTION.md v3.2: `77ca7f2c-d015-4a2f-b1bf-6ae50294229d` (deterministic evidence; editorial review pending)
5. **Editorial — 12 Events at Bootcamp Collage** (Home)
   AI suggestion (88% confidence): A complete, self-contained editorial feature composed of event imagery, graphic patterns, and a prominent “12 Events at Bootcamp” title; it begins and ends cleanly before the next navigation row.
   Capture: 1440×585px; page bounds 6955–7540px of 14721px; source section ID: `d83927d0-5452-486f-bafd-40398ae49b67`; image: https://media.designdetails.io/library/168d1a9525ff7a0f35ccbf33e3d540dc60bea048e7fa67c872aafde4b0be718b/d83927d0-5452-486f-bafd-40398ae49b67.webp
   SECTION.md v3.2: `d83927d0-5452-486f-bafd-40398ae49b67` (deterministic evidence; editorial review pending)
6. **Gallery — Chande Scrapbook Collage** (Home)
   AI suggestion (88% confidence): A complete, visually distinctive scrapbook gallery combining candid photos, stamp-like labels, stickers, and graphic ephemera within clear patterned boundaries.
   Capture: 1440×957px; page bounds 11426–12383px of 14721px; source section ID: `e22967c3-dc10-4e2e-8e6f-cbb3c4742572`; image: https://media.designdetails.io/library/e83466e6c3edfe999d0fc8501e1285ccff94810d906d2d36a84333522afde0d2/e22967c3-dc10-4e2e-8e6f-cbb3c4742572.webp
   SECTION.md v3.2: `e22967c3-dc10-4e2e-8e6f-cbb3c4742572` (deterministic evidence; editorial review pending)
7. **Testimonial Card — Chande Community Testimonial** (Home)
   AI suggestion (96% confidence): A complete testimonial composition with a large pull quote, signed attribution, portrait imagery, and a clearly defined ending.
   Capture: 1440×933px; page bounds 12389–13322px of 14721px; source section ID: `1e0c6267-58f6-4844-8cae-fa2b849b9d03`; image: https://media.designdetails.io/library/a5c1f8af0ae02901991d492d36874b0d8139de1dd3a262f8e86c33d072c13331/1e0c6267-58f6-4844-8cae-fa2b849b9d03.webp
   SECTION.md v3.2: `1e0c6267-58f6-4844-8cae-fa2b849b9d03` (deterministic evidence; editorial review pending)
8. **Footer — Production Credits and Partner Footer** (Home)
   AI suggestion (96% confidence): Complete, substantial page footer with contributor credits, oversized brand mark, partner and event calls-to-action, social links, site index, contact details, and copyright information.
   Capture: 1440×1033px; page bounds 13688–14721px of 14721px; source section ID: `07445d73-8d31-40c1-a7f4-777597de0cf4`; image: https://media.designdetails.io/library/1b09cfa23694ab02255c1c82c1fe683a07d2ece2d0f1291cb992004d3a999d1a/07445d73-8d31-40c1-a7f4-777597de0cf4.webp
   SECTION.md v3.2: `07445d73-8d31-40c1-a7f4-777597de0cf4` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/bcdbecd674ced56b5488e4ed67c6a7f7b2857b5ebc0d6205f806fcda8ca656c8/desktop_full-dad1a6d2-2026-10-21T18-08-12-070Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3f649c8873aa81ca50c61dd39a8736fd5708e46738ac64c406481564ffc0f764/mobile_full-dad1a6d2-2026-10-21T18-09-15-597Z.webp
- Open Graph image: https://media.designdetails.io/library/b9639029db5cc7cea082fc34082ae91472536f4665be1ee133d3322e1bb6ba46/og_image-dad1a6d2-2026-10-21T18-08-20-816Z.webp
- Full-page video: https://media.designdetails.io/library/3be3d99536e6e80692a18b86c1674c754b65a1b6e1e6bd1c0178fd76055c8414/motion-1792607909978.mp4
- Video poster: https://media.designdetails.io/library/133dd1de5cdc2aa65337b626d7be38fce2aa59e8d2417ab4b6cd89850c7d3fed/motion-poster-1792607909978.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Gallery
- Video Frame
- Primary Button
- Text Link
- Footer
- Scroll Linked Transition Blocks
- Interactive Text Highlighting
- Fanning Card Stack
- Custom Animated Cursor

## Quality rubric

Overall: 63.75/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Chande Bootcamp's site is a well-branded, systemically designed scroll experience with a disciplined green/black/off-white palette, a consistent Phudu/Geist Mono type pairing, and multiple coordinated layout structures carried through scroll-linked animation sequences that reverse cleanly. Its weakness is that the signature devices — pixel curtains, butterfly cursor, fanning poster stack, stamp collage — are recognizable from the current experimental-portfolio trend rather than being distinctively its own, keeping it in the 'good' range rather than 'strong' or higher.

- Typography (15%): 66 — A clear two-voice system (Phudu display at ~80px with aggressive negative tracking paired with Geist Mono for meta/labels) creates legible hierarchy and carries the brand voice consistently across hero, timeline, and footer. However nearly all headline-level type relies on the same single display face at the same handful of sizes, so variety comes mainly from color/scroll-state changes rather than typographic range.
- Color (10%): 64 — A tight, intentional palette (vibrant #68F12B green, off-white #F4F3EB canvas, near-black #0F1513 surface, muted gray #838B89) is applied with discipline across light and dark sections, giving the brand a recognizable signature. It is a competent, controlled execution rather than a distinctive color idea — green-on-black-on-off-white is a familiar 'tech/eco' combination.
- Layout (20%): 68 — Multiple distinct, purpose-built layout structures (asymmetric photo-grid hero, central-column agenda timeline with flanking media, scrapbook/stamp collage, split-logo footer index) are coordinated under a consistent sticky nav and button language, indicating real systemic layout thinking rather than one novelty section.
- Motion (20%): 69 — The recording shows a genuinely systemic motion approach: pixelated curtain reveals, scroll-tied color changes in typography, a fanning poster-stack 'deck of cards' effect, and a stripe-wipe transition, all of which reverse cleanly on upward scroll — evidence of real scroll-linked choreography across many sections rather than a single hero trick. Quality claims beyond structural presence (easing, frame rate, hover/interaction responsiveness) cannot be verified from this evidence.
- Originality (25%): 55 — The individual devices — pixel-grid curtains, a butterfly custom cursor, a fanning poster-stack gallery, and stamp/polaroid collage — are each recognizable from the current awwwards/experimental-portfolio idiom. They are combined into a cohesive, well-branded whole, but the component ideas themselves are not new; this is skilled recombination of known trends rather than a hard-to-substitute original concept.
- Content (10%): 63 — Event content (agenda items, speaker roles, testimonials, social proof) is woven into the visual system as typographic data points and stamp-style artifacts rather than bolted on as generic stock copy, giving the collage and timeline sections real informational purpose.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A stacked gallery of attendee photos against gradient green grids sets a lively, community mood before the heavy black headline even loads, so the people feel like the real subject. Further down, rounded pill shapes, bold numbered day markers and a scrapbook of event stickers break the long page into easy, snackable chapters.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.