# Floating Polaroid Gallery

Schema: Design Details SECTION.md v3.2
Website: Nick Ho
Source: https://nickho-motorsports.nl/
Source section IDs: gap-a29c63eb-10032-11012
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Giant faded uppercase 'GALLERY' sits behind the photos as a quiet backdrop, so the photos read clearly while the scale contrast adds depth.
- Three tilted, non-grid photo cards overlap the word with deliberate asymmetry, which gives a playful scattered-pile feel.
- Real event and race photography, plus a central dial and arrow controls, keeps the section tactile and clearly navigable.

What a screenshot can't show:
- The recording showed no motion, so carousel transitions, rotation changes and reveal timing are unknown.
- No font sizes, letter spacing or section spacing were measured.

Borrow: Layer oversized, low-contrast type behind tilted photos so the words set the mood and the images carry the content.
Leave alone: Don't copy the Anton-style condensed headline, the compass dial motif or the black and yellow palette; use your own display face, control device and colours.

## Classification

- Type: gallery
- Layout: Scattered, rotated image cards floating freely over a light background with giant faded text.
- Styles: playful, typographic, photographic
- Confidence: 90%

## Purpose and structure

A scatter of angled images overlapping large background text.

Visual signature: Tilted polaroid-style photos floating on top of giant faded 'GALLERY' typography.

## Components

- rotated image cards
- large faded background text
- carousel navigation buttons

## Typography

- Display: Anton — 50px 600
- Heading: Anton — 64px 400
- Body: Helvetica — 14px 400

## Functional palette

- Canvas: canvas #000000
- Primary-Action: primary action #FED60A
- Surface: surface #FFFFFF

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 58.82/100 (Competent)
Scored coverage: 85%

- Typography: 58 — The giant faded 'GALLERY' background text uses the display headline treatment consistently (Anton, uppercase) and establishes clear scale contrast against the photos, but it is a single decorative word with no other typographic layering or hierarchy to judge beyond that one gesture. Next tier: Introduce a second typographic element (caption, label, or counter) that interacts meaningfully with the background type to build a hierarchy beyond one giant word.
- Composition: 63 — Three rotated, non-grid images are arranged with deliberate asymmetry around a radial/compass motif at center, overlapping the giant background word to create genuine depth and a playful scattered-gallery feel rather than a generic grid. Next tier: Spacing and overlap amounts between the photos and the background letters feel arbitrary rather than tied to a visible grid or rhythm; tightening the relationship between card placement, central dial, and letterforms would push this further.
- Motion: not_assessed — No motion_moments or timestamped evidence of animation was supplied, so carousel transitions, rotation changes, or reveal behavior cannot be judged. Next tier: Provide timestamped evidence of specific visible changes (e.g., how cards animate in/out during carousel navigation) to assess motion.
- Content: 56 — Photos are genuine event/race imagery integrated into the layout, and one card carries overlaid date text, but content placement is decorative rather than purposefully tied to the surrounding section's narrative beyond serving as gallery filler. Next tier: Show content doing more work, e.g., captions, context labels, or hierarchy that differentiates image importance rather than uniform tilted thumbnails.
- Originality: 61 — The combination of oversized faded wordmark, scattered tilted photos, and a compass-like dial navigation is a distinct idea not reducible to a standard carousel or grid gallery. Next tier: The core motif (big word + floating photos) is a recognizable pattern seen across many sites; a more unique navigation mechanic or interaction with the dial element would differentiate it further.
- Adaptability: 55 — Structure (background type layer, scattered image layer, central nav dial, arrow controls) is separable into discrete layers that could be restyled with different imagery, fonts, and colors without breaking the pattern. Next tier: Dependency on precise rotation/position values per card for the scattered effect to read correctly, which are not specified, limits confidence in clean separation of skin vs structure.

Strengths:
- Oversized faded background word creates strong depth and scale without competing with foreground imagery
- Asymmetric, rotated photo placement avoids generic grid-gallery conventions
- Central radial dial doubles as a decorative motif and apparent navigation indicator

Weaknesses:
- Only three visible images limit the 'gallery' feel at this crop
- No clear differentiation in caption/label treatment across cards except one
- Carousel arrow buttons appear generic and under-styled relative to rest of composition
- No motion evidence supplied to assess transition quality

Why it does not reach the next tier: The section shows a confident single idea (scattered photos over giant type) but lacks the layered typographic or content hierarchy, and refined positioning logic, that would elevate it from a good compositional gimmick to a memorable, tightly tuned system.

## Adaptation guidance

- Effort: Medium
- Guidance: Recreate as three layers: a full-bleed oversized heading text, an absolutely-positioned set of rotated square image cards with varied offsets, and a small centered radial nav control with prev/next buttons; swapping imagery, wordmark text, and accent color should preserve the pattern.

What transfers:
- Giant faded background wordmark as depth layer
- Scattered rotated photo cards radiating from a center point
- Central dial/indicator as navigation metaphor

Dependencies:
- Specific rotation and positioning values per card
- Font and sizing of background word relative to viewport
- Image aspect ratio assumptions for square polaroid-style cards

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

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

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No motion timestamps provided, so carousel/transition behavior is unassessed
- Only a single crop view limits judgment of full gallery behavior across more images
- Deterministic facts didn't specify card dimensions or rotation angles

