# Tribe AI — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.tribe.ai/
Captured: 2026-11-06
CSS measured: 2026-11-06T17:32:53.891Z at 1440×1000 — https://www.tribe.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

Tribe AI's homepage uses a minimalistic, spacious design with a focus on elegant typography, subtle graphic elements (dots, rings), and a highly animated scroll experience. The color palette features a dominant light canvas (FAFAF8) with a dark canvas footer (06141B). Brand colors include vibrant blues (65D9EE, 0A99C3) and warm oranges/browns (FF7C0F, AD5913) that accent specific sections, especially the scroll-triggered methodology cards. Typography is split between 'TribeSerif' for sophisticated display/headings and 'TribeSans'/'TribeCaption' for clean, readable body copy and UI elements. The motion design is central to the visual storytelling, driving the user through different conceptual

## Classification

- Industry: ai
- Site type: Landing
- Business model: Not identified
- Styles: minimal, typographic, corporate, data-visualization-inspired, scroll-narrative
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: TribeSerif — weight 300; size 48px; line-height 56px; tracking normal; Regular (95% role confidence, computed values)
- Heading: TribeSerif — weight 300; size 30px; line-height 41.3px; tracking normal; Regular (80% role confidence, computed values)
- Body: TribeSans — weight 400; size 18px; line-height 27px; tracking normal; Regular (90% role confidence, computed values)
- Mono: TribeCaption — weight 400; size 12px; line-height 16px; tracking 0.6px; uppercase (80% role confidence, computed values)

## Functional palette

