---
version: alpha
name: thoughtbot — Engineering and AI Services Landing Page
colors:
  canvas: '#201313'
  text: '#FAF9F9'
  observed-1: '#EAE6E4'
  observed-2: '#FFFFFF'
  observed-3: '#E03131'
  observed-4: '#C1BAB7'
typography:
  heading:
    fontFamily: Cosmica, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 49.5px
    fontWeight: 700
    lineHeight: 56.925px
  body:
    fontFamily: PPMori, "Helvetica Neue", Helvetica, Arial, sans-serif
    fontSize: 20.25px
    fontWeight: 400
    lineHeight: 30.375px
---

## Overview
A warm dark consultancy landing page pairing a people-led split hero with a featured health-product case study, service links, client marks, an AI-workflow section and a short closing invitation. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This is a complete page/screen capture, not an isolated element crop.

## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.

## Typography
The selected h1 sample uses Cosmica, "Helvetica Neue", Helvetica, Arial, sans-serif, 49.5px / 56.925px, weight 700; supporting text uses 20.25px / 30.375px. Its corresponding mobile sample is 36px / 41.4px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.

## Layout
The desktop hero pairs copy with three portrait cutouts; service stories and illustrations alternate before a three-card project grid and resource columns. Mobile stacks the hero and simplifies navigation. Measured screenshot bounds: 1440 × 7900px desktop and 390 × 10819px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Flat editorial surfaces use color contrast rather than large shadows; project imagery adds depth.

## Shapes
Asymmetric rounded portrait masks, red capsule actions, monospaced eyebrows and rounded project cards.

## Components
A warm dark consultancy landing page pairing a people-led split hero with a featured health-product case study, service links, client marks, an AI-workflow section and a short closing invitation. Warm near-black and brown surfaces, off-white type, red pill actions and purple/teal illustrations. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Use real people and concrete delivered work to support a high-trust engineering offer. Keep primary contact actions distinct from quiet editorial links. Reuse layout principles, not client logos, testimonials, proprietary artwork or source performance claims. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.