# Masonry Project Gallery & Video Reel

Schema: Design Details SECTION.md v3.2
Website: Nothin'
Source: https://www.noth.in/
Source section IDs: gap-7f44d17e-2232-8253
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A staggered, asymmetric grid pairs project images with offset text blocks, so the generous negative space gives the page a clear rhythm.
- Large display statements sit beside small uppercase mono labels, which makes the hierarchy easy to scan.
- The black and white sections alternate, and a full-bleed video closes the gallery, which adds scale contrast and pays off the 'great brands surprise' line.

What a screenshot can't show:
- In the recording, the video expands to full width as it reaches the center of the viewport during scroll, over roughly 5 to 18 seconds.
- Exact type sizes, tracking, leading and spacing were not measured, so those values are unknown.

Borrow: Hold one oversized, unexpected media moment back until the end of a restrained grid, and let a scroll-triggered expansion deliver it.
Leave alone: Don't copy the sausage-dog balloon video, the specific project mockups or the IBM Plex Mono and grotesque pairing; use your own surprise and a free mono such as JetBrains Mono.

## Classification

- Type: gallery
- Layout: Staggered image grids interspersed with full-width media containers and offset editorial text blocks.
- Styles: photographic, bold, editorial
- Confidence: 92%

## Purpose and structure

A massive portfolio showcase featuring a staggered masonry gallery of case studies, dark editorial layouts, and a large video player that expands on scroll.

Visual signature: A diverse array of project imagery culminating in a large video of a sausage dog balloon animal on foil.

## Components

- Image grid
- Video player
- Project cards
- Text block

## Typography

- Display: Ppneuemontreal — 72px 500
- Heading: Ppneuemontreal — 36px 500
- Body: Ppneuemontreal Book — 16.2px 400
- Mono: IBM Plex Mono — 10.8px 500

## Functional palette

- Canvas: canvas #000000
- Text: text #FFFFFF
- Canvas: canvas #FFFFFF
- Text: text #000000

## Motion evidence

- 5.0–18.0s — A video expands to full screen width as it reaches the center of the viewport during scroll down. (90% confidence)

## Section quality

Overall: 64.75/100 (Good)
Scored coverage: 100%

- Typography: 68 — Clear type hierarchy with large editorial statements (72px display), smaller mono project labels (IBM Plex Mono, uppercase tracking), and body copy. Pairing of grotesque display with mono captions feels considered and consistent with editorial portfolio conventions, but spacing/leading values are fairly standard and not pushed to extremes. Next tier: Needs more distinctive type-scale relationships or custom treatment (e.g. kerning quirks, mixed-weight interplay) beyond a conventional large-statement + mono-label pattern to reach strong/memorable.
- Composition: 66 — Staggered, asymmetric masonry grid with alternating text/image pairings creates strong rhythm and negative space; offsetting of project cards against huge whitespace is purposeful. The black-to-white-to-black section transitions and full-bleed video break-out add scale variation. However the grid itself (image-left-text-right alternation) is a common agency-portfolio pattern. Next tier: Would need more unexpected scale shifts, overlap, or asymmetric breaking of the implicit column grid to move into strong/memorable territory rather than a well-executed but familiar staggered layout.
- Motion: 62 — Only one timestamped motion moment supplied: a video expanding to full width as it centers in viewport during scroll (5-18s). This is a clean, purposeful scroll-triggered expansion that reinforces the reel as a focal climax of the gallery. Next tier: Single documented motion event is a common scroll-expand pattern; no secondary choreography (stagger reveals, parallax, hover states) is evidenced to justify higher tier.
- Content: 65 — Content integration is coherent: project thumbnails, device mockups, and taglines are tightly matched to each case study, and the eyebrow copy ('Good brands communicate. Great brands surprise.') sets thematic framing for the gallery. The sausage-dog video functions as a surprising full-bleed centerpiece that pays off the copy's premise. Next tier: Content pairing is competent but mockup-in-device-frame images are a common presentation technique; needs more bespoke integration of copy and imagery to exceed polished/good.
- Originality: 64 — The sudden tonal shift to a large sausage-dog-balloon-animal video amid dark-mode minimal cards is a distinctive, memorable surprise that breaks portfolio-gallery convention and directly embodies the stated 'great brands surprise' thesis. Next tier: Beyond the single surprising visual, the surrounding grid/layout mechanics are standard; need more structural or interactive originality (not just subject matter) to reach strong tier.
- Adaptability: 62 — Grid structure, text-block/image pairing, and video-expand behavior are generic patterns that separate cleanly from the specific project assets (which are brand-specific and non-transferable). Next tier: Heavy reliance on bespoke photographic/video assets for its impact limits how independently the skin can be swapped without losing the section's identity.

