# Partiful — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://partiful.com/
Captured: 2026-10-20
CSS measured: 2026-10-20T05:15:21.650Z at 1440×1000 — https://partiful.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: anthropic/claude-sonnet-5

## Design direction

Partiful employs a bold, high-contrast visual design that balances stark black-and-white layouts with bursts of colorful, playful imagery. The typography heavily features a custom display font with idiosyncratic character widths, lending an energetic, youthful vibe. Layouts alternate between deep black canvases and off-white surfaces, using generous spacing and rounded elements like pill-shaped buttons and floating cards to soften the brutalist contrast.

## Classification

- Industry: communication
- Site type: Blog, Store
- Business model: Shopping, Software
- Styles: bold, playful, minimal, photographic, high-contrast, app-centric
- Platform: Framer
- Technology: GSAP

## Typography

- Display: Partiful Janky Inter Display Regular — weight 400; size 108.8px; line-height 108.8px; tracking 2.2px; uppercase (95% role confidence, computed values)
- Heading: Partiful Janky Inter Display Regular — weight 400; size 50.1px; line-height 50.1px; tracking 1px; uppercase (95% role confidence, computed values)
- Body: TWK Lausanne Pan 300 — weight 300; size 18.1px; line-height 21.7px; tracking -0.4px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-4: computed rgb(0, 0, 0); AI role: Solid #000000 used extensively for dark mode sections, the hero, and the footer. (95% role confidence, computed values)
- Text — text #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary headings and body text on the dark canvas sections. (95% role confidence, computed values)
- Text — text #111111: color-1: computed rgb(17, 17, 17); AI role: #111111 used for text on light surfaces and inside the navigation bar. (95% role confidence, computed values)
- Surface — surface #F7F7F7: color-2: computed rgb(247, 247, 247); AI role: #F7F7F7 used as the background for light sections to slightly offset pure white content. (90% role confidence, computed values)
- Muted Text — muted text #777772: color-14: computed rgb(119, 119, 114); AI role: #777772 used for secondary descriptions and subtext to establish visual hierarchy. (85% 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": "TWK Lausanne Pan 300",
    "fontStack": "\"TWK Lausanne Pan 300\", \"TWK Lausanne Pan 300 Placeholder\", sans-serif",
    "weight": "300",
    "size": "19.2px",
    "lineHeight": "23px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "p",
        "text": "Add the details and make it yours",
        "top": 2128,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Send them a link. No app needed",
        "top": 2128,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "One place for details & updates",
        "top": 2128,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Partiful Janky Inter Display Regular",
    "fontStack": "\"Partiful Janky Inter Display Regular\", \"Partiful Janky Inter Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "50.1px",
    "lineHeight": "50.1px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "h2",
        "text": "One link. Everyone’s in.",
        "top": 1357,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "A millionreasons to hang",
        "top": 2422,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "The best events in your city",
        "top": 3438,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Partiful Janky Inter Display Regular",
    "fontStack": "\"Partiful Janky Inter Display Regular\", \"Partiful Janky Inter Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "28px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "ratings on the app store",
        "top": 10238,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "“it’s exclusively how we plan hangouts, events, and get-togethers”",
        "top": 10006,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "ratings on the app store",
        "top": 10238,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "TWK Lausanne Pan 400",
    "fontStack": "\"TWK Lausanne Pan 400\", \"TWK Lausanne Pan 400 Placeholder\", sans-serif",
    "weight": "400",
    "size": "69.6px",
    "lineHeight": "69.6px",
    "letterSpacing": "0px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "New York City",
        "top": 3607,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Los Angeles",
        "top": 3749,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "San Francisco",
        "top": 3890,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "TWK Lausanne Pan 400",
    "fontStack": "\"TWK Lausanne Pan 400\", \"TWK Lausanne Pan 400 Placeholder\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Create invites & discover events",
        "top": 563,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Get the party started",
        "top": 10758,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Partiful Janky Inter Display Regular",
    "fontStack": "\"Partiful Janky Inter Display Regular\", \"Partiful Janky Inter Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "108.8px",
    "lineHeight": "108.8px",
    "letterSpacing": "2.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Parties are back",
        "top": 330,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "TWK Lausanne Pan 300",
    "fontStack": "\"TWK Lausanne Pan 300\", \"TWK Lausanne Pan 300 Placeholder\", sans-serif",
    "weight": "300",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "p",
        "text": "Aug 2",
        "top": 10143,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "abundantcashflow",
        "top": 10143,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "\"The best events come to me via this app\"",
        "top": 10164,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "TWK Lausanne Pan 600",
    "fontStack": "\"TWK Lausanne Pan 600\", \"TWK Lausanne Pan 600 Placeholder\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Create an invite",
        "top": 64,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Log in",
        "top": 64,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Create event",
        "top": 656,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "TWK Lausanne Pan 750",
    "fontStack": "\"TWK Lausanne Pan 750\", \"TWK Lausanne Pan 750 Placeholder\", sans-serif",
    "weight": "750",
    "size": "12.8px",
    "lineHeight": "15.4px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "The absolute best",
        "top": 10122,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "I can't believe no one's made this before",
        "top": 10107,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A must",
        "top": 10114,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "TWK Lausanne Pan 300",
    "fontStack": "\"TWK Lausanne Pan 300\", \"TWK Lausanne Pan 300 Placeholder\", sans-serif",
    "weight": "300",
    "size": "18.1px",
    "lineHeight": "21.7px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Everything your guests need, all in one place.",
        "top": 1415,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No more chaotic group chats. Send one message and reach all your guests individually.",
        "top": 4854,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ask for dietary restrictions, song requests, social handles, and more.",
        "top": 5876,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Partiful Janky Inter Display Regular",
    "fontStack": "\"Partiful Janky Inter Display Regular\", \"Partiful Janky Inter Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "rated 5.0 stars",
        "top": 10080,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "On the app store",
        "top": 10200,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "rated 5.0 stars",
        "top": 10080,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "TWK Lausanne Pan 400",
    "fontStack": "\"TWK Lausanne Pan 400\", \"TWK Lausanne Pan 400 Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Invites",
        "top": 64,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Explore",
        "top": 64,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Products",
        "top": 64,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "TWK Lausanne Pan 400",
    "fontStack": "\"TWK Lausanne Pan 400\", \"TWK Lausanne Pan 400 Placeholder\", sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "23.8px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "partiful",
        "top": 5390,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Charli XCX",
        "top": 5463,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Vegetarian",
        "top": 5535,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "TWK Lausanne Pan 400",
    "fontStack": "\"TWK Lausanne Pan 400\", \"TWK Lausanne Pan 400 Placeholder\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "What is your Instagram?",
        "top": 5359,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "What should we put on the playlist?",
        "top": 5431,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Any dietary restrictions?",
        "top": 5504,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Partiful Janky Inter Display Regular",
    "fontStack": "\"Partiful Janky Inter Display Regular\", \"Partiful Janky Inter Display Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "100px",
    "lineHeight": "100px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "200k+",
        "top": 10006,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "200k+",
        "top": 10006,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "200k+",
        "top": 10006,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "TWK Lausanne Pan 300",
    "fontStack": "\"TWK Lausanne Pan 300\", \"TWK Lausanne Pan 300 Placeholder\", sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Takes 30 seconds",
        "top": 2147,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "TWK Lausanne Pan",
    "fontStack": "\"TWK Lausanne Pan\", \"TWK Lausanne Pan Placeholder\", sans-serif",
    "weight": "300",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "What is your phone number?",
        "top": 5650,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "TWK Lausanne Pan 500",
    "fontStack": "\"TWK Lausanne Pan 500\", \"TWK Lausanne Pan 500 Placeholder\", sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "div",
        "text": "“The de facto invite tool for young Americans”",
        "top": 1056,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "“The platform of choice for event planning”",
        "top": 1056,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "“Google Play Store App of the Year 2024”",
        "top": 1056,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "TWK Lausanne Pan 700",
    "fontStack": "\"TWK Lausanne Pan 700\", \"TWK Lausanne Pan 700 Placeholder\", sans-serif",
    "weight": "700",
    "size": "19.2px",
    "lineHeight": "23px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "strong",
        "text": "Company",
        "top": 11275,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Product",
        "top": 11275,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Socials",
        "top": 11275,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "TWK Lausanne Pan 700",
    "fontStack": "\"TWK Lausanne Pan 700\", \"TWK Lausanne Pan 700 Placeholder\", sans-serif",
    "weight": "700",
    "size": "28px",
    "lineHeight": "30.8px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "strong",
        "text": "Create your invite",
        "top": 2088,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Guests RSVP",
        "top": 2088,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Stay on the same page",
        "top": 2088,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", system-ui, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "21.3px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "what’s happening friday???",
        "top": 547,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "nothing yet lol",
        "top": 638,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 41,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 53,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Invites",
        "top": 64,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "One link. Everyone’s in.",
        "top": 1357,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F7F7F7",
    "alpha": 1,
    "cssValue": "rgb(247, 247, 247)",
    "count": 5,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-MXM9LZLS\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "InvitesExploreProductsFor OrganizersCompanyCreate an inviteLog inhtml.lenis,html.lenis body{height:a",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 24,
    "contexts": [
      {
        "tag": "h1",
        "text": "Parties are back",
        "top": 330,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 740,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "The best events in your citySee what's happening nearby & where your friends are goingNew York CityL",
        "top": 3294,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 72,
    "contexts": [
      {
        "tag": "p",
        "text": "Log in",
        "top": 64,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Parties are backCreate invites & discover eventsCreate eventGet the app@supports (transform: scale(c",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 533,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#30302F",
    "alpha": 1,
    "cssValue": "rgb(48, 48, 47)",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "“The de facto invite tool for young Americans”",
        "top": 1056,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "partiful",
        "top": 5390,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FDFDFD",
    "alpha": 1,
    "cssValue": "rgb(253, 253, 253)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "The absolute bestAug 2abundantcashflow\"The best events come to me via this app\"",
        "top": 9978,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "200k+",
        "top": 10006,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "I can't believe no one's made this beforeSept 3QuivilerEverything just works with no friction, and t",
        "top": 9978,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#ECECEC",
    "alpha": 1,
    "cssValue": "rgb(236, 236, 236)",
    "count": 9,
    "contexts": [
      {
        "tag": "h3",
        "text": "Create invites & discover events",
        "top": 563,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1612,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "No more chaotic group chats. Send one message and reach all your guests individually.",
        "top": 4854,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1C1C1A",
    "alpha": 1,
    "cssValue": "rgb(28, 28, 26)",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "\"The best events come to me via this app\"",
        "top": 10164,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "A mustMay 29r3boiI don’t even hang out with my friends if they don’t send me the partiful first",
        "top": 9978,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#F8F8F8",
    "alpha": 0.8,
    "cssValue": "rgba(247, 247, 247, 0.8)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "The absolute bestAug 2abundantcashflow\"The best events come to me via this app\"",
        "top": 10106,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.058823529411764705,
    "cssValue": "rgba(255, 255, 255, 0.06)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 228,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FDFDFB",
    "alpha": 1,
    "cssValue": "rgb(253, 253, 251)",
    "count": 34,
    "contexts": [
      {
        "tag": "p",
        "text": "Create an invite",
        "top": 64,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Log in",
        "top": 48,
        "property": "background"
      },
      {
        "tag": "strong",
        "text": "Company",
        "top": 11275,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FCFCFB",
    "alpha": 0.8,
    "cssValue": "rgba(253, 253, 251, 0.8)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "InvitesExploreProductsFor OrganizersCompanyCreate an inviteLog in",
        "top": 32,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.47843137254901963,
    "cssValue": "rgba(255, 255, 255, 0.48)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "“Best solution to the party-invitation problem”",
        "top": 1044,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#777772",
    "alpha": 1,
    "cssValue": "rgb(119, 119, 114)",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Add the details and make it yours",
        "top": 2128,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Sell tickets.",
        "top": 9574,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "partiful",
        "top": 5378,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#5F5F5B",
    "alpha": 1,
    "cssValue": "rgb(95, 95, 91)",
    "count": 24,
    "contexts": [
      {
        "tag": "p",
        "text": "What is your Instagram?",
        "top": 5359,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#E9E9EB",
    "alpha": 1,
    "cssValue": "rgb(233, 233, 235)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 533,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(255, 255, 255, 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5255,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#4B4B49",
    "alpha": 1,
    "cssValue": "rgb(75, 75, 73)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Your social life will thank you",
        "top": 10933,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#595959",
    "alpha": 1,
    "cssValue": "rgb(89, 89, 89)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Everything your guests need, all in one place.",
        "top": 1415,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 10338,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#93938F",
    "alpha": 1,
    "cssValue": "rgb(147, 147, 143)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Takes 30 seconds",
        "top": 2147,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#000000",
    "alpha": 0.6,
    "cssValue": "rgba(0, 0, 0, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "What is your phone number?",
        "top": 5650,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#8E8E93",
    "alpha": 1,
    "cssValue": "rgb(142, 142, 147)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 554,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#AFAFAA",
    "alpha": 0.2,
    "cssValue": "rgba(175, 175, 171, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1207,
        "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 vertical rhythm with distinct, screen-height sections. Substantial padding around text blocks to isolate messaging.
- Corner style: Fully rounded (pill) shapes for navigation containers and buttons. Moderate border-radii for device frames and floating cards.
- Radius: Mixed: 999px for pills, ~16px-24px for app frames and feature cards.
- Borders: Minimal visible borders; sections and elements are separated by stark color contrast (black vs. white/gray) or shadows in floating elements.
- Buttons: Solid fill (often high-contrast inversion of the background), pill-shaped, containing sans-serif text with standard padding.
- Content width: Content is generally centered in a constrained column, while decorative imagery stretches edge-to-edge.
- Density: Low density. Each viewport primarily focuses on a single large headline, a device mockup, or a specific interactive element.
- Evidence: Observed via the pill-shaped navigation, large padding around headings, strict black/white background switching, and centered layout structure.

## Sections

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

1. **Hero — Parties Are Back Hero** (Home)
   AI suggestion (98% confidence): Complete opening hero with integrated navigation, bold value proposition, dual CTAs, and a distinctive social party visual.
   Capture: 1440×951px; page bounds 0–951px of 8505px; source section ID: `e01a1c64-ee73-4586-8915-645203cc67c5`; image: https://media.designdetails.io/library/016f65fd30cb9261c50440a8020fe6adb95815ecb896ff7a1615521d47c58f54/e01a1c64-ee73-4586-8915-645203cc67c5.webp
   SECTION.md v3.2: `e01a1c64-ee73-4586-8915-645203cc67c5` (deterministic evidence; editorial review pending)
2. **Footer — Partiful Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Partiful Footer”.
   Capture: 1440×1000px; page bounds 7505–8505px of 8505px; source section ID: `1129d1c9-18ae-4527-b3d6-c66475c478e5`; image: https://media.designdetails.io/library/b60398666bedb1560f724767154fa89e6d40a082d270f1f1d3c371985235ea71/section_crop-1129d1c9-2026-10-20T05-15-30-669Z.webp
   SECTION.md v3.2: `1129d1c9-18ae-4527-b3d6-c66475c478e5` (deterministic evidence; editorial review pending)
3. **Feature Grid — One Link, Everyone’s In** (Home)
   AI suggestion (97% confidence): Complete three-step product feature grid showing invite creation, guest RSVP, and shared updates, capped by a clear conversion CTA.
   Capture: 1440×897px; page bounds 1335–2232px of 8505px; source section ID: `3aba0641-3205-42f6-80b2-38c7903829ec`; image: https://media.designdetails.io/library/99ac2b1d6c0344ad1d50a2ca6619d0c0d43373fa03c4a77c753beaa6569390bf/3aba0641-3205-42f6-80b2-38c7903829ec.webp
   SECTION.md v3.2: `3aba0641-3205-42f6-80b2-38c7903829ec` (deterministic evidence; editorial review pending)
4. **Other — Events by City Directory** (Home)
   AI-proposed category: location-directory
AI suggestion (93% confidence): Complete event-discovery section with its own heading, explanatory subtitle, and prominent city-based navigation list.
   Capture: 1440×1104px; page bounds 3296–4400px of 8505px; source section ID: `b6d7e20c-25b9-4bff-8e37-6ec92ec31e59`; image: https://media.designdetails.io/library/c75cff24006698e059f99ace34fed534eada1750a6c1f0d230b5947b5e5e18e1/b6d7e20c-25b9-4bff-8e37-6ec92ec31e59.webp
   SECTION.md v3.2: `b6d7e20c-25b9-4bff-8e37-6ec92ec31e59` (deterministic evidence; editorial review pending)
5. **Features — Text Blast Your Guests** (Home)
   AI suggestion (98% confidence): Self-contained product feature showcase combining a bold headline, centered phone UI, concise benefit copy, and event-creation CTA.
   Capture: 1440×1005px; page bounds 4406–5411px of 8505px; source section ID: `e1bbeabd-2d35-4a53-84bf-2ff711c74671`; image: https://media.designdetails.io/library/f6fe89694a68566090d4be615d0a972d0cc65b1b54701b835c16a1374752759a/e1bbeabd-2d35-4a53-84bf-2ff711c74671.webp
   SECTION.md v3.2: `e1bbeabd-2d35-4a53-84bf-2ff711c74671` (deterministic evidence; editorial review pending)
6. **Feature Grid — More Than an Invite** (Home)
   AI suggestion (98% confidence): Complete four-item product-benefit grid with its own heading, supporting copy, organizer link, and app CTA.
   Capture: 1440×693px; page bounds 5413–6106px of 8505px; source section ID: `c61a7a9b-c52e-455f-bfbb-340b3adb67cd`; image: https://media.designdetails.io/library/13e6de5130231b3a937d50f1e8a34fe0aa771a555e1dc5cad49f4f2559b75331/c61a7a9b-c52e-455f-bfbb-340b3adb67cd.webp
   SECTION.md v3.2: `c61a7a9b-c52e-455f-bfbb-340b3adb67cd` (deterministic evidence; editorial review pending)
7. **Testimonials — Social Life Runs on Partiful** (Home)
   AI suggestion (97% confidence): Self-contained social-proof carousel combining customer review imagery, a five-star App Store rating, and a prominent ratings count.
   Capture: 1440×717px; page bounds 6205–6922px of 8505px; source section ID: `e6b3a953-9b67-4908-98f4-0ad4acd43e16`; image: https://media.designdetails.io/library/2e2fd5bb61598a907bc48ee04b2342435422129db393dcc21bed029f002b6345/e6b3a953-9b67-4908-98f4-0ad4acd43e16.webp
   SECTION.md v3.2: `e6b3a953-9b67-4908-98f4-0ad4acd43e16` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/2c30f8472c43af9a132da4284229565c8485460abbbe72c9e986515b9c71e7f2/desktop_full-b2ce2846-2026-10-20T05-15-21-670Z.webp
- Mobile screenshot: https://media.designdetails.io/library/7ea853a929822797bed529041af2b303168b5f4b8a68bb3da614f877716f8f00/mobile_full-b2ce2846-2026-10-20T05-16-02-475Z.webp
- Open Graph image: https://media.designdetails.io/library/8dddc5884cc68d902dbe3b2e488626632c8aad53924a876837903291aa94353b/og_image-b2ce2846-2026-10-20T05-15-28-981Z.webp
- Full-page video: https://media.designdetails.io/library/5b1406db80b1c0f202466057756c63fb48d663f55759def621d057bdbb05e42d/motion-1792473850392.mp4
- Video poster: https://media.designdetails.io/library/47513ef2c0b987b359459bbf85fa8fae12b3b9d73b04976b8243afcdc77e770c/motion-poster-1792473850392.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

- Navigation Bar
- Hero
- Product UI
- Floating Product Card
- Testimonial Card
- Primary Button
- Footer
- Scroll Linked Device Mockup
- Floating Image Spiral
- Oversized Footer Logo

## Quality rubric

Overall: 61.6/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Partiful's marketing site is a well-executed example of the current consumer-app scrollytelling template: a distinctive janky display font, disciplined black/white staging, and a genuine multi-section scroll-motion system (fanned cards, phone-frame content swaps, a rotating image spiral) demonstrate real craft and coherence. But the underlying structure and most individual components closely mirror an increasingly standard genre pattern, so despite good typography, color discipline, and content integration, the site lacks enough distinctive, hard-to-substitute ideas to clear the bar for 'strong' or higher.

- Typography (15%): 65 — A genuine type system is present: a custom idiosyncratic display face ('Partiful Janky Inter Display') is used consistently across hero, section headers, and stat callouts (108.8px, 50.1px, 28px, 100px, 20px, all uppercase with tracking), paired with a separate humanist sans (TWK Lausanne Pan) deployed across multiple weights (300/400/500/600/700/750) for body copy, nav, buttons, and testimonial metadata. The hierarchy is legible and purposeful, and the janky display face gives the brand a distinct, youthful voice rather than defaulting to a generic grotesk. It falls short of exceptional because the system, while consistent, relies on a single quirky font choice to carry most of the personality, and body text sizing/leading is fairly conventional.
- Color (10%): 60 — The palette is disciplined: true black (#000000) and near-whites (#F7F7F7, #FDFDFD) alternate as canvas colors, with a narrow band of warm grays (#777772, #5F5F5B, #30302F) for secondary text, letting saturated color live only in user-generated event covers and photography. This is a sound restraint strategy that avoids competing with content, but the brand's own palette is essentially monochrome and doesn't demonstrate a distinctive chromatic point of view beyond the black/white toggle, which is a common pattern for consumer-app marketing sites.
- Layout (20%): 64 — The page is organized into clear, alternating dark/light full-viewport sections with a centered content column against edge-to-edge decorative imagery, generous vertical rhythm, and recurring motifs (pill nav, pill buttons, device frames, floating rotated cards). The fanned/staggered card arrangement and the spiral of images around the footer CTA show above-average compositional ambition. However, the overall macro-structure (hero → social proof → feature sections → testimonial wall → giant footer logo) follows a now-common startup landing-page template, and density/placement choices inside each section are conventional rather than surprising.
- Motion (20%): 66 — Multiple distinct scroll-linked effects are documented: horizontal translation of a staggered cover-image row, content swapping inside a sticky phone frame to simulate app navigation, fade/slide-out of feature text, and a rotating spiral of thumbnail images converging on a CTA. This is a genuine scroll-driven motion system spanning several sections rather than a single hero gimmick, which supports a 'good' placement. It cannot be scored higher because the evidence doesn't substantiate easing quality, frame smoothness, or any non-scroll interaction (hover/focus) design.
- Originality (25%): 53 — The custom janky display font and the image-spiral-around-CTA are the most substitutable-resistant ideas here, giving the site a bit of distinct personality. However, the overall recipe—big bold sans headline, sticky scroll-linked phone mockups cycling through app screens, fanned/staggered content cards, a testimonial wall, and an oversized wordmark filling the footer—closely matches an increasingly standard template used across consumer and SaaS product marketing sites. Little here would be hard for a competitor to reproduce with a different brand's assets; the device-mockup scrollytelling and giant-footer-logo patterns in particular are widespread conventions rather than site-specific inventions.
- Content (10%): 66 — Content integration is handled well: real event-cover artwork, authentic-looking app screenshots, and specific testimonial quotes with named users and dates are woven directly into the visual system rather than treated as generic filler, and the copy (e.g., 'Text blast your guests', 'One link. Everyone's in.') is tightly paired with the adjacent visual demonstration. This produces a reasonably cohesive narrative from hero through feature sections to social proof.

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
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Chunky bold headlines over black panels give the party theme energy, while a real phone screenshot with overlapping chat bubbles shows the invite flow in action rather than just describing it. Neon, glitter-foil invite thumbnails fanned out like a stack of cards, plus a closing ring of colourful invites, keep the long scroll playful and visually varied.

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