# Dimensioned diagram beside specs text

Schema: Design Details SECTION.md v3.2
Website: Playfolly
Source: https://playfolly.com/
Source section IDs: d7625cf8-5ab1-48f1-88ca-94711bba14d7
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The two-column split gives the text and the drawing clear roles: short copy on the left, a large diagram on the right.
- The dimension callouts and scale figure turn abstract measurements into something a visitor can picture, so the drawing supports the copy.
- Thin black linework on a flat warm canvas keeps the section quiet and legible, and the bold heading sets a clear hierarchy over the small body copy.

What a screenshot can't show:
- The recording showed no motion and no hover behaviour, so the section appears static.
- No font sizes or gaps were measured. The content blocks are about 684px and 556px wide, and the section has 45px of bottom padding.

Borrow: Pair a precise, annotated drawing with brief copy, and add a human-scale figure so the numbers feel real.
Leave alone: Don't copy the pale orange canvas, the bold condensed heading style or the product's specific line drawing; use your own palette, a free condensed sans such as Barlow Condensed, and your own illustration.

## Classification

- Type: other
- Layout: Two-column layout with text on the left and a large technical diagram on the right.
- Styles: illustrative, minimal, geometric
- Confidence: 95%

## Purpose and structure

A technical specification section featuring a dimensioned line drawing of the product next to explanatory text.

Visual signature: A clean, architectural line drawing with dimension callouts on a pale orange background.

## Components

- Section heading
- Specification text
- Dimensioned line drawing
- Scale figure silhouette

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

- Typography: 62 — Bold condensed display headline with clear weight contrast against smaller body copy; legible hierarchy, but a fairly standard two-size stack with no distinctive type craft beyond the heading weight. Next tier: Typography relies on a single strong heading contrast; no secondary typographic devices (e.g., varied tracking, numeral styling distinct from body) elevate it further.
- Composition: 68 — Clean two-column split with generous whitespace, diagram dominating the right with dimension callouts aligned to a consistent grid against the figure silhouette for scale; layout reads clearly and purposefully. Next tier: Composition is a straightforward left-text/right-image split without any unexpected spatial tension or layering that would push it into memorable territory.
- Motion: not_assessed — No motion data supplied; animations array is empty and no timestamped visible changes were provided. Next tier: Needs timestamped evidence of any reveal, callout animation, or diagram build-in to assess.
- Content: 66 — Technical dimension diagram directly supports and is tightly integrated with the specs copy, with the scale figure grounding abstract measurements in real-world terms. Next tier: Content integration is functional and clear but conventional for a product-spec page; no unique data visualization choice beyond standard dimension-line conventions.
- Originality: 58 — Dimensioned line-drawing with callouts and scale figure is a known pattern from furniture/product spec sheets; competently executed but not a novel treatment. Next tier: Needs a distinctive visual idea beyond the standard architectural-dimension-diagram convention to be memorable.
- Adaptability: 60 — Clear separable structure: heading, two paragraphs, and a single diagram image occupy a simple two-column rect layout with no complex interactions, decomposable with the given DOM facts. Next tier: Diagram is a flattened raster image rather than componentized dimension elements, so structural adaptation beyond swapping the image is limited by the deterministic evidence.

Strengths:
- Clear dimension callouts with a human scale figure make abstract measurements tangible
- Clean two-column hierarchy separating narrative text from technical diagram
- Consistent flat illustration style against a calm single-color background lets the drawing read without competing visual noise

Weaknesses:
- Motion cannot be assessed due to lack of timestamped evidence
- Diagram and callout style follow a common product-spec convention without a distinguishing visual twist
- Typography hierarchy is functional but limited to one strong display/body contrast

Why it does not reach the next tier: The section executes a familiar technical-diagram-beside-text pattern competently and legibly, but nothing here — layout, typography, or diagram treatment — introduces an idea or detail that would be hard to substitute with a generic product spec page.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the left-copy/right-diagram grid and callout label styling for any technical spec section; swap in a new illustrated diagram and scale figure sized to the new product while keeping label placement conventions.

What transfers:
- Two-column text/diagram layout structure
- Dimension-callout labeling convention with scale figure
- Heading plus two-paragraph copy block pattern

Dependencies:
- The specific flat-illustration line-drawing asset of the product
- Pale canvas background color as context for the diagram's contrast

## 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/timestamp data provided so animation behavior is unknown
- Only one viewport (desktop 1440px) captured, so responsive adaptation is unverified
- Diagram is a static raster image, limiting insight into underlying vector/data structure

