# Cofactr — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.cofactr.com/
Captured: 2026-10-16
CSS measured: 2026-10-16T06:15:35.258Z at 1440×1000 — https://www.cofactr.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

Cofactr employs a clean, modern, and slightly technical aesthetic, combining a deep green canvas with stark white surfaces and bright, highly saturated green and blue accents. The layout relies on large typography, full-width background imagery, and distinct card-based sections with subtle border treatments. The stark contrast between the deep background and bright highlights gives it a sophisticated yet energetic corporate feel.

## Classification

- Industry: hardware
- Site type: Landing, Blog
- Business model: Software
- Styles: corporate, minimal, photographic, technical
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: fontAntiqueLegacy — weight 100; size 48px; line-height 52.8px; tracking normal; Regular (100% role confidence, computed values)
- Heading: fontAntiqueLegacy — weight 100; size 40px; line-height 44px; tracking -1.2px; Regular (95% role confidence, computed values)
- Body: fontInter — weight 400; size 16px; line-height 20.8px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Primary Action — primary action #38D059: color-6: computed rgb(56, 208, 89); AI role: Bright green (#38D059) used for high-visibility call-to-action buttons. (100% role confidence, computed values)
- Canvas — canvas #183028: color-1: computed rgb(24, 48, 40); AI role: Dark green (#183028) used as the primary background color for large sections of the site and the footer. (95% role confidence, computed values)
- Surface — surface #FFFFFF: color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for the background of the navigation bar, logo strip, and floating feature cards. (90% role confidence, computed values)
- Accent — accent #0041DB: color-10: computed rgb(0, 65, 219); AI role: Vibrant blue (#0041DB) used exclusively in the footer interactive block to draw attention. (90% role confidence, computed values)
- Border — border #E8E8E8: color-3: computed rgb(232, 232, 232); AI role: Light gray (#E8E8E8) used for borders around cards and UI elements. (85% role confidence, computed values)
- Muted Text — muted text #B5B5B5: color-9: computed rgb(181, 181, 181); AI role: Gray (#B5B5B5) used for secondary text and unselected states. (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": "fontAntiqueLegacy",
    "fontStack": "fontAntiqueLegacy, \"fontAntiqueLegacy Fallback\"",
    "weight": "100",
    "size": "24px",
    "lineHeight": "27.6px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 57,
    "contexts": [
      {
        "tag": "span",
        "text": "Trusted",
        "top": 1079,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "by",
        "top": 1079,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "leaders",
        "top": 1079,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "p",
        "text": "Reclaim your team's bandwidth from admin grunt work. Redeploy that time to actually solving problems",
        "top": 3192,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Cut your procurement timeline from months to days. When your competition is still waiting on quotes,",
        "top": 3192,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Grow your output without growing your headcount. Handle 10x the volume with the team you have—becaus",
        "top": 3192,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "fontAntiqueLegacy",
    "fontStack": "fontAntiqueLegacy, \"fontAntiqueLegacy Fallback\"",
    "weight": "100",
    "size": "40px",
    "lineHeight": "44px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "How",
        "top": 3307,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Companies",
        "top": 3307,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Improve",
        "top": 3307,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "fontAntiqueLegacy",
    "fontStack": "fontAntiqueLegacy, \"fontAntiqueLegacy Fallback\"",
    "weight": "100",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "From BOM to Build.",
        "top": 407,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Electronics Supply Chain Infrastructure.",
        "top": 407,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "300",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "One cart. Every supplier. Done in minutes.",
        "top": 1748,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Supplier and inventory data built for critical industries.",
        "top": 1890,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Industry's fastest component kitting with real-time stock visibility.",
        "top": 2032,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Get to the Good Parts",
        "top": 561,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Built for manufacturers that can't risk component shortages, compliance gaps, or production delays.",
        "top": 561,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "AI-powered component intelligence, procurement execution, and ITAR-registered warehousing and kittin",
        "top": 561,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "fontAntiqueLegacy",
    "fontStack": "fontAntiqueLegacy, \"fontAntiqueLegacy Fallback\"",
    "weight": "100",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "How Stoke Space Streamlined Logistics with Cofactr",
        "top": 3525,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "How Neros Technologies Scaled their Hardware Operations by 10X",
        "top": 4609,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "How Salient Motion Reduced their Production Cycles to 3 Weeks with Cofactr",
        "top": 5693,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Cofactr",
        "top": 37,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Get Started",
        "top": 16,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Start Free",
        "top": 648,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "fontAntiqueLegacy",
    "fontStack": "fontAntiqueLegacy, \"fontAntiqueLegacy Fallback\"",
    "weight": "100",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 3444,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 4528,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 5612,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "text",
        "text": "Fewer procurement tasks",
        "top": 3071,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "More than 40% time savings",
        "top": 2670,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "fontAntiqueLegacy",
    "fontStack": "fontAntiqueLegacy, \"fontAntiqueLegacy Fallback\"",
    "weight": "100",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "Home",
        "top": 7223,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Products",
        "top": 7242,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Solutions",
        "top": 7261,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Products",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Solutions",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Platform",
        "top": 17,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "fontInter",
    "fontStack": "fontInter, \"fontInter Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Compliance and Traceability",
        "top": 64,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Product Tours",
        "top": 64,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Case Studies",
        "top": 64,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#183028",
    "alpha": 1,
    "cssValue": "rgb(24, 48, 40)",
    "count": 271,
    "contexts": [
      {
        "tag": "a",
        "text": "Cofactr",
        "top": 16,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Products",
        "top": 17,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Trusted",
        "top": 1079,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FAFAFA",
    "alpha": 1,
    "cssValue": "rgb(250, 250, 250)",
    "count": 7,
    "contexts": [
      {
        "tag": "section",
        "text": "Results that keep engineering moving and growth on track.Book a DemoFewer procurement tasksMore than",
        "top": 2383,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2993,
        "property": "svg-fill"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 2986,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#E8E8E8",
    "alpha": 1,
    "cssValue": "rgb(232, 232, 232)",
    "count": 42,
    "contexts": [
      {
        "tag": "a",
        "text": "Start Free",
        "top": 648,
        "property": "border"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 3058,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "Results that keep engineering moving and growth on track.Book a DemoMore than 40% time savings in pr",
        "top": 2383,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#B4B4B4",
    "alpha": 0.2,
    "cssValue": "color(srgb 0.709804 0.709804 0.709804 / 0.2)",
    "count": 19,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductsSolutionsCompliance and TraceabilityPlatformProduct ToursResourcesCase StudiesArticlesLogin",
        "top": 16,
        "property": "border"
      },
      {
        "tag": "ul",
        "text": "Compliance and Traceability",
        "top": 63,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "",
        "top": 3419,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 48,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductsSolutionsCompliance and TraceabilityPlatformProduct ToursResourcesCase StudiesArticlesLogin",
        "top": 16,
        "property": "background"
      },
      {
        "tag": "ul",
        "text": "Compliance and Traceability",
        "top": 63,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 427,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#38D059",
    "alpha": 1,
    "cssValue": "rgb(56, 208, 89)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Get Started",
        "top": 16,
        "property": "control-background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2633,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 18,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 7144,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 7193,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FE4B25",
    "alpha": 1,
    "cssValue": "rgb(254, 75, 37)",
    "count": 6,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2518,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 2533,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#B5B5B5",
    "alpha": 1,
    "cssValue": "rgb(181, 181, 181)",
    "count": 49,
    "contexts": [
      {
        "tag": "span",
        "text": "Cofactr",
        "top": 1584,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Learn More",
        "top": 1801,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1803,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#0041DB",
    "alpha": 1,
    "cssValue": "rgb(0, 65, 219)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Get to the Good Parts.Keep lines running.De-risk schedules.Reclaim engineering time.Materials arrive",
        "top": 7171,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#59A986",
    "alpha": 1,
    "cssValue": "rgb(89, 169, 134)",
    "count": 15,
    "contexts": [
      {
        "tag": "p",
        "text": "One cart. Every supplier. Done in minutes.",
        "top": 1748,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1850,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Discover Cofactr",
        "top": 7195,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#D6F1DB",
    "alpha": 1,
    "cssValue": "rgb(214, 241, 219)",
    "count": 25,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 26,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Cofactr",
        "top": 37,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1992,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#B6B6B6",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0.709804 0.709804 0.709804 / 0.3)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Electronics Procurement and Purchasing",
        "top": 7301,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "",
        "top": 7400,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#59A984",
    "alpha": 0.30196078431372547,
    "cssValue": "lab(63.4343 -32.0908 10.1801 / 0.3)",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "Electronics Procurement and PurchasingOne cart. Every supplier. Done in minutes.",
        "top": 1699,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#0E1C18",
    "alpha": 1,
    "cssValue": "rgb(14, 28, 24)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Cofactr",
        "top": 16,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#DADADA",
    "alpha": 1,
    "cssValue": "rgb(218, 218, 218)",
    "count": 10,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 3127,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#11231D",
    "alpha": 1,
    "cssValue": "rgb(17, 35, 29)",
    "count": 3,
    "contexts": [
      {
        "tag": "hr",
        "text": "",
        "top": 7522,
        "property": "border"
      },
      {
        "tag": "hr",
        "text": "",
        "top": 7187,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#225E2F",
    "alpha": 0.14901960784313725,
    "cssValue": "lab(35.562 -28.4374 20.3057 / 0.15)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Get Started",
        "top": 16,
        "property": "border"
      }
    ]
  }
]
```

### 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 padding between sections (often 100px+), with tight, structured padding within grid-based cards.
- Corner style: Mix of sharp corners on structural blocks and rounded corners on floating panels and icons.
- Radius: Buttons are fully rounded (pill shape), while feature cards have subtle rounding (approx 8-12px).
- Borders: Thin, solid 1px borders used to delineate cards and sections, primarily in light gray or translucent greens.
- Buttons: Solid fill primary buttons with pill-shaped radii and high-contrast text. Ghost buttons used for secondary actions.
- Content width: A constrained central container for text (approx 1200px), with background images and canvas colors breaking out to full width.
- Density: Spacious layout, utilizing negative space to emphasize large typography and key imagery.
- Evidence: Observed via screenshot inspection: pill-shaped 'Get Started' button, thin borders on white cards, full-bleed hero video, and distinct sections with dark green and white backgrounds.

## Sections

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

1. **Hero — Electronics Supply Chain Hero** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with navigation, bold split headline, supporting value propositions, CTA, and a distinctive full-bleed drone image.
   Capture: 1440×1002px; page bounds 0–1002px of 6787px; source section ID: `a7b65466-856c-49cd-9f34-99d18237b834`; image: https://media.designdetails.io/library/fef20acec235bc4535335c9b9147ef6548e64400ee1963d70d2ab64d57060523/a7b65466-856c-49cd-9f34-99d18237b834.webp
   SECTION.md v3.2: `a7b65466-856c-49cd-9f34-99d18237b834` (deterministic evidence; editorial review pending)
2. **Features — Trusted by leaders to deliver their most mission-critical hardware on…** (Home)
   Reusable feature composition from Home, organized around “Trusted by leaders to deliver their most mission-critical hardware on…”.
   Capture: 1440×383px; page bounds 999–1382px of 6787px; source section ID: `0befb281-2fe5-47ba-ad53-ef648e6a7d06`; image: https://media.designdetails.io/library/21eab2ba67e6ba17adef6f72c75fa1a37907355a0f738724f7297d265aad5a5f/section_crop-0befb281-2026-10-16T06-15-44-255Z.webp
   SECTION.md v3.2: `0befb281-2fe5-47ba-ad53-ef648e6a7d06` (deterministic evidence; editorial review pending)
3. **Feature Grid — Procure-to-Ship Capabilities** (Home)
   AI suggestion (96% confidence): Self-contained dark capabilities section with an introductory statement and a complete three-card stack covering procurement, compliance, and storage.
   Capture: 1440×1002px; page bounds 1380–2382px of 6787px; source section ID: `a445f0b1-eda4-4206-90e8-1fbe77aef33f`; image: https://media.designdetails.io/library/2a758950ff82afa07c5acc50857dfa569a66b16e75efde4c462284ff5efaaf1f/a445f0b1-eda4-4206-90e8-1fbe77aef33f.webp
   SECTION.md v3.2: `a445f0b1-eda4-4206-90e8-1fbe77aef33f` (deterministic evidence; editorial review pending)
4. **Editorial — Stoke Operations Case Study** (Home)
   AI suggestion (97% confidence): Complete customer case-study module with its heading, large aerospace image, company context, solution tags, summary copy, and Learn More action. It is the strongest representative of the repeated case-study pattern.
   Capture: 1440×933px; page bounds 3365–4298px of 6787px; source section ID: `a75f4dd8-058e-437f-a96e-58d3e95ed63c`; image: https://media.designdetails.io/library/b19fdbb1224fae6b43a7be252bec52212171ab72d9a30dcd35ce644b74e2fbe6/a75f4dd8-058e-437f-a96e-58d3e95ed63c.webp
   SECTION.md v3.2: `a75f4dd8-058e-437f-a96e-58d3e95ed63c` (deterministic evidence; editorial review pending)
5. **CTA — Hardware Teams Book Demo CTA** (Home)
   AI suggestion (96% confidence): Complete, self-contained conversion section with a concise hardware-team value proposition, centered Book Demo button, and distinctive outlined geometric framing.
   Capture: 1440×803px; page bounds 5289–6092px of 6787px; source section ID: `00c7ea72-00c7-4912-a8df-f162ffe60883`; image: https://media.designdetails.io/library/4742361d80aa1e08a25ef275681ec26cda2bd86154e4ae87961533ed34d1b08a/00c7ea72-00c7-4912-a8df-f162ffe60883.webp
   SECTION.md v3.2: `00c7ea72-00c7-4912-a8df-f162ffe60883` (deterministic evidence; editorial review pending)
6. **Footer — Supply Chain Conversion Footer** (Home)
   AI suggestion (98% confidence): Complete substantial footer combining grouped navigation, social links, a solutions spotlight, bold contact CTA, legal links, branding, and copyright details.
   Capture: 1440×695px; page bounds 6092–6787px of 6787px; source section ID: `d639f65c-a9b3-4b9f-afea-b7a0b1a637b1`; image: https://media.designdetails.io/library/8671fe3710fc738f089fcb96a1ab8835dcd805df755251297f241c87d905acbe/d639f65c-a9b3-4b9f-afea-b7a0b1a637b1.webp
   SECTION.md v3.2: `d639f65c-a9b3-4b9f-afea-b7a0b1a637b1` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/486e5985297b4ad526469542cfc7ef574daec45bfc7f3211f12870873c0019ae/desktop_full-b080a947-2026-10-16T06-15-35-278Z.webp
- Mobile screenshot: https://media.designdetails.io/library/bec91483875cff40241ad7d49035988b3337c29ea8b10169b10d1069430a0a21/mobile_full-b080a947-2026-10-16T06-16-11-721Z.webp
- Open Graph image: https://media.designdetails.io/library/cb574e42c48fd6c85454d4e95895fcd3f3cec5bdfd52d96a25e90ffa90aa6dbb/og_image-b080a947-2026-10-16T06-15-43-404Z.webp
- Full-page video: https://media.designdetails.io/library/acfbfd03f5f8ad4d3a2ad65b7d77b476a1591d74824e3afe5054a90efbaf2534/motion-1792131948029.mp4
- Video poster: https://media.designdetails.io/library/347139f1cddc5b82298df62ecd4a5ce27b354d3c92ed713d9343325662684d75/motion-poster-1792131948029.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Logo Strip
- Feature Collection
- Editorial Card
- Primary Button
- Footer
- Scroll Linked Case Study Viewer
- Interactive Footer Accent

## Quality rubric

Overall: 56.6/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Cofactr is a professionally built, quantifiably restrained B2B marketing site with a disciplined color system and content genuinely tailored to its hardware/aerospace audience, executed via motion and layout patterns distributed sensibly across sections. However, nearly every component and interaction is a recognizable convention from the current B2B SaaS playbook, and its one attempt at a distinctive gesture (the footer's interactive accent) is small and somewhat disconnected, keeping the overall experience at a solid, competent level rather than a differentiated or landmark one.

- Typography (15%): 60 — A deliberate two-family system (thin-weight AntiqueLegacy for display/headings, Inter for body at multiple weights) is applied consistently from the 48px hero through 40px section titles down to 12-16px body and UI text, with negative tracking tightened on larger sizes. This is a legitimate hierarchy, but the thin-display-over-dark-background move is a very common SaaS convention and the body text system (Inter 300/400/500) is standard utility typesetting rather than a distinctive voice.
- Color (10%): 62 — The palette is tight and purposeful: a near-black-green canvas (#183028), white card surfaces, a single saturated green (#38D059) reserved for primary CTAs, and one rare cobalt blue (#0041DB) used exclusively in the footer's interactive block to create a deliberate surprise moment. Muted grays and pale green tints round out secondary text/borders. This restraint and single-use accent strategy is a genuine strength.
- Layout (20%): 60 — A conventional but competently executed SaaS structure: full-bleed video hero, logo strip, dark feature-card stack, light stat/chart section, a scroll-linked case-study viewer (text column driving a background image change), and a dense footer with sitemap plus an interactive panel. Spacing rhythm (100px+ section gaps), consistent card radii, and a constrained ~1200px text column against full-bleed imagery show real grid discipline, but the overall assembly of sections is a template-familiar sequence seen widely in B2B marketing sites.
- Motion (20%): 62 — Motion is applied as a coherent system rather than a single hero trick: a sticky nav that shifts background on scroll, staggered fade/slide-ins for logos and feature cards, an animated line-drawing chart reveal, a scroll-linked case-study image swap tied to a vertical text scrubber, and an footer block whose copy changes with link interaction. Multiple sections each carry a distinct, content-relevant motion treatment, which supports a 'good' rating, though the techniques themselves (fade-up, line-draw, scroll-tied crossfade) are common patterns rather than novel mechanics, and the observation notes choppiness/ambiguity in the footer interaction.
- Originality (25%): 42 — Individually, every component here — full-bleed hero video, monochrome logo strip, icon-led feature cards, animated stat chart, scroll-linked testimonial/case-study slider, and a footer CTA block — is a well-worn pattern across contemporary B2B/SaaS sites. The one attempt at a signature move (the footer's blue interactive message block) is a small, single-instance gesture rather than a structural idea that recurs or reorganizes the experience. The dark-green/bright-green identity differentiates the brand but not the underlying design system, which remains template-shaped.
- Content (10%): 65 — Content and design are well matched to the audience: specific named clients (Stoke, Neros, Salient, Snap, Amazon Robotics), concrete quantified outcomes (85% less line stoppage, 40% time savings, 10x scale), and imagery drawn directly from the hardware/aerospace domain (drones, rockets, robotic arms) reinforce the procurement-for-hardware-manufacturers positioning rather than using generic stock photography.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A full-bleed drone photo signals hard hardware rather than generic software, while a dark green band with rounded icon cards breaks the page into clear topics. Large case study photos of rockets and robotic arms, paired with blunt metrics like percentage drops, give manufacturers quick proof the system works.

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