# Event Statement Typography

Schema: Design Details SECTION.md v3.2
Website: Chandebootcamp
Source: https://www.chandebootcamp.com/
Source section IDs: 4e532504-df87-49ee-b742-2dd314a990cc
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: editorial
- Layout: Centered bold text on a split dark and light background.
- Styles: bold, minimal, typographic
- Confidence: 90%

## Purpose and structure

A bold typographic statement section on a dark background.

Visual signature: Glowing outlined text saying 'SHOW (THE LOVE)' next to a solid white typographic statement.

## Components

- large typography
- outlined text
- graphic symbols

## 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: 62.59/100 (Good)
Scored coverage: 85%

- Typography: 66 — Confident display use of Phudu at 80px with tight negative tracking and uppercase treatment creates strong voice; condensed bold face fills the line well and the typographic statement reads as a crafted headline rather than default system styling, but letterforms and hierarchy rely on a single scale with no secondary type interplay. Next tier: Needs a second typographic register (weight/scale contrast) or more deliberate line-break rhythm to move beyond a single confident statement.
- Composition: 65 — Left-aligned stacked headline balanced against a smaller right-aligned 'SHOW (THE LOVE)' block creates asymmetry and breathing room on a dark canvas; pill-shaped icon chips interrupt the text flow in a controlled way, giving the layout a sense of designed tension rather than a plain centered block. Next tier: The right-side text block feels disconnected in scale/weight from the main statement; tighter relational logic between the two text groups would be needed for a stronger composition score.
- Motion: not_assessed — No animation data or timestamped motion evidence supplied for this crop; motion cannot be scored. Next tier: Timestamped visible motion evidence is required to assess this axis.
- Content: 58 — Text content is a simple event tagline integrated directly into the typography with inline icon chips acting as small symbolic accents, but there is no imagery, data, or other content type beyond text and decorative glyphs. Next tier: Integrating a distinct content element (image, quote, or live content) alongside the type would raise this beyond a purely typographic statement.
- Originality: 62 — Outlined pill icons embedded mid-sentence and the glowing-outline secondary statement give a specific, non-generic voice distinct from a plain bold-headline treatment, though the overall 'big bold statement on dark background' pattern itself is common in editorial sites. Next tier: The core pattern (bold centered/stacked statement) is widely used; a more unexpected structural or typographic device would be needed to feel distinctive at the next tier.
- Adaptability: 60 — Structure (headline block + secondary statement + inline icon pills) is clearly separable from the specific Phudu typeface and dark-canvas skin; the pattern could be restyled with different type and palette while keeping the layout logic intact. Next tier: Dependence on the custom condensed display font and bespoke icon pill shapes for its visual identity limits how distinct it would feel with substitute assets.

Strengths:
- Confident large-scale condensed typography with tight tracking carries the section's voice
- Inline icon pill shapes break up the text in a deliberate, non-generic way
- Clear light-on-dark contrast establishes a strong editorial pause point

Weaknesses:
- Secondary 'SHOW (THE LOVE)' block feels compositionally disconnected from the main statement
- Single type scale/weight limits hierarchy depth
- No motion evidence supplied, leaving a plausible but unverified kinetic dimension unscored
- Pattern of bold centered statement on dark background is a common editorial device

Why it does not reach the next tier: The section is a well-executed but single-idea typographic pause: it lacks a second content layer, deeper hierarchy, or a more unusual structural device that would make it feel irreplaceable rather than a polished version of a familiar pattern.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the layout skeleton (headline block, inline icon pills, secondary offset statement) with any bold condensed typeface and a swapped icon set; palette and icon shapes can be restyled without altering structure.

What transfers:
- Stacked bold headline with inline icon-pill interruptions
- Secondary offset statement block for tonal contrast
- Dark canvas with light text contrast relationship

Dependencies:
- Custom condensed display typeface (Phudu) for voice
- Custom SVG icon/pill glyphs for the inline accents
- Specific color palette (green/orange/yellow accents) for pill outlines

## 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 data supplied, so any animated reveal of the text is unverified
- Exact font rendering and icon SVG details are inferred from static crop only
- Cannot confirm behavior at other breakpoints or scroll states

