# Playfolly — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://playfolly.com/
Captured: 2026-10-30
CSS measured: 2026-10-30T21:54:59.636Z at 1440×1000 — https://playfolly.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

Playfolly presents a vibrant and immersive product experience with a strong emphasis on interactive elements, 3D visualization, and bold typography. The design language combines bold colors with clean layouts to highlight the modularity and customization of the product.

## Classification

- Industry: retail
- Site type: Waitlist, Landing
- Business model: Software
- Styles: colourful, typographic, playful, bold, interactive-product-visualization
- Platform: Shopify
- Technology: Not identified

## Typography

- Display: Geograph — weight 700; size 234px; line-height 234px; tracking -11.7px; Regular (100% role confidence, computed values)
- Heading: Geograph — weight 500; size 60px; line-height 60px; tracking normal; Regular (95% role confidence, computed values)
- Body: Geograph — weight 400; size 16px; line-height 24px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #EDBF7A: color-1: computed rgb(237, 191, 122); AI role: Used extensively as a background color for the body and major sections. (95% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: Black used for primary text and button text. (90% role confidence, computed values)
- Text — text #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: White used for large display text, secondary text on dark backgrounds, and icons. (90% role confidence, computed values)
- Primary Action — primary action #F9EE16: color-7: computed rgb(249, 238, 22); AI role: Bright yellow used for the 'Get updates' call to action button. (90% role confidence, computed values)
- Surface — surface #F4D602: color-4: computed rgb(244, 214, 2); AI role: Used as the background color for the 'Want one?' section. (85% role confidence, computed values)
- Surface — surface #262626: color-5: computed rgb(38, 38, 38); AI role: Dark gray used as background for adapter feature cards. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "60px",
    "lineHeight": "60px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "h1",
        "text": "A new way to play.",
        "top": 2129,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Designed for imagination. Built for real life.",
        "top": 2189,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Take a look around.",
        "top": 3999,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "Get updates",
        "top": -80,
        "property": "font"
      },
      {
        "tag": "h4",
        "text": "Features",
        "top": 2101,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Run",
        "top": 4091,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "500",
    "size": "30px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l",
        "top": 690,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Want one?",
        "top": 6640,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "234px",
    "lineHeight": "234px",
    "letterSpacing": "-11.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Play beautiful",
        "top": 7826,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "30px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Playfolly is released in limited production runs. Join the list to hear when the next release opens.",
        "top": 6696,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "span",
        "text": "Yellow",
        "top": 890,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Blue",
        "top": 890,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Green",
        "top": 890,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Available now, with more to come — built to keep evolving.",
        "top": 4427,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "strong",
        "text": "A treehouse, without a tree.",
        "top": 2989,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Dangerously safe.",
        "top": 2989,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Match your mood. Or your moodboard.",
        "top": 2989,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Geograph",
    "fontStack": "Geograph, \"Century Gothic\", Futura, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "@myplayfolly",
        "top": 7188,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Email us",
        "top": 7188,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#EDBF7A",
    "alpha": 1,
    "cssValue": "rgb(237, 191, 122)",
    "count": 5,
    "contexts": [
      {
        "tag": "body",
        "text": "Get updatesYellowBlueGreenSandPlayfolly is what happens when architecture meets a treehouse. Modular",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Get updatesYellowBlueGreenSandPlayfolly is what happens when architecture meets a treehouse. Modular",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "The Playfolly System.One adapter, endless ways to play.Available now, with more to come — built to k",
        "top": 4163,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 21,
    "contexts": [
      {
        "tag": "button",
        "text": "Get updates",
        "top": -80,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 877,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 864,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 82,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": -77,
        "property": "svg-fill"
      },
      {
        "tag": "button",
        "text": "Yellow",
        "top": 864,
        "property": "border"
      },
      {
        "tag": "p",
        "text": "Playfolly is what happens when architecture meets a treehouse. Modular, customisable, and built to l",
        "top": 690,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F4D602",
    "alpha": 1,
    "cssValue": "rgb(244, 214, 2)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Want one?Playfolly is released in limited production runs. Join the list to hear when the next relea",
        "top": 6512,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#262626",
    "alpha": 1,
    "cssValue": "rgb(38, 38, 38)",
    "count": 25,
    "contexts": [
      {
        "tag": "div",
        "text": "Adapter. A precision-engineered aluminium connection point that allows accessories to attach and swa",
        "top": 4555,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Adapter. A precision-engineered aluminium connection point that allows accessories to attach and swa",
        "top": 4911,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Adapter. A precision-engineered aluminium connection point that allows accessories to attach and swa",
        "top": 4937,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#F9EE16",
    "alpha": 1,
    "cssValue": "rgb(249, 238, 22)",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "Get updates",
        "top": -80,
        "property": "control-background"
      },
      {
        "tag": "h4",
        "text": "Features",
        "top": 2101,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(255, 255, 255, 0.05)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 859,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#333335",
    "alpha": 1,
    "cssValue": "rgb(51, 51, 53)",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 2273,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#45528A",
    "alpha": 1,
    "cssValue": "rgb(69, 82, 138)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Blue",
        "top": 864,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#888048",
    "alpha": 1,
    "cssValue": "rgb(136, 128, 72)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Green",
        "top": 864,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FAECC2",
    "alpha": 1,
    "cssValue": "rgb(250, 236, 194)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Sand",
        "top": 864,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "rgba(255, 255, 255, 0.8)",
    "count": 10,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 878,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Yellow",
        "top": 890,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Run",
        "top": 4091,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFBB00",
    "alpha": 1,
    "cssValue": "rgb(255, 187, 0)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 871,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFBF00",
    "alpha": 1,
    "cssValue": "rgb(255, 191, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#0040FF",
    "alpha": 1,
    "cssValue": "rgb(0, 64, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#00FF40",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 64)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FF00BF",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 191)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#00FF3C",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 60)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FF00C4",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 196)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#0044FF",
    "alpha": 1,
    "cssValue": "rgb(0, 68, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#00FF44",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 68)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFC400",
    "alpha": 1,
    "cssValue": "rgb(255, 196, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#003CFF",
    "alpha": 1,
    "cssValue": "rgb(0, 60, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FF00BB",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 187)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 871,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#00FF37",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 55)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#FF00C8",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 200)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#0048FF",
    "alpha": 1,
    "cssValue": "rgb(0, 72, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#FFB700",
    "alpha": 1,
    "cssValue": "rgb(255, 183, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 871,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#FFC800",
    "alpha": 1,
    "cssValue": "rgb(255, 200, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 872,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#0037FF",
    "alpha": 1,
    "cssValue": "rgb(0, 55, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#00FF48",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 72)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#FF00B7",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 183)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 871,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#00FF33",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 51)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#FF00CC",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 204)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 873,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#FFB300",
    "alpha": 1,
    "cssValue": "rgb(255, 179, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 871,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#004DFF",
    "alpha": 1,
    "cssValue": "rgb(0, 77, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#00FF4D",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 77)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#FF00B3",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 179)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 871,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#FFCC00",
    "alpha": 1,
    "cssValue": "rgb(255, 204, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 873,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#0033FF",
    "alpha": 1,
    "cssValue": "rgb(0, 51, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#FFAE00",
    "alpha": 1,
    "cssValue": "rgb(255, 174, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 870,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#0051FF",
    "alpha": 1,
    "cssValue": "rgb(0, 81, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#00FF2F",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 47)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#FF00D0",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 208)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 873,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#00FF51",
    "alpha": 1,
    "cssValue": "rgb(0, 255, 81)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 891,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#FF00AE",
    "alpha": 1,
    "cssValue": "rgb(255, 0, 174)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 870,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#FFD000",
    "alpha": 1,
    "cssValue": "rgb(255, 208, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 873,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous spacing with large paddings between major sections to isolate content.
