# Email waitlist form with product image

Schema: Design Details SECTION.md v3.2
Website: Playfolly
Source: https://playfolly.com/
Source section IDs: ac786e85-e48b-41d0-a8d1-aeb300276c2a
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The two-column split puts the heading, short copy and email field on the left and a small product render on the right, so the ask and the object sit side by side.
- A stark white pill input stands out against the saturated yellow field, and the yellow product render echoes the background so the section feels like one colour story.
- Type stays simple at a single 30px size with 36px line height, with weight 500 versus 400 separating heading from body, which keeps the message quick to read.

What a screenshot can't show:
- The recording showed no motion, so there are no hover, focus or submit animations to copy.
- Measured content width is about 616px with zero section padding, so spacing likely comes from inner wrappers rather than the section itself.

Borrow: Pair one saturated colour field with a single high-contrast input and a product image tinted to match, so the signup is the clear focus.
Leave alone: Don't copy the exact yellows, the Geograph typeface (a commercial font; a clean neo-grotesque sans like Inter works instead) or the yellow-on-yellow product render.

## Classification

- Type: forms
- Layout: Two-column layout with form elements on the left and a product image on the right.
- Styles: colourful, bold, minimal
- Confidence: 95%

## Purpose and structure

A bright yellow section containing a simple email waitlist signup form and a small product render.

Visual signature: A vibrant yellow banner with a stark white email input field and a matching yellow product render.

## Components

- Heading
- Body copy
- Email input field
- Submit button
- Product image

## Typography

- Display: Geograph — 234px 700
- Heading: Geograph — 60px 500
- Body: Geograph — 16px 400

## Functional palette

- Canvas: canvas #EDBF7A
- Text: text #000000
- Text: text #FFFFFF
- Primary-Action: primary action #F9EE16
- Surface: surface #F4D602
- Surface: surface #262626

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 56 — Simple, legible type hierarchy (heading, body, input) using one consistent family; sizes aren't provided for this specific section but overall system is clean and functional with no distinctive typographic treatment. Next tier: No scale contrast, custom treatment, or expressive detail beyond basic hierarchy to push past competent.
- Composition: 58 — Clean two-column balance between text/form block and product render, generous whitespace, pill-shaped input well-proportioned against product image scale. Next tier: Layout is a standard centered-text-plus-image split with no tension, asymmetry, or layered depth that would make it memorable.
- Motion: not_assessed — No motion evidence supplied; animations array is empty and no timestamped observations exist. Next tier: Needs timestamped visible motion evidence to assess.
- Content: 55 — Product image directly supports the waitlist message (scarcity framing), and copy is concise and purposeful. Next tier: Image is a static render with no interactive or contextual tie beyond decoration; integration stays functional rather than elevated.
- Originality: 42 — This is a very conventional newsletter-signup pattern (bold color field, white pill input, arrow button) seen across countless sites; the product render adds some flavor but not enough to feel distinctive. Next tier: Needs a structural or interaction idea specific to this brand rather than a recognizable universal waitlist template.
- Adaptability: 62 — Structure is simple and deterministic (flex form, pill input, button, image), background/surface colors and type tokens are cleanly separable per design tokens provided. Next tier: Reliance on custom 3D product render limits full skin-swap reuse without replacement asset.

Strengths:
- Clear, scannable hierarchy: heading, supporting copy, and single-field form
- Confident high-contrast color blocking (yellow field, white input, black button) aids visibility
- Product render reinforces brand identity and scarcity message without extra UI clutter

Weaknesses:
- Highly generic waitlist-form pattern with no unique interaction or layout idea
- No motion evidence to assess dynamism
- Typography system is plain with no section-specific flourish

Why it does not reach the next tier: The section executes a familiar signup pattern cleanly but introduces no distinctive structural, typographic, or interactive idea that would make it feel hard to substitute; it reads as a well-made but ordinary template.

## Adaptation guidance

- Effort: Low
- Guidance: Swap background color, copy, and product image while keeping the pill input/button structure and two-column balance; no animation logic to replicate.

What transfers:
- Two-column form/image layout pattern
- Pill-shaped input and button styling convention
- Color-blocked section background approach

Dependencies:
- Custom 3D product render asset
- Specific brand color palette (yellow/black)
- Font family (Geograph) for consistent 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%)
- No motion/animation data provided for this crop
- No explicit font size/spacing values scoped to this section's text
- Single static screenshot limits judgment of interactive states (hover, focus, error)

## 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: forms
- Source type: forms
- Structure: two-column
- Layout: Two-column layout with form elements on the left and a product image on the right.
- Styles: colourful, bold, minimal
- Components: Heading, Body copy, Email input field, Submit button, Product image
- Purpose: A bright yellow section containing a simple email waitlist signup form and a small product render.
- Visual signature: A vibrant yellow banner with a stark white email input field and a matching yellow product render.
- Place on the page: 6 of 7, after Other (`playfolly-com:other-dimensioned-diagram`), before Footer (`playfolly-com:footer-photo-oversized-signoff`)

