# Scanbase — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.scanbase.com/
Captured: 2026-10-11
CSS measured: 2026-10-11T03:45:26.339Z at 1440×1000 — https://www.scanbase.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The website presents a modern, professional, and slightly technical aesthetic, aligning with its healthcare technology focus. It employs a high-contrast color palette, heavily featuring deep navy (color-2) and vibrant purple (color-4) alongside light gray canvases (color-3). Typography is clean and structured, utilizing the sans-serif typefaces Archivo for strong, geometric headings and Geist for highly legible body copy. Layouts are spacious and rhythmic, utilizing split-pane designs for core services and expansive, dark-themed sections for emphasis and footer content. Reusable patterns include pill-shaped call-to-action buttons with inline arrows and translucent feature cards.

## Classification

- Industry: health
- Site type: Blog
- Business model: Software, Agency
- Styles: minimal, corporate, typographic, tech-sleek
- Platform: Webflow
- Technology: Not identified

## Typography

- Display: Archivo — weight 400; size 80px; line-height 88px; tracking -4px; Regular (95% role confidence, computed values)
- Heading: Archivo — weight 400; size 48px; line-height 52.8px; tracking -2.4px; Regular (95% role confidence, computed values)
- Body: Geist — weight 400; size 18px; line-height 27px; tracking -0.9px; Regular (95% role confidence, computed values)
- Mono: PT Mono — weight 400; size 14.4px; line-height 18.7px; tracking normal; uppercase (90% role confidence, computed values)

## Functional palette

