# Grail — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://grail-app.com/
Captured: 2026-10-31
CSS measured: 2026-10-31T06:29:34.948Z at 1440×1000 — https://grail-app.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

The site employs a striking, immersive editorial design language characterized by oversized serif typography and a predominantly dark theme. It blends high-end editorial aesthetics with gamified, playful elements such as 3D-rendered character totems and colorful, abstract guild shields. Layouts are spacious and cinematic, utilizing dramatic scale contrasts between the massive display headings and the clean sans-serif body text. Photographic elements are presented realistically to ground the app's 'real life' premise.

## Classification

- Industry: other
- Site type: Waitlist
- Business model: Software
- Styles: editorial, minimal, playful, photographic, cinematic-3d
- Platform: Custom code
- Technology: Three.js

## Typography

- Display: PP Pangaia — weight 300; size 208px; line-height 183px; tracking -1px; uppercase (95% role confidence, computed values)
- Heading: PP Pangaia — weight 300; size 92px; line-height 81px; tracking -0.9px; uppercase (90% role confidence, computed values)
- Body: Switzer — weight 400; size 16px; line-height 19.8px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-2: computed rgb(0, 0, 0); AI role: Pure black (#000000) used as the primary background for the majority of the site. (95% role confidence, computed values)
- Text — text #FFFFFF: color-4: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary typography on dark backgrounds. (95% role confidence, computed values)
- Primary Action — primary action #FFCDFF: color-15: computed rgb(255, 205, 255); AI role: Distinct pink (#FFCDFF) used for the 'Join Waitlist' primary call-to-action buttons. (90% role confidence, computed values)
- Surface — surface #F6F6F6: color-1: computed rgb(246, 246, 246); AI role: Light gray (#F6F6F6) used as the background color for specific alternating sections to create contrast. (85% role confidence, computed values)
- Muted Text — muted text #B8B8B8: color-10: computed rgb(184, 184, 184); AI role: Light gray (#B8B8B8) used for secondary text and subtle labels. (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": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Everyone's out living. You're watching them do it on a screen.",
        "top": 1500,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Quest accepted. Clock's running.",
        "top": 3999,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, serif",
    "weight": "300",
    "size": "27px",
    "lineHeight": "26.5px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "What was that like?",
        "top": 4770,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Get in early",
        "top": 10752,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 37,
    "contexts": [
      {
        "tag": "span",
        "text": "About Problem",
        "top": 1025,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Chapter 01",
        "top": 1025,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "About Journey",
        "top": 4061,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Now there’s a clock on it. Forty-eight hours to go do the thing, because “later” is how every one of",
        "top": 4031,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Not 24, since a day is too easy to lose to work or weather or a bad mood. Two days gives you room to",
        "top": 4052,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "01",
        "top": 4461,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Not 24, since a day is too easy to lose to work or weather or a bad mood. Two days gives you room to",
        "top": 820,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No promises. Just what tends to happen when you show up.",
        "top": 4263,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "A chance",
        "top": 4366,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "20.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Now there’s a clock on it. Forty-eight hours to go do the thing, because “later” is how every one of",
        "top": 820,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "To end up at someone’s table.",
        "top": 4385,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "To be the only one out there.",
        "top": 4526,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "700",
    "size": "18px",
    "lineHeight": "20.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Took an oath nobody asked for. Honor in full armor, waddling in anyway.",
        "top": 6830,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Stop",
        "top": 11046,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "meaning",
        "top": 11046,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Leave a voice for yourself and for others",
        "top": 4831,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "You can make it longer, right?",
        "top": 4998,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Easy",
        "top": 5024,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "20.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "One real-world quest a day. Four stats that go up when you do things out in the world.",
        "top": 30,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 69,
    "contexts": [
      {
        "tag": "span",
        "text": "About Guilds",
        "top": 10488,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Chapter 07",
        "top": 10622,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get",
        "top": 10778,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, \"Times New Roman\", serif, Georgia, serif",
    "weight": "300",
    "size": "145.2px",
    "lineHeight": "127.8px",
    "letterSpacing": "-1.5px",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "R",
        "top": 138,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "e",
        "top": 138,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "c",
        "top": 138,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, serif",
    "weight": "300",
    "size": "92px",
    "lineHeight": "81px",
    "letterSpacing": "-0.9px",
    "traits": "uppercase",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "Every quest",
        "top": 9181,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "lands somewhere.",
        "top": 9264,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Y",
        "top": 11335,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, serif",
    "weight": "300",
    "size": "72px",
    "lineHeight": "63.4px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Six",
        "top": 7611,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "totems.",
        "top": 7611,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "One's",
        "top": 7675,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "700",
    "size": "24px",
    "lineHeight": "25.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "36",
        "top": 9568,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "32",
        "top": 9568,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "24",
        "top": 9568,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "li",
        "text": "Charisma, from The Wind Shifters.",
        "top": 9027,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Strength, from The Temperers of Steel.",
        "top": 9045,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "Wisdom, from The Keepers of Time.",
        "top": 9063,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Charisma",
        "top": 9546,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Strength",
        "top": 9546,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Wisdom",
        "top": 9546,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, serif",
    "weight": "300",
    "size": "208px",
    "lineHeight": "183px",
    "letterSpacing": "-1px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Duck",
        "top": 7076,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "The",
        "top": 7246,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Knight",
        "top": 7246,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, serif",
    "weight": "300",
    "size": "104px",
    "lineHeight": "91.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "(",
        "top": 6830,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1",
        "top": 6830,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ")",
        "top": 6830,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "PP Pangaia",
    "fontStack": "\"PP Pangaia\", Georgia, \"Times New Roman\", serif, Georgia, serif",
    "weight": "300",
    "size": "89.3px",
    "lineHeight": "78.6px",
    "letterSpacing": "-0.9px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "quest.",
        "top": 4199,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "19.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Join Waitlist",
        "top": 941,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": null,
    "fontStack": "-apple-system, \"system-ui\", \"SF Pro Display\", system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "Duck",
        "top": 7660,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Cat",
        "top": 7660,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Bear",
        "top": 7660,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Switzer",
    "fontStack": "Switzer, -apple-system, \"SF Pro Display\", system-ui, sans-serif",
    "weight": "600",
    "size": "15px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Join Waitlist",
        "top": 30,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F6F6F6",
    "alpha": 1,
    "cssValue": "rgb(246, 246, 246)",
    "count": 3,
    "contexts": [
      {
        "tag": "section",
        "text": "About JourneyChapter 03It starts as one quest.It rarely stays that way.No promises. Just what tends ",
        "top": 4037,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 11257,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 16,
    "contexts": [
      {
        "tag": "body",
        "text": "47:59:32One real-world quest a day. Four stats that go up when you do things out in the world.Join W",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "47:59:32One real-world quest a day. Four stats that go up when you do things out in the world.Join W",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "About Journey",
        "top": 4061,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.1)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "A chanceTo end up at someone’s table.01You went out to do one small thing. Six hours later you’re so",
        "top": 4327,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 57,
    "contexts": [
      {
        "tag": "span",
        "text": "R",
        "top": 138,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Everyone's out living. You're watching them do it on a screen.",
        "top": 1500,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Now there’s a clock on it. Forty-eight hours to go do the thing, because “later” is how every one of",
        "top": 4031,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.6,
    "cssValue": "rgba(0, 0, 0, 0.6)",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "No promises. Just what tends to happen when you show up.",
        "top": 4263,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#161616",
    "alpha": 1,
    "cssValue": "rgb(22, 22, 22)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "What was that like?Leave a voice for yourself and for othersYou can make it longer, right?EasyMedium",
        "top": 4724,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#623562",
    "alpha": 1,
    "cssValue": "rgb(98, 53, 98)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Now there’s a clock on it. Forty-eight hours to go do the thing, because “later” is how every one of",
        "top": 820,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.4,
    "cssValue": "rgba(255, 255, 255, 0.4)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4737,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Y",
        "top": 11335,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(255, 255, 255, 0.5)",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "You pick one when you start. It levels up as you do, and it's the face you wear the whole way. Pick ",
        "top": 7583,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Charisma",
        "top": 9546,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 11448,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#B8B8B8",
    "alpha": 1,
    "cssValue": "rgb(184, 184, 184)",
    "count": 33,
    "contexts": [
      {
        "tag": "span",
        "text": "We're",
        "top": 11076,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.7215686274509804,
    "cssValue": "rgba(255, 255, 255, 0.72)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "One real-world quest a day. Four stats that go up when you do things out in the world.",
        "top": 30,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 62,
    "contexts": [
      {
        "tag": "h2",
        "text": "Get in early",
        "top": 10752,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Get",
        "top": 10778,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.12941176470588237,
    "cssValue": "rgba(255, 255, 255, 0.13)",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "Cat",
        "top": 7660,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.5490196078431373,
    "cssValue": "rgba(255, 255, 255, 0.55)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Leave a voice for yourself and for others",
        "top": 4831,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFCDFF",
    "alpha": 1,
    "cssValue": "rgb(255, 205, 255)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "Duck",
        "top": 7660,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 951,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Join Waitlist",
        "top": 941,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Easy",
        "top": 5024,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Easy",
        "top": 5024,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(255, 255, 255, 0.14)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Join Waitlist",
        "top": 941,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#1A1018",
    "alpha": 1,
    "cssValue": "rgb(26, 16, 24)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Join Waitlist",
        "top": 30,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#ECD2F3",
    "alpha": 1,
    "cssValue": "rgb(236, 210, 243)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Join Waitlist",
        "top": 30,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#221826",
    "alpha": 1,
    "cssValue": "rgb(34, 24, 38)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 10907,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#3A3A3A",
    "alpha": 1,
    "cssValue": "rgb(58, 58, 58)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4915,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#E9E9E9",
    "alpha": 1,
    "cssValue": "rgb(233, 233, 233)",
    "count": 3,
    "contexts": [
      {
        "tag": "rect",
        "text": "",
        "top": 4924,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4930,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(255, 255, 255, 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4752,
        "property": "background"
      }
    ]
  }
]
```

### 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 spacing between sections, often utilizing large viewport-relative gaps to isolate typography and imagery for maximum impact. Padding is substantial, keeping content centered and legible.
- Corner style: Fully rounded (pill-shaped) corners for buttons and selectors, contrasting with slightly rounded corners on app UI cards.
- Radius: Buttons appear to use maximum border-radius for a pill effect; app UI cards use standard medium radii (approx. 12-16px).
- Borders: Borders are largely absent, relying on stark color contrasts (black vs white vs colorful renders), except for subtle horizontal dividers and text inputs.
- Buttons: Pill-shaped, typically utilizing a solid distinct color (like pink) or a subtle translucent white overlay against the dark background, containing bold sans-serif text.
- Content width: Content generally adheres to a centered maximum width for readability, but large typographic elements and 3D renders are allowed to span edge-to-edge or overflow standard containers.
- Density: Very low density. The design prioritizes vast empty space to emphasize large-scale typography and immersive 3D/photographic visuals over packing information tightly.
- Evidence: Observed from the spacious layout, massive 208px typography, pill-shaped waitlist buttons, and full-width cinematic 3D renders in the provided viewport screenshots.

## Sections

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

1. **Navbar — Grail Navbar** (Home)
   A minimal dark bar keeps the logo, one-line pitch and a single pastel button visible without competing with the content below.
   Capture: 1440×104px; page bounds 0–104px of 10203px; source section ID: `665bbda2-8821-4894-8839-689614281e8c`; image: https://media.designdetails.io/library/c65f843bd0e419d52fd3a963c7d242e8d1a7449730d7c11bc01ee56a15e9f1b5/665bbda2-8821-4894-8839-689614281e8c.webp
   SECTION.md v3.2: `665bbda2-8821-4894-8839-689614281e8c` (deterministic evidence; editorial review pending)
2. **Hero — Giant serif headline over floating quest cards** (Home)
   Oversized serif type over tilted, colourful quest cards on black sets the tone and shows the product idea immediately.
   Capture: 1440×896px; page bounds 104–1000px of 10203px; source section ID: `37a58475-684c-4cfb-8abb-a1f2b87ada6c`; image: https://media.designdetails.io/library/88803bf4df6d7555114afbb381a96263cbc97cc830914a6e990d48c96bdc054b/37a58475-684c-4cfb-8abb-a1f2b87ada6c.webp
   SECTION.md v3.2: `37a58475-684c-4cfb-8abb-a1f2b87ada6c` (deterministic evidence; editorial review pending)
3. **Other — Large problem statement with short paragraph** (Home)
   A huge staggered serif statement with a small body paragraph beneath creates a strong hierarchy and lets the problem land before anything else.
   Capture: 1440×1000px; page bounds 1000–2000px of 10203px; source section ID: `c64ac2f7-eb2f-4885-9dcc-f9970758f439`; image: https://media.designdetails.io/library/ac2243766d36eb56fcee90fad38d6f33d80c2dbcd7b5006001aadefd6847aa1d/c64ac2f7-eb2f-4885-9dcc-f9970758f439.webp
   SECTION.md v3.2: `c64ac2f7-eb2f-4885-9dcc-f9970758f439` (deterministic evidence; editorial review pending)
4. **Dashboard — Quest card rising into phone screen** (Home)
   A single white card on black transitions into a pink phone mockup, tying the product interface to the message through scroll.
   Capture: 1440×1000px; page bounds 2000–3000px of 10203px; source section ID: `492eccb3-fc40-4464-9da9-86663e33c85f`; image: https://media.designdetails.io/library/7905fb0c4adf9e018657bfd501022fa6a114648461ff84d72e50a7caf6e229fb/492eccb3-fc40-4464-9da9-86663e33c85f.webp
   SECTION.md v3.2: `492eccb3-fc40-4464-9da9-86663e33c85f` (deterministic evidence; editorial review pending)
5. **Features — Phone mockup with countdown and notes** (Home)
   A faint giant countdown behind the phone, with two small text columns beside it, explains the time-limit idea through the visual itself.
   Capture: 1440×1000px; page bounds 3000–4000px of 10203px; source section ID: `2c5e1e37-a350-4d29-be5d-f235e85b43f8`; image: https://media.designdetails.io/library/5fa7f546ec2dd8986c66d904b0dc7aa3337e84a64de61969b4bafb9f074382dd/2c5e1e37-a350-4d29-be5d-f235e85b43f8.webp
   SECTION.md v3.2: `2c5e1e37-a350-4d29-be5d-f235e85b43f8` (deterministic evidence; editorial review pending)
6. **Process — Numbered journey with photo rows** (Home)
   Numbered rows pair short outcomes with small photos and side captions, and the fading lower rows suggest a progression of steps.
   Capture: 1440×1292px; page bounds 4000–5292px of 10203px; source section ID: `de731a82-894b-4563-aed1-50b516fadb8e`; image: https://media.designdetails.io/library/78d49ca9347f9dc5c1e20b3d0438f3726738628a5fb785dbba99d9ca4cd02ca7/de731a82-894b-4563-aed1-50b516fadb8e.webp
   SECTION.md v3.2: `de731a82-894b-4563-aed1-50b516fadb8e` (deterministic evidence; editorial review pending)
7. **Gallery — Full-bleed character showcase with totem picker** (Home)
   A large 3D character behind bold serif type fills the screen, while small pill buttons let visitors switch between the six totems.
   Capture: 1440×1036px; page bounds 5292–6328px of 10203px; source section ID: `24ad88b4-0404-4612-88fe-7b26a599197e`; image: https://media.designdetails.io/library/d0176b558ad0724a99011da4dd1d9d18eec1b62aae0b38c241dfdd7fb99ccaee/24ad88b4-0404-4612-88fe-7b26a599197e.webp
   SECTION.md v3.2: `24ad88b4-0404-4612-88fe-7b26a599197e` (deterministic evidence; editorial review pending)
8. **Other — Dark transition with totem pills** (Home)
   A mostly empty dark band carries the totem pills and heading edge, giving the scene room to breathe between sections.
   Capture: 1440×550px; page bounds 6328–6878px of 10203px; source section ID: `3fda2c88-132f-4e24-a518-32a3ba9b5f05`; image: https://media.designdetails.io/library/fd18c765ecb8bde7a21d6d358afa0f3286454b8928b79efd914cb412a6a1071f/3fda2c88-132f-4e24-a518-32a3ba9b5f05.webp
   SECTION.md v3.2: `3fda2c88-132f-4e24-a518-32a3ba9b5f05` (deterministic evidence; editorial review pending)
9. **Stats — Attribute stats then guild badges** (Home)
   Four labelled numbers above colourful shapes explain character stats, then scattered guild badges and a centred heading introduce joining groups.
   Capture: 1440×2000px; page bounds 6878–8878px of 10203px; source section ID: `af80f951-5f7d-4b5f-b0b5-4e5077c4254c`; image: https://media.designdetails.io/library/ffb94a70659a5da2492f2e5f27f5f2900519b47d52dd7c08a0910e99c9081e95/af80f951-5f7d-4b5f-b0b5-4e5077c4254c.webp
   SECTION.md v3.2: `af80f951-5f7d-4b5f-b0b5-4e5077c4254c` (deterministic evidence; editorial review pending)
10. **Other — Quiet closing note on pale ground** (Home)
   A small grey line of text on a pale background gives a calm pause and reassures that nothing is ranked.
   Capture: 1440×288px; page bounds 8878–9166px of 10203px; source section ID: `28419665-4a5c-498d-8f24-fbd64d2116aa`; image: https://media.designdetails.io/library/01015d150e8e6d6f1cc12601206dccc11a783e500105a23146876a0a18fabdb9/28419665-4a5c-498d-8f24-fbd64d2116aa.webp
   SECTION.md v3.2: `28419665-4a5c-498d-8f24-fbd64d2116aa` (deterministic evidence; editorial review pending)
11. **Forms — Oversized email field with reassurance** (Home)
   A large serif placeholder over a thin line makes the single input obvious, and a small note about no card removes hesitation.
   Capture: 1440×437px; page bounds 9166–9603px of 10203px; source section ID: `375670d9-4034-423d-a7b0-55b35b48d0e4`; image: https://media.designdetails.io/library/16e0a94c8fd778b17296183a70f693142871df8b5f7f301e561cc11fe4289e10/375670d9-4034-423d-a7b0-55b35b48d0e4.webp
   SECTION.md v3.2: `375670d9-4034-423d-a7b0-55b35b48d0e4` (deterministic evidence; editorial review pending)
12. **Footer — Minimal footer around email signup** (Home)
   Logo, tagline, contact and legal links sit in the corners around the email field, keeping the page ending clean and compact.
   Capture: 1440×600px; page bounds 9603–10203px of 10203px; source section ID: `26cff2fb-876f-4747-a75d-f3a3c4ed3dc3`; image: https://media.designdetails.io/library/15b284576d5c85efd8f209535c9a075e17f311c650aa340423cf88f8de8c9941/26cff2fb-876f-4747-a75d-f3a3c4ed3dc3.webp
   SECTION.md v3.2: `26cff2fb-876f-4747-a75d-f3a3c4ed3dc3` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/9813d6fffef1215a64c30ab4d7f00129f4cdafa019ba098fc51096d55d65ed12/desktop_full-f3837188-2026-10-31T06-29-34-962Z.webp
- Mobile screenshot: https://media.designdetails.io/library/bbb432f50309d4950cbf492c934d75a15c8b30589376c694b983668479168ad7/mobile_full-f3837188-2026-10-31T06-30-18-127Z.webp
- Open Graph image: https://media.designdetails.io/library/ae838664d50bcfdd83d629e5039efd5d88c64b295461ee385beb58c54c9a708f/og_image-f3837188-2026-10-31T06-29-42-719Z.webp
- Full-page video: https://media.designdetails.io/library/734c4c3919c23806ae40d3d71fef80fcd2983997fd4ef61b1dbcbf97c776bfe6/motion-1793430556575.mp4
- Video poster: https://media.designdetails.io/library/72c31c668ba0f95d3c3ff683ef02a74b46c94bd61cd0e6ef5ab3ccb491b2e164/motion-poster-1793430556575.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
- Primary Button
- Stat Block
- Feature Collection
- Input Field
- Footer
- Floating Card Array
- Immersive Totem Showcase

## Quality rubric

Overall: 63.75/100 (Good)
Evidence coverage: 80%
Judge tier: Good
Verdict: This waitlist page pairs an unusually specific product concept — real-life quests, totems, and guilds as an RPG layer over habit-building — with a confident oversized-serif-on-black editorial visual language. The chapter-numbered scroll structure, tightly paired photography/UI-mockup content, and scale-contrast typography form a legible system across multiple sections rather than a single hero flourish, which is the page's clearest strength. Set against that, the evidence shows real seams: computed CSS reveals several text elements silently falling back to system fonts instead of the declared type family, the neutral and illustrative color values fragment rather than consolidate, and static scroll captures show overlapping or duplicated headline text at section boundaries that suggest the sticky-transition technique isn't fully resolved. No motion recording exists, so the page's heavy implication of animated floating cards and scroll-triggered reveals cannot be credited. Taken together this is a good, conceptually distinctive landing page whose execution has enough rough edges and unverifiable claims to keep it short of the 'strong' tier.

- Typography (15%): 64 — The site builds a confident two-voice type system: a massive, tightly tracked PP Pangaia serif (up to 208px) for dramatic chapter headlines against a restrained Switzer sans for body copy and labels. The scale contrast (208px/145px/92px/72px headlines vs 14-16px body) is used repeatedly across chapters, giving it a genuine rhythm rather than a one-off hero trick. However, several labels, nav text, buttons and stat numbers fall back to system-ui/-apple-system (font-family: null) rather than the declared brand fonts, which undercuts the claimed consistency of the type system across the full page.
- Color (10%): 60 — Core palette is disciplined: black canvas, white text, one distinct pink accent (#FFCDFF) reserved for the CTA, with a light gray (#F6F6F6) alternate section for pacing. This restraint works well for the editorial tone. But the palette fragments with many near-duplicate near-white/near-black values (#F6F6F6, #F5F5F5, #EEEEEE, #E9E9E9) and the guild/stat illustration layer introduces a separate, highly saturated palette (red/yellow checkerboard, blue ship, pink blob) that reads as a distinct visual system rather than one integrated into the site's restrained core language.
- Layout (20%): 64 — The page is organized as a clear chapter system (Chapter 01, 03, 05, 06, 07) with a repeated left-label/right-counter pattern, alternating dark and light sections, and a floating 3D card hero that establishes the product's visual idiom early. Stat bars sized proportionally, guild shields scattered with rotation, and sticky-feeling headline transitions show layout ambition beyond a single hero moment. However, the supplied crops show overlapping/garbled text in transition zones (duplicated headline text bleeding across sections, a light-pink panel edge cutting awkwardly into the dark totem section), suggesting the sticky/pinned transition technique is not cleanly resolved at these capture points.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference, so scroll choreography, the floating-card hero animation, sticky-section transitions, and 3D totem reveals cannot be verified for timing, easing, or smoothness despite strong visual cues suggesting an animated scroll narrative.
- Originality (25%): 64 — The core concept — RPG-style totems, guild shields, and stat progression applied to a 'go touch grass' real-life habit app — is a genuinely distinctive content idea that isn't a generic SaaS trope. Pairing playful 3D character totems and abstract heraldic guild shields with austere editorial typography is a reasonably fresh combination. However, the surface execution (oversized serif display type on black, floating 3D UI cards, pill CTA buttons, chapter-numbered scroll narrative) closely follows an extremely common current 'premium startup' visual template, so the novelty sits mainly in the content/concept layer rather than in structural or interaction invention.
- Content (10%): 66 — Content and visual system are well fused: quest card mockups double as both UI demonstration and hero decoration, candid photography illustrates the 'chances' benefit list in a documentary rather than stock-photo register, and the stat/guild visuals directly visualize the app's core mechanic rather than existing as decoration. The narrative copy (short, punchy, second-person) is consistently voiced across sections and tied to the specific UI elements shown beside it.

Coverage: 80% 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

Quest cards tilted in 3D space against solid black give the opening screen the feel of a tarot spread, with oversized serif headlines doing the emotional heavy lifting instead of photos. Deep black, dusty rose and amber heraldic patterns carry through each chapter, so a long scrolling page still reads as one coherent world.

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