Lazarev — AI Product Design Agency Landing Page

---
version: alpha
name: Lazarev — AI Product Design Agency Landing Page
colors:
  canvas: '#E9E9E9'
  text: '#000000'
  observed-1: '#FFFFFF'
  observed-2: '#697382'
  observed-3: '#BBC2CC'
typography:
  heading:
    fontFamily: archivo, Arial, sans-serif
    fontSize: 20px
    fontWeight: 500
    lineHeight: 24px
  body:
    fontFamily: pragati-narrow, Impact, sans-serif
    fontSize: 56px
    fontWeight: 400
    lineHeight: 48px
---

## Overview
A dense editorial AI-design agency landing page with a laurel-framed condensed headline, white service panels, green product illustrations, case-study cards, process rows and gradient conversion panels. 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 archivo, Arial, sans-serif, 20px / 24px, weight 500; supporting text uses 56px / 48px. Its corresponding mobile sample is 14.5116px / 18.1395px. 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
Centered condensed headings organize large alternating content blocks. Desktop panels pair copy and images; mobile stacks them. Static capture does not reproduce the scroll animations or carousel transitions. Measured screenshot bounds: 1440 × 21028px desktop and 390 × 21545px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Mostly flat white panels; glossy green interface illustrations and sculptural award imagery supply depth.

## Shapes
Tall condensed headlines, small black capsule actions, laurel artwork and closely aligned rectangular story cards.

## Components
A dense editorial AI-design agency landing page with a laurel-framed condensed headline, white service panels, green product illustrations, case-study cards, process rows and gradient conversion panels. Light gray canvas, black text and buttons, white editorial cards and dark blue-to-green callout gradients. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Separate service scope, process and results. Keep the compressed typography readable and give dense case studies enough whitespace. 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.