## 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: Scattered, rotated image cards floating freely over a light background with giant faded text.
- Layout: Scattered, rotated image cards floating freely over a light background with giant faded text.
- Styles: playful, typographic, photographic
- Components: rotated image cards, large faded background text, carousel navigation buttons
- Purpose: A scatter of angled images overlapping large background text.
- Visual signature: Tilted polaroid-style photos floating on top of giant faded 'GALLERY' typography.
- Place on the page: 9 of 11, after Other (`1ec67623-7db7-494e-bb69-e53149bc1aab`), before Contact (`nickho-motorsports-nl:C06`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

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

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "50px",
      "family": "Anton",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Anton, 50px, weight 600. Used for major bold headlines and hero text.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "55px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "64px",
      "family": "Anton",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Anton, 64px, weight 400. Used for section headers and large background text.",
      "sampleId": "font-9",
      "confidence": 0.9,
      "lineHeight": "64px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Helvetica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Helvetica, 14px, weight 400. Used for standard body copy, labels, and small descriptions.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "19.6px",
      "letterSpacing": "normal"
    }
  ]
}
```

### 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-2: computed rgb(0, 0, 0); AI role: #000000 (Black). Serves as the primary background color for large sections of the site, including the hero, timeline, and calendar.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FED60A",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-4: computed rgb(254, 214, 10); AI role: #FED60A (Yellow). Used consistently for primary buttons and call-to-action text.",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: #FFFFFF (White). Used as the background for the partner logo grid, media articles, and the contact form card.",
      "sampleId": "color-1",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px corner radius applied consistently to UI elements.",
  "density": "Relatively spacious. The use of large typography and distinct section blocks creates an airy, dramatic feel despite the dark palette.",
  "evidence": "Measured via visual observation of button shapes, layout grids in the logo section, list dividers in the calendar, and the overall spacing rhythm in the provided desktop screenshots.",
  "borderStyle": "Thin, subtle 1px borders are used as structural dividers in lists (like the calendar) and grid layouts.",
  "buttonStyle": "Solid fill with sharp rectangular geometry, typically featuring a vibrant accent color (yellow) housing bold, uppercase typography.",
  "cornerStyle": "Strictly sharp, non-rounded corners are used universally across buttons, image containers, and form fields.",
  "contentWidth": "A mix of full-bleed imagery (hero) and centrally constrained content columns for text-heavy sections to maintain readability.",
  "spacingRhythm": "Generous vertical padding distinguishes distinct page sections. Content is often centered with wide margins on large screens. Grids for logos use tight, uniform spacing."
}
```

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

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: 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: Giant faded background wordmark as depth layer; Scattered rotated photo cards radiating from a center point; Central dial/indicator as navigation metaphor
- Dependencies: Specific rotation and positioning values per card; Font and sizing of background word relative to viewport; Image aspect ratio assumptions for square polaroid-style cards
- Guidance: Recreate as three layers: a full-bleed oversized heading text, an absolutely-positioned set of rotated square image cards with varied offsets, and a small centered radial nav control with prev/next buttons; swapping imagery, wordmark text, and accent color should preserve the pattern.

### 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; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original gallery section inspired by the design evidence titled “Floating Polaroid Gallery”.

Purpose: A scatter of angled images overlapping large background text.

Structure: Scattered, rotated image cards floating freely over a light background with giant faded text.. Source layout label: Scattered, rotated image cards floating freely over a light background with giant faded text.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Tilted polaroid-style photos floating on top of giant faded 'GALLERY' typography.

Components: rotated image cards, large faded background text, carousel navigation buttons.

Style direction: playful, typographic, photographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"50px","family":"Anton","source":"computed","traits":"uppercase","weight":"600","evidence":"font-1: computed CSS at 1440×1000; AI role: Anton, 50px, weight 600. Used for major bold headlines and hero text.","sampleId":"font-1","confidence":0.95,"lineHeight":"55px","letterSpacing":"normal"} {"role":"heading","size":"64px","family":"Anton","source":"computed","traits":"uppercase","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Anton, 64px, weight 400. Used for section headers and large background text.","sampleId":"font-9","confidence":0.9,"lineHeight":"64px","letterSpacing":"normal"} {"role":"body","size":"14px","family":"Helvetica","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Helvetica, 14px, weight 400. Used for standard body copy, labels, and small descriptions.","sampleId":"font-2","confidence":0.9,"lineHeight":"19.6px","letterSpacing":"normal"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: #000000 (Black). Serves as the primary background color for large sections of the site, including the hero, timeline, and calendar.","sampleId":"color-2","confidence":0.95} {"hex":"#FED60A","name":"primary action","role":"primary-action","source":"computed","evidence":"color-4: computed rgb(254, 214, 10); AI role: #FED60A (Yellow). Used consistently for primary buttons and call-to-action text.","sampleId":"color-4","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: #FFFFFF (White). Used as the background for the partner logo grid, media articles, and the contact form card.","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.

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

Transfer these principles: Giant faded background wordmark as depth layer; Scattered rotated photo cards radiating from a center point; Central dial/indicator as navigation metaphor.

Dependencies: Specific rotation and positioning values per card; Font and sizing of background word relative to viewport; Image aspect ratio assumptions for square polaroid-style cards.

Adaptation guidance: Recreate as three layers: a full-bleed oversized heading text, an absolutely-positioned set of rotated square image cards with varied offsets, and a small centered radial nav control with prev/next buttons; swapping imagery, wordmark text, and accent color should preserve the pattern.

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