## 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: Centered bold text on a split dark and light background.
- Styles: bold, minimal, typographic
- Components: large typography, outlined text, graphic symbols
- Purpose: A bold typographic statement section on a dark background.
- Visual signature: Glowing outlined text saying 'SHOW (THE LOVE)' next to a solid white typographic statement.

### Crop and composition

- Crop: 1440×506px; aspect ratio 2.846:1
- Page bounds: 1148–1654px 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": "79.5px",
      "weight": "700",
      "lineHeight": "62px",
      "letterSpacing": "-3.2px",
      "sample": "An event for",
      "element": "span",
      "occurrences": 31,
      "sourceId": "font-8"
    }
  ],
  "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": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "::before-background"
      ],
      "occurrences": 82,
      "sourceId": "color-1"
    },
    {
      "value": "#C3C4BD",
      "cssValue": "rgb(195, 196, 189)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "::after-background"
      ],
      "occurrences": 4,
      "sourceId": "color-4"
    },
    {
      "value": "#0F1513",
      "cssValue": "rgb(15, 21, 19)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-stroke"
      ],
      "occurrences": 43,
      "sourceId": "color-8"
    },
    {
      "value": "#182220",
      "cssValue": "rgb(24, 34, 32)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "::before-background"
      ],
      "occurrences": 3,
      "sourceId": "color-10"
    },
    {
      "value": "#68F12B",
      "cssValue": "rgb(104, 241, 43)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 44,
      "sourceId": "color-12"
    },
    {
      "value": "#171717",
      "cssValue": "rgb(23, 23, 23)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-16"
    },
    {
      "value": "#FAB700",
      "cssValue": "rgb(250, 183, 0)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-34"
    },
    {
      "value": "#F65500",
      "cssValue": "rgb(246, 85, 0)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-40"
    },
    {
      "value": "#F8E7BF",
      "cssValue": "rgb(248, 231, 191)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 2,
      "sourceId": "color-42"
    },
    {
      "value": "#151611",
      "cssValue": "rgb(21, 22, 17)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill"
      ],
      "occurrences": 1,
      "sourceId": "color-44"
    }
  ],
  "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: 1440×506px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Representative content widths: 646, 292px.