### Crop and composition

- Crop: 1440×548px; aspect ratio 2.628:1
- Page bounds: 6539–7087px of 8087px
- 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": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "30px",
      "weight": "500",
      "lineHeight": "36px",
      "letterSpacing": "normal",
      "sample": "Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l",
      "element": "p",
      "occurrences": 2,
      "sourceId": "font-3"
    },
    {
      "role": "card/subheading",
      "family": "Geograph",
      "stack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "size": "30px",
      "weight": "400",
      "lineHeight": "36px",
      "letterSpacing": "normal",
      "sample": "Playfolly is released in limited production runs. Join the list to hear when the next release opens.",
      "element": "h3",
      "occurrences": 1,
      "sourceId": "font-5"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "234px",
      "family": "Geograph",
      "source": "computed",
      "traits": "Regular",
      "weight": "700",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 234px font size with negative letter spacing used for large impactful text 'Play beautiful'.",
      "sampleId": "font-4",
      "confidence": 1,
      "lineHeight": "234px",
      "letterSpacing": "-11.7px"
    },
    {
      "role": "heading",
      "size": "60px",
      "family": "Geograph",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 60px font used for primary section headings like 'A new way to play.'.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "60px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Geograph",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 16px regular weight font used for general body copy and descriptive text.",
      "sampleId": "font-6",
      "confidence": 0.9,
      "lineHeight": "24px",
      "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": "#EDBF7A",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(237, 191, 122); AI role: Used extensively as a background color for the body and major sections.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 0, 0); AI role: Black used for primary text and button text.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White used for large display text, secondary text on dark backgrounds, and icons.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#F9EE16",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-7: computed rgb(249, 238, 22); AI role: Bright yellow used for the 'Get updates' call to action button.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#F4D602",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(244, 214, 2); AI role: Used as the background color for the 'Want one?' section.",
      "sampleId": "color-4",
      "confidence": 0.85
    },
    {
      "hex": "#262626",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(38, 38, 38); AI role: Dark gray used as background for adapter feature cards.",
      "sampleId": "color-5",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Pill-shaped (fully rounded) for buttons and inputs; large border radii for feature cards.",
  "density": "Low density with ample whitespace focusing attention on the large typography and 3D visuals.",
  "evidence": "Visual inspection of the desktop screenshots reveals rounded forms, pill buttons, wide sections, and large spacing.",
  "borderStyle": "Mostly borderless with solid background colors; some cards have subtle dark borders.",
  "buttonStyle": "Solid fill with pill shape and bold text.",
  "cornerStyle": "Rounded corners heavily utilized on buttons, feature cards, and input fields.",
  "contentWidth": "Wide layout utilizing full viewport width for backgrounds, with content centered within a max-width container.",
  "spacingRhythm": "Generous spacing with large paddings between major sections to isolate content."
}
```

### Reconstruction specification

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

- Root: 1440×548px; flex; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(244, 214, 2); radius 0px.
- Representative content widths: 616px.
- Layout containers: 2; cards/surfaces: 1; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 6539,
      "bottom": 7087,
      "pageHeight": 8087
    }
  },
  "container": {
    "size": "1440×548px",
    "position": "x 0px, y 6512px",
    "display": "flex",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(244, 214, 2)",
    "radius": "0px",
    "border": "0px solid rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      616
    ]
  },
  "columns": [
    {
      "element": "section · Want one?Playfolly is released in limited production runs. Join the list to hear when the next relea",
      "size": "1440×548px",
      "position": "x 0px, y 6512px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "form · flex flex-col items-center justify-center w-full pt-3 mb-4",
      "size": "616×100px",
      "position": "x 36px, y 6824px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "input · w-full h-22 pl-10 pr-21 bg-white drop-shadow-xl rounded-full text-2xl font-medium text-black",
      "size": "616×88px",
      "position": "x 36px, y 6836px",
      "padding": [
        "0px",
        "84px",
        "0px",
        "40px"
      ],
      "radius": "3.35544e+07px",
      "border": "0px solid rgb(0, 0, 0)",
      "shadow": "none",
      "background": "rgb(255, 255, 255)"
    }
  ],
  "surfaces": {
    "radii": [
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 596px, y 6868px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "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-1122",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 6512,
      "width": 1440,
      "height": 548
    },
    "role": null,
    "label": "Want one?Playfolly is released in limited production runs. Join the list to hear when the next relea",
    "border": "0px solid rgb(0, 0, 0)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "flex",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(244, 214, 2)"
  },
  "cards": [
    {
      "id": "ld-1132",
      "tag": "input",
      "rect": {
        "x": 36,
        "y": 6836,
        "width": 616,
        "height": 88
      },
      "role": null,
      "label": "w-full h-22 pl-10 pr-21 bg-white drop-shadow-xl rounded-full text-2xl font-medium text-black",
      "border": "0px solid rgb(0, 0, 0)",
      "radius": "3.35544e+07px",
      "shadow": "none",
      "padding": [
        "0px",
        "84px",
        "0px",
        "40px"
      ],
      "background": "rgb(255, 255, 255)"
    }
  ],
  "media": [
    {
      "id": "ld-1134",
      "tag": "svg",
      "rect": {
        "x": 596,
        "y": 6868,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 6539,
    "bottom": 7087,
    "pageHeight": 8087
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-1122",
      "gap": "normal",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 6512,
        "width": 1440,
        "height": 548
      },
      "role": null,
      "label": "Want one?Playfolly is released in limited production runs. Join the list to hear when the next relea",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-1128",
      "gap": "normal",
      "tag": "form",
      "rect": {
        "x": 36,
        "y": 6824,
        "width": 616,
        "height": 100
      },
      "role": null,
      "label": "flex flex-col items-center justify-center w-full pt-3 mb-4",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      616
    ]
  },
  "coverage": {
    "cards": 1,
    "media": 1,
    "animations": 0,
    "elementsInSection": 7
  },
  "surfaces": {
    "radii": [
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-30T21:55:03.099Z",
  "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: Two-column form/image layout pattern; Pill-shaped input and button styling convention; Color-blocked section background approach
- Dependencies: Custom 3D product render asset; Specific brand color palette (yellow/black); Font family (Geograph) for consistent voice
- Guidance: Swap background color, copy, and product image while keeping the pill input/button structure and two-column balance; no animation logic to replicate.

### 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 forms section inspired by the design evidence titled “Email waitlist form with product image”.

Purpose: A bright yellow section containing a simple email waitlist signup form and a small product render.

Structure: two-column. Source layout label: Two-column layout with form elements on the left and a product image on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: A vibrant yellow banner with a stark white email input field and a matching yellow product render.

Components: Heading, Body copy, Email input field, Submit button, Product image.

Style direction: colourful, bold, minimal.

Observed crop: 1440×548px (2.628:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"234px","family":"Geograph","source":"computed","traits":"Regular","weight":"700","evidence":"font-4: computed CSS at 1440×1000; AI role: 234px font size with negative letter spacing used for large impactful text 'Play beautiful'.","sampleId":"font-4","confidence":1,"lineHeight":"234px","letterSpacing":"-11.7px"} {"role":"heading","size":"60px","family":"Geograph","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 60px font used for primary section headings like 'A new way to play.'.","sampleId":"font-1","confidence":0.95,"lineHeight":"60px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Geograph","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 16px regular weight font used for general body copy and descriptive text.","sampleId":"font-6","confidence":0.9,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#EDBF7A","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(237, 191, 122); AI role: Used extensively as a background color for the body and major sections.","sampleId":"color-1","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Black used for primary text and button text.","sampleId":"color-2","confidence":0.9} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White used for large display text, secondary text on dark backgrounds, and icons.","sampleId":"color-3","confidence":0.9} {"hex":"#F9EE16","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(249, 238, 22); AI role: Bright yellow used for the 'Get updates' call to action button.","sampleId":"color-7","confidence":0.9} {"hex":"#F4D602","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(244, 214, 2); AI role: Used as the background color for the 'Want one?' section.","sampleId":"color-4","confidence":0.85} {"hex":"#262626","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(38, 38, 38); AI role: Dark gray used as background for adapter feature cards.","sampleId":"color-5","confidence":0.8}

Typography measured inside this section: {"id":"font-3","size":"30px","count":2,"family":"Geograph","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":690,"text":"Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l","property":"font"},{"tag":"h2","top":6640,"text":"Want one?","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"36px","letterSpacing":"normal"} {"id":"font-5","size":"30px","count":1,"family":"Geograph","traits":"Regular","weight":"400","contexts":[{"tag":"h3","top":6696,"text":"Playfolly is released in limited production runs. Join the list to hear when the next release opens.","property":"font"}],"fontStack":"Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif","lineHeight":"36px","letterSpacing":"normal"}

No section-bounded color samples were measured.

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":6512,"width":1440,"height":548},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[616]}; surfaces {"radii":["3.35544e+07px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":596,"y":6868,"width":24,"height":24},"aspectRatio":1,"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: Two-column form/image layout pattern; Pill-shaped input and button styling convention; Color-blocked section background approach.

Dependencies: Custom 3D product render asset; Specific brand color palette (yellow/black); Font family (Geograph) for consistent voice.

Adaptation guidance: Swap background color, copy, and product image while keeping the pill input/button structure and two-column balance; no animation logic to replicate.

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