Strengths:
- Alternating black/white canvas with staggered image-text pairing creates strong visual rhythm and pacing through a long scroll
- Full-width video expansion at scroll-center is a clean, purposeful climax moment
- Surprising sausage-dog balloon-animal video payoff directly reinforces the stated thesis copy, giving the gallery a memorable tonal beat
- Consistent mono-uppercase project labeling system gives a clear content taxonomy across cards

Weaknesses:
- Core masonry/staggered portfolio grid pattern is a common agency-site convention
- Device-mockup framing (laptop/monitor renders) is a generic presentation technique seen across many portfolios
- Only one motion moment is documented, leaving most of the section's interactivity and reveal behavior unassessed
- Heavy dependence on specific project photography/video assets for perceived quality, making the layout's intrinsic strength harder to isolate

Why it does not reach the next tier: The section is well-executed and has one genuinely surprising content moment, but its underlying grid, device-mockup framing, and single documented motion event are recognizable portfolio conventions rather than a structurally novel idea, keeping it in the good/polished range rather than strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the grid/alternation structure and mono-label + large-statement typographic system with placeholder imagery; the scroll-expand video behavior can be replicated as a generic component, but the section's memorable impact depends on swapping in equally distinctive photographic/video content.

What transfers:
- Staggered masonry grid alternating image and text blocks
- Mono-uppercase project label convention paired with large editorial statement copy
- Full-bleed scroll-triggered video expansion behavior
- Black/white section inversion rhythm

Dependencies:
- Bespoke project photography and video assets (including the signature surprise video)
- Specific device mockup renders (laptop/monitor) for each case study
- Exact copy pairing tone ('Good brands communicate...') tied to brand voice

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion scored from a single timestamped event; other transitions and hover states are unverified
- No deterministic spacing, radius, or exact color values supplied for most components
- Cannot verify animation easing, duration, or stagger patterns beyond the one described expansion