- Layout containers: 0; cards/surfaces: 0; media elements: 3; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 1148,
      "bottom": 1654,
      "pageHeight": 14721
    }
  },
  "container": {
    "size": "1440×506px",
    "position": "x 0px, y 1148px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgb(36, 85, 53)",
    "shadow": "none",
    "overflow": "clip"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      646,
      292
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "209×41px",
    "position": "x 755px, y 1526px",
    "aspectRatio": 5.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "138×41px",
    "position": "x 378px, y 1588px",
    "aspectRatio": 3.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "53×32px",
    "position": "x 1274px, y 1530px",
    "aspectRatio": 1.7,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  }
]
```

#### 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": {
    "id": "ld-106",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 1148,
      "width": 1440,
      "height": 506
    },
    "role": null,
    "label": "An event forall designersto connect.Listen & share Show(The love)",
    "border": "0px none rgb(36, 85, 53)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "clip",
    "position": "relative",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-121",
      "tag": "svg",
      "rect": {
        "x": 755,
        "y": 1526,
        "width": 209,
        "height": 41
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 5.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-108",
      "tag": "svg",
      "rect": {
        "x": 378,
        "y": 1588,
        "width": 138,
        "height": 41
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 3.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-139",
      "tag": "svg",
      "rect": {
        "x": 1274,
        "y": 1530,
        "width": 53,
        "height": 32
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 1.7,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 1148,
    "bottom": 1654,
    "pageHeight": 14721
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      646,
      292
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 3,
    "animations": 0,
    "elementsInSection": 12
  },
  "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: low
- What transfers: Stacked bold headline with inline icon-pill interruptions; Secondary offset statement block for tonal contrast; Dark canvas with light text contrast relationship
- Dependencies: Custom condensed display typeface (Phudu) for voice; Custom SVG icon/pill glyphs for the inline accents; Specific color palette (green/orange/yellow accents) for pill outlines
- Guidance: Reuse the layout skeleton (headline block, inline icon pills, secondary offset statement) with any bold condensed typeface and a swapped icon set; palette and icon shapes can be restyled without altering structure.

### 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 “Event Statement Typography”.

Purpose: A bold typographic statement section on a dark background.

Structure: two-column. Source layout label: Centered bold text on a split dark and light background.. 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: Glowing outlined text saying 'SHOW (THE LOVE)' next to a solid white typographic statement.

Components: large typography, outlined text, graphic symbols.

Style direction: bold, minimal, typographic.

Observed crop: 1440×506px (2.846: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-8","size":"79.5px","count":31,"family":"Phudu","traits":"uppercase","weight":"700","contexts":[{"tag":"span","top":1394,"text":"An event for","property":"font"},{"tag":"span","top":1448,"text":"all designers","property":"font"},{"tag":"span","top":1510,"text":"to connect.","property":"font"}],"fontStack":"Phudu, ui-sans-serif, system-ui, sans-serif","lineHeight":"62px","letterSpacing":"-3.2px"}

Colors measured inside this section: {"id":"color-1","hex":"#000000","alpha":1,"count":82,"contexts":[{"tag":"svg","top":1588,"text":"","property":"svg-fill"},{"tag":"g","top":1535,"text":"","property":"svg-fill"},{"tag":"i","top":4124,"text":"","property":"::before-background"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-4","hex":"#C3C4BD","alpha":1,"count":4,"contexts":[{"tag":"section","top":60,"text":"Scroll more 25Hoangz 26Buixxii 27Yen 28Dang Tri ChandeBootcampBy. Mingg Special event organized byMi","property":"background"},{"tag":"span","top":1581,"text":"","property":"::after-background"}],"cssValue":"rgb(195, 196, 189)"} {"id":"color-8","hex":"#0F1513","alpha":1,"count":43,"contexts":[{"tag":"figcaption","top":963,"text":"Video recap","property":"text"},{"tag":"g","top":1608,"text":"","property":"svg-stroke"},{"tag":"path","top":1608,"text":"","property":"svg-stroke"}],"cssValue":"rgb(15, 21, 19)"} {"id":"color-10","hex":"#182220","alpha":1,"count":3,"contexts":[{"tag":"div","top":560,"text":"","property":"background"},{"tag":"figcaption","top":310,"text":"25Hoangz","property":"background"},{"tag":"div","top":1654,"text":"","property":"::before-background"}],"cssValue":"rgb(24, 34, 32)"} {"id":"color-12","hex":"#68F12B","alpha":1,"count":44,"contexts":[{"tag":"i","top":1104,"text":"","property":"background"},{"tag":"figcaption","top":810,"text":"27Yen","property":"background"},{"tag":"span","top":1581,"text":"","property":"background"}],"cssValue":"rgb(104, 241, 43)"} {"id":"color-16","hex":"#171717","alpha":1,"count":1,"contexts":[{"tag":"div","top":1654,"text":"","property":"background"}],"cssValue":"rgb(23, 23, 23)"} {"id":"color-34","hex":"#FAB700","alpha":1,"count":1,"contexts":[{"tag":"span","top":1518,"text":"","property":"background"}],"cssValue":"rgb(250, 183, 0)"} {"id":"color-40","hex":"#F65500","alpha":1,"count":1,"contexts":[{"tag":"span","top":1518,"text":"","property":"background"}],"cssValue":"rgb(246, 85, 0)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":1148,"width":1440,"height":506},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"clip"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[646,292]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":755,"y":1526,"width":209,"height":41},"aspectRatio":5.1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":378,"y":1588,"width":138,"height":41},"aspectRatio":3.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1274,"y":1530,"width":53,"height":32},"aspectRatio":1.7,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

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

Transfer these principles: Stacked bold headline with inline icon-pill interruptions; Secondary offset statement block for tonal contrast; Dark canvas with light text contrast relationship.

Dependencies: Custom condensed display typeface (Phudu) for voice; Custom SVG icon/pill glyphs for the inline accents; Specific color palette (green/orange/yellow accents) for pill outlines.

Adaptation guidance: Reuse the layout skeleton (headline block, inline icon pills, secondary offset statement) with any bold condensed typeface and a swapped icon set; palette and icon shapes can be restyled without altering structure.

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