# MECHA — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://mecha-xyz.webflow.io/
Captured: 2026-11-01
CSS measured: 2026-11-01T08:10:23.977Z at 1440×1000 — https://mecha-xyz.webflow.io/
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

MECHA's website employs a minimalist, editorial design language characterized by stark black-and-white palettes, thin dividing lines, and high-contrast serif typography. The layout relies heavily on a split-screen approach with a fixed left sidebar and a scrollable main content area featuring parallax image grids and prominent typography. A deep maroon accent color is used sparingly for primary actions.

## Classification

- Industry: other
- Site type: Blog
- Business model: Software
- Styles: minimal, editorial, corporate, split-screen-layout, high-contrast-serif
- Platform: Webflow
- Technology: GSAP, Three.js

## Typography

- Display: Flecha M — weight 400; size 80px; line-height 73.6px; tracking -1.6px; Regular (95% role confidence, computed values)
- Heading: Flecha M — weight 400; size 60px; line-height 55.2px; tracking -1.2px; Regular (95% role confidence, computed values)
- Body: Neue Haas Grotesk — weight 400; size 12px; line-height 15.8px; tracking 0.2px; Regular (90% role confidence, computed values)
- Mono: Neue Haas Grotesk — weight 400; size 10px; line-height 15px; tracking 0.1px; uppercase (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background color across the entire site. (95% role confidence, computed values)
- Text — text #262933: color-3: computed rgb(38, 41, 51); AI role: Dark grey/almost black (#262933) used for the majority of headings and standard text. (95% role confidence, computed values)
- Primary Action — primary action #911A46: color-9: computed rgb(145, 26, 70); AI role: Deep maroon (#911A46) used exclusively for main call-to-action buttons ('Join the revolution', 'Send message'). (95% 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": "Neue Haas Grotesk",
    "fontStack": "\"Neue Haas Grotesk\", Verdana, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "15.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Mecha Capital's Tomorrow Recycling uses AI and robotics to boost",
        "top": 1392,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "recycling. In eight months, automation raised recovery by 25%, cut",
        "top": 1408,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "manual work, halved Greenville plant staff, and GreenWay saves $1M",
        "top": 1424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Neue Haas Grotesk",
    "fontStack": "\"Neue Haas Grotesk\", Verdana, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "0.1px",
    "traits": "uppercase",
    "count": 134,
    "contexts": [
      {
        "tag": "div",
        "text": "INVESTMENTS",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Team",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Contact",
        "top": 33,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Flecha M",
    "fontStack": "\"Flecha M\", Verdana, sans-serif",
    "weight": "400",
    "size": "60px",
    "lineHeight": "55.2px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Robotics will knock over the",
        "top": 77,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "global economy. Mecha deploys",
        "top": 132,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "physical automation into legacy",
        "top": 187,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Flecha M",
    "fontStack": "\"Flecha M\", Verdana, sans-serif",
    "weight": "400",
    "size": "80px",
    "lineHeight": "73.6px",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Tomorrow",
        "top": 1171,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Recycling",
        "top": 1250,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Aescape",
        "top": 3962,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Neue Haas Grotesk",
    "fontStack": "\"Neue Haas Grotesk\", Verdana, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "23px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Join the revolution",
        "top": 990,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Send message",
        "top": 12733,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 11,
    "contexts": [
      {
        "tag": "body",
        "text": "PreviousNextCloseFuture of robotics begins hereInvest with us or share an opportunitiesName*Email*Me",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": -4,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "",
        "top": -4,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#D3DBDE",
    "alpha": 1,
    "cssValue": "rgb(211, 219, 222)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#262933",
    "alpha": 1,
    "cssValue": "rgb(38, 41, 51)",
    "count": 145,
    "contexts": [
      {
        "tag": "a",
        "text": "INVESTMENTS",
        "top": 28,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "INVESTMENTS",
        "top": 33,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 676,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#EBF0F0",
    "alpha": 1,
    "cssValue": "rgb(235, 240, 240)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": ".viewport-video video { width: 100%; height: 100%; object-fit: cover; /* lub contain */ } .viewport-",
        "top": 1784,
        "property": "background"
      },
      {
        "tag": "video",
        "text": "",
        "top": 3143,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#E9EDEF",
    "alpha": 1,
    "cssValue": "rgb(233, 237, 239)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "window.addEventListener('load', function () { setTimeout(function () { var wrap = document.querySele",
        "top": 648,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#EBEAE0",
    "alpha": 1,
    "cssValue": "rgb(235, 234, 224)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": ".viewport-video video { width: 100%; height: 100%; object-fit: cover; /* lub contain */ } .viewport-",
        "top": 7267,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#262833",
    "alpha": 0.45098039215686275,
    "cssValue": "rgba(38, 41, 51, 0.45)",
    "count": 103,
    "contexts": [
      {
        "tag": "div",
        "text": "02",
        "top": 489,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "tomorrowrecycling.com",
        "top": 1046,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 49,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 28,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#911A46",
    "alpha": 1,
    "cssValue": "rgb(145, 26, 70)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Join the revolution",
        "top": 930,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Send message",
        "top": 12672,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#262A34",
    "alpha": 0.6,
    "cssValue": "rgba(38, 41, 51, 0.6)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Mecha Capital's Tomorrow Recycling uses AI and robotics to boost",
        "top": 1392,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#C5F0F7",
    "alpha": 1,
    "cssValue": "rgb(197, 240, 247)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 5483,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(0, 0, 0, 0.15)",
    "count": 8,
    "contexts": [
      {
        "tag": "img",
        "text": "",
        "top": 2547,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 8052,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#95979C",
    "alpha": 1,
    "cssValue": "rgb(149, 151, 156)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Contact",
        "top": 33,
        "property": "text"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous use of whitespace, particularly in the left sidebar and around major headings, creating a spacious, editorial feel. Content blocks are often separated by substantial vertical gaps.
- Corner style: Sharp, 0px border radii are used consistently on images, form fields, and buttons, reinforcing the brutalist/minimalist aesthetic.
- Radius: Buttons and containers appear completely square without rounded corners.
- Borders: Thin, 1px solid lines (often light grey) are a defining structural element, used to separate list items, define input fields, and structure the layout.
- Buttons: Solid fill (maroon) with sharp corners, white text, and occasionally a minimal icon (like a thin arrow).
- Content width: The layout is split, with the left sidebar taking up roughly 1/3 of the viewport and the main content area taking the remaining 2/3. Images within the main area are often sized fluidly but remain contained within their column.
- Density: Low density. The site relies heavily on negative space to draw attention to typography and imagery.
- Evidence: Visual inspection of the crops shows sharp corners on the maroon buttons and image blocks. Thin lines separate stats and team members. The layout clearly divides into a fixed left pane and a scrolling right pane.

## Sections

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

1. **Hero — Large serif statement with isometric logo** (Home)
   An oversized serif headline beside a line-drawn mark states the thesis at once, while the sparse layout and single crimson button keep focus.
   Capture: 1440×1000px; page bounds 0–1000px of 12752px; source section ID: `3b42b6b9-14d7-45d0-9483-bb310aeaa2b2`; image: https://media.designdetails.io/library/ea18a5f669f265a61c5948957e269bc090d9c93a69726bc3ba4aaf0d1591e62f/3b42b6b9-14d7-45d0-9483-bb310aeaa2b2.webp
   SECTION.md v3.2: `3b42b6b9-14d7-45d0-9483-bb310aeaa2b2` (deterministic evidence; editorial review pending)
2. **Gallery — Portfolio case with scattered image collage** (Home)
   A small metrics table and offset photos and drawings give a quick read of results, and the staggered layout adds rhythm while scrolling.
   Capture: 960×600px; page bounds 1000–3786px of 12752px; source section ID: `841e2f40-b29b-4d4a-9995-46a0d0153379`; image: https://media.designdetails.io/library/e0afc1765a511683563d69394083ff11e83600acc4fd9b5884dbb3ff730ec586/841e2f40-b29b-4d4a-9995-46a0d0153379.webp
   SECTION.md v3.2: `841e2f40-b29b-4d4a-9995-46a0d0153379` (deterministic evidence; editorial review pending)
3. **Gallery — Portfolio case with metrics and imagery** (Home)
   Repeating the same heading, description and data-table format makes cases easy to compare, and the varied image sizes keep the long scroll lively.
   Capture: 960×600px; page bounds 3786–6483px of 12752px; source section ID: `17c253f6-f0a2-42d4-91b1-eef04e32436a`; image: https://media.designdetails.io/library/f05e61a0524e96d7828104e58b0b8370c0e9b7799c770799da6c164d72f70e4b/17c253f6-f0a2-42d4-91b1-eef04e32436a.webp
   SECTION.md v3.2: `17c253f6-f0a2-42d4-91b1-eef04e32436a` (deterministic evidence; editorial review pending)
4. **Gallery — Firm overview with staggered image grid** (Home)
   The same case template is reused for the firm itself, and the pale tiles and halftone art keep the look consistent.
   Capture: 1440×2132px; page bounds 6483–8615px of 12752px; source section ID: `84c880e3-27b9-457a-9579-b1eccf8f7360`; image: https://media.designdetails.io/library/cba763933ba338990691e42a698d59145d443853246a0b63739fd26efc2a3e99/84c880e3-27b9-457a-9579-b1eccf8f7360.webp
   SECTION.md v3.2: `84c880e3-27b9-457a-9579-b1eccf8f7360` (deterministic evidence; editorial review pending)
5. **Team — Partner list with portraits and credentials** (Home)
   Each row pairs a small portrait with a bio and a ruled table of credentials, so visitors can scan expertise quickly.
   Capture: 960×600px; page bounds 8615–11754px of 12752px; source section ID: `0897c635-3a4f-4d76-8947-280160333c1c`; image: https://media.designdetails.io/library/473a25087902915091e78438ee0716a94ab831ac9f10c16087ec087cff92c965/0897c635-3a4f-4d76-8947-280160333c1c.webp
   SECTION.md v3.2: `0897c635-3a4f-4d76-8947-280160333c1c` (deterministic evidence; editorial review pending)
6. **Contact — Inquiry heading with minimal message form** (Home)
   A large heading over a sparse underlined form and a visible email address keep contact simple and low-friction.
   Capture: 1440×998px; page bounds 11754–12752px of 12752px; source section ID: `65249b57-b1c7-484a-b8dd-c44fd1809567`; image: https://media.designdetails.io/library/f5614c483c7ff9c3ff574304907002bfcb1f2cc509e80890f50f4fae60faacd1/65249b57-b1c7-484a-b8dd-c44fd1809567.webp
   SECTION.md v3.2: `65249b57-b1c7-484a-b8dd-c44fd1809567` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/ce588be6cf9bfe4180a4379c8c244cda3f37e4390bc46033d14839e3beade196/desktop_full-d6c06e8b-2026-11-01T08-10-23-993Z.webp
- Mobile screenshot: https://media.designdetails.io/library/6d1466bb5d12955bf857b9b594b8c9af805f430d2c0e84dbc15bf309566a266a/mobile_full-d6c06e8b-2026-11-01T08-10-57-319Z.webp
- Open Graph image: https://media.designdetails.io/library/f87d0dc1f5e7b9d2a78fa572e78046fe5e5aa0bd796ec81d0a90f7dc06f260d9/og_image-d6c06e8b-2026-11-01T08-10-32-563Z.webp
- Full-page video: https://media.designdetails.io/library/092a87c1c31ef7a5e7bf2c53a83a674dbcda4cd9bcf0cc5e961463de935d504a/motion-1793521125927.mp4
- Video poster: https://media.designdetails.io/library/8c2fcc6b9f4fe79a5ea46be0e442c46e2c92c0e07011084e764a63cb285deb14/motion-poster-1793521125927.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
- Split Hero
- Primary Button
- Stat Block
- Contact Form
- Gallery
- Horizontal Line Separators
- Fixed Sidebar Navigation

## Quality rubric

Overall: 55.45/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: MECHA presents a disciplined, editorial-styled investment site built on a fixed-sidebar/scrolling-content split with a serif-display-plus-utility-sans typographic system and a tightly restrained black/white/maroon palette. Execution within this chosen idiom is generally competent: the CTA color is used sparingly and consistently, headings have real presence, and content (team bios, portfolio stats, case imagery) is woven into the scroll rather than bolted on. However, the design relies on a single documented motion effect (parallax), the image grid in several stretches reads as loosely scattered rather than systematically composed, and at least one stat block appears duplicated verbatim across unrelated companies, suggesting template reuse over bespoke craft. Most significantly, the overall approach—split-screen fixed nav, serif display headlines, parallax image grids—is a familiar contemporary portfolio-site convention rather than a set of hard-to-substitute original ideas. Taken together the site is a solid, competently executed editorial template rather than a landmark or even strongly differentiated piece of design.

- Typography (15%): 64 — A clear two-tier system pairs a serif display face (Flecha M, 60-80px, tight tracking) with a small-caps sans utility face (Neue Haas Grotesk) for labels/nav, producing a recognizable editorial hierarchy. However, body copy sits at a very small 12px with low-contrast grey (rgba 0.6), stat labels/values are also tiny, and there is no visible intermediate size between 16px UI text and 55-80px display, leaving a thin hierarchy for secondary content.
- Color (10%): 58 — The palette is a disciplined near-monochrome (white canvas, near-black text) with a single deep maroon reserved strictly for CTAs, which is a coherent and purposeful restraint. But the system is thin: aside from the maroon accent there is no secondary color used to differentiate content sections (recycling vs. wellness vs. team), and several near-white greys (#EBF0F0, #E9EDEF, #EBEAE0) appear to be incidental image/video container backgrounds rather than an intentional tonal system.
- Layout (20%): 65 — A persistent split-screen with fixed left sidebar navigation and scrolling right content is executed consistently across hero, portfolio case studies, team, and contact sections, with horizontal rule separators giving structural rhythm. The image grid asymmetry (crops at varying heights/widths) adds some visual interest. However the right column devolves into loosely scattered image blocks with large uneven whitespace gaps (e.g., single images floating with no clear grid discipline at y=1585, y=4755), and the stat-block/team rows repeat an identical two-column list pattern many times without variation, reading as repetitive rather than intentionally composed.
- Motion (20%): 48 — The only documented motion is parallax scrolling on grid images, observed moving at different speeds while scrolling down and reversing on scroll up — a single, well-worn effect applied broadly rather than a varied or purposeful motion language. No evidence of hover states, transitions, entrance choreography, or scroll-triggered reveals beyond the parallax, and no easing/timing detail is confirmed.
- Originality (25%): 45 — Split-screen fixed-sidebar-plus-scrolling-content with serif display type and parallax image grids is a well-established editorial/VC-portfolio template seen across many Webflow sites; nothing here reads as a hard-to-substitute idea specific to MECHA's robotics thesis beyond generic isometric line-art illustrations and halftone imagery, which are decorative rather than conceptually load-bearing.
- Content (10%): 62 — Stats, portfolio company descriptions, and team credentials are woven directly into the scroll narrative with supporting imagery and iconography (recycling grading images, massage robot videos, team headshots), giving genuine substance rather than pure decoration. Yet the stat presentation is purely tabular text with no visual encoding, and some content (e.g., 'AUTOMATED SORTATION 76%' reused identically in both the recycling and Aescape sections) suggests templated rather than bespoke data per company, undercutting integration credibility.

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

## Curator notes

White space and isometric line-drawings of machinery give a technical, engineering feel, while large serif headlines keep the tone editorial rather than corporate. Each portfolio company repeats the same pattern of logo, stats row and photo pair, so figures like recovery rate and headcount reduction are easy to compare as you scroll.

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