## 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: gallery
- Source type: gallery
- Structure: full-bleed
- Layout: Staggered image grids interspersed with full-width media containers and offset editorial text blocks.
- Styles: photographic, bold, editorial
- Components: Image grid, Video player, Project cards, Text block
- Purpose: A massive portfolio showcase featuring a staggered masonry gallery of case studies, dark editorial layouts, and a large video player that expands on scroll.
- Visual signature: A diverse array of project imagery culminating in a large video of a sausage dog balloon animal on foil.
- Place on the page: 4 of 9, after Other (`noth-in:C02`), before Gallery (`f4690f7a-0623-42f5-bfe4-cb92da133a86`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "72px",
      "family": "Ppneuemontreal",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: 72px Ppneuemontreal used for large statements like 'Most brands produce content.' and 'Forms follow'.",
      "sampleId": "font-8",
      "confidence": 0.9,
      "lineHeight": "72px",
      "letterSpacing": "-0.7px"
    },
    {
      "role": "heading",
      "size": "36px",
      "family": "Ppneuemontreal",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-14: computed CSS at 1440×1000; AI role: 36px Ppneuemontreal used for intermediate headings like 'Good brands communicate.'",
      "sampleId": "font-14",
      "confidence": 0.85,
      "lineHeight": "39.6px",
      "letterSpacing": "-0.4px"
    },
    {
      "role": "body",
      "size": "16.2px",
      "family": "Ppneuemontreal Book",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 16.2px Ppneuemontreal Book used extensively for paragraph text.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "16.2px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "10.8px",
      "family": "IBM Plex Mono",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: IBM Plex Mono used for project titles like 'Utopia' and 'Aurbse'.",
      "sampleId": "font-7",
      "confidence": 0.8,
      "lineHeight": "10.8px",
      "letterSpacing": "0.3px"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [],
  "functionalPalette": [
    {
      "hex": "#000000",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Black used extensively for the background of major sections.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: White text on black backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: White used for the background of the initial hero section.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Black text on white backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px for media containers; high border-radius (e.g., 50vw) for outline buttons.",
  "density": "Very sparse. High use of negative space to isolate and emphasize massive typographic elements or imagery.",
  "evidence": "Visual inspection shows black and white canvas inversions, sharp-edged project photos, pill buttons ('BOOK A CALL'), and huge text ('NOTHIN'').",
  "borderStyle": "Thin, semi-transparent borders used sparingly, mainly on CTA buttons.",
  "buttonStyle": "Pill-shaped, transparent background with a thin border and uppercase tracking text.",
  "cornerStyle": "Sharp corners on images and video frames; fully rounded (pill) shapes for interactive buttons.",
  "contentWidth": "Full-bleed for the massive text and some videos, mixed with constrained, inset text blocks.",
  "spacingRhythm": "Highly variable and asymmetric, utilizing massive whitespace around text blocks and scattered positioning for images."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
null
```

### Observed motion

1. **scroll** — A video expands to full screen width as it reaches the center of the viewport during scroll down. (5s–18s; 90% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Staggered masonry grid alternating image and text blocks; Mono-uppercase project label convention paired with large editorial statement copy; Full-bleed scroll-triggered video expansion behavior; Black/white section inversion rhythm
- Dependencies: Bespoke project photography and video assets (including the signature surprise video); Specific device mockup renders (laptop/monitor) for each case study; Exact copy pairing tone ('Good brands communicate...') tied to brand voice
- Guidance: Reuse the grid/alternation structure and mono-label + large-statement typographic system with placeholder imagery; the scroll-expand video behavior can be replicated as a generic component, but the section's memorable impact depends on swapping in equally distinctive photographic/video content.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original gallery section inspired by the design evidence titled “Masonry Project Gallery & Video Reel”.

Purpose: A massive portfolio showcase featuring a staggered masonry gallery of case studies, dark editorial layouts, and a large video player that expands on scroll.

Structure: full-bleed. Source layout label: Staggered image grids interspersed with full-width media containers and offset editorial text blocks.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: A diverse array of project imagery culminating in a large video of a sausage dog balloon animal on foil.

Components: Image grid, Video player, Project cards, Text block.

Style direction: photographic, bold, editorial.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"72px","family":"Ppneuemontreal","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 72px Ppneuemontreal used for large statements like 'Most brands produce content.' and 'Forms follow'.","sampleId":"font-8","confidence":0.9,"lineHeight":"72px","letterSpacing":"-0.7px"} {"role":"heading","size":"36px","family":"Ppneuemontreal","source":"computed","traits":"Regular","weight":"500","evidence":"font-14: computed CSS at 1440×1000; AI role: 36px Ppneuemontreal used for intermediate headings like 'Good brands communicate.'","sampleId":"font-14","confidence":0.85,"lineHeight":"39.6px","letterSpacing":"-0.4px"} {"role":"body","size":"16.2px","family":"Ppneuemontreal Book","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 16.2px Ppneuemontreal Book used extensively for paragraph text.","sampleId":"font-3","confidence":0.9,"lineHeight":"16.2px","letterSpacing":"normal"} {"role":"mono","size":"10.8px","family":"IBM Plex Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-7: computed CSS at 1440×1000; AI role: IBM Plex Mono used for project titles like 'Utopia' and 'Aurbse'.","sampleId":"font-7","confidence":0.8,"lineHeight":"10.8px","letterSpacing":"0.3px"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Black used extensively for the background of major sections.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White text on black backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White used for the background of the initial hero section.","sampleId":"color-2","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Black text on white backgrounds.","sampleId":"color-1","confidence":0.9}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: scroll: A video expands to full screen width as it reaches the center of the viewport during scroll down. (90% confidence)

Transfer these principles: Staggered masonry grid alternating image and text blocks; Mono-uppercase project label convention paired with large editorial statement copy; Full-bleed scroll-triggered video expansion behavior; Black/white section inversion rhythm.

Dependencies: Bespoke project photography and video assets (including the signature surprise video); Specific device mockup renders (laptop/monitor) for each case study; Exact copy pairing tone ('Good brands communicate...') tied to brand voice.

Adaptation guidance: Reuse the grid/alternation structure and mono-label + large-statement typographic system with placeholder imagery; the scroll-expand video behavior can be replicated as a generic component, but the section's memorable impact depends on swapping in equally distinctive photographic/video content.

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