- Corner style: Rounded corners heavily utilized on buttons, feature cards, and input fields.
- Radius: Pill-shaped (fully rounded) for buttons and inputs; large border radii for feature cards.
- Borders: Mostly borderless with solid background colors; some cards have subtle dark borders.
- Buttons: Solid fill with pill shape and bold text.
- Content width: Wide layout utilizing full viewport width for backgrounds, with content centered within a max-width container.
- 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.

## Sections

Gallery section count: 7. Each entry corresponds to one gallery capture.

1. **Hero — Oversized wordmark over product render** (Home)
   A giant headline sits behind a single saturated product render, with colour swatches inviting interaction and a short description setting the concept immediately.
   Capture: 1440×2000px; page bounds 0–2000px of 8087px; source section ID: `25130933-3b4f-4ec5-85a0-ec96c9611411`; image: https://media.designdetails.io/library/696bf05026ccf60a729cbbb8ec110bf90ae7a1550c4b558eecff9f048cb7dd93/25130933-3b4f-4ec5-85a0-ec96c9611411.webp
   SECTION.md v3.2: `25130933-3b4f-4ec5-85a0-ec96c9611411` (deterministic evidence; editorial review pending)
2. **Features — Horizontal carousel of feature photos** (Home)
   Lifestyle photos with short captions beneath let visitors scroll through benefits, while the grey second headline line separates the promise from the details.
   Capture: 1440×1190px; page bounds 2000–3190px of 8087px; source section ID: `23789ac7-55c9-45db-9d2a-05fc5a77f907`; image: https://media.designdetails.io/library/a82adaa70b64949df21c6ac3f3a0d138111a4b06768024ad71af36eb2f65c631/23789ac7-55c9-45db-9d2a-05fc5a77f907.webp
   SECTION.md v3.2: `23789ac7-55c9-45db-9d2a-05fc5a77f907` (deterministic evidence; editorial review pending)