- Canvas — canvas #FAFAF8: color-2: computed rgb(250, 250, 248); AI role: FAFAF8 is the primary light background color for most of the page. (95% role confidence, computed values)
- Text — text #06141B: color-1: computed rgb(6, 20, 27); AI role: 06141B is the primary dark text color used against the light canvas. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: FFFFFF is used for editorial card backgrounds. (80% role confidence, computed values)
- Accent — accent #65D9EE: color-5: computed rgb(101, 217, 238); AI role: 65D9EE is a bright blue accent used in glowing shapes and specific UI elements. (80% role confidence, computed values)
- Accent — accent #FF7C0F: color-9: computed rgb(255, 124, 15); AI role: FF7C0F is used as a prominent background for the 'Activate' card. (80% role confidence, computed values)
- Muted Text — muted text #8A8276: color-12: computed rgb(138, 130, 118); AI role: 8A8276 is used for secondary elements and thin line graphics. (70% 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": "TribeSans",
    "fontStack": "TribeSans, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 337,
    "contexts": [
      {
        "tag": "h1",
        "text": "AI that ships, scales, and compounds.",
        "top": -1,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "We embed. We build. We don't stop until it's in production.",
        "top": 999,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "T",
        "top": 3144,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "TribeSerif",
    "fontStack": "TribeSerif, serif",
    "weight": "300",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "The HipAI team has joined Tribe",
        "top": 10438,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Tribe AI joins Google Cloud’s Gemini Enterprise for Legal and Financial Services",
        "top": 10438,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Introducing our CTO",
        "top": 10438,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "TribeCaption",
    "fontStack": "TribeCaption, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Security & Compliance",
        "top": 11418,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Company",
        "top": 11688,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Offices",
        "top": 11688,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "TribeCaption",
    "fontStack": "TribeCaption, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Partners",
        "top": 10397,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Partners",
        "top": 10397,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Culture",
        "top": 10397,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "TribeCaption",
    "fontStack": "TribeCaption, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Start a conversation",
        "top": 892,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "View all insights",
        "top": 10048,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "View all coverage",
        "top": 10945,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "TribeSans",
    "fontStack": "TribeSans, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "22.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Enterprise AI has a context problem. Together, we’re taking on the hardest part: capturing how a…",
        "top": 10481,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ex-Stitch Fix and DocuSign engineering leader joins Tribe to scale its forward deployed engineering ",
        "top": 10481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "TribeSerif",
    "fontStack": "TribeSerif, serif",
    "weight": "300",
    "size": "30px",
    "lineHeight": "41.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "AI that ships, scales, and compounds.",
        "top": 11490,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "TribeSans",
    "fontStack": "TribeSans, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "SOC 2 Type II certified, Microsoft SSPA compliant. Your data — and the AI we build on it — stays ins",
        "top": 11487,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "TribeSerif",
    "fontStack": "TribeSerif, serif",
    "weight": "300",
    "size": "48px",
    "lineHeight": "56px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 40,
    "contexts": [
      {
        "tag": "span",
        "text": "M",
        "top": 2935,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "o",
        "top": 2935,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "s",
        "top": 2935,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "TribeSans",
    "fontStack": "TribeSans, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "About Us",
        "top": 11747,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Careers",
        "top": 11795,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Insights",
        "top": 11843,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "TribeCaption",
    "fontStack": "TribeCaption, sans-serif",
    "weight": "400",
    "size": "11px",
    "lineHeight": "16.5px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Sep 23, 2026",
        "top": 10585,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "·Jaclyn Rice Nelson",
        "top": 10585,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "·",
        "top": 10585,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "TribeSerif",
    "fontStack": "TribeSerif, serif",
    "weight": "300",
    "size": "36px",
    "lineHeight": "40px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 6942,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "c",
        "top": 6942,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "t",
        "top": 6942,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "TribeSans",
    "fontStack": "TribeSans, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "What does Tribe AI do for Fortune 1000 enterprises?",
        "top": 11949,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "How is Tribe AI different from McKinsey, Accenture, and other consulting firms for enterprise AI?",
        "top": 12003,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Why should a Fortune 500 CEO partner with Tribe AI to become an AI-native company?",
        "top": 12077,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#06141B",
    "alpha": 1,
    "cssValue": "rgb(6, 20, 27)",
    "count": 177,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 37,
        "property": "svg-fill"
      },
      {
        "tag": "h1",
        "text": "AI that ships, scales, and compounds.",
        "top": -1,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "We embed. We build. We don't stop until it's in production.",
        "top": 999,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FAFAF8",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 248)",
    "count": 17,
    "contexts": [
      {
        "tag": "body",
        "text": "(self.__next_f=self.__next_f||[]).push([0])self.__next_f.push([1,\"1:\\\"$Sreact.fragment\\\"\\n2:I[339756",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Start a conversation",
        "top": 11613,
        "property": "::before-background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 12177,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 9157,
        "property": "background"
      },
      {
        "tag": "article",
        "text": "PartnersThe HipAI team has joined TribeEnterprise AI has a context problem. Together, we’re taking o",
        "top": 10116,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FAFAF8",
    "alpha": 0.9490196078431372,
    "cssValue": "oklab(0.984542 -0.000701636 0.00254887 / 0.95)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -4,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#65D9EE",
    "alpha": 1,
    "cssValue": "rgb(101, 217, 238)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Ask ChatGPTWhat does Tribe AI do for Fortune 1000 enterprises?How is Tribe AI different from McKinse",
        "top": 11902,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#07404F",
    "alpha": 1,
    "cssValue": "rgb(7, 64, 79)",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "Ask ChatGPT",
        "top": 11910,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "What does Tribe AI do for Fortune 1000 enterprises?",
        "top": 11949,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#0A99C3",
    "alpha": 1,
    "cssValue": "rgb(10, 153, 195)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "MapWe surface the problems worth solving with AI — the ones where your data and institutional knowle",
        "top": 4160,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#AD5913",
    "alpha": 1,
    "cssValue": "rgb(173, 89, 19)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "BuildOur engineers work inside your org, against your real systems and constraints — and don't stop ",
        "top": 5400,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FF7C0F",
    "alpha": 1,
    "cssValue": "rgb(255, 124, 15)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "ActivateWe redesign how your people and agents work, spread early wins, and create the champions who",
        "top": 6640,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#EBEBE2",
    "alpha": 1,
    "cssValue": "rgb(235, 235, 226)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Start a conversation",
        "top": 892,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 10124,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#C3D0D8",
    "alpha": 1,
    "cssValue": "rgb(195, 208, 216)",
    "count": 25,
    "contexts": [
      {
        "tag": "p",
        "text": "AI that ships, scales, and compounds.",
        "top": 11490,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Join us",
        "top": 11623,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "About Us",
        "top": 11747,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#8A8276",
    "alpha": 1,
    "cssValue": "rgb(138, 130, 118)",
    "count": 38,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9230,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#05141B",
    "alpha": 0.5490196078431373,
    "cssValue": "oklab(0.182061 -0.015542 -0.0192232 / 0.55)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Enterprise AI has a context problem. Together, we’re taking on the hardest part: capturing how a…",
        "top": 10481,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#B2F3FF",
    "alpha": 1,
    "cssValue": "rgb(178, 243, 255)",
    "count": 116,
    "contexts": [
      {
        "tag": "span",
        "text": "W",
        "top": 4652,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#F4C29D",
    "alpha": 1,
    "cssValue": "rgb(244, 194, 157)",
    "count": 108,
    "contexts": [
      {
        "tag": "span",
        "text": "O",
        "top": 5919,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#06141C",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.182061 -0.015542 -0.0192232 / 0.5)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Sep 23, 2026",
        "top": 10585,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#07141B",
    "alpha": 0.6,
    "cssValue": "oklab(0.182061 -0.015542 -0.0192232 / 0.6)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Partners",
        "top": 10397,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#6D1D00",
    "alpha": 1,
    "cssValue": "rgb(109, 29, 0)",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "A",
        "top": 6942,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#07141B",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.182061 -0.015542 -0.0192232 / 0.15)",
    "count": 28,
    "contexts": [
      {
        "tag": "span",
        "text": "Partners",
        "top": 10397,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "",
        "top": 919,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFFFFF",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)",
    "count": 20,
    "contexts": [
      {
        "tag": "a",
        "text": "",
        "top": 12163,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#C7BDB2",
    "alpha": 1,
    "cssValue": "rgb(199, 189, 178)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 37,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#A9A197",
    "alpha": 1,
    "cssValue": "rgb(169, 161, 151)",
    "count": 6,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 36,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#06141B",
    "alpha": 0.7019607843137254,
    "cssValue": "oklab(0.182061 -0.015542 -0.0192232 / 0.7)",
    "count": 20,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 10589,
        "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 spacing, particularly vertical, to accommodate scroll-linked animations.
- Corner style: Slightly rounded corners on cards and buttons.
- Radius: Small border-radius visible on the colored methodology cards and editorial cards.
- Borders: Thin, subtle borders used primarily for outline buttons and some logo containers.
- Buttons: Pill-shaped or rounded-rectangle buttons, using either solid fill (primary) or thin borders (outline).
- Content width: Centered content with wide margins, creating a focused central column.
- Density: Very low density, highly spacious to allow focus on singular statements and animated graphics.
- Evidence: Observed via general layout structure, card shapes, and generous whitespace between sections.

## Sections

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

1. **Navbar — Tribe AI Navbar** (Home)
   A sparse bar with a centered mark and a small menu icon leaves the page quiet and puts attention on the hero.
   Capture: 1440×96px; page bounds 0–96px of 12712px; source section ID: `6b7a1f86-96ce-40ae-9b59-e3b622fb638c`; image: https://media.designdetails.io/library/e56856fadbae13978dd73cab6c27b11462de589a442454f14724758963a725cc/6b7a1f86-96ce-40ae-9b59-e3b622fb638c.webp
   SECTION.md v3.2: `6b7a1f86-96ce-40ae-9b59-e3b622fb638c` (deterministic evidence; editorial review pending)
2. **Hero — Centered serif headline with logo strip** (Home)
   A large serif headline over faint orbit lines and glowing blobs states the promise at once, while a logo row below adds credibility.
   Capture: 1440×904px; page bounds 96–1000px of 12712px; source section ID: `69240b23-8441-4d14-82e7-c4a079b8fcb3`; image: https://media.designdetails.io/library/e88872cb76d93af8125d8182a65eabbd501080dcc5e027650aeae2e60b2d68ea/69240b23-8441-4d14-82e7-c4a079b8fcb3.webp
   SECTION.md v3.2: `69240b23-8441-4d14-82e7-c4a079b8fcb3` (deterministic evidence; editorial review pending)
3. **Other — Scroll statement with orbit diagram** (Home)
   A centered serif statement above a geometric diagram sets the stance, and the problem text below gives the next section a clear starting point.
   Capture: 1440×923px; page bounds 1000–1923px of 12712px; source section ID: `b71c3c3f-0bec-4bf7-b4d4-481244651ca9`; image: https://media.designdetails.io/library/571a70076c39c50deef9ddef01909ef439dcbb4e6211a4cc155ac6f88afaf6e9/section-manual-b71c3c3f-0bec-4bf7-b4d4-481244651ca9-1793993489319.webp
   SECTION.md v3.2: `b71c3c3f-0bec-4bf7-b4d4-481244651ca9` (deterministic evidence; editorial review pending)
4. **Process — Three-step animated map, build, activate** (Home)
   Colored cards appear in turn against a radial backdrop, so each step has its own color and short description that visitors can follow in order.
   Capture: 960×600px; page bounds 3080–8400px of 12712px; source section ID: `d26aafa4-6e4c-4a74-90fb-b326c2e3acb3`; image: https://media.designdetails.io/library/0633cf26fc071b9ee5372edbf7ac65ca01add477f94f561775f81d4903faf62f/d26aafa4-6e4c-4a74-90fb-b326c2e3acb3.webp
   SECTION.md v3.2: `d26aafa4-6e4c-4a74-90fb-b326c2e3acb3` (deterministic evidence; editorial review pending)
5. **Editorial — Three-card insights article row** (Home)
   Cards with image, tag, serif title, excerpt and date share one structure, so visitors can scan the latest posts and pick one.
   Capture: 1440×917px; page bounds 9808–10725px of 12712px; source section ID: `972fde06-d505-44a8-a7c2-5b1878383542`; image: https://media.designdetails.io/library/dc8a128a64593d68a3df4b8ba1169e4ac9067992665c18d06de1bc775495cfa9/972fde06-d505-44a8-a7c2-5b1878383542.webp
   SECTION.md v3.2: `972fde06-d505-44a8-a7c2-5b1878383542` (deterministic evidence; editorial review pending)
6. **Logo Cloud — Press coverage logo strip** (Home)
   Grayscale media logos in one white strip keep a uniform look and signal press credibility without competing with other content.
   Capture: 1440×597px; page bounds 10725–11322px of 12712px; source section ID: `7b3a7536-8965-4a2f-85ec-7c3b81fa1019`; image: https://media.designdetails.io/library/76b9716c9b7ecd8da3d9e35d7b017fd04606cc1f1c28d86dd7acb25c4d340594/7b3a7536-8965-4a2f-85ec-7c3b81fa1019.webp
   SECTION.md v3.2: `7b3a7536-8965-4a2f-85ec-7c3b81fa1019` (deterministic evidence; editorial review pending)
7. **Footer — Dark footer with oversized wordmark** (Home)
   Grouped link columns, a compliance note and a huge faded wordmark give clear navigation and a memorable closing brand moment.
   Capture: 1440×1390px; page bounds 11322–12712px of 12712px; source section ID: `8d917ef3-90e5-462f-9534-8051f7130023`; image: https://media.designdetails.io/library/bba9c06ce633b40baccde6f8f65be12befcf1ccca4fb70f58877ed0e0fe9ca8c/8d917ef3-90e5-462f-9534-8051f7130023.webp
   SECTION.md v3.2: `8d917ef3-90e5-462f-9534-8051f7130023` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/67f0a27267b47541e6406d7a0d2bad8125a3a0f126f852f6e27e2d564b365893/desktop_full-92503b16-2026-11-06T17-32-53-905Z.webp
- Mobile screenshot: Not captured
- Open Graph image: https://media.designdetails.io/library/827a0d5427197f56272c6cdb1c5b96cb8bc037356d5acd0f8a533a362f8699d4/og_image-92503b16-2026-11-06T17-33-03-656Z.webp
- Full-page video: https://media.designdetails.io/library/e809387b62497a6fb0a6cc97f6f1915a73336b1dc1b3e51e43dd1fff2c29cac4/motion-1793987771975.mp4
- Video poster: https://media.designdetails.io/library/97a6126413e8329d7e1fdc25b54fd7a90e002cec88764a34948253c6b718fa31/motion-poster-1793987771975.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
- Logo Strip
- Editorial Card
- Primary Button
- Outline Button
- Footer
- Feature Card
- Sticky Scroll Section
- Stacked Card Reveal
- Animated Graphic Background

## Quality rubric

Overall: 61.6/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Tribe AI's homepage builds a legible, well-crafted scroll-driven narrative: a restrained neutral palette punctuated by thematically color-coded accents, a disciplined three-tier type system pairing a light serif for statements with clean sans body and caption text, and a motion system that pins text while orbital dot graphics assemble, disperse, and reform across the hero, methodology, and partnership sections — all confirmed reversible on scroll-up. This is a genuine multi-section system, not a single hero trick, and the 'Ask an AI about Tribe' footer module shows real thought about tying subject matter to interaction. However, the ambition tapers: after the methodology cards, the page reverts to conventional editorial/press card grids and a standard dark footer, leaving the distinctive visual language under-extended. The scroll-narrative and stacked-card mechanisms, while well executed, are recognizable patterns from the current SaaS/agency playbook rather than a hard-to-substitute original idea, and the recording shows moments of overlapping or garbled text during fast scroll transitions that compromise legibility. The result is a competent, cohesive, good-tier execution of a currently fashionable idiom rather than a landmark or highly original system.

- Typography (15%): 66 — A deliberate three-role type system (TribeSerif light-weight display/headings, TribeSans body, TribeCaption uppercase labels with tracking) gives the page a consistent editorial voice. Scale steps (48/36/30/24px display-to-heading, 18px body, 11-14px caption) are used with intent, and the light serif weight against clean sans creates a legible, sophisticated contrast. It stays safe and conventional rather than pushing typographic expression further (no unusual cuts, scale jumps, or kinetic type beyond fades).
- Color (10%): 64 — A neutral canvas/text base (FAFAF8/06141B) is punctuated by a tight set of saturated accents (cyan 65D9EE, blue 0A99C3, orange FF7C0F, brown AD5913) reserved for the hero blur shapes and the three methodology cards, giving a legible system where color signals conceptual stage (Map/Build/Activate). The dark footer (06141B) provides clear closure contrast. However, once past the methodology section the palette reverts to generic white/gray cards and logo strips, so the accent system doesn't carry through the whole page.
- Layout (20%): 64 — The page follows a coherent sectioned scrollytelling structure: centered hero, pinned-text/animated-graphic pairing, sticky-left stacked-card reveal, logo grids, three-up editorial cards, and a dark footer — all built on a consistent centered column with generous margins. The structure is legible and consistently spaced, but the overall pattern (sticky text + animated graphic, then conventional card grids) is a standard template for this genre rather than a distinctive spatial system.
- Motion (20%): 68 — Motion is the clear organizing device: scroll-scrubbed hero blur shapes contracting into dots, a sticky-left/stacked-card-reveal methodology section, dispersing/reforming constellation graphics tying partnership and news sections together, and animations confirmed reversible on scroll-up. This is a genuinely integrated multi-section motion system, not a single hero effect. However, the recording shows transient legibility problems during transitions — decorative dots overlapping body copy ('ind us ry expertise') and card text overlapping mid-swap ('We re ign how o ur peop e a d ag ts work') — indicating the scroll-scrubbing isn't fully resolved at all scrub speeds.
- Originality (25%): 50 — The orbital-rings/dot-constellation motif is thematically appropriate for an AI company (networks, nodes, embeddings) and is applied with some consistency, which is a point in its favor. But the overall mechanism — pinned text with scroll-driven decorative graphics, followed by a stacked-card reveal, followed by standard editorial/press/footer sections — is now a widely used template across SaaS and agency sites. Nothing here is a hard-to-substitute idea; swap the dot graphic for particles or lines and the structure is unchanged.
- Content (10%): 64 — Content is reasonably well integrated with the visual system: methodology card copy sits inside the colored cards it describes, partner/press logos are organized into clean grids, editorial insight cards combine image, category tag, title, and byline consistently, and the footer's 'Ask an AI about Tribe' section cleverly ties the AI subject matter into the UX itself. This shows above-average thought about tying message to form, even if the later grid sections are visually generic.

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

## Curator notes

Thin orbiting line circles and small glowing colour blobs sit behind large serif headlines, giving a technical yet calm backdrop for a dense AI topic. Logos in a muted row build trust early, while solid blue, brown and orange panels break the long scrolling page into clear, easy to scan chapters.

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