hedgehog lab — AI-native Digital Product Studio Landing Page

---
version: alpha
name: hedgehog lab — AI-native Digital Product Studio Landing Page
colors:
  canvas: '#0B151F'
  text: '#FFFFFF'
  observed-1: '#000000'
  observed-2: '#1873F2'
  observed-3: '#F0F0F0'
  observed-4: '#FFD1B0'
typography:
  heading:
    fontFamily: Montserrat, sans-serif
    fontSize: 44px
    fontWeight: 800
    lineHeight: 53.9968px
  body:
    fontFamily: Bitter, serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A bold product consultancy landing page with a media-led opening, studio introduction, client stories, engagement cards, featured work, editorial resources and an indigo contact band. 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 h2 sample uses Montserrat, sans-serif, 44px / 53.9968px, weight 800; supporting text uses 16px / 24px. Its corresponding mobile sample is 31.0101px / 38.0556px. 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-width media and color blocks alternate with constrained card layouts; mobile stacks content while retaining horizontally clipped story previews. Measured screenshot bounds: 1440 × 6541px desktop and 390 × 7264px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Large photography/media areas and card imagery supply depth while the page structure remains flat.

## Shapes
Broad full-width color blocks, large headings, rounded cards and compact links.

## Components
A bold product consultancy landing page with a media-led opening, studio introduction, client stories, engagement cards, featured work, editorial resources and an indigo contact band. High-contrast dark/navy and light surfaces, bright blue and indigo brand panels. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Explain engagement models in plain language and tie technical capabilities to a specific product challenge. 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.


## Capture scope
Viewport strips with overlapping gutters to avoid repeated fixed navigation; static scroll-state montage, not animation playback. Images preserve native rendered pixels; different vertical regions show their actual scroll positions. This is not a video.