- Text — text #000000: color-12: computed rgb(0, 0, 0); AI role: Solid black (#000000) used for high-contrast body text and headings on light canvas areas. (95% role confidence, computed values)
- Canvas — canvas #F0F4F7: color-3: computed rgb(240, 244, 247); AI role: Light grayish-blue (#F0F4F7) used as the main background for the 'Core Services' and 'Introduction' sections. (90% role confidence, computed values)
- Surface — surface #1A0F3A: color-2: computed rgb(26, 15, 58); AI role: Deep navy (#1A0F3A) used for expansive sections like the 'Complete Algorithmic Lifecycle Support' and the Footer. (90% role confidence, computed values)
- Text — text #FFFFFF: color-9: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for headings and text overlays within dark sections like the Hero and Footer. (90% role confidence, computed values)
- Accent — accent #7D3BF4: color-4: computed rgb(125, 59, 244); AI role: Vibrant purple (#7D3BF4) used prominently as large block backgrounds behind the images in the core services list. (90% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Archivo",
    "fontStack": "Archivo, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "-2.4px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Core Services",
        "top": 1894,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Complete Algorithmic Lifecycle Support",
        "top": 5831,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Meet the Team Engineering the Future of Modern Healthcare",
        "top": 6974,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Archivo",
    "fontStack": "Archivo, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h3",
        "text": "Algorithm Design",
        "top": 2413,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "System Integration",
        "top": 3201,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Equipment Modernization",
        "top": 4004,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Archivo",
    "fontStack": "Archivo, sans-serif",
    "weight": "400",
    "size": "80px",
    "lineHeight": "88px",
    "letterSpacing": "-4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Computer Vision Powered At-home Tests",
        "top": 389,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Scanbase is a Y Combinator company dedicated to advancing modern healthcare.",
        "top": 514,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Connecting disparate systems for streamlined operations, enhanced collaboration, and improved produc",
        "top": 3257,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Upgrading existing equipment for improved performance, reliability, and compatibility with emerging ",
        "top": 4060,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "↳ View",
        "top": 4,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Innovative design and development of custom algorithms, tailored to meet unique medical diagnostic n",
        "top": 2469,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Our Process",
        "top": 6268,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "500",
    "size": "14.4px",
    "lineHeight": "18.7px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Contact Us",
        "top": 622,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About Us",
        "top": 1503,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Learn More",
        "top": 2587,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Design",
        "top": 6061,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Implement",
        "top": 6061,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Optimize",
        "top": 6391,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Home",
        "top": 9034,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "About",
        "top": 9034,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Solutions",
        "top": 9034,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "500",
    "size": "48px",
    "lineHeight": "55.2px",
    "letterSpacing": "-3.4px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Scanbase makes it easy to convert photos of rapid diagnostic tests into positive or negative results",
        "top": 1180,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "rapid diagnostic tests",
        "top": 1231,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "400",
    "size": "14.4px",
    "lineHeight": "18.7px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "2026",
        "top": 954,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "San Francisco",
        "top": 954,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Let's Connect",
        "top": 8860,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Geist",
    "fontStack": "Geist, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Introduction",
        "top": 1180,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PT Mono",
    "fontStack": "\"PT Mono\", sans-serif",
    "weight": "400",
    "size": "14.4px",
    "lineHeight": "18.7px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "SF . LA . SC",
        "top": 9388,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Archivo",
    "fontStack": "Archivo, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 344,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "About",
        "top": 399,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Solutions",
        "top": 454,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#E5E5E5",
    "alpha": 1,
    "cssValue": "rgb(229, 229, 229)",
    "count": 4,
    "contexts": [
      {
        "tag": "body",
        "text": "↳ ViewHomeAboutSolutionsFoundersContactComputer Vision Powered At-home TestsScanbase is a Y Combinat",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "HomeAboutSolutionsFoundersContact",
        "top": -68,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#1A0F3A",
    "alpha": 1,
    "cssValue": "rgb(26, 15, 58)",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "rapid diagnostic tests",
        "top": 1231,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "About Us",
        "top": 1491,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Complete Algorithmic Lifecycle SupportOur Process01DesignTransform your operations with expert desig",
        "top": 5651,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F0F4F7",
    "alpha": 1,
    "cssValue": "rgb(240, 244, 247)",
    "count": 49,
    "contexts": [
      {
        "tag": "h2",
        "text": "Computer Vision Powered At-home Tests",
        "top": 389,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Scanbase is a Y Combinator company dedicated to advancing modern healthcare.",
        "top": 514,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Contact Us",
        "top": 622,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#7D3BF4",
    "alpha": 1,
    "cssValue": "rgb(125, 59, 244)",
    "count": 13,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 606,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 0.4392156862745098,
    "cssValue": "rgba(0, 0, 0, 0.44)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 0.4588235294117647,
    "cssValue": "rgba(0, 0, 0, 0.46)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6712,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FFFFFF",
    "alpha": 0.1803921568627451,
    "cssValue": "rgba(255, 255, 255, 0.18)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Industry FocusScanbase serves the healthcare sector, providing innovative solutions to enhance opera",
        "top": 7772,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1E1E1F",
    "alpha": 1,
    "cssValue": "rgb(30, 30, 31)",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "↳ View",
        "top": 4,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Home",
        "top": 344,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Scanbase serves the healthcare sector, providing innovative solutions to enhance operational efficie",
        "top": 7935,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 35,
    "contexts": [
      {
        "tag": "h2",
        "text": "Complete Algorithmic Lifecycle Support",
        "top": 5831,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Our Process",
        "top": 6268,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Industry FocusScanbase serves the healthcare sector, providing innovative solutions to enhance opera",
        "top": 7772,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#333333",
    "alpha": 1,
    "cssValue": "rgb(51, 51, 51)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Introduction",
        "top": 1180,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "Core Services",
        "top": 1894,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Connecting disparate systems for streamlined operations, enhanced collaboration, and improved produc",
        "top": 3257,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#908F92",
    "alpha": 1,
    "cssValue": "rgb(144, 143, 146)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Scanbase makes it easy to convert photos of rapid diagnostic tests into positive or negative results",
        "top": 1180,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -40,
        "property": "background"
      },
      {
        "tag": "h3",
        "text": "Algorithm Design",
        "top": 2413,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "We’re Here to Help",
        "top": 8820,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#D7D9FF",
    "alpha": 1,
    "cssValue": "rgb(215, 217, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "↳ View",
        "top": -40,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FBFBFB",
    "alpha": 0.25098039215686274,
    "cssValue": "rgba(253, 253, 253, 0.25)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Contact Us",
        "top": 610,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#29292B",
    "alpha": 1,
    "cssValue": "rgb(41, 41, 43)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Algorithm DesignInnovative design and development of custom algorithms, tailored to meet unique medi",
        "top": 2069,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#BFBFBF",
    "alpha": 1,
    "cssValue": "rgb(191, 191, 191)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Home",
        "top": 344,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#E0E0E0",
    "alpha": 1,
    "cssValue": "rgb(224, 224, 224)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 8844,
        "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 rhythm with large padding between distinct page sections, allowing content to breathe.
- Corner style: Mixed approach: structural panels and images utilize sharp 90-degree corners, while interactive elements like buttons and some feature cards use rounded corners.
- Radius: Buttons feature a fully rounded, pill-shaped border-radius.
- Borders: Mostly borderless design relying on background color contrasts. Subtle 1px solid borders are seen on the glassmorphic feature cards (color-9).
- Buttons: Pill-shaped, filled buttons with dark surface colors, featuring light text and an inline rightward arrow for directional cue.
- Content width: Wide, expansive layouts that span significant portions of the viewport, often split 50/50, but retaining comfortable side margins.
- Density: Low density, utilizing significant negative space to draw focus to typography and key imagery.
- Evidence: Observed from the spacious gaps between 'Introduction' and 'Core Services', the pill shape of 'Learn More' buttons, and the sharp rectangular frames of the purple image panels.

## Sections

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

1. **Hero — Computer Vision At-Home Tests Hero** (Home)
   AI suggestion (97% confidence): Complete, substantial opening hero with a bold diagnostic-testing headline, company summary, contact CTA, location/year metadata, and distinctive full-bleed abstract imagery.
   Capture: 1440×1005px; page bounds 0–1005px of 9723px; source section ID: `3b747b31-f19c-49c6-9b92-6dbcc052a955`; image: https://media.designdetails.io/library/49985dee4e3cfa64f6df5359a831d7bf1b80d5f9e8131c9c2dfe80af3c5e7d62/3b747b31-f19c-49c6-9b92-6dbcc052a955.webp
   SECTION.md v3.2: `3b747b31-f19c-49c6-9b92-6dbcc052a955` (deterministic evidence; editorial review pending)
2. **Feature Card — Equipment Modernization Feature** (Home)
   AI suggestion (97% confidence): Complete, self-contained split feature card with icon, descriptive copy, CTA, and a distinctive purple image panel. It is the strongest fully visible representative of the repeated service-card pattern.
   Capture: 1440×774px; page bounds 4604–5378px of 9723px; source section ID: `01895f5a-a238-45d3-9ec6-9617ef654b01`; image: https://media.designdetails.io/library/bd41c03a4ceb9c237295b1df646b26ffcd17498377a4efc89b47c9e84a10cf50/01895f5a-a238-45d3-9ec6-9617ef654b01.webp
   SECTION.md v3.2: `01895f5a-a238-45d3-9ec6-9617ef654b01` (deterministic evidence; editorial review pending)
3. **Process — Complete Algorithmic Lifecycle Support** (Home)
   AI suggestion (98% confidence): Complete four-stage process section with a clear heading, numbered lifecycle steps, and a distinctive central orbit diagram.
   Capture: 1440×1065px; page bounds 5653–6718px of 9723px; source section ID: `fb2c8ea4-6d9c-421f-998c-ab227a3c326d`; image: https://media.designdetails.io/library/bf4fc9b3b008d2ec9413f6b24c97a65be328867ba794c8d317a4fc67b72ba3bb/fb2c8ea4-6d9c-421f-998c-ab227a3c326d.webp
   SECTION.md v3.2: `fb2c8ea4-6d9c-421f-998c-ab227a3c326d` (deterministic evidence; editorial review pending)
4. **Team — Meet the Healthcare Engineering Team** (Home)
   AI suggestion (95% confidence): Self-contained team showcase with a full-width workplace image, prominent team-focused headline, and an Explore Team call-to-action.
   Capture: 1440×699px; page bounds 6718–7417px of 9723px; source section ID: `8a8016cc-3423-45e5-b563-d5e6e3c24cb6`; image: https://media.designdetails.io/library/c70162cae07eed83d2e9df574482d2b1ea920a27358ddd3c2c462711f1dbfe2b/8a8016cc-3423-45e5-b563-d5e6e3c24cb6.webp
   SECTION.md v3.2: `8a8016cc-3423-45e5-b563-d5e6e3c24cb6` (deterministic evidence; editorial review pending)
5. **CTA — We're Here to Help** (Home)
   AI suggestion (91% confidence): Complete contact CTA pairing a concise support message with a prominent “Let's Connect” link and clear spacing before the footer.
   Capture: 1440×327px; page bounds 8790–9117px of 9723px; source section ID: `c466af3c-fac0-492c-8204-3436d48177aa`; image: https://media.designdetails.io/library/afc515e0da903dfd82a3bb569d9b98c992f4aa7bf3ac0aea6801d21557aae26b/section-manual-c466af3c-fac0-492c-8204-3436d48177aa-1791701953990.webp
   SECTION.md v3.2: `c466af3c-fac0-492c-8204-3436d48177aa` (deterministic evidence; editorial review pending)
6. **Footer — Scanbase Brand Footer** (Home)
   AI suggestion (98% confidence): Complete, substantial dark footer with navigation, oversized brand mark, company descriptor, attribution, and copyright details.
   Capture: 1440×594px; page bounds 9129–9723px of 9723px; source section ID: `df3f6fe1-2b9d-455d-8007-a1cecf0ac889`; image: https://media.designdetails.io/library/bde7d93652b9a31189f6248e76b7c865e360110648f2183130f9c553101ddcba/df3f6fe1-2b9d-455d-8007-a1cecf0ac889.webp
   SECTION.md v3.2: `df3f6fe1-2b9d-455d-8007-a1cecf0ac889` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/436563ea8a3c8eee09f384e464467f12db6c0592e3b83fd075c9fb971af3a06e/desktop_full-e1c69866-2026-10-11T03-45-26-345Z.webp
- Mobile screenshot: https://media.designdetails.io/library/eb92ad089c29523fb35ccbe8b083142881d6ecf680dca708ebc114d6f996599c/mobile_full-e1c69866-2026-10-11T03-46-11-701Z.webp
- Open Graph image: https://media.designdetails.io/library/3cf4707fa339f104895f468eae8e66aeeea8e999a986cd897d21e5083e954868/og_image-e1c69866-2026-10-11T03-45-37-199Z.webp
- Full-page video: https://media.designdetails.io/library/0000e599bec0e39c038c0780b4a8507ed3445a2ac78fcda8360a1d6b642487bb/motion-1791700124681.mp4
- Video poster: https://media.designdetails.io/library/a85ccaa1719db57255af18867eadad847c43c21874640f27617ac1053a2269bd/motion-poster-1791700124681.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
- Feature Card
- Primary Button
- Feature Collection
- Footer
- Split Image Text Panel
- Glassmorphic Feature Card

## Quality rubric

Overall: 52.1/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: A clean, well-organized B2B tech marketing site that executes a now-standard design template (Archivo/Geist typography, purple-navy palette, pill CTAs, split-panel service cards, glassmorphic grids, scroll-reveal motion) competently and consistently, but without a distinctive idea, bespoke visual system, or content-specific imagery that would lift it above a generic contemporary startup site.

- Typography (15%): 62 — A clear two-family system (Archivo for display/headings, Geist for body, with a single PT Mono accent) is applied consistently, with a legible scale from 80px display down to 18px body and intentional negative tracking. However, this exact pairing with aggressive negative letter-spacing has become a near-default convention in current B2B/SaaS templates, so the execution is competent rather than distinctive.
- Color (10%): 58 — The deep navy/vibrant purple/light-gray triad creates workable contrast across dark and light sections, and the palette is applied consistently (navy for lifecycle/footer, purple for service panel backgrounds, F0F4F7 canvas for light sections). It is a legible, high-contrast system, but the exact navy+purple+light-gray combination is extremely common in current tech marketing sites and shows little tension or subtlety beyond that convention.
- Layout (20%): 60 — Sections follow a repeatable, orderly rhythm: hero, intro statement, three stacked split-panel service blocks, a dark cyclical-process section, a team banner, a card grid, and a footer. Spacing is generous and consistent. However, each individual section is a recognizable stock composition (50/50 split panel, circular 'our process' diagram, full-bleed team photo with centered CTA, 2x2 translucent card grid) assembled in sequence rather than a bespoke layout system.
- Motion (20%): 55 — The site applies a consistent scroll-triggered vocabulary—mask-reveal slides for service images, fade-up for text, a parallax background in the lifecycle section, and a scale-down on the team photo. This is applied uniformly across sections, giving some cohesion, but the moments described (fade+translate, image mask-slide, background parallax) are standard scroll-reveal techniques widely used in template-built sites, and captured frames show long static holds between changes rather than evidence of refined choreography, timing or responsiveness.
- Originality (25%): 36 — Every major ingredient—Archivo+Geist pairing, purple/navy palette, pill-shaped buttons with inline arrows, glassmorphic translucent cards, 50/50 split image-text panels, scroll mask-reveal animations—is a widely used convention in current startup/SaaS marketing sites (especially YC-adjacent, Framer-style builds). Nothing here constitutes a hard-to-substitute idea specific to this company; swap the logo and copy and this could be numerous other B2B tech sites.
- Content (10%): 50 — Section structure maps to the company narrative (intro, services, process lifecycle, team, industry focus/offerings, contact), and copy is clearly organized. However, the imagery (abstract purple fiber/fabric textures, generic stock fabric swirls) is decorative filler rather than content specifically illustrating computer-vision diagnostics or at-home testing, weakening the tie between visuals and subject matter.

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

## Curator notes

A dark hero with streaking diagonal light beams gives a lab-like, high-tech mood before the page shifts to calm grey and white sections, so the switch itself signals a move from vision to explanation. Alternating purple and off-white service blocks with small icons break a long scrolling page into clear, scannable 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.