## 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: other
- Source type: other
- Structure: two-column
- Layout: Two-column layout with text on the left and a large technical diagram on the right.
- Styles: illustrative, minimal, geometric
- Components: Section heading, Specification text, Dimensioned line drawing, Scale figure silhouette
- Purpose: A technical specification section featuring a dimensioned line drawing of the product next to explanatory text.
- Visual signature: A clean, architectural line drawing with dimension callouts on a pale orange background.
- Place on the page: 5 of 7, after Feature collection (`playfolly-com:features-accessory-cards`), before Form (`playfolly-com:forms-email-waitlist`)

### Crop and composition

- Crop: 1440×1159px; aspect ratio 1.242:1
- Page bounds: 5380–6539px 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": [],
  "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": [
    {
      "value": "#F4D602",
      "cssValue": "rgb(244, 214, 2)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-4"
    }
  ],
  "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×1159px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"45px"}; gap normal; background rgb(237, 191, 122); radius 0px.
- Representative content widths: 684, 556px.
- Layout containers: 0; cards/surfaces: 0; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 5380,
      "bottom": 6539,
      "pageHeight": 8087
    }
  },
  "container": {
    "size": "1440×1159px",
    "position": "x 0px, y 5353px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "45px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(237, 191, 122)",
    "radius": "0px",
    "border": "0px solid rgb(0, 0, 0)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      684,
      556
    ]
  },
  "columns": []
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "684×906px",
    "position": "x 720px, y 5481px",
    "aspectRatio": 0.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://playfolly.com/cdn/shop/files/info_1fa6d5c2-76f1-4f3c-8412-c1a35b2673da.png?v=1772398453&width=1600"
  }
]
```

#### 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-1103",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 5353,
      "width": 1440,
      "height": 1159
    },
    "role": null,
    "label": "Big enough for adventure.Small enough for real gardens.At over 2.4m high, Playfolly is tall and slen",
    "border": "0px solid rgb(0, 0, 0)",
    "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": "45px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(237, 191, 122)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-1116",
      "tag": "img",
      "rect": {
        "x": 720,
        "y": 5481,
        "width": 684,
        "height": 906
      },
      "role": null,
      "label": "img",
      "media": {
        "alt": "Big enough for adventure.",
        "src": "https://playfolly.com/cdn/shop/files/info_1fa6d5c2-76f1-4f3c-8412-c1a35b2673da.png?v=1772398453&width=1600",
        "naturalWidth": 821,
        "naturalHeight": 1088
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 5380,
    "bottom": 6539,
    "pageHeight": 8087
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      684,
      556
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 1,
    "animations": 0,
    "elementsInSection": 6
  },
  "surfaces": {
    "radii": [],
    "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 text/diagram layout structure; Dimension-callout labeling convention with scale figure; Heading plus two-paragraph copy block pattern
- Dependencies: The specific flat-illustration line-drawing asset of the product; Pale canvas background color as context for the diagram's contrast
- Guidance: Reuse the left-copy/right-diagram grid and callout label styling for any technical spec section; swap in a new illustrated diagram and scale figure sized to the new product while keeping label placement conventions.

### 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 other section inspired by the design evidence titled “Dimensioned diagram beside specs text”.

Purpose: A technical specification section featuring a dimensioned line drawing of the product next to explanatory text.

Structure: two-column. Source layout label: Two-column layout with text on the left and a large technical diagram 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 clean, architectural line drawing with dimension callouts on a pale orange background.

Components: Section heading, Specification text, Dimensioned line drawing, Scale figure silhouette.

Style direction: illustrative, minimal, geometric.

Observed crop: 1440×1159px (1.242: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}

No section-bounded typography samples were measured.

Colors measured inside this section: {"id":"color-4","hex":"#F4D602","alpha":1,"count":1,"contexts":[{"tag":"section","top":6512,"text":"Want one?Playfolly is released in limited production runs. Join the list to hear when the next relea","property":"background"}],"cssValue":"rgb(244, 214, 2)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5353,"width":1440,"height":1159},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"45px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[684,556]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":720,"y":5481,"width":684,"height":906},"aspectRatio":0.8,"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 text/diagram layout structure; Dimension-callout labeling convention with scale figure; Heading plus two-paragraph copy block pattern.

Dependencies: The specific flat-illustration line-drawing asset of the product; Pale canvas background color as context for the diagram's contrast.

Adaptation guidance: Reuse the left-copy/right-diagram grid and callout label styling for any technical spec section; swap in a new illustrated diagram and scale figure sized to the new product while keeping label placement conventions.

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