# Affinity — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.affinity.co/
Captured: 2026-11-11
CSS measured: 2026-11-11T07:28:02.976Z at 1440×1000 — https://www.affinity.co/
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

Affinity's website features a corporate yet modern aesthetic tailored for private capital markets. The design uses a deep purple and off-white color palette, giving it a premium feel. Typography pairs a distinctive serif display font (Abcarizonamix) with a clean sans-serif (Booton) for body text and navigation. Layouts are structured and spacious, utilizing horizontal logo strips, feature cards with subtle borders, and prominent stat blocks. Interactive elements are primarily solid or subtly styled text links.

## Classification

- Industry: crm
- Site type: Landing, Blog
- Business model: Software
- Styles: corporate, minimal, typographic, premium-fintech
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Abcarizonamix — weight 400; size 64px; line-height 64px; tracking -1.9px; Regular (100% role confidence, computed values)
- Heading: Abcarizonamix — weight 400; size 32px; line-height 35.2px; tracking normal; Regular (95% role confidence, computed values)
- Body: Booton — weight 400; size 16px; line-height 24px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Booton — weight 400; size 11.2px; line-height 16.8px; tracking 1.5px; uppercase (70% role confidence, computed values)

## Functional palette

- Text — text #1E0E1D: color-4: computed color(srgb 0.117647 0.054902 0.113725); AI role: #1E0E1D near-black used for text on light backgrounds. (95% role confidence, computed values)
- Surface — surface #3B0D3A: color-3: computed rgb(59, 13, 58); AI role: #3B0D3A deep purple used for distinct dark background sections. (90% role confidence, computed values)
- Text — text #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: #FFFFFF white text used prominently on the dark purple backgrounds. (90% role confidence, computed values)
- Primary Action — primary action #7A23D1: color-13: computed rgb(122, 35, 209); AI role: #7A23D1 used for interactive text links. (85% role confidence, computed values)
- Canvas — canvas #F9F7F5: color-2: computed rgb(249, 247, 245); AI role: #F9F7F5 used as the light background for various sections. (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": "Abcarizonamix",
    "fontStack": "Abcarizonamix, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "h2",
        "text": "Introducing Affinity Ascend",
        "top": 1274,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Built for how your firm invests",
        "top": 2388,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Every stage makes the next one sharper",
        "top": 3368,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Abcarizonamix",
    "fontStack": "Abcarizonamix, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "For PE, Affinity handles multi-fund complexity without configuration",
        "top": 2551,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "For VC, Affinity handles high-velocity dealflow without losing the relationship",
        "top": 3051,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Every interaction, captured",
        "top": 4813,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Abcarizonamix",
    "fontStack": "Abcarizonamix, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "-1.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "3,300+",
        "top": 7835,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "25 Billion+",
        "top": 7835,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "15 Trillion+",
        "top": 7835,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Abcarizonamix",
    "fontStack": "Abcarizonamix, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Products",
        "top": 8705,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Solutions",
        "top": 8705,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Resources",
        "top": 8705,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Abcarizonamix",
    "fontStack": "Abcarizonamix, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "64px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Your next deal is in your network",
        "top": 855,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Put your firm’s network to work",
        "top": 8448,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 62,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to main content",
        "top": 16,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Every email, meeting, and note captured automatically across your firm. No manual logging.",
        "top": 4268,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Enriched with Affinity’s proprietary data and 40+ sources, including Pitchbook, Preqin, and Grata.",
        "top": 4268,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Affinity finds it for you, and gets your team ready to win it.",
        "top": 930,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Purpose-built agents to support specific private capital workflows. Ascend preps every meeting, capt",
        "top": 1324,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "PE and VC are different. Affinity handles each without additional configuration or customization.",
        "top": 2451,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Abcarizonamix",
    "fontStack": "Abcarizonamix, \"Times New Roman\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "01",
        "top": 4201,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "02",
        "top": 4201,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "03",
        "top": 4201,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "400",
    "size": "11.2px",
    "lineHeight": "16.8px",
    "letterSpacing": "1.5px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "The agent platform for private capital",
        "top": 1250,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "THE SYSTEM, IN PRACTICE",
        "top": 3344,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "THE PLATFORM",
        "top": 4626,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "1.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "THE AI-FIRST PRIVATE CAPITAL CRM",
        "top": 821,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "700",
    "size": "11.2px",
    "lineHeight": "16.8px",
    "letterSpacing": "0.8px",
    "traits": "Regular",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "CASE STUDY",
        "top": 1113,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CASE STUDY",
        "top": 1113,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CASE STUDY",
        "top": 1113,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "See Ascend in action →",
        "top": 1409,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "See Ascend in action →",
        "top": 1409,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Explore Affinity for PE →",
        "top": 2967,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Products",
        "top": 26,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Solutions",
        "top": 26,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 26,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Get started",
        "top": 31,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Get started",
        "top": 31,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Request a demo",
        "top": 937,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "300",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Activity capture",
        "top": 4797,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Relationship Intelligence",
        "top": 4850,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Purpose-built agents",
        "top": 4903,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "500",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Industries",
        "top": 8753,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Workflows",
        "top": 9162,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Roles",
        "top": 9410,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Booton",
    "fontStack": "Booton, Arial, sans-serif",
    "weight": "600",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Open platform",
        "top": 4956,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 72,
    "contexts": [
      {
        "tag": "div",
        "text": "Skip to main content",
        "top": 16,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 33,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 32,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F9F7F5",
    "alpha": 1,
    "cssValue": "rgb(249, 247, 245)",
    "count": 7,
    "contexts": [
      {
        "tag": "body",
        "text": ":root { --nav--menu-open-duration: 400ms; --nav--menu-close-duration: 400ms; --nav--dropdown-open-du",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Request a demoRequest a demo",
        "top": 924,
        "property": "background"
      },
      {
        "tag": "section",
        "text": ".logo-marquee_fade_left { background: linear-gradient(to right, white, transparent); } .logo-marquee",
        "top": 1000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#3B0D3A",
    "alpha": 1,
    "cssValue": "rgb(59, 13, 58)",
    "count": 35,
    "contexts": [
      {
        "tag": "section",
        "text": "THE AI-FIRST PRIVATE CAPITAL CRMYour next deal is in your networkAffinity finds it for you, and gets",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Request a demo",
        "top": 937,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "CASE STUDY",
        "top": 1104,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#1E0E1D",
    "alpha": 1,
    "cssValue": "color(srgb 0.117647 0.054902 0.113725)",
    "count": 66,
    "contexts": [
      {
        "tag": "div",
        "text": "Get started",
        "top": 31,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 31,
        "property": "svg-stroke"
      },
      {
        "tag": "p",
        "text": "The agent platform for private capital",
        "top": 1250,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#3B0A3B",
    "alpha": 0.10196078431372549,
    "cssValue": "color(srgb 0.231373 0.0509804 0.227451 / 0.1)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Every interaction, capturedSee activity capture →See activity capture →Affinity captures every email",
        "top": 4776,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "ProductsCRMAscendArtificial intelligenceActivity captureRelationship intelligenceData enrichmentInte",
        "top": 8592,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#1B0C1D",
    "alpha": 1,
    "cssValue": "rgb(27, 12, 29)",
    "count": 1,
    "contexts": [
      {
        "tag": "video",
        "text": "",
        "top": 810,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "color(srgb 1 1 1 / 0.1)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2526,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1D0D1D",
    "alpha": 0.7490196078431373,
    "cssValue": "color(srgb 0.117647 0.054902 0.113725 / 0.75)",
    "count": 44,
    "contexts": [
      {
        "tag": "a",
        "text": "CRM",
        "top": 8751,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFEAA8",
    "alpha": 1,
    "cssValue": "rgb(255, 234, 168)",
    "count": 5,
    "contexts": [
      {
        "tag": "li",
        "text": "Banker and adviser coverage tracked automatically, so proprietary flow doesn't depend on one relatio",
        "top": 2747,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Explore Affinity for PE →",
        "top": 2967,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#CDEC3E",
    "alpha": 1,
    "cssValue": "rgb(205, 236, 62)",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "THE AI-FIRST PRIVATE CAPITAL CRM",
        "top": 821,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 1 1 1 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "For VC, Affinity handles high-velocity dealflow without losing the relationship",
        "top": 3051,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#1F0E1D",
    "alpha": 0.6509803921568628,
    "cssValue": "color(srgb 0.117647 0.054902 0.113725 / 0.65)",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "Industries",
        "top": 8753,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Terms",
        "top": 9730,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "© 2026 Affinity",
        "top": 9737,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#7A23D1",
    "alpha": 1,
    "cssValue": "rgb(122, 35, 209)",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "See Ascend in action →",
        "top": 1409,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 8,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 25,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "color(srgb 1 1 1 / 0.6)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1108,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#1E0D1C",
    "alpha": 0.6,
    "cssValue": "color(srgb 0.117647 0.054902 0.113725 / 0.6)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Activity capture",
        "top": 4797,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#1E0F1E",
    "alpha": 0.2,
    "cssValue": "color(srgb 0.117647 0.054902 0.113725 / 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Activity capture",
        "top": 4776,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#1D0A1D",
    "alpha": 0.10196078431372549,
    "cssValue": "color(srgb 0.117647 0.054902 0.113725 / 0.1)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "01CaptureEvery email, meeting, and note captured automatically across your firm. No manual logging.",
        "top": 4161,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FFFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "color(srgb 1 1 1 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2526,
        "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 major sections, with tighter grouping for related content like stat blocks or process steps.
- Corner style: Slightly rounded corners on buttons and UI mockups, but mostly sharp geometric containers.
- Radius: Buttons appear to have subtle 4-8px rounding; larger UI feature cards have distinct border radii.
- Borders: Subtle low-opacity borders used to delineate process steps and feature cards.
- Buttons: Solid fill for primary calls to action, text links with arrows for secondary actions.
- Content width: Wide max-width container with a central column orientation for text, spanning full width for backgrounds.
- Density: Comfortable to spacious; relies on large typography and padding to pace the content.
- Evidence: Observed from the DOM layout, spacing around h2/h3 tags, and CSS classes defining structure.

## Sections

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

1. **Navbar — Affinity Navbar** (Home)
   A transparent bar with few links and one filled button keeps the photo visible while leaving a clear primary action.
   Capture: 1440×72px; page bounds 0–72px of 9834px; source section ID: `a6dc9463-97f4-4221-b361-07a8b29dc131`; image: https://media.designdetails.io/library/e7ebb6c79e05985497eaf3b2a4a177be7b955d2b354fb8d636858049a6f02892/a6dc9463-97f4-4221-b361-07a8b29dc131.webp
   SECTION.md v3.2: `a6dc9463-97f4-4221-b361-07a8b29dc131` (deterministic evidence; editorial review pending)
2. **Hero — Full-bleed photo hero with headline** (Home)
   A large human photo with a centered serif headline and one demo button gives a warm, focused first impression.
   Capture: 1440×928px; page bounds 72–1000px of 9834px; source section ID: `9b89c570-aae3-42fb-98bb-8b31229ce730`; image: https://media.designdetails.io/library/1ee5905bbb07c5db0a41ee2fa276f7dccda2b70d38d5756f9abe0fec521f63e4/9b89c570-aae3-42fb-98bb-8b31229ce730.webp
   SECTION.md v3.2: `9b89c570-aae3-42fb-98bb-8b31229ce730` (deterministic evidence; editorial review pending)
3. **Features — Logo strip, agent demo, firm tabs** (Home)
   Logos add early proof, then a purple demo panel and a tabbed PE/VC list let visitors see fit for their own firm type.
   Capture: 1440×2370px; page bounds 1000–3370px of 9834px; source section ID: `05451c2f-f80b-44fc-a412-1c12dced981c`; image: https://media.designdetails.io/library/d8e6dfffdfe58bc887451ecdb70e842c4912a686b315568a6faf2596809d59a9/05451c2f-f80b-44fc-a412-1c12dced981c.webp
   SECTION.md v3.2: `05451c2f-f80b-44fc-a412-1c12dced981c` (deterministic evidence; editorial review pending)
4. **Process — Five numbered workflow stages** (Home)
   Numbered columns with short serif headings and one-line descriptions show the workflow sequence at a glance beneath a large visual.
   Capture: 1440×1144px; page bounds 3370–4514px of 9834px; source section ID: `992f915f-a3e1-44b2-aae2-7fa3e8892df2`; image: https://media.designdetails.io/library/c9170eb0c82858e514faeed268a97e7e2175a6867d16ad96742a341dc76673e1/992f915f-a3e1-44b2-aae2-7fa3e8892df2.webp
   SECTION.md v3.2: `992f915f-a3e1-44b2-aae2-7fa3e8892df2` (deterministic evidence; editorial review pending)
5. **Features — Stacked cards with animated product visuals** (Home)
   Each card pairs a heading, short description and link with an animated purple visual, so capabilities show instead of being only described.
   Capture: 960×600px; page bounds 4514–7584px of 9834px; source section ID: `a00da4f7-671c-42cd-b141-568a500f5019`; image: https://media.designdetails.io/library/7eed62b906455b3e213118062d1bf6d3615951ecdd3a150a51494cd4be014053/a00da4f7-671c-42cd-b141-568a500f5019.webp
   SECTION.md v3.2: `a00da4f7-671c-42cd-b141-568a500f5019` (deterministic evidence; editorial review pending)
6. **Stats — Four large numbers on dark** (Home)
   Big serif figures with small gold captions on a dark band let visitors take in scale quickly and build credibility.
   Capture: 1440×444px; page bounds 7584–8028px of 9834px; source section ID: `348e8542-8fd0-465d-8f2c-a306977a5822`; image: https://media.designdetails.io/library/66c59b789dd44847e1c948e282853435551815ef734baa88d14ed5d42755658d/348e8542-8fd0-465d-8f2c-a306977a5822.webp
   SECTION.md v3.2: `348e8542-8fd0-465d-8f2c-a306977a5822` (deterministic evidence; editorial review pending)
7. **CTA — Photo banner with closing call** (Home)
   A full-width photo with one large headline and a small button gives a clean, uncluttered final prompt to act.
   Capture: 1440×564px; page bounds 8028–8592px of 9834px; source section ID: `c07f13e9-939b-4529-b355-5442e6a271e4`; image: https://media.designdetails.io/library/945103ddcdc9679b4d340411c3e4416bed5937596f957bc0ed2962bb973feadb/c07f13e9-939b-4529-b355-5442e6a271e4.webp
   SECTION.md v3.2: `c07f13e9-939b-4529-b355-5442e6a271e4` (deterministic evidence; editorial review pending)
8. **Footer — Four-column link footer** (Home)
   Grouped columns under clear headings, with a legal and social row below, make a large site easy to scan.
   Capture: 1440×1242px; page bounds 8592–9834px of 9834px; source section ID: `38e8a860-0852-4f0a-b8c5-1e35c7236631`; image: https://media.designdetails.io/library/0dcafd87e5e3cd32510e27763ef36d171c0cf623ebb9b2ef467adfd7e4e3694e/38e8a860-0852-4f0a-b8c5-1e35c7236631.webp
   SECTION.md v3.2: `38e8a860-0852-4f0a-b8c5-1e35c7236631` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/444755fdc18dc5020c6a7f561a32574b079aa08f2d647f53bff45f8e13808164/desktop_full-8cf45e18-2026-11-11T07-28-02-995Z.webp
- Mobile screenshot: https://media.designdetails.io/library/e159f8f2cd296668339341c2ba1c90555a0457bc5998a1fbb24bfa091309a26d/mobile_full-8cf45e18-2026-11-11T07-28-47-662Z.webp
- Open Graph image: https://media.designdetails.io/library/f23d6915e9946e1b5a3f0be4189e6179c70d0b7f2175bf692942423b6e247605/og_image-8cf45e18-2026-11-11T07-28-10-738Z.webp
- Full-page video: https://media.designdetails.io/library/a4a337f58a04c65e65f4580b8458a6a2a4d2810d8a8b737819f5b8784a6d0cdf/motion-1794387495692.mp4
- Video poster: https://media.designdetails.io/library/6900e679d86e1dbc6c92d1548f0111a7093ac23c20c12666d067449e441697a3/motion-poster-1794387495692.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 With Background Imagery
- Logo Strip
- Feature Collection
- Stat Block
- Primary Button
- Text Link
- Footer
- Bento Style Feature Grids
- Numbered Process Steps

## Quality rubric

Overall: 54.13/100 (Competent)
Evidence coverage: 80%
Judge tier: Competent
Verdict: Affinity's site presents a polished, well-organized B2B SaaS marketing page: a confident serif/sans typographic pairing, a disciplined deep-purple-and-cream palette, and clear content segmentation for PE and VC audiences. Execution within its chosen corporate-fintech idiom is generally clean—spacing is generous, hierarchy is legible, and feature copy is matched to parallel layouts. However, the structural playbook (client-logo marquee, numbered 01-05 capability steps, sticky bento-style platform diagram, large stat block, exhaustive footer sitemap) is now a widely shared template pattern across contemporary AI/B2B SaaS sites, which caps how much credit originality can earn despite the tasteful typeface and color choices. Motion evidence is too thin to confirm smooth or sophisticated interaction quality, so it is treated as inconclusive rather than credited. Altogether this reads as a competent, professionally executed corporate site rather than one built on several hard-to-substitute design ideas.

- Typography (15%): 60 — A distinctive serif display (Abcarizonamix) is paired consistently with a utilitarian sans (Booton) across hero, section heads, stats, and eyebrow labels. Scale steps (64/48/32/24/18px) and tightened tracking on display sizes (-1.9px, -1.4px) show deliberate tuning. However, body/UI sizes (14px, 11.2px uppercase) and link styling are generic SaaS conventions, and the serif/sans contrast itself is a common premium-brand device rather than a developed typographic system.
- Color (10%): 64 — A controlled palette of deep purple (#3B0D3A), near-black text (#1E0E1D), and off-white canvas (#F9F7F5) is applied consistently across hero, dark feature bands, and footer, with sparing accent use of chartreuse (#CDEC3E) and pale yellow (#FFEAA8) for eyebrow/tag highlights. Contrast handling between white text on purple and dark text on cream appears intentional. The palette is attractive and on-brand for 'premium fintech' but is a very familiar deep-purple SaaS convention with limited risk-taking.
- Layout (20%): 62 — The page follows a clear, spacious, and legible structure: hero, logo marquee, feature intro, tabbed process animation, numbered 01-05 step grid, sticky-panel bento diagrams cycling through platform capabilities, a stat block, and a comprehensive footer sitemap. Section rhythm and alignment are consistent and well-paced. However, this exact sequence (marquee → feature cards → numbered process → stat block → bento platform diagram → footer) is now a widely recognized template grammar for AI/B2B SaaS marketing sites, so while execution is clean, the layout itself breaks little new ground.
- Motion (20%): Inconclusive — Captured frames show tab-driven content swapping in the sticky platform panel (Activity capture → Relationship Intelligence → agents → open platform) and a looping/typing 'Finding the warmest path…' loader state, indicating some built interactivity exists. However, insufficient continuous frames were captured to assess easing, frame smoothness, or whether transitions are scroll-triggered versus simple visibility swaps, so motion quality cannot be judged.
- Originality (25%): 38 — The overall concept—deep purple 'premium fintech' palette, serif display headline over sans body, horizontal client-logo marquee, numbered 01-05 capability steps, sticky bento-style platform diagram, and a closing large-number stat block—closely mirrors a now-common template pattern used across many current AI/B2B SaaS marketing sites. Aside from the specific serif typeface choice and illustrative relationship-graph imagery, there is little here that could not be substituted with another vendor's near-identical layout without changing the experience meaningfully.
- Content (10%): 60 — Content is reasonably well integrated with layout: PE vs VC messaging is split into parallel sections with matching card/checklist structure, stat metrics are paired with brand typography and accent color for emphasis, and the numbered-step copy aligns directly with the visual numbering and icon-like imagery. This produces a coherent narrative flow from problem to capability to proof, though the integration mostly follows expected convention rather than inventive copy/visual fusion.

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

A warm photo of two people in conversation sets a relationship-first tone before the serif headline even loads, grounding an AI CRM in human trust. Deep plum panels with glowing node diagrams break up the long scroll into clear chapters, while repeated pill-shaped workflow labels keep the dense product story easy to scan.

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