Eleken — SaaS Product Design Agency Landing Page

---
version: alpha
name: Eleken — SaaS Product Design Agency Landing Page
colors:
  canvas: '#F6F4F2'
  text: '#1D1E22'
  observed-1: '#0000EE'
  observed-2: '#717171'
  observed-3: '#FFFFFF'
  observed-4: '#F9F7F3'
typography:
  heading:
    fontFamily: Regolapro, sans-serif
    fontSize: 52px
    fontWeight: 500
    lineHeight: 57.98px
  body:
    fontFamily: '"Inter Variable Local", Arial, sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 25.0001px
---

## Overview
A restrained warm-white SaaS agency page using a centered hero, evidence grid, problem-led service stories, interface case studies, AI delivery explanation and subscription trial CTA. 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 Regolapro, sans-serif, 52px / 57.98px, weight 500; supporting text uses 15px / 25.0001px. 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
Wide whitespace separates narrow editorial copy from full-width evidence grids and alternating illustrated service rows. Mobile stacks grid content and wraps the navigation into a compact menu. Measured screenshot bounds: 1440 × 20491px desktop and 390 × 25367px mobile. Two observed widths do not establish the exact CSS breakpoint rules.

## Elevation & Depth
Fine borders, pale surface changes and wireframe-style illustrations replace heavy shadows.

## Shapes
Compact rounded black buttons, rectangular evidence grids, line-art cubes and airy typographic sections.

## Components
A restrained warm-white SaaS agency page using a centered hero, evidence grid, problem-led service stories, interface case studies, AI delivery explanation and subscription trial CTA. Warm off-white canvas with near-black text and actions, white cards and restrained orange geometric accents. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.

## Do's and Don'ts
Organize service choices around the customer’s product problem and show a concrete interface next to each source case study. 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.