Goodspeed — AI-native Website Agency Landing Page

---
version: alpha
name: Goodspeed — AI-native Website Agency Landing Page
colors:
  canvas: '#19211C'
  text: '#FBFDFC'
  observed-1: '#0000EE'
  observed-2: '#000000'
  observed-3: '#C6DD66'
  observed-4: '#242F28'
typography:
  heading:
    fontFamily: '"Acid Grotesk Medium", "Acid Grotesk Medium Placeholder", sans-serif'
    fontSize: 52px
    fontWeight: 500
    lineHeight: 62.4px
  body:
    fontFamily: Geist, "Geist Placeholder", sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
---

## Overview
A service-agency landing page with a photographic project hero, lime action, credibility strip, five illustrated service offers, work samples, delivery process, comparison matrix and founder-contact form. 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 "Acid Grotesk Medium", "Acid Grotesk Medium Placeholder", sans-serif, 52px / 62.4px, weight 500; supporting text uses 16px / 24px. Its corresponding mobile sample is 40px / 48px. 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
Full-bleed opening media leads into alternating light and forest-green sections. Service cards form a three-plus-two desktop arrangement; mobile stacks the content. The hero records one carousel frame, not every slide. Measured screenshot bounds: 1440 × 9937px desktop and 390 × 10460px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Thin outlines on light cards, tinted illustration panels and photographic project mockups supply restrained depth.

## Shapes
Moderately rounded cards, compact rectangular lime actions, fine dividers and large full-bleed media.

## Components
A service-agency landing page with a photographic project hero, lime action, credibility strip, five illustrated service offers, work samples, delivery process, comparison matrix and founder-contact form. Alternating white and forest-green sections with lime actions and muted sage supporting text. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Keep service scope, starting price and delivery expectation adjacent. Let the portfolio support the offer instead of replacing a clear explanation of what is sold. 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.