# Artificial Societies | Understand People — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://societies.ai/
Captured: 2026-10-29
CSS measured: 2026-10-29T16:59:40.235Z at 1440×1000 — https://societies.ai/
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 website employs a sophisticated, editorial design language characterized by a stark contrast between a minimalist, airy layout and rich, textured imagery. The typography pairs a delicate, expressive serif for headings with a clean, functional sans-serif for body copy. The color palette is predominantly monochromatic (black and white) with subtle off-white surfaces, allowing the full-bleed photography and abstract textural elements to stand out. Layouts rely on strict grid alignments, generous whitespace, and sharp, squared-off components that convey a serious, corporate, yet highly polished B2B aesthetic.

## Classification

- Industry: other
- Site type: Portfolio
- Business model: Portfolio
- Styles: editorial, minimal, corporate, sophisticated, architectural
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: martina — weight 400; size 40px; line-height 48px; tracking normal; Regular (90% role confidence, computed values)
- Heading: martina — weight 400; size 32px; line-height 38.4px; tracking normal; Regular (90% role confidence, computed values)
- Body: grotesk — weight 400; size 16px; line-height 20.8px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively as the primary background color for the page body. (100% role confidence, computed values)
- Text — text #1C1A16: color-3: computed rgb(28, 26, 22); AI role: Near black (#1C1A16) used for primary typography against light backgrounds. (100% role confidence, computed values)
- Surface — surface #F4F4F0: color-2: computed rgb(244, 244, 240); AI role: Off-white (#F4F4F0) used for the background of feature cards and the newsletter input. (90% role confidence, computed values)
- Muted Text — muted text #8C8880: color-4: computed rgb(140, 136, 128); AI role: Grey (#8C8880) used for secondary or less prominent text like locations and category labels. (90% role confidence, computed values)
- Border — border #E6E6E4: color-13: computed rgb(230, 230, 228); AI role: Light grey (#E6E6E4) used as a top border for the footer section. (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": "grotesk",
    "fontStack": "grotesk, \"grotesk Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 32,
    "contexts": [
      {
        "tag": "p",
        "text": "We’re building the foundation model of human societies for the world’s most consequential decisions.",
        "top": 809,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“What we were able to accomplish with Artificial Societies would simply have been impossible with tr",
        "top": 1466,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Senior Managing Director, Global Head of Research",
        "top": 1841,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "grotesk",
    "fontStack": "grotesk, \"grotesk Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Trusted by",
        "top": 1998,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Solutions",
        "top": 5886,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Solutions",
        "top": 10037,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "grotesk",
    "fontStack": "grotesk, \"grotesk Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 41,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Unfolding Societies",
        "top": 15,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Live on Tuesday 3 November at 16:30 GMT",
        "top": 15,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "martina",
    "fontStack": "martina, \"martina Fallback\", Georgia, \"Times New Roman\", serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "We",
        "top": 1221,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "combine",
        "top": 1221,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "deep",
        "top": 1221,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "martina",
    "fontStack": "martina, \"martina Fallback\", Georgia, \"Times New Roman\", serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Simulate",
        "top": 397,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "decisions",
        "top": 397,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "that",
        "top": 445,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "grotesk",
    "fontStack": "grotesk, \"grotesk Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "label",
        "text": "Email address",
        "top": 10069,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sign up for updates",
        "top": 10088,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "grotesk",
    "fontStack": "grotesk, \"grotesk Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Weighing earnings calls and market",
        "top": 822,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "signals across a global equities book.",
        "top": 835,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "grotesk",
    "fontStack": "grotesk, \"grotesk Fallback\", \"Helvetica Neue\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "13.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "New York, USA",
        "top": 863,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "martina",
    "fontStack": "martina, \"martina Fallback\", Georgia, \"Times New Roman\", serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "28.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "Strategic Comms",
        "top": 5912,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Crisis & Issues",
        "top": 5948,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Market Expansion",
        "top": 5984,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 33,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to contentUnfolding SocietiesLive on Tuesday 3 November at 16:30 GMTLive on 3 NovemberRegisterH",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 13,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Live on Tuesday 3 November at 16:30 GMT",
        "top": 15,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4F4F0",
    "alpha": 1,
    "cssValue": "rgb(244, 244, 240)",
    "count": 8,
    "contexts": [
      {
        "tag": "div",
        "text": "Portfolio Manager, Tarnbrook CapitalWeighing earnings calls and marketsignals across a global equiti",
        "top": 776,
        "property": "background"
      },
      {
        "tag": "li",
        "text": "3m+ nuanced personasBuilt from what real people say and do.",
        "top": 9302,
        "property": "background"
      },
      {
        "tag": "form",
        "text": "Email addressSign up for updates",
        "top": 10070,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#1C1A16",
    "alpha": 1,
    "cssValue": "rgb(28, 26, 22)",
    "count": 102,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to content",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "aside",
        "text": "Unfolding SocietiesLive on Tuesday 3 November at 16:30 GMTLive on 3 NovemberRegister",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 59,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#8C8880",
    "alpha": 1,
    "cssValue": "rgb(140, 136, 128)",
    "count": 21,
    "contexts": [
      {
        "tag": "div",
        "text": "New York, USA",
        "top": 863,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Trusted by",
        "top": 1998,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Mix-method surveys",
        "top": 3763,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#0D1B38",
    "alpha": 0.47843137254901963,
    "cssValue": "rgba(13, 28, 57, 0.48)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1839,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#0E1C3A",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(13, 28, 57, 0.5)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1839,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#0D1D3A",
    "alpha": 0.45098039215686275,
    "cssValue": "rgba(13, 28, 57, 0.45)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1839,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#0D1C39",
    "alpha": 0.7607843137254902,
    "cssValue": "rgba(13, 28, 57, 0.76)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1417,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#0D1C39",
    "alpha": 0.38823529411764707,
    "cssValue": "rgba(13, 28, 57, 0.39)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1839,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#C8C4BE",
    "alpha": 1,
    "cssValue": "rgb(200, 196, 190)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "By submitting your details you consent to receive marketing emails from Artificial Societies. See ou",
        "top": 10132,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Privacy Policy",
        "top": 10144,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFFFF",
    "alpha": 0.6980392156862745,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Senior Managing Director, Global Head of Research",
        "top": 1841,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0 0 0 / 0.7)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Weighing earnings calls and market",
        "top": 822,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#E6E6E4",
    "alpha": 1,
    "cssValue": "rgb(230, 230, 228)",
    "count": 1,
    "contexts": [
      {
        "tag": "footer",
        "text": "SolutionsCustomer StoriesQuality CheckLive Focus GroupLive SocietyTalk of the TownDaily DemoBudget S",
        "top": 10016,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.6,
    "cssValue": "rgba(255, 255, 255, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Unfolding Societies",
        "top": 15,
        "property": "text"
      }
    ]
  }
]
```

### 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 distinct sections, with tight, controlled margins within component grids (like the testimonial and feature cards).
- Corner style: Strictly sharp, squared corners (0px border-radius) are used consistently across buttons, cards, and image frames.
- Radius: No visible border-radius applied to major structural elements.
- Borders: Minimal use of borders; when present, they are thin (1px) and solid, such as the footer separator.
- Buttons: Buttons are sharp-cornered rectangles, typically styled as solid dark blocks with light text or light blocks with dark text.
- Content width: Content spans wide, but adheres to a structured, multi-column grid that aligns text blocks and images precisely.
- Density: Low density; the design leverages substantial whitespace to give typographic and photographic elements breathing room.
- Evidence: Visual inspection of the sharp-edged feature cards (Color 2 backgrounds), the solid black 'Book demo' button, and the wide margins isolating text blocks in the middle sections.

## Sections

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

1. **Navbar — Artificial Societies | Understand People Navbar** (Home)
   A thin event banner above a compact link row keeps navigation quiet while a boxed demo button stands out as the action.
   Capture: 1440×102px; page bounds 0–102px of 7925px; source section ID: `437ab77a-514e-42b7-9752-ad144d8f16a2`; image: https://media.designdetails.io/library/26e085ec62c5e3df3c6fd6f5600db07775e7a70cb036346590b2be02b80ff247/437ab77a-514e-42b7-9752-ad144d8f16a2.webp
   SECTION.md v3.2: `437ab77a-514e-42b7-9752-ad144d8f16a2` (deterministic evidence; editorial review pending)
2. **Hero — Full-bleed photo hero with annotations** (Home)
   A large architectural photo with a light headline and floating data callouts shows the product's subject while the short statement stays readable.
   Capture: 1440×886px; page bounds 102–988px of 7925px; source section ID: `45c9baf0-83eb-426a-98c6-c3cf2e8753cf`; image: https://media.designdetails.io/library/c17d79ed715dc7fc55b844496e985b688ee5e9445fe6ce9d6d2dd7c4d6f17878/45c9baf0-83eb-426a-98c6-c3cf2e8753cf.webp
   SECTION.md v3.2: `45c9baf0-83eb-426a-98c6-c3cf2e8753cf` (deterministic evidence; editorial review pending)
3. **Testimonials — Intro statement above quote cards** (Home)
   Four textured painterly cards with short quotes and attributed roles let visitors scan customer proof in one row, with a large intro line giving context.
   Capture: 1440×930px; page bounds 988–1918px of 7925px; source section ID: `84cf1d61-fcb5-4734-a4d9-031e9d204071`; image: https://media.designdetails.io/library/e228839ba6ae17e744a2731e85a11a5a2367507a90eda5396b7c91864dbfc31d/84cf1d61-fcb5-4734-a4d9-031e9d204071.webp
   SECTION.md v3.2: `84cf1d61-fcb5-4734-a4d9-031e9d204071` (deterministic evidence; editorial review pending)
4. **Logo Cloud — Two-row monochrome client logos** (Home)
   Grey-black logos in an even grid under a small 'trusted by' label signal credibility without pulling attention from the content.
   Capture: 1440×234px; page bounds 1918–2152px of 7925px; source section ID: `b9c33e6a-2252-4f32-867c-dd290684bf53`; image: https://media.designdetails.io/library/2c5d30499c4ca4d88fdcff63b045b76f1224df2084ab2191aed9a172753ab04e/b9c33e6a-2252-4f32-867c-dd290684bf53.webp
   SECTION.md v3.2: `b9c33e6a-2252-4f32-867c-dd290684bf53` (deterministic evidence; editorial review pending)
5. **Other — Full-width architectural image with caption** (Home)
   A large muted photo with one small caption line sets the tone and breaks up text-heavy sections.
   Capture: 1440×1114px; page bounds 2152–3266px of 7925px; source section ID: `72906c5f-a985-450e-9ae5-700cee4a995c`; image: https://media.designdetails.io/library/43b919697403595ddbc60aace4ee6c67e4a7fcf1872ffe616ca502e562ca264f/72906c5f-a985-450e-9ae5-700cee4a995c.webp
   SECTION.md v3.2: `72906c5f-a985-450e-9ae5-700cee4a995c` (deterministic evidence; editorial review pending)
6. **Process — Centered list of research methods** (Home)
   A stacked serif list with one method highlighted and others greyed shows a sequence of methods in a simple, readable form.
   Capture: 1440×910px; page bounds 3266–4176px of 7925px; source section ID: `f587aad9-3b9d-4f08-b4b6-2e6dc036f38e`; image: https://media.designdetails.io/library/ed77bd7f864e8f221f04006d0f465aec000193220ee03e5d9aca622e96fec4d2/f587aad9-3b9d-4f08-b4b6-2e6dc036f38e.webp
   SECTION.md v3.2: `f587aad9-3b9d-4f08-b4b6-2e6dc036f38e` (deterministic evidence; editorial review pending)
7. **CTA — Single dark solutions button** (Home)
   A solid dark button on a wide white field is a clear, high-contrast prompt to explore the offerings.
   Capture: 1440×772px; page bounds 4176–4948px of 7925px; source section ID: `27bced91-3b61-43f3-9650-8bec8570c776`; image: https://media.designdetails.io/library/7a51d25270f588d0dc134dcfedb9d19deead0b19d8dc846993c9263a48c62452/27bced91-3b61-43f3-9650-8bec8570c776.webp
   SECTION.md v3.2: `27bced91-3b61-43f3-9650-8bec8570c776` (deterministic evidence; editorial review pending)
8. **Features — Tabbed solution list beside framed art** (Home)
   A vertical list with the active item in black and the rest in grey lets visitors switch topics, while the framed artwork gives a visual anchor.
   Capture: 1440×534px; page bounds 4948–5482px of 7925px; source section ID: `0517023b-08ab-41fb-8021-836a3e5cd1d7`; image: https://media.designdetails.io/library/9e50cf89a2239fe4183b4ed82f9a82a9c09bc6e3c46897f65fb80150e36fdcfa/0517023b-08ab-41fb-8021-836a3e5cd1d7.webp
   SECTION.md v3.2: `0517023b-08ab-41fb-8021-836a3e5cd1d7` (deterministic evidence; editorial review pending)
9. **Other — Solution description with artwork base** (Home)
   A short description with a learn more link continues the selected solution, and the artwork's shadow ties it to the layout above.
   Capture: 1440×494px; page bounds 5482–5976px of 7925px; source section ID: `8d77abe8-19a3-4f8c-ade6-e4a4d1422e9e`; image: https://media.designdetails.io/library/354353b07ca878d612496397be4284fe905a76b41834967176cfa9077031f536/8d77abe8-19a3-4f8c-ade6-e4a4d1422e9e.webp
   SECTION.md v3.2: `8d77abe8-19a3-4f8c-ade6-e4a4d1422e9e` (deterministic evidence; editorial review pending)
10. **Gallery — Wide tree-lined avenue photograph** (Home)
   A wide photograph with strong converging lines draws the eye to the centre and adds a human scale to the page.
   Capture: 1440×850px; page bounds 5976–6826px of 7925px; source section ID: `c5d66f3c-7cf8-44b1-bad3-4b8123b40de0`; image: https://media.designdetails.io/library/804957e9f98881be65b9e49dc440f7313b3b8dd5132abe5d7b1a13a04fb9fa9a/c5d66f3c-7cf8-44b1-bad3-4b8123b40de0.webp
   SECTION.md v3.2: `c5d66f3c-7cf8-44b1-bad3-4b8123b40de0` (deterministic evidence; editorial review pending)
11. **Features — Two-column grid of benefit cards** (Home)
   Pale cards with bold short titles and one-line descriptions make each capability quick to scan, with a demo button nearby.
   Capture: 1440×474px; page bounds 6826–7300px of 7925px; source section ID: `2b06c6a9-a2a0-4aa0-bd29-dd7a2b46d10a`; image: https://media.designdetails.io/library/6b251df478b7fdb579f59afb434e869a755468d0ab9ab35c02ff2fac2aa74773/2b06c6a9-a2a0-4aa0-bd29-dd7a2b46d10a.webp
   SECTION.md v3.2: `2b06c6a9-a2a0-4aa0-bd29-dd7a2b46d10a` (deterministic evidence; editorial review pending)
12. **Footer — White spacer above footer** (Home)
   Open space separates the content from the footer so the closing links read as a distinct area.
   Capture: 1440×240px; page bounds 7300–7540px of 7925px; source section ID: `a2e9655f-4027-48ca-b319-989dd750aa6f`; image: https://media.designdetails.io/library/0c32116a4c38f4d96a39a83832001fbaeb8303e89ebfb95d5926ffbaf7a7abcd/a2e9655f-4027-48ca-b319-989dd750aa6f.webp
   SECTION.md v3.2: `a2e9655f-4027-48ca-b319-989dd750aa6f` (deterministic evidence; editorial review pending)
13. **Footer — Footer with signup and link columns** (Home)
   A signup box, grouped link columns and a large wordmark give tidy wayfinding with clear hierarchy.
   Capture: 1440×385px; page bounds 7540–7925px of 7925px; source section ID: `6285de51-2da1-4206-854e-1d68e83f0421`; image: https://media.designdetails.io/library/c78be6d94aeb156af40a670b5f3e52acc2aeed47fb471292da73ee1cd93556ce/6285de51-2da1-4206-854e-1d68e83f0421.webp
   SECTION.md v3.2: `6285de51-2da1-4206-854e-1d68e83f0421` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/4878e4c7e92e3b3e4873c311fd6a74373bf411594a3284802ee834fb9251167c/desktop_full-55b298b0-2026-10-29T16-59-40-246Z.webp
- Mobile screenshot: https://media.designdetails.io/library/91fed2fc37b6cc0540a84c4ffb6fcbc8964979d73e9ddcbd9598ad844c47dc81/mobile_full-55b298b0-2026-10-29T17-00-20-638Z.webp
- Open Graph image: https://media.designdetails.io/library/71ac5677955422e512b17baba8269bc92b5bb6c45c286794d37c7ff9b1906722/og_image-55b298b0-2026-10-29T16-59-48-785Z.webp
- Full-page video: https://media.designdetails.io/library/60c312ee8cdf37bb4ff87aa2a062d2c6b8dbc64f186ae2953e316e609457b962/motion-1793296734558.mp4
- Video poster: https://media.designdetails.io/library/9a276ebcd35464e51237bfdd8f45341d6edb97a099a609ac7d43f8a84cb0d2e3/motion-poster-1793296734558.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

- Tabs
- Feature Collection
- Newsletter Form
- Footer
- Floating Annotations
- Vertical Tabbed Gallery
- Announcement Bar
- Navigation Bar
- Hero With Background Imagery
- Testimonial Card
- Logo Strip

## Quality rubric

Overall: 61.5/100 (Good)
Evidence coverage: 80%
Judge tier: Good
Verdict: Artificial Societies presents a polished, editorial B2B design built on a disciplined grid, a serif/sans typographic pairing, and a restrained monochrome palette that lets large-format architectural photography and abstract-textured testimonial cards carry visual interest. The hero's building-with-persona-annotations is a legitimately clever, content-specific idea that ties the 'simulate decisions' pitch to the imagery, and the feature-card and vertical-tab sections show a consistent, well-structured system rather than one-off flourishes. That said, much of the surrounding visual language — off-white cards on white canvas, near-black text, logo strip, generic full-bleed travel/architecture photography between sections — closely tracks a very familiar 'sophisticated AI startup' template currently common across the sector, so originality is only moderate. Motion could not be verified at all, which is a meaningful gap given its 20% weight. The result is a competent, good-tier execution of a popular idiom rather than a landmark or highly distinctive design.

- Typography (15%): 66 — A confident serif/sans pairing (Martina display serif at 40/32/24px against Grotesk body at 16/14/12px) gives clear hierarchy and an editorial tone. Sizes and line-heights are consistent across sections (hero, section intros, tab labels, feature cards), suggesting a real type scale rather than ad hoc sizing. However this exact pairing — delicate serif headline over functional grotesk body — is now a widely used convention in B2B/AI startup sites, so while well executed it is not distinctive.
- Color (10%): 62 — The palette is restrained and purposeful: near-black text (#1C1A16) on white/off-white (#FFFFFF/#F4F4F0) canvases, with a muted grey (#8C8880) for secondary text, allowing photography and textured testimonial backgrounds to carry visual interest. This is coherent and tasteful, but the exact off-white-card-on-white-canvas-with-near-black-text formula is extremely common in current SaaS/AI marketing sites, limiting distinctiveness.
- Layout (20%): 65 — The page uses a disciplined grid with generous whitespace, sharp-cornered cards, and a repeating module logic (hero, testimonial grid, logo strip, vertical-tab solution gallery, feature card grid, footer). The vertical-tab-plus-image-pane pattern for solutions is a coherent, structured idea executed consistently. Sections are legible and well-proportioned, though the overall structure (full-bleed hero image, logo strip, card grids, footer with subscribe) is a standard enterprise-marketing template shape.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference, so animation quality, transitions, scroll choreography, and the vertical-tab switching behavior cannot be verified.
- Originality (25%): 54 — The site's persona-annotation overlay on the hero building image (lines pointing to labeled 'personas' like 'Portfolio Manager, Tarnbrook Capital') is a clever, content-specific idea that ties the simulation concept to the visual. However, the broader visual language — monochrome editorial palette, serif/sans pairing, full-bleed architectural photography, abstract painterly testimonial cards, trusted-by logo strip — closely follows a now-established 'sophisticated AI/B2B editorial' template seen across many funded startups. The idea execution is good but not singular enough to be hard to substitute.
- Content (10%): 66 — Content and visuals are thoughtfully linked in places — the hero's annotated building directly visualizes 'simulating' different real people/personas, and feature cards pair concise claims with supporting detail (e.g., '86% distribution accuracy... comparable to human self-replication'). Testimonial backgrounds use abstract textures rather than generic stock photos, adding some visual identity to otherwise plain quote cards. Architectural and nature photography (building facades, colonnades, tree-lined paths) metaphorically reinforces themes of structure and society, though the connection is more atmospheric than explicit.

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

## Curator notes

A grand archive photo of a classical building, overlaid with small white dots and connecting lines labelled by job title, turns abstract audience simulation into a believable map of real people. Serif headlines and painterly abstract quote cards slow the pacing between data and testimonials, lending the heavy subject matter a calm, trustworthy mood.

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