# X Money — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://money.x.com/
Captured: 2026-10-06
CSS measured: 2026-10-06T14:55:28.738Z at 1440×1000 — https://money.x.com/en
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

The X Money landing page employs a stark, highly minimalist, and corporate design language that heavily leans on the core X brand identity. It features a predominantly monochrome palette (black and white) with generous whitespace, punctuated only by a bright green accent color used specifically to highlight positive financial metrics like APY and cashback. The layout utilizes a sticky left-hand navigation sidebar alongside a wide main content area. Large, tightly tracked typography and floating, rounded app UI mockups dominate the visual hierarchy.

## Classification

- Industry: finance
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, corporate, typographic, app-showcase
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: xVFDisplay — weight 500; size 48px; line-height 52px; tracking -0.5px; Regular (95% role confidence, computed values)
- Heading: xVFDisplay — weight 500; size 32px; line-height 36px; tracking -0.3px; Regular (90% role confidence, computed values)
- Body: xVF — weight 500; size 13px; line-height 20px; tracking 0.1px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used as the primary background color for the entire page. (95% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: Solid black (#000000) used for all primary headings, titles, and body copy. (95% role confidence, computed values)
- Accent — accent #00BA7C: color-8: computed rgb(0, 186, 124); AI role: Vibrant green (#00BA7C) used specifically to highlight positive financial values like '+6.00% APY'. (95% role confidence, computed values)
- Surface — surface #F2F2F2: color-3: computed rgb(242, 242, 242); AI role: Light grey (#F2F2F2) used for feature cards, FAQ items, and background sections to separate them from the white canvas. (90% 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": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "Money",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Features",
        "top": 102,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Updates (opens in new tab)",
        "top": 134,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": ">x< Platform",
        "top": 5229,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ">x<",
        "top": 5230,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ">x< Corp",
        "top": 5229,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "xVFDisplay",
    "fontStack": "xVFDisplay, \"xVFDisplay Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "36px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Built to earn",
        "top": 728,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Every dollar works harder on >x<",
        "top": 764,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Industry-leading interestMore than 10x the national average⁴",
        "top": 1370,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "36px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "One app",
        "top": 2251,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Everything money can do",
        "top": 2287,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Your questions, answered",
        "top": 4200,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "18px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "+6.00% APY",
        "top": 1629,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "+6.00% APY",
        "top": 1591,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "+6.00% APY",
        "top": 1569,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "xVFDisplay",
    "fontStack": "xVFDisplay, \"xVFDisplay Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "0.5px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": ">x< Money",
        "top": 698,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Your money shouldn’t sit idle. Earn yield, get cashback, and manage it all in one place.",
        "top": 698,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Up to 6.00% APY¹",
        "top": 1083,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "xVFDisplay",
    "fontStack": "xVFDisplay, \"xVFDisplay Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "48px",
    "lineHeight": "52px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Your",
        "top": 80,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "money,",
        "top": 80,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "on",
        "top": 80,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Get paid up to 2 days early with direct deposit — then send wires, mail checks, and pay your bills, ",
        "top": 2558,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Pay anyone on >x< — free and with no limits.",
        "top": 2598,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Worldwide ATM fee reimbursements.⁶ No foreign transaction fees. Use it anywhere Visa is accepted.",
        "top": 2842,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "9.4px",
    "lineHeight": "14.1px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Has my mailed check gone out yet?",
        "top": 3303,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Your check has shipped and should",
        "top": 3358,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "arrive in about 2 business days.",
        "top": 3374,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Rolling out to select users in the United States.",
        "top": 497,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "United States",
        "top": 499,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Automatic growth",
        "top": 1374,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2026 >x< Corp.",
        "top": 5702,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": ">x<.com",
        "top": 5264,
        "property": "font"
      },
      {
        "tag": "span",
        "text": ">x<",
        "top": 5265,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Status",
        "top": 5292,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.1px",
    "lineHeight": "normal",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "Activity",
        "top": 2424,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "July Rent",
        "top": 2543,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$",
        "top": 2541,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "xVFDisplay",
    "fontStack": "xVFDisplay, \"xVFDisplay Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "28px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "$6,847.12",
        "top": 1642,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$8,763.45",
        "top": 1612,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$8,000.00",
        "top": 1587,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "7.1px",
    "lineHeight": "7.1px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "sent to",
        "top": 2505,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "3h",
        "top": 2505,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "sent to",
        "top": 2498,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "6.3px",
    "lineHeight": "normal",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "17 Jul 2026",
        "top": 2554,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Check",
        "top": 2554,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "18 Jul 2026",
        "top": 2509,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "xVFDisplay",
    "fontStack": "xVFDisplay, \"xVFDisplay Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "11.1px",
    "lineHeight": "15.9px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "$1,200.00",
        "top": 2485,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$160.00",
        "top": 2478,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$26.52",
        "top": 2472,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.1px",
    "lineHeight": "7.1px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Alex",
        "top": 2505,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Amanda",
        "top": 2498,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Joel",
        "top": 2490,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "legend",
        "text": "Theme",
        "top": 5238,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "10.2px",
    "lineHeight": "12.6px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Front",
        "top": 2767,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Back",
        "top": 2787,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "8.9px",
    "lineHeight": "8.9px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Cashback",
        "top": 3048,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$9.74",
        "top": 3048,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.9px",
    "lineHeight": "7.9px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Read",
        "top": 3331,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "John",
        "top": 3403,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "580",
    "size": "13px",
    "lineHeight": "20px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Overview",
        "top": 70,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "500",
    "size": "7.9px",
    "lineHeight": "7.9px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "16 Jul 2026",
        "top": 3061,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "xVF",
    "fontStack": "xVF, \"xVF Fallback\", ui-sans-serif, system-ui, sans-serif",
    "weight": "600",
    "size": "7.7px",
    "lineHeight": "7.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "4:20",
        "top": 3094,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 38,
    "contexts": [
      {
        "tag": "body",
        "text": "try{var c=localStorage.getItem(\"theme\");if(c===\"dark\"||(c!==\"light\"&&matchMedia(\"(prefers-color-sche",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 535,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 536,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 176,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 24,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Money",
        "top": 25,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F2F2F2",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 242)",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 698,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 4200,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 0.6,
    "cssValue": "rgba(0, 0, 0, 0.6)",
    "count": 74,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 27,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 30,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Features",
        "top": 102,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(0, 0, 0, 0.3)",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 706,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Check",
        "top": 2554,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3333,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0 0 0 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5808,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.1)",
    "count": 63,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 29,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Sign In",
        "top": 944,
        "property": "border"
      },
      {
        "tag": "section",
        "text": ">x< MoneyBuilt to earnEvery dollar works harder on >x<Your money shouldn’t sit idle. Earn yield, get",
        "top": 617,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#00BA7C",
    "alpha": 1,
    "cssValue": "rgb(0, 186, 124)",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "+6.00% APY",
        "top": 1629,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#EBEBEB",
    "alpha": 1,
    "cssValue": "rgb(235, 235, 235)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Your check has shipped and shouldarrive in about 2 business days.",
        "top": 3351,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 3401,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(0, 0, 0, 0.05)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1587,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 5226,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#999999",
    "alpha": 1,
    "cssValue": "rgb(153, 153, 153)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 2379,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#1D9BF0",
    "alpha": 1,
    "cssValue": "rgb(29, 155, 240)",
    "count": 4,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2506,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#D18800",
    "alpha": 1,
    "cssValue": "rgb(209, 136, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2499,
        "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 spacing between major sections to isolate concepts. Tighter, consistent padding within feature cards and UI frames.
- Corner style: Fully rounded (pill) shapes for interactive elements like buttons; soft rounded rectangles for feature cards and UI mockups.
- Radius: Large border radii on product mockups (phones) and feature surface blocks; max-radius for buttons and badges.
- Borders: Extremely subtle, 1px borders using low opacity black (rgba(0, 0, 0, 0.1)) for structural definition without visual noise.
- Buttons: Pill-shaped buttons, either solid black with white text or white with a thin grey border and black text.
- Content width: Asymmetrical layout with a narrow, fixed left sidebar and a wide, centrally constrained main content column.
- Density: Very low density. High reliance on negative space to draw focus to large typography and floating UI elements.
- Evidence: Observed in the layout structure (left nav, right content), the rounded corners on the 'Sign In' button and 'One app' grey blocks, and the distinct separation of sections.

## Sections

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

1. **Hero — Powerful Money Network Hero** (Home)
   AI suggestion (96% confidence): Complete page-opening hero with a bold value proposition, central product visual, rollout note, and updates CTA.
   Capture: 1440×630px; page bounds 0–630px of 6110px; source section ID: `85dce3f1-77fd-4598-a636-26fc478b2a29`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f89827987c2d2f083af8103d216c3908fe9fdc3a5905cc589bb2a2bde221b276/85dce3f1-77fd-4598-a636-26fc478b2a29.webp
   SECTION.md v3.2: `85dce3f1-77fd-4598-a636-26fc478b2a29` (deterministic evidence; editorial review pending)
2. **Features — Built to earn Every dollar works harder on >x<** (Home)
   Reusable feature composition from Home, organized around “Built to earn Every dollar works harder on >x<”.
   Capture: 1440×672px; page bounds 617–1289px of 6110px; source section ID: `7e675c81-f6c8-4651-b2d3-f91f163dd38e`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/1cd33afc2a0cdffcc78b05d80c90a0df2ca63c163da738717a2e8c095d476a4c/section_crop-7e675c81-2026-10-06T14-55-36-845Z.webp
   SECTION.md v3.2: `7e675c81-f6c8-4651-b2d3-f91f163dd38e` (deterministic evidence; editorial review pending)
3. **Features — One app** (Home)
   Reusable feature composition from Home, organized around “One app”.
   Capture: 1440×1423px; page bounds 2170–3593px of 6110px; source section ID: `5e208f38-a237-46d4-ab6b-c626252120d8`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/a818a50e2914a2ba11eadfd1f29b3ea657e3c0b2c4fb4f7d54b03e5feaec645f/section_crop-5e208f38-2026-10-06T14-55-38-552Z.webp
   SECTION.md v3.2: `5e208f38-a237-46d4-ab6b-c626252120d8` (deterministic evidence; editorial review pending)
4. **Features — X Money Features** (Home)
   Reusable feature composition from Home, organized around “X Money Features”.
   Capture: 1440×509px; page bounds 4656–5165px of 6110px; source section ID: `3d555c03-9758-40d6-b6ba-c20990ff6258`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/65844f9f5d762bdde9b6a09d5acf0593e50514249897ab1408166206de3286af/section_crop-3d555c03-2026-10-06T14-55-41-139Z.webp
   SECTION.md v3.2: `3d555c03-9758-40d6-b6ba-c20990ff6258` (deterministic evidence; editorial review pending)
5. **Features — Industry-Leading Interest Feature** (Home)
   AI suggestion (94% confidence): Self-contained savings-rate feature with its own heading, prominent APY statement, supporting disclaimer, and a distinctive field of account-balance cards.
   Capture: 1440×867px; page bounds 1296–2163px of 6110px; source section ID: `2e49412c-c41d-4fdb-9875-4df6d8f5d014`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/55fbbcacb7391a3ea9beaa4fce15c08553769734803abd8cef8f4bd0fc565953/2e49412c-c41d-4fdb-9875-4df6d8f5d014.webp
   SECTION.md v3.2: `2e49412c-c41d-4fdb-9875-4df6d8f5d014` (deterministic evidence; editorial review pending)
6. **Features — FDIC-Protected Account Feature** (Home)
   AI suggestion (96% confidence): Complete standalone product-benefit section pairing a clear FDIC coverage message with a large account interface visual, insurance badge, and supporting copy.
   Capture: 1440×522px; page bounds 3593–4115px of 6110px; source section ID: `cd9ad54f-544b-41be-90fd-d716f43838e1`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/b421b8147a61689fff5723576ea6c61aa5e0492d4ad594c35b96c92f41df347a/cd9ad54f-544b-41be-90fd-d716f43838e1.webp
   SECTION.md v3.2: `cd9ad54f-544b-41be-90fd-d716f43838e1` (deterministic evidence; editorial review pending)
7. **FAQ — X Money Questions and Answers** (Home)
   AI suggestion (98% confidence): Complete FAQ component with heading, supporting CTA, and a self-contained accordion list showing both expanded and collapsed states.
   Capture: 1440×543px; page bounds 4118–4661px of 6110px; source section ID: `32ca810e-4ad9-4284-8cee-7456c8f1dc14`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/1e78394bec87f47c42236552d2a2757e45f56d2c12d2dc38cf8be34803e08ceb/32ca810e-4ad9-4284-8cee-7456c8f1dc14.webp
   SECTION.md v3.2: `32ca810e-4ad9-4284-8cee-7456c8f1dc14` (deterministic evidence; editorial review pending)
8. **Footer — X.com Link Directory Footer** (Home)
   AI suggestion (97% confidence): Complete, distinctive site footer with utility controls, sign-in actions, grouped platform/company/help/developer/business links, copyright, and oversized X.COM wordmark.
   Capture: 1440×888px; page bounds 5215–6103px of 6110px; source section ID: `313cb48d-c153-4597-a9b5-a2ac4a33182b`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/6d6bff47eeee49b9f1c10f70fac8280cf251a12f684ad3182d269fcb162c5d7d/313cb48d-c153-4597-a9b5-a2ac4a33182b.webp
   SECTION.md v3.2: `313cb48d-c153-4597-a9b5-a2ac4a33182b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f65b5f5cae74e598bbea1449b98c6e15ef08ebbfc9768e27151ef5c0629f74ef/desktop_full-69704d50-2026-10-06T14-55-28-757Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2c74ac940932d83c16b27394841c383cdee22870112d198d76de9b8681587204/mobile_full-69704d50-2026-10-06T14-56-01-792Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3e0fac26bb2c850ae4f7732669f930d79fad305887ae2dab43e65eed5d4801cb/og_image-69704d50-2026-10-06T14-55-34-868Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/d8593aa6d88feac3ac2b591bd3645d242e259524842db5996352427e96ced742/motion-1791299847333.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/6a569f41f943c9a71c531641321a972c4699fde76dce323e3ecef7b8c9c58783/motion-poster-1791299847333.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
- Feature Collection
- Feature Card
- FAQ Accordion
- Footer
- Outline Button
- Primary Button
- Sticky Sidebar Navigation
- Numbered Staggered Grid

## Quality rubric

Overall: 54.5/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: X Money is a cleanly executed, brand-consistent fintech marketing page that applies X's established black/white/green identity with discipline — clear type hierarchy, restrained color, and a stable asymmetric layout held together across the full scroll. However, its component playbook (floating phone mockups, numbered feature grid, uniform scroll-reveal animation, FAQ accordion) is a widely used genre template rather than a distinctive system, placing it solidly in competent territory rather than the 'strong' or 'exceptional' bands.

- Typography (15%): 60 — A deliberate type system is present (xVFDisplay for display/headings, xVF for body/UI text) with a clear size ladder from 48px hero down to 11px micro-copy, and intentional tight negative tracking (-0.5px, -0.3px) on display sizes. Execution is clean and consistent, but the hierarchy and tracking choices sit squarely within conventional contemporary SaaS/fintech conventions rather than showing a distinctive voice.
- Color (10%): 62 — The palette is tightly restrained: pure black (#000000) on white (#FFFFFF) canvas, a light grey (#F2F2F2) for card separation, and a single accent green (#00BA7C) reserved exclusively for positive financial values. This restraint is well executed and purposeful, but the black/white/single-accent fintech formula is extremely common in the category and the palette offers no additional nuance beyond that formula.
- Layout (20%): 64 — The asymmetric structure (narrow sticky left sidebar + wide scrolling content column) stays consistent from hero through footer, and the 'One app' section uses a staggered numbered grid (01–06) mixing UI snippets with copy at different proportions. Section rhythm (generous vertical whitespace, consistent card radii, 1px low-opacity borders) is coherent across the full page length (hero, earn, interest, grid, FDIC, FAQ, footer). This is a genuine system, not a single hero trick, but the component vocabulary itself (floating phone mockups, light-grey feature cards, pill buttons) is a very standard fintech template arrangement.
- Motion (20%): 52 — Scroll-triggered fade-and-translate-up reveals are used consistently across every major section (earn, interest, grid, FDIC, FAQ) plus a staggered grid entry and a slow-moving footer wordmark. This is functional and keeps the page from feeling static, but it is the same single animation recipe (fade + vertical translate) reapplied repeatedly rather than a varied motion vocabulary, and no evidence establishes easing quality, frame timing, or responsiveness to interaction beyond scroll position.
- Originality (25%): 38 — The overall approach — sticky sidebar nav, black/white/green fintech palette, floating phone mockups with dotted background texture, numbered feature grid, FAQ accordion, scroll-reveal animations — is a well-worn template shared across many consumer fintech marketing sites (digital banking/payment apps commonly use this exact combination of elements). Nothing observed constitutes a hard-to-substitute idea specific to this brand beyond reusing X's existing visual identity (wordmark, green accent convention); strip the logo and the page could belong to numerous competing neobank products.
- Content (10%): 66 — Marketing claims are concretely grounded: APY and cashback figures appear both as headline statements and inside realistic account-balance mockups with matching dollar amounts, and legal/eligibility caveats are thoroughly footnoted in the closing section. The FAQ anticipates practical user questions (eligibility, protection, APY mechanics) appropriate to a regulated financial product, and the footer provides comprehensive corporate/legal/developer resource links expected of a finance brand.

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

Plenty of white space and a single phone mockup keep the opening screen calm, while large black headlines against pale grey cards make the balance and APY numbers the clear focus. A repeating two and three column grid of small product shots paces the long feature list evenly, so visitors can scan each money task at a glance.

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