---
version: alpha
name: Simple Analytics — illustrated consent-gap landing page
colors:
  surface: '#FCFCFC'
  ink: '#2A373A'
  accent: '#FF4F64'
  soft: '#E7F4F4'
  diagram: '#63D8F5'
  primary: '#2A373A'
typography:
  primary:
    fontFamily: SpaceGrotesk
    fontSize: 36px
    fontWeight: 700
    lineHeight: 45px
  body:
    fontFamily: SpaceGrotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  control:
    fontFamily: SpaceGrotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  sampled-control:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 8px
---

## Overview

A light analytics marketing page using Space Grotesk, coral actions, cyan comparison diagrams, graph-shaped section dividers, explanatory cards and a product preview.

Source: https://www.simpleanalytics.com/. Captured 2026-10-08T06:04:29.538312+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed palette roles: surface: #FCFCFC; ink: #2A373A; accent: #FF4F64; soft: #E7F4F4; diagram: #63D8F5; primary: #2A373A. These values come from computed source styles or inspected flat screenshot surfaces. Keep accent colors tied to their documented roles rather than tinting every text element.

## Typography

The primary sampled text uses SpaceGrotesk at 36px / 45px, weight 700, with a desktop width of 592.00px. The matching mobile sample uses 36px / 45px across 358.00px. Tokens are measured computed styles, not an inferred global brand scale.

## Layout

Build a split opening with small evidence badges and a compact promise on the left, and a softly bordered comparison chart on the right. Put a coral demo action beside an understated live-dashboard link. Carry the graph motif into jagged section dividers. Follow with a consent-flow illustration, a three-card comparison, integrations/export architecture, privacy explanations, customer logos, product preview and final demo invitation.

Full desktop page at 1440px width, document height 7225px. Mobile evidence is a 390×844px opening viewport unless otherwise stated.

Responsive evidence: The heading stays 36px/45px at 390px but wraps across more lines within a 358px column. Evidence badges wrap into multiple rows; the navigation becomes logo, theme icon and menu. The diagram moves below copy and paired actions. The mobile opening, rather than every downstream breakpoint, was inspected.

## Elevation & Depth

Pastel cyan and pink washes sit behind thin bordered white panels. The primary coral action casts a subtle colored shadow. Diagram layers and product callouts use light shadows, while the graph dividers stay as thin strokes. Exact shadow blur, hover elevation and animation timing were not measured.

## Shapes

The sampled control has 8px corner radius and 8px 12px padding. These values belong to that control, not every surface. Additional spacing or breakpoint values would be implementation estimates, not measurements from this capture.

## Components

The charts are expressly illustrative source diagrams, not performance measurements. Preserve qualifications such as SOC 2 being in progress; do not convert badges into unsupported certification claims. A compact comparison graphic contains tightly packed labels in the source; treat it as artwork, not a model for readable data tables. Theme switching, menus and the live dashboard were not tested.

## Do's and Don'ts

- Do preserve the documented hierarchy, content order, and observed responsive changes.
- Do keep source labels and attribution with their associated controls, diagrams and quotations.
- Do treat prices, metrics and marketing claims as dated source content rather than verified outcomes.
- Don't invent interaction states, validation results, successful submissions or additional breakpoints.
- Don't copy low-contrast or undersized text blindly; improve readability when adapting the pattern.