3. **Gallery — Full-bleed night photo slideshow** (Home)
   One large night-time photo shows the product in a real garden setting, and the small dot controls signal more images to browse.
   Capture: 1440×1000px; page bounds 3190–4190px of 8087px; source section ID: `2b690156-6f25-4a57-b22e-d9ed56504500`; image: https://media.designdetails.io/library/15fd5091470fe8d4591d45339ac32dac8410a0e7ee454131fef66aff6d573677/2b690156-6f25-4a57-b22e-d9ed56504500.webp
   SECTION.md v3.2: `2b690156-6f25-4a57-b22e-d9ed56504500` (deterministic evidence; editorial review pending)
4. **Features — Accessory cards in a carousel** (Home)
   Rounded cards pair a product image with a dark caption and a coming-soon label, so each add-on reads separately against the warm background.
   Capture: 1440×1190px; page bounds 4190–5380px of 8087px; source section ID: `f9fdad99-2fbf-4080-b8ee-b94f6335b996`; image: https://media.designdetails.io/library/f57d88191251cc3b88d51f71320efd35c0a60a1ba3636dc6db32ca7848c8a0ab/f9fdad99-2fbf-4080-b8ee-b94f6335b996.webp
   SECTION.md v3.2: `f9fdad99-2fbf-4080-b8ee-b94f6335b996` (deterministic evidence; editorial review pending)
5. **Other — Dimensioned diagram with scale figure** (Home)
   A tonal line drawing with a child for scale and measurement callouts makes the size concrete, while a short paragraph covers materials and assembly.
   Capture: 1440×1159px; page bounds 5380–6539px of 8087px; source section ID: `d7625cf8-5ab1-48f1-88ca-94711bba14d7`; image: https://media.designdetails.io/library/99667ce6c08989e8831cea9f4de5123110e4c2a1a9c6a4fdc1bfd853268c2d67/d7625cf8-5ab1-48f1-88ca-94711bba14d7.webp
   SECTION.md v3.2: `d7625cf8-5ab1-48f1-88ca-94711bba14d7` (deterministic evidence; editorial review pending)
6. **Forms — Waitlist email signup beside product** (Home)
   A single rounded email field with an arrow button on bright yellow keeps sign-up effortless, and the product image reinforces what the list is for.
   Capture: 1440×548px; page bounds 6539–7087px of 8087px; source section ID: `ac786e85-e48b-41d0-a8d1-aeb300276c2a`; image: https://media.designdetails.io/library/f5d09aa6358fd86052e94fbbaa8716f9ed5e4e1fb3cacc08fbdee1b8e97352a0/ac786e85-e48b-41d0-a8d1-aeb300276c2a.webp
   SECTION.md v3.2: `ac786e85-e48b-41d0-a8d1-aeb300276c2a` (deterministic evidence; editorial review pending)
7. **Footer — Closing photo with legal notes** (Home)
   A warm photo of children playing ends the page emotionally, with a giant closing line and small legal and contact links tucked in above.
   Capture: 1440×1000px; page bounds 7087–8087px of 8087px; source section ID: `a61e03fb-b5b9-42f3-a0c7-2823acabd8d8`; image: https://media.designdetails.io/library/25f20e5428c391621f20c4d77cd60da8fa84c44b952f2f526b99d58eaaa49d66/a61e03fb-b5b9-42f3-a0c7-2823acabd8d8.webp
   SECTION.md v3.2: `a61e03fb-b5b9-42f3-a0c7-2823acabd8d8` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/8fb701c8800f145feee571ae8b39f402360b60d0e130c931fe2056dd250ed289/desktop_full-f919c059-2026-10-30T21-54-59-652Z.webp
- Mobile screenshot: https://media.designdetails.io/library/be39fe2ef0f13ecf2b188dae88efae0e0763868cb4ce32e73985d41f536d9faa/mobile_full-f919c059-2026-10-30T21-55-30-637Z.webp
- Open Graph image: https://media.designdetails.io/library/2b1a717cc35e042ce195fcd521bf98ae1a3afe7a8428f450ee2cdfb7325af482/og_image-f919c059-2026-10-30T21-55-07-981Z.webp
- Full-page video: https://media.designdetails.io/library/f701117056c8a9dbcb15abd408ba27cbc5ad7e7329f04dc0d106aeeec2150d0b/motion-1793397546267.mp4
- Video poster: https://media.designdetails.io/library/681cf01458e20cb40f79ee2fcbbc90b754bc16c9241c08ddde54c8c4f9d145ae/motion-poster-1793397546267.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Hero
- Navigation Bar
- Primary Button
- Carousel
- Feature Card
- Newsletter Form
- Footer
- Interactive Color Picker

## Quality rubric

Overall: 58.55/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Playfolly is a well-organized, warmly colored product site that pairs an inventive physical product with a competent but conventional marketing-site execution. The scroll-tied 3D rotation and clickable color picker are genuine, purposeful interactive touches that reinforce the customization story, and the palette, photography, and technical dimension diagram are coherently matched to the brand's tone. Typography is legible and confidently scaled but monochrome in voice, relying on one oversized display cut rather than a built-out system, and the overall page structure — hero, feature-card grid, carousel, spec section, email capture, closing hero — follows a template seen widely across DTC and furniture launch sites. The result is a clean, purpose-built execution that serves the product well without introducing a structural or interaction idea distinctive enough to separate it from its genre.

- Typography (15%): 62 — A single family (Geograph) is deployed with a clear, functional size ladder from 16px body to a 234px display cut at a tight -11.7px tracking for 'Play beautiful', giving the page a confident hierarchy. However it is one weight-family doing all the work (regular/medium/bold of the same grotesque), so the system reads competent and legible rather than crafted or distinctive; there is no secondary voice, no optical sizing nuance, and the huge display line is a single dramatic gesture rather than a considered type system.
- Color (10%): 65 — The palette is warm, cohesive, and clearly tied to the physical product (tan/orange canvas, black text, bright yellow CTA/accent), with a dark section used for contrast around feature cards. The interactive color-swatch row (yellow/blue/green/sand plus a rainbow picker) extends the palette logic into functional UI, reinforcing the customization narrative rather than being decorative. It is a tasteful, restrained palette rather than an inventive color system, with fairly conventional CTA-yellow-on-black pairing.
- Layout (20%): 60 — The page moves through a coherent sequence—oversized hero, dark feature-card band, full-bleed lifestyle carousel, light system grid, dimension diagram, yellow conversion band, dark footer/closing hero—showing deliberate pacing and section-to-section contrast. Spacing is generous and content is centered within a wide container. The structure is competent and well-organized but relies on familiar product-launch layout conventions (hero + feature cards + carousel + spec diagram + email capture) without a distinctive grid idea of its own.
- Motion (20%): 56 — Two concrete, purposeful motion moments are evidenced: a scroll-tied 3D model rotation and a clickable color picker that recolors the model. Both are functionally tied to the product story (explore the object, customize its color) rather than decorative flourish, which is a positive. However the overall motion vocabulary described is thin—two moments across an 8000px page—with no evidence of refined easing, staggered reveals, or cross-section choreography beyond the carousel and scroll-rotation, and scroll-linked product rotation is a now-common pattern in product marketing sites.
- Originality (25%): 51 — The physical product concept (a modular, color-customizable treehouse-style play structure) is genuinely inventive, and the site mirrors that with a 3D configurator and color picker. But as a website design, the template—giant type hero, scroll-driven 3D product reveal, feature-card grid, spec diagram, email capture band—closely follows an established product-launch playbook seen across furniture, tech, and DTC sites. There is no structural or interaction idea here that is hard to substitute with a generic template; the novelty sits in the product, not distinctly in the site's design language.
- Content (10%): 68 — Photography (lifestyle shots of children playing, night-lit installation shots) and the dimensioned diagram are well matched to copy that foregrounds safety, modularity, and scale, and the narrative arc (hero promise → features → system → specs → purchase CTA → closing emotional image) is logically sequenced. Copy length and placement generally respect the visual rhythm rather than overcrowding sections.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A huge cropped wordmark and a single sunny yellow render fill the opening screen, giving a toy the presence of a piece of furniture. Warm tan backgrounds, rounded sans type and a dimension diagram later on keep the tone playful while still making size and build feel